@bookklik/senangstart-css 0.2.7 → 0.2.9

package/dist/senangstart-css.min.js

@@ -1,222 +1,1310 @@
 /* SenangStart CSS v0.2.0 | MIT */
-(()=>{var y=["mob","tab","lap","desk","tw-sm","tw-md","tw-lg","tw-xl","tw-2xl"],w=["hover","focus","focus-visible","active","disabled","dark"],z=["flex","grid","block","inline","hidden","row","col","row-reverse","col-reverse","center","start","end","between","around","evenly","wrap","nowrap","absolute","relative","fixed","sticky"];function S(p){return typeof p!="string"?"":p.replace(/;/g,"_")}function _(p){return!(!p.property||typeof p.property!="string"||p.property.length>100||p.value!==null&&typeof p.value!="string"||p.value&&p.value.length>500||p.breakpoint&&!y.includes(p.breakpoint)||p.state&&!w.includes(p.state))}function k(p,v){if(typeof p!="string"||p.length===0||p.length>200)return{raw:p,breakpoint:null,state:null,property:null,value:null,isArbitrary:!1,attrType:v,error:"Invalid token format"};let u={raw:p,breakpoint:null,state:null,property:null,value:null,isArbitrary:!1,attrType:v};if(v==="layout"){if(p.startsWith("z:"))return u.property="z",u.value=p.substring(2),u;if(p.startsWith("overflow:"))return u.property="overflow",u.value=p.substring(9),u;if(z.includes(p))return u.property=p,u.value=p,u;let x=p.split(":");if(x.length===2&&y.includes(x[0]))return u.breakpoint=x[0],u.property=x[1],u.value=x[1],u}let f=p.split(":");if(f.length===1)return u.property=p,u.value=p,u;let b=0;if(y.includes(f[0])&&(u.breakpoint=f[0],b++),w.includes(f[b])&&(u.state=f[b],b++),b<f.length&&(u.property=f[b],b++),b<f.length){let x=f.slice(b).join(":"),$=x.match(/^\[(.+)\]$/);$?(u.value=S($[1].replace(/_/g," ")),u.isArbitrary=!0):u.value=S(x)}return _(u)||(u.error="Invalid token structure"),u}(function(){"use strict";let p={theme:{spacing:{none:"0px",thin:"1px",regular:"2px",thick:"3px",tiny:"4px","tiny-2x":"6px",small:"8px","small-2x":"10px","small-3x":"12px","small-4x":"14px",medium:"16px","medium-2x":"20px","medium-3x":"24px","medium-4x":"28px",large:"32px","large-2x":"36px","large-3x":"40px","large-4x":"44px",big:"48px","big-2x":"56px","big-3x":"64px","big-4x":"80px",giant:"96px","giant-2x":"112px","giant-3x":"128px","giant-4x":"144px",vast:"160px","vast-2x":"176px","vast-3x":"192px","vast-4x":"208px","vast-5x":"224px","vast-6x":"240px","vast-7x":"256px","vast-8x":"288px","vast-9x":"320px","vast-10x":"384px"},radius:{none:"0px",small:"4px",medium:"8px",big:"16px",round:"9999px"},shadow:{none:"none",small:"0 1px 2px rgba(0,0,0,0.05)",medium:"0 4px 6px rgba(0,0,0,0.1)",big:"0 10px 15px rgba(0,0,0,0.15)",giant:"0 25px 50px rgba(0,0,0,0.25)"},fontSize:{mini:"0.75rem",small:"0.875rem",base:"1rem",large:"1.125rem",big:"1.25rem",huge:"1.5rem",grand:"1.875rem",giant:"2.25rem",mount:"3rem",mega:"3.75rem",giga:"4.5rem",tera:"6rem",hero:"8rem"},fontSizeLineHeight:{mini:"1rem",small:"1.25rem",base:"1.5rem",large:"1.75rem",big:"1.75rem",huge:"2rem",grand:"2.25rem",giant:"2.5rem",mount:"1",mega:"1",giga:"1",tera:"1",hero:"1"},fontWeight:{normal:"400",medium:"500",bold:"700"},screens:{mob:"480px",tab:"768px",lap:"1024px",desk:"1280px","tw-sm":"640px","tw-md":"768px","tw-lg":"1024px","tw-xl":"1280px","tw-2xl":"1536px"},colors:{white:"#FFFFFF",black:"#000000",grey:"#6B7280",dark:"#3E4A5D",light:"#DBEAFE",primary:"#2563EB",secondary:"#DBEAFE",success:"#10B981",warning:"#F59E0B",danger:"#EF4444","red-50":"#FEF2F2","red-100":"#FEE2E2","red-200":"#FECACA","red-300":"#FCA5A5","red-400":"#F87171","red-500":"#EF4444","red-600":"#DC2626","red-700":"#B91C1C","red-800":"#991B1B","red-900":"#7F1D1D","red-950":"#450A0A","orange-50":"#FFF7ED","orange-100":"#FFEDD5","orange-200":"#FED7AA","orange-300":"#FDBA74","orange-400":"#FB923C","orange-500":"#F97316","orange-600":"#EA580C","orange-700":"#C2410C","orange-800":"#9A3412","orange-900":"#7C2D12","orange-950":"#431407","amber-50":"#FFFBEB","amber-100":"#FEF3C7","amber-200":"#FDE68A","amber-300":"#FCD34D","amber-400":"#FBBF24","amber-500":"#F59E0B","amber-600":"#D97706","amber-700":"#B45309","amber-800":"#92400E","amber-900":"#78350F","amber-950":"#451A03","yellow-50":"#FEFCE8","yellow-100":"#FEF9C3","yellow-200":"#FEF08A","yellow-300":"#FDE047","yellow-400":"#FACC15","yellow-500":"#EAB308","yellow-600":"#CA8A04","yellow-700":"#A16207","yellow-800":"#854D0E","yellow-900":"#713F12","yellow-950":"#422006","lime-50":"#F7FEE7","lime-100":"#ECFCCB","lime-200":"#D9F99D","lime-300":"#BEF264","lime-400":"#A3E635","lime-500":"#84CC16","lime-600":"#65A30D","lime-700":"#4D7C0F","lime-800":"#3F6212","lime-900":"#365314","lime-950":"#1A2E05","green-50":"#F0FDF4","green-100":"#DCFCE7","green-200":"#BBF7D0","green-300":"#86EFAC","green-400":"#4ADE80","green-500":"#22C55E","green-600":"#16A34A","green-700":"#15803D","green-800":"#166534","green-900":"#14532D","green-950":"#052E16","emerald-50":"#ECFDF5","emerald-100":"#D1FAE5","emerald-200":"#A7F3D0","emerald-300":"#6EE7B7","emerald-400":"#34D399","emerald-500":"#10B981","emerald-600":"#059669","emerald-700":"#047857","emerald-800":"#065F46","emerald-900":"#064E3B","emerald-950":"#022C22","teal-50":"#F0FDFA","teal-100":"#CCFBF1","teal-200":"#99F6E4","teal-300":"#5EEAD4","teal-400":"#2DD4BF","teal-500":"#14B8A6","teal-600":"#0D9488","teal-700":"#0F766E","teal-800":"#115E59","teal-900":"#134E4A","teal-950":"#042F2E","cyan-50":"#ECFEFF","cyan-100":"#CFFAFE","cyan-200":"#A5F3FC","cyan-300":"#67E8F9","cyan-400":"#22D3EE","cyan-500":"#06B6D4","cyan-600":"#0891B2","cyan-700":"#0E7490","cyan-800":"#155E75","cyan-900":"#164E63","cyan-950":"#083344","sky-50":"#F0F9FF","sky-100":"#E0F2FE","sky-200":"#BAE6FD","sky-300":"#7DD3FC","sky-400":"#38BDF8","sky-500":"#0EA5E9","sky-600":"#0284C7","sky-700":"#0369A1","sky-800":"#075985","sky-900":"#0C4A6E","sky-950":"#082F49","blue-50":"#EFF6FF","blue-100":"#DBEAFE","blue-200":"#BFDBFE","blue-300":"#93C5FD","blue-400":"#60A5FA","blue-500":"#3B82F6","blue-600":"#2563EB","blue-700":"#1D4ED8","blue-800":"#1E40AF","blue-900":"#1E3A8A","blue-950":"#172554","indigo-50":"#EEF2FF","indigo-100":"#E0E7FF","indigo-200":"#C7D2FE","indigo-300":"#A5B4FC","indigo-400":"#818CF8","indigo-500":"#6366F1","indigo-600":"#4F46E5","indigo-700":"#4338CA","indigo-800":"#3730A3","indigo-900":"#312E81","indigo-950":"#1E1B4B","violet-50":"#F5F3FF","violet-100":"#EDE9FE","violet-200":"#DDD6FE","violet-300":"#C4B5FD","violet-400":"#A78BFA","violet-500":"#8B5CF6","violet-600":"#7C3AED","violet-700":"#6D28D9","violet-800":"#5B21B6","violet-900":"#4C1D95","violet-950":"#2E1065","purple-50":"#FAF5FF","purple-100":"#F3E8FF","purple-200":"#E9D5FF","purple-300":"#D8B4FE","purple-400":"#C084FC","purple-500":"#A855F7","purple-600":"#9333EA","purple-700":"#7E22CE","purple-800":"#6B21A8","purple-900":"#581C87","purple-950":"#3B0764","fuchsia-50":"#FDF4FF","fuchsia-100":"#FAE8FF","fuchsia-200":"#F5D0FE","fuchsia-300":"#F0ABFC","fuchsia-400":"#E879F9","fuchsia-500":"#D946EF","fuchsia-600":"#C026D3","fuchsia-700":"#A21CAF","fuchsia-800":"#86198F","fuchsia-900":"#701A75","fuchsia-950":"#4A044E","pink-50":"#FDF2F8","pink-100":"#FCE7F3","pink-200":"#FBCFE8","pink-300":"#F9A8D4","pink-400":"#F472B6","pink-500":"#EC4899","pink-600":"#DB2777","pink-700":"#BE185D","pink-800":"#9D174D","pink-900":"#831843","pink-950":"#500724","rose-50":"#FFF1F2","rose-100":"#FFE4E6","rose-200":"#FECDD3","rose-300":"#FDA4AF","rose-400":"#FB7185","rose-500":"#F43F5E","rose-600":"#E11D48","rose-700":"#BE123C","rose-800":"#9F1239","rose-900":"#881337","rose-950":"#4C0519","slate-50":"#F8FAFC","slate-100":"#F1F5F9","slate-200":"#E2E8F0","slate-300":"#CBD5E1","slate-400":"#94A3B8","slate-500":"#64748B","slate-600":"#475569","slate-700":"#334155","slate-800":"#1E293B","slate-900":"#0F172A","slate-950":"#020617","gray-50":"#F9FAFB","gray-100":"#F3F4F6","gray-200":"#E5E7EB","gray-300":"#D1D5DB","gray-400":"#9CA3AF","gray-500":"#6B7280","gray-600":"#4B5563","gray-700":"#374151","gray-800":"#1F2937","gray-900":"#111827","gray-950":"#030712","zinc-50":"#FAFAFA","zinc-100":"#F4F4F5","zinc-200":"#E4E4E7","zinc-300":"#D4D4D8","zinc-400":"#A1A1AA","zinc-500":"#71717A","zinc-600":"#52525B","zinc-700":"#3F3F46","zinc-800":"#27272A","zinc-900":"#18181B","zinc-950":"#09090B","neutral-50":"#FAFAFA","neutral-100":"#F5F5F5","neutral-200":"#E5E5E5","neutral-300":"#D4D4D4","neutral-400":"#A3A3A3","neutral-500":"#737373","neutral-600":"#525252","neutral-700":"#404040","neutral-800":"#262626","neutral-900":"#171717","neutral-950":"#0A0A0A","stone-50":"#FAFAF9","stone-100":"#F5F5F4","stone-200":"#E7E5E4","stone-300":"#D6D3D1","stone-400":"#A8A29E","stone-500":"#78716C","stone-600":"#57534E","stone-700":"#44403C","stone-800":"#292524","stone-900":"#1C1917","stone-950":"#0C0A09"},zIndex:{base:"0",low:"10",mid:"50",high:"100",top:"9999"},ring:{none:"0px",thin:"1px",regular:"2px",thick:"3px",small:"4px",medium:"6px",big:"8px"}},darkMode:"media",preflight:!0},v={theme:{type:"object",properties:{spacing:{type:"object"},radius:{type:"object"},shadow:{type:"object"},fontSize:{type:"object"},fontWeight:{type:"object"},screens:{type:"object"},colors:{type:"object"},zIndex:{type:"object"},ring:{type:"object"}}},darkMode:{type:"string",enum:["media","selector"]},preflight:{type:"boolean"}};function u(s){return!(!s||typeof s!="object"||Array.isArray(s)||s.theme&&(typeof s.theme!="object"||Array.isArray(s.theme))||s.darkMode!==void 0&&s.darkMode!=="media"&&s.darkMode!=="selector"&&!Array.isArray(s.darkMode)||s.preflight!==void 0&&typeof s.preflight!="boolean")}function f(){let s=document.querySelector('script[type="senangstart/config"]');if(!s)return{};try{let n=JSON.parse(s.textContent);return u(n)?n:(console.error("[SenangStart] Invalid config structure"),{})}catch(n){return console.error("[SenangStart] Invalid config JSON:",n),{}}}function b(s){if(!u(s))return console.error("[SenangStart] Invalid user config, using defaults"),JSON.parse(JSON.stringify(p));let n=JSON.parse(JSON.stringify(p));if(s.theme)for(let e of Object.keys(n.theme))s.theme[e]&&(n.theme[e]={...n.theme[e],...s.theme[e]});return s.darkMode!==void 0&&(n.darkMode=s.darkMode),s.preflight!==void 0&&(n.preflight=s.preflight),n}function x(s){let{theme:n}=s,e=`:root {
-`;for(let[i,o]of Object.entries(n.spacing))e+=`  --s-${i}: ${o};
-`;for(let[i,o]of Object.entries(n.radius))e+=`  --r-${i}: ${o};
-`;for(let[i,o]of Object.entries(n.shadow))e+=`  --shadow-${i}: ${o};
-`;for(let[i,o]of Object.entries(n.fontSize))e+=`  --font-${i}: ${o};
-`;if(n.fontSizeLineHeight)for(let[i,o]of Object.entries(n.fontSizeLineHeight))e+=`  --font-lh-${i}: ${o};
-`;for(let[i,o]of Object.entries(n.fontWeight))e+=`  --fw-${i}: ${o};
-`;for(let[i,o]of Object.entries(n.colors))e+=`  --c-${i}: ${o};
-`;for(let[i,o]of Object.entries(n.zIndex))e+=`  --z-${i}: ${o};
-`;if(n.ring)for(let[i,o]of Object.entries(n.ring))e+=`  --ring-${i}: ${o};
-`;e+=`  --ring-color: var(--c-primary);
-`,e+=`  --ring-offset: 0px;
-`,e+=`  --ring-offset-color: #fff;
-`;let r={0:"0px",px:"1px","0.5":"0.125rem",1:"0.25rem","1.5":"0.375rem",2:"0.5rem","2.5":"0.625rem",3:"0.75rem","3.5":"0.875rem",4:"1rem",5:"1.25rem",6:"1.5rem",7:"1.75rem",8:"2rem",9:"2.25rem",10:"2.5rem",11:"2.75rem",12:"3rem",14:"3.5rem",16:"4rem",20:"5rem",24:"6rem",28:"7rem",32:"8rem",36:"9rem",40:"10rem",44:"11rem",48:"12rem",52:"13rem",56:"14rem",60:"15rem",64:"16rem",72:"18rem",80:"20rem",96:"24rem"};for(let[i,o]of Object.entries(r))e+=`  --tw-${i}: ${o};
-`;let l={none:"0px",sm:"0.125rem",DEFAULT:"0.25rem",md:"0.375rem",lg:"0.5rem",xl:"0.75rem","2xl":"1rem","3xl":"1.5rem",full:"9999px"};for(let[i,o]of Object.entries(l))e+=`  --tw-rounded-${i}: ${o};
-`;let d={sm:"0 1px 2px 0 rgb(0 0 0 / 0.05)",DEFAULT:"0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",md:"0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",lg:"0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",xl:"0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)","2xl":"0 25px 50px -12px rgb(0 0 0 / 0.25)",inner:"inset 0 2px 4px 0 rgb(0 0 0 / 0.05)",none:"0 0 #0000"};for(let[i,o]of Object.entries(d))e+=`  --tw-shadow-${i}: ${o};
-`;let c={xs:"0.75rem",sm:"0.875rem",base:"1rem",lg:"1.125rem",xl:"1.25rem","2xl":"1.5rem","3xl":"1.875rem","4xl":"2.25rem","5xl":"3rem","6xl":"3.75rem","7xl":"4.5rem","8xl":"6rem","9xl":"8rem"};for(let[i,o]of Object.entries(c))e+=`  --tw-text-${i}: ${o};
-`;let t={xs:"1rem",sm:"1.25rem",base:"1.5rem",lg:"1.75rem",xl:"1.75rem","2xl":"2rem","3xl":"2.25rem","4xl":"2.5rem","5xl":"1","6xl":"1","7xl":"1","8xl":"1","9xl":"1"};for(let[i,o]of Object.entries(t))e+=`  --tw-leading-${i}: ${o};
-`;let a={thin:"100",extralight:"200",light:"300",normal:"400",medium:"500",semibold:"600",bold:"700",extrabold:"800",black:"900"};for(let[i,o]of Object.entries(a))e+=`  --tw-font-${i}: ${o};
-`;return e+=`}
-
-`,e}function $(){return`/* SenangStart Preflight - Opinionated Base Styles */
+(()=>{var y=["mob","tab","lap","desk","tw-sm","tw-md","tw-lg","tw-xl","tw-2xl"],k=["hover","focus","focus-visible","active","disabled","dark","expanded","selected"],T=["flex","grid","block","inline","hidden","row","col","row-reverse","col-reverse","center","start","end","between","around","evenly","wrap","nowrap","absolute","relative","fixed","sticky","hoverable","focusable","pressable","expandable","selectable","disabled"];function b(n){if(typeof n!="string")return"";let l=/[;]/g;return l.test(n)?n.replace(l,"_"):n}function Ye(n){return!(!n.property||typeof n.property!="string"||n.property.length>100||n.value!==null&&typeof n.value!="string"||n.value&&n.value.length>500||n.breakpoint&&!y.includes(n.breakpoint)||n.state&&!k.includes(n.state))}function _e(n,l){if(typeof n!="string"||n.length===0||n.length>200)return{raw:n,breakpoint:null,state:null,property:null,value:null,isArbitrary:!1,attrType:l,error:"Invalid token format"};let t={raw:n,breakpoint:null,state:null,property:null,value:null,isArbitrary:!1,attrType:l};if(l==="layout"){if(n.startsWith("z:"))return t.property="z",t.value=n.substring(2),t;if(n.startsWith("overflow:"))return t.property="overflow",t.value=n.substring(9),t;if(T.includes(n))return t.property=n,t.value=n,t;let d=n.split(":");if(d.length===2&&y.includes(d[0]))return t.breakpoint=d[0],t.property=d[1],t.value=d[1],t}let e=n.split(":");if(e.length===1)return t.property=n,t.value=n,t;let i=0;if(y.includes(e[0])&&(t.breakpoint=e[0],i++),k.includes(e[i])&&(t.state=e[i],i++),i<e.length&&(t.property=e[i],i++),i<e.length){let d=e.slice(i).join(":"),c=d.match(/^\[(.+)\]$/);c?(t.value=b(c[1].replace(/_/g," ")),t.isArbitrary=!0):t.value=b(d)}return Ye(t)||(t.error="Invalid token structure"),t}function C(n){let l=[];for(let[t,e]of Object.entries(n))for(let i of e)l.push(_e(i,t));return l}function D(n){return`/* 
+ * SenangStart Preflight v1.0
+ * An opinionated set of base styles for SenangStart CSS projects
+ * Based on modern-normalize and Tailwind CSS Preflight
+ */
+
+/*
+ * 1. Prevent padding and border from affecting element width
+ * 2. Allow adding a border to an element by just adding a border-width
+ */
 *,
 ::before,
 ::after {
-  box-sizing: border-box;
-  border-width: 0;
-  border-style: solid;
-  border-color: currentColor;
+  box-sizing: border-box; /* 1 */
+  border-width: 0; /* 2 */
+  border-style: solid; /* 2 */
+  border-color: currentColor; /* 2 */
 }
 
-html, :host {
-  line-height: 1.5;
-  -webkit-text-size-adjust: 100%;
-  -moz-tab-size: 4;
-  tab-size: 4;
-  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  font-feature-settings: normal;
-  font-variation-settings: normal;
-  -webkit-tap-highlight-color: transparent;
+/*
+ * 1. Use a consistent sensible line-height in all browsers
+ * 2. Prevent adjustments of font size after orientation changes in iOS
+ * 3. Use a more readable tab size
+ * 4. Use the user's configured sans font-family by default
+ * 5. Use the user's configured sans font-feature-settings by default
+ * 6. Use the user's configured sans font-variation-settings by default
+ * 7. Disable tap highlights on iOS
+ */
+html,
+:host {
+  line-height: 1.5; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+  -moz-tab-size: 4; /* 3 */
+  tab-size: 4; /* 3 */
+  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
+  font-feature-settings: normal; /* 5 */
+  font-variation-settings: normal; /* 6 */
+  -webkit-tap-highlight-color: transparent; /* 7 */
 }
 
+/*
+ * 1. Remove the margin in all browsers
+ * 2. Inherit line-height from html so users can set them as a class directly on the html element
+ */
 body {
-  margin: 0;
-  line-height: inherit;
+  margin: 0; /* 1 */
+  line-height: inherit; /* 2 */
 }
 
+/*
+ * 1. Add the correct height in Firefox
+ * 2. Correct the inheritance of border color in Firefox
+ * 3. Ensure horizontal rules are visible by default
+ */
 hr {
-  height: 0;
-  color: inherit;
-  border-top-width: 1px;
+  height: 0; /* 1 */
+  color: inherit; /* 2 */
+  border-top-width: 1px; /* 3 */
 }
 
-h1, h2, h3, h4, h5, h6 {
+/*
+ * Add the correct text decoration in Chrome, Edge, and Safari
+ */
+abbr:where([title]) {
+  text-decoration: underline dotted;
+}
+
+/*
+ * Remove the default font size and weight for headings
+ */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   font-size: inherit;
   font-weight: inherit;
 }
 
+/*
+ * Reset links to optimize for opt-in styling instead of opt-out
+ */
 a {
   color: inherit;
   text-decoration: inherit;
 }
 
-b, strong {
+/*
+ * Add the correct font weight in Edge and Safari
+ */
+b,
+strong {
   font-weight: bolder;
 }
 
-code, kbd, samp, pre {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-  font-size: 1em;
+/*
+ * 1. Use the user's configured mono font-family by default
+ * 2. Use the user's configured mono font-feature-settings by default
+ * 3. Use the user's configured mono font-variation-settings by default
+ * 4. Correct the odd em font sizing in all browsers
+ */
+code,
+kbd,
+samp,
+pre {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
+  font-feature-settings: normal; /* 2 */
+  font-variation-settings: normal; /* 3 */
+  font-size: 1em; /* 4 */
 }
 
+/*
+ * Add the correct font size in all browsers
+ */
 small {
   font-size: 80%;
 }
 
-sub, sup {
+/*
+ * Prevent sub and sup elements from affecting the line height in all browsers
+ */
+sub,
+sup {
   font-size: 75%;
   line-height: 0;
   position: relative;
   vertical-align: baseline;
 }
 
-sub { bottom: -0.25em; }
-sup { top: -0.5em; }
+sub {
+  bottom: -0.25em;
+}
 
+sup {
+  top: -0.5em;
+}
+
+/*
+ * 1. Remove text indentation from table contents in Chrome and Safari
+ * 2. Correct table border color inheritance in all Chrome and Safari
+ * 3. Remove gaps between table borders by default
+ */
 table {
-  text-indent: 0;
-  border-color: inherit;
-  border-collapse: collapse;
+  text-indent: 0; /* 1 */
+  border-color: inherit; /* 2 */
+  border-collapse: collapse; /* 3 */
 }
 
-button, input, optgroup, select, textarea {
-  font-family: inherit;
-  font-size: 100%;
-  font-weight: inherit;
-  line-height: inherit;
-  color: inherit;
-  margin: 0;
-  padding: 0;
+/*
+ * 1. Change the font styles in all browsers
+ * 2. Remove the margin in Firefox and Safari
+ * 3. Remove default padding in all browsers
+ */
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-feature-settings: inherit; /* 1 */
+  font-variation-settings: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  font-weight: inherit; /* 1 */
+  line-height: inherit; /* 1 */
+  letter-spacing: inherit; /* 1 */
+  color: inherit; /* 1 */
+  margin: 0; /* 2 */
+  padding: 0; /* 3 */
 }
 
-button, select {
+/*
+ * Remove the inheritance of text transform in Edge and Firefox
+ */
+button,
+select {
   text-transform: none;
 }
 
+/*
+ * 1. Correct the inability to style clickable types in iOS and Safari
+ * 2. Remove default button styles
+ */
 button,
 input:where([type='button']),
 input:where([type='reset']),
 input:where([type='submit']) {
-  -webkit-appearance: button;
-  background-color: transparent;
-  background-image: none;
+  -webkit-appearance: button; /* 1 */
+  background-color: transparent; /* 2 */
+  background-image: none; /* 2 */
+}
+
+/*
+ * Use the modern Firefox focus style for all focusable elements
+ */
+:-moz-focusring {
+  outline: auto;
 }
 
+/*
+ * Remove the additional :invalid styles in Firefox
+ */
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+/*
+ * Add the correct vertical alignment in Chrome and Firefox
+ */
 progress {
   vertical-align: baseline;
 }
 
+/*
+ * Correct the cursor style of increment and decrement buttons in Safari
+ */
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/*
+ * 1. Correct the odd appearance in Chrome and Safari
+ * 2. Correct the outline style in Safari
+ */
 [type='search'] {
-  -webkit-appearance: textfield;
-  outline-offset: -2px;
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
 }
 
+/*
+ * Remove the inner padding in Chrome and Safari on macOS
+ */
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/*
+ * 1. Correct the inability to style clickable types in iOS and Safari
+ * 2. Change font properties to inherit in Safari
+ */
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/*
+ * Add the correct display in Chrome and Safari
+ */
 summary {
   display: list-item;
 }
 
-blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre {
+/*
+ * Removes the default spacing and border for appropriate elements
+ */
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+
+fieldset {
   margin: 0;
+  padding: 0;
 }
 
-fieldset { margin: 0; padding: 0; }
-legend { padding: 0; }
+legend {
+  padding: 0;
+}
 
-ol, ul, menu {
+/*
+ * Remove default list styles
+ */
+ol,
+ul,
+menu {
   list-style: none;
   margin: 0;
   padding: 0;
 }
 
-dialog { padding: 0; }
+/*
+ * Reset default styling for dialogs
+ */
+dialog {
+  padding: 0;
+}
 
-textarea { resize: vertical; }
+/*
+ * Prevent resizing textareas horizontally by default
+ */
+textarea {
+  resize: vertical;
+}
 
-input::placeholder, textarea::placeholder {
-  opacity: 1;
-  color: #9ca3af;
+/*
+ * 1. Reset the default placeholder opacity in Firefox
+ * 2. Set the default placeholder color to a semi-transparent gray
+ */
+input::placeholder,
+textarea::placeholder {
+  opacity: 1; /* 1 */
+  color: #9ca3af; /* 2 */
 }
 
-button, [role="button"] {
+/*
+ * Set the default cursor for buttons
+ */
+button,
+[role="button"] {
   cursor: pointer;
 }
 
+/*
+ * Make sure disabled buttons don't get the pointer cursor
+ */
 :disabled {
   cursor: default;
 }
 
-img, svg, video, canvas, audio, iframe, embed, object {
-  display: block;
-  vertical-align: middle;
+/*
+ * 1. Make replaced elements display: block by default
+ * 2. Add vertical-align: middle to align replaced elements more sensibly by default
+ */
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block; /* 1 */
+  vertical-align: middle; /* 2 */
 }
 
-img, video {
+/*
+ * Constrain images and videos to the parent width and preserve their intrinsic aspect ratio
+ */
+img,
+video {
   max-width: 100%;
   height: auto;
 }
 
+/*
+ * Make elements with the HTML hidden attribute stay hidden by default
+ */
 [hidden] {
   display: none;
 }
 
-/* Keyframe Animations */
+`}var z={name:"display",property:"layout",syntax:'layout="[display-value]"',description:"Control the display type of elements",descriptionMs:"Kawal jenis paparan elemen",category:"layout",values:[{value:"flex",css:"display: flex;",description:"Flexbox container",descriptionMs:"Bekas flexbox"},{value:"inline-flex",css:"display: inline-flex;",description:"Inline flexbox container",descriptionMs:"Bekas flexbox sebaris"},{value:"grid",css:"display: grid;",description:"Grid container",descriptionMs:"Bekas grid"},{value:"inline-grid",css:"display: inline-grid;",description:"Inline grid container",descriptionMs:"Bekas grid sebaris"},{value:"block",css:"display: block;",description:"Block element",descriptionMs:"Elemen blok"},{value:"inline",css:"display: inline-block;",description:"Inline block element",descriptionMs:"Elemen blok sebaris"},{value:"hidden",css:"display: none;",description:"Hidden element",descriptionMs:"Elemen tersembunyi"}],examples:[{code:'<div layout="flex">Flexbox container</div>',description:"Create a flex container"},{code:'<div layout="grid">Grid container</div>',description:"Create a grid container"},{code:'<div layout="hidden">Hidden element</div>',description:"Hide an element"}],preview:[{title:"Flexbox Container",titleMs:"Bekas Flexbox",description:"Items arranged horizontally",descriptionMs:"Item disusun secara mendatar",html:`<div layout="flex row" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span space="p:small" visual="bg:primary text:white rounded:small">Item 1</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small">Item 2</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small">Item 3</span>
+</div>`,highlightValue:"flex"},{title:"Grid Container",titleMs:"Bekas Grid",description:"Items in a grid layout",descriptionMs:"Item dalam susun atur grid",html:`<div layout="grid grid-cols:3" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">1</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">2</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">3</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">4</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">5</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">6</span>
+</div>`,highlightValue:"grid"}]},$={name:"flex-direction",property:"layout",syntax:'layout="[direction]"',description:"Set the direction of flex items",descriptionMs:"Tetapkan arah item flex",category:"layout",values:[{value:"row",css:"flex-direction: row;",description:"Horizontal (default)",descriptionMs:"Mendatar (lalai)"},{value:"col",css:"flex-direction: column;",description:"Vertical",descriptionMs:"Menegak"},{value:"row-reverse",css:"flex-direction: row-reverse;",description:"Horizontal reversed",descriptionMs:"Mendatar terbalik"},{value:"col-reverse",css:"flex-direction: column-reverse;",description:"Vertical reversed",descriptionMs:"Menegak terbalik"}],examples:[{code:'<div layout="flex row">Row direction</div>',description:"Flex row"},{code:'<div layout="flex col">Column direction</div>',description:"Flex column"}],preview:[{title:"Row Direction",titleMs:"Arah Baris",description:"Items arranged horizontally from left to right",descriptionMs:"Item disusun secara mendatar dari kiri ke kanan",html:`<div layout="flex row" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span space="p:small" visual="bg:primary text:white rounded:small">1</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small">2</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small">3</span>
+</div>`,highlightValue:"row"},{title:"Column Direction",titleMs:"Arah Lajur",description:"Items stacked vertically from top to bottom",descriptionMs:"Item disusun secara menegak dari atas ke bawah",html:`<div layout="flex col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span space="p:small" visual="bg:primary text:white rounded:small">1</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small">2</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small">3</span>
+</div>`,highlightValue:"col"},{title:"Row Reverse",titleMs:"Baris Terbalik",description:"Items arranged horizontally from right to left",descriptionMs:"Item disusun secara mendatar dari kanan ke kiri",html:`<div layout="flex row-reverse" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span space="p:small" visual="bg:primary text:white rounded:small">1</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small">2</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small">3</span>
+</div>`,highlightValue:"row-reverse"}]},j={name:"flex-wrap",property:"layout",syntax:'layout="[wrap-value]"',description:"Control how flex items wrap",descriptionMs:"Kawal bagaimana item flex membungkus",category:"layout",values:[{value:"wrap",css:"flex-wrap: wrap;",description:"Allow wrapping",descriptionMs:"Benarkan pembungkusan"},{value:"nowrap",css:"flex-wrap: nowrap;",description:"Prevent wrapping",descriptionMs:"Halang pembungkusan"},{value:"wrap-reverse",css:"flex-wrap: wrap-reverse;",description:"Wrap in reverse",descriptionMs:"Bungkus terbalik"}],examples:[{code:'<div layout="flex wrap">Wrapping flex</div>',description:"Allow items to wrap"}],preview:[{title:"Wrap Enabled",titleMs:"Bungkus Diaktifkan",description:"Items wrap to next line when container is full",descriptionMs:"Item membungkus ke baris seterusnya apabila bekas penuh",html:`<div layout="flex wrap" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="max-width: 200px;">
+  <span space="p:small" visual="bg:primary text:white rounded:small">Item 1</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small">Item 2</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small">Item 3</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small">Item 4</span>
+</div>`,highlightValue:"wrap"},{title:"No Wrap",titleMs:"Tiada Bungkusan",description:"Items stay on single line (may overflow)",descriptionMs:"Item kekal pada satu baris (mungkin melimpah)",html:`<div layout="flex nowrap" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="max-width: 200px; overflow: hidden;">
+  <span space="p:small" visual="bg:primary text:white rounded:small">Item 1</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small">Item 2</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small">Item 3</span>
+</div>`,highlightValue:"nowrap"}]},B={name:"flex-items",property:"layout",syntax:'layout="[flex-item-value]"',description:"Control flex grow and shrink behavior",descriptionMs:"Kawal kelakuan kembang dan kecil flex",category:"layout",values:[{value:"grow",css:"flex-grow: 1;",description:"Allow item to grow",descriptionMs:"Benarkan item berkembang"},{value:"grow-0",css:"flex-grow: 0;",description:"Prevent growing",descriptionMs:"Halang perkembangan"},{value:"shrink",css:"flex-shrink: 1;",description:"Allow item to shrink",descriptionMs:"Benarkan item mengecil"},{value:"shrink-0",css:"flex-shrink: 0;",description:"Prevent shrinking",descriptionMs:"Halang pengecilan"}],examples:[{code:'<div layout="grow">Growing item</div>',description:"Allow item to grow"}],preview:[{title:"Flex Grow",titleMs:"Kembang Flex",description:"Middle item grows to fill available space",descriptionMs:"Item tengah berkembang untuk mengisi ruang kosong",html:`<div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">Fixed</span>
+  <span layout="grow text:center" space="p:small" visual="bg:primary text:white rounded:small">Grows</span>
+  <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">Fixed</span>
+</div>`,highlightValue:"grow"},{title:"Flex Shrink",titleMs:"Kecil Flex",description:"Item shrinks when space is limited",descriptionMs:"Item mengecil apabila ruang terhad",html:`<div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="max-width: 250px;">
+  <span layout="shrink-0" space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">No Shrink</span>
+  <span layout="shrink" space="p:small" visual="bg:primary text:white rounded:small">Can Shrink</span>
+</div>`,highlightValue:"shrink"}]},E={name:"flex",property:"layout",syntax:'layout="flex:[value]"',description:"Flex shorthand property",descriptionMs:"Properti pintasan flex",category:"layout",supportsArbitrary:!0,dynamic:!0,values:[{value:"1",css:"flex: 1 1 0%;",description:"Flex 1",descriptionMs:"Flex 1"},{value:"auto",css:"flex: 1 1 auto;",description:"Flex auto",descriptionMs:"Flex auto"},{value:"initial",css:"flex: 0 1 auto;",description:"Initial flex",descriptionMs:"Flex awal"},{value:"none",css:"flex: none;",description:"No flex",descriptionMs:"Tiada flex"}],examples:[{code:'<div layout="flex:1">Flexible item</div>',description:"Flex grow and shrink"}],preview:[{title:"Flex 1",titleMs:"Flex 1",description:"Equal distribution of space among items",descriptionMs:"Pengagihan ruang yang sama antara item",html:`<div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span layout="flex:1 text:center" space="p:small" visual="bg:primary text:white rounded:small">flex:1</span>
+  <span layout="flex:1 text:center" space="p:small" visual="bg:primary text:white rounded:small">flex:1</span>
+  <span layout="flex:1 text:center" space="p:small" visual="bg:primary text:white rounded:small">flex:1</span>
+</div>`,highlightValue:"flex:1"},{title:"Flex Auto vs None",titleMs:"Flex Auto vs Tiada",description:"Different flex behaviors compared",descriptionMs:"Perbandingan kelakuan flex berbeza",html:`<div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span layout="flex:auto" space="p:small" visual="bg:primary text:white rounded:small">auto</span>
+  <span layout="flex:none" space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">none</span>
+</div>`,highlightValue:"flex:auto"}]},P={name:"flex-basis",property:"layout",syntax:'layout="basis:[value]"',description:"Set initial size of flex item",descriptionMs:"Tetapkan saiz awal item flex",category:"layout",usesScale:"spacing",supportsArbitrary:!0,dynamic:!0,values:[{value:"auto",css:"flex-basis: auto;",description:"Auto basis",descriptionMs:"Asas automatik"},{value:"0",css:"flex-basis: 0;",description:"Zero basis",descriptionMs:"Asas sifar"}],examples:[{code:'<div layout="basis:[200px]">200px basis</div>',description:"Fixed basis"}],preview:[{title:"Fixed Basis",titleMs:"Asas Tetap",description:"Items with different basis sizes",descriptionMs:"Item dengan saiz asas berbeza",html:`<div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span layout="basis:[100px] text:center" space="p:small" visual="bg:primary text:white rounded:small">100px</span>
+  <span layout="basis:[150px] text:center" space="p:small" visual="bg:primary text:white rounded:small">150px</span>
+  <span layout="basis:auto" space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">auto</span>
+</div>`,highlightValue:"basis:[100px]"}]},K={name:"order",property:"layout",syntax:'layout="order:[value]"',description:"Control flex/grid item order",descriptionMs:"Kawal susunan item flex/grid",category:"layout",dynamic:!0,values:[{value:"first",css:"order: -9999;",description:"Move to first",descriptionMs:"Pindah ke pertama"},{value:"last",css:"order: 9999;",description:"Move to last",descriptionMs:"Pindah ke terakhir"},{value:"none",css:"order: 0;",description:"Default order",descriptionMs:"Susunan lalai"},{value:"1-12",css:"order: {n};",description:"Specific order",descriptionMs:"Susunan tertentu"}],examples:[{code:'<div layout="order:first">First item</div>',description:"Move to first"}],preview:[{title:"Reorder Items",titleMs:"Susun Semula Item",description:"Change visual order of flex items",descriptionMs:"Ubah susunan visual item flex",html:`<div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span layout="order:3" space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">A (order:3)</span>
+  <span layout="order:1" space="p:small" visual="bg:primary text:white rounded:small">B (order:1)</span>
+  <span layout="order:2" space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">C (order:2)</span>
+</div>`,highlightValue:"order:1"},{title:"First and Last",titleMs:"Pertama dan Terakhir",description:"Move items to start or end",descriptionMs:"Pindahkan item ke permulaan atau hujung",html:`<div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span layout="order:last" space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">First in DOM (order:last)</span>
+  <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">Middle</span>
+  <span layout="order:first" space="p:small" visual="bg:primary text:white rounded:small">Last in DOM (order:first)</span>
+</div>`,highlightValue:"order:first"}]};var R={name:"justify-content",property:"layout",syntax:'layout="justify:[value]"',description:"Align items along the main axis",descriptionMs:"Jajarkan item sepanjang paksi utama",category:"layout",values:[{value:"start",css:"justify-content: flex-start;",description:"Align to start",descriptionMs:"Jajar ke permulaan"},{value:"end",css:"justify-content: flex-end;",description:"Align to end",descriptionMs:"Jajar ke hujung"},{value:"center",css:"justify-content: center;",description:"Center items",descriptionMs:"Tengahkan item"},{value:"between",css:"justify-content: space-between;",description:"Space between items",descriptionMs:"Ruang antara item"},{value:"around",css:"justify-content: space-around;",description:"Space around items",descriptionMs:"Ruang sekeliling item"},{value:"evenly",css:"justify-content: space-evenly;",description:"Even spacing",descriptionMs:"Ruang sekata"},{value:"stretch",css:"justify-content: stretch;",description:"Stretch items",descriptionMs:"Regangkan item"}],examples:[{code:'<div layout="flex justify:center">Centered</div>',description:"Center items"},{code:'<div layout="flex justify:between">Spaced</div>',description:"Space between"}],preview:[{title:"Justify Start",titleMs:"Jajar Permulaan",description:"Items aligned to the start of container",descriptionMs:"Item dijajarkan ke permulaan bekas",html:`<div layout="flex justify:start" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span space="p:small" visual="bg:primary text:white rounded:small">1</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small">2</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small">3</span>
+</div>`,highlightValue:"justify:start"},{title:"Justify Center",titleMs:"Jajar Tengah",description:"Items centered along the main axis",descriptionMs:"Item berpusat sepanjang paksi utama",html:`<div layout="flex justify:center" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span space="p:small" visual="bg:primary text:white rounded:small">1</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small">2</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small">3</span>
+</div>`,highlightValue:"justify:center"},{title:"Justify Between",titleMs:"Jajar Antara",description:"Items with equal space between them",descriptionMs:"Item dengan ruang sama antara mereka",html:`<div layout="flex justify:between" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span space="p:small" visual="bg:primary text:white rounded:small">1</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small">2</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small">3</span>
+</div>`,highlightValue:"justify:between"}]},I={name:"align-items",property:"layout",syntax:'layout="items:[value]"',description:"Align items along the cross axis",descriptionMs:"Jajarkan item sepanjang paksi silang",category:"layout",values:[{value:"start",css:"align-items: flex-start;",description:"Align to start",descriptionMs:"Jajar ke permulaan"},{value:"end",css:"align-items: flex-end;",description:"Align to end",descriptionMs:"Jajar ke hujung"},{value:"center",css:"align-items: center;",description:"Center items",descriptionMs:"Tengahkan item"},{value:"baseline",css:"align-items: baseline;",description:"Align to baseline",descriptionMs:"Jajar ke garis asas"},{value:"stretch",css:"align-items: stretch;",description:"Stretch items",descriptionMs:"Regangkan item"}],examples:[{code:'<div layout="flex items:center">Centered</div>',description:"Center vertically"}],preview:[{title:"Items Center",titleMs:"Item Tengah",description:"Items centered along cross axis",descriptionMs:"Item berpusat sepanjang paksi silang",html:`<div layout="flex items:center" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 100px;">
+  <span space="p:small" visual="bg:primary text:white rounded:small">Short</span>
+  <span space="p:large" visual="bg:primary text:white rounded:small">Tall</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small">Short</span>
+</div>`,highlightValue:"items:center"},{title:"Items Start",titleMs:"Item Permulaan",description:"Items aligned to the start of cross axis",descriptionMs:"Item dijajarkan ke permulaan paksi silang",html:`<div layout="flex items:start" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 100px;">
+  <span space="p:small" visual="bg:primary text:white rounded:small">Short</span>
+  <span space="p:large" visual="bg:primary text:white rounded:small">Tall</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small">Short</span>
+</div>`,highlightValue:"items:start"},{title:"Items Stretch",titleMs:"Item Regang",description:"Items stretched to fill container height",descriptionMs:"Item diregangkan untuk mengisi ketinggian bekas",html:`<div layout="flex items:stretch" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 100px;">
+  <span layout="flex center" space="p:small" visual="bg:primary text:white rounded:small">1</span>
+  <span layout="flex center" space="p:small" visual="bg:primary text:white rounded:small">2</span>
+  <span layout="flex center" space="p:small" visual="bg:primary text:white rounded:small">3</span>
+</div>`,highlightValue:"items:stretch"}]},L={name:"align-self",property:"layout",syntax:'layout="self:[value]"',description:"Override alignment for a single item",descriptionMs:"Ganti penjajaran untuk satu item",category:"layout",values:[{value:"auto",css:"align-self: auto;",description:"Use parent alignment",descriptionMs:"Guna penjajaran induk"},{value:"start",css:"align-self: flex-start;",description:"Align to start",descriptionMs:"Jajar ke permulaan"},{value:"end",css:"align-self: flex-end;",description:"Align to end",descriptionMs:"Jajar ke hujung"},{value:"center",css:"align-self: center;",description:"Center item",descriptionMs:"Tengahkan item"},{value:"baseline",css:"align-self: baseline;",description:"Align to baseline",descriptionMs:"Jajar ke garis asas"},{value:"stretch",css:"align-self: stretch;",description:"Stretch item",descriptionMs:"Regangkan item"}],examples:[{code:'<div layout="self:center">Centered item</div>',description:"Center single item"}],preview:[{title:"Align Self",titleMs:"Jajar Kendiri",description:"Override parent alignment for one item",descriptionMs:"Ganti penjajaran induk untuk satu item",html:`<div layout="flex items:start" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 100px;">
+  <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">Start</span>
+  <span layout="self:center" space="p:small" visual="bg:primary text:white rounded:small">self:center</span>
+  <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">Start</span>
+</div>`,highlightValue:"self:center"}]},N={name:"align-content",property:"layout",syntax:'layout="content:[value]"',description:"Align content rows in multi-line flex container",descriptionMs:"Jajarkan baris kandungan dalam bekas flex berbilang baris",category:"layout",values:[{value:"start",css:"align-content: flex-start;",description:"Align to start",descriptionMs:"Jajar ke permulaan"},{value:"end",css:"align-content: flex-end;",description:"Align to end",descriptionMs:"Jajar ke hujung"},{value:"center",css:"align-content: center;",description:"Center content",descriptionMs:"Tengahkan kandungan"},{value:"between",css:"align-content: space-between;",description:"Space between rows",descriptionMs:"Ruang antara baris"},{value:"around",css:"align-content: space-around;",description:"Space around rows",descriptionMs:"Ruang sekeliling baris"},{value:"evenly",css:"align-content: space-evenly;",description:"Even spacing",descriptionMs:"Ruang sekata"},{value:"stretch",css:"align-content: stretch;",description:"Stretch rows",descriptionMs:"Regangkan baris"}],examples:[{code:'<div layout="flex wrap content:center">Centered rows</div>',description:"Center wrapped rows"}],preview:[{title:"Content Center",titleMs:"Kandungan Tengah",description:"Center wrapped rows in multi-line container",descriptionMs:"Tengahkan baris bungkus dalam bekas berbilang baris",html:`<div layout="flex wrap content:center" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 150px; max-width: 200px;">
+  <span space="p:small" visual="bg:primary text:white rounded:small">1</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small">2</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small">3</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small">4</span>
+</div>`,highlightValue:"content:center"},{title:"Content Between",titleMs:"Kandungan Antara",description:"Space between wrapped rows",descriptionMs:"Ruang antara baris bungkus",html:`<div layout="flex wrap content:between" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 150px; max-width: 200px;">
+  <span space="p:small" visual="bg:primary text:white rounded:small">1</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small">2</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small">3</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small">4</span>
+</div>`,highlightValue:"content:between"}]},G={name:"shorthand-alignment",property:"layout",syntax:'layout="[alignment]"',description:"Quick alignment shortcuts",descriptionMs:"Pintasan penjajaran pantas",category:"layout",values:[{value:"center",css:"justify-content: center; align-items: center;",description:"Center both axes",descriptionMs:"Tengahkan kedua-dua paksi"},{value:"start",css:"justify-content: flex-start; align-items: flex-start;",description:"Align to start",descriptionMs:"Jajar ke permulaan"},{value:"end",css:"justify-content: flex-end; align-items: flex-end;",description:"Align to end",descriptionMs:"Jajar ke hujung"},{value:"between",css:"justify-content: space-between;",description:"Space between",descriptionMs:"Ruang antara"},{value:"around",css:"justify-content: space-around;",description:"Space around",descriptionMs:"Ruang sekeliling"},{value:"evenly",css:"justify-content: space-evenly;",description:"Even spacing",descriptionMs:"Ruang sekata"}],examples:[{code:'<div layout="flex center">Centered content</div>',description:"Center on both axes"}],preview:[{title:"Center Shorthand",titleMs:"Pintasan Tengah",description:"Center items on both axes at once",descriptionMs:"Tengahkan item pada kedua-dua paksi sekaligus",html:`<div layout="flex center" space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 100px;">
+  <span space="p:small" visual="bg:primary text:white rounded:small">Centered</span>
+</div>`,highlightValue:"center"},{title:"Between Shorthand",titleMs:"Pintasan Antara",description:"Quick space-between layout",descriptionMs:"Susun atur space-between pantas",html:`<div layout="flex between" space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span space="p:small" visual="bg:primary text:white rounded:small">Left</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small">Right</span>
+</div>`,highlightValue:"between"}]},O={name:"justify-items",property:"layout",syntax:'layout="justify-items:[value]"',description:"Align grid items on inline axis",descriptionMs:"Jajarkan item grid pada paksi sebaris",category:"layout",values:[{value:"start",css:"justify-items: start;",description:"Start alignment",descriptionMs:"Jajar permulaan"},{value:"end",css:"justify-items: end;",description:"End alignment",descriptionMs:"Jajar hujung"},{value:"center",css:"justify-items: center;",description:"Center alignment",descriptionMs:"Jajar tengah"},{value:"stretch",css:"justify-items: stretch;",description:"Stretch items",descriptionMs:"Regangkan item"}],examples:[{code:'<div layout="grid justify-items:center">Centered items</div>',description:"Center grid items"}],preview:[{title:"Justify Items Center",titleMs:"Jajar Item Tengah",description:"Center all grid items horizontally within their cells",descriptionMs:"Tengahkan semua item grid secara mendatar dalam sel mereka",html:`<div layout="grid grid-cols:3 justify-items:center" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span space="p:small" visual="bg:primary text:white rounded:small">1</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small">2</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small">3</span>
+</div>`,highlightValue:"justify-items:center"}]},J={name:"justify-self",property:"layout",syntax:'layout="justify-self:[value]"',description:"Align single grid item on inline axis",descriptionMs:"Jajarkan satu item grid pada paksi sebaris",category:"layout",values:[{value:"auto",css:"justify-self: auto;",description:"Auto alignment",descriptionMs:"Jajar automatik"},{value:"start",css:"justify-self: start;",description:"Start alignment",descriptionMs:"Jajar permulaan"},{value:"end",css:"justify-self: end;",description:"End alignment",descriptionMs:"Jajar hujung"},{value:"center",css:"justify-self: center;",description:"Center alignment",descriptionMs:"Jajar tengah"},{value:"stretch",css:"justify-self: stretch;",description:"Stretch item",descriptionMs:"Regangkan item"}],examples:[{code:'<div layout="justify-self:end">End aligned</div>',description:"Align item to end"}],preview:[{title:"Justify Self",titleMs:"Jajar Kendiri",description:"Override horizontal alignment for one grid item",descriptionMs:"Ganti penjajaran mendatar untuk satu item grid",html:`<div layout="grid grid-cols:3" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">Default</span>
+  <span layout="justify-self:center" space="p:small" visual="bg:primary text:white rounded:small">center</span>
+  <span layout="justify-self:end" space="p:small" visual="bg:primary text:white rounded:small">end</span>
+</div>`,highlightValue:"justify-self:center"}]},H={name:"place-content",property:"layout",syntax:'layout="place-content:[value]"',description:"Shorthand for align-content and justify-content",descriptionMs:"Pintasan untuk align-content dan justify-content",category:"layout",values:[{value:"start",css:"place-content: start;",description:"Start alignment",descriptionMs:"Jajar permulaan"},{value:"end",css:"place-content: end;",description:"End alignment",descriptionMs:"Jajar hujung"},{value:"center",css:"place-content: center;",description:"Center alignment",descriptionMs:"Jajar tengah"},{value:"between",css:"place-content: space-between;",description:"Space between",descriptionMs:"Ruang antara"},{value:"around",css:"place-content: space-around;",description:"Space around",descriptionMs:"Ruang sekeliling"},{value:"evenly",css:"place-content: space-evenly;",description:"Even spacing",descriptionMs:"Ruang sekata"},{value:"stretch",css:"place-content: stretch;",description:"Stretch content",descriptionMs:"Regangkan kandungan"}],examples:[{code:'<div layout="grid place-content:center">Centered content</div>',description:"Center both axes"}],preview:[{title:"Place Content Center",titleMs:"Letakkan Kandungan Tengah",description:"Center entire grid content in both directions",descriptionMs:"Tengahkan keseluruhan kandungan grid dalam kedua-dua arah",html:`<div layout="grid grid-cols:2 place-content:center" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 120px;">
+  <span space="p:small" visual="bg:primary text:white rounded:small">1</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small">2</span>
+</div>`,highlightValue:"place-content:center"}]},W={name:"place-items",property:"layout",syntax:'layout="place-items:[value]"',description:"Shorthand for align-items and justify-items",descriptionMs:"Pintasan untuk align-items dan justify-items",category:"layout",values:[{value:"start",css:"place-items: start;",description:"Start alignment",descriptionMs:"Jajar permulaan"},{value:"end",css:"place-items: end;",description:"End alignment",descriptionMs:"Jajar hujung"},{value:"center",css:"place-items: center;",description:"Center alignment",descriptionMs:"Jajar tengah"},{value:"stretch",css:"place-items: stretch;",description:"Stretch items",descriptionMs:"Regangkan item"}],examples:[{code:'<div layout="grid place-items:center">Centered items</div>',description:"Center all items"}],preview:[{title:"Place Items Center",titleMs:"Letakkan Item Tengah",description:"Center all items within their grid cells",descriptionMs:"Tengahkan semua item dalam sel grid mereka",html:`<div layout="grid grid-cols:3 place-items:center" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 100px;">
+  <span space="p:small" visual="bg:primary text:white rounded:small">1</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small">2</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small">3</span>
+</div>`,highlightValue:"place-items:center"}]},q={name:"place-self",property:"layout",syntax:'layout="place-self:[value]"',description:"Shorthand for align-self and justify-self",descriptionMs:"Pintasan untuk align-self dan justify-self",category:"layout",values:[{value:"auto",css:"place-self: auto;",description:"Auto alignment",descriptionMs:"Jajar automatik"},{value:"start",css:"place-self: start;",description:"Start alignment",descriptionMs:"Jajar permulaan"},{value:"end",css:"place-self: end;",description:"End alignment",descriptionMs:"Jajar hujung"},{value:"center",css:"place-self: center;",description:"Center alignment",descriptionMs:"Jajar tengah"},{value:"stretch",css:"place-self: stretch;",description:"Stretch item",descriptionMs:"Regangkan item"}],examples:[{code:'<div layout="place-self:center">Centered item</div>',description:"Center single item"}],preview:[{title:"Place Self Center",titleMs:"Letakkan Kendiri Tengah",description:"Center one item in both directions within its cell",descriptionMs:"Tengahkan satu item dalam kedua-dua arah dalam selnya",html:`<div layout="grid grid-cols:3" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 100px;">
+  <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">Default</span>
+  <span layout="place-self:center" space="p:small" visual="bg:primary text:white rounded:small">center</span>
+  <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">Default</span>
+</div>`,highlightValue:"place-self:center"}]};var U={name:"grid-columns",property:"layout",syntax:'layout="grid-cols:[value]"',description:"Define grid template columns",descriptionMs:"Tentukan templat lajur grid",category:"layout",dynamic:!0,values:[{value:"1-12",css:"grid-template-columns: repeat({n}, minmax(0, 1fr));",description:"N equal columns",descriptionMs:"N lajur sama"},{value:"none",css:"grid-template-columns: none;",description:"No columns defined",descriptionMs:"Tiada lajur ditakrifkan"},{value:"subgrid",css:"grid-template-columns: subgrid;",description:"Use parent grid",descriptionMs:"Guna grid induk"}],examples:[{code:'<div layout="grid grid-cols:3">3 columns</div>',description:"Three column grid"},{code:'<div layout="grid grid-cols:12">12 columns</div>',description:"Twelve column grid"}],preview:[{title:"3 Column Grid",titleMs:"Grid 3 Lajur",description:"Equal width columns with grid-cols:3",descriptionMs:"Lajur lebar sama dengan grid-cols:3",html:`<div layout="grid grid-cols:3" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">1</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">2</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">3</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">4</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">5</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">6</span>
+</div>`,highlightValue:"grid-cols:3"},{title:"4 Column Grid",titleMs:"Grid 4 Lajur",description:"Four equal columns layout",descriptionMs:"Susun atur empat lajur sama",html:`<div layout="grid grid-cols:4" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">1</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">2</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">3</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">4</span>
+</div>`,highlightValue:"grid-cols:4"}]},X={name:"grid-rows",property:"layout",syntax:'layout="grid-rows:[value]"',description:"Define grid template rows",descriptionMs:"Tentukan templat baris grid",category:"layout",dynamic:!0,values:[{value:"1-12",css:"grid-template-rows: repeat({n}, minmax(0, 1fr));",description:"N equal rows",descriptionMs:"N baris sama"},{value:"none",css:"grid-template-rows: none;",description:"No rows defined",descriptionMs:"Tiada baris ditakrifkan"},{value:"subgrid",css:"grid-template-rows: subgrid;",description:"Use parent grid",descriptionMs:"Guna grid induk"}],examples:[{code:'<div layout="grid grid-rows:3">3 rows</div>',description:"Three row grid"}],preview:[{title:"Grid Rows",titleMs:"Baris Grid",description:"Define explicit row tracks in a grid",descriptionMs:"Tentukan trek baris eksplisit dalam grid",html:`<div layout="grid grid-rows:3 grid-cols:2" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">1</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">2</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">3</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">4</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">5</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">6</span>
+</div>`,highlightValue:"grid-rows:3"}]},Y={name:"grid-column-span",property:"layout",syntax:'layout="col-span:[value]"',description:"Span across grid columns",descriptionMs:"Merentangi lajur grid",category:"layout",dynamic:!0,values:[{value:"1-12",css:"grid-column: span {n} / span {n};",description:"Span N columns",descriptionMs:"Merentangi N lajur"},{value:"full",css:"grid-column: 1 / -1;",description:"Span all columns",descriptionMs:"Merentangi semua lajur"}],examples:[{code:'<div layout="col-span:2">Spans 2 columns</div>',description:"Span two columns"},{code:'<div layout="col-span:full">Full width</div>',description:"Span all columns"}],preview:[{title:"Column Span",titleMs:"Rentang Lajur",description:"Item spanning multiple columns",descriptionMs:"Item merentangi berbilang lajur",html:`<div layout="grid grid-cols:3" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span layout="col-span:2 text:center" space="p:small" visual="bg:primary text:white rounded:small">col-span:2</span>
+  <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small" layout="text:center">1</span>
+  <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small" layout="text:center">1</span>
+  <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small" layout="text:center">1</span>
+  <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small" layout="text:center">1</span>
+</div>`,highlightValue:"col-span:2"},{title:"Full Width Span",titleMs:"Rentang Lebar Penuh",description:"Item spanning all columns",descriptionMs:"Item merentangi semua lajur",html:`<div layout="grid grid-cols:3" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small" layout="text:center">1</span>
+  <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small" layout="text:center">2</span>
+  <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small" layout="text:center">3</span>
+  <span layout="col-span:full text:center" space="p:small" visual="bg:primary text:white rounded:small">col-span:full</span>
+</div>`,highlightValue:"col-span:full"}]},_={name:"grid-row-span",property:"layout",syntax:'layout="row-span:[value]"',description:"Span across grid rows",descriptionMs:"Merentangi baris grid",category:"layout",dynamic:!0,values:[{value:"1-12",css:"grid-row: span {n} / span {n};",description:"Span N rows",descriptionMs:"Merentangi N baris"},{value:"full",css:"grid-row: 1 / -1;",description:"Span all rows",descriptionMs:"Merentangi semua baris"}],examples:[{code:'<div layout="row-span:2">Spans 2 rows</div>',description:"Span two rows"}],preview:[{title:"Row Span",titleMs:"Rentang Baris",description:"Item spanning multiple rows",descriptionMs:"Item merentangi berbilang baris",html:`<div layout="grid grid-cols:3 grid-rows:2" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span layout="row-span:2 flex center" space="p:small" visual="bg:primary text:white rounded:small">row-span:2</span>
+  <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small" layout="text:center">1</span>
+  <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small" layout="text:center">2</span>
+  <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small" layout="text:center">3</span>
+  <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small" layout="text:center">4</span>
+</div>`,highlightValue:"row-span:2"}]},Z={name:"grid-auto-flow",property:"layout",syntax:'layout="grid-flow:[value]"',description:"Control how auto-placed items flow in grid",descriptionMs:"Kawal bagaimana item diletakkan automatik dalam grid",category:"layout",values:[{value:"row",css:"grid-auto-flow: row;",description:"Place by row",descriptionMs:"Letakkan mengikut baris"},{value:"col",css:"grid-auto-flow: column;",description:"Place by column",descriptionMs:"Letakkan mengikut lajur"},{value:"dense",css:"grid-auto-flow: dense;",description:"Dense packing",descriptionMs:"Pembungkusan padat"},{value:"row-dense",css:"grid-auto-flow: row dense;",description:"Row with dense",descriptionMs:"Baris dengan padat"},{value:"col-dense",css:"grid-auto-flow: column dense;",description:"Column with dense",descriptionMs:"Lajur dengan padat"}],examples:[{code:'<div layout="grid grid-flow:col">Column flow</div>',description:"Column-based flow"}],preview:[{title:"Row Flow",titleMs:"Aliran Baris",description:"Items flow by row (default)",descriptionMs:"Item mengalir mengikut baris (lalai)",html:`<div layout="grid grid-cols:3 grid-flow:row" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">1</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">2</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">3</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">4</span>
+</div>`,highlightValue:"grid-flow:row"},{title:"Column Flow",titleMs:"Aliran Lajur",description:"Items flow by column",descriptionMs:"Item mengalir mengikut lajur",html:`<div layout="grid grid-rows:2 grid-flow:col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">1</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">2</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">3</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">4</span>
+</div>`,highlightValue:"grid-flow:col"}]},Q={name:"grid-auto-sizing",property:"layout",syntax:'layout="auto-cols:[value]" or layout="auto-rows:[value]"',description:"Control size of auto-generated grid tracks",descriptionMs:"Kawal saiz trek grid yang dijana automatik",category:"layout",dynamic:!0,values:[{value:"auto",css:"auto",description:"Auto size",descriptionMs:"Saiz automatik"},{value:"min",css:"min-content",description:"Minimum content",descriptionMs:"Kandungan minimum"},{value:"max",css:"max-content",description:"Maximum content",descriptionMs:"Kandungan maksimum"},{value:"fr",css:"minmax(0, 1fr)",description:"Fractional unit",descriptionMs:"Unit pecahan"}],examples:[{code:'<div layout="grid auto-cols:min">Auto min columns</div>',description:"Min-content columns"}],preview:[{title:"Auto Columns",titleMs:"Lajur Automatik",description:"Automatically sized column tracks",descriptionMs:"Trek lajur bersaiz automatik",html:`<div layout="grid grid-flow:col auto-cols:fr" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">Auto 1</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">Auto 2</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">Auto 3</span>
+</div>`,highlightValue:"auto-cols:fr"}]};var ee={name:"position",property:"layout",syntax:'layout="[position-value]"',description:"Set the positioning method",descriptionMs:"Tetapkan kaedah kedudukan",category:"layout",values:[{value:"static",css:"position: static;",description:"Default positioning",descriptionMs:"Kedudukan lalai"},{value:"relative",css:"position: relative;",description:"Relative to normal position",descriptionMs:"Relatif kepada kedudukan normal"},{value:"absolute",css:"position: absolute;",description:"Absolute within container",descriptionMs:"Mutlak dalam bekas"},{value:"fixed",css:"position: fixed;",description:"Fixed to viewport",descriptionMs:"Tetap pada port pandangan"},{value:"sticky",css:"position: sticky;",description:"Sticky positioning",descriptionMs:"Kedudukan melekit"}],examples:[{code:'<div layout="absolute">Absolute positioned</div>',description:"Absolute position"},{code:'<div layout="fixed">Fixed to viewport</div>',description:"Fixed position"}],preview:[{title:"Relative Position",titleMs:"Kedudukan Relatif",description:"Element positioned relative to normal flow",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 top:0 right:0" space="p:tiny" visual="bg:danger text:white rounded:small">Abs</span>
+</div>`,highlightValue:"relative"},{title:"Sticky Position",titleMs:"Kedudukan Melekit",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 top:0" space="p:small" visual="bg:primary text:white rounded:small">Sticky Header</span>
+</div>`,highlightValue:"sticky"}]},ae={name:"inset",property:"layout",syntax:'layout="inset:[value]" or layout="top:[value]"',description:"Control positioning offsets",descriptionMs:"Kawal ofset kedudukan",category:"layout",usesScale:"spacing",supportsArbitrary:!0,values:[{value:"inset",css:"inset: {value};",description:"All sides",descriptionMs:"Semua sisi"},{value:"inset-x",css:"left: {value}; right: {value};",description:"Left and right",descriptionMs:"Kiri dan kanan"},{value:"inset-y",css:"top: {value}; bottom: {value};",description:"Top and bottom",descriptionMs:"Atas dan bawah"},{value:"top",css:"top: {value};",description:"Top offset",descriptionMs:"Ofset atas"},{value:"right",css:"right: {value};",description:"Right offset",descriptionMs:"Ofset kanan"},{value:"bottom",css:"bottom: {value};",description:"Bottom offset",descriptionMs:"Ofset bawah"},{value:"left",css:"left: {value};",description:"Left offset",descriptionMs:"Ofset kiri"}],examples:[{code:'<div layout="absolute inset:0">Full coverage</div>',description:"Cover parent"},{code:'<div layout="absolute top:medium left:medium">Offset</div>',description:"Offset positioning"}],preview:[{title:"Inset Zero",titleMs:"Inset Sifar",description:"Cover entire parent with inset:0",descriptionMs:"Tutup keseluruhan induk dengan inset:0",html:`<div layout="relative" space="p:large" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 100px;">
+  <span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">Parent</span>
+  <span layout="absolute inset:0 flex center" visual="bg:primary/50 text:white rounded:medium">inset:0</span>
+</div>`,highlightValue:"inset:0"},{title:"Directional Insets",titleMs:"Inset Arah",description:"Position with top, right, bottom, left",descriptionMs:"Kedudukan dengan atas, kanan, bawah, kiri",html:`<div layout="relative" space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 80px;">
+  <span layout="absolute top:0 left:0" space="p:tiny" visual="bg:primary text:white rounded:small">TL</span>
+  <span layout="absolute top:0 right:0" space="p:tiny" visual="bg:primary text:white rounded:small">TR</span>
+  <span layout="absolute bottom:0 left:0" space="p:tiny" visual="bg:primary text:white rounded:small">BL</span>
+  <span layout="absolute bottom:0 right:0" space="p:tiny" visual="bg:primary text:white rounded:small">BR</span>
+</div>`,highlightValue:"top:0"}]},ie={name:"z-index",property:"layout",syntax:'layout="z:[value]"',description:"Control stacking order",descriptionMs:"Kawal susunan tindanan",category:"layout",usesScale:"zIndex",values:[{value:"base",css:"z-index: var(--z-base);",description:"Base layer (0)",descriptionMs:"Lapisan asas (0)"},{value:"low",css:"z-index: var(--z-low);",description:"Low layer (10)",descriptionMs:"Lapisan rendah (10)"},{value:"mid",css:"z-index: var(--z-mid);",description:"Middle layer (50)",descriptionMs:"Lapisan tengah (50)"},{value:"high",css:"z-index: var(--z-high);",description:"High layer (100)",descriptionMs:"Lapisan tinggi (100)"},{value:"top",css:"z-index: var(--z-top);",description:"Top layer (9999)",descriptionMs:"Lapisan teratas (9999)"}],examples:[{code:'<div layout="z:top">On top</div>',description:"Highest z-index"}],preview:[{title:"Z-Index Layers",titleMs:"Lapisan Z-Index",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 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"}]};var te={name:"visibility",property:"layout",syntax:'layout="[visibility-value]"',description:"Control element visibility",descriptionMs:"Kawal ketampakan elemen",category:"layout",values:[{value:"visible",css:"visibility: visible;",description:"Element is visible",descriptionMs:"Elemen kelihatan"},{value:"invisible",css:"visibility: hidden;",description:"Element is invisible but takes space",descriptionMs:"Elemen tidak kelihatan tetapi mengambil ruang"}],examples:[{code:'<div layout="invisible">Invisible but present</div>',description:"Hide visually"}],preview:[{title:"Visible vs Invisible",titleMs:"Kelihatan vs Tidak Kelihatan",description:"Invisible elements still take up space",descriptionMs:"Elemen tidak kelihatan masih mengambil ruang",html:`<div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span space="p:small" visual="bg:primary text:white rounded:small">Visible</span>
+  <span layout="invisible" space="p:small" visual="bg:neutral-300 rounded:small">Invisible</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small">Visible</span>
+</div>`,highlightValue:"invisible"}]},se={name:"overflow",property:"layout",syntax:'layout="overflow:[value]"',description:"Control content overflow behavior",descriptionMs:"Kawal kelakuan limpahan kandungan",category:"layout",values:[{value:"auto",css:"overflow: auto;",description:"Scrollbar when needed",descriptionMs:"Bar skrol bila perlu"},{value:"hidden",css:"overflow: hidden;",description:"Hide overflow",descriptionMs:"Sembunyikan limpahan"},{value:"visible",css:"overflow: visible;",description:"Show overflow",descriptionMs:"Tunjukkan limpahan"},{value:"scroll",css:"overflow: scroll;",description:"Always show scrollbar",descriptionMs:"Sentiasa tunjuk bar skrol"},{value:"clip",css:"overflow: clip;",description:"Clip overflow",descriptionMs:"Potong limpahan"}],examples:[{code:'<div layout="overflow:hidden">Clipped content</div>',description:"Hide overflow"},{code:'<div layout="overflow:auto">Scrollable</div>',description:"Auto scrollbar"}],preview:[{title:"Overflow Hidden",titleMs:"Limpahan Tersembunyi",description:"Content clipped at container edge",descriptionMs:"Kandungan dipotong di tepi bekas",html:`<div layout="overflow:hidden" space="p:small" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 60px; width: 150px;">
+  <p visual="text:neutral-800 dark:text:neutral-200">This is a long text that will be clipped because overflow is hidden.</p>
+</div>`,highlightValue:"overflow:hidden"},{title:"Overflow Auto",titleMs:"Limpahan Auto",description:"Scrollbar appears when content overflows",descriptionMs:"Bar skrol muncul apabila kandungan melimpah",html:`<div layout="overflow:auto" space="p:small" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 60px; width: 150px;">
+  <p visual="text:neutral-800 dark:text:neutral-200">This is a long text that will show a scrollbar because overflow is auto.</p>
+</div>`,highlightValue:"overflow:auto"}]},re={name:"box-sizing",property:"layout",syntax:'layout="box:[value]"',description:"Control how width and height are calculated",descriptionMs:"Kawal cara lebar dan tinggi dikira",category:"layout",values:[{value:"border",css:"box-sizing: border-box;",description:"Include padding and border in size",descriptionMs:"Termasuk padding dan sempadan dalam saiz"},{value:"content",css:"box-sizing: content-box;",description:"Exclude padding and border",descriptionMs:"Tidak termasuk padding dan sempadan"}],examples:[{code:'<div layout="box:border">Border box</div>',description:"Include border in width"}],preview:[{title:"Border Box",titleMs:"Kotak Sempadan",description:"Padding and border included in width",descriptionMs:"Padding dan sempadan termasuk dalam lebar",html:`<div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div layout="box:border" space="p:medium" visual="bg:primary text:white border:4 border:white rounded:small" style="width: 100px;">box:border<br>100px</div>
+</div>`,highlightValue:"box:border"}]},ne={name:"float-clear",property:"layout",syntax:'layout="float:[value]" or layout="clear:[value]"',description:"Control element floating and clearing",descriptionMs:"Kawal pengapungan dan pembersihan elemen",category:"layout",values:[{value:"left",css:"float: left;",description:"Float left",descriptionMs:"Apung kiri"},{value:"right",css:"float: right;",description:"Float right",descriptionMs:"Apung kanan"},{value:"none",css:"float: none;",description:"No float",descriptionMs:"Tiada pengapungan"}],examples:[{code:'<img layout="float:left">Float left</img>',description:"Float image left"},{code:'<div layout="clear:both">Clear floats</div>',description:"Clear all floats"}],preview:[{title:"Float Left",titleMs:"Apung Kiri",description:"Element floats to the left of content",descriptionMs:"Elemen mengapung ke kiri kandungan",html:`<div space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div layout="float:left" space="p:small m-r:small m-b:small" visual="bg:primary text:white rounded:small">Float</div>
+  <p visual="text:neutral-800 dark:text:neutral-200">Text wraps around the floated element naturally.</p>
+</div>`,highlightValue:"float:left"}]},le={name:"aspect-ratio",property:"layout",syntax:'layout="aspect:[value]"',description:"Set element aspect ratio",descriptionMs:"Tetapkan nisbah aspek elemen",category:"layout",supportsArbitrary:!0,values:[{value:"auto",css:"aspect-ratio: auto;",description:"Natural aspect ratio",descriptionMs:"Nisbah aspek semula jadi"},{value:"square",css:"aspect-ratio: 1 / 1;",description:"1:1 square",descriptionMs:"Segi empat sama 1:1"},{value:"video",css:"aspect-ratio: 16 / 9;",description:"16:9 video",descriptionMs:"Video 16:9"}],examples:[{code:'<div layout="aspect:square">Square</div>',description:"Square aspect ratio"},{code:'<div layout="aspect:[4/3]">4:3</div>',description:"Custom ratio"}],preview:[{title:"Aspect Ratio Square",titleMs:"Nisbah Aspek Segi Empat",description:"1:1 aspect ratio",descriptionMs:"Nisbah aspek 1:1",html:`<div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div layout="aspect:square flex center" visual="bg:primary text:white rounded:small" style="width: 80px;">1:1</div>
+  <div layout="aspect:video flex center" visual="bg:primary text:white rounded:small" style="width: 80px;">16:9</div>
+</div>`,highlightValue:"aspect:square"}]},oe={name:"object-fit",property:"layout",syntax:'layout="object:[value]"',description:"Control how media content fits its container",descriptionMs:"Kawal bagaimana kandungan media muat dalam bekasnya",category:"layout",values:[{value:"contain",css:"object-fit: contain;",description:"Scale to fit, preserve ratio",descriptionMs:"Skala untuk muat, kekalkan nisbah"},{value:"cover",css:"object-fit: cover;",description:"Cover container, may crop",descriptionMs:"Tutup bekas, mungkin dipotong"},{value:"fill",css:"object-fit: fill;",description:"Stretch to fill",descriptionMs:"Regang untuk mengisi"},{value:"none",css:"object-fit: none;",description:"No scaling",descriptionMs:"Tiada penskalaan"},{value:"scale-down",css:"object-fit: scale-down;",description:"Smaller of none or contain",descriptionMs:"Lebih kecil antara tiada atau kandung"}],examples:[{code:'<img layout="object:cover">Cover image</img>',description:"Cover fit"}],preview:[{title:"Object Fit Cover",titleMs:"Objek Muat Tutup",description:"Image covers container, may crop",descriptionMs:"Imej menutup bekas, mungkin dipotong",html:`<div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div style="width: 80px; height: 60px;" visual="bg:neutral-300 rounded:small" layout="overflow:hidden">
+    <div layout="object:cover" style="width: 100%; height: 100%;" visual="bg:primary"></div>
+  </div>
+  <span layout="flex center" visual="text:neutral-600 dark:text:neutral-400">object:cover</span>
+</div>`,highlightValue:"object:cover"},{title:"Object Fit Contain",titleMs:"Objek Muat Kandung",description:"Image fits inside, preserves ratio",descriptionMs:"Imej muat di dalam, kekalkan nisbah",html:`<div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div style="width: 80px; height: 60px;" visual="bg:neutral-300 rounded:small" layout="flex center">
+    <div layout="object:contain" style="width: 60%; height: 60%;" visual="bg:primary rounded:small"></div>
+  </div>
+  <span layout="flex center" visual="text:neutral-600 dark:text:neutral-400">object:contain</span>
+</div>`,highlightValue:"object:contain"}]},de={name:"object-position",property:"layout",syntax:'layout="object-pos:[value]"',description:"Position replaced element content within container",descriptionMs:"Letakkan kandungan elemen diganti dalam bekas",category:"layout",supportsArbitrary:!0,values:[{value:"center",css:"object-position: center;",description:"Center position",descriptionMs:"Kedudukan tengah"},{value:"top",css:"object-position: top;",description:"Top position",descriptionMs:"Kedudukan atas"},{value:"bottom",css:"object-position: bottom;",description:"Bottom position",descriptionMs:"Kedudukan bawah"},{value:"left",css:"object-position: left;",description:"Left position",descriptionMs:"Kedudukan kiri"},{value:"right",css:"object-position: right;",description:"Right position",descriptionMs:"Kedudukan kanan"},{value:"top-left",css:"object-position: top left;",description:"Top left",descriptionMs:"Atas kiri"},{value:"top-right",css:"object-position: top right;",description:"Top right",descriptionMs:"Atas kanan"},{value:"bottom-left",css:"object-position: bottom left;",description:"Bottom left",descriptionMs:"Bawah kiri"},{value:"bottom-right",css:"object-position: bottom right;",description:"Bottom right",descriptionMs:"Bawah kanan"}],examples:[{code:'<img layout="object:cover object-pos:top">Top positioned</img>',description:"Top position"}],preview:[{title:"Object Position",titleMs:"Kedudukan Objek",description:"Control where media is positioned within container",descriptionMs:"Kawal di mana media diletakkan dalam bekas",html:`<div layout="grid grid-cols:3" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div style="height: 50px;" visual="bg:neutral-300 rounded:small" layout="flex items:start justify:center"><span space="p:tiny" visual="bg:primary text:white rounded:small">top</span></div>
+  <div style="height: 50px;" visual="bg:neutral-300 rounded:small" layout="flex center"><span space="p:tiny" visual="bg:primary text:white rounded:small">center</span></div>
+  <div style="height: 50px;" visual="bg:neutral-300 rounded:small" layout="flex items:end justify:center"><span space="p:tiny" visual="bg:primary text:white rounded:small">bottom</span></div>
+</div>`,highlightValue:"object-pos:center"}]},pe={name:"container",property:"layout",syntax:'layout="container"',description:"Create a centered container with max-width",descriptionMs:"Cipta bekas berpusat dengan lebar maksimum",category:"layout",values:[{value:"container",css:"width: 100%; margin-left: auto; margin-right: auto;",description:"Centered container",descriptionMs:"Bekas berpusat"}],examples:[{code:'<div layout="container">Centered content</div>',description:"Container"}],preview:[{title:"Container",titleMs:"Bekas",description:"Centered container with max-width",descriptionMs:"Bekas berpusat dengan lebar maksimum",html:`<div visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" space="p:small">
+  <div layout="container text:center" space="p:medium" visual="bg:primary text:white rounded:small">Centered Container</div>
+</div>`,highlightValue:"container"}]},ue={name:"isolation",property:"layout",syntax:'layout="isolation:[value]"',description:"Create new stacking context",descriptionMs:"Cipta konteks tindanan baharu",category:"layout",values:[{value:"isolate",css:"isolation: isolate;",description:"Create stacking context",descriptionMs:"Cipta konteks tindanan"},{value:"auto",css:"isolation: auto;",description:"Auto isolation",descriptionMs:"Pengasingan automatik"}],examples:[{code:'<div layout="isolation:isolate">Isolated</div>',description:"Create stacking context"}],preview:[{title:"Isolation",titleMs:"Pengasingan",description:"Create new stacking context",descriptionMs:"Cipta konteks tindanan baharu",html:`<div layout="relative" space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div layout="isolation:isolate" space="p:small" visual="bg:primary text:white rounded:small">isolation:isolate</div>
+</div>`,highlightValue:"isolation:isolate"}]},ce={name:"overscroll",property:"layout",syntax:'layout="overscroll:[value]"',description:"Control scroll chaining behavior",descriptionMs:"Kawal kelakuan rantaian skrol",category:"layout",values:[{value:"auto",css:"overscroll-behavior: auto;",description:"Default behavior",descriptionMs:"Kelakuan lalai"},{value:"contain",css:"overscroll-behavior: contain;",description:"Contain scroll",descriptionMs:"Kandung skrol"},{value:"none",css:"overscroll-behavior: none;",description:"No scroll chaining",descriptionMs:"Tiada rantaian skrol"}],examples:[{code:'<div layout="overscroll:contain">Contained scroll</div>',description:"Prevent scroll chaining"}],preview:[{title:"Overscroll Contain",titleMs:"Kandungan Overscroll",description:"Prevent scroll from affecting parent",descriptionMs:"Halang skrol daripada mempengaruhi induk",html:`<div layout="overscroll:contain overflow:auto" space="p:small" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 60px;">
+  <p visual="text:neutral-800 dark:text:neutral-200">Scroll here won't chain to parent. Content continues for demo purposes to show scrolling behavior.</p>
+</div>`,highlightValue:"overscroll:contain"}]},me={name:"columns",property:"layout",syntax:'layout="cols:[value]"',description:"Create multi-column layouts",descriptionMs:"Cipta susun atur berbilang lajur",category:"layout",dynamic:!0,values:[{value:"1-12",css:"columns: {n};",description:"N columns",descriptionMs:"N lajur"},{value:"auto",css:"columns: auto;",description:"Auto columns",descriptionMs:"Lajur automatik"}],examples:[{code:'<div layout="cols:3">Three columns</div>',description:"Three column text"}],preview:[{title:"Multi-Column Layout",titleMs:"Susun Atur Berbilang Lajur",description:"Text flows into multiple columns",descriptionMs:"Teks mengalir ke berbilang lajur",html:`<div layout="cols:2" space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <p visual="text:neutral-800 dark:text:neutral-200">This text will automatically flow into two columns. Great for newspaper-style layouts and improving readability of long text content.</p>
+</div>`,highlightValue:"cols:2"}]};var ve={name:"border-collapse",property:"layout",syntax:'layout="border:[value]"',description:"Control table border collapse",descriptionMs:"Kawal runtuhan sempadan jadual",category:"layout",values:[{value:"collapse",css:"border-collapse: collapse;",description:"Collapse borders",descriptionMs:"Runtuhkan sempadan"},{value:"separate",css:"border-collapse: separate;",description:"Separate borders",descriptionMs:"Asingkan sempadan"}],examples:[{code:'<table layout="border:collapse">Collapsed table</table>',description:"Collapse table borders"}],preview:[{title:"Border Collapse",titleMs:"Runtuh Sempadan",description:"Table borders collapse into single lines",descriptionMs:"Sempadan jadual runtuh menjadi satu baris",html:`<table layout="border:collapse" visual="border:1 border:neutral-300 dark:border:neutral-700" style="width: 100%;">
+  <tbody>
+    <tr>
+      <td space="p:small" visual="border:1 border:neutral-300 dark:border:neutral-700 bg:primary text:white">A1</td>
+      <td space="p:small" visual="border:1 border:neutral-300 dark:border:neutral-700 bg:primary text:white">A2</td>
+    </tr>
+    <tr>
+      <td space="p:small" visual="border:1 border:neutral-300 dark:border:neutral-700 bg:primary text:white">B1</td>
+      <td space="p:small" visual="border:1 border:neutral-300 dark:border:neutral-700 bg:primary text:white">B2</td>
+    </tr>
+  </tbody>
+</table>`,highlightValue:"border:collapse"},{title:"Border Separate",titleMs:"Asingkan Sempadan",description:"Table borders are separate (default)",descriptionMs:"Sempadan jadual diasingkan (lalai)",html:`<table layout="border:separate" visual="border:1 border:neutral-300 dark:border:neutral-700" style="width: 100%; border-spacing: 4px;">
+  <tbody>
+    <tr>
+      <td space="p:small" visual="border:1 border:neutral-300 dark:border:neutral-700 bg:primary text:white rounded:small">A1</td>
+      <td space="p:small" visual="border:1 border:neutral-300 dark:border:neutral-700 bg:primary text:white rounded:small">A2</td>
+    </tr>
+    <tr>
+      <td space="p:small" visual="border:1 border:neutral-300 dark:border:neutral-700 bg:primary text:white rounded:small">B1</td>
+      <td space="p:small" visual="border:1 border:neutral-300 dark:border:neutral-700 bg:primary text:white rounded:small">B2</td>
+    </tr>
+  </tbody>
+</table>`,highlightValue:"border:separate"}]},ge={name:"border-spacing",property:"layout",syntax:'layout="border-spacing:[value]"',description:"Control spacing between table borders",descriptionMs:"Kawal jarak antara sempadan jadual",category:"layout",usesScale:"spacing",supportsArbitrary:!0,dynamic:!0,values:[{value:"border-spacing",css:"border-spacing: {value};",description:"All spacing",descriptionMs:"Semua jarak"},{value:"border-spacing-x",css:"border-spacing: {value} 0;",description:"Horizontal spacing",descriptionMs:"Jarak mendatar"},{value:"border-spacing-y",css:"border-spacing: 0 {value};",description:"Vertical spacing",descriptionMs:"Jarak menegak"}],examples:[{code:'<table layout="border-separate border-spacing:small">Spaced</table>',description:"Spaced table borders"}],preview:[{title:"Border Spacing",titleMs:"Jarak Sempadan",description:"Space between table cell borders",descriptionMs:"Jarak antara sempadan sel jadual",html:`<table layout="border:separate" style="width: 100%; border-spacing: 8px;">
+  <tbody>
+    <tr>
+      <td space="p:small" visual="bg:primary text:white rounded:small">A1</td>
+      <td space="p:small" visual="bg:primary text:white rounded:small">A2</td>
+    </tr>
+    <tr>
+      <td space="p:small" visual="bg:primary text:white rounded:small">B1</td>
+      <td space="p:small" visual="bg:primary text:white rounded:small">B2</td>
+    </tr>
+  </tbody>
+</table>`,highlightValue:"border-spacing:small"}]},he={name:"table-layout",property:"layout",syntax:'layout="table:[value]"',description:"Control table layout algorithm",descriptionMs:"Kawal algoritma susun atur jadual",category:"layout",values:[{value:"auto",css:"table-layout: auto;",description:"Auto layout",descriptionMs:"Susun atur automatik"},{value:"fixed",css:"table-layout: fixed;",description:"Fixed layout",descriptionMs:"Susun atur tetap"}],examples:[{code:'<table layout="table:fixed">Fixed width columns</table>',description:"Fixed column widths"}],preview:[{title:"Fixed Table Layout",titleMs:"Susun Atur Jadual Tetap",description:"Columns have fixed equal widths",descriptionMs:"Lajur mempunyai lebar tetap sama",html:`<table layout="table:fixed" style="width: 100%;" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <tbody>
+    <tr>
+      <td space="p:small" visual="bg:primary text:white">Fixed</td>
+      <td space="p:small" visual="bg:primary text:white">Column</td>
+      <td space="p:small" visual="bg:primary text:white">Widths</td>
+    </tr>
+  </tbody>
+</table>`,highlightValue:"table:fixed"},{title:"Auto Table Layout",titleMs:"Susun Atur Jadual Auto",description:"Columns adjust to content width",descriptionMs:"Lajur menyesuaikan dengan lebar kandungan",html:`<table layout="table:auto" style="width: 100%;" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <tbody>
+    <tr>
+      <td space="p:small" visual="bg:primary text:white">Short</td>
+      <td space="p:small" visual="bg:primary text:white">Much Longer Content Here</td>
+      <td space="p:small" visual="bg:primary text:white">Med</td>
+    </tr>
+  </tbody>
+</table>`,highlightValue:"table:auto"}]},be={name:"caption-side",property:"layout",syntax:'layout="caption:[value]"',description:"Control table caption position",descriptionMs:"Kawal kedudukan kapsyen jadual",category:"layout",values:[{value:"top",css:"caption-side: top;",description:"Caption on top",descriptionMs:"Kapsyen di atas"},{value:"bottom",css:"caption-side: bottom;",description:"Caption on bottom",descriptionMs:"Kapsyen di bawah"}],examples:[{code:'<caption layout="caption:bottom">Bottom caption</caption>',description:"Bottom caption"}],preview:[{title:"Caption Top",titleMs:"Kapsyen Atas",description:"Table caption at the top",descriptionMs:"Kapsyen jadual di atas",html:`<table style="width: 100%;">
+  <caption layout="caption:top" space="p:small" visual="text:neutral-600 dark:text:neutral-400">Table Caption (Top)</caption>
+  <tbody>
+    <tr>
+      <td space="p:small" visual="bg:primary text:white rounded:small">Data</td>
+      <td space="p:small" visual="bg:primary text:white rounded:small">Data</td>
+    </tr>
+  </tbody>
+</table>`,highlightValue:"caption:top"},{title:"Caption Bottom",titleMs:"Kapsyen Bawah",description:"Table caption at the bottom",descriptionMs:"Kapsyen jadual di bawah",html:`<table style="width: 100%;">
+  <caption layout="caption:bottom" space="p:small" visual="text:neutral-600 dark:text:neutral-400">Table Caption (Bottom)</caption>
+  <tbody>
+    <tr>
+      <td space="p:small" visual="bg:primary text:white rounded:small">Data</td>
+      <td space="p:small" visual="bg:primary text:white rounded:small">Data</td>
+    </tr>
+  </tbody>
+</table>`,highlightValue:"caption:bottom"}]};var xe={display:z,flexDirection:$,flexWrap:j,flexItems:B,flexShorthand:E,flexBasis:P,order:K,justifyContent:R,alignItems:I,alignSelf:L,alignContent:N,shorthandAlignment:G,justifyItems:O,justifySelf:J,placeContent:H,placeItems:W,placeSelf:q,gridColumns:U,gridRows:X,gridColSpan:Y,gridRowSpan:_,gridAutoFlow:Z,gridAutoSizing:Q,position:ee,inset:ae,zIndex:ie,visibility:te,overflow:se,boxSizing:re,floatClear:ne,aspectRatio:le,objectFit:oe,objectPosition:de,container:pe,isolation:ue,overscroll:ce,columns:me,borderCollapse:ve,borderSpacing:ge,tableLayout:he,captionSide:be};function w(n=xe){let l={};for(let t of Object.values(n))if(!t.dynamic&&!(!t.syntax||!t.syntax.includes('layout="[')))for(let e of t.values)e.value.match(/^\d+-\d+$/)||(l[e.value]=e.css);return l}var sa={name:"padding",property:"space",syntax:'space="p:[value]" or space="p-{side}:[value]"',description:"Add padding to elements",descriptionMs:"Tambah padding pada elemen",category:"space",usesScale:"spacing",values:[{property:"p",css:"padding: var(--s-{value});",description:"All sides",descriptionMs:"Semua sisi"},{property:"p-t",css:"padding-top: var(--s-{value});",description:"Top",descriptionMs:"Atas"},{property:"p-r",css:"padding-right: var(--s-{value});",description:"Right",descriptionMs:"Kanan"},{property:"p-b",css:"padding-bottom: var(--s-{value});",description:"Bottom",descriptionMs:"Bawah"},{property:"p-l",css:"padding-left: var(--s-{value});",description:"Left",descriptionMs:"Kiri"},{property:"p-x",css:"padding-left: var(--s-{value}); padding-right: var(--s-{value});",description:"Horizontal",descriptionMs:"Mendatar"},{property:"p-y",css:"padding-top: var(--s-{value}); padding-bottom: var(--s-{value});",description:"Vertical",descriptionMs:"Menegak"}],scaleValues:["none","thin","regular","thick","tiny","tiny-2x","small","small-2x","small-3x","small-4x","medium","medium-2x","medium-3x","medium-4x","large","large-2x","large-3x","large-4x","big","big-2x","big-3x","big-4x","giant","giant-2x","giant-3x","giant-4x","vast","vast-2x","vast-3x","vast-4x","vast-5x","vast-6x","vast-7x","vast-8x","vast-9x","vast-10x"],supportsArbitrary:!0,examples:[{code:'<div space="p:medium">Padding all sides</div>',description:"Medium padding"},{code:'<div space="p-x:big p-y:small">Different padding</div>',description:"Axis padding"},{code:'<div space="p:[20px]">Custom padding</div>',description:"Arbitrary value"}],preview:[{title:"Padding Scale",titleMs:"Skala Padding",description:"Different padding sizes from the scale",descriptionMs:"Saiz padding berbeza dari skala",html:`<div layout="flex" space="g:small">
+  <div space="p:tiny" visual="bg:primary text:white rounded:small">tiny</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">small</div>
+  <div space="p:medium" visual="bg:primary text:white rounded:small">medium</div>
+  <div space="p:big" visual="bg:primary text:white rounded:small">big</div>
+</div>`,highlightValue:"p:medium"},{title:"Directional Padding",titleMs:"Padding Arah",description:"Apply padding to specific sides",descriptionMs:"Padamkan padding pada sisi tertentu",html:`<div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p-x:big p-y:small" visual="bg:primary text:white rounded:small">p-x:big p-y:small</div>
+  <div space="p-t:big" visual="bg:primary text:white rounded:small">p-t:big</div>
+</div>`,highlightValue:"p-x:big"}],footnotes:[{title:"Tailwind Scale Support",titleMs:"Sokongan Skala Tailwind",content:"Use `tw-` prefix to access Tailwind numeric scale: `p:tw-4` (1rem), `p:tw-8` (2rem)",contentMs:"Gunakan awalan `tw-` untuk mengakses skala numerik Tailwind: `p:tw-4` (1rem), `p:tw-8` (2rem)",link:"https://tailwindcss.com/docs/padding"}]},ra={name:"margin",property:"space",syntax:'space="m:[value]" or space="m-{side}:[value]"',description:"Add margin to elements",descriptionMs:"Tambah margin pada elemen",category:"space",usesScale:"spacing",values:[{property:"m",css:"margin: var(--s-{value});",description:"All sides",descriptionMs:"Semua sisi"},{property:"m-t",css:"margin-top: var(--s-{value});",description:"Top",descriptionMs:"Atas"},{property:"m-r",css:"margin-right: var(--s-{value});",description:"Right",descriptionMs:"Kanan"},{property:"m-b",css:"margin-bottom: var(--s-{value});",description:"Bottom",descriptionMs:"Bawah"},{property:"m-l",css:"margin-left: var(--s-{value});",description:"Left",descriptionMs:"Kiri"},{property:"m-x",css:"margin-left: var(--s-{value}); margin-right: var(--s-{value});",description:"Horizontal",descriptionMs:"Mendatar"},{property:"m-y",css:"margin-top: var(--s-{value}); margin-bottom: var(--s-{value});",description:"Vertical",descriptionMs:"Menegak"}],scaleValues:["none","thin","regular","thick","tiny","tiny-2x","small","small-2x","small-3x","small-4x","medium","medium-2x","medium-3x","medium-4x","large","large-2x","large-3x","large-4x","big","big-2x","big-3x","big-4x","giant","giant-2x","giant-3x","giant-4x","vast","vast-2x","vast-3x","vast-4x","vast-5x","vast-6x","vast-7x","vast-8x","vast-9x","vast-10x","auto"],supportsArbitrary:!0,examples:[{code:'<div space="m:medium">Margin all sides</div>',description:"Medium margin"},{code:'<div space="m-x:auto">Centered horizontally</div>',description:"Auto centering"},{code:'<div space="m-t:big">Top margin</div>',description:"Top margin only"}],preview:[{title:"Margin Scale",titleMs:"Skala Margin",description:"Different margin sizes from the scale",descriptionMs:"Saiz margin berbeza dari skala",html:`<div layout="flex col" space="g:tiny p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="m:tiny" visual="bg:primary text:white rounded:small">m:tiny</div>
+  <div space="m:small" visual="bg:primary text:white rounded:small">m:small</div>
+  <div space="m:medium" visual="bg:primary text:white rounded:small">m:medium</div>
+</div>`,highlightValue:"m:medium"},{title:"Auto Centering",titleMs:"Tengah Automatik",description:"Use m-x:auto to center horizontally",descriptionMs:"Guna m-x:auto untuk tengahkan mendatar",html:`<div space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="m-x:auto p:small" visual="bg:primary text:white rounded:small" style="width: fit-content;">m-x:auto</div>
+</div>`,highlightValue:"m-x:auto"}],footnotes:[{title:"Tailwind Scale Support",titleMs:"Sokongan Skala Tailwind",content:"Use `tw-` prefix to access Tailwind numeric scale: `m:tw-4` (1rem), `m-t:tw-8` (2rem)",contentMs:"Gunakan awalan `tw-` untuk mengakses skala numerik Tailwind: `m:tw-4` (1rem), `m-t:tw-8` (2rem)",link:"https://tailwindcss.com/docs/margin"}]},na={name:"gap",property:"space",syntax:'space="g:[value]" or space="g-{axis}:[value]"',description:"Add gap between flex/grid items",descriptionMs:"Tambah ruang antara item flex/grid",category:"space",usesScale:"spacing",values:[{property:"g",css:"gap: var(--s-{value});",description:"All gaps",descriptionMs:"Semua ruang"},{property:"g-x",css:"column-gap: var(--s-{value});",description:"Column gap",descriptionMs:"Ruang lajur"},{property:"g-y",css:"row-gap: var(--s-{value});",description:"Row gap",descriptionMs:"Ruang baris"}],scaleValues:["none","thin","regular","thick","tiny","tiny-2x","small","small-2x","small-3x","small-4x","medium","medium-2x","medium-3x","medium-4x","large","large-2x","large-3x","large-4x","big","big-2x","big-3x","big-4x","giant","giant-2x","giant-3x","giant-4x","vast","vast-2x","vast-3x","vast-4x","vast-5x","vast-6x","vast-7x","vast-8x","vast-9x","vast-10x"],supportsArbitrary:!0,examples:[{code:'<div layout="flex" space="g:medium">Gap between items</div>',description:"Flex gap"},{code:'<div layout="grid" space="g-x:big g-y:small">Grid gaps</div>',description:"Different axis gaps"}],preview:[{title:"Flex Gap",titleMs:"Gap Flex",description:"Space between flex items",descriptionMs:"Ruang antara item flex",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span space="p:small" visual="bg:primary text:white rounded:small">1</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small">2</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small">3</span>
+</div>`,highlightValue:"g:medium"},{title:"Grid Gap",titleMs:"Gap Grid",description:"Space between grid items",descriptionMs:"Ruang antara item grid",html:`<div layout="grid grid-cols:3" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">1</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">2</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">3</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">4</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">5</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">6</span>
+</div>`,highlightValue:"g:small"}],footnotes:[{title:"Tailwind Scale Support",titleMs:"Sokongan Skala Tailwind",content:"Use `tw-` prefix to access Tailwind numeric scale: `g:tw-4` (1rem), `g:tw-8` (2rem)",contentMs:"Gunakan awalan `tw-` untuk mengakses skala numerik Tailwind: `g:tw-4` (1rem), `g:tw-8` (2rem)",link:"https://tailwindcss.com/docs/gap"}]},la={name:"width",property:"space",syntax:'space="w:[value]"',description:"Set element width",descriptionMs:"Tetapkan lebar elemen",category:"space",usesScale:"spacing",values:[{property:"w",css:"width: var(--s-{value});",description:"Width",descriptionMs:"Lebar"},{property:"min-w",css:"min-width: var(--s-{value});",description:"Minimum width",descriptionMs:"Lebar minimum"},{property:"max-w",css:"max-width: var(--s-{value});",description:"Maximum width",descriptionMs:"Lebar maksimum"}],scaleValues:["none","thin","regular","thick","tiny","tiny-2x","small","small-2x","small-3x","small-4x","medium","medium-2x","medium-3x","medium-4x","large","large-2x","large-3x","large-4x","big","big-2x","big-3x","big-4x","giant","giant-2x","giant-3x","giant-4x","vast","vast-2x","vast-3x","vast-4x","vast-5x","vast-6x","vast-7x","vast-8x","vast-9x","vast-10x","min","max","fit","full","half","third","third-2x","quarter","quarter-2x","quarter-3x","1/1","1/2","1/3","2/3","1/4","2/4","3/4"],percentageAdjectives:[{name:"full",value:"100%",description:"Full width (100%)",descriptionMs:"Lebar penuh (100%)"},{name:"half",value:"50%",description:"Half width (50%)",descriptionMs:"Separuh lebar (50%)"},{name:"third",value:"33.333333%",description:"One third width (33%)",descriptionMs:"Satu pertiga lebar (33%)"},{name:"third-2x",value:"66.666667%",description:"Two thirds width (66%)",descriptionMs:"Dua pertiga lebar (66%)"},{name:"quarter",value:"25%",description:"One quarter width (25%)",descriptionMs:"Satu perempat lebar (25%)"},{name:"quarter-2x",value:"50%",description:"Two quarters width (50%)",descriptionMs:"Dua perempat lebar (50%)"},{name:"quarter-3x",value:"75%",description:"Three quarters width (75%)",descriptionMs:"Tiga perempat lebar (75%)"}],supportsArbitrary:!0,examples:[{code:'<div space="w:full">Full width</div>',description:"Full width"},{code:'<div space="w:half">Half width</div>',description:"Half width (50%)"},{code:'<div space="w:third">Third width</div>',description:"One third width (33%)"},{code:'<div space="w:quarter-3x">Three quarters</div>',description:"Three quarters width (75%)"},{code:'<div space="max-w:[1200px]">Max width container</div>',description:"Max width"},{code:'<div space="w:max">Content width</div>',description:"Width based on content (max-content)"}],preview:[{title:"Width Control",titleMs:"Kawal Lebar",description:"Set fixed or percentage widths",descriptionMs:"Tetapkan lebar tetap atau peratusan",html:`<div layout="flex col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="w:full p:small" visual="bg:primary text:white rounded:small">w:full</div>
+  <div space="w:quarter-3x p:small" visual="bg:primary text:white rounded:small">w:quarter-3x</div>
+  <div space="w:half p:small" visual="bg:primary text:white rounded:small">w:half</div>
+</div>`,highlightValue:"w:full"},{title:"Content-Based Sizing",titleMs:"Saiz Berdasarkan Kandungan",description:"Use min, max, or fit for content-based sizing",descriptionMs:"Guna min, max, atau fit untuk saiz berdasarkan kandungan",html:`<div space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="w:min p:small m-b:small" visual="bg:primary text:white rounded:small">w:min shrinks to minimum</div>
+  <div space="w:max p:small m-b:small" visual="bg:pink-600 text:white rounded:small">w:max expands to fit all content without wrapping</div>
+  <div space="w:fit p:small" visual="bg:green-600 text:white rounded:small">w:fit adapts to available space while respecting content</div>
+</div>`,highlightValue:"w:max"},{title:"Max Width with Content Values",titleMs:"Lebar Maksimum dengan Nilai Kandungan",description:"Constrain maximum width using content values",descriptionMs:"Hadkan lebar maksimum menggunakan nilai kandungan",html:`<div space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="max-w:min p:small m-b:small" visual="bg:primary text:white rounded:small">max-w:min - Text will wrap to minimum width needed</div>
+  <div space="max-w:max p:small m-b:small" visual="bg:pink-600 text:white rounded:small">max-w:max - Expands to content</div>
+  <div space="max-w:[200px] p:small" visual="bg:green-600 text:white rounded:small">max-w:[200px] - Fixed max</div>
+</div>`,highlightValue:"max-w:min"}],footnotes:[{title:"Tailwind Scale Support",titleMs:"Sokongan Skala Tailwind",content:"Use `tw-` prefix to access Tailwind numeric scale: `w:tw-64` (16rem), `max-w:tw-96` (24rem)",contentMs:"Gunakan awalan `tw-` untuk mengakses skala numerik Tailwind: `w:tw-64` (16rem), `max-w:tw-96` (24rem)",link:"https://tailwindcss.com/docs/width"}]},oa={name:"height",property:"space",syntax:'space="h:[value]"',description:"Set element height",descriptionMs:"Tetapkan tinggi elemen",category:"space",usesScale:"spacing",values:[{property:"h",css:"height: var(--s-{value});",description:"Height",descriptionMs:"Tinggi"},{property:"min-h",css:"min-height: var(--s-{value});",description:"Minimum height",descriptionMs:"Tinggi minimum"},{property:"max-h",css:"max-height: var(--s-{value});",description:"Maximum height",descriptionMs:"Tinggi maksimum"}],scaleValues:["none","thin","regular","thick","tiny","tiny-2x","small","small-2x","small-3x","small-4x","medium","medium-2x","medium-3x","medium-4x","large","large-2x","large-3x","large-4x","big","big-2x","big-3x","big-4x","giant","giant-2x","giant-3x","giant-4x","vast","vast-2x","vast-3x","vast-4x","vast-5x","vast-6x","vast-7x","vast-8x","vast-9x","vast-10x","min","max","fit","full","half","third","third-2x","quarter","quarter-2x","quarter-3x","1/1","1/2","1/3","2/3","1/4","2/4","3/4"],percentageAdjectives:[{name:"full",value:"100%",description:"Full height (100%)",descriptionMs:"Tinggi penuh (100%)"},{name:"half",value:"50%",description:"Half height (50%)",descriptionMs:"Separuh tinggi (50%)"},{name:"third",value:"33.333333%",description:"One third height (33%)",descriptionMs:"Satu pertiga tinggi (33%)"},{name:"third-2x",value:"66.666667%",description:"Two thirds height (66%)",descriptionMs:"Dua pertiga tinggi (66%)"},{name:"quarter",value:"25%",description:"One quarter height (25%)",descriptionMs:"Satu perempat tinggi (25%)"},{name:"quarter-2x",value:"50%",description:"Two quarters height (50%)",descriptionMs:"Dua perempat tinggi (50%)"},{name:"quarter-3x",value:"75%",description:"Three quarters height (75%)",descriptionMs:"Tiga perempat tinggi (75%)"}],supportsArbitrary:!0,examples:[{code:'<div space="h:full">Full height</div>',description:"Full height"},{code:'<div space="h:half">Half height</div>',description:"Half height (50%)"},{code:'<div space="h:[100vh]">Full viewport height</div>',description:"Full viewport height"},{code:'<div space="min-h:[400px]">Min height</div>',description:"Minimum height"},{code:'<div space="h:max">Content height</div>',description:"Height based on content (max-content)"}],preview:[{title:"Height Control",titleMs:"Kawal Tinggi",description:"Set fixed heights",descriptionMs:"Tetapkan tinggi tetap",html:`<div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 120px;">
+  <div space="h:full p:small" visual="bg:primary text:white rounded:small" layout="flex center">h:full</div>
+  <div space="h:third-2x p:small" visual="bg:primary text:white rounded:small" layout="flex center">h:third-2x</div>
+  <div space="h:half p:small" visual="bg:primary text:white rounded:small" layout="flex center">h:half</div>
+</div>`,highlightValue:"h:full"},{title:"Content-Based Height",titleMs:"Tinggi Berdasarkan Kandungan",description:"Use min, max, or fit for content-based height",descriptionMs:"Guna min, max, atau fit untuk tinggi berdasarkan kandungan",html:`<div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="h:min p:small" visual="bg:primary text:white rounded:small">h:min</div>
+  <div space="h:max p:small" visual="bg:pink-600 text:white rounded:small">h:max<br>Multi<br>Line</div>
+  <div space="h:fit p:small" visual="bg:amber-600 text:white rounded:small">h:fit</div>
+</div>`,highlightValue:"h:max"},{title:"Min/Max Height with Content Values",titleMs:"Tinggi Min/Max dengan Nilai Kandungan",description:"Constrain height using content values",descriptionMs:"Hadkan tinggi menggunakan nilai kandungan",html:`<div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="min-h:min p:small" visual="bg:primary text:white rounded:small">min-h:min</div>
+  <div space="max-h:max p:small" visual="bg:pink-600 text:white rounded:small">max-h:max</div>
+  <div space="min-h:[80px] p:small" visual="bg:amber-600 text:white rounded:small" layout="flex center">min-h:[80px]</div>
+</div>`,highlightValue:"min-h:min"}],footnotes:[{title:"Tailwind Scale Support",titleMs:"Sokongan Skala Tailwind",content:"Use `tw-` prefix to access Tailwind numeric scale: `h:tw-64` (16rem), `min-h:tw-96` (24rem)",contentMs:"Gunakan awalan `tw-` untuk mengakses skala numerik Tailwind: `h:tw-64` (16rem), `min-h:tw-96` (24rem)",link:"https://tailwindcss.com/docs/height"}]},ye={padding:sa,margin:ra,gap:na,width:la,height:oa};function M(){let n={};for(let l of Object.values(ye))for(let t of l.values)n[t.property]=t.css;return n}var da={name:"background-color",property:"visual",syntax:'visual="bg:[color]"',description:"Set background color",descriptionMs:"Tetapkan warna latar belakang",category:"visual",usesScale:"colors",supportsArbitrary:!0,values:[],examples:[{code:'<div visual="bg:primary">Primary background</div>',description:"Theme color"},{code:'<div visual="bg:blue-500">Blue background</div>',description:"Palette color"},{code:'<div visual="bg:[#FF5733]">Custom color</div>',description:"Arbitrary color"}],preview:[{title:"Background Color",titleMs:"Warna Latar Belakang",description:"Apply solid background colors from theme or palette",descriptionMs:"Terapkan warna latar pepejal dari tema atau palet",html:`<div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small">primary</div>
+  <div space="p:small" visual="bg:secondary text:white rounded:small">secondary</div>
+  <div space="p:small" visual="bg:success text:white rounded:small">success</div>
+  <div space="p:small" visual="bg:warning text:black rounded:small">warning</div>
+  <div space="p:small" visual="bg:danger text:white rounded:small">danger</div>
+</div>`,highlightValue:"bg:primary"}]},pa={name:"text-color",property:"visual",syntax:'visual="text:[color]"',description:"Set text color",descriptionMs:"Tetapkan warna teks",category:"visual",usesScale:"colors",supportsArbitrary:!0,values:[{value:"left",css:"text-align: left;",description:"Align left",descriptionMs:"Jajar kiri"},{value:"center",css:"text-align: center;",description:"Align center",descriptionMs:"Jajar tengah"},{value:"right",css:"text-align: right;",description:"Align right",descriptionMs:"Jajar kanan"},{value:"justify",css:"text-align: justify;",description:"Justify text",descriptionMs:"Jajar sepenuh"}],examples:[{code:'<div visual="text:white">White text</div>',description:"Theme color"},{code:'<div visual="text:center">Centered text</div>',description:"Text alignment"}],preview:[{title:"Text Color",titleMs:"Warna Teks",description:"Set text color from theme or palette",descriptionMs:"Tetapkan warna teks dari tema atau palet",html:`<div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span visual="text:primary">Primary</span>
+  <span visual="text:secondary">Secondary</span>
+  <span visual="text:success">Success</span>
+  <span visual="text:danger">Danger</span>
+</div>`,highlightValue:"text:primary"}]},ua={name:"text-size",property:"visual",syntax:'visual="text-size:[value]"',description:"Set font size",descriptionMs:"Tetapkan saiz fon",category:"visual",usesScale:"fontSize",supportsArbitrary:!0,values:[{value:"mini",css:"font-size: var(--font-mini); line-height: var(--font-lh-mini);",description:"Mini size (0.75rem / 1rem)",descriptionMs:"Saiz mini (0.75rem / 1rem)"},{value:"small",css:"font-size: var(--font-small); line-height: var(--font-lh-small);",description:"Small size (0.875rem / 1.25rem)",descriptionMs:"Saiz kecil (0.875rem / 1.25rem)"},{value:"base",css:"font-size: var(--font-base); line-height: var(--font-lh-base);",description:"Base size (1rem / 1.5rem)",descriptionMs:"Saiz asas (1rem / 1.5rem)"},{value:"large",css:"font-size: var(--font-large); line-height: var(--font-lh-large);",description:"Large size (1.125rem / 1.75rem)",descriptionMs:"Saiz besar (1.125rem / 1.75rem)"},{value:"big",css:"font-size: var(--font-big); line-height: var(--font-lh-big);",description:"Big size (1.25rem / 1.75rem)",descriptionMs:"Saiz besar (1.25rem / 1.75rem)"},{value:"huge",css:"font-size: var(--font-huge); line-height: var(--font-lh-huge);",description:"Huge size (1.5rem / 2rem)",descriptionMs:"Saiz besar sekali (1.5rem / 2rem)"},{value:"grand",css:"font-size: var(--font-grand); line-height: var(--font-lh-grand);",description:"Grand size (1.875rem / 2.25rem)",descriptionMs:"Saiz agung (1.875rem / 2.25rem)"},{value:"giant",css:"font-size: var(--font-giant); line-height: var(--font-lh-giant);",description:"Giant size (2.25rem / 2.5rem)",descriptionMs:"Saiz gergasi (2.25rem / 2.5rem)"},{value:"mount",css:"font-size: var(--font-mount); line-height: var(--font-lh-mount);",description:"Mount size (3rem / 1)",descriptionMs:"Saiz gunung (3rem / 1)"},{value:"mega",css:"font-size: var(--font-mega); line-height: var(--font-lh-mega);",description:"Mega size (3.75rem / 1)",descriptionMs:"Saiz mega (3.75rem / 1)"},{value:"giga",css:"font-size: var(--font-giga); line-height: var(--font-lh-giga);",description:"Giga size (4.5rem / 1)",descriptionMs:"Saiz giga (4.5rem / 1)"},{value:"tera",css:"font-size: var(--font-tera); line-height: var(--font-lh-tera);",description:"Tera size (6rem / 1)",descriptionMs:"Saiz tera (6rem / 1)"},{value:"hero",css:"font-size: var(--font-hero); line-height: var(--font-lh-hero);",description:"Hero size (8rem / 1)",descriptionMs:"Saiz hero (8rem / 1)"}],examples:[{code:'<div visual="text-size:big">Large text</div>',description:"Scale value"},{code:'<div visual="text-size:[24px]">24px text</div>',description:"Arbitrary"}],footnotes:[{title:"Tailwind Scale Support",titleMs:"Sokongan Skala Tailwind",content:"Use `tw-` prefix to access Tailwind font scale: `text-size:tw-xl` (1.25rem), `text-size:tw-2xl` (1.5rem)",contentMs:"Gunakan awalan `tw-` untuk mengakses skala fon Tailwind: `text-size:tw-xl` (1.25rem), `text-size:tw-2xl` (1.5rem)",link:"https://tailwindcss.com/docs/font-size"}],preview:[{title:"Font Size",titleMs:"Saiz Fon",description:"Scale text size with paired line-height",descriptionMs:"Skala saiz teks dengan ketinggian baris berpasangan",html:`<div layout="flex col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span visual="text-size:mini">mini (0.75rem / 1rem)</span>
+  <span visual="text-size:small">small (0.875rem / 1.25rem)</span>
+  <span visual="text-size:base">base (1rem / 1.5rem)</span>
+  <span visual="text-size:big">big (1.25rem / 1.75rem)</span>
+  <span visual="text-size:giant">giant (2.25rem / 2.5rem)</span>
+</div>`,highlightValue:"text-size:big"}]},ca={name:"font-weight",property:"visual",syntax:'visual="font:[weight]"',description:"Set font weight",descriptionMs:"Tetapkan berat fon",category:"visual",usesScale:"fontWeight",values:[{value:"normal",css:"font-weight: var(--fw-normal);",description:"Normal weight",descriptionMs:"Berat normal"},{value:"medium",css:"font-weight: var(--fw-medium);",description:"Medium weight",descriptionMs:"Berat sederhana"},{value:"bold",css:"font-weight: var(--fw-bold);",description:"Bold weight",descriptionMs:"Berat tebal"}],examples:[{code:'<div visual="font:bold">Bold text</div>',description:"Bold weight"},{code:'<div visual="font:tw-semibold">Semibold text</div>',description:"Tailwind semibold"}],footnotes:[{title:"Tailwind Scale Support",titleMs:"Sokongan Skala Tailwind",content:"Use `tw-` prefix to access Tailwind font weight scale: `font:tw-thin` (100), `font:tw-semibold` (600), `font:tw-extrabold` (800)",contentMs:"Gunakan awalan `tw-` untuk mengakses skala berat fon Tailwind: `font:tw-thin` (100), `font:tw-semibold` (600), `font:tw-extrabold` (800)",link:"https://tailwindcss.com/docs/font-weight"}],preview:[{title:"Font Weight",titleMs:"Berat Fon",description:"Control text thickness",descriptionMs:"Kawal ketebalan teks",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span visual="font:normal">normal</span>
+  <span visual="font:medium">medium</span>
+  <span visual="font:bold">bold</span>
+</div>`,highlightValue:"font:bold"}]},ma={name:"font-family",property:"visual",syntax:'visual="font:[family]"',description:"Set font family",descriptionMs:"Tetapkan keluarga fon",category:"visual",values:[{value:"sans",css:"font-family: ui-sans-serif, system-ui, sans-serif;",description:"Sans-serif",descriptionMs:"Sans-serif"},{value:"serif",css:"font-family: ui-serif, Georgia, serif;",description:"Serif",descriptionMs:"Serif"},{value:"mono",css:"font-family: ui-monospace, monospace;",description:"Monospace",descriptionMs:"Monospace"}],examples:[{code:'<div visual="font:mono">Monospace text</div>',description:"Monospace font"}],preview:[{title:"Font Family",titleMs:"Keluarga Fon",description:"Choose between sans, serif, or mono",descriptionMs:"Pilih antara sans, serif, atau mono",html:`<div layout="flex col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span visual="font:sans">Sans-serif font</span>
+  <span visual="font:serif">Serif font</span>
+  <span visual="font:mono">Monospace font</span>
+</div>`,highlightValue:"font:sans"}]},fe={name:"typography-keywords",property:"visual",syntax:'visual="[keyword]"',description:"Typography utility keywords",descriptionMs:"Kata kunci utiliti tipografi",category:"visual",values:[{value:"italic",css:"font-style: italic;",description:"Italic text",descriptionMs:"Teks italic"},{value:"not-italic",css:"font-style: normal;",description:"Normal style",descriptionMs:"Gaya normal"},{value:"antialiased",css:"-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;",description:"Antialiased text",descriptionMs:"Teks antialias"},{value:"subpixel-antialiased",css:"-webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto;",description:"Subpixel antialiasing",descriptionMs:"Antialias subpiksel"},{value:"uppercase",css:"text-transform: uppercase;",description:"Uppercase text",descriptionMs:"Teks huruf besar"},{value:"lowercase",css:"text-transform: lowercase;",description:"Lowercase text",descriptionMs:"Teks huruf kecil"},{value:"capitalize",css:"text-transform: capitalize;",description:"Capitalize words",descriptionMs:"Huruf besar awal perkataan"},{value:"normal-case",css:"text-transform: none;",description:"Normal case",descriptionMs:"Kes normal"},{value:"underline",css:"text-decoration-line: underline;",description:"Underline text",descriptionMs:"Garis bawah teks"},{value:"overline",css:"text-decoration-line: overline;",description:"Overline text",descriptionMs:"Garis atas teks"},{value:"line-through",css:"text-decoration-line: line-through;",description:"Strikethrough",descriptionMs:"Garis potong"},{value:"no-underline",css:"text-decoration-line: none;",description:"No decoration",descriptionMs:"Tiada hiasan"},{value:"decoration-solid",css:"text-decoration-style: solid;",description:"Solid line",descriptionMs:"Garisan pepejal"},{value:"decoration-double",css:"text-decoration-style: double;",description:"Double line",descriptionMs:"Garisan berganda"},{value:"decoration-dotted",css:"text-decoration-style: dotted;",description:"Dotted line",descriptionMs:"Garisan bertitik"},{value:"decoration-dashed",css:"text-decoration-style: dashed;",description:"Dashed line",descriptionMs:"Garisan putus-putus"},{value:"decoration-wavy",css:"text-decoration-style: wavy;",description:"Wavy line",descriptionMs:"Garisan bergelombang"},{value:"truncate",css:"overflow: hidden; text-overflow: ellipsis; white-space: nowrap;",description:"Truncate with ellipsis",descriptionMs:"Potong dengan elipsis"},{value:"text-ellipsis",css:"text-overflow: ellipsis;",description:"Ellipsis overflow",descriptionMs:"Limpahan elipsis"},{value:"text-clip",css:"text-overflow: clip;",description:"Clip overflow",descriptionMs:"Limpahan potong"},{value:"text-wrap",css:"text-wrap: wrap;",description:"Wrap text",descriptionMs:"Bungkus teks"},{value:"text-nowrap",css:"text-wrap: nowrap;",description:"No wrap",descriptionMs:"Tiada bungkusan"},{value:"text-balance",css:"text-wrap: balance;",description:"Balanced wrapping",descriptionMs:"Bungkusan seimbang"},{value:"text-pretty",css:"text-wrap: pretty;",description:"Pretty wrapping",descriptionMs:"Bungkusan cantik"},{value:"whitespace-normal",css:"white-space: normal;",description:"Normal whitespace",descriptionMs:"Ruang putih normal"},{value:"whitespace-nowrap",css:"white-space: nowrap;",description:"No wrap whitespace",descriptionMs:"Tiada bungkusan ruang putih"},{value:"whitespace-pre",css:"white-space: pre;",description:"Preserve whitespace",descriptionMs:"Kekalkan ruang putih"},{value:"whitespace-pre-line",css:"white-space: pre-line;",description:"Pre-line whitespace",descriptionMs:"Ruang putih pra-baris"},{value:"whitespace-pre-wrap",css:"white-space: pre-wrap;",description:"Pre-wrap whitespace",descriptionMs:"Ruang putih pra-bungkus"},{value:"whitespace-break-spaces",css:"white-space: break-spaces;",description:"Break spaces",descriptionMs:"Ruang putih pecah"},{value:"break-normal",css:"overflow-wrap: normal; word-break: normal;",description:"Normal word break",descriptionMs:"Pemecahan perkataan normal"},{value:"break-words",css:"overflow-wrap: break-word;",description:"Break words",descriptionMs:"Pecahkan perkataan"},{value:"break-all",css:"word-break: break-all;",description:"Break all",descriptionMs:"Pecahkan semua"},{value:"break-keep",css:"word-break: keep-all;",description:"Keep all",descriptionMs:"Kekalkan semua"},{value:"hyphens-none",css:"hyphens: none;",description:"No hyphens",descriptionMs:"Tiada tanda sempang"},{value:"hyphens-manual",css:"hyphens: manual;",description:"Manual hyphens",descriptionMs:"Tanda sempang manual"},{value:"hyphens-auto",css:"hyphens: auto;",description:"Auto hyphens",descriptionMs:"Tanda sempang automatik"},{value:"align-baseline",css:"vertical-align: baseline;",description:"Baseline align",descriptionMs:"Jajar garis asas"},{value:"align-top",css:"vertical-align: top;",description:"Top align",descriptionMs:"Jajar atas"},{value:"align-middle",css:"vertical-align: middle;",description:"Middle align",descriptionMs:"Jajar tengah"},{value:"align-bottom",css:"vertical-align: bottom;",description:"Bottom align",descriptionMs:"Jajar bawah"},{value:"align-text-top",css:"vertical-align: text-top;",description:"Text top align",descriptionMs:"Jajar atas teks"},{value:"align-text-bottom",css:"vertical-align: text-bottom;",description:"Text bottom align",descriptionMs:"Jajar bawah teks"},{value:"align-sub",css:"vertical-align: sub;",description:"Subscript align",descriptionMs:"Jajar subskrip"},{value:"align-super",css:"vertical-align: super;",description:"Superscript align",descriptionMs:"Jajar superskrip"},{value:"list-none",css:"list-style-type: none;",description:"No list style",descriptionMs:"Tiada gaya senarai"},{value:"list-disc",css:"list-style-type: disc;",description:"Disc bullets",descriptionMs:"Bullet bulat"},{value:"list-decimal",css:"list-style-type: decimal;",description:"Decimal numbers",descriptionMs:"Nombor perpuluhan"},{value:"list-square",css:"list-style-type: square;",description:"Square bullets",descriptionMs:"Bullet segi empat"},{value:"list-inside",css:"list-style-position: inside;",description:"Inside position",descriptionMs:"Kedudukan dalam"},{value:"list-outside",css:"list-style-position: outside;",description:"Outside position",descriptionMs:"Kedudukan luar"}],examples:[{code:'<span visual="italic">Italic text</span>',description:"Italic"},{code:'<span visual="uppercase">Uppercase</span>',description:"Uppercase"},{code:'<span visual="truncate">Truncated text...</span>',description:"Truncate"}],preview:[{title:"Typography Keywords",titleMs:"Kata Kunci Tipografi",description:"Quick typography utilities without value syntax",descriptionMs:"Utiliti tipografi pantas tanpa sintaks nilai",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span visual="italic">italic</span>
+  <span visual="uppercase">upper</span>
+  <span visual="underline">underline</span>
+  <span visual="line-through">strike</span>
+</div>`,highlightValue:"italic"}]},va={name:"letter-spacing",property:"visual",syntax:'visual="tracking:[value]"',description:"Set letter spacing",descriptionMs:"Tetapkan jarak huruf",category:"visual",supportsArbitrary:!0,values:[{value:"tighter",css:"letter-spacing: -0.05em;",description:"Tighter spacing",descriptionMs:"Jarak lebih ketat"},{value:"tight",css:"letter-spacing: -0.025em;",description:"Tight spacing",descriptionMs:"Jarak ketat"},{value:"normal",css:"letter-spacing: 0;",description:"Normal spacing",descriptionMs:"Jarak normal"},{value:"wide",css:"letter-spacing: 0.025em;",description:"Wide spacing",descriptionMs:"Jarak luas"},{value:"wider",css:"letter-spacing: 0.05em;",description:"Wider spacing",descriptionMs:"Jarak lebih luas"},{value:"widest",css:"letter-spacing: 0.1em;",description:"Widest spacing",descriptionMs:"Jarak paling luas"}],examples:[{code:'<div visual="tracking:wide">Wide tracking</div>',description:"Wide"}],preview:[{title:"Letter Spacing",titleMs:"Jarak Huruf",description:"Adjust spacing between characters",descriptionMs:"Laraskan jarak antara aksara",html:`<div layout="flex col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span visual="tracking:tighter">tighter spacing</span>
+  <span visual="tracking:normal">normal spacing</span>
+  <span visual="tracking:widest">widest spacing</span>
+</div>`,highlightValue:"tracking:wide"}]},ga={name:"line-height",property:"visual",syntax:'visual="leading:[value]"',description:"Set line height",descriptionMs:"Tetapkan ketinggian baris",category:"visual",supportsArbitrary:!0,values:[{value:"none",css:"line-height: 1;",description:"No extra height",descriptionMs:"Tiada ketinggian tambahan"},{value:"tight",css:"line-height: 1.25;",description:"Tight leading",descriptionMs:"Peneraju ketat"},{value:"snug",css:"line-height: 1.375;",description:"Snug leading",descriptionMs:"Peneraju ketat"},{value:"normal",css:"line-height: 1.5;",description:"Normal leading",descriptionMs:"Peneraju normal"},{value:"relaxed",css:"line-height: 1.625;",description:"Relaxed leading",descriptionMs:"Peneraju santai"},{value:"loose",css:"line-height: 2;",description:"Loose leading",descriptionMs:"Peneraju longgar"}],examples:[{code:'<div visual="leading:relaxed">Relaxed line height</div>',description:"Relaxed"}],preview:[{title:"Line Height",titleMs:"Ketinggian Baris",description:"Control vertical spacing between lines",descriptionMs:"Kawal jarak menegak antara baris",html:`<div layout="flex col" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <p space="m:0" visual="leading:tight">Tight leading<br>for headings</p>
+  <p space="m:0" visual="leading:normal">Normal leading<br>for body text</p>
+  <p space="m:0" visual="leading:loose">Loose leading<br>for readability</p>
+</div>`,highlightValue:"leading:relaxed"}]},ha={name:"border-radius",property:"visual",syntax:'visual="rounded:[value]"',description:"Set border radius",descriptionMs:"Tetapkan jejari sempadan",category:"visual",usesScale:"radius",values:[{value:"none",css:"border-radius: var(--r-none);",description:"No rounding",descriptionMs:"Tiada pembulatan"},{value:"small",css:"border-radius: var(--r-small);",description:"Small radius",descriptionMs:"Jejari kecil"},{value:"medium",css:"border-radius: var(--r-medium);",description:"Medium radius",descriptionMs:"Jejari sederhana"},{value:"big",css:"border-radius: var(--r-big);",description:"Large radius",descriptionMs:"Jejari besar"},{value:"round",css:"border-radius: var(--r-round);",description:"Fully round",descriptionMs:"Sepenuhnya bulat"}],examples:[{code:'<div visual="rounded:medium">Rounded corners</div>',description:"Medium radius"},{code:'<div visual="rounded:round">Pill shape</div>',description:"Pill"}],footnotes:[{title:"Tailwind Scale Support",titleMs:"Sokongan Skala Tailwind",content:"Use `tw-` prefix to access Tailwind radius scale: `rounded:tw-lg` (0.5rem), `rounded:tw-2xl` (1rem)",contentMs:"Gunakan awalan `tw-` untuk mengakses skala jejari Tailwind: `rounded:tw-lg` (0.5rem), `rounded:tw-2xl` (1rem)",link:"https://tailwindcss.com/docs/border-radius"}],preview:[{title:"Border Radius",titleMs:"Jejari Sempadan",description:"Round element corners from subtle to pill-shaped",descriptionMs:"Bulatkan sudut elemen dari halus hingga berbentuk pil",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:none">none</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">small</div>
+  <div space="p:small" visual="bg:primary text:white rounded:medium">medium</div>
+  <div space="p:small" visual="bg:primary text:white rounded:round">round</div>
+</div>`,highlightValue:"rounded:medium"}]},ba={name:"box-shadow",property:"visual",syntax:'visual="shadow:[value]"',description:"Add box shadow",descriptionMs:"Tambah bayang kotak",category:"visual",usesScale:"shadow",values:[{value:"none",css:"box-shadow: var(--shadow-none);",description:"No shadow",descriptionMs:"Tiada bayang"},{value:"small",css:"box-shadow: var(--shadow-small);",description:"Small shadow",descriptionMs:"Bayang kecil"},{value:"medium",css:"box-shadow: var(--shadow-medium);",description:"Medium shadow",descriptionMs:"Bayang sederhana"},{value:"big",css:"box-shadow: var(--shadow-big);",description:"Large shadow",descriptionMs:"Bayang besar"},{value:"giant",css:"box-shadow: var(--shadow-giant);",description:"Giant shadow",descriptionMs:"Bayang gergasi"}],examples:[{code:'<div visual="shadow:medium">Card with shadow</div>',description:"Medium shadow"}],footnotes:[{title:"Tailwind Scale Support",titleMs:"Sokongan Skala Tailwind",content:"Use `tw-` prefix to access Tailwind shadow scale: `shadow:tw-md`, `shadow:tw-lg`, `shadow:tw-xl`",contentMs:"Gunakan awalan `tw-` untuk mengakses skala bayang Tailwind: `shadow:tw-md`, `shadow:tw-lg`, `shadow:tw-xl`",link:"https://tailwindcss.com/docs/box-shadow"}],preview:[{title:"Box Shadow",titleMs:"Bayang Kotak",description:"Add elevation with shadows from subtle to dramatic",descriptionMs:"Tambah ketinggian dengan bayang dari halus hingga dramatik",html:`<div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:white dark:bg:neutral-800 rounded:small shadow:small">small</div>
+  <div space="p:small" visual="bg:white dark:bg:neutral-800 rounded:small shadow:medium">medium</div>
+  <div space="p:small" visual="bg:white dark:bg:neutral-800 rounded:small shadow:big">big</div>
+</div>`,highlightValue:"shadow:medium"}]},xa={name:"opacity",property:"visual",syntax:'visual="opacity:[value]"',description:"Set element opacity (0-100)",descriptionMs:"Tetapkan kelegapan elemen (0-100)",category:"visual",dynamic:!0,values:[{value:"0",css:"opacity: 0;",description:"Invisible",descriptionMs:"Tidak kelihatan"},{value:"25",css:"opacity: 0.25;",description:"25% visible",descriptionMs:"25% kelihatan"},{value:"50",css:"opacity: 0.5;",description:"50% visible",descriptionMs:"50% kelihatan"},{value:"75",css:"opacity: 0.75;",description:"75% visible",descriptionMs:"75% kelihatan"},{value:"100",css:"opacity: 1;",description:"Fully visible",descriptionMs:"Sepenuhnya kelihatan"}],examples:[{code:'<div visual="opacity:50">Half visible</div>',description:"50% opacity"}],preview:[{title:"Opacity",titleMs:"Kelegapan",description:"Control element transparency from invisible to fully visible",descriptionMs:"Kawal ketelusan elemen dari tidak kelihatan hingga sepenuhnya kelihatan",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small opacity:25">25%</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small opacity:50">50%</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small opacity:75">75%</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small opacity:100">100%</div>
+</div>`,highlightValue:"opacity:50"}]},ya={name:"filter-blur",property:"visual",syntax:'visual="blur:[value]"',description:"Apply blur filter",descriptionMs:"Terapkan penapis kabur",category:"visual",supportsArbitrary:!0,values:[{value:"none",css:"filter: blur(0);",description:"No blur",descriptionMs:"Tiada kabur"},{value:"tiny",css:"filter: blur(2px);",description:"Tiny blur",descriptionMs:"Kabur kecil"},{value:"small",css:"filter: blur(4px);",description:"Small blur",descriptionMs:"Kabur kecil"},{value:"medium",css:"filter: blur(8px);",description:"Medium blur",descriptionMs:"Kabur sederhana"},{value:"big",css:"filter: blur(12px);",description:"Large blur",descriptionMs:"Kabur besar"},{value:"giant",css:"filter: blur(24px);",description:"Giant blur",descriptionMs:"Kabur gergasi"},{value:"vast",css:"filter: blur(48px);",description:"Vast blur",descriptionMs:"Kabur luas"}],examples:[{code:'<div visual="blur:medium">Blurred element</div>',description:"Medium blur"}],preview:[{title:"Blur",titleMs:"Kabur",description:"Apply gaussian blur filter to an element",descriptionMs:"Terapkan penapis kabur gaussian pada elemen",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small blur:none">none</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small blur:tiny">tiny</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small blur:small">small</div>
+</div>`,highlightValue:"blur:small"}]},fa={name:"cursor",property:"visual",syntax:'visual="cursor:[value]"',description:"Set cursor style",descriptionMs:"Tetapkan gaya kursor",category:"visual",values:[{value:"auto",css:"cursor: auto;",description:"Auto cursor",descriptionMs:"Kursor automatik"},{value:"default",css:"cursor: default;",description:"Default cursor",descriptionMs:"Kursor lalai"},{value:"pointer",css:"cursor: pointer;",description:"Pointer cursor",descriptionMs:"Kursor penunjuk"},{value:"wait",css:"cursor: wait;",description:"Wait cursor",descriptionMs:"Kursor tunggu"},{value:"text",css:"cursor: text;",description:"Text cursor",descriptionMs:"Kursor teks"},{value:"move",css:"cursor: move;",description:"Move cursor",descriptionMs:"Kursor alih"},{value:"not-allowed",css:"cursor: not-allowed;",description:"Not allowed",descriptionMs:"Tidak dibenarkan"},{value:"grab",css:"cursor: grab;",description:"Grab cursor",descriptionMs:"Kursor genggam"},{value:"grabbing",css:"cursor: grabbing;",description:"Grabbing cursor",descriptionMs:"Kursor menggenggam"}],examples:[{code:'<button visual="cursor:pointer">Clickable</button>',description:"Pointer cursor"}],preview:[{title:"Cursor",titleMs:"Kursor",description:"Change mouse cursor on hover",descriptionMs:"Tukar kursor tetikus semasa hover",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small cursor:pointer">pointer</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small cursor:wait">wait</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small cursor:not-allowed">not-allowed</div>
+</div>`,highlightValue:"cursor:pointer"}]},ka={name:"user-select",property:"visual",syntax:'visual="select:[value]"',description:"Control text selection",descriptionMs:"Kawal pemilihan teks",category:"visual",values:[{value:"none",css:"user-select: none;",description:"Prevent selection",descriptionMs:"Halang pemilihan"},{value:"text",css:"user-select: text;",description:"Allow text selection",descriptionMs:"Benarkan pemilihan teks"},{value:"all",css:"user-select: all;",description:"Select all on click",descriptionMs:"Pilih semua pada klik"},{value:"auto",css:"user-select: auto;",description:"Default behavior",descriptionMs:"Kelakuan lalai"}],examples:[{code:'<div visual="select:none">Cannot select this text</div>',description:"Prevent selection"}],preview:[{title:"User Select",titleMs:"Pemilihan Pengguna",description:"Control whether text can be selected",descriptionMs:"Kawal sama ada teks boleh dipilih",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small select:none">none (try select)</div>
+  <div space="p:small" visual="bg:success text:white rounded:small select:all">all (click to select)</div>
+</div>`,highlightValue:"select:none"}]},wa={name:"pointer-events",property:"visual",syntax:'visual="pointer-events:[value]"',description:"Control pointer events",descriptionMs:"Kawal peristiwa penunjuk",category:"visual",values:[{value:"none",css:"pointer-events: none;",description:"Ignore pointer events",descriptionMs:"Abaikan peristiwa penunjuk"},{value:"auto",css:"pointer-events: auto;",description:"Normal pointer events",descriptionMs:"Peristiwa penunjuk normal"}],examples:[{code:'<div visual="pointer-events:none">Click through</div>',description:"Click through element"}],preview:[{title:"Pointer Events",titleMs:"Peristiwa Penunjuk",description:"Make elements click-through or interactive",descriptionMs:"Jadikan elemen boleh klik tembus atau interaktif",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small pointer-events:auto">auto (clickable)</div>
+  <div space="p:small" visual="bg:neutral-400 text:white rounded:small pointer-events:none">none (click-through)</div>
+</div>`,highlightValue:"pointer-events:none"}]},Ma={name:"blend-modes",property:"visual",syntax:'visual="mix-blend:[value]"',description:"Set mix blend mode",descriptionMs:"Tetapkan mod campuran",category:"visual",values:[{value:"normal",css:"mix-blend-mode: normal;",description:"Normal blend",descriptionMs:"Campuran normal"},{value:"multiply",css:"mix-blend-mode: multiply;",description:"Multiply blend",descriptionMs:"Campuran darab"},{value:"screen",css:"mix-blend-mode: screen;",description:"Screen blend",descriptionMs:"Campuran skrin"},{value:"overlay",css:"mix-blend-mode: overlay;",description:"Overlay blend",descriptionMs:"Campuran tindanan"},{value:"darken",css:"mix-blend-mode: darken;",description:"Darken blend",descriptionMs:"Campuran gelap"},{value:"lighten",css:"mix-blend-mode: lighten;",description:"Lighten blend",descriptionMs:"Campuran cerah"}],examples:[{code:'<div visual="mix-blend:multiply">Multiply blend</div>',description:"Multiply blend mode"}],preview:[{title:"Mix Blend Mode",titleMs:"Mod Campuran",description:"Blend element with content behind it",descriptionMs:"Campurkan elemen dengan kandungan di belakangnya",html:`<div layout="flex" space="g:medium p:medium" visual="rounded:medium bg:gradient-red-orange">
+  <div space="p:small" visual="bg:blue-500 text:white rounded:small mix-blend:multiply">multiply</div>
+  <div space="p:small" visual="bg:blue-500 text:white rounded:small mix-blend:screen">screen</div>
+</div>`,highlightValue:"mix-blend:multiply"}]},Sa={name:"accent-color",property:"visual",syntax:'visual="accent:[color]"',description:"Set accent color for form controls",descriptionMs:"Tetapkan warna aksen untuk kawalan borang",category:"visual",usesScale:"colors",supportsArbitrary:!0,values:[],examples:[{code:'<input type="checkbox" visual="accent:primary">',description:"Primary accent"}],preview:[{title:"Accent Color",titleMs:"Warna Aksen",description:"Style native form controls (checkboxes, radios, range)",descriptionMs:"Gaya kawalan borang asli (kotak semak, radio, julat)",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <input type="checkbox" checked visual="accent:primary w:[20px] h:[20px]">
+  <input type="radio" checked visual="accent:success w:[20px] h:[20px]">
+  <input type="range" visual="accent:secondary w:[100px]">
+</div>`,highlightValue:"accent:primary"}]},Aa={name:"caret-color",property:"visual",syntax:'visual="caret:[color]"',description:"Set text input caret color",descriptionMs:"Tetapkan warna karet input teks",category:"visual",usesScale:"colors",supportsArbitrary:!0,values:[],examples:[{code:'<input visual="caret:primary">',description:"Primary caret"}],preview:[{title:"Caret Color",titleMs:"Warna Karet",description:"Style the text cursor in input fields",descriptionMs:"Gaya kursor teks dalam medan input",html:`<div space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <input type="text" placeholder="Type here..." space="p:small" visual="caret:primary border:neutral-300 rounded:small">
+</div>`,highlightValue:"caret:primary"}]},Fa={name:"appearance",property:"visual",syntax:'visual="appearance:[value]"',description:"Control native appearance",descriptionMs:"Kawal penampilan asli",category:"visual",values:[{value:"none",css:"appearance: none;",description:"Remove native styling",descriptionMs:"Buang gaya asli"},{value:"auto",css:"appearance: auto;",description:"Default appearance",descriptionMs:"Penampilan lalai"}],examples:[{code:'<select visual="appearance:none">Custom select</select>',description:"Remove native styling"}],preview:[{title:"Appearance",titleMs:"Penampilan",description:"Remove native browser styling from form elements",descriptionMs:"Buang gaya pelayar asli dari elemen borang",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <select space="p:tiny" visual="appearance:auto"><option>Native</option></select>
+  <select space="p:tiny" visual="appearance:none bg:white border:neutral-300 rounded:small"><option>Custom</option></select>
+</div>`,highlightValue:"appearance:none"}]},ke={backgroundColor:da,textColor:pa,fontSize:ua,fontWeight:ca,fontFamily:ma,typographyKeywords:fe,letterSpacing:va,lineHeight:ga,borderRadius:ha,boxShadow:ba,opacity:xa,blur:ya,cursor:fa,userSelect:ka,pointerEvents:wa,mixBlendMode:Ma,accentColor:Sa,caretColor:Aa,appearance:Fa};function S(){let n={};for(let l of fe.values)n[l.value]=l.css;return n}var we=ke;var Va={name:"background-image",property:"visual",syntax:'visual="bg-image:[value]"',description:"Set background image or gradient",descriptionMs:"Tetapkan imej latar atau gradien",category:"visual",supportsArbitrary:!0,values:[{value:"none",css:"background-image: none;",description:"No background image",descriptionMs:"Tiada imej latar"},{value:"gradient-to-t",css:"background-image: linear-gradient(to top, var(--tw-gradient-stops));",description:"Gradient to top",descriptionMs:"Gradien ke atas"},{value:"gradient-to-b",css:"background-image: linear-gradient(to bottom, var(--tw-gradient-stops));",description:"Gradient to bottom",descriptionMs:"Gradien ke bawah"},{value:"gradient-to-l",css:"background-image: linear-gradient(to left, var(--tw-gradient-stops));",description:"Gradient to left",descriptionMs:"Gradien ke kiri"},{value:"gradient-to-r",css:"background-image: linear-gradient(to right, var(--tw-gradient-stops));",description:"Gradient to right",descriptionMs:"Gradien ke kanan"}],examples:[{code:'<div visual="bg-image:gradient-to-r">Gradient background</div>',description:"Right gradient"}],preview:[{title:"Background Gradient",titleMs:"Gradien Latar",description:"Apply gradient backgrounds",descriptionMs:"Terapkan latar gradien",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:medium" visual="bg-image:gradient-to-r from:blue-500 to:violet-500 text:white rounded:small">gradient-to-r</div>
+  <div space="p:medium" visual="bg-image:gradient-to-b from:emerald-500 to:blue-500 text:white rounded:small">gradient-to-b</div>
+</div>`,highlightValue:"bg-image:gradient-to-r"}]},Ta={name:"background-attachment",property:"visual",syntax:'visual="bg-attachment:[value]"',description:"Set background attachment behavior",descriptionMs:"Tetapkan kelakuan lampiran latar",category:"visual",values:[{value:"fixed",css:"background-attachment: fixed;",description:"Fixed background",descriptionMs:"Latar tetap"},{value:"local",css:"background-attachment: local;",description:"Local scroll",descriptionMs:"Skrol tempatan"},{value:"scroll",css:"background-attachment: scroll;",description:"Scroll with page",descriptionMs:"Skrol dengan halaman"}],examples:[{code:'<div visual="bg-attachment:fixed">Parallax effect</div>',description:"Fixed background"}],preview:[{title:"Background Attachment",titleMs:"Lampiran Latar",description:"Control how background scrolls",descriptionMs:"Kawal cara latar skrol",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small">fixed</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">scroll</div>
+</div>`,highlightValue:"bg-attachment:fixed"}]},Ca={name:"background-clip",property:"visual",syntax:'visual="bg-clip:[value]"',description:"Set background clipping area",descriptionMs:"Tetapkan kawasan keratan latar",category:"visual",values:[{value:"border",css:"background-clip: border-box;",description:"Clip to border",descriptionMs:"Keratan ke sempadan"},{value:"padding",css:"background-clip: padding-box;",description:"Clip to padding",descriptionMs:"Keratan ke padding"},{value:"content",css:"background-clip: content-box;",description:"Clip to content",descriptionMs:"Keratan ke kandungan"},{value:"text",css:"background-clip: text; -webkit-background-clip: text;",description:"Clip to text",descriptionMs:"Keratan ke teks"}],examples:[{code:'<div visual="bg-clip:text text:transparent bg:gradient">Gradient text</div>',description:"Gradient text effect"}],preview:[{title:"Background Clip",titleMs:"Keratan Latar",description:"Clip background to text for gradient text effect",descriptionMs:"Keratan latar kepada teks untuk kesan teks gradien",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span text="size:large weight:bold" visual="bg-image:gradient-to-r from:blue-500 to:violet-500 bg-clip:text text:transparent">Gradient Text</span>
+</div>`,highlightValue:"bg-clip:text"}]},Da={name:"background-origin",property:"visual",syntax:'visual="bg-origin:[value]"',description:"Set background positioning origin",descriptionMs:"Tetapkan asal kedudukan latar",category:"visual",values:[{value:"border",css:"background-origin: border-box;",description:"Origin at border",descriptionMs:"Asal di sempadan"},{value:"padding",css:"background-origin: padding-box;",description:"Origin at padding",descriptionMs:"Asal di padding"},{value:"content",css:"background-origin: content-box;",description:"Origin at content",descriptionMs:"Asal di kandungan"}],examples:[{code:'<div visual="bg-origin:content">Content origin</div>',description:"Content box origin"}],preview:[{title:"Background Origin",titleMs:"Asal Latar",description:"Set background positioning origin",descriptionMs:"Tetapkan asal kedudukan latar",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small">border</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">padding</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">content</div>
+</div>`,highlightValue:"bg-origin:content"}]},za={name:"background-position",property:"visual",syntax:'visual="bg-pos:[value]"',description:"Set background position",descriptionMs:"Tetapkan kedudukan latar",category:"visual",supportsArbitrary:!0,values:[{value:"center",css:"background-position: center;",description:"Center position",descriptionMs:"Kedudukan tengah"},{value:"top",css:"background-position: top;",description:"Top position",descriptionMs:"Kedudukan atas"},{value:"bottom",css:"background-position: bottom;",description:"Bottom position",descriptionMs:"Kedudukan bawah"},{value:"left",css:"background-position: left;",description:"Left position",descriptionMs:"Kedudukan kiri"},{value:"right",css:"background-position: right;",description:"Right position",descriptionMs:"Kedudukan kanan"},{value:"top-left",css:"background-position: top left;",description:"Top left",descriptionMs:"Atas kiri"},{value:"top-right",css:"background-position: top right;",description:"Top right",descriptionMs:"Atas kanan"},{value:"bottom-left",css:"background-position: bottom left;",description:"Bottom left",descriptionMs:"Bawah kiri"},{value:"bottom-right",css:"background-position: bottom right;",description:"Bottom right",descriptionMs:"Bawah kanan"}],examples:[{code:'<div visual="bg-pos:center">Centered background</div>',description:"Center position"}],preview:[{title:"Background Position",titleMs:"Kedudukan Latar",description:"Position background image",descriptionMs:"Kedudukkan imej latar",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small">center</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">top</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">bottom</div>
+</div>`,highlightValue:"bg-pos:center"}]},$a={name:"background-repeat",property:"visual",syntax:'visual="bg-repeat:[value]"',description:"Set background repeat behavior",descriptionMs:"Tetapkan kelakuan ulangan latar",category:"visual",values:[{value:"repeat",css:"background-repeat: repeat;",description:"Repeat both axes",descriptionMs:"Ulang kedua-dua paksi"},{value:"no-repeat",css:"background-repeat: no-repeat;",description:"No repeat",descriptionMs:"Tiada ulangan"},{value:"repeat-x",css:"background-repeat: repeat-x;",description:"Repeat horizontally",descriptionMs:"Ulang mendatar"},{value:"repeat-y",css:"background-repeat: repeat-y;",description:"Repeat vertically",descriptionMs:"Ulang menegak"},{value:"round",css:"background-repeat: round;",description:"Round repeat",descriptionMs:"Ulang bulat"},{value:"space",css:"background-repeat: space;",description:"Spaced repeat",descriptionMs:"Ulang berjarakd"}],examples:[{code:'<div visual="bg-repeat:no-repeat">Single background</div>',description:"No repeat"}],preview:[{title:"Background Repeat",titleMs:"Ulangan Latar",description:"Control background tiling",descriptionMs:"Kawal jubin latar",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small">repeat</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">no-repeat</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">repeat-x</div>
+</div>`,highlightValue:"bg-repeat:no-repeat"}]},ja={name:"background-size",property:"visual",syntax:'visual="bg-size:[value]"',description:"Set background size",descriptionMs:"Tetapkan saiz latar",category:"visual",supportsArbitrary:!0,values:[{value:"auto",css:"background-size: auto;",description:"Original size",descriptionMs:"Saiz asal"},{value:"cover",css:"background-size: cover;",description:"Cover container",descriptionMs:"Tutup bekas"},{value:"contain",css:"background-size: contain;",description:"Contain in container",descriptionMs:"Kandung dalam bekas"}],examples:[{code:'<div visual="bg-size:cover">Full coverage background</div>',description:"Cover background"}],preview:[{title:"Background Size",titleMs:"Saiz Latar",description:"Scale background image",descriptionMs:"Skala imej latar",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small">auto</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">cover</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">contain</div>
+</div>`,highlightValue:"bg-size:cover"}]},Ba={name:"background-blend-mode",property:"visual",syntax:'visual="bg-blend:[value]"',description:"Set background blend mode",descriptionMs:"Tetapkan mod campuran latar",category:"visual",values:[{value:"normal",css:"background-blend-mode: normal;",description:"Normal blend",descriptionMs:"Campuran normal"},{value:"multiply",css:"background-blend-mode: multiply;",description:"Multiply blend",descriptionMs:"Campuran darab"},{value:"screen",css:"background-blend-mode: screen;",description:"Screen blend",descriptionMs:"Campuran skrin"},{value:"overlay",css:"background-blend-mode: overlay;",description:"Overlay blend",descriptionMs:"Campuran tindanan"},{value:"darken",css:"background-blend-mode: darken;",description:"Darken blend",descriptionMs:"Campuran gelap"},{value:"lighten",css:"background-blend-mode: lighten;",description:"Lighten blend",descriptionMs:"Campuran cerah"}],examples:[{code:'<div visual="bg-blend:multiply">Multiplied background</div>',description:"Multiply blend"}],preview:[{title:"Background Blend Mode",titleMs:"Mod Campuran Latar",description:"Blend backgrounds together",descriptionMs:"Campurkan latar bersama",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small">multiply</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">screen</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">overlay</div>
+</div>`,highlightValue:"bg-blend:multiply"}]},Ea={name:"backdrop-blur",property:"visual",syntax:'visual="backdrop-blur:[value]"',description:"Blur backdrop",descriptionMs:"Kaburkan latar belakang",category:"visual",supportsArbitrary:!0,values:[{value:"none",css:"backdrop-filter: blur(0);",description:"No blur",descriptionMs:"Tiada kabur"},{value:"tiny",css:"backdrop-filter: blur(2px);",description:"Tiny blur",descriptionMs:"Kabur kecil"},{value:"small",css:"backdrop-filter: blur(4px);",description:"Small blur",descriptionMs:"Kabur kecil"},{value:"medium",css:"backdrop-filter: blur(8px);",description:"Medium blur",descriptionMs:"Kabur sederhana"},{value:"big",css:"backdrop-filter: blur(12px);",description:"Large blur",descriptionMs:"Kabur besar"},{value:"giant",css:"backdrop-filter: blur(24px);",description:"Giant blur",descriptionMs:"Kabur gergasi"},{value:"vast",css:"backdrop-filter: blur(48px);",description:"Vast blur",descriptionMs:"Kabur luas"}],examples:[{code:'<div visual="backdrop-blur:medium bg:[rgba(255,255,255,0.5)]">Frosted glass</div>',description:"Glassmorphism effect"}],preview:[{title:"Backdrop Blur",titleMs:"Kabur Latar Belakang",description:"Creates a frosted glass effect on content behind the element",descriptionMs:"Mencipta kesan kaca beku pada kandungan di belakang elemen",html:`<div layout="flex:center" space="p:large" visual="bg-image:gradient-to-br from:blue-500 to:violet-500 rounded:medium">
+  <div space="p:medium" visual="backdrop-blur:medium bg:[rgba(255,255,255,0.2)] rounded:small">
+    <span visual="text:white">Frosted Glass</span>
+  </div>
+</div>`,highlightValue:"backdrop-blur:medium"}]},Pa={name:"backdrop-brightness",property:"visual",syntax:'visual="backdrop-brightness:[value]"',description:"Adjust backdrop brightness",descriptionMs:"Laraskan kecerahan latar belakang",category:"visual",supportsArbitrary:!0,values:[{value:"dim",css:"backdrop-filter: brightness(0.5);",description:"50% brightness",descriptionMs:"50% kecerahan"},{value:"dark",css:"backdrop-filter: brightness(0.75);",description:"75% brightness",descriptionMs:"75% kecerahan"},{value:"normal",css:"backdrop-filter: brightness(1);",description:"Normal brightness",descriptionMs:"Kecerahan normal"},{value:"bright",css:"backdrop-filter: brightness(1.25);",description:"125% brightness",descriptionMs:"125% kecerahan"},{value:"vivid",css:"backdrop-filter: brightness(1.5);",description:"150% brightness",descriptionMs:"150% kecerahan"}],examples:[{code:'<div visual="backdrop-brightness:dark">Darkened backdrop</div>',description:"Darken backdrop"}],preview:[{title:"Backdrop Brightness",titleMs:"Kecerahan Latar Belakang",description:"Dim or brighten the backdrop behind an overlay",descriptionMs:"Redupkan atau cerahkan latar belakang di sebalik tindanan",html:`<div layout="flex" space="g:medium p:medium" visual="bg-image:gradient-to-br from:orange-500 to:red-500 rounded:medium">
+  <div space="p:small" visual="backdrop-brightness:dim rounded:small text:white">dim (50%)</div>
+  <div space="p:small" visual="backdrop-brightness:normal rounded:small text:white">normal</div>
+  <div space="p:small" visual="backdrop-brightness:vivid rounded:small text:white">bright (150%)</div>
+</div>`,highlightValue:"backdrop-brightness:dark"}]},Ka={name:"backdrop-contrast",property:"visual",syntax:'visual="backdrop-contrast:[value]"',description:"Adjust backdrop contrast",descriptionMs:"Laraskan kontras latar belakang",category:"visual",supportsArbitrary:!0,values:[{value:"low",css:"backdrop-filter: contrast(0.5);",description:"Low contrast",descriptionMs:"Kontras rendah"},{value:"reduced",css:"backdrop-filter: contrast(0.75);",description:"Reduced contrast",descriptionMs:"Kontras dikurangkan"},{value:"normal",css:"backdrop-filter: contrast(1);",description:"Normal contrast",descriptionMs:"Kontras normal"},{value:"high",css:"backdrop-filter: contrast(1.25);",description:"High contrast",descriptionMs:"Kontras tinggi"},{value:"max",css:"backdrop-filter: contrast(1.5);",description:"Maximum contrast",descriptionMs:"Kontras maksimum"}],examples:[{code:'<div visual="backdrop-contrast:high">High contrast backdrop</div>',description:"High contrast"}],preview:[{title:"Backdrop Contrast",titleMs:"Kontras Latar Belakang",description:"Adjust contrast behind element",descriptionMs:"Laraskan kontras di belakang elemen",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small">low</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">normal</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">high</div>
+</div>`,highlightValue:"backdrop-contrast:high"}]},Ra={name:"backdrop-grayscale",property:"visual",syntax:'visual="backdrop-grayscale:[value]"',description:"Apply grayscale to backdrop",descriptionMs:"Terapkan skala kelabu pada latar belakang",category:"visual",supportsArbitrary:!0,values:[{value:"none",css:"backdrop-filter: grayscale(0%);",description:"No grayscale",descriptionMs:"Tiada skala kelabu"},{value:"partial",css:"backdrop-filter: grayscale(50%);",description:"50% grayscale",descriptionMs:"50% skala kelabu"},{value:"full",css:"backdrop-filter: grayscale(100%);",description:"Full grayscale",descriptionMs:"Skala kelabu penuh"}],examples:[{code:'<div visual="backdrop-grayscale:full">Grayscale backdrop</div>',description:"Full grayscale"}],preview:[{title:"Backdrop Grayscale",titleMs:"Skala Kelabu Latar Belakang",description:"Remove color from backdrop, creating a desaturated effect",descriptionMs:"Alih keluar warna dari latar belakang, mencipta kesan tidak tepu",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg-image:gradient-to-br from:blue-500 to:emerald-500 rounded:small text:white">Original</div>
+  <div space="p:small" visual="bg-image:gradient-to-br from:blue-500 to:emerald-500 filter-grayscale:full rounded:small text:white">Grayscale</div>
+</div>`,highlightValue:"backdrop-grayscale:full"}]},Ia={name:"backdrop-hue-rotate",property:"visual",syntax:'visual="backdrop-hue-rotate:[degrees]"',description:"Rotate backdrop hue",descriptionMs:"Putar rona latar belakang",category:"visual",supportsArbitrary:!0,dynamic:!0,values:[{value:"0",css:"backdrop-filter: hue-rotate(0deg);",description:"No rotation",descriptionMs:"Tiada putaran"},{value:"90",css:"backdrop-filter: hue-rotate(90deg);",description:"90\xB0 rotation",descriptionMs:"Putaran 90\xB0"},{value:"180",css:"backdrop-filter: hue-rotate(180deg);",description:"180\xB0 rotation",descriptionMs:"Putaran 180\xB0"}],examples:[{code:'<div visual="backdrop-hue-rotate:90">Rotated hue backdrop</div>',description:"Rotate 90 degrees"}],preview:[{title:"Backdrop Hue Rotate",titleMs:"Putaran Rona Latar Belakang",description:"Rotate colors behind element",descriptionMs:"Putar warna di belakang elemen",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small">0\xB0</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">90\xB0</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">180\xB0</div>
+</div>`,highlightValue:"backdrop-hue-rotate:90"}]},La={name:"backdrop-invert",property:"visual",syntax:'visual="backdrop-invert:[value]"',description:"Invert backdrop colors",descriptionMs:"Songsangkan warna latar belakang",category:"visual",supportsArbitrary:!0,values:[{value:"none",css:"backdrop-filter: invert(0%);",description:"No inversion",descriptionMs:"Tiada penyongsangan"},{value:"partial",css:"backdrop-filter: invert(50%);",description:"50% inversion",descriptionMs:"50% penyongsangan"},{value:"full",css:"backdrop-filter: invert(100%);",description:"Full inversion",descriptionMs:"Penyongsangan penuh"}],examples:[{code:'<div visual="backdrop-invert:full">Inverted backdrop</div>',description:"Full inversion"}],preview:[{title:"Backdrop Invert",titleMs:"Songsang Latar Belakang",description:"Invert colors behind element",descriptionMs:"Songsangkan warna di belakang elemen",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small">none</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">full</div>
+</div>`,highlightValue:"backdrop-invert:full"}]},Na={name:"backdrop-opacity",property:"visual",syntax:'visual="backdrop-opacity:[value]"',description:"Set backdrop opacity",descriptionMs:"Tetapkan kelegapan latar belakang",category:"visual",supportsArbitrary:!0,dynamic:!0,values:[{value:"0",css:"backdrop-filter: opacity(0);",description:"Transparent",descriptionMs:"Lutsinar"},{value:"50",css:"backdrop-filter: opacity(0.5);",description:"50% opacity",descriptionMs:"50% kelegapan"},{value:"100",css:"backdrop-filter: opacity(1);",description:"Fully opaque",descriptionMs:"Sepenuhnya legap"}],examples:[{code:'<div visual="backdrop-opacity:50">Semi-transparent backdrop</div>',description:"50% opacity"}],preview:[{title:"Backdrop Opacity",titleMs:"Kelegapan Latar Belakang",description:"Control backdrop transparency",descriptionMs:"Kawal ketelusan latar belakang",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small">0</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">50</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">100</div>
+</div>`,highlightValue:"backdrop-opacity:50"}]},Ga={name:"backdrop-saturate",property:"visual",syntax:'visual="backdrop-saturate:[value]"',description:"Adjust backdrop saturation",descriptionMs:"Laraskan ketepuan latar belakang",category:"visual",supportsArbitrary:!0,values:[{value:"none",css:"backdrop-filter: saturate(0);",description:"Desaturated",descriptionMs:"Tidak tepu"},{value:"low",css:"backdrop-filter: saturate(0.5);",description:"Low saturation",descriptionMs:"Ketepuan rendah"},{value:"normal",css:"backdrop-filter: saturate(1);",description:"Normal saturation",descriptionMs:"Ketepuan normal"},{value:"high",css:"backdrop-filter: saturate(1.5);",description:"High saturation",descriptionMs:"Ketepuan tinggi"},{value:"vivid",css:"backdrop-filter: saturate(2);",description:"Very saturated",descriptionMs:"Sangat tepu"}],examples:[{code:'<div visual="backdrop-saturate:vivid">Vivid backdrop</div>',description:"High saturation"}],preview:[{title:"Backdrop Saturate",titleMs:"Ketepuan Latar Belakang",description:"Adjust saturation behind element",descriptionMs:"Laraskan ketepuan di belakang elemen",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small">none</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">normal</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">vivid</div>
+</div>`,highlightValue:"backdrop-saturate:vivid"}]},Oa={name:"backdrop-sepia",property:"visual",syntax:'visual="backdrop-sepia:[value]"',description:"Apply sepia to backdrop",descriptionMs:"Terapkan sepia pada latar belakang",category:"visual",supportsArbitrary:!0,values:[{value:"none",css:"backdrop-filter: sepia(0%);",description:"No sepia",descriptionMs:"Tiada sepia"},{value:"partial",css:"backdrop-filter: sepia(50%);",description:"50% sepia",descriptionMs:"50% sepia"},{value:"full",css:"backdrop-filter: sepia(100%);",description:"Full sepia",descriptionMs:"Sepia penuh"}],examples:[{code:'<div visual="backdrop-sepia:full">Vintage backdrop</div>',description:"Full sepia"}],preview:[{title:"Backdrop Sepia",titleMs:"Sepia Latar Belakang",description:"Apply vintage sepia tone to the backdrop",descriptionMs:"Terapkan ton sepia vintaj pada latar belakang",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg-image:gradient-to-br from:blue-500 to:emerald-500 rounded:small text:white">Original</div>
+  <div space="p:small" visual="bg-image:gradient-to-br from:blue-500 to:emerald-500 filter-sepia:full rounded:small text:white">Sepia</div>
+</div>`,highlightValue:"backdrop-sepia:full"}]},Ja={name:"gradient-from",property:"visual",syntax:'visual="from:[color]"',description:"Set gradient start color",descriptionMs:"Tetapkan warna mula gradien",category:"visual",usesScale:"colors",supportsArbitrary:!0,values:[{value:"primary",css:"--tw-gradient-from: var(--c-primary); --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);",description:"Start from primary",descriptionMs:"Mula dari utama"},{value:"blue-500",css:"--tw-gradient-from: var(--c-blue-500); --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);",description:"Start from blue",descriptionMs:"Mula dari biru"}],examples:[{code:'<div visual="bg-image:gradient-to-r from:blue-500 to:purple-500">Gradient</div>',description:"Blue to purple gradient"}],preview:[{title:"Gradient From",titleMs:"Mula Gradien",description:"Set the starting color of a gradient",descriptionMs:"Tetapkan warna permulaan gradien",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:medium" visual="bg-image:gradient-to-r from:blue-500 to:purple-500 text:white rounded:small">from:blue-500 to:purple-500</div>
+  <div space="p:medium" visual="bg-image:gradient-to-r from:emerald-500 to:blue-500 text:white rounded:small">from:emerald-500 to:blue-500</div>
+</div>`,highlightValue:"from:blue-500"}]},Ha={name:"gradient-via",property:"visual",syntax:'visual="via:[color]"',description:"Set gradient middle color",descriptionMs:"Tetapkan warna tengah gradien",category:"visual",usesScale:"colors",supportsArbitrary:!0,values:[{value:"purple-500",css:"--tw-gradient-via: var(--c-purple-500); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to);",description:"Via purple",descriptionMs:"Melalui ungu"}],examples:[{code:'<div visual="bg-image:gradient-to-r from:blue-500 via:purple-500 to:pink-500">Three-color gradient</div>',description:"Three-color gradient"}],preview:[{title:"Gradient Via",titleMs:"Pertengahan Gradien",description:"Add a middle color stop to gradients",descriptionMs:"Tambah hentian warna tengah pada gradien",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:medium" visual="bg-image:gradient-to-r from:blue-500 via:purple-500 to:pink-500 text:white rounded:small">from:blue via:purple to:pink</div>
+</div>`,highlightValue:"via:purple-500"}]},Wa={name:"gradient-to",property:"visual",syntax:'visual="to:[color]"',description:"Set gradient end color",descriptionMs:"Tetapkan warna akhir gradien",category:"visual",usesScale:"colors",supportsArbitrary:!0,values:[{value:"purple-500",css:"--tw-gradient-to: var(--c-purple-500);",description:"End at purple",descriptionMs:"Akhir di ungu"},{value:"pink-500",css:"--tw-gradient-to: var(--c-pink-500);",description:"End at pink",descriptionMs:"Akhir di merah jambu"}],examples:[{code:'<div visual="bg-image:gradient-to-r from:blue-500 to:purple-500">Blue to purple</div>',description:"End color"}],preview:[{title:"Gradient To",titleMs:"Akhir Gradien",description:"Set the ending color of a gradient",descriptionMs:"Tetapkan warna pengakhiran gradien",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:medium" visual="bg-image:gradient-to-r from:blue-500 to:purple-500 text:white rounded:small">to:purple-500</div>
+  <div space="p:medium" visual="bg-image:gradient-to-r from:blue-500 to:pink-500 text:white rounded:small">to:pink-500</div>
+</div>`,highlightValue:"to:purple-500"}]},Me={backgroundImage:Va,backgroundAttachment:Ta,backgroundClip:Ca,backgroundOrigin:Da,backgroundPosition:za,backgroundRepeat:$a,backgroundSize:ja,backgroundBlendMode:Ba,gradientFrom:Ja,gradientVia:Ha,gradientTo:Wa,backdropBlur:Ea,backdropBrightness:Pa,backdropContrast:Ka,backdropGrayscale:Ra,backdropHueRotate:Ia,backdropInvert:La,backdropOpacity:Na,backdropSaturate:Ga,backdropSepia:Oa},Se=Me;var qa={name:"scroll-behavior",property:"visual",syntax:'visual="scroll-behavior:[value]"',description:"Set scroll behavior",descriptionMs:"Tetapkan kelakuan skrol",category:"visual",values:[{value:"auto",css:"scroll-behavior: auto;",description:"Instant scroll",descriptionMs:"Skrol serta-merta"},{value:"smooth",css:"scroll-behavior: smooth;",description:"Smooth scroll",descriptionMs:"Skrol lancar"}],examples:[{code:'<html visual="scroll-behavior:smooth">Smooth scrolling</html>',description:"Smooth scroll"}],preview:[{title:"Scroll Behavior",titleMs:"Kelakuan Skrol",description:"Smooth or instant scrolling",descriptionMs:"Skrol lancar atau serta-merta",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small">auto</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">smooth</div>
+</div>`,highlightValue:"scroll-behavior:smooth"}]},Ua={name:"scroll-margin",property:"visual",syntax:'visual="scroll-m:[value]"',description:"Set scroll margin for snap",descriptionMs:"Tetapkan margin skrol untuk snap",category:"visual",usesScale:"spacing",supportsArbitrary:!0,dynamic:!0,values:[{value:"scroll-m",css:"scroll-margin: {value};",description:"All sides",descriptionMs:"Semua sisi"},{value:"scroll-m-t",css:"scroll-margin-top: {value};",description:"Top margin",descriptionMs:"Margin atas"},{value:"scroll-m-r",css:"scroll-margin-right: {value};",description:"Right margin",descriptionMs:"Margin kanan"},{value:"scroll-m-b",css:"scroll-margin-bottom: {value};",description:"Bottom margin",descriptionMs:"Margin bawah"},{value:"scroll-m-l",css:"scroll-margin-left: {value};",description:"Left margin",descriptionMs:"Margin kiri"}],examples:[{code:'<div visual="scroll-m:medium">Scroll margin</div>',description:"Scroll margin"}],preview:[{title:"Scroll Margin",titleMs:"Margin Skrol",description:"Offset for scroll snap",descriptionMs:"Offset untuk snap skrol",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small">scroll-m:medium</div>
+</div>`,highlightValue:"scroll-m:medium"}]},Xa={name:"scroll-padding",property:"visual",syntax:'visual="scroll-p:[value]"',description:"Set scroll padding for snap",descriptionMs:"Tetapkan padding skrol untuk snap",category:"visual",usesScale:"spacing",supportsArbitrary:!0,dynamic:!0,values:[{value:"scroll-p",css:"scroll-padding: {value};",description:"All sides",descriptionMs:"Semua sisi"},{value:"scroll-p-t",css:"scroll-padding-top: {value};",description:"Top padding",descriptionMs:"Padding atas"},{value:"scroll-p-r",css:"scroll-padding-right: {value};",description:"Right padding",descriptionMs:"Padding kanan"},{value:"scroll-p-b",css:"scroll-padding-bottom: {value};",description:"Bottom padding",descriptionMs:"Padding bawah"},{value:"scroll-p-l",css:"scroll-padding-left: {value};",description:"Left padding",descriptionMs:"Padding kiri"}],examples:[{code:'<div visual="scroll-p:big">Scroll padding</div>',description:"Scroll padding"}],preview:[{title:"Scroll Padding",titleMs:"Padding Skrol",description:"Padding for scroll snap container",descriptionMs:"Padding untuk bekas snap skrol",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small">scroll-p:big</div>
+</div>`,highlightValue:"scroll-p:big"}]},Ya={name:"scroll-snap-align",property:"visual",syntax:'visual="snap-align:[value]"',description:"Set scroll snap alignment",descriptionMs:"Tetapkan penjajaran snap skrol",category:"visual",values:[{value:"start",css:"scroll-snap-align: start;",description:"Snap to start",descriptionMs:"Snap ke permulaan"},{value:"end",css:"scroll-snap-align: end;",description:"Snap to end",descriptionMs:"Snap ke hujung"},{value:"center",css:"scroll-snap-align: center;",description:"Snap to center",descriptionMs:"Snap ke tengah"},{value:"none",css:"scroll-snap-align: none;",description:"No snap",descriptionMs:"Tiada snap"}],examples:[{code:'<div visual="snap-align:start">Snap to start</div>',description:"Start alignment"}],preview:[{title:"Snap Alignment",titleMs:"Penjajaran Snap",description:"Where to snap within container",descriptionMs:"Tempat untuk snap dalam bekas",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small">start</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">center</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">end</div>
+</div>`,highlightValue:"snap-align:start"}]},_a={name:"scroll-snap-stop",property:"visual",syntax:'visual="snap-stop:[value]"',description:"Control scroll snap stop behavior",descriptionMs:"Kawal kelakuan hentian snap skrol",category:"visual",values:[{value:"normal",css:"scroll-snap-stop: normal;",description:"Normal stop",descriptionMs:"Hentian biasa"},{value:"always",css:"scroll-snap-stop: always;",description:"Always stop",descriptionMs:"Sentiasa berhenti"}],examples:[{code:'<div visual="snap-stop:always">Always stop here</div>',description:"Force stop"}],preview:[{title:"Snap Stop",titleMs:"Hentian Snap",description:"Control whether to stop at snap point",descriptionMs:"Kawal sama ada berhenti di titik snap",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small">normal</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">always</div>
+</div>`,highlightValue:"snap-stop:always"}]},Za={name:"scroll-snap-type",property:"visual",syntax:'visual="snap-type:[value]"',description:"Set scroll snap type",descriptionMs:"Tetapkan jenis snap skrol",category:"visual",values:[{value:"none",css:"scroll-snap-type: none;",description:"No snapping",descriptionMs:"Tiada snapping"},{value:"x",css:"scroll-snap-type: x mandatory;",description:"Horizontal snap",descriptionMs:"Snap mendatar"},{value:"y",css:"scroll-snap-type: y mandatory;",description:"Vertical snap",descriptionMs:"Snap menegak"},{value:"both",css:"scroll-snap-type: both mandatory;",description:"Both axes",descriptionMs:"Kedua-dua paksi"},{value:"x-proximity",css:"scroll-snap-type: x proximity;",description:"Horizontal proximity",descriptionMs:"Kedekatan mendatar"},{value:"y-proximity",css:"scroll-snap-type: y proximity;",description:"Vertical proximity",descriptionMs:"Kedekatan menegak"}],examples:[{code:'<div visual="snap-type:x">Horizontal snap container</div>',description:"Horizontal snap"}],preview:[{title:"Snap Type",titleMs:"Jenis Snap",description:"Enable scroll snapping",descriptionMs:"Dayakan snapping skrol",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small">x</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">y</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">both</div>
+</div>`,highlightValue:"snap-type:x"}]},Qa={name:"touch-action",property:"visual",syntax:'visual="touch:[value]"',description:"Control touch interactions",descriptionMs:"Kawal interaksi sentuh",category:"visual",values:[{value:"auto",css:"touch-action: auto;",description:"Default touch",descriptionMs:"Sentuh lalai"},{value:"none",css:"touch-action: none;",description:"Disable touch",descriptionMs:"Lumpuhkan sentuh"},{value:"pan-x",css:"touch-action: pan-x;",description:"Pan horizontally",descriptionMs:"Pan mendatar"},{value:"pan-y",css:"touch-action: pan-y;",description:"Pan vertically",descriptionMs:"Pan menegak"},{value:"pan-left",css:"touch-action: pan-left;",description:"Pan left",descriptionMs:"Pan kiri"},{value:"pan-right",css:"touch-action: pan-right;",description:"Pan right",descriptionMs:"Pan kanan"},{value:"pinch-zoom",css:"touch-action: pinch-zoom;",description:"Pinch to zoom",descriptionMs:"Cubit untuk zum"},{value:"manipulation",css:"touch-action: manipulation;",description:"Pan and pinch only",descriptionMs:"Pan dan cubit sahaja"}],examples:[{code:'<div visual="touch:manipulation">Touch optimized</div>',description:"Optimized touch"}],preview:[{title:"Touch Action",titleMs:"Tindakan Sentuh",description:"Control touch gestures",descriptionMs:"Kawal gerak isyarat sentuh",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small">pan-x</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">pan-y</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">manipulation</div>
+</div>`,highlightValue:"touch:manipulation"}]},ei={name:"resize",property:"visual",syntax:'visual="resize:[value]"',description:"Control element resizing",descriptionMs:"Kawal saiz semula elemen",category:"visual",values:[{value:"none",css:"resize: none;",description:"No resize",descriptionMs:"Tiada saiz semula"},{value:"both",css:"resize: both;",description:"Resize both",descriptionMs:"Saiz semula kedua-dua"},{value:"x",css:"resize: horizontal;",description:"Resize horizontal",descriptionMs:"Saiz semula mendatar"},{value:"y",css:"resize: vertical;",description:"Resize vertical",descriptionMs:"Saiz semula menegak"}],examples:[{code:'<textarea visual="resize:y">Vertical resize only</textarea>',description:"Vertical resize"}],preview:[{title:"Resize",titleMs:"Saiz Semula",description:"Allow element resizing",descriptionMs:"Benarkan saiz semula elemen",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small">none</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">x</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">y</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">both</div>
+</div>`,highlightValue:"resize:y"}]},ai={name:"will-change",property:"visual",syntax:'visual="will-change:[value]"',description:"Hint browser about upcoming changes",descriptionMs:"Beri petunjuk kepada pelayar tentang perubahan akan datang",category:"visual",values:[{value:"auto",css:"will-change: auto;",description:"Auto optimization",descriptionMs:"Pengoptimuman automatik"},{value:"scroll",css:"will-change: scroll-position;",description:"Scroll changes",descriptionMs:"Perubahan skrol"},{value:"contents",css:"will-change: contents;",description:"Content changes",descriptionMs:"Perubahan kandungan"},{value:"transform",css:"will-change: transform;",description:"Transform changes",descriptionMs:"Perubahan transform"},{value:"opacity",css:"will-change: opacity;",description:"Opacity changes",descriptionMs:"Perubahan kelegapan"}],examples:[{code:'<div visual="will-change:transform">Optimized for animation</div>',description:"Transform optimization"}],preview:[{title:"Will Change",titleMs:"Akan Berubah",description:"Optimize for upcoming changes",descriptionMs:"Optimumkan untuk perubahan akan datang",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small">transform</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">opacity</div>
+</div>`,highlightValue:"will-change:transform"}]},ii={name:"color-scheme",property:"visual",syntax:'visual="color-scheme:[value]"',description:"Set preferred color scheme",descriptionMs:"Tetapkan skema warna pilihan",category:"visual",values:[{value:"light",css:"color-scheme: light;",description:"Light mode",descriptionMs:"Mod cerah"},{value:"dark",css:"color-scheme: dark;",description:"Dark mode",descriptionMs:"Mod gelap"},{value:"normal",css:"color-scheme: normal;",description:"System default",descriptionMs:"Lalai sistem"}],examples:[{code:'<html visual="color-scheme:dark">Dark mode</html>',description:"Dark mode"}],preview:[{title:"Color Scheme",titleMs:"Skema Warna",description:"Set preferred color mode",descriptionMs:"Tetapkan mod warna pilihan",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small">light</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">dark</div>
+</div>`,highlightValue:"color-scheme:dark"}]},ti={name:"field-sizing",property:"visual",syntax:'visual="field-sizing:[value]"',description:"Control form field sizing",descriptionMs:"Kawal saiz medan borang",category:"visual",values:[{value:"fixed",css:"field-sizing: fixed;",description:"Fixed size",descriptionMs:"Saiz tetap"},{value:"content",css:"field-sizing: content;",description:"Size to content",descriptionMs:"Saiz mengikut kandungan"}],examples:[{code:'<textarea visual="field-sizing:content">Auto-grow textarea</textarea>',description:"Auto-grow"}],preview:[{title:"Field Sizing",titleMs:"Saiz Medan",description:"Grow field with content",descriptionMs:"Besarkan medan dengan kandungan",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small">fixed</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">content</div>
+</div>`,highlightValue:"field-sizing:content"}]},si={name:"forced-color-adjust",property:"visual",syntax:'visual="forced-color:[value]"',description:"Control forced colors mode behavior",descriptionMs:"Kawal kelakuan mod warna paksa",category:"visual",values:[{value:"auto",css:"forced-color-adjust: auto;",description:"Auto adjust",descriptionMs:"Penyesuaian automatik"},{value:"none",css:"forced-color-adjust: none;",description:"No adjustment",descriptionMs:"Tiada penyesuaian"}],examples:[{code:'<div visual="forced-color:none">Preserve colors in high contrast</div>',description:"Preserve colors"}],preview:[{title:"Forced Color Adjust",titleMs:"Penyesuaian Warna Paksa",description:"Control high contrast mode",descriptionMs:"Kawal mod kontras tinggi",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small">auto</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">none</div>
+</div>`,highlightValue:"forced-color:none"}]},Ae={scrollBehavior:qa,scrollMargin:Ua,scrollPadding:Xa,scrollSnapAlign:Ya,scrollSnapStop:_a,scrollSnapType:Za,touchAction:Qa,resize:ei,willChange:ai,colorScheme:ii,fieldSizing:ti,forcedColorAdjust:si},Fe=Ae;var ri={name:"text-alignment",property:"visual",syntax:'visual="text:[alignment]"',description:"Set text alignment",descriptionMs:"Tetapkan penjajaran teks",category:"visual",values:[{value:"left",css:"text-align: left;",description:"Left align",descriptionMs:"Jajar kiri"},{value:"center",css:"text-align: center;",description:"Center align",descriptionMs:"Jajar tengah"},{value:"right",css:"text-align: right;",description:"Right align",descriptionMs:"Jajar kanan"},{value:"justify",css:"text-align: justify;",description:"Justify",descriptionMs:"Justify"}],examples:[{code:'<p visual="text:center">Centered text</p>',description:"Center text"}],preview:[{title:"Text Alignment",titleMs:"Penjajaran Teks",description:"Align text within container",descriptionMs:"Jajarkan teks dalam bekas",html:`<div layout="flex col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div visual="text:left bg:primary text:white rounded:small" space="p:small">left</div>
+  <div visual="text:center bg:primary text:white rounded:small" space="p:small">center</div>
+  <div visual="text:right bg:primary text:white rounded:small" space="p:small">right</div>
+</div>`,highlightValue:"text:center"}]},ni={name:"text-transform",property:"visual",syntax:'visual="[transform-value]"',description:"Transform text case",descriptionMs:"Ubah kes teks",category:"visual",values:[{value:"uppercase",css:"text-transform: uppercase;",description:"All uppercase",descriptionMs:"Semua huruf besar"},{value:"lowercase",css:"text-transform: lowercase;",description:"All lowercase",descriptionMs:"Semua huruf kecil"},{value:"capitalize",css:"text-transform: capitalize;",description:"Capitalize words",descriptionMs:"Huruf besar awal perkataan"},{value:"normal-case",css:"text-transform: none;",description:"Normal case",descriptionMs:"Kes normal"}],examples:[{code:'<span visual="uppercase">Uppercase text</span>',description:"Uppercase"}],preview:[{title:"Text Transform",titleMs:"Ubah Kes Teks",description:"Change text case",descriptionMs:"Ubah kes teks",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span space="p:small" visual="bg:primary text:white rounded:small uppercase">upper</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small lowercase">LOWER</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small capitalize">capitalize me</span>
+</div>`,highlightValue:"uppercase"}]},li={name:"text-decoration",property:"visual",syntax:'visual="[decoration-value]"',description:"Set text decoration",descriptionMs:"Tetapkan hiasan teks",category:"visual",values:[{value:"underline",css:"text-decoration-line: underline;",description:"Underline",descriptionMs:"Garis bawah"},{value:"overline",css:"text-decoration-line: overline;",description:"Overline",descriptionMs:"Garis atas"},{value:"line-through",css:"text-decoration-line: line-through;",description:"Strikethrough",descriptionMs:"Garis potong"},{value:"no-underline",css:"text-decoration-line: none;",description:"No decoration",descriptionMs:"Tiada hiasan"}],examples:[{code:'<a visual="no-underline">No underline link</a>',description:"Remove underline"}],preview:[{title:"Text Decoration",titleMs:"Hiasan Teks",description:"Add lines to text",descriptionMs:"Tambah garis pada teks",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span space="p:small" visual="bg:primary text:white rounded:small underline">underline</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small line-through">line-through</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small overline">overline</span>
+</div>`,highlightValue:"underline"}]},oi={name:"text-overflow",property:"visual",syntax:'visual="[overflow-value]"',description:"Handle text overflow",descriptionMs:"Kendalikan limpahan teks",category:"visual",values:[{value:"truncate",css:"overflow: hidden; text-overflow: ellipsis; white-space: nowrap;",description:"Truncate with ellipsis",descriptionMs:"Potong dengan elipsis"},{value:"text-ellipsis",css:"text-overflow: ellipsis;",description:"Ellipsis overflow",descriptionMs:"Limpahan elipsis"},{value:"text-clip",css:"text-overflow: clip;",description:"Clip overflow",descriptionMs:"Limpahan potong"}],examples:[{code:'<div visual="truncate">Very long text that gets truncated...</div>',description:"Truncate text"}],preview:[{title:"Text Overflow",titleMs:"Limpahan Teks",description:"Handle overflowing text",descriptionMs:"Kendalikan teks yang melimpah",html:`<div layout="flex col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small w:[150px]" visual="bg:primary text:white rounded:small truncate">This long text will be truncated with ellipsis</div>
+  <div space="p:small w:[150px]" visual="bg:success text:white rounded:small text-clip">This long text will be clipped without ellipsis</div>
+</div>`,highlightValue:"truncate"}]},di={name:"text-wrap",property:"visual",syntax:'visual="[wrap-value]"',description:"Control text wrapping",descriptionMs:"Kawal pembalutan teks",category:"visual",values:[{value:"text-wrap",css:"text-wrap: wrap;",description:"Wrap text",descriptionMs:"Balut teks"},{value:"text-nowrap",css:"text-wrap: nowrap;",description:"No wrap",descriptionMs:"Tiada balutan"},{value:"text-balance",css:"text-wrap: balance;",description:"Balanced wrap",descriptionMs:"Balutan seimbang"},{value:"text-pretty",css:"text-wrap: pretty;",description:"Pretty wrap",descriptionMs:"Balutan cantik"}],examples:[{code:'<h1 visual="text-balance">Balanced heading</h1>',description:"Balanced text"}],preview:[{title:"Text Wrap",titleMs:"Pembalutan Teks",description:"Control line wrapping",descriptionMs:"Kawal pembalutan baris",html:`<div layout="flex col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small w:[200px]" visual="bg:primary text:white rounded:small text-wrap">This text will wrap normally when needed</div>
+  <div space="p:small w:[200px]" visual="bg:success text:white rounded:small text-nowrap">This text won't wrap at all</div>
+  <div space="p:small w:[200px]" visual="bg:warning text:black rounded:small text-balance">This heading text is balanced</div>
+</div>`,highlightValue:"text-balance"}]},pi={name:"whitespace",property:"visual",syntax:'visual="whitespace:[value]"',description:"Control whitespace handling",descriptionMs:"Kawal pengendalian ruang putih",category:"visual",values:[{value:"normal",css:"white-space: normal;",description:"Normal whitespace",descriptionMs:"Ruang putih normal"},{value:"nowrap",css:"white-space: nowrap;",description:"No wrap",descriptionMs:"Tiada balutan"},{value:"pre",css:"white-space: pre;",description:"Preserve whitespace",descriptionMs:"Kekalkan ruang putih"},{value:"pre-line",css:"white-space: pre-line;",description:"Pre-line",descriptionMs:"Pra-baris"},{value:"pre-wrap",css:"white-space: pre-wrap;",description:"Pre-wrap",descriptionMs:"Pra-balut"},{value:"break-spaces",css:"white-space: break-spaces;",description:"Break spaces",descriptionMs:"Pecah ruang"}],examples:[{code:'<pre visual="whitespace:pre">Preserved whitespace</pre>',description:"Preserve whitespace"}],preview:[{title:"Whitespace",titleMs:"Ruang Putih",description:"Control whitespace handling",descriptionMs:"Kawal pengendalian ruang putih",html:`<div layout="flex col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small whitespace:normal">Normal   spaces   collapse</div>
+  <div space="p:small" visual="bg:success text:white rounded:small whitespace:nowrap">This text won't wrap to next line</div>
+  <div space="p:small" visual="bg:warning text:black rounded:small whitespace:pre">Preserved   spaces   here</div>
+</div>`,highlightValue:"whitespace:pre"}]},ui={name:"word-break",property:"visual",syntax:'visual="[break-value]"',description:"Control word breaking",descriptionMs:"Kawal pemecahan perkataan",category:"visual",values:[{value:"break-normal",css:"overflow-wrap: normal; word-break: normal;",description:"Normal break",descriptionMs:"Pemecahan normal"},{value:"break-words",css:"overflow-wrap: break-word;",description:"Break words",descriptionMs:"Pecah perkataan"},{value:"break-all",css:"word-break: break-all;",description:"Break all",descriptionMs:"Pecah semua"},{value:"break-keep",css:"word-break: keep-all;",description:"Keep all",descriptionMs:"Kekalkan semua"}],examples:[{code:'<div visual="break-words">Long words break properly</div>',description:"Break long words"}],preview:[{title:"Word Break",titleMs:"Pemecahan Perkataan",description:"Control word breaking",descriptionMs:"Kawal pemecahan perkataan",html:`<div layout="flex col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small w:[120px]" visual="bg:primary text:white rounded:small break-normal">Supercalifragilisticexpialidocious</div>
+  <div space="p:small w:[120px]" visual="bg:success text:white rounded:small break-words">Supercalifragilisticexpialidocious</div>
+  <div space="p:small w:[120px]" visual="bg:warning text:black rounded:small break-all">Supercalifragilisticexpialidocious</div>
+</div>`,highlightValue:"break-words"}]},ci={name:"hyphens",property:"visual",syntax:'visual="hyphens:[value]"',description:"Control hyphenation",descriptionMs:"Kawal tanda sempang",category:"visual",values:[{value:"none",css:"hyphens: none;",description:"No hyphens",descriptionMs:"Tiada sempang"},{value:"manual",css:"hyphens: manual;",description:"Manual hyphens",descriptionMs:"Sempang manual"},{value:"auto",css:"hyphens: auto;",description:"Auto hyphens",descriptionMs:"Sempang automatik"}],examples:[{code:'<p visual="hyphens:auto">Automatic hyphenation</p>',description:"Auto hyphens"}],preview:[{title:"Hyphens",titleMs:"Sempang",description:"Control automatic hyphenation",descriptionMs:"Kawal sempang automatik",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small hyphens:none">none</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small hyphens:manual">manual</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small hyphens:auto">auto</div>
+</div>`,highlightValue:"hyphens:auto"}]},mi={name:"text-indent",property:"visual",syntax:'visual="indent:[value]"',description:"Set text indentation",descriptionMs:"Tetapkan inden teks",category:"visual",usesScale:"spacing",supportsArbitrary:!0,dynamic:!0,values:[{value:"0",css:"text-indent: 0;",description:"No indent",descriptionMs:"Tiada inden"}],examples:[{code:'<p visual="indent:medium">Indented paragraph</p>',description:"Indented text"}],preview:[{title:"Text Indent",titleMs:"Inden Teks",description:"Indent first line of text",descriptionMs:"Inden baris pertama teks",html:`<div layout="flex col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <p space="p:small" visual="bg:primary text:white rounded:small indent:0">No indent on this text paragraph.</p>
+  <p space="p:small" visual="bg:success text:white rounded:small indent:medium">Medium indent on this first line of the paragraph.</p>
+  <p space="p:small" visual="bg:warning text:black rounded:small indent:big">Bigger indent on this first line of the paragraph.</p>
+</div>`,highlightValue:"indent:medium"}]},vi={name:"vertical-align",property:"visual",syntax:'visual="align:[value]"',description:"Set vertical alignment",descriptionMs:"Tetapkan penjajaran menegak",category:"visual",values:[{value:"baseline",css:"vertical-align: baseline;",description:"Baseline",descriptionMs:"Garis asas"},{value:"top",css:"vertical-align: top;",description:"Top",descriptionMs:"Atas"},{value:"middle",css:"vertical-align: middle;",description:"Middle",descriptionMs:"Tengah"},{value:"bottom",css:"vertical-align: bottom;",description:"Bottom",descriptionMs:"Bawah"},{value:"text-top",css:"vertical-align: text-top;",description:"Text top",descriptionMs:"Atas teks"},{value:"text-bottom",css:"vertical-align: text-bottom;",description:"Text bottom",descriptionMs:"Bawah teks"},{value:"sub",css:"vertical-align: sub;",description:"Subscript",descriptionMs:"Subskrip"},{value:"super",css:"vertical-align: super;",description:"Superscript",descriptionMs:"Superskrip"}],examples:[{code:'<img visual="align:middle">Vertically centered</img>',description:"Middle alignment"}],preview:[{title:"Vertical Align",titleMs:"Penjajaran Menegak",description:"Align inline elements",descriptionMs:"Jajarkan elemen sebaris",html:`<div space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span space="p:small" visual="bg:primary text:white rounded:small align:top">top</span>
+  <span space="p:small" visual="bg:success text:white rounded:small align:middle">middle</span>
+  <span space="p:small" visual="bg:warning text:black rounded:small align:bottom">bottom</span>
+  <span visual="text-size:huge text:neutral-500">Big</span>
+</div>`,highlightValue:"align:middle"}]},gi={name:"font-style",property:"visual",syntax:'visual="[style-value]"',description:"Set font style",descriptionMs:"Tetapkan gaya fon",category:"visual",values:[{value:"italic",css:"font-style: italic;",description:"Italic text",descriptionMs:"Teks italic"},{value:"not-italic",css:"font-style: normal;",description:"Normal style",descriptionMs:"Gaya normal"}],examples:[{code:'<em visual="not-italic">Normal style emphasis</em>',description:"Remove italic"}],preview:[{title:"Font Style",titleMs:"Gaya Fon",description:"Italic or normal text",descriptionMs:"Teks italic atau normal",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span space="p:small" visual="bg:primary text:white rounded:small italic">italic</span>
+  <span space="p:small" visual="bg:success text:white rounded:small not-italic">not-italic</span>
+</div>`,highlightValue:"italic"}]},hi={name:"font-smoothing",property:"visual",syntax:'visual="[smoothing-value]"',description:"Control font smoothing",descriptionMs:"Kawal penghalusan fon",category:"visual",values:[{value:"antialiased",css:"-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;",description:"Antialiased",descriptionMs:"Antialias"},{value:"subpixel-antialiased",css:"-webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto;",description:"Subpixel antialiased",descriptionMs:"Subpixel antialias"}],examples:[{code:'<body visual="antialiased">Smooth fonts</body>',description:"Antialiased text"}],preview:[{title:"Font Smoothing",titleMs:"Penghalusan Fon",description:"Control text rendering",descriptionMs:"Kawal persembahan teks",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small antialiased">antialiased</div>
+  <div space="p:small" visual="bg:success text:white rounded:small subpixel-antialiased">subpixel</div>
+</div>`,highlightValue:"antialiased"}]},bi={name:"line-clamp",property:"visual",syntax:'visual="line-clamp:[value]"',description:"Limit text to specific lines",descriptionMs:"Hadkan teks kepada bilangan baris tertentu",category:"visual",supportsArbitrary:!0,dynamic:!0,values:[{value:"1",css:"overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;",description:"Single line",descriptionMs:"Satu baris"},{value:"2",css:"overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;",description:"Two lines",descriptionMs:"Dua baris"},{value:"3",css:"overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;",description:"Three lines",descriptionMs:"Tiga baris"},{value:"none",css:"overflow: visible; display: block; -webkit-box-orient: horizontal; -webkit-line-clamp: none;",description:"No clamp",descriptionMs:"Tiada had"}],examples:[{code:'<p visual="line-clamp:3">Text limited to 3 lines...</p>',description:"Clamp to 3 lines"}],preview:[{title:"Line Clamp",titleMs:"Had Baris",description:"Limit text to specific lines",descriptionMs:"Hadkan teks kepada baris tertentu",html:`<div layout="flex col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small w:[200px]" visual="bg:primary text:white rounded:small line-clamp:1">This is a very long text that will be clamped to just one single line with ellipsis.</div>
+  <div space="p:small w:[200px]" visual="bg:success text:white rounded:small line-clamp:2">This is a very long text that will be clamped to exactly two lines with ellipsis at the end.</div>
+  <div space="p:small w:[200px]" visual="bg:warning text:black rounded:small line-clamp:3">This is a very long text that will be clamped to exactly three lines with ellipsis shown at the end of the third line.</div>
+</div>`,highlightValue:"line-clamp:2"}]},xi={name:"list-style",property:"visual",syntax:'visual="list:[value]"',description:"Set list style",descriptionMs:"Tetapkan gaya senarai",category:"visual",values:[{value:"none",css:"list-style-type: none;",description:"No bullets",descriptionMs:"Tiada bullet"},{value:"disc",css:"list-style-type: disc;",description:"Disc bullets",descriptionMs:"Bullet bulat"},{value:"decimal",css:"list-style-type: decimal;",description:"Numbers",descriptionMs:"Nombor"},{value:"square",css:"list-style-type: square;",description:"Square bullets",descriptionMs:"Bullet segi empat"},{value:"inside",css:"list-style-position: inside;",description:"Inside position",descriptionMs:"Kedudukan dalam"},{value:"outside",css:"list-style-position: outside;",description:"Outside position",descriptionMs:"Kedudukan luar"}],examples:[{code:'<ul visual="list:none">No bullets</ul>',description:"Remove bullets"}],preview:[{title:"List Style",titleMs:"Gaya Senarai",description:"Control list markers",descriptionMs:"Kawal penanda senarai",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <ul space="p:small" visual="bg:primary text:white rounded:small list:none"><li>none</li><li>no bullets</li></ul>
+  <ul space="p:small" visual="bg:success text:white rounded:small list:disc"><li>disc</li><li>bullet</li></ul>
+  <ol space="p:small" visual="bg:warning text:black rounded:small list:decimal"><li>decimal</li><li>numbers</li></ol>
+</div>`,highlightValue:"list:disc"}]},yi={name:"text-shadow",property:"visual",syntax:'visual="text-shadow:[value]"',description:"Add text shadow",descriptionMs:"Tambah bayang teks",category:"visual",supportsArbitrary:!0,values:[{value:"none",css:"text-shadow: none;",description:"No shadow",descriptionMs:"Tiada bayang"},{value:"small",css:"text-shadow: 0 1px 2px rgba(0,0,0,0.1);",description:"Small shadow",descriptionMs:"Bayang kecil"},{value:"medium",css:"text-shadow: 0 2px 4px rgba(0,0,0,0.1);",description:"Medium shadow",descriptionMs:"Bayang sederhana"},{value:"big",css:"text-shadow: 0 4px 8px rgba(0,0,0,0.1);",description:"Large shadow",descriptionMs:"Bayang besar"}],examples:[{code:'<h1 visual="text-shadow:medium">Shadowed heading</h1>',description:"Text shadow"}],preview:[{title:"Text Shadow",titleMs:"Bayang Teks",description:"Add shadow to text",descriptionMs:"Tambah bayang pada teks",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small text-shadow:none text-size:big">none</div>
+  <div space="p:small" visual="bg:success text:white rounded:small text-shadow:small text-size:big">small</div>
+  <div space="p:small" visual="bg:warning text:black rounded:small text-shadow:medium text-size:big">medium</div>
+  <div space="p:small" visual="bg:danger text:white rounded:small text-shadow:big text-size:big">big</div>
+</div>`,highlightValue:"text-shadow:medium"}]},fi={name:"font-variant-numeric",property:"visual",syntax:'visual="[variant-value]"',description:"Control numeric font variants",descriptionMs:"Kawal varian nombor fon",category:"visual",values:[{value:"normal-nums",css:"font-variant-numeric: normal;",description:"Normal numbers",descriptionMs:"Nombor biasa"},{value:"ordinal",css:"font-variant-numeric: ordinal;",description:"Ordinal markers",descriptionMs:"Penanda ordinal"},{value:"slashed-zero",css:"font-variant-numeric: slashed-zero;",description:"Slashed zero",descriptionMs:"Sifar bergaris"},{value:"lining-nums",css:"font-variant-numeric: lining-nums;",description:"Lining numbers",descriptionMs:"Nombor garis"},{value:"oldstyle-nums",css:"font-variant-numeric: oldstyle-nums;",description:"Oldstyle numbers",descriptionMs:"Nombor gaya lama"},{value:"proportional-nums",css:"font-variant-numeric: proportional-nums;",description:"Proportional numbers",descriptionMs:"Nombor proporsional"},{value:"tabular-nums",css:"font-variant-numeric: tabular-nums;",description:"Tabular numbers",descriptionMs:"Nombor tabular"}],examples:[{code:'<span visual="tabular-nums">123,456.00</span>',description:"Tabular numbers"}],preview:[{title:"Font Variant Numeric",titleMs:"Varian Nombor Fon",description:"Control number display",descriptionMs:"Kawal paparan nombor",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small tabular-nums text-size:big">123,456.00</div>
+  <div space="p:small" visual="bg:success text:white rounded:small slashed-zero text-size:big">0123</div>
+  <div space="p:small" visual="bg:warning text:black rounded:small ordinal text-size:big">1st 2nd 3rd</div>
+</div>`,highlightValue:"tabular-nums"}]},Ve={textAlignment:ri,textTransform:ni,textDecoration:li,textOverflow:oi,textWrap:di,whitespace:pi,wordBreak:ui,hyphens:ci,textIndent:mi,verticalAlign:vi,fontStyle:gi,fontSmoothing:hi,lineClamp:bi,listStyle:xi,textShadow:yi,fontVariantNumeric:fi},Te=Ve;var ki={name:"transform-perspective",property:"visual",syntax:'visual="perspective:[value]"',description:"Set 3D perspective on container (apply to parent of transformed elements)",descriptionMs:"Tetapkan perspektif 3D pada bekas (terapkan pada induk elemen transformasi)",category:"visual",supportsArbitrary:!0,values:[{value:"none",css:"perspective: none;",description:"No perspective",descriptionMs:"Tiada perspektif"},{value:"dramatic",css:"perspective: 100px;",description:"Dramatic perspective",descriptionMs:"Perspektif dramatik"},{value:"near",css:"perspective: 300px;",description:"Near perspective",descriptionMs:"Perspektif dekat"},{value:"normal",css:"perspective: 500px;",description:"Normal perspective",descriptionMs:"Perspektif normal"},{value:"midrange",css:"perspective: 800px;",description:"Midrange perspective",descriptionMs:"Perspektif pertengahan"},{value:"far",css:"perspective: 1000px;",description:"Far perspective",descriptionMs:"Perspektif jauh"},{value:"distant",css:"perspective: 1200px;",description:"Distant perspective",descriptionMs:"Perspektif jauh sekali"}],examples:[{code:'<div visual="perspective:normal"><div visual="rotate-y:45">3D rotated</div></div>',description:"Parent perspective for 3D child"}],preview:[{title:"3D Perspective",titleMs:"Perspektif 3D",description:"Control 3D depth perception - apply to parent, transform children",descriptionMs:"Kawal persepsi kedalaman 3D - terapkan pada induk, transformasi anak",html:`<div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div layout="flex col" space="g:tiny">
+    <span visual="text:neutral-500 text-size:tiny">dramatic</span>
+    <div space="p:medium" visual="perspective:dramatic">
+      <div space="p:small" visual="bg:primary text:white rounded:small rotate-y:45">3D</div>
+    </div>
+  </div>
+  <div layout="flex col" space="g:tiny">
+    <span visual="text:neutral-500 text-size:tiny">normal</span>
+    <div space="p:medium" visual="perspective:normal">
+      <div space="p:small" visual="bg:success text:white rounded:small rotate-y:45">3D</div>
+    </div>
+  </div>
+  <div layout="flex col" space="g:tiny">
+    <span visual="text:neutral-500 text-size:tiny">far</span>
+    <div space="p:medium" visual="perspective:far">
+      <div space="p:small" visual="bg:warning text:black rounded:small rotate-y:45">3D</div>
+    </div>
+  </div>
+</div>`,highlightValue:"perspective:normal"}]},wi={name:"transform-perspective-origin",property:"visual",syntax:'visual="perspective-origin:[value]"',description:"Set perspective vanishing point location",descriptionMs:"Tetapkan lokasi titik lenyap perspektif",category:"visual",supportsArbitrary:!0,values:[{value:"center",css:"perspective-origin: center;",description:"Center origin",descriptionMs:"Asal tengah"},{value:"top",css:"perspective-origin: top;",description:"Top origin",descriptionMs:"Asal atas"},{value:"bottom",css:"perspective-origin: bottom;",description:"Bottom origin",descriptionMs:"Asal bawah"},{value:"left",css:"perspective-origin: left;",description:"Left origin",descriptionMs:"Asal kiri"},{value:"right",css:"perspective-origin: right;",description:"Right origin",descriptionMs:"Asal kanan"},{value:"top-left",css:"perspective-origin: top left;",description:"Top left",descriptionMs:"Atas kiri"},{value:"top-right",css:"perspective-origin: top right;",description:"Top right",descriptionMs:"Atas kanan"},{value:"bottom-left",css:"perspective-origin: bottom left;",description:"Bottom left",descriptionMs:"Bawah kiri"},{value:"bottom-right",css:"perspective-origin: bottom right;",description:"Bottom right",descriptionMs:"Bawah kanan"}],examples:[{code:'<div visual="perspective:normal perspective-origin:top">Top origin</div>',description:"Top vanishing point"}],preview:[{title:"Perspective Origin",titleMs:"Asal Perspektif",description:"Set vanishing point location for 3D transforms",descriptionMs:"Tetapkan lokasi titik lenyap untuk transformasi 3D",html:`<div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div layout="flex col" space="g:tiny">
+    <span visual="text:neutral-500 text-size:tiny">left</span>
+    <div space="p:medium" visual="perspective:normal perspective-origin:left">
+      <div space="p:small" visual="bg:primary text:white rounded:small rotate-y:30">3D</div>
+    </div>
+  </div>
+  <div layout="flex col" space="g:tiny">
+    <span visual="text:neutral-500 text-size:tiny">center</span>
+    <div space="p:medium" visual="perspective:normal perspective-origin:center">
+      <div space="p:small" visual="bg:success text:white rounded:small rotate-y:30">3D</div>
+    </div>
+  </div>
+  <div layout="flex col" space="g:tiny">
+    <span visual="text:neutral-500 text-size:tiny">right</span>
+    <div space="p:medium" visual="perspective:normal perspective-origin:right">
+      <div space="p:small" visual="bg:warning text:black rounded:small rotate-y:30">3D</div>
+    </div>
+  </div>
+</div>`,highlightValue:"perspective-origin:center"}]},Mi={name:"transform-rotate-3d",property:"visual",syntax:'visual="rotate-x:[degrees]" or visual="rotate-y:[degrees]" or visual="rotate-z:[degrees]"',description:"Rotate element in 3D space along X, Y, or Z axis",descriptionMs:"Putar elemen dalam ruang 3D sepanjang paksi X, Y, atau Z",category:"visual",supportsArbitrary:!0,dynamic:!0,values:[{value:"0",css:"transform: rotateX(0deg);",description:"No rotation",descriptionMs:"Tiada putaran"},{value:"45",css:"transform: rotateX(45deg);",description:"45\xB0 rotation",descriptionMs:"Putaran 45\xB0"},{value:"90",css:"transform: rotateX(90deg);",description:"90\xB0 rotation",descriptionMs:"Putaran 90\xB0"},{value:"180",css:"transform: rotateX(180deg);",description:"180\xB0 rotation",descriptionMs:"Putaran 180\xB0"}],examples:[{code:'<div visual="perspective:normal"><div visual="rotate-x:45">Tilted forward</div></div>',description:"X-axis rotation"},{code:'<div visual="perspective:normal"><div visual="rotate-y:45">Turned sideways</div></div>',description:"Y-axis rotation"},{code:'<div visual="rotate-z:45">Spun flat</div>',description:"Z-axis rotation (same as rotate)"}],preview:[{title:"3D Rotation",titleMs:"Putaran 3D",description:"Rotate elements along X, Y, or Z axis in 3D space",descriptionMs:"Putar elemen sepanjang paksi X, Y, atau Z dalam ruang 3D",html:`<div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div layout="flex col" space="g:tiny">
+    <span visual="text:neutral-500 text-size:tiny">rotate-x:45</span>
+    <div space="p:medium" visual="perspective:normal">
+      <div space="p:small" visual="bg:primary text:white rounded:small rotate-x:45">X</div>
+    </div>
+  </div>
+  <div layout="flex col" space="g:tiny">
+    <span visual="text:neutral-500 text-size:tiny">rotate-y:45</span>
+    <div space="p:medium" visual="perspective:normal">
+      <div space="p:small" visual="bg:success text:white rounded:small rotate-y:45">Y</div>
+    </div>
+  </div>
+  <div layout="flex col" space="g:tiny">
+    <span visual="text:neutral-500 text-size:tiny">rotate-z:45</span>
+    <div space="p:medium" visual="perspective:normal">
+      <div space="p:small" visual="bg:warning text:black rounded:small rotate-z:45">Z</div>
+    </div>
+  </div>
+</div>`,highlightValue:"rotate-y:45"}]},Si={name:"transform-translate-z",property:"visual",syntax:'visual="translate-z:[value]"',description:"Translate element along Z axis (depth) in 3D space",descriptionMs:"Alihkan elemen sepanjang paksi Z (kedalaman) dalam ruang 3D",category:"visual",supportsArbitrary:!0,dynamic:!0,values:[{value:"0",css:"transform: translateZ(0);",description:"No Z translation",descriptionMs:"Tiada alihan Z"},{value:"near",css:"transform: translateZ(50px);",description:"Move near (forward)",descriptionMs:"Alih dekat (ke hadapan)"},{value:"far",css:"transform: translateZ(-50px);",description:"Move far (backward)",descriptionMs:"Alih jauh (ke belakang)"}],examples:[{code:'<div visual="perspective:normal"><div visual="translate-z:near">Closer</div></div>',description:"Move forward in 3D"}],preview:[{title:"Translate Z (3D Depth)",titleMs:"Alih Z (Kedalaman 3D)",description:"Move elements forward or backward in 3D space",descriptionMs:"Alihkan elemen ke hadapan atau belakang dalam ruang 3D",html:`<div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div layout="flex col" space="g:tiny">
+    <span visual="text:neutral-500 text-size:tiny">translate-z:far</span>
+    <div space="p:medium" visual="perspective:near">
+      <div space="p:small" visual="bg:primary text:white rounded:small translate-z:far">far</div>
+    </div>
+  </div>
+  <div layout="flex col" space="g:tiny">
+    <span visual="text:neutral-500 text-size:tiny">translate-z:0</span>
+    <div space="p:medium" visual="perspective:near">
+      <div space="p:small" visual="bg:success text:white rounded:small translate-z:0">0</div>
+    </div>
+  </div>
+  <div layout="flex col" space="g:tiny">
+    <span visual="text:neutral-500 text-size:tiny">translate-z:near</span>
+    <div space="p:medium" visual="perspective:near">
+      <div space="p:small" visual="bg:warning text:black rounded:small translate-z:near">near</div>
+    </div>
+  </div>
+</div>`,highlightValue:"translate-z:near"}]},Ai={name:"transform-style",property:"visual",syntax:'visual="transform-style:[value]"',description:"Preserve 3D space for nested transformed elements",descriptionMs:"Kekalkan ruang 3D untuk elemen transformasi bersarang",category:"visual",values:[{value:"flat",css:"transform-style: flat;",description:"Flatten 3D children",descriptionMs:"Ratakan anak 3D"},{value:"preserve-3d",css:"transform-style: preserve-3d;",description:"Preserve 3D depth",descriptionMs:"Kekalkan kedalaman 3D"}],examples:[{code:'<div visual="transform-style:preserve-3d">Nested 3D transforms preserved</div>',description:"Preserve 3D"}],preview:[{title:"Transform Style",titleMs:"Gaya Transformasi",description:"Flat or preserve 3D for nested transforms",descriptionMs:"Rata atau kekalkan 3D untuk transformasi bersarang",html:`<div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div layout="flex col" space="g:tiny">
+    <span visual="text:neutral-500 text-size:tiny">flat</span>
+    <div space="p:medium" visual="perspective:normal transform-style:flat rotate-x:20">
+      <div space="p:small" visual="bg:primary text:white rounded:small rotate-y:45">flat</div>
+    </div>
+  </div>
+  <div layout="flex col" space="g:tiny">
+    <span visual="text:neutral-500 text-size:tiny">preserve-3d</span>
+    <div space="p:medium" visual="perspective:normal transform-style:preserve-3d rotate-x:20">
+      <div space="p:small" visual="bg:success text:white rounded:small rotate-y:45">3D</div>
+    </div>
+  </div>
+</div>`,highlightValue:"transform-style:preserve-3d"}]},Fi={name:"transform-backface",property:"visual",syntax:'visual="backface:[value]"',description:"Control visibility of element back side when rotated in 3D",descriptionMs:"Kawal keterlihatan bahagian belakang elemen apabila diputar dalam 3D",category:"visual",values:[{value:"visible",css:"backface-visibility: visible;",description:"Backface visible",descriptionMs:"Belakang kelihatan"},{value:"hidden",css:"backface-visibility: hidden;",description:"Backface hidden",descriptionMs:"Belakang tersembunyi"}],examples:[{code:'<div visual="backface:hidden rotate-y:180">Hidden when flipped</div>',description:"Hide backface for card flip"}],preview:[{title:"Backface Visibility",titleMs:"Keterlihatan Belakang",description:"Show or hide backside when rotated 180\xB0",descriptionMs:"Tunjukkan atau sembunyikan bahagian belakang apabila diputar 180\xB0",html:`<div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div layout="flex col" space="g:tiny">
+    <span visual="text:neutral-500 text-size:tiny">visible + rotate-y:180</span>
+    <div space="p:medium" visual="perspective:normal">
+      <div space="p:small" visual="bg:primary text:white rounded:small backface:visible rotate-y:180">\u{1F440}</div>
+    </div>
+  </div>
+  <div layout="flex col" space="g:tiny">
+    <span visual="text:neutral-500 text-size:tiny">hidden + rotate-y:180</span>
+    <div space="p:medium" visual="perspective:normal">
+      <div space="p:small" visual="bg:danger text:white rounded:small backface:hidden rotate-y:180">\u{1F648}</div>
+    </div>
+  </div>
+</div>`,highlightValue:"backface:hidden"}]},Vi={name:"mask",property:"visual",syntax:'visual="mask:[value]"',description:"Apply mask to element",descriptionMs:"Terapkan topeng pada elemen",category:"visual",supportsArbitrary:!0,values:[{value:"none",css:"mask-image: none;",description:"No mask",descriptionMs:"Tiada topeng"},{value:"fade-y",css:"mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);",description:"Vertical fade",descriptionMs:"Pudar menegak"},{value:"fade-x",css:"mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);",description:"Horizontal fade",descriptionMs:"Pudar mendatar"}],examples:[{code:'<div visual="mask:fade-y">Faded edges</div>',description:"Vertical fade mask"}],preview:[{title:"Mask",titleMs:"Topeng",description:"Apply gradient mask to edges",descriptionMs:"Terapkan topeng kecerunan pada tepi",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:medium" visual="bg:primary text:white rounded:small mask:none">none</div>
+  <div space="p:medium" visual="bg:primary text:white rounded:small mask:fade-y">fade-y</div>
+  <div space="p:medium" visual="bg:primary text:white rounded:small mask:fade-x">fade-x</div>
+</div>`,highlightValue:"mask:fade-y"}]},Ti={name:"state-prefixes",property:"visual",syntax:'visual="hover:... focus:... active:..."',description:"Apply styles on specific states",descriptionMs:"Terapkan gaya pada keadaan tertentu",category:"visual",values:[{value:"hover:",css:":hover",description:"On hover",descriptionMs:"Pada hover"},{value:"focus:",css:":focus",description:"On focus",descriptionMs:"Pada fokus"},{value:"active:",css:":active",description:"On active",descriptionMs:"Pada aktif"},{value:"disabled:",css:":disabled",description:"When disabled",descriptionMs:"Apabila dilumpuhkan"},{value:"visited:",css:":visited",description:"When visited",descriptionMs:"Apabila dilawati"},{value:"first:",css:":first-child",description:"First child",descriptionMs:"Anak pertama"},{value:"last:",css:":last-child",description:"Last child",descriptionMs:"Anak terakhir"},{value:"odd:",css:":nth-child(odd)",description:"Odd children",descriptionMs:"Anak ganjil"},{value:"even:",css:":nth-child(even)",description:"Even children",descriptionMs:"Anak genap"}],examples:[{code:'<button visual="hover:bg:primary focus:outline:primary">Interactive button</button>',description:"State prefixes"}],preview:[{title:"State Prefixes",titleMs:"Awalan Keadaan",description:"Apply styles on hover, focus, etc.",descriptionMs:"Terapkan gaya pada hover, fokus, dll.",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <button space="p:small" visual="bg:primary text:white rounded:small transition:all hover:scale:110">hover:scale:110</button>
+  <button space="p:small" visual="bg:neutral-500 text:white rounded:small transition:all hover:bg:primary">hover:bg:primary</button>
+</div>`,highlightValue:"hover:scale:110"}]},Ce={perspective:ki,perspectiveOrigin:wi,rotate3d:Mi,translateZ:Si,transformStyle:Ai,backfaceVisibility:Fi,mask:Vi,statePrefixes:Ti},De=Ce;var Ci={name:"filter-brightness",property:"visual",syntax:'visual="brightness:[value]"',description:"Adjust brightness",descriptionMs:"Laraskan kecerahan",category:"visual",supportsArbitrary:!0,values:[{value:"dim",css:"filter: brightness(0.5);",description:"50% brightness",descriptionMs:"50% kecerahan"},{value:"dark",css:"filter: brightness(0.75);",description:"75% brightness",descriptionMs:"75% kecerahan"},{value:"normal",css:"filter: brightness(1);",description:"Normal brightness",descriptionMs:"Kecerahan normal"},{value:"bright",css:"filter: brightness(1.25);",description:"125% brightness",descriptionMs:"125% kecerahan"},{value:"vivid",css:"filter: brightness(1.5);",description:"150% brightness",descriptionMs:"150% kecerahan"}],examples:[{code:'<img visual="brightness:bright">Brighter image</img>',description:"Increase brightness"}],preview:[{title:"Brightness Filter",titleMs:"Penapis Kecerahan",description:"Adjust element brightness",descriptionMs:"Laraskan kecerahan elemen",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small brightness:dim">dim</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">normal</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small brightness:vivid">vivid</div>
+</div>`,highlightValue:"brightness:bright"}]},Di={name:"filter-contrast",property:"visual",syntax:'visual="contrast:[value]"',description:"Adjust contrast",descriptionMs:"Laraskan kontras",category:"visual",supportsArbitrary:!0,values:[{value:"low",css:"filter: contrast(0.5);",description:"Low contrast",descriptionMs:"Kontras rendah"},{value:"reduced",css:"filter: contrast(0.75);",description:"Reduced contrast",descriptionMs:"Kontras dikurangkan"},{value:"normal",css:"filter: contrast(1);",description:"Normal contrast",descriptionMs:"Kontras normal"},{value:"high",css:"filter: contrast(1.25);",description:"High contrast",descriptionMs:"Kontras tinggi"},{value:"max",css:"filter: contrast(1.5);",description:"Maximum contrast",descriptionMs:"Kontras maksimum"}],examples:[{code:'<img visual="contrast:high">High contrast</img>',description:"Increase contrast"}],preview:[{title:"Contrast Filter",titleMs:"Penapis Kontras",description:"Adjust element contrast",descriptionMs:"Laraskan kontras elemen",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small contrast:low">low</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">normal</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small contrast:max">high</div>
+</div>`,highlightValue:"contrast:high"}]},zi={name:"filter-grayscale",property:"visual",syntax:'visual="grayscale:[value]"',description:"Apply grayscale filter",descriptionMs:"Terapkan penapis skala kelabu",category:"visual",supportsArbitrary:!0,values:[{value:"none",css:"filter: grayscale(0%);",description:"No grayscale",descriptionMs:"Tiada skala kelabu"},{value:"partial",css:"filter: grayscale(50%);",description:"50% grayscale",descriptionMs:"50% skala kelabu"},{value:"full",css:"filter: grayscale(100%);",description:"Full grayscale",descriptionMs:"Skala kelabu penuh"}],examples:[{code:'<img visual="grayscale:full">Black and white</img>',description:"Full grayscale"}],preview:[{title:"Grayscale Filter",titleMs:"Penapis Skala Kelabu",description:"Convert to grayscale",descriptionMs:"Tukar ke skala kelabu",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small">none</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small grayscale:partial">partial</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small grayscale:full">full</div>
+</div>`,highlightValue:"grayscale:full"}]},$i={name:"filter-hue-rotate",property:"visual",syntax:'visual="hue-rotate:[degrees]"',description:"Rotate hue colors",descriptionMs:"Putar warna rona",category:"visual",supportsArbitrary:!0,dynamic:!0,values:[{value:"0",css:"filter: hue-rotate(0deg);",description:"No rotation",descriptionMs:"Tiada putaran"},{value:"90",css:"filter: hue-rotate(90deg);",description:"90\xB0 rotation",descriptionMs:"Putaran 90\xB0"},{value:"180",css:"filter: hue-rotate(180deg);",description:"180\xB0 rotation",descriptionMs:"Putaran 180\xB0"}],examples:[{code:'<img visual="hue-rotate:90">Shifted hue</img>',description:"Rotate hue 90 degrees"}],preview:[{title:"Hue Rotate Filter",titleMs:"Penapis Putaran Rona",description:"Rotate color hues",descriptionMs:"Putar rona warna",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small">0\xB0</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small hue-rotate:90">90\xB0</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small hue-rotate:180">180\xB0</div>
+</div>`,highlightValue:"hue-rotate:90"}]},ji={name:"filter-invert",property:"visual",syntax:'visual="invert:[value]"',description:"Invert colors",descriptionMs:"Songsangkan warna",category:"visual",supportsArbitrary:!0,values:[{value:"none",css:"filter: invert(0%);",description:"No inversion",descriptionMs:"Tiada penyongsangan"},{value:"partial",css:"filter: invert(50%);",description:"50% inversion",descriptionMs:"50% penyongsangan"},{value:"full",css:"filter: invert(100%);",description:"Full inversion",descriptionMs:"Penyongsangan penuh"}],examples:[{code:'<img visual="invert:full">Inverted colors</img>',description:"Invert all colors"}],preview:[{title:"Invert Filter",titleMs:"Penapis Songsang",description:"Invert element colors",descriptionMs:"Songsangkan warna elemen",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small">none</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small invert:full">full</div>
+</div>`,highlightValue:"invert:full"}]},Bi={name:"filter-saturate",property:"visual",syntax:'visual="saturate:[value]"',description:"Adjust saturation",descriptionMs:"Laraskan ketepuan",category:"visual",supportsArbitrary:!0,values:[{value:"none",css:"filter: saturate(0);",description:"Desaturated",descriptionMs:"Tidak tepu"},{value:"low",css:"filter: saturate(0.5);",description:"Low saturation",descriptionMs:"Ketepuan rendah"},{value:"normal",css:"filter: saturate(1);",description:"Normal saturation",descriptionMs:"Ketepuan normal"},{value:"high",css:"filter: saturate(1.5);",description:"High saturation",descriptionMs:"Ketepuan tinggi"},{value:"vivid",css:"filter: saturate(2);",description:"Very saturated",descriptionMs:"Sangat tepu"}],examples:[{code:'<img visual="saturate:vivid">Vivid colors</img>',description:"Increase saturation"}],preview:[{title:"Saturate Filter",titleMs:"Penapis Ketepuan",description:"Adjust color saturation",descriptionMs:"Laraskan ketepuan warna",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small saturate:none">none</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">normal</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small saturate:vivid">vivid</div>
+</div>`,highlightValue:"saturate:vivid"}]},Ei={name:"filter-sepia",property:"visual",syntax:'visual="sepia:[value]"',description:"Apply sepia filter",descriptionMs:"Terapkan penapis sepia",category:"visual",supportsArbitrary:!0,values:[{value:"none",css:"filter: sepia(0%);",description:"No sepia",descriptionMs:"Tiada sepia"},{value:"partial",css:"filter: sepia(50%);",description:"50% sepia",descriptionMs:"50% sepia"},{value:"full",css:"filter: sepia(100%);",description:"Full sepia",descriptionMs:"Sepia penuh"}],examples:[{code:'<img visual="sepia:full">Vintage look</img>',description:"Full sepia effect"}],preview:[{title:"Sepia Filter",titleMs:"Penapis Sepia",description:"Apply vintage sepia tone",descriptionMs:"Terapkan ton sepia vintaj",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small">none</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small sepia:partial">partial</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small sepia:full">full</div>
+</div>`,highlightValue:"sepia:full"}]},Pi={name:"filter-drop-shadow",property:"visual",syntax:'visual="drop-shadow:[value]"',description:"Add drop shadow",descriptionMs:"Tambah bayang jatuh",category:"visual",supportsArbitrary:!0,values:[{value:"none",css:"filter: drop-shadow(none);",description:"No shadow",descriptionMs:"Tiada bayang"},{value:"tiny",css:"filter: drop-shadow(0 1px 1px rgba(0,0,0,0.05));",description:"Tiny shadow",descriptionMs:"Bayang kecil"},{value:"small",css:"filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));",description:"Small shadow",descriptionMs:"Bayang kecil"},{value:"medium",css:"filter: drop-shadow(0 4px 3px rgba(0,0,0,0.07));",description:"Medium shadow",descriptionMs:"Bayang sederhana"},{value:"big",css:"filter: drop-shadow(0 10px 8px rgba(0,0,0,0.04));",description:"Large shadow",descriptionMs:"Bayang besar"},{value:"giant",css:"filter: drop-shadow(0 20px 13px rgba(0,0,0,0.03));",description:"Giant shadow",descriptionMs:"Bayang gergasi"}],examples:[{code:'<img visual="drop-shadow:medium">Shadow on image</img>',description:"Drop shadow on irregular shapes"}],preview:[{title:"Drop Shadow",titleMs:"Bayang Jatuh",description:"Add shadow to elements",descriptionMs:"Tambah bayang pada elemen",html:`<div layout="flex" space="g:medium p:big" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small drop-shadow:small">small</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small drop-shadow:medium">medium</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small drop-shadow:big">big</div>
+</div>`,highlightValue:"drop-shadow:medium"}]},ze={filterBrightness:Ci,filterContrast:Di,filterGrayscale:zi,filterHueRotate:$i,filterInvert:ji,filterSaturate:Bi,filterSepia:Ei,filterDropShadow:Pi},$e=ze;var Ki={name:"transition-property",property:"visual",syntax:'visual="transition:[value]"',description:"Set transition properties",descriptionMs:"Tetapkan properti peralihan",category:"visual",values:[{value:"none",css:"transition-property: none;",description:"No transition",descriptionMs:"Tiada peralihan"},{value:"all",css:"transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;",description:"All properties",descriptionMs:"Semua properti"},{value:"colors",css:"transition-property: color, background-color, border-color; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;",description:"Color properties",descriptionMs:"Properti warna"},{value:"opacity",css:"transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;",description:"Opacity only",descriptionMs:"Kelegapan sahaja"},{value:"shadow",css:"transition-property: box-shadow; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;",description:"Shadow only",descriptionMs:"Bayang sahaja"},{value:"transform",css:"transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;",description:"Transform only",descriptionMs:"Transformasi sahaja"}],examples:[{code:'<button visual="transition:all hover:bg:primary">Smooth hover</button>',description:"Smooth transition"}],preview:[{title:"Transition",titleMs:"Peralihan",description:"Smooth property changes",descriptionMs:"Perubahan properti yang lancar",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <button space="p:small" visual="bg:primary text:white rounded:small transition:all">transition:all</button>
+</div>`,highlightValue:"transition:all"}]},Ri={name:"transition-duration",property:"visual",syntax:'visual="duration:[value]"',description:"Set transition duration",descriptionMs:"Tetapkan tempoh peralihan",category:"visual",supportsArbitrary:!0,values:[{value:"instant",css:"transition-duration: 75ms;",description:"75ms",descriptionMs:"75ms"},{value:"quick",css:"transition-duration: 100ms;",description:"100ms",descriptionMs:"100ms"},{value:"fast",css:"transition-duration: 150ms;",description:"150ms",descriptionMs:"150ms"},{value:"normal",css:"transition-duration: 200ms;",description:"200ms",descriptionMs:"200ms"},{value:"slow",css:"transition-duration: 300ms;",description:"300ms",descriptionMs:"300ms"},{value:"slower",css:"transition-duration: 500ms;",description:"500ms",descriptionMs:"500ms"},{value:"lazy",css:"transition-duration: 700ms;",description:"700ms",descriptionMs:"700ms"}],examples:[{code:'<div visual="transition:all duration:slow">Slow transition</div>',description:"Slow duration"}],preview:[{title:"Duration",titleMs:"Tempoh",description:"Control transition speed",descriptionMs:"Kawal kelajuan peralihan",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <button space="p:small" visual="bg:primary text:white rounded:small transition:all duration:fast hover:scale:110">fast</button>
+  <button space="p:small" visual="bg:primary text:white rounded:small transition:all duration:slow hover:scale:110">slow</button>
+</div>`,highlightValue:"duration:slow"}]},Ii={name:"transition-timing",property:"visual",syntax:'visual="ease:[value]"',description:"Set transition timing function",descriptionMs:"Tetapkan fungsi masa peralihan",category:"visual",supportsArbitrary:!0,values:[{value:"linear",css:"transition-timing-function: linear;",description:"Linear timing",descriptionMs:"Masa linear"},{value:"in",css:"transition-timing-function: cubic-bezier(0.4, 0, 1, 1);",description:"Ease in",descriptionMs:"Memasuki mudah"},{value:"out",css:"transition-timing-function: cubic-bezier(0, 0, 0.2, 1);",description:"Ease out",descriptionMs:"Keluar mudah"},{value:"in-out",css:"transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);",description:"Ease in-out",descriptionMs:"Masuk-keluar mudah"}],examples:[{code:'<div visual="transition:all ease:out">Ease out effect</div>',description:"Ease out timing"}],preview:[{title:"Timing Function",titleMs:"Fungsi Masa",description:"Control acceleration curve",descriptionMs:"Kawal lengkung pecutan",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <button space="p:small" visual="bg:primary text:white rounded:small transition:all ease:in hover:scale:110">ease:in</button>
+  <button space="p:small" visual="bg:primary text:white rounded:small transition:all ease:out hover:scale:110">ease:out</button>
+  <button space="p:small" visual="bg:primary text:white rounded:small transition:all ease:in-out hover:scale:110">ease:in-out</button>
+</div>`,highlightValue:"ease:out"}]},Li={name:"transition-delay",property:"visual",syntax:'visual="delay:[value]"',description:"Set transition delay",descriptionMs:"Tetapkan kelewatan peralihan",category:"visual",supportsArbitrary:!0,values:[{value:"instant",css:"transition-delay: 75ms;",description:"75ms delay",descriptionMs:"Kelewatan 75ms"},{value:"quick",css:"transition-delay: 100ms;",description:"100ms delay",descriptionMs:"Kelewatan 100ms"},{value:"fast",css:"transition-delay: 150ms;",description:"150ms delay",descriptionMs:"Kelewatan 150ms"},{value:"normal",css:"transition-delay: 200ms;",description:"200ms delay",descriptionMs:"Kelewatan 200ms"},{value:"slow",css:"transition-delay: 300ms;",description:"300ms delay",descriptionMs:"Kelewatan 300ms"}],examples:[{code:'<div visual="transition:all delay:slow">Delayed transition</div>',description:"Delayed start"}],preview:[{title:"Transition Delay",titleMs:"Kelewatan Peralihan",description:"Delay before transition starts",descriptionMs:"Kelewatan sebelum peralihan bermula",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <button space="p:small" visual="bg:primary text:white rounded:small transition:all delay:instant hover:scale:110">instant</button>
+  <button space="p:small" visual="bg:primary text:white rounded:small transition:all delay:slow hover:scale:110">slow</button>
+</div>`,highlightValue:"delay:slow"}]},Ni={name:"animation-builtin",property:"visual",syntax:'visual="animate:[value]"',description:"Apply built-in animations",descriptionMs:"Terapkan animasi terbina dalam",category:"visual",supportsArbitrary:!0,values:[{value:"none",css:"animation: none;",description:"No animation",descriptionMs:"Tiada animasi"},{value:"spin",css:"animation: spin 1s linear infinite;",description:"Spinning",descriptionMs:"Berpusing"},{value:"ping",css:"animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;",description:"Ping effect",descriptionMs:"Kesan ping"},{value:"pulse",css:"animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;",description:"Pulsing",descriptionMs:"Berdenyut"},{value:"bounce",css:"animation: bounce 1s infinite;",description:"Bouncing",descriptionMs:"Melantun"}],examples:[{code:'<div visual="animate:spin">Loading...</div>',description:"Spinning loader"}],preview:[{title:"Built-in Animations",titleMs:"Animasi Terbina Dalam",description:"Ready-to-use animations",descriptionMs:"Animasi sedia guna",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small animate:spin">spin</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small animate:pulse">pulse</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small animate:bounce">bounce</div>
+</div>`,highlightValue:"animate:spin"}]},Gi={name:"animation-duration",property:"visual",syntax:'visual="animation-duration:[value]"',description:"Set animation duration",descriptionMs:"Tetapkan tempoh animasi",category:"visual",supportsArbitrary:!0,values:[{value:"instant",css:"animation-duration: 75ms;",description:"75ms",descriptionMs:"75ms"},{value:"quick",css:"animation-duration: 100ms;",description:"100ms",descriptionMs:"100ms"},{value:"fast",css:"animation-duration: 150ms;",description:"150ms",descriptionMs:"150ms"},{value:"normal",css:"animation-duration: 200ms;",description:"200ms",descriptionMs:"200ms"},{value:"slow",css:"animation-duration: 300ms;",description:"300ms",descriptionMs:"300ms"},{value:"slower",css:"animation-duration: 500ms;",description:"500ms",descriptionMs:"500ms"},{value:"lazy",css:"animation-duration: 700ms;",description:"700ms",descriptionMs:"700ms"}],examples:[{code:'<div visual="animate:spin animation-duration:slow">Slow spin</div>',description:"Slow animation"}],preview:[{title:"Animation Duration",titleMs:"Tempoh Animasi",description:"Control animation speed",descriptionMs:"Kawal kelajuan animasi",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small animate:spin animation-duration:fast">fast</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small animate:spin animation-duration:slow">slow</div>
+</div>`,highlightValue:"animation-duration:slow"}]},Oi={name:"animation-delay",property:"visual",syntax:'visual="animation-delay:[value]"',description:"Set animation delay",descriptionMs:"Tetapkan kelewatan animasi",category:"visual",supportsArbitrary:!0,values:[{value:"instant",css:"animation-delay: 75ms;",description:"75ms delay",descriptionMs:"Kelewatan 75ms"},{value:"quick",css:"animation-delay: 100ms;",description:"100ms delay",descriptionMs:"Kelewatan 100ms"},{value:"fast",css:"animation-delay: 150ms;",description:"150ms delay",descriptionMs:"Kelewatan 150ms"},{value:"normal",css:"animation-delay: 200ms;",description:"200ms delay",descriptionMs:"Kelewatan 200ms"},{value:"slow",css:"animation-delay: 300ms;",description:"300ms delay",descriptionMs:"Kelewatan 300ms"}],examples:[{code:'<div visual="animate:bounce animation-delay:slow">Delayed bounce</div>',description:"Delayed animation"}],preview:[{title:"Animation Delay",titleMs:"Kelewatan Animasi",description:"Delay before animation starts",descriptionMs:"Kelewatan sebelum animasi bermula",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small animate:pulse animation-delay:instant">instant</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small animate:pulse animation-delay:slow">slow</div>
+</div>`,highlightValue:"animation-delay:slow"}]},Ji={name:"animation-iteration",property:"visual",syntax:'visual="animation-iteration:[value]"',description:"Set animation iteration count",descriptionMs:"Tetapkan bilangan ulangan animasi",category:"visual",dynamic:!0,values:[{value:"1",css:"animation-iteration-count: 1;",description:"Once",descriptionMs:"Sekali"},{value:"infinite",css:"animation-iteration-count: infinite;",description:"Forever",descriptionMs:"Selamanya"}],examples:[{code:'<div visual="animate:bounce animation-iteration:1">Bounce once</div>',description:"Single iteration"}],preview:[{title:"Animation Iteration",titleMs:"Ulangan Animasi",description:"Control number of loops",descriptionMs:"Kawal bilangan gelung",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small animate:bounce animation-iteration:1">once</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small animate:bounce animation-iteration:infinite">infinite</div>
+</div>`,highlightValue:"animation-iteration:infinite"}]},Hi={name:"animation-direction",property:"visual",syntax:'visual="animation-direction:[value]"',description:"Set animation direction",descriptionMs:"Tetapkan arah animasi",category:"visual",values:[{value:"normal",css:"animation-direction: normal;",description:"Normal direction",descriptionMs:"Arah normal"},{value:"reverse",css:"animation-direction: reverse;",description:"Reverse direction",descriptionMs:"Arah terbalik"},{value:"alternate",css:"animation-direction: alternate;",description:"Alternate direction",descriptionMs:"Arah berselang"},{value:"alternate-reverse",css:"animation-direction: alternate-reverse;",description:"Alternate reverse",descriptionMs:"Berselang terbalik"}],examples:[{code:'<div visual="animate:bounce animation-direction:alternate">Alternating</div>',description:"Alternate direction"}],preview:[{title:"Animation Direction",titleMs:"Arah Animasi",description:"Control playback direction",descriptionMs:"Kawal arah main balik",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small animate:spin animation-direction:normal">normal</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small animate:spin animation-direction:reverse">reverse</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small animate:spin animation-direction:alternate">alternate</div>
+</div>`,highlightValue:"animation-direction:alternate"}]},Wi={name:"animation-fill",property:"visual",syntax:'visual="animation-fill:[value]"',description:"Set animation fill mode",descriptionMs:"Tetapkan mod pengisian animasi",category:"visual",values:[{value:"none",css:"animation-fill-mode: none;",description:"No fill",descriptionMs:"Tiada pengisian"},{value:"forwards",css:"animation-fill-mode: forwards;",description:"Keep end state",descriptionMs:"Kekalkan keadaan akhir"},{value:"backwards",css:"animation-fill-mode: backwards;",description:"Apply start state",descriptionMs:"Terapkan keadaan mula"},{value:"both",css:"animation-fill-mode: both;",description:"Both directions",descriptionMs:"Kedua-dua arah"}],examples:[{code:'<div visual="animate:bounce animation-fill:forwards">Stays at end</div>',description:"Keep final position"}],preview:[{title:"Animation Fill",titleMs:"Pengisian Animasi",description:'Control state before/after animation. "forwards" keeps the final state, "none" returns to original.',descriptionMs:'Kawal keadaan sebelum/selepas animasi. "forwards" kekalkan keadaan akhir, "none" kembali kepada asal.',html:`<div layout="flex col" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <p visual="text-size:small text:neutral-600 dark:text:neutral-400">Hover to replay animation:</p>
+  <div layout="flex" space="g:medium">
+    <div layout="flex col" space="g:tiny">
+      <span visual="text-size:tiny text:neutral-500">none (returns)</span>
+      <div space="p:small" visual="bg:primary text:white rounded:small animate:bounce animation-iteration:1 animation-fill:none hover:animate:bounce">\u2B06</div>
+    </div>
+    <div layout="flex col" space="g:tiny">
+      <span visual="text-size:tiny text:neutral-500">forwards (stays)</span>
+      <div space="p:small" visual="bg:success text:white rounded:small animate:bounce animation-iteration:1 animation-fill:forwards hover:animate:bounce">\u2B06</div>
+    </div>
+    <div layout="flex col" space="g:tiny">
+      <span visual="text-size:tiny text:neutral-500">both</span>
+      <div space="p:small" visual="bg:warning text:white rounded:small animate:bounce animation-iteration:1 animation-fill:both hover:animate:bounce">\u2B06</div>
+    </div>
+  </div>
+</div>`,highlightValue:"animation-fill:forwards"}]},qi={name:"animation-play",property:"visual",syntax:'visual="animation-play:[value]"',description:"Control animation play state",descriptionMs:"Kawal keadaan main animasi",category:"visual",values:[{value:"running",css:"animation-play-state: running;",description:"Animation running",descriptionMs:"Animasi berjalan"},{value:"paused",css:"animation-play-state: paused;",description:"Animation paused",descriptionMs:"Animasi dijeda"}],examples:[{code:'<div visual="animate:spin hover:animation-play:paused">Pause on hover</div>',description:"Pause on hover"}],preview:[{title:"Animation Play State",titleMs:"Keadaan Main Animasi",description:"Pause or resume animations",descriptionMs:"Jeda atau sambung animasi",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small animate:spin animation-play:running">running</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small animate:spin animation-play:paused">paused</div>
+</div>`,highlightValue:"animation-play:paused"}]},je={transitionProperty:Ki,transitionDuration:Ri,transitionTiming:Ii,transitionDelay:Li,animation:Ni,animationDuration:Gi,animationDelay:Oi,animationIteration:Ji,animationDirection:Hi,animationFill:Wi,animationPlay:qi},Be=je;var Ui={name:"transform-scale",property:"visual",syntax:'visual="scale:[value]"',description:"Scale element",descriptionMs:"Skala elemen",category:"visual",supportsArbitrary:!0,dynamic:!0,values:[{value:"0",css:"transform: scale(0);",description:"Scale to 0",descriptionMs:"Skala ke 0"},{value:"50",css:"transform: scale(0.5);",description:"Scale to 50%",descriptionMs:"Skala ke 50%"},{value:"75",css:"transform: scale(0.75);",description:"Scale to 75%",descriptionMs:"Skala ke 75%"},{value:"100",css:"transform: scale(1);",description:"Normal scale",descriptionMs:"Skala normal"},{value:"110",css:"transform: scale(1.1);",description:"Scale to 110%",descriptionMs:"Skala ke 110%"},{value:"125",css:"transform: scale(1.25);",description:"Scale to 125%",descriptionMs:"Skala ke 125%"},{value:"150",css:"transform: scale(1.5);",description:"Scale to 150%",descriptionMs:"Skala ke 150%"}],examples:[{code:'<div visual="transition:transform hover:scale:110">Hover to grow</div>',description:"Scale on hover"}],preview:[{title:"Scale Transform",titleMs:"Transformasi Skala",description:"Scale elements up or down",descriptionMs:"Skala elemen ke atas atau ke bawah",html:`<div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small scale:75">75%</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small scale:100">100%</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small scale:125">125%</div>
+</div>`,highlightValue:"scale:75"}]},Xi={name:"transform-rotate",property:"visual",syntax:'visual="rotate:[degrees]"',description:"Rotate element",descriptionMs:"Putar elemen",category:"visual",supportsArbitrary:!0,dynamic:!0,values:[{value:"0",css:"transform: rotate(0deg);",description:"No rotation",descriptionMs:"Tiada putaran"},{value:"45",css:"transform: rotate(45deg);",description:"45\xB0 rotation",descriptionMs:"Putaran 45\xB0"},{value:"90",css:"transform: rotate(90deg);",description:"90\xB0 rotation",descriptionMs:"Putaran 90\xB0"},{value:"180",css:"transform: rotate(180deg);",description:"180\xB0 rotation",descriptionMs:"Putaran 180\xB0"}],examples:[{code:'<div visual="rotate:45">Rotated 45 degrees</div>',description:"45 degree rotation"}],preview:[{title:"Rotate Transform",titleMs:"Transformasi Putaran",description:"Rotate elements by degrees",descriptionMs:"Putar elemen mengikut darjah",html:`<div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small rotate:0">0\xB0</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small rotate:45">45\xB0</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small rotate:90">90\xB0</div>
+</div>`,highlightValue:"rotate:45"}]},Yi={name:"transform-translate",property:"visual",syntax:'visual="translate-x:[value]" or visual="translate-y:[value]" or visual="translate-z:[value]"',description:"Translate element position along X, Y, or Z axis",descriptionMs:"Alihkan kedudukan elemen sepanjang paksi X, Y, atau Z",category:"visual",usesScale:"spacing",supportsArbitrary:!0,dynamic:!0,values:[{value:"0",css:"transform: translateX(0);",description:"No translation",descriptionMs:"Tiada alihan"},{value:"tiny",css:"transform: translateX(var(--sp-tiny));",description:"Tiny offset",descriptionMs:"Alihan kecil"},{value:"small",css:"transform: translateX(var(--sp-small));",description:"Small offset",descriptionMs:"Alihan kecil"},{value:"medium",css:"transform: translateX(var(--sp-medium));",description:"Medium offset",descriptionMs:"Alihan sederhana"},{value:"big",css:"transform: translateX(var(--sp-big));",description:"Big offset",descriptionMs:"Alihan besar"},{value:"full",css:"transform: translateX(100%);",description:"Full width/height",descriptionMs:"Lebar/ketinggian penuh"},{value:"1/2",css:"transform: translateX(50%);",description:"Half width/height",descriptionMs:"Separuh lebar/ketinggian"},{value:"-full",css:"transform: translateX(-100%);",description:"Negative full",descriptionMs:"Negatif penuh"},{value:"-1/2",css:"transform: translateX(-50%);",description:"Negative half",descriptionMs:"Negatif separuh"}],examples:[{code:'<div visual="translate-x:medium">Moved right</div>',description:"Translate X"},{code:'<div visual="translate-y:small">Moved down</div>',description:"Translate Y"},{code:'<div visual="translate-z:[50px]">Moved forward in 3D</div>',description:"Translate Z (3D)"}],preview:[{title:"Translate Transform",titleMs:"Transformasi Alih",description:"Move elements along X, Y, or Z axis",descriptionMs:"Alihkan elemen sepanjang paksi X, Y, atau Z",html:`<div layout="flex col" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div layout="flex" space="g:small">
+    <span visual="text:neutral-500 text-size:small">X axis:</span>
+    <div space="p:small" visual="bg:primary text:white rounded:small translate-x:0">0</div>
+    <div space="p:small" visual="bg:primary text:white rounded:small translate-x:small">small</div>
+    <div space="p:small" visual="bg:primary text:white rounded:small translate-x:medium">medium</div>
+  </div>
+  <div layout="flex" space="g:small">
+    <span visual="text:neutral-500 text-size:small">Y axis:</span>
+    <div space="p:small" visual="bg:success text:white rounded:small translate-y:0">0</div>
+    <div space="p:small" visual="bg:success text:white rounded:small translate-y:small">small</div>
+    <div space="p:small" visual="bg:success text:white rounded:small translate-y:medium">medium</div>
+  </div>
+</div>`,highlightValue:"translate-x:medium"}]},_i={name:"transform-skew",property:"visual",syntax:'visual="skew-x:[degrees]" or visual="skew-y:[degrees]"',description:"Skew element",descriptionMs:"Condongkan elemen",category:"visual",supportsArbitrary:!0,dynamic:!0,values:[{value:"0",css:"transform: skewX(0deg);",description:"No skew",descriptionMs:"Tiada condong"},{value:"3",css:"transform: skewX(3deg);",description:"3\xB0 skew",descriptionMs:"Condong 3\xB0"},{value:"6",css:"transform: skewX(6deg);",description:"6\xB0 skew",descriptionMs:"Condong 6\xB0"},{value:"12",css:"transform: skewX(12deg);",description:"12\xB0 skew",descriptionMs:"Condong 12\xB0"}],examples:[{code:'<div visual="skew-x:6">Skewed element</div>',description:"Skew 6 degrees"}],preview:[{title:"Skew Transform",titleMs:"Transformasi Condong",description:"Skew elements along axes",descriptionMs:"Condongkan elemen sepanjang paksi",html:`<div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small skew-x:0">0\xB0</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small skew-x:6">6\xB0</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small skew-x:12">12\xB0</div>
+</div>`,highlightValue:"skew-x:6"}]},Zi={name:"transform-origin",property:"visual",syntax:'visual="origin:[value]"',description:"Set transform origin point",descriptionMs:"Tetapkan titik asal transformasi",category:"visual",supportsArbitrary:!0,values:[{value:"center",css:"transform-origin: center;",description:"Center origin",descriptionMs:"Asal tengah"},{value:"top",css:"transform-origin: top;",description:"Top origin",descriptionMs:"Asal atas"},{value:"top-right",css:"transform-origin: top right;",description:"Top right",descriptionMs:"Atas kanan"},{value:"right",css:"transform-origin: right;",description:"Right origin",descriptionMs:"Asal kanan"},{value:"bottom-right",css:"transform-origin: bottom right;",description:"Bottom right",descriptionMs:"Bawah kanan"},{value:"bottom",css:"transform-origin: bottom;",description:"Bottom origin",descriptionMs:"Asal bawah"},{value:"bottom-left",css:"transform-origin: bottom left;",description:"Bottom left",descriptionMs:"Bawah kiri"},{value:"left",css:"transform-origin: left;",description:"Left origin",descriptionMs:"Asal kiri"},{value:"top-left",css:"transform-origin: top left;",description:"Top left",descriptionMs:"Atas kiri"}],examples:[{code:'<div visual="rotate:45 origin:top-left">Rotate from corner</div>',description:"Rotate from corner"}],preview:[{title:"Transform Origin",titleMs:"Asal Transformasi",description:"Set the pivot point for transforms",descriptionMs:"Tetapkan titik pangsi untuk transformasi",html:`<div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small rotate:45 origin:center">center</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small rotate:45 origin:top-left">top-left</div>
+</div>`,highlightValue:"origin:center"}]},Ee={transformScale:Ui,transformRotate:Xi,transformTranslate:Yi,transformSkew:_i,transformOrigin:Zi},Pe=Ee;var Qi={name:"border",property:"visual",syntax:'visual="border:[color]" | visual="border-{t|b|l|r|x|y}:[color]"',description:"Set border color for all sides or specific sides",descriptionMs:"Tetapkan warna sempadan untuk semua sisi atau sisi tertentu",category:"visual",usesScale:"colors",supportsArbitrary:!0,values:[{value:"primary",css:"border-color: var(--c-primary); border-style: solid;",description:"Primary color border",descriptionMs:"Sempadan warna utama"},{value:"gray-300",css:"border-color: var(--c-gray-300); border-style: solid;",description:"Light gray border",descriptionMs:"Sempadan kelabu cerah"},{value:"danger",css:"border-color: var(--c-danger); border-style: solid;",description:"Danger/error border",descriptionMs:"Sempadan bahaya/ralat"}],examples:[{code:'<div visual="border:primary border-w:thin">Primary border</div>',description:"Border on all sides"},{code:'<div visual="border-t:primary border-t-w:regular">Top only</div>',description:"Top border only"},{code:'<div visual="border-b:gray-300 border-b-w:thin">Bottom only</div>',description:"Bottom border only"},{code:'<div visual="border-x:primary border-x-w:regular">Left & right</div>',description:"Horizontal borders"},{code:'<div visual="border-y:gray-300 border-y-w:thin">Top & bottom</div>',description:"Vertical borders"}],preview:[{title:"Border Colors",titleMs:"Warna Sempadan",description:"Apply border with color on all sides",descriptionMs:"Terapkan sempadan dengan warna pada semua sisi",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:medium" visual="border:primary border-w:regular rounded:small">primary</div>
+  <div space="p:medium" visual="border:danger border-w:regular rounded:small">danger</div>
+  <div space="p:medium" visual="border:neutral-400 border-w:regular rounded:small">neutral</div>
+</div>`,highlightValue:"border:primary"},{title:"Directional Borders",titleMs:"Sempadan Arah",description:"Apply borders to specific sides",descriptionMs:"Terapkan sempadan pada sisi tertentu",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:medium" visual="border-t:primary border-t-w:regular bg:white dark:bg:neutral-800 rounded:small">top</div>
+  <div space="p:medium" visual="border-b:primary border-b-w:regular bg:white dark:bg:neutral-800 rounded:small">bottom</div>
+  <div space="p:medium" visual="border-l:primary border-l-w:regular bg:white dark:bg:neutral-800 rounded:small">left</div>
+</div>`,highlightValue:"border-t:primary"}]},et={name:"border-width",property:"visual",syntax:'visual="border-w:[value]" | visual="border-{t|b|l|r|x|y}-w:[value]"',description:"Set border width for all sides or specific sides",descriptionMs:"Tetapkan lebar sempadan untuk semua sisi atau sisi tertentu",category:"visual",usesScale:"spacing",supportsArbitrary:!0,values:[{value:"none",css:"border-width: var(--s-none);",description:"No border (0px)",descriptionMs:"Tiada sempadan (0px)"},{value:"thin",css:"border-width: var(--s-thin);",description:"Thin border (1px)",descriptionMs:"Sempadan nipis (1px)"},{value:"regular",css:"border-width: var(--s-regular);",description:"Standard border (2px)",descriptionMs:"Sempadan standard (2px)"},{value:"thick",css:"border-width: var(--s-thick);",description:"Thick border (3px)",descriptionMs:"Sempadan tebal (3px)"}],examples:[{code:'<div visual="border:gray-300 border-w:thin">Thin 1px border</div>',description:"Thin border (1px)"},{code:'<div visual="border:gray-300 border-w:regular">Standard 2px border</div>',description:"Regular border (2px)"},{code:'<div visual="border:gray-300 border-w:thick">Thick 3px border</div>',description:"Thick border (3px)"},{code:'<div visual="border-b:primary border-b-w:regular">Bottom border only</div>',description:"Bottom border width"},{code:'<div visual="border-x:primary border-x-w:thin">Horizontal borders</div>',description:"Horizontal border width"}],preview:[{title:"Border Widths",titleMs:"Lebar Sempadan",description:"Different border width options",descriptionMs:"Pilihan lebar sempadan berbeza",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:medium" visual="border:neutral-500 border-w:thin rounded:small bg:white dark:bg:neutral-800">thin</div>
+  <div space="p:medium" visual="border:neutral-500 border-w:regular rounded:small bg:white dark:bg:neutral-800">regular</div>
+  <div space="p:medium" visual="border:neutral-500 border-w:thick rounded:small bg:white dark:bg:neutral-800">thick</div>
+</div>`,highlightValue:"border-w:regular"}]},at={name:"border-style",property:"visual",syntax:'visual="border-style:[value]"',description:"Set border style",descriptionMs:"Tetapkan gaya sempadan",category:"visual",values:[{value:"solid",css:"border-style: solid;",description:"Solid border",descriptionMs:"Sempadan pepejal"},{value:"dashed",css:"border-style: dashed;",description:"Dashed border",descriptionMs:"Sempadan putus-putus"},{value:"dotted",css:"border-style: dotted;",description:"Dotted border",descriptionMs:"Sempadan bertitik"},{value:"double",css:"border-style: double;",description:"Double border",descriptionMs:"Sempadan berganda"},{value:"none",css:"border-style: none;",description:"No border",descriptionMs:"Tiada sempadan"}],examples:[{code:'<div visual="border:gray-300 border-style:dashed">Dashed border</div>',description:"Dashed border"}],preview:[{title:"Border Styles",titleMs:"Gaya Sempadan",description:"Different border style options",descriptionMs:"Pilihan gaya sempadan berbeza",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:medium" visual="border:neutral-500 border-w:regular border-style:solid rounded:small bg:white dark:bg:neutral-800">solid</div>
+  <div space="p:medium" visual="border:neutral-500 border-w:regular border-style:dashed rounded:small bg:white dark:bg:neutral-800">dashed</div>
+  <div space="p:medium" visual="border:neutral-500 border-w:regular border-style:dotted rounded:small bg:white dark:bg:neutral-800">dotted</div>
+</div>`,highlightValue:"border-style:dashed"}]},it={name:"outline",property:"visual",syntax:'visual="outline:[color]"',description:"Set outline color",descriptionMs:"Tetapkan warna garis luar",category:"visual",usesScale:"colors",supportsArbitrary:!0,values:[],examples:[{code:'<button visual="focus:outline:primary">Focus outline</button>',description:"Focus outline"}],preview:[{title:"Outline",titleMs:"Garis Luar",description:"Outline does not affect layout",descriptionMs:"Garis luar tidak mempengaruhi susun atur",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <button space="p:small" visual="outline:primary bg:white dark:bg:neutral-800 rounded:small">outline:primary</button>
+</div>`,highlightValue:"outline:primary"}]},tt={name:"ring",property:"visual",syntax:'visual="ring:[size]"',description:"Add focus ring around element using box-shadow",descriptionMs:"Tambah cincin fokus pada elemen menggunakan box-shadow",category:"visual",usesScale:"ring",supportsArbitrary:!0,values:[{value:"none",css:"box-shadow: 0 0 0 0 transparent;",description:"No ring",descriptionMs:"Tiada cincin"},{value:"thin",css:"box-shadow: 0 0 0 1px var(--ring-color);",description:"Thin ring (1px)",descriptionMs:"Cincin nipis (1px)"},{value:"regular",css:"box-shadow: 0 0 0 2px var(--ring-color);",description:"Regular ring (2px)",descriptionMs:"Cincin biasa (2px)"},{value:"small",css:"box-shadow: 0 0 0 4px var(--ring-color);",description:"Small ring (4px)",descriptionMs:"Cincin kecil (4px)"},{value:"medium",css:"box-shadow: 0 0 0 6px var(--ring-color);",description:"Medium ring (6px)",descriptionMs:"Cincin sederhana (6px)"},{value:"big",css:"box-shadow: 0 0 0 8px var(--ring-color);",description:"Big ring (8px)",descriptionMs:"Cincin besar (8px)"}],examples:[{code:'<button visual="focus-visible:ring:small ring-color:primary">Focus me</button>',description:"Focus ring on keyboard focus"},{code:'<input visual="focus:ring:regular ring-color:blue-500">',description:"Input with focus ring"}],preview:[{title:"Focus Ring",titleMs:"Cincin Fokus",description:"Ring appears on keyboard focus (try Tab key)",descriptionMs:"Cincin muncul pada fokus papan kekunci (cuba kekunci Tab)",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <button space="p:small p-x:medium" visual="bg:primary text:white rounded:small focus-visible:ring:small ring-color:blue-300">Tab to me</button>
+  <button space="p:small p-x:medium" visual="bg:white dark:bg:neutral-800 border:neutral-300 border-w:thin rounded:small focus-visible:ring:small ring-color:primary">Or me</button>
+</div>`,highlightValue:"focus-visible:ring:small"}]},st={name:"ring-color",property:"visual",syntax:'visual="ring-color:[color]"',description:"Set ring color",descriptionMs:"Tetapkan warna cincin",category:"visual",usesScale:"colors",supportsArbitrary:!0,values:[{value:"primary",css:"--ring-color: var(--c-primary);",description:"Primary ring color",descriptionMs:"Warna cincin utama"},{value:"blue-500",css:"--ring-color: var(--c-blue-500);",description:"Blue ring color",descriptionMs:"Warna cincin biru"}],examples:[{code:'<button visual="ring:small ring-color:primary">Colored ring</button>',description:"Ring with custom color"}]},rt={name:"ring-offset",property:"visual",syntax:'visual="ring-offset:[size]"',description:"Add gap between ring and element",descriptionMs:"Tambah ruang antara cincin dan elemen",category:"visual",supportsArbitrary:!0,values:[{value:"0",css:"--ring-offset: 0px;",description:"No offset",descriptionMs:"Tiada ruang"},{value:"2",css:"--ring-offset: 2px;",description:"2px offset",descriptionMs:"Ruang 2px"},{value:"4",css:"--ring-offset: 4px;",description:"4px offset",descriptionMs:"Ruang 4px"}],examples:[{code:'<button visual="ring:small ring-offset:2 ring-color:primary">With offset</button>',description:"Ring with offset"}]},Ke={borderColor:Qi,borderWidth:et,borderStyle:at,outlineColor:it,ring:tt,ringColor:st,ringOffset:rt},Re=Ke;var nt={name:"divide",property:"visual",syntax:'visual="divide:[color]" | visual="divide-{x|y}:[color]" | visual="divide-{x|y}:reverse"',description:"Add borders between child elements",descriptionMs:"Tambah sempadan antara elemen anak",category:"visual",usesScale:"colors",supportsArbitrary:!0,values:[{value:"primary",css:"border-color: var(--c-primary); border-style: solid;",description:"Primary color divider",descriptionMs:"Pemisah warna utama"},{value:"gray-300",css:"border-color: var(--c-gray-300); border-style: solid;",description:"Light gray divider",descriptionMs:"Pemisah kelabu cerah"},{value:"danger",css:"border-color: var(--c-danger); border-style: solid;",description:"Danger/error divider",descriptionMs:"Pemisah bahaya/ralat"}],examples:[{code:'<div visual="divide:primary divide-w:thin">',description:"Divide with primary color"},{code:'<div visual="divide-y:gray-300 divide-y-w:regular">',description:"Vertical dividers only"},{code:'<div visual="divide-x:danger divide-x-w:thin">',description:"Horizontal dividers only"},{code:'<div layout="flex flex-row-reverse" visual="divide-x:primary divide-x-w:thin divide-x:reverse">',description:"Reverse dividers for flex-reverse"}],preview:[{title:"Divide Colors",titleMs:"Warna Pemisah",description:"Add dividers between flex/grid items",descriptionMs:"Tambah pemisah antara item flex/grid",html:`<div layout="flex col" space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium divide-y-w:thin divide:primary">
+  <div space="p:medium" visual="bg:white dark:bg:neutral-800">Item 1</div>
+  <div space="p:medium" visual="bg:white dark:bg:neutral-800">Item 2</div>
+  <div space="p:medium" visual="bg:white dark:bg:neutral-800">Item 3</div>
+</div>
+<div layout="flex" space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium divide:red-500 divide-x-w:thin">
+  <div space="p:medium" visual="bg:white dark:bg:neutral-800">Item 1</div>
+  <div space="p:medium" visual="bg:white dark:bg:neutral-800">Item 2</div>
+  <div space="p:medium" visual="bg:white dark:bg:neutral-800">Item 3</div>
+</div>`,highlightValue:"divide:primary"},{title:"Directional Divides",titleMs:"Pemisah Arah",description:"Divide on specific axes",descriptionMs:"Pemisah pada paksi tertentu",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div layout="flex col" space="p:medium" visual="bg:white dark:bg:neutral-800 rounded:small divide-y:gray-300 divide-y-w:thin">
+    <div space="p:small">Item 1</div>
+    <div space="p:small">Item 2</div>
+    <div space="p:small">Item 3</div>
+  </div>
+  <div layout="flex" space="p:medium" visual="bg:white dark:bg:neutral-800 rounded:small divide-x:primary divide-x-w:thin">
+    <div space="p:small">Item 1</div>
+    <div space="p:small">Item 2</div>
+    <div space="p:small">Item 3</div>
+  </div>
+</div>`,highlightValue:"divide-y:gray-300"}]},lt={name:"divide-width",property:"visual",syntax:'visual="divide-w:[value]" | visual="divide-{x|y}-w:[value]"',description:"Set divider width",descriptionMs:"Tetapkan lebar pemisah",category:"visual",usesScale:"spacing",supportsArbitrary:!0,values:[{value:"none",css:"border-width: var(--s-none);",description:"No divider (0px)",descriptionMs:"Tiada pemisah (0px)"},{value:"thin",css:"border-width: var(--s-thin);",description:"Thin divider (1px)",descriptionMs:"Pemisah nipis (1px)"},{value:"regular",css:"border-width: var(--s-regular);",description:"Standard divider (2px)",descriptionMs:"Pemisah standard (2px)"},{value:"thick",css:"border-width: var(--s-thick);",description:"Thick divider (3px)",descriptionMs:"Pemisah tebal (3px)"}],examples:[{code:'<div visual="divide:gray-300 divide-w:thin">',description:"Thin dividers (1px)"},{code:'<div visual="divide:gray-300 divide-w:regular">',description:"Regular dividers (2px)"},{code:'<div visual="divide:gray-300 divide-w:thick">',description:"Thick dividers (3px)"},{code:'<div visual="divide-y:primary divide-y-w:regular">',description:"Vertical dividers with width"},{code:'<div visual="divide-x:primary divide-x-w:thin">',description:"Horizontal dividers with width"}],preview:[{title:"Divide Widths",titleMs:"Lebar Pemisah",description:"Different divider width options",descriptionMs:"Pilihan lebar pemisah berbeza",html:`<div layout="flex col" space="p:medium g:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div layout="flex" visual="bg:white dark:bg:neutral-800 rounded:small divide:neutral-500 divide-x-w:thin">
+    <div space="p:medium">thin (1px)</div>
+    <div space="p:medium">thin (1px)</div>
+    <div space="p:medium">thin (1px)</div>
+  </div>
+  <div layout="flex" visual="bg:white dark:bg:neutral-800 rounded:small divide:neutral-500 divide-x-w:regular">
+    <div space="p:medium">regular (2px)</div>
+    <div space="p:medium">regular (2px)</div>
+    <div space="p:medium">regular (2px)</div>
+  </div>
+  <div layout="flex" visual="bg:white dark:bg:neutral-800 rounded:small divide:neutral-500 divide-x-w:thick">
+    <div space="p:medium">thick (3px)</div>
+    <div space="p:medium">thick (3px)</div>
+    <div space="p:medium">thick (3px)</div>
+  </div>
+</div>`,highlightValue:"divide-w:regular"}]},ot={name:"divide-reverse",property:"visual",syntax:'visual="divide-{x|y}:reverse"',description:"Reverse border side for flex-reverse",descriptionMs:"Songsangkan sisi sempadan untuk flex-reverse",category:"visual",values:[{value:"divide-x:reverse",css:"--ss-divide-x-reverse: 1;",description:"Reverse X-axis divider",descriptionMs:"Songsangkan pemisah paksi-X"},{value:"divide-y:reverse",css:"--ss-divide-y-reverse: 1;",description:"Reverse Y-axis divider",descriptionMs:"Songsangkan pemisah paksi-Y"}],examples:[{code:'<div layout="flex flex-row-reverse" visual="divide-x:gray-300 divide-x-w:thin divide-x:reverse">',description:"Reverse X divider"},{code:'<div layout="flex flex-col-reverse" visual="divide-y:gray-300 divide-y-w:thin divide-y:reverse">',description:"Reverse Y divider"}],preview:[{title:"Reverse vs Normal",titleMs:"Songsang vs Biasa",description:"Comparison of normal flow vs reverse flow dividers",descriptionMs:"Perbandingan pemisah aliran biasa vs songsang",html:`<div layout="flex col" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div layout="flex" space="p:medium" visual="bg:white dark:bg:neutral-800 rounded:small divide:neutral-500 divide-x-w:regular">
+    <div space="p:small">1</div>
+    <div space="p:small">2</div>
+    <div space="p:small">3</div>
+  </div>
+  <div layout="flex row-reverse" space="p:medium" visual="bg:white dark:bg:neutral-800 rounded:small divide:neutral-500 divide-x-w:regular divide-x:reverse">
+    <div space="p:small">1(R)</div>
+    <div space="p:small">2(R)</div>
+    <div space="p:small">3(R)</div>
+  </div>
+</div>`,highlightValue:"divide-x:reverse"}]},dt={name:"divide-style",property:"visual",syntax:'visual="divide-style:[value]"',description:"Set divider style",descriptionMs:"Tetapkan gaya pemisah",category:"visual",values:[{value:"solid",css:"border-style: solid;",description:"Solid divider",descriptionMs:"Pemisah pepejal"},{value:"dashed",css:"border-style: dashed;",description:"Dashed divider",descriptionMs:"Pemisah putus-putus"},{value:"dotted",css:"border-style: dotted;",description:"Dotted divider",descriptionMs:"Pemisah bertitik"},{value:"double",css:"border-style: double;",description:"Double divider",descriptionMs:"Pemisah berganda"},{value:"none",css:"border-style: none;",description:"No divider",descriptionMs:"Tiada pemisah"}],examples:[{code:'<div visual="divide:gray-300 divide-style:dashed">',description:"Dashed dividers"},{code:'<div visual="divide:gray-300 divide-style:dotted">',description:"Dotted dividers"},{code:'<div visual="divide:gray-300 divide-style:double">',description:"Double dividers"}],preview:[{title:"Divide Styles",titleMs:"Gaya Pemisah",description:"Different divider style options",descriptionMs:"Pilihan gaya pemisah berbeza",html:`<div layout="flex col" space="p:medium g:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div layout="flex" visual="bg:white dark:bg:neutral-800 rounded:small divide:neutral-500 divide-x-w:regular divide-style:solid border:neutral-500 border-w:regular border-style:solid">
+    <div space="p:medium">solid</div>
+    <div space="p:medium">solid</div>
+    <div space="p:medium">solid</div>
+  </div>
+  <div layout="flex" visual="bg:white dark:bg:neutral-800 rounded:small divide:neutral-500 divide-x-w:regular divide-style:dashed border:neutral-500 border-w:regular border-style:dashed">
+    <div space="p:medium">dashed</div>
+    <div space="p:medium">dashed</div>
+    <div space="p:medium">dashed</div>
+  </div>
+  <div layout="flex" visual="bg:white dark:bg:neutral-800 rounded:small divide:neutral-500 divide-x-w:regular divide-style:dotted border:neutral-500 border-w:regular border-style:dotted">
+    <div space="p:medium">dotted</div>
+    <div space="p:medium">dotted</div>
+    <div space="p:medium">dotted</div>
+  </div>
+</div>`,highlightValue:"divide-style:dashed"}]},Ie={divideColor:nt,divideWidth:lt,divideStyle:dt,divideReverse:ot},Le=Ie;var pt={name:"fill",property:"visual",syntax:'visual="fill:[color]"',description:"Set SVG fill color",descriptionMs:"Tetapkan warna pengisian SVG",category:"visual",usesScale:"colors",supportsArbitrary:!0,values:[{value:"none",css:"fill: none;",description:"No fill",descriptionMs:"Tiada pengisian"},{value:"current",css:"fill: currentColor;",description:"Current color",descriptionMs:"Warna semasa"}],examples:[{code:'<svg visual="fill:primary">...</svg>',description:"Primary fill"}],preview:[{title:"SVG Fill",titleMs:"Pengisian SVG",description:"Fill SVG elements with color",descriptionMs:"Isi elemen SVG dengan warna",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <svg visual="fill:primary" width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>
+  <svg visual="fill:danger" width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>
+  <svg visual="fill:success" width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>
+</div>`,highlightValue:"fill:primary"}]},ut={name:"stroke",property:"visual",syntax:'visual="stroke:[color]"',description:"Set SVG stroke color",descriptionMs:"Tetapkan warna gurisan SVG",category:"visual",usesScale:"colors",supportsArbitrary:!0,values:[{value:"none",css:"stroke: none;",description:"No stroke",descriptionMs:"Tiada gurisan"},{value:"current",css:"stroke: currentColor;",description:"Current color",descriptionMs:"Warna semasa"}],examples:[{code:'<svg visual="stroke:primary stroke-w:2">...</svg>',description:"Primary stroke"}],preview:[{title:"SVG Stroke",titleMs:"Gurisan SVG",description:"Stroke SVG elements with color",descriptionMs:"Guris elemen SVG dengan warna",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <svg visual="stroke:primary fill:none stroke-w:2" width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>
+  <svg visual="stroke:danger fill:none stroke-w:2" width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>
+</div>`,highlightValue:"stroke:primary"}]},ct={name:"stroke-width",property:"visual",syntax:'visual="stroke-w:[value]"',description:"Set SVG stroke width",descriptionMs:"Tetapkan lebar gurisan SVG",category:"visual",supportsArbitrary:!0,dynamic:!0,values:[{value:"0",css:"stroke-width: 0;",description:"No stroke",descriptionMs:"Tiada gurisan"},{value:"1",css:"stroke-width: 1px;",description:"1px stroke",descriptionMs:"Gurisan 1px"},{value:"2",css:"stroke-width: 2px;",description:"2px stroke",descriptionMs:"Gurisan 2px"}],examples:[{code:'<svg visual="stroke:black stroke-w:2">...</svg>',description:"2px stroke"}],preview:[{title:"Stroke Width",titleMs:"Lebar Gurisan",description:"Control SVG stroke thickness",descriptionMs:"Kawal ketebalan gurisan SVG",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <svg visual="stroke:primary fill:none stroke-w:1" width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>
+  <svg visual="stroke:primary fill:none stroke-w:2" width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>
+  <svg visual="stroke:primary fill:none stroke-w:3" width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>
+</div>`,highlightValue:"stroke-w:2"}]},Ne={svgFill:pt,svgStroke:ut,svgStrokeWidth:ct},Ge=Ne;var Ps={...we,...Se,...Fe,...Te,...De,...$e,...Be,...Pe,...Re,...Le,...Ge};function Oe(){return{layoutMap:w(),spacePropertyMap:M(),typographyKeywords:S()}}var{layoutMap:A,typographyKeywords:Je}=Oe();function x(n){return b(n)}var mt=["transparent","currentColor","inherit","initial","unset"];function m(n,l){return l||mt.includes(n)?n:`var(--c-${n})`}function vt(n){let{theme:l}=n,t=`:root {
+`;for(let[o,r]of Object.entries(l.spacing))t+=`  --s-${o}: ${r};
+`;for(let[o,r]of Object.entries(l.radius))t+=`  --r-${o}: ${r};
+`;for(let[o,r]of Object.entries(l.shadow))t+=`  --shadow-${o}: ${r};
+`;for(let[o,r]of Object.entries(l.fontSize))t+=`  --font-${o}: ${r};
+`;if(l.fontSizeLineHeight)for(let[o,r]of Object.entries(l.fontSizeLineHeight))t+=`  --font-lh-${o}: ${r};
+`;for(let[o,r]of Object.entries(l.fontWeight))t+=`  --fw-${o}: ${r};
+`;for(let[o,r]of Object.entries(l.colors))t+=`  --c-${o}: ${r};
+`;for(let[o,r]of Object.entries(l.zIndex))t+=`  --z-${o}: ${r};
+`;let e={0:"0px",px:"1px","0.5":"0.125rem",1:"0.25rem","1.5":"0.375rem",2:"0.5rem","2.5":"0.625rem",3:"0.75rem","3.5":"0.875rem",4:"1rem",5:"1.25rem",6:"1.5rem",7:"1.75rem",8:"2rem",9:"2.25rem",10:"2.5rem",11:"2.75rem",12:"3rem",14:"3.5rem",16:"4rem",20:"5rem",24:"6rem",28:"7rem",32:"8rem",36:"9rem",40:"10rem",44:"11rem",48:"12rem",52:"13rem",56:"14rem",60:"15rem",64:"16rem",72:"18rem",80:"20rem",96:"24rem"};for(let[o,r]of Object.entries(e))t+=`  --tw-${o.replace(/\./g,"\\\\.")}: ${r};
+`;let i={none:"0px",sm:"0.125rem",DEFAULT:"0.25rem",md:"0.375rem",lg:"0.5rem",xl:"0.75rem","2xl":"1rem","3xl":"1.5rem",full:"9999px"};for(let[o,r]of Object.entries(i))t+=`  --r-tw-${o}: ${r};
+`;let d={sm:"0 1px 2px 0 rgb(0 0 0 / 0.05)",DEFAULT:"0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",md:"0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",lg:"0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",xl:"0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)","2xl":"0 25px 50px -12px rgb(0 0 0 / 0.25)",inner:"inset 0 2px 4px 0 rgb(0 0 0 / 0.05)",none:"0 0 #0000"};for(let[o,r]of Object.entries(d))t+=`  --shadow-tw-${o}: ${r};
+`;let c={xs:"0.75rem",sm:"0.875rem",base:"1rem",lg:"1.125rem",xl:"1.25rem","2xl":"1.5rem","3xl":"1.875rem","4xl":"2.25rem","5xl":"3rem","6xl":"3.75rem","7xl":"4.5rem","8xl":"6rem","9xl":"8rem"};for(let[o,r]of Object.entries(c))t+=`  --tw-text-${o}: ${r};
+`;let a={xs:"1rem",sm:"1.25rem",base:"1.5rem",lg:"1.75rem",xl:"1.75rem","2xl":"2rem","3xl":"2.25rem","4xl":"2.5rem","5xl":"1","6xl":"1","7xl":"1","8xl":"1","9xl":"1"};for(let[o,r]of Object.entries(a))t+=`  --tw-leading-${o}: ${r};
+`;let s={thin:"100",extralight:"200",light:"300",normal:"400",medium:"500",semibold:"600",bold:"700",extrabold:"800",black:"900"};for(let[o,r]of Object.entries(s))t+=`  --tw-font-${o}: ${r};
+`;return t+=`}
+
+`,t}function gt(n,l){let{property:t,value:e,isArbitrary:i}=n;if(t===e&&A[t])return A[t];if(t==="justify")return`justify-content: ${{start:"flex-start",end:"flex-end",center:"center",between:"space-between",around:"space-around",evenly:"space-evenly",stretch:"stretch"}[e]||e};`;if(t==="justify-items")return`justify-items: ${e};`;if(t==="justify-self")return`justify-self: ${e};`;if(t==="content")return`align-content: ${{start:"flex-start",end:"flex-end",center:"center",between:"space-between",around:"space-around",evenly:"space-evenly",stretch:"stretch"}[e]||e};`;if(t==="items")return`align-items: ${{start:"flex-start",end:"flex-end",center:"center",baseline:"baseline",stretch:"stretch"}[e]||e};`;if(t==="self")return`align-self: ${{auto:"auto",start:"flex-start",end:"flex-end",center:"center",baseline:"baseline",stretch:"stretch"}[e]||e};`;if(t==="place-content")return`place-content: ${{start:"start",end:"end",center:"center",between:"space-between",around:"space-around",evenly:"space-evenly",stretch:"stretch"}[e]||e};`;if(t==="place-items")return`place-items: ${e};`;if(t==="place-self")return`place-self: ${e};`;if(t==="z")return`z-index: var(--z-${e});`;if(t==="overflow")return`overflow: ${e};`;if(t==="overflow-x")return`overflow-x: ${e};`;if(t==="overflow-y")return`overflow-y: ${e};`;if(t==="aspect")return`aspect-ratio: ${i?e.replace(/_/g," "):{square:"1 / 1",video:"16 / 9",auto:"auto"}[e]||e};`;if(t==="object")return`object-fit: ${e};`;if(t==="object-pos")return`object-position: ${i?e.replace(/_/g," "):e};`;let d={full:"100%",half:"50%",third:"33.333333%","third-2x":"66.666667%",quarter:"25%","quarter-2x":"50%","quarter-3x":"75%","1/1":"100%","1/2":"50%","1/3":"33.333333%","2/3":"66.666667%","1/4":"25%","2/4":"50%","3/4":"75%"},c=(a,s)=>{if(s)return a;if(a==="0")return"0";if(a.startsWith("-")){let o=a.substring(1);if(d[o])return`-${d[o]}`}return d[a]?d[a]:`var(--s-${a})`};if(t==="inset")return`inset: ${c(e,i)};`;if(["top","right","bottom","left"].includes(t)){let a=c(e,i);return`${t}: ${a};`}if(t==="inset-x"){let a=c(e,i);return`left: ${a}; right: ${a};`}if(t==="inset-y"){let a=c(e,i);return`top: ${a}; bottom: ${a};`}return t==="cols"?`columns: ${e};`:t==="overscroll"?`overscroll-behavior: ${e};`:t==="overscroll-x"?`overscroll-behavior-x: ${e};`:t==="overscroll-y"?`overscroll-behavior-y: ${e};`:t==="basis"?`flex-basis: ${i?e:`var(--s-${e})`};`:t==="flex"?`flex: ${i?e.replace(/_/g," "):{1:"1 1 0%",auto:"1 1 auto",initial:"0 1 auto",none:"none"}[e]||e};`:t==="order"?`order: ${{first:"-9999",last:"9999",none:"0"}[e]||e};`:t==="grid-cols"?e==="none"?"grid-template-columns: none;":e==="subgrid"?"grid-template-columns: subgrid;":i?`grid-template-columns: ${x(e).replace(/_/g," ")};`:`grid-template-columns: repeat(${e}, minmax(0, 1fr));`:t==="grid-rows"?e==="none"?"grid-template-rows: none;":e==="subgrid"?"grid-template-rows: subgrid;":i?`grid-template-rows: ${x(e).replace(/_/g," ")};`:`grid-template-rows: repeat(${e}, minmax(0, 1fr));`:t==="col-span"?e==="full"?"grid-column: 1 / -1;":`grid-column: span ${e} / span ${e};`:t==="col-start"?`grid-column-start: ${e};`:t==="col-end"?`grid-column-end: ${e};`:t==="row-span"?e==="full"?"grid-row: 1 / -1;":`grid-row: span ${e} / span ${e};`:t==="row-start"?`grid-row-start: ${e};`:t==="row-end"?`grid-row-end: ${e};`:t==="auto-cols"?`grid-auto-columns: ${i?e:{auto:"auto",min:"min-content",max:"max-content",fr:"minmax(0, 1fr)"}[e]||e};`:t==="auto-rows"?`grid-auto-rows: ${i?e:{auto:"auto",min:"min-content",max:"max-content",fr:"minmax(0, 1fr)"}[e]||e};`:t==="border-spacing"?`border-spacing: ${i?e:`var(--s-${e})`};`:t==="border-spacing-x"?`border-spacing: ${i?e:`var(--s-${e})`} 0;`:t==="border-spacing-y"?`border-spacing: 0 ${i?e:`var(--s-${e})`};`:A[t]||""}function ht(n,l){let{property:t,value:e,isArbitrary:i}=n,d={min:"min-content",max:"max-content",fit:"fit-content"},c=["w","h","min-w","max-w","min-h","max-h"];if(c.includes(t)&&d[e]){let r=d[e];return{w:`width: ${r};`,h:`height: ${r};`,"min-w":`min-width: ${r};`,"max-w":`max-width: ${r};`,"min-h":`min-height: ${r};`,"max-h":`max-height: ${r};`}[t]||""}let a={full:"100%",half:"50%",third:"33.333333%","third-2x":"66.666667%",quarter:"25%","quarter-2x":"50%","quarter-3x":"75%","1/1":"100%","1/2":"50%","1/3":"33.333333%","2/3":"66.666667%","1/4":"25%","2/4":"50%","3/4":"75%"};if(c.includes(t)&&a[e]){let r=a[e];return{w:`width: ${r};`,h:`height: ${r};`,"min-w":`min-width: ${r};`,"max-w":`max-width: ${r};`,"min-h":`min-height: ${r};`,"max-h":`max-height: ${r};`}[t]||""}let s;if(i)s=e;else{let r=e.startsWith("-"),p=r?e.substring(1):e,u;p.startsWith("tw-")?u=`var(--tw-${p.slice(3).replace(/\./g,"\\\\.")})`:u=`var(--s-${p})`,s=r?`calc(${u} * -1)`:u}if(e==="auto"){let r="auto";return{m:`margin: ${r};`,"m-x":`margin-left: ${r}; margin-right: ${r};`,"m-y":`margin-top: ${r}; margin-bottom: ${r};`,"m-t":`margin-top: ${r};`,"m-r":`margin-right: ${r};`,"m-b":`margin-bottom: ${r};`,"m-l":`margin-left: ${r};`}[t]||""}return{p:`padding: ${s};`,"p-t":`padding-top: ${s};`,"p-r":`padding-right: ${s};`,"p-b":`padding-bottom: ${s};`,"p-l":`padding-left: ${s};`,"p-x":`padding-left: ${s}; padding-right: ${s};`,"p-y":`padding-top: ${s}; padding-bottom: ${s};`,m:`margin: ${s};`,"m-t":`margin-top: ${s};`,"m-r":`margin-right: ${s};`,"m-b":`margin-bottom: ${s};`,"m-l":`margin-left: ${s};`,"m-x":`margin-left: ${s}; margin-right: ${s};`,"m-y":`margin-top: ${s}; margin-bottom: ${s};`,g:`gap: ${s};`,"g-x":`column-gap: ${s};`,"g-y":`row-gap: ${s};`,w:`width: ${s};`,h:`height: ${s};`,"min-w":`min-width: ${s};`,"max-w":`max-width: ${s};`,"min-h":`min-height: ${s};`,"max-h":`max-height: ${s};`}[t]||""}function bt(n,l){let{property:t,value:e,isArbitrary:i}=n;if(Je[t])return Je[t];let c={bg:()=>`background-color: ${m(e,i)};`,"bg-image":()=>{if(e==="none")return"background-image: none;";if(e.startsWith("gradient-to-")){let s={t:"to top",tr:"to top right",r:"to right",br:"to bottom right",b:"to bottom",bl:"to bottom left",l:"to left",tl:"to top left"},o=e.replace("gradient-to-",""),r=s[o];if(r)return`background-image: linear-gradient(${r}, var(--ss-gradient-stops, transparent));`}return`background-image: ${i?x(`url(${e})`):`url(${e})`};`},"bg-attachment":()=>`background-attachment: ${e};`,"bg-clip":()=>`background-clip: ${{border:"border-box",padding:"padding-box",content:"content-box",text:"text"}[e]||e};`,"bg-origin":()=>`background-origin: ${{border:"border-box",padding:"padding-box",content:"content-box"}[e]||e};`,"bg-position":()=>`background-position: ${i?e.replace(/_/g," "):{center:"center",top:"top",bottom:"bottom",left:"left",right:"right","top-left":"top left","top-right":"top right","bottom-left":"bottom left","bottom-right":"bottom right"}[e]||e};`,"bg-repeat":()=>`background-repeat: ${{repeat:"repeat","no-repeat":"no-repeat","repeat-x":"repeat-x","repeat-y":"repeat-y",round:"round",space:"space"}[e]||e};`,"bg-size":()=>`background-size: ${i?e.replace(/_/g," "):{auto:"auto",cover:"cover",contain:"contain"}[e]||e};`,"bg-blend":()=>`background-blend-mode: ${e};`,from:()=>`--ss-gradient-from: ${m(e,i)}; --ss-gradient-to: rgb(255 255 255 / 0); --ss-gradient-stops: var(--ss-gradient-from), var(--ss-gradient-to);`,via:()=>`--ss-gradient-to: rgb(255 255 255 / 0); --ss-gradient-stops: var(--ss-gradient-from), ${m(e,i)}, var(--ss-gradient-to);`,to:()=>`--ss-gradient-to: ${m(e,i)};`,text:()=>["left","center","right","justify"].includes(e)?`text-align: ${e};`:`color: ${m(e,i)};`,"text-shadow":()=>`text-shadow: ${i?e.replace(/_/g," "):{none:"none",small:"0 1px 2px rgba(0,0,0,0.1)",medium:"0 2px 4px rgba(0,0,0,0.15)",big:"0 4px 8px rgba(0,0,0,0.2)"}[e]||e};`,"text-size":()=>{let a,s;if(i)return a=e,`font-size: ${a};`;if(e.startsWith("tw-")){let o=e.slice(3);a=`var(--tw-text-${o})`,s=`var(--tw-leading-${o})`}else a=`var(--font-${e})`,s=`var(--font-lh-${e})`;return`font-size: ${a}; line-height: ${s};`},font:()=>{let a={sans:"ui-sans-serif, system-ui, sans-serif",serif:"ui-serif, Georgia, serif",mono:"ui-monospace, monospace"};if(a[e])return`font-family: ${a[e]};`;let s;return i?s=e:e.startsWith("tw-")?s=`var(--tw-font-${e.slice(3)})`:s=`var(--fw-${e})`,`font-weight: ${s};`},tracking:()=>`letter-spacing: ${i?e:{tighter:"-0.05em",tight:"-0.025em",normal:"0",wide:"0.025em",wider:"0.05em",widest:"0.1em"}[e]||e};`,leading:()=>`line-height: ${i?e:{none:"1",tight:"1.25",snug:"1.375",normal:"1.5",relaxed:"1.625",loose:"2"}[e]||e};`,"line-clamp":()=>`overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: ${e};`,decoration:()=>`text-decoration-color: ${m(e,i)};`,"decoration-thickness":()=>`text-decoration-thickness: ${i?e:`${e}px`};`,"underline-offset":()=>`text-underline-offset: ${i?e:`${e}px`};`,indent:()=>`text-indent: ${i?e:`var(--s-${e})`};`,border:()=>`border-color: ${m(e,i)}; border-style: solid;`,"border-t":()=>`border-top-color: ${m(e,i)}; border-top-style: solid;`,"border-b":()=>`border-bottom-color: ${m(e,i)}; border-bottom-style: solid;`,"border-l":()=>`border-left-color: ${m(e,i)}; border-left-style: solid;`,"border-r":()=>`border-right-color: ${m(e,i)}; border-right-style: solid;`,"border-x":()=>{let a=m(e,i);return`border-left-color: ${a}; border-right-color: ${a}; border-left-style: solid; border-right-style: solid;`},"border-y":()=>{let a=m(e,i);return`border-top-color: ${a}; border-bottom-color: ${a}; border-top-style: solid; border-bottom-style: solid;`},"border-w":()=>`border-width: ${i?e:`var(--s-${e})`}; border-style: solid;`,"border-t-w":()=>`border-top-width: ${i?e:`var(--s-${e})`}; border-top-style: solid;`,"border-b-w":()=>`border-bottom-width: ${i?e:`var(--s-${e})`}; border-bottom-style: solid;`,"border-l-w":()=>`border-left-width: ${i?e:`var(--s-${e})`}; border-left-style: solid;`,"border-r-w":()=>`border-right-width: ${i?e:`var(--s-${e})`}; border-right-style: solid;`,"border-x-w":()=>{let a=i?e:`var(--s-${e})`;return`border-left-width: ${a}; border-right-width: ${a}; border-left-style: solid; border-right-style: solid;`},"border-y-w":()=>{let a=i?e:`var(--s-${e})`;return`border-top-width: ${a}; border-bottom-width: ${a}; border-top-style: solid; border-bottom-style: solid;`},"border-style":()=>`border-style: ${e};`,rounded:()=>`border-radius: var(--r-${e});`,divide:()=>`border-color: ${m(e,i)}; border-style: solid;`,"divide-x":()=>{if(e==="reverse")return"--ss-divide-x-reverse: 1;";let a=m(e,i);return`border-left-color: ${a}; border-right-color: ${a}; border-left-style: solid; border-right-style: solid;`},"divide-y":()=>{if(e==="reverse")return"--ss-divide-y-reverse: 1;";let a=m(e,i);return`border-top-color: ${a}; border-bottom-color: ${a}; border-top-style: solid; border-bottom-style: solid;`},"divide-w":()=>`border-width: ${i?e:`var(--s-${e})`}; border-style: solid;`,"divide-x-w":()=>{let a=i?e:`var(--s-${e})`;return`border-left-width: ${a}; border-right-width: ${a}; border-left-style: solid; border-right-style: solid;`},"divide-y-w":()=>{let a=i?e:`var(--s-${e})`;return`border-top-width: ${a}; border-bottom-width: ${a}; border-top-style: solid; border-bottom-style: solid;`},"divide-style":()=>`border-style: ${e};`,"outline-w":()=>`outline-width: ${i?e:`var(--s-${e})`};`,outline:()=>`outline-color: ${m(e,i)};`,"outline-style":()=>`outline-style: ${e};`,"outline-offset":()=>`outline-offset: ${i?e:`var(--s-${e})`};`,"ring-w":()=>`--ss-ring-width: ${i?e:`var(--s-${e})`};`,"ring-color":()=>`--ss-ring-color: ${m(e,i)};`,"ring-offset":()=>`--ss-ring-offset-width: ${i?e:`var(--s-${e})`};`,"ring-offset-color":()=>`--ss-ring-offset-color: ${m(e,i)};`,ring:()=>e==="none"?"box-shadow: 0 0 #0000;":`--ss-ring-width: ${i?e:{thin:"1px",regular:"2px",small:"4px",medium:"6px",big:"8px"}[e]||(parseInt(e)?`${e}px`:`var(--s-${e})`)}; box-shadow: var(--ss-ring-inset) 0 0 0 calc(var(--ss-ring-width) + var(--ss-ring-offset-width, 0px)) var(--ss-ring-color, currentColor);`,shadow:()=>`box-shadow: var(--shadow-${e});`,opacity:()=>{let a=parseInt(e,10);return!isNaN(a)&&a>=0&&a<=100?`opacity: ${a/100};`:`opacity: ${e};`},"mix-blend":()=>`mix-blend-mode: ${e};`,"mask-clip":()=>`mask-clip: ${{border:"border-box",padding:"padding-box",content:"content-box",text:"text"}[e]||e};`,"mask-composite":()=>`mask-composite: ${e};`,"mask-image":()=>{let a=x(e);return`mask-image: ${i?`url(${a})`:`url(${e})`};`},"mask-mode":()=>`mask-mode: ${e};`,"mask-origin":()=>`mask-origin: ${{border:"border-box",padding:"padding-box",content:"content-box"}[e]||e};`,"mask-position":()=>`mask-position: ${i?e.replace(/_/g," "):{center:"center",top:"top",bottom:"bottom",left:"left",right:"right","top-left":"top left","top-right":"top right","bottom-left":"bottom left","bottom-right":"bottom right"}[e]||e};`,"mask-repeat":()=>`mask-repeat: ${{repeat:"repeat","no-repeat":"no-repeat","repeat-x":"repeat-x","repeat-y":"repeat-y",round:"round",space:"space"}[e]||e};`,"mask-size":()=>`mask-size: ${i?e.replace(/_/g," "):{auto:"auto",cover:"cover",contain:"contain"}[e]||e};`,"mask-type":()=>`mask-type: ${e};`,content:()=>`content: "${x(e).replace(/"/g,'\\"')}";`,blur:()=>{let a={none:"0",tiny:"2px",small:"4px",medium:"8px",big:"12px",giant:"24px",vast:"48px"};return`filter: blur(${i?e:a[e]||a.medium});`},brightness:()=>{let a={dim:.5,dark:.75,normal:1,bright:1.25,vivid:1.5};return`filter: brightness(${i?e:a[e]||a.normal});`},contrast:()=>{let a={low:.5,reduced:.75,normal:1,high:1.25,max:1.5};return`filter: contrast(${i?e:a[e]||a.normal});`},"drop-shadow":()=>{let a={none:"none",tiny:"0 1px 1px rgba(0,0,0,0.05)",small:"0 1px 2px rgba(0,0,0,0.1), 0 1px 1px rgba(0,0,0,0.06)",medium:"0 4px 3px rgba(0,0,0,0.07), 0 2px 2px rgba(0,0,0,0.06)",big:"0 10px 8px rgba(0,0,0,0.04), 0 4px 3px rgba(0,0,0,0.1)",giant:"0 20px 13px rgba(0,0,0,0.03), 0 8px 5px rgba(0,0,0,0.08)"};return`filter: drop-shadow(${i?e.replace(/_/g," "):a[e]||a.medium});`},grayscale:()=>{let a={none:"0%",partial:"50%",full:"100%"};return`filter: grayscale(${i?e:a[e]||a.full});`},"hue-rotate":()=>`filter: hue-rotate(${i?e:`${e}deg`});`,invert:()=>{let a={none:"0%",partial:"50%",full:"100%"};return`filter: invert(${i?e:a[e]||a.full});`},saturate:()=>{let a={none:0,low:.5,normal:1,high:1.5,vivid:2};return`filter: saturate(${i?e:a[e]||a.normal});`},sepia:()=>{let a={none:"0%",partial:"50%",full:"100%"};return`filter: sepia(${i?e:a[e]||a.full});`},"backdrop-blur":()=>{let a={none:"0",tiny:"2px",small:"4px",medium:"8px",big:"12px",giant:"24px",vast:"48px"};return`backdrop-filter: blur(${i?e:a[e]||a.medium});`},"backdrop-brightness":()=>{let a={dim:.5,dark:.75,normal:1,bright:1.25,vivid:1.5};return`backdrop-filter: brightness(${i?e:a[e]||a.normal});`},"backdrop-contrast":()=>{let a={low:.5,reduced:.75,normal:1,high:1.25,max:1.5};return`backdrop-filter: contrast(${i?e:a[e]||a.normal});`},"backdrop-grayscale":()=>{let a={none:"0%",partial:"50%",full:"100%"};return`backdrop-filter: grayscale(${i?e:a[e]||a.full});`},"backdrop-hue-rotate":()=>`backdrop-filter: hue-rotate(${i?e:`${e}deg`});`,"backdrop-invert":()=>{let a={none:"0%",partial:"50%",full:"100%"};return`backdrop-filter: invert(${i?e:a[e]||a.full});`},"backdrop-opacity":()=>{let a={invisible:0,faint:.25,half:.5,visible:.75,solid:1};return`backdrop-filter: opacity(${i?e:a[e]||a.solid});`},"backdrop-saturate":()=>{let a={none:0,low:.5,normal:1,high:1.5,vivid:2};return`backdrop-filter: saturate(${i?e:a[e]||a.normal});`},"backdrop-sepia":()=>{let a={none:"0%",partial:"50%",full:"100%"};return`backdrop-filter: sepia(${i?e:a[e]||a.full});`},transition:()=>{let a={none:"none",all:"all",DEFAULT:"color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter",colors:"color, background-color, border-color, text-decoration-color, fill, stroke",opacity:"opacity",shadow:"box-shadow",transform:"transform"};return`transition-property: ${a[e]||a.DEFAULT}; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;`},"transition-none":()=>"transition-property: none;",duration:()=>{let a={instant:"75ms",quick:"100ms",fast:"150ms",normal:"200ms",slow:"300ms",slower:"500ms",lazy:"700ms"};return`transition-duration: ${i?e:a[e]||a.normal};`},ease:()=>{let a={linear:"linear",in:"cubic-bezier(0.4, 0, 1, 1)",out:"cubic-bezier(0, 0, 0.2, 1)","in-out":"cubic-bezier(0.4, 0, 0.2, 1)"};return`transition-timing-function: ${i?e:a[e]||a["in-out"]};`},delay:()=>{let a={instant:"75ms",quick:"100ms",fast:"150ms",normal:"200ms",slow:"300ms",slower:"500ms",lazy:"700ms"};return`transition-delay: ${i?e:a[e]||a.normal};`},"transition-behavior":()=>`transition-behavior: ${e};`,animate:()=>`animation: ${i?e.replace(/_/g," "):{none:"none",spin:"spin 1s linear infinite",ping:"ping 1s cubic-bezier(0, 0, 0.2, 1) infinite",pulse:"pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",bounce:"bounce 1s infinite"}[e]||e};`,"animation-duration":()=>{let a={instant:"75ms",quick:"100ms",fast:"150ms",normal:"200ms",slow:"300ms",slower:"500ms",lazy:"700ms"};return`animation-duration: ${i?e:a[e]||a.normal};`},"animation-delay":()=>{let a={instant:"75ms",quick:"100ms",fast:"150ms",normal:"200ms",slow:"300ms",slower:"500ms",lazy:"700ms"};return`animation-delay: ${i?e:a[e]||a.normal};`},"animation-iteration":()=>`animation-iteration-count: ${e};`,"animation-direction":()=>`animation-direction: ${e};`,"animation-fill":()=>`animation-fill-mode: ${e};`,"animation-play":()=>`animation-play-state: ${e};`,scale:()=>`transform: scale(${i?e:parseInt(e)/100});`,"scale-x":()=>`transform: scaleX(${i?e:parseInt(e)/100});`,"scale-y":()=>`transform: scaleY(${i?e:parseInt(e)/100});`,rotate:()=>`transform: rotate(${i?e:`${e}deg`});`,"translate-x":()=>`transform: translateX(${i?e:{full:"100%",half:"50%",third:"33.333333%","third-2x":"66.666667%",quarter:"25%","quarter-2x":"50%","quarter-3x":"75%","1/2":"50%","1/3":"33.333333%","2/3":"66.666667%","1/4":"25%","3/4":"75%","-full":"-100%","-half":"-50%","-third":"-33.333333%","-third-2x":"-66.666667%","-quarter":"-25%","-quarter-2x":"-50%","-quarter-3x":"-75%","-1/2":"-50%","-1/3":"-33.333333%","-2/3":"-66.666667%","-1/4":"-25%","-3/4":"-75%"}[e]||`var(--s-${e})`});`,"translate-y":()=>`transform: translateY(${i?e:{full:"100%",half:"50%",third:"33.333333%","third-2x":"66.666667%",quarter:"25%","quarter-2x":"50%","quarter-3x":"75%","1/2":"50%","1/3":"33.333333%","2/3":"66.666667%","1/4":"25%","3/4":"75%","-full":"-100%","-half":"-50%","-third":"-33.333333%","-third-2x":"-66.666667%","-quarter":"-25%","-quarter-2x":"-50%","-quarter-3x":"-75%","-1/2":"-50%","-1/3":"-33.333333%","-2/3":"-66.666667%","-1/4":"-25%","-3/4":"-75%"}[e]||`var(--s-${e})`});`,"skew-x":()=>`transform: skewX(${i?e:`${e}deg`});`,"skew-y":()=>`transform: skewY(${i?e:`${e}deg`});`,"-skew-x":()=>`transform: skewX(${i?`-${e}`:`-${e}deg`});`,"-skew-y":()=>`transform: skewY(${i?`-${e}`:`-${e}deg`});`,"rotate-x":()=>`transform: rotateX(${i?e:`${e}deg`});`,"rotate-y":()=>`transform: rotateY(${i?e:`${e}deg`});`,"rotate-z":()=>`transform: rotateZ(${i?e:`${e}deg`});`,"translate-z":()=>`transform: translateZ(${i?e:{near:"50px",far:"-50px",0:"0"}[e]||`var(--s-${e})`});`,origin:()=>`transform-origin: ${i?e.replace(/_/g," "):{center:"center",top:"top","top-right":"top right",right:"right","bottom-right":"bottom right",bottom:"bottom","bottom-left":"bottom left",left:"left","top-left":"top left"}[e]||e};`,"transform-style":()=>`transform-style: ${e};`,backface:()=>`backface-visibility: ${e};`,perspective:()=>{let a={none:"none",small:"250px",medium:"500px",big:"750px",giant:"1000px",vast:"1500px"};return`perspective: ${i?e:a[e]||a.medium};`},"perspective-origin":()=>`perspective-origin: ${i?e.replace(/_/g," "):{center:"center",top:"top","top-right":"top right",right:"right","bottom-right":"bottom right",bottom:"bottom","bottom-left":"bottom left",left:"left","top-left":"top left"}[e]||e};`,accent:()=>`accent-color: ${i?e:`var(--c-${e})`};`,appearance:()=>`appearance: ${e};`,caret:()=>`caret-color: ${i?e:`var(--c-${e})`};`,"color-scheme":()=>`color-scheme: ${e};`,cursor:()=>`cursor: ${e};`,"field-sizing":()=>`field-sizing: ${e};`,"pointer-events":()=>`pointer-events: ${e};`,resize:()=>`resize: ${{none:"none",both:"both",x:"horizontal",y:"vertical"}[e]||e};`,scroll:()=>`scroll-behavior: ${e};`,"scroll-m":()=>`scroll-margin: ${i?e:`var(--s-${e})`};`,"scroll-m-t":()=>`scroll-margin-top: ${i?e:`var(--s-${e})`};`,"scroll-m-r":()=>`scroll-margin-right: ${i?e:`var(--s-${e})`};`,"scroll-m-b":()=>`scroll-margin-bottom: ${i?e:`var(--s-${e})`};`,"scroll-m-l":()=>`scroll-margin-left: ${i?e:`var(--s-${e})`};`,"scroll-m-x":()=>{let a=i?e:`var(--s-${e})`;return`scroll-margin-left: ${a}; scroll-margin-right: ${a};`},"scroll-m-y":()=>{let a=i?e:`var(--s-${e})`;return`scroll-margin-top: ${a}; scroll-margin-bottom: ${a};`},"scroll-p":()=>`scroll-padding: ${i?e:`var(--s-${e})`};`,"scroll-p-t":()=>`scroll-padding-top: ${i?e:`var(--s-${e})`};`,"scroll-p-r":()=>`scroll-padding-right: ${i?e:`var(--s-${e})`};`,"scroll-p-b":()=>`scroll-padding-bottom: ${i?e:`var(--s-${e})`};`,"scroll-p-l":()=>`scroll-padding-left: ${i?e:`var(--s-${e})`};`,"scroll-p-x":()=>{let a=i?e:`var(--s-${e})`;return`scroll-padding-left: ${a}; scroll-padding-right: ${a};`},"scroll-p-y":()=>{let a=i?e:`var(--s-${e})`;return`scroll-padding-top: ${a}; scroll-padding-bottom: ${a};`},"snap-align":()=>`scroll-snap-align: ${e};`,"snap-stop":()=>`scroll-snap-stop: ${e};`,snap:()=>`scroll-snap-type: ${{none:"none",x:"x mandatory","x-proximity":"x proximity",y:"y mandatory","y-proximity":"y proximity",both:"both mandatory","both-proximity":"both proximity"}[e]||e};`,touch:()=>`touch-action: ${{auto:"auto",none:"none","pan-x":"pan-x","pan-y":"pan-y","pan-left":"pan-left","pan-right":"pan-right","pan-up":"pan-up","pan-down":"pan-down","pinch-zoom":"pinch-zoom",manipulation:"manipulation"}[e]||e};`,select:()=>`user-select: ${e};`,"will-change":()=>`will-change: ${{auto:"auto",scroll:"scroll-position",contents:"contents",transform:"transform",opacity:"opacity"}[e]||e};`,fill:()=>e==="none"?"fill: none;":e==="current"?"fill: currentColor;":`fill: ${i?e:`var(--c-${e})`};`,stroke:()=>e==="none"?"stroke: none;":e==="current"?"stroke: currentColor;":`stroke: ${i?e:`var(--c-${e})`};`,"stroke-w":()=>`stroke-width: ${i?e:`${e}px`};`,"forced-colors":()=>`forced-color-adjust: ${e};`}[t];return c?c():""}function f(n,l,t=!1,e=new Set){let{raw:i,attrType:d,breakpoint:c,state:a}=n,s="";switch(d){case"layout":s=gt(n,l);break;case"space":s=ht(n,l);break;case"visual":s=bt(n,l);break}if(!s)return"";let o=i.startsWith("divide"),r="";if(o?r=`[${d}~="${i}"] > :not([hidden]) ~ :not([hidden])`:r=`[${d}~="${i}"]`,a&&a!=="dark")if(o)r=`[${d}~="${i}"] > :not([hidden]) ~ :not([hidden]):${a}`;else{let p=g=>({expanded:'[aria-expanded="true"]',selected:'[aria-selected="true"]',disabled:":disabled"})[g]||`:${g}`,u=[];u.push(`${r}${p(a)}`);let v={hover:"hoverable",focus:"focusable","focus-visible":"focusable",active:"pressable",expanded:"expandable",selected:"selectable"};if(v[a]){let g=v[a],h=a;(a==="focus"||a==="focus-visible")&&(h="focus-within");let F=p(h),Ue=`[layout~="${g}"]:not([layout~="disabled"])${F} ${r}`;if(u.push(Ue),e&&e.size>0)for(let V of e){let Xe=`[interact~="${V}"]:not([layout~="disabled"])${F} ~ [listens~="${V}"]${r}`;u.push(Xe)}}r=u.join(`,
+`)}return`${r} { ${s} }
+`}function xt(n){let l=n.darkMode||"media";return Array.isArray(l)?l[1]||".dark":l==="selector"?".dark":null}function He(n,l){let t="";t+=vt(l),l.preflight!==!1&&(t+=D(l)),t+=`/* SenangStart CSS - Animation Keyframes */
 @keyframes spin {
   to { transform: rotate(360deg); }
 }
-
 @keyframes ping {
-  75%, 100% {
-    transform: scale(2);
-    opacity: 0;
-  }
+  75%, 100% { transform: scale(2); opacity: 0; }
 }
-
 @keyframes pulse {
   50% { opacity: .5; }
 }
-
 @keyframes bounce {
-  0%, 100% {
-    transform: translateY(-25%);
-    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
-  }
-  50% {
-    transform: none;
-    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
-  }
-}
-
-`}let F={flex:"display: flex;",grid:"display: grid;","inline-flex":"display: inline-flex;","inline-grid":"display: inline-grid;",block:"display: block;",inline:"display: inline-block;",hidden:"display: none;",row:"flex-direction: row;",col:"flex-direction: column;","row-reverse":"flex-direction: row-reverse;","col-reverse":"flex-direction: column-reverse;",wrap:"flex-wrap: wrap;",nowrap:"flex-wrap: nowrap;","wrap-reverse":"flex-wrap: wrap-reverse;",grow:"flex-grow: 1;","grow-0":"flex-grow: 0;",shrink:"flex-shrink: 1;","shrink-0":"flex-shrink: 0;","grid-flow-row":"grid-auto-flow: row;","grid-flow-col":"grid-auto-flow: column;","grid-flow-dense":"grid-auto-flow: dense;","grid-flow-row-dense":"grid-auto-flow: row dense;","grid-flow-col-dense":"grid-auto-flow: column dense;",center:"justify-content: center; align-items: center;",start:"justify-content: flex-start; align-items: flex-start;",end:"justify-content: flex-end; align-items: flex-end;",between:"justify-content: space-between;",around:"justify-content: space-around;",evenly:"justify-content: space-evenly;",absolute:"position: absolute;",relative:"position: relative;",fixed:"position: fixed;",sticky:"position: sticky;",static:"position: static;",visible:"visibility: visible;",invisible:"visibility: hidden;",isolate:"isolation: isolate;","isolate-auto":"isolation: auto;","box-border":"box-sizing: border-box;","box-content":"box-sizing: content-box;","float-left":"float: left;","float-right":"float: right;","float-none":"float: none;","clear-left":"clear: left;","clear-right":"clear: right;","clear-both":"clear: both;","clear-none":"clear: none;",container:"width: 100%; margin-left: auto; margin-right: auto;","border-collapse":"border-collapse: collapse;","border-separate":"border-collapse: separate;"},P=y,W=w;function M(s){let{property:n,value:e,isArbitrary:r}=s;if(n===e&&F[n])return F[n];if(n==="container")return"width: 100%; margin-left: auto; margin-right: auto;";if(n==="justify")return`justify-content: ${{start:"flex-start",end:"flex-end",center:"center",between:"space-between",around:"space-around",evenly:"space-evenly",stretch:"stretch"}[e]||e};`;if(n==="justify-items")return`justify-items: ${e};`;if(n==="justify-self")return`justify-self: ${e};`;if(n==="content")return`align-content: ${{start:"flex-start",end:"flex-end",center:"center",between:"space-between",around:"space-around",evenly:"space-evenly",stretch:"stretch"}[e]||e};`;if(n==="items")return`align-items: ${{start:"flex-start",end:"flex-end",center:"center",baseline:"baseline",stretch:"stretch"}[e]||e};`;if(n==="self")return`align-self: ${{auto:"auto",start:"flex-start",end:"flex-end",center:"center",baseline:"baseline",stretch:"stretch"}[e]||e};`;if(n==="place-content")return`place-content: ${{start:"start",end:"end",center:"center",between:"space-between",around:"space-around",evenly:"space-evenly",stretch:"stretch"}[e]||e};`;if(n==="place-items")return`place-items: ${e};`;if(n==="place-self")return`place-self: ${e};`;if(n==="z")return`z-index: var(--z-${e});`;if(n==="overflow")return`overflow: ${e};`;if(n==="overflow-x")return`overflow-x: ${e};`;if(n==="overflow-y")return`overflow-y: ${e};`;if(n==="aspect")return`aspect-ratio: ${r?e.replace(/_/g," "):{square:"1 / 1",video:"16 / 9",auto:"auto"}[e]||e};`;if(n==="object")return`object-fit: ${e};`;if(n==="object-pos")return`object-position: ${r?e.replace(/_/g," "):e};`;if(n==="inset")return`inset: ${r?e:e==="0"?"0":`var(--s-${e})`};`;if(["top","right","bottom","left"].includes(n)){let l=r?e:e==="0"?"0":`var(--s-${e})`;return`${n}: ${l};`}if(n==="inset-x"){let l=r?e:e==="0"?"0":`var(--s-${e})`;return`left: ${l}; right: ${l};`}if(n==="inset-y"){let l=r?e:e==="0"?"0":`var(--s-${e})`;return`top: ${l}; bottom: ${l};`}return n==="cols"?`columns: ${e};`:n==="overscroll"?`overscroll-behavior: ${e};`:n==="overscroll-x"?`overscroll-behavior-x: ${e};`:n==="overscroll-y"?`overscroll-behavior-y: ${e};`:n==="basis"?`flex-basis: ${r?e:`var(--s-${e})`};`:n==="flex"?`flex: ${r?e.replace(/_/g," "):{1:"1 1 0%",auto:"1 1 auto",initial:"0 1 auto",none:"none"}[e]||e};`:n==="order"?`order: ${{first:"-9999",last:"9999",none:"0"}[e]||e};`:n==="grid-cols"?e==="none"?"grid-template-columns: none;":e==="subgrid"?"grid-template-columns: subgrid;":r?`grid-template-columns: ${e.replace(/_/g," ")};`:`grid-template-columns: repeat(${e}, minmax(0, 1fr));`:n==="grid-rows"?e==="none"?"grid-template-rows: none;":e==="subgrid"?"grid-template-rows: subgrid;":r?`grid-template-rows: ${e.replace(/_/g," ")};`:`grid-template-rows: repeat(${e}, minmax(0, 1fr));`:n==="col-span"?e==="full"?"grid-column: 1 / -1;":`grid-column: span ${e} / span ${e};`:n==="col-start"?`grid-column-start: ${e};`:n==="col-end"?`grid-column-end: ${e};`:n==="row-span"?e==="full"?"grid-row: 1 / -1;":`grid-row: span ${e} / span ${e};`:n==="row-start"?`grid-row-start: ${e};`:n==="row-end"?`grid-row-end: ${e};`:n==="auto-cols"?`grid-auto-columns: ${r?e:{auto:"auto",min:"min-content",max:"max-content",fr:"minmax(0, 1fr)"}[e]||e};`:n==="auto-rows"?`grid-auto-rows: ${r?e:{auto:"auto",min:"min-content",max:"max-content",fr:"minmax(0, 1fr)"}[e]||e};`:n==="table"?`table-layout: ${{auto:"auto",fixed:"fixed"}[e]||e};`:n==="caption"?`caption-side: ${e};`:n==="border-spacing"?`border-spacing: ${r?e:`var(--s-${e})`};`:n==="border-spacing-x"?`border-spacing: ${r?e:`var(--s-${e})`} 0;`:n==="border-spacing-y"?`border-spacing: 0 ${r?e:`var(--s-${e})`};`:F[n]||""}function j(s){let{property:n,value:e,isArbitrary:r}=s;if(e==="auto")return{m:"margin: auto;","m-x":"margin-left: auto; margin-right: auto;","m-y":"margin-top: auto; margin-bottom: auto;","m-t":"margin-top: auto;","m-r":"margin-right: auto;","m-b":"margin-bottom: auto;","m-l":"margin-left: auto;"}[n]||"";let l={min:"min-content",max:"max-content",fit:"fit-content"};if(["w","h","min-w","max-w","min-h","max-h"].includes(n)&&l[e]){let a=l[e];return{w:`width: ${a};`,h:`height: ${a};`,"min-w":`min-width: ${a};`,"max-w":`max-width: ${a};`,"min-h":`min-height: ${a};`,"max-h":`max-height: ${a};`}[n]||""}let c;if(r)c=e;else{let a=e.startsWith("-"),i=a?e.substring(1):e,o;i.startsWith("tw-")?o=`var(--tw-${i.slice(3)})`:o=`var(--s-${i})`,c=a?`calc(${o} * -1)`:o}return{p:`padding: ${c};`,"p-t":`padding-top: ${c};`,"p-r":`padding-right: ${c};`,"p-b":`padding-bottom: ${c};`,"p-l":`padding-left: ${c};`,"p-x":`padding-left: ${c}; padding-right: ${c};`,"p-y":`padding-top: ${c}; padding-bottom: ${c};`,m:`margin: ${c};`,"m-t":`margin-top: ${c};`,"m-r":`margin-right: ${c};`,"m-b":`margin-bottom: ${c};`,"m-l":`margin-left: ${c};`,"m-x":`margin-left: ${c}; margin-right: ${c};`,"m-y":`margin-top: ${c}; margin-bottom: ${c};`,g:`gap: ${c};`,"g-x":`column-gap: ${c};`,"g-y":`row-gap: ${c};`,w:`width: ${c};`,h:`height: ${c};`,"min-w":`min-width: ${c};`,"max-w":`max-width: ${c};`,"min-h":`min-height: ${c};`,"max-h":`max-height: ${c};`}[n]||""}function T(s){let{property:n,value:e,isArbitrary:r}=s,l={italic:"font-style: italic;","not-italic":"font-style: normal;","font-stretch-condensed":"font-stretch: condensed;","font-stretch-expanded":"font-stretch: expanded;","font-stretch-normal":"font-stretch: normal;",antialiased:"-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;","subpixel-antialiased":"-webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto;","normal-nums":"font-variant-numeric: normal;",ordinal:"font-variant-numeric: ordinal;","slashed-zero":"font-variant-numeric: slashed-zero;","lining-nums":"font-variant-numeric: lining-nums;","oldstyle-nums":"font-variant-numeric: oldstyle-nums;","proportional-nums":"font-variant-numeric: proportional-nums;","tabular-nums":"font-variant-numeric: tabular-nums;",uppercase:"text-transform: uppercase;",lowercase:"text-transform: lowercase;",capitalize:"text-transform: capitalize;","normal-case":"text-transform: none;",underline:"text-decoration-line: underline;",overline:"text-decoration-line: overline;","line-through":"text-decoration-line: line-through;","no-underline":"text-decoration-line: none;","decoration-solid":"text-decoration-style: solid;","decoration-double":"text-decoration-style: double;","decoration-dotted":"text-decoration-style: dotted;","decoration-dashed":"text-decoration-style: dashed;","decoration-wavy":"text-decoration-style: wavy;",truncate:"overflow: hidden; text-overflow: ellipsis; white-space: nowrap;","text-ellipsis":"text-overflow: ellipsis;","text-clip":"text-overflow: clip;","text-wrap":"text-wrap: wrap;","text-nowrap":"text-wrap: nowrap;","text-balance":"text-wrap: balance;","text-pretty":"text-wrap: pretty;","whitespace-normal":"white-space: normal;","whitespace-nowrap":"white-space: nowrap;","whitespace-pre":"white-space: pre;","whitespace-pre-line":"white-space: pre-line;","whitespace-pre-wrap":"white-space: pre-wrap;","whitespace-break-spaces":"white-space: break-spaces;","break-normal":"overflow-wrap: normal; word-break: normal;","break-words":"overflow-wrap: break-word;","break-all":"word-break: break-all;","break-keep":"word-break: keep-all;","hyphens-none":"hyphens: none;","hyphens-manual":"hyphens: manual;","hyphens-auto":"hyphens: auto;","align-baseline":"vertical-align: baseline;","align-top":"vertical-align: top;","align-middle":"vertical-align: middle;","align-bottom":"vertical-align: bottom;","align-text-top":"vertical-align: text-top;","align-text-bottom":"vertical-align: text-bottom;","align-sub":"vertical-align: sub;","align-super":"vertical-align: super;","list-none":"list-style-type: none;","list-disc":"list-style-type: disc;","list-decimal":"list-style-type: decimal;","list-square":"list-style-type: square;","list-inside":"list-style-position: inside;","list-outside":"list-style-position: outside;"};if(l[n])return l[n];let c={bg:()=>`background-color: ${r?e:`var(--c-${e})`};`,text:()=>["left","center","right","justify"].includes(e)?`text-align: ${e};`:`color: ${r?e:`var(--c-${e})`};`,"text-size":()=>{let t,a;if(r)return t=e,`font-size: ${t};`;if(e.startsWith("tw-")){let i=e.slice(3);t=`var(--tw-text-${i})`,a=`var(--tw-leading-${i})`}else t=`var(--font-${e})`,a=`var(--font-lh-${e})`;return`font-size: ${t}; line-height: ${a};`},font:()=>{let t={sans:"ui-sans-serif, system-ui, sans-serif",serif:"ui-serif, Georgia, serif",mono:"ui-monospace, monospace"};if(t[e])return`font-family: ${t[e]};`;let a;return r?a=e:e.startsWith("tw-")?a=`var(--tw-font-${e.slice(3)})`:a=`var(--fw-${e})`,`font-weight: ${a};`},tracking:()=>`letter-spacing: ${r?e:{tighter:"-0.05em",tight:"-0.025em",normal:"0",wide:"0.025em",wider:"0.05em",widest:"0.1em"}[e]||e};`,leading:()=>`line-height: ${r?e:{none:"1",tight:"1.25",snug:"1.375",normal:"1.5",relaxed:"1.625",loose:"2"}[e]||e};`,"line-clamp":()=>`overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: ${e};`,decoration:()=>`text-decoration-color: ${r?e:`var(--c-${e})`};`,"decoration-thickness":()=>`text-decoration-thickness: ${r?e:`${e}px`};`,"underline-offset":()=>`text-underline-offset: ${r?e:`${e}px`};`,indent:()=>`text-indent: ${r?e:`var(--s-${e})`};`,border:()=>`border-color: ${r?e:`var(--c-${e})`}; border-style: solid;`,"border-t":()=>`border-top-color: ${r?e:`var(--c-${e})`}; border-top-style: solid;`,"border-b":()=>`border-bottom-color: ${r?e:`var(--c-${e})`}; border-bottom-style: solid;`,"border-l":()=>`border-left-color: ${r?e:`var(--c-${e})`}; border-left-style: solid;`,"border-r":()=>`border-right-color: ${r?e:`var(--c-${e})`}; border-right-style: solid;`,"border-x":()=>{let t=r?e:`var(--c-${e})`;return`border-left-color: ${t}; border-right-color: ${t}; border-left-style: solid; border-right-style: solid;`},"border-y":()=>{let t=r?e:`var(--c-${e})`;return`border-top-color: ${t}; border-bottom-color: ${t}; border-top-style: solid; border-bottom-style: solid;`},"border-w":()=>`border-width: ${r?e:`var(--s-${e})`}; border-style: solid;`,"border-t-w":()=>`border-top-width: ${r?e:`var(--s-${e})`}; border-top-style: solid;`,"border-b-w":()=>`border-bottom-width: ${r?e:`var(--s-${e})`}; border-bottom-style: solid;`,"border-l-w":()=>`border-left-width: ${r?e:`var(--s-${e})`}; border-left-style: solid;`,"border-r-w":()=>`border-right-width: ${r?e:`var(--s-${e})`}; border-right-style: solid;`,"border-x-w":()=>{let t=r?e:`var(--s-${e})`;return`border-left-width: ${t}; border-right-width: ${t}; border-left-style: solid; border-right-style: solid;`},"border-y-w":()=>{let t=r?e:`var(--s-${e})`;return`border-top-width: ${t}; border-bottom-width: ${t}; border-top-style: solid; border-bottom-style: solid;`},rounded:()=>{let t;return r?t=e:e.startsWith("tw-")?t=`var(--tw-rounded-${e.slice(3)})`:t=`var(--r-${e})`,`border-radius: ${t};`},shadow:()=>{let t;return r?t=e:e.startsWith("tw-")?t=`var(--tw-shadow-${e.slice(3)})`:t=`var(--shadow-${e})`,`box-shadow: ${t};`},opacity:()=>`opacity: ${r?e:parseFloat(e)/100};`,content:()=>`content: "${e}";`,scale:()=>`transform: scale(${r?e:parseFloat(e)/100});`,"scale-x":()=>`transform: scaleX(${r?e:parseFloat(e)/100});`,"scale-y":()=>`transform: scaleY(${r?e:parseFloat(e)/100});`,rotate:()=>`transform: rotate(${r?e:`${e}deg`});`,"translate-x":()=>`transform: translateX(${r?e:{0:"0",full:"100%","1/2":"50%","-full":"-100%","-1/2":"-50%"}[e]||`var(--s-${e})`});`,"translate-y":()=>`transform: translateY(${r?e:{0:"0",full:"100%","1/2":"50%","-full":"-100%","-1/2":"-50%"}[e]||`var(--s-${e})`});`,"skew-x":()=>`transform: skewX(${r?e:`${e}deg`});`,"skew-y":()=>`transform: skewY(${r?e:`${e}deg`});`,origin:()=>`transform-origin: ${r?e.replace(/_/g," "):{center:"center",top:"top","top-right":"top right",right:"right","bottom-right":"bottom right",bottom:"bottom","bottom-left":"bottom left",left:"left","top-left":"top left"}[e]||e};`,transition:()=>({none:"transition-property: none;",all:"transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;",colors:"transition-property: color, background-color, border-color; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;",opacity:"transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;",shadow:"transition-property: box-shadow; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;",transform:"transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;"})[e]||`transition-property: ${e};`,duration:()=>`transition-duration: ${r?e:{instant:"75ms",quick:"100ms",fast:"150ms",normal:"200ms",slow:"300ms",slower:"500ms",lazy:"700ms"}[e]||`${e}ms`};`,ease:()=>`transition-timing-function: ${{linear:"linear",in:"cubic-bezier(0.4, 0, 1, 1)",out:"cubic-bezier(0, 0, 0.2, 1)","in-out":"cubic-bezier(0.4, 0, 0.2, 1)"}[e]||e};`,delay:()=>`transition-delay: ${r?e:{instant:"75ms",quick:"100ms",fast:"150ms",normal:"200ms",slow:"300ms"}[e]||`${e}ms`};`,animate:()=>({none:"animation: none;",spin:"animation: spin 1s linear infinite;",ping:"animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;",pulse:"animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;",bounce:"animation: bounce 1s infinite;"})[e]||`animation: ${e};`,blur:()=>`filter: blur(${r?e:{none:"0",sm:"4px",md:"8px",lg:"12px",xl:"16px","2xl":"24px","3xl":"40px"}[e]||`${e}px`});`,brightness:()=>`filter: brightness(${r?e:{0:"0",50:"0.5",75:"0.75",90:"0.9",95:"0.95",100:"1",105:"1.05",110:"1.1",125:"1.25",150:"1.5",200:"2"}[e]||parseFloat(e)/100});`,contrast:()=>`filter: contrast(${r?e:{0:"0",50:"0.5",75:"0.75",100:"1",125:"1.25",150:"1.5",200:"2"}[e]||parseFloat(e)/100});`,grayscale:()=>`filter: grayscale(${r?e:{0:"0",100:"1",full:"1"}[e]||parseFloat(e)/100});`,"hue-rotate":()=>`filter: hue-rotate(${r?e:`${e}deg`});`,invert:()=>`filter: invert(${r?e:{0:"0",100:"1",full:"1"}[e]||parseFloat(e)/100});`,saturate:()=>`filter: saturate(${r?e:{0:"0",50:"0.5",100:"1",150:"1.5",200:"2"}[e]||parseFloat(e)/100});`,sepia:()=>`filter: sepia(${r?e:{0:"0",100:"1",full:"1"}[e]||parseFloat(e)/100});`,"drop-shadow":()=>{let t={sm:"drop-shadow(0 1px 1px rgb(0 0 0 / 0.05))",md:"drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06))",lg:"drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1))",xl:"drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08))","2xl":"drop-shadow(0 25px 25px rgb(0 0 0 / 0.15))",none:"drop-shadow(0 0 #0000)"};return`filter: ${r?`drop-shadow(${e.replace(/_/g," ")})`:t[e]||t.md};`},"bg-size":()=>`background-size: ${r?e.replace(/_/g," "):{auto:"auto",cover:"cover",contain:"contain"}[e]||e};`,"bg-pos":()=>`background-position: ${r?e.replace(/_/g," "):{center:"center",top:"top","top-right":"top right",right:"right","bottom-right":"bottom right",bottom:"bottom","bottom-left":"bottom left",left:"left","top-left":"top left"}[e]||e};`,"bg-repeat":()=>`background-repeat: ${{repeat:"repeat","no-repeat":"no-repeat","repeat-x":"repeat-x","repeat-y":"repeat-y",round:"round",space:"space"}[e]||e};`,"bg-attachment":()=>`background-attachment: ${e};`,"bg-clip":()=>`background-clip: ${{border:"border-box",padding:"padding-box",content:"content-box",text:"text"}[e]||e};`,"bg-origin":()=>`background-origin: ${{border:"border-box",padding:"padding-box",content:"content-box"}[e]||e};`,"bg-blend":()=>`background-blend-mode: ${e};`,"bg-image":()=>`background-image: ${r?e.replace(/_/g," "):{none:"none","gradient-to-t":"linear-gradient(to top, var(--tw-gradient-stops))","gradient-to-tr":"linear-gradient(to top right, var(--tw-gradient-stops))","gradient-to-r":"linear-gradient(to right, var(--tw-gradient-stops))","gradient-to-br":"linear-gradient(to bottom right, var(--tw-gradient-stops))","gradient-to-b":"linear-gradient(to bottom, var(--tw-gradient-stops))","gradient-to-bl":"linear-gradient(to bottom left, var(--tw-gradient-stops))","gradient-to-l":"linear-gradient(to left, var(--tw-gradient-stops))","gradient-to-tl":"linear-gradient(to top left, var(--tw-gradient-stops))"}[e]||e};`,from:()=>`--tw-gradient-from: ${r?e:`var(--c-${e})`}; --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);`,via:()=>`--tw-gradient-via: ${r?e:`var(--c-${e})`}; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to);`,to:()=>`--tw-gradient-to: ${r?e:`var(--c-${e})`};`,"backdrop-blur":()=>`backdrop-filter: blur(${r?e:{none:"0",sm:"4px",md:"8px",lg:"12px",xl:"16px","2xl":"24px","3xl":"40px"}[e]||`${e}px`});`,"backdrop-brightness":()=>`backdrop-filter: brightness(${r?e:parseFloat(e)/100});`,"backdrop-contrast":()=>`backdrop-filter: contrast(${r?e:parseFloat(e)/100});`,"backdrop-grayscale":()=>`backdrop-filter: grayscale(${r?e:{0:"0",100:"1",full:"1"}[e]||parseFloat(e)/100});`,"backdrop-hue-rotate":()=>`backdrop-filter: hue-rotate(${r?e:`${e}deg`});`,"backdrop-invert":()=>`backdrop-filter: invert(${r?e:{0:"0",100:"1",full:"1"}[e]||parseFloat(e)/100});`,"backdrop-opacity":()=>`backdrop-filter: opacity(${r?e:parseFloat(e)/100});`,"backdrop-saturate":()=>`backdrop-filter: saturate(${r?e:parseFloat(e)/100});`,"backdrop-sepia":()=>`backdrop-filter: sepia(${r?e:{0:"0",100:"1",full:"1"}[e]||parseFloat(e)/100});`,"animation-duration":()=>`animation-duration: ${r?e:{instant:"75ms",quick:"100ms",fast:"150ms",normal:"200ms",slow:"300ms",slower:"500ms",lazy:"700ms"}[e]||`${e}ms`};`,"animation-delay":()=>`animation-delay: ${r?e:{instant:"75ms",quick:"100ms",fast:"150ms",normal:"200ms",slow:"300ms"}[e]||`${e}ms`};`,"animation-iteration":()=>`animation-iteration-count: ${{infinite:"infinite",once:"1",twice:"2"}[e]||e};`,"animation-direction":()=>`animation-direction: ${e};`,"animation-fill":()=>`animation-fill-mode: ${e};`,"animation-play":()=>`animation-play-state: ${e};`,"animation-timing":()=>`animation-timing-function: ${{linear:"linear",in:"cubic-bezier(0.4, 0, 1, 1)",out:"cubic-bezier(0, 0, 0.2, 1)","in-out":"cubic-bezier(0.4, 0, 0.2, 1)"}[e]||e};`,"scroll-behavior":()=>`scroll-behavior: ${e};`,"scroll-m":()=>`scroll-margin: ${r?e:`var(--s-${e})`};`,"scroll-m-x":()=>{let t=r?e:`var(--s-${e})`;return`scroll-margin-left: ${t}; scroll-margin-right: ${t};`},"scroll-m-y":()=>{let t=r?e:`var(--s-${e})`;return`scroll-margin-top: ${t}; scroll-margin-bottom: ${t};`},"scroll-p":()=>`scroll-padding: ${r?e:`var(--s-${e})`};`,"scroll-p-x":()=>{let t=r?e:`var(--s-${e})`;return`scroll-padding-left: ${t}; scroll-padding-right: ${t};`},"scroll-p-y":()=>{let t=r?e:`var(--s-${e})`;return`scroll-padding-top: ${t}; scroll-padding-bottom: ${t};`},"snap-align":()=>`scroll-snap-align: ${e};`,"snap-stop":()=>`scroll-snap-stop: ${e};`,"snap-type":()=>`scroll-snap-type: ${{none:"none",x:"x mandatory",y:"y mandatory",both:"both mandatory","x-proximity":"x proximity","y-proximity":"y proximity"}[e]||e};`,touch:()=>`touch-action: ${{auto:"auto",none:"none","pan-x":"pan-x","pan-y":"pan-y","pan-left":"pan-left","pan-right":"pan-right","pan-up":"pan-up","pan-down":"pan-down","pinch-zoom":"pinch-zoom",manipulation:"manipulation"}[e]||e};`,resize:()=>`resize: ${{none:"none",both:"both",x:"horizontal",y:"vertical"}[e]||e};`,"will-change":()=>`will-change: ${{auto:"auto",scroll:"scroll-position",contents:"contents",transform:"transform",opacity:"opacity"}[e]||e};`,"color-scheme":()=>`color-scheme: ${e};`,"field-sizing":()=>`field-sizing: ${e};`,"forced-color":()=>`forced-color-adjust: ${e};`,"border-style":()=>`border-style: ${e};`,outline:()=>`outline-color: ${r?e:`var(--c-${e})`};`,"outline-style":()=>`outline-style: ${e};`,"outline-w":()=>`outline-width: ${r?e:`${e}px`};`,"outline-offset":()=>`outline-offset: ${r?e:`${e}px`};`,ring:()=>e==="none"?"box-shadow: 0 0 0 0 transparent;":`box-shadow: 0 0 0 var(--ring-offset) var(--ring-offset-color), 0 0 0 calc(${r?e:`var(--ring-${e})`} + var(--ring-offset)) var(--ring-color);`,"ring-color":()=>`--ring-color: ${r?e:`var(--c-${e})`};`,"ring-offset":()=>`--ring-offset: ${r?e:`${e}px`};`,"ring-offset-color":()=>`--ring-offset-color ${r?e:`var(--c-${e})`};`,divide:()=>`border-color: ${r?e:`var(--c-${e})`}; border-style: solid;`,"divide-x":()=>{if(e==="reverse")return"--ss-divide-x-reverse: 1;";let t=r?e:`var(--c-${e})`;return`border-left-color: ${t}; border-right-color: ${t}; border-left-style: solid; border-right-style: solid;`},"divide-y":()=>{if(e==="reverse")return"--ss-divide-y-reverse: 1;";let t=r?e:`var(--c-${e})`;return`border-top-color: ${t}; border-bottom-color: ${t}; border-top-style: solid; border-bottom-style: solid;`},"divide-w":()=>`border-width: ${r?e:`var(--s-${e})`}; border-style: solid;`,"divide-x-w":()=>{let t=r?e:`var(--s-${e})`;return`
-          border-right-width: calc(${t} * var(--ss-divide-x-reverse, 0));
-          border-left-width: calc(${t} * (1 - var(--ss-divide-x-reverse, 0)));
-          border-left-style: solid; 
-          border-right-style: solid;
-        `},"divide-y-w":()=>{let t=r?e:`var(--s-${e})`;return`
-          border-bottom-width: calc(${t} * var(--ss-divide-y-reverse, 0));
-          border-top-width: calc(${t} * (1 - var(--ss-divide-y-reverse, 0)));
-          border-top-style: solid; 
-          border-bottom-style: solid;
-        `},"divide-x:reverse":()=>"--ss-divide-x-reverse: 1;","divide-y:reverse":()=>"--ss-divide-y-reverse: 1;","divide-style":()=>`border-style: ${e};`,stroke:()=>`stroke: ${r?e:`var(--c-${e})`};`,"stroke-w":()=>`stroke-width: ${e};`,fill:()=>e==="none"?"fill: none;":`fill: ${r?e:`var(--c-${e})`};`,"mix-blend":()=>`mix-blend-mode: ${e};`,perspective:()=>`perspective: ${r?e:{none:"none",sm:"500px",md:"1000px",lg:"1500px",xl:"2000px"}[e]||e};`,"perspective-origin":()=>`perspective-origin: ${r?e.replace(/_/g," "):{center:"center",top:"top","top-right":"top right",right:"right","bottom-right":"bottom right",bottom:"bottom","bottom-left":"bottom left",left:"left","top-left":"top left"}[e]||e};`,"rotate-x":()=>`transform: rotateX(${r?e:`${e}deg`});`,"rotate-y":()=>`transform: rotateY(${r?e:`${e}deg`});`,"rotate-z":()=>`transform: rotateZ(${r?e:`${e}deg`});`,"transform-style":()=>`transform-style: ${e};`,backface:()=>`backface-visibility: ${{visible:"visible",hidden:"hidden"}[e]||e};`}[n];return c?c():""}function E(s,n){if(n==="layout"&&F[s])return`[layout~="${s}"] { ${F[s]} }
-`;let e=k(s,n),r="";switch(n){case"layout":r=M(e);break;case"space":r=j(e);break;case"visual":r=T(e);break}if(!r)return"";let l=s.startsWith("divide")&&!s.includes(":reverse"),d="";return l?d=`[visual~="${s}"] > :not([hidden]) ~ :not([hidden])`:d=`[${n}~="${s}"]`,e.state&&e.state!=="dark"&&(l?d=`[visual~="${s}"] > :not([hidden]) ~ :not([hidden]):${e.state}`:d+=`:${e.state}`),`${d} { ${r} }
-`}function A(){let s={layout:new Set,space:new Set,visual:new Set};return document.querySelectorAll("[layout], [space], [visual]").forEach(e=>{["layout","space","visual"].forEach(r=>{let l=e.getAttribute(r);l&&l.split(/\s+/).forEach(d=>{d&&s[r].add(d)})})}),s}function V(s,n){let e=x(n);n.preflight!==!1&&(e+=$());let r=[];for(let[o,m]of Object.entries(s))for(let h of m)r.push({raw:h,attrType:o});let l=[],d=[],c={},{screens:t}=n.theme;for(let o of Object.keys(t))c[o]=[];for(let o of r){let m=k(o.raw,o.attrType);m.state==="dark"?d.push(m):m.breakpoint?(c[m.breakpoint]||(c[m.breakpoint]=[]),c[m.breakpoint].push(m)):l.push(m)}let a=["flex","grid","inline-flex","inline-grid","block","inline","hidden","contents"],i=new Map;for(let o of l)o.attrType&&a.includes(o.property)&&(i.has(o.attrType)||i.set(o.attrType,new Set),i.get(o.attrType).add(o.raw));for(let o of l)e+=E(o.raw,o.attrType);for(let[o,m]of Object.entries(c))if(m.length>0){e+=`
-@media (min-width: ${t[o]}) {
-`;let h=new Set;for(let g of m)if(g.attrType&&a.includes(g.property)&&i.has(g.attrType)){let B=i.get(g.attrType);if(B.size>0&&!B.has(g.raw)&&!h.has(g.raw)){let O=`[${g.attrType}~="${g.raw}"]`;e+=`  ${O} { display: revert-layer; }
-`,h.add(g.raw)}}for(let g of m)e+="  "+E(g.raw,g.attrType);e+=`}
-`}if(d.length>0){let o=n.darkMode||"media";if(o==="media"){e+=`
-@media (prefers-color-scheme: dark) {
-`;for(let m of d)e+="  "+E(m.raw,m.attrType);e+=`}
-`}else{let m=Array.isArray(o)?o[1]:".dark";e+=`
-/* Dark Mode */
-`;for(let h of d){let g=E(h.raw,h.attrType);e+=g.replace(/^(\[[^\]]+\])/,`${m} $1`)}}}return e}function D(s){let n=document.getElementById("senangstart-jit");n||(n=document.createElement("style"),n.id="senangstart-jit",document.head.appendChild(n)),n.textContent=s}function C(){let s=f(),n=b(s),e=A(),r=V(e,n);D(r),new MutationObserver(()=>{let d=A(),c=V(d,n);D(c)}).observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["layout","space","visual"]}),console.log("%c[SenangStart CSS]%c Just-in-Time runtime initialized \u2713","color: #2563EB; font-weight: bold;","color: #10B981;")}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",C):C()})();})();
+  0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
+  50% { transform: none; animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
+}
+
+/* SenangStart CSS - Utility Classes */
+`;let e=[],i=[],d={},{screens:c}=l.theme;for(let r of Object.keys(c))d[r]=[];for(let r of n)r.state==="dark"?i.push(r):r.breakpoint?(d[r.breakpoint]||(d[r.breakpoint]=[]),d[r.breakpoint].push(r)):e.push(r);let a=new Set;for(let r of n)r.attrType==="interact"&&a.add(r.raw);let s=["flex","grid","inline-flex","inline-grid","block","inline","hidden","contents"],o=new Map;for(let r of e)r.attrType&&s.includes(r.property)&&(o.has(r.attrType)||o.set(r.attrType,new Set),o.get(r.attrType).add(r.raw));for(let r of e)t+=f(r,l,!1,a);for(let[r,p]of Object.entries(d))if(p.length>0){t+=`
+@media (min-width: ${c[r]}) {
+`;let u=new Set;for(let v of p)if(v.attrType&&s.includes(v.property)&&o.has(v.attrType)){let g=o.get(v.attrType);if(g.size>0&&!g.has(v.raw)&&!u.has(v.raw)){let h=`[${v.attrType}~="${v.raw}"]`;t+=`  ${h} { display: revert-layer; }
+`,u.add(v.raw)}}for(let v of p)t+="  "+f(v,l,!1,a);t+=`}
+`}if(i.length>0){let r=l.darkMode||"media",p=xt(l);if(r==="media"){t+=`
+/* Dark Mode (prefers-color-scheme) */
+`,t+=`@media (prefers-color-scheme: dark) {
+`;for(let u of i)t+="  "+f(u,l,!0,a);t+=`}
+`}else{t+=`
+/* Dark Mode (${p}) */
+`;for(let u of i){let g=f(u,l,!0,a).replace(/^(\[[^\]]+\])/,`${p} $1`);t+=g}}}return t}var yt={content:["./**/*.html","./src/**/*.{html,jsx,tsx,vue,svelte}","./pages/**/*.{html,jsx,tsx}","./components/**/*.{html,jsx,tsx}"],output:{css:"./public/senangstart.css",minify:!1,aiContext:"./.cursorrules",typescript:"./types/senang.d.ts"},darkMode:"media",preflight:!0,theme:{spacing:{none:"0px",thin:"1px",regular:"2px",thick:"3px",tiny:"4px","tiny-2x":"6px",small:"8px","small-2x":"10px","small-3x":"12px","small-4x":"14px",medium:"16px","medium-2x":"20px","medium-3x":"24px","medium-4x":"28px",large:"32px","large-2x":"36px","large-3x":"40px","large-4x":"44px",big:"48px","big-2x":"56px","big-3x":"64px","big-4x":"80px",giant:"96px","giant-2x":"112px","giant-3x":"128px","giant-4x":"144px",vast:"160px","vast-2x":"176px","vast-3x":"192px","vast-4x":"208px","vast-5x":"224px","vast-6x":"240px","vast-7x":"256px","vast-8x":"288px","vast-9x":"320px","vast-10x":"384px"},radius:{none:"0px",small:"4px",medium:"8px",big:"16px",round:"9999px"},shadow:{none:"none",small:"0 1px 2px rgba(0,0,0,0.05)",medium:"0 4px 6px rgba(0,0,0,0.1)",big:"0 10px 15px rgba(0,0,0,0.15)",giant:"0 25px 50px rgba(0,0,0,0.25)"},fontSize:{mini:"0.75rem",small:"0.875rem",base:"1rem",large:"1.125rem",big:"1.25rem",huge:"1.5rem",grand:"1.875rem",giant:"2.25rem",mount:"3rem",mega:"3.75rem",giga:"4.5rem",tera:"6rem",hero:"8rem"},fontSizeLineHeight:{mini:"1rem",small:"1.25rem",base:"1.5rem",large:"1.75rem",big:"1.75rem",huge:"2rem",grand:"2.25rem",giant:"2.5rem",mount:"1",mega:"1",giga:"1",tera:"1",hero:"1"},fontWeight:{normal:"400",medium:"500",bold:"700"},screens:{mob:"480px",tab:"768px",lap:"1024px",desk:"1280px","tw-sm":"640px","tw-md":"768px","tw-lg":"1024px","tw-xl":"1280px","tw-2xl":"1536px"},colors:{white:"#FFFFFF",black:"#000000",grey:"#6B7280",dark:"#3E4A5D",light:"#DBEAFE",primary:"#2563EB",secondary:"#1E40AF",success:"#10B981",warning:"#F59E0B",danger:"#EF4444","red-50":"#FEF2F2","red-100":"#FEE2E2","red-200":"#FECACA","red-300":"#FCA5A5","red-400":"#F87171","red-500":"#EF4444","red-600":"#DC2626","red-700":"#B91C1C","red-800":"#991B1B","red-900":"#7F1D1D","red-950":"#450A0A","orange-50":"#FFF7ED","orange-100":"#FFEDD5","orange-200":"#FED7AA","orange-300":"#FDBA74","orange-400":"#FB923C","orange-500":"#F97316","orange-600":"#EA580C","orange-700":"#C2410C","orange-800":"#9A3412","orange-900":"#7C2D12","orange-950":"#431407","amber-50":"#FFFBEB","amber-100":"#FEF3C7","amber-200":"#FDE68A","amber-300":"#FCD34D","amber-400":"#FBBF24","amber-500":"#F59E0B","amber-600":"#D97706","amber-700":"#B45309","amber-800":"#92400E","amber-900":"#78350F","amber-950":"#451A03","yellow-50":"#FEFCE8","yellow-100":"#FEF9C3","yellow-200":"#FEF08A","yellow-300":"#FDE047","yellow-400":"#FACC15","yellow-500":"#EAB308","yellow-600":"#CA8A04","yellow-700":"#A16207","yellow-800":"#854D0E","yellow-900":"#713F12","yellow-950":"#422006","lime-50":"#F7FEE7","lime-100":"#ECFCCB","lime-200":"#D9F99D","lime-300":"#BEF264","lime-400":"#A3E635","lime-500":"#84CC16","lime-600":"#65A30D","lime-700":"#4D7C0F","lime-800":"#3F6212","lime-900":"#365314","lime-950":"#1A2E05","green-50":"#F0FDF4","green-100":"#DCFCE7","green-200":"#BBF7D0","green-300":"#86EFAC","green-400":"#4ADE80","green-500":"#22C55E","green-600":"#16A34A","green-700":"#15803D","green-800":"#166534","green-900":"#14532D","green-950":"#052E16","emerald-50":"#ECFDF5","emerald-100":"#D1FAE5","emerald-200":"#A7F3D0","emerald-300":"#6EE7B7","emerald-400":"#34D399","emerald-500":"#10B981","emerald-600":"#059669","emerald-700":"#047857","emerald-800":"#065F46","emerald-900":"#064E3B","emerald-950":"#022C22","teal-50":"#F0FDFA","teal-100":"#CCFBF1","teal-200":"#99F6E4","teal-300":"#5EEAD4","teal-400":"#2DD4BF","teal-500":"#14B8A6","teal-600":"#0D9488","teal-700":"#0F766E","teal-800":"#115E59","teal-900":"#134E4A","teal-950":"#042F2E","cyan-50":"#ECFEFF","cyan-100":"#CFFAFE","cyan-200":"#A5F3FC","cyan-300":"#67E8F9","cyan-400":"#22D3EE","cyan-500":"#06B6D4","cyan-600":"#0891B2","cyan-700":"#0E7490","cyan-800":"#155E75","cyan-900":"#164E63","cyan-950":"#083344","sky-50":"#F0F9FF","sky-100":"#E0F2FE","sky-200":"#BAE6FD","sky-300":"#7DD3FC","sky-400":"#38BDF8","sky-500":"#0EA5E9","sky-600":"#0284C7","sky-700":"#0369A1","sky-800":"#075985","sky-900":"#0C4A6E","sky-950":"#082F49","blue-50":"#EFF6FF","blue-100":"#DBEAFE","blue-200":"#BFDBFE","blue-300":"#93C5FD","blue-400":"#60A5FA","blue-500":"#3B82F6","blue-600":"#2563EB","blue-700":"#1D4ED8","blue-800":"#1E40AF","blue-900":"#1E3A8A","blue-950":"#172554","indigo-50":"#EEF2FF","indigo-100":"#E0E7FF","indigo-200":"#C7D2FE","indigo-300":"#A5B4FC","indigo-400":"#818CF8","indigo-500":"#6366F1","indigo-600":"#4F46E5","indigo-700":"#4338CA","indigo-800":"#3730A3","indigo-900":"#312E81","indigo-950":"#1E1B4B","violet-50":"#F5F3FF","violet-100":"#EDE9FE","violet-200":"#DDD6FE","violet-300":"#C4B5FD","violet-400":"#A78BFA","violet-500":"#8B5CF6","violet-600":"#7C3AED","violet-700":"#6D28D9","violet-800":"#5B21B6","violet-900":"#4C1D95","violet-950":"#2E1065","purple-50":"#FAF5FF","purple-100":"#F3E8FF","purple-200":"#E9D5FF","purple-300":"#D8B4FE","purple-400":"#C084FC","purple-500":"#A855F7","purple-600":"#9333EA","purple-700":"#7E22CE","purple-800":"#6B21A8","purple-900":"#581C87","purple-950":"#3B0764","fuchsia-50":"#FDF4FF","fuchsia-100":"#FAE8FF","fuchsia-200":"#F5D0FE","fuchsia-300":"#F0ABFC","fuchsia-400":"#E879F9","fuchsia-500":"#D946EF","fuchsia-600":"#C026D3","fuchsia-700":"#A21CAF","fuchsia-800":"#86198F","fuchsia-900":"#701A75","fuchsia-950":"#4A044E","pink-50":"#FDF2F8","pink-100":"#FCE7F3","pink-200":"#FBCFE8","pink-300":"#F9A8D4","pink-400":"#F472B6","pink-500":"#EC4899","pink-600":"#DB2777","pink-700":"#BE185D","pink-800":"#9D174D","pink-900":"#831843","pink-950":"#500724","rose-50":"#FFF1F2","rose-100":"#FFE4E6","rose-200":"#FECDD3","rose-300":"#FDA4AF","rose-400":"#FB7185","rose-500":"#F43F5E","rose-600":"#E11D48","rose-700":"#BE123C","rose-800":"#9F1239","rose-900":"#881337","rose-950":"#4C0519","slate-50":"#F8FAFC","slate-100":"#F1F5F9","slate-200":"#E2E8F0","slate-300":"#CBD5E1","slate-400":"#94A3B8","slate-500":"#64748B","slate-600":"#475569","slate-700":"#334155","slate-800":"#1E293B","slate-900":"#0F172A","slate-950":"#020617","gray-50":"#F9FAFB","gray-100":"#F3F4F6","gray-200":"#E5E7EB","gray-300":"#D1D5DB","gray-400":"#9CA3AF","gray-500":"#6B7280","gray-600":"#4B5563","gray-700":"#374151","gray-800":"#1F2937","gray-900":"#111827","gray-950":"#030712","zinc-50":"#FAFAFA","zinc-100":"#F4F4F5","zinc-200":"#E4E4E7","zinc-300":"#D4D4D8","zinc-400":"#A1A1AA","zinc-500":"#71717A","zinc-600":"#52525B","zinc-700":"#3F3F46","zinc-800":"#27272A","zinc-900":"#18181B","zinc-950":"#09090B","neutral-50":"#FAFAFA","neutral-100":"#F5F5F5","neutral-200":"#E5E5E5","neutral-300":"#D4D4D4","neutral-400":"#A3A3A3","neutral-500":"#737373","neutral-600":"#525252","neutral-700":"#404040","neutral-800":"#262626","neutral-900":"#171717","neutral-950":"#0A0A0A","stone-50":"#FAFAF9","stone-100":"#F5F5F4","stone-200":"#E7E5E4","stone-300":"#D6D3D1","stone-400":"#A8A29E","stone-500":"#78716C","stone-600":"#57534E","stone-700":"#44403C","stone-800":"#292524","stone-900":"#1C1917","stone-950":"#0C0A09"},zIndex:{base:"0",low:"10",mid:"50",high:"100",top:"9999"}},extend:{}};function We(n,l,t=new WeakSet){if(t.has(n)||t.has(l))return l;t.add(n),t.add(l);let e={...n};for(let i of Object.keys(l))l[i]&&typeof l[i]=="object"&&!Array.isArray(l[i])?e[i]=We(e[i]||{},l[i],t):e[i]=l[i];return e}function qe(n={}){let l={...yt};return n.content&&(l.content=n.content),n.output&&(l.output={...l.output,...n.output}),n.darkMode!==void 0&&(l.darkMode=n.darkMode),n.preflight!==void 0&&(l.preflight=n.preflight),n.theme&&(l.theme=We(l.theme,n.theme)),l}(function(){"use strict";function n(a){return!(!a||typeof a!="object"||Array.isArray(a)||a.theme&&(typeof a.theme!="object"||Array.isArray(a.theme)))}function l(){let a=document.querySelector('script[type="senangstart/config"]');if(!a)return{};try{let s=JSON.parse(a.textContent);return n(s)?s:(console.error("[SenangStart] Invalid config structure"),{})}catch(s){return console.error("[SenangStart] Invalid config JSON:",s),{}}}function t(){let a=l();return qe(a)}function e(){let a={layout:new Set,space:new Set,visual:new Set,interact:new Set,listens:new Set};return document.querySelectorAll("[layout], [space], [visual], [interact], [listens]").forEach(o=>{["layout","space","visual"].forEach(r=>{let p=o.getAttribute(r);p&&p.split(/\s+/).forEach(u=>{u&&a[r].add(u)})}),["interact","listens"].forEach(r=>{let p=o.getAttribute(r);p&&p.split(/\s+/).forEach(u=>{u&&a[r].add(u)})})}),a}function i(a,s){let o=C(a);return He(o,s)}function d(a){let s=document.getElementById("senangstart-jit");s||(s=document.createElement("style"),s.id="senangstart-jit",document.head.appendChild(s)),s.textContent=a}function c(){let a=t(),s=e(),o=i(s,a);d(o),new MutationObserver(()=>{let p=e(),u=i(p,a);d(u)}).observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["layout","space","visual","interact","listens"]}),console.log("%c[SenangStart CSS]%c Just-in-Time runtime initialized \u2713","color: #2563EB; font-weight: bold;","color: #10B981;")}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",c):c()})();})();