@bookklik/senangstart-css 0.2.10 → 0.2.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.agent/skills/add-utility/SKILL.md +65 -0
- package/.agent/workflows/add-utility.md +2 -0
- package/.agent/workflows/build.md +2 -0
- package/.agent/workflows/dev.md +2 -0
- package/AGENTS.md +30 -0
- package/dist/senangstart-css.js +362 -151
- package/dist/senangstart-css.min.js +175 -174
- package/dist/senangstart-tw.js +4 -4
- package/dist/senangstart-tw.min.js +1 -1
- package/docs/ms/reference/visual/ring-color.md +2 -2
- package/docs/ms/reference/visual/ring-offset.md +3 -3
- package/docs/ms/reference/visual/ring.md +5 -5
- package/docs/public/assets/senangstart-css.min.js +175 -174
- package/docs/public/llms.txt +10 -10
- package/docs/reference/visual/ring-color.md +2 -2
- package/docs/reference/visual/ring-offset.md +3 -3
- package/docs/reference/visual/ring.md +5 -5
- package/package.json +1 -1
- package/src/cdn/tw-conversion-engine.js +4 -4
- package/src/cli/commands/build.js +42 -14
- package/src/cli/commands/dev.js +157 -93
- package/src/compiler/generators/css.js +371 -199
- package/src/compiler/tokenizer.js +25 -23
- package/src/core/tokenizer-core.js +46 -19
- package/src/definitions/visual-borders.js +10 -10
- package/src/utils/common.js +456 -39
- package/src/utils/node-io.js +82 -0
- package/tests/integration/dev-recovery.test.js +231 -0
- package/tests/unit/cli/memory-limits.test.js +169 -0
- package/tests/unit/compiler/css-generation-error-handling.test.js +204 -0
- package/tests/unit/compiler/generators/css-errors.test.js +102 -0
- package/tests/unit/convert-tailwind.test.js +518 -442
- package/tests/unit/utils/common.test.js +376 -26
- package/tests/unit/utils/file-timeout.test.js +154 -0
- package/tests/unit/utils/theme-validation.test.js +181 -0
- package/tests/unit/compiler/generators/css.coverage.test.js +0 -833
- package/tests/unit/convert-tailwind.cli.test.js +0 -95
- package/tests/unit/security.test.js +0 -206
- /package/tests/unit/{convert-tailwind.coverage.test.js → convert-tailwind-edgecases.test.js} +0 -0
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/* SenangStart CSS v0.2.0 | MIT */
|
|
2
|
-
(()=>{var
|
|
2
|
+
(()=>{var f=["mob","tab","lap","desk","tw-sm","tw-md","tw-lg","tw-xl","tw-2xl"],M=["hover","focus","focus-visible","active","disabled","dark","expanded","selected"],C=["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 x(r){if(typeof r!="string"||r.length>1e3)return"";let n=r;n=n.replace(/[\\`$]/g,"");let t=["javascript:","vbscript:","data:","about:","file:","ftp:","mailto:"].join("|"),e=/url\s*\((?:[^()]|\((?:[^()]|\([^()]*\))*\))*\)/gi;n=n.replace(e,s=>t.split("|").some(d=>s.toLowerCase().includes(d))?"url(about:blank)":s);let i=[/expression\s*\(/gi,/\beval\s*\(/gi,/\balert\s*\(/gi,/\bdocument\./gi,/\bwindow\./gi,/on\w+\s*=/gi,/<script[^>]*>/gi,/<\/script>/gi];for(let s of i)n=n.replace(s,"");let u=/@(?:import|charset|namespace|supports|keyframes|font-face|media|page)/gi;n=n.replace(u,""),n=n.replace(/[;]/g,"_");let c=(n.match(/\[/g)||[]).length,a=(n.match(/\]/g)||[]).length;return Math.abs(c-a)>3||Math.max(c,a)>10?"":(n=n.replace(/@/g,""),n.length>500&&(n=n.substring(0,500)),n)}function Ze(r){return!(!r.property||typeof r.property!="string"||r.property.length>100||r.value!==null&&typeof r.value!="string"||r.value&&r.value.length>500||r.breakpoint&&!f.includes(r.breakpoint)||r.state&&!M.includes(r.state))}function Qe(r,n){if(typeof r!="string"||r.length===0||r.length>200)return{raw:r,breakpoint:null,state:null,property:null,value:null,isArbitrary:!1,attrType:n,error:"Invalid token format"};let t={raw:r,breakpoint:null,state:null,property:null,value:null,isArbitrary:!1,attrType:n};if(n==="layout"){if(r.startsWith("z:"))return t.property="z",t.value=r.substring(2),t;if(r.startsWith("overflow:"))return t.property="overflow",t.value=r.substring(9),t;if(C.includes(r))return t.property=r,t.value=r,t;let u=r.split(":");if(u.length===2&&f.includes(u[0]))return t.breakpoint=u[0],t.property=u[1],t.value=u[1],t}let e=r.split(":");if(e.length===1)return t.property=r,t.value=r,t;let i=0;if(f.includes(e[0])&&(t.breakpoint=e[0],i++),M.includes(e[i])&&(t.state=e[i],i++),i<e.length&&(t.property=e[i],i++),i<e.length){let u=e.slice(i).join(":"),c=u.match(/^\[(.+)\]$/);c?(t.value=x(c[1].replace(/_/g," ")),t.isArbitrary=!0):t.value=x(u)}return Ze(t)||(t.error="Invalid token structure"),t}function $(r){let n=[];for(let[t,e]of Object.entries(r))for(let i of e)n.push(Qe(i,t));return n}function z(r){return`/*
|
|
3
3
|
* SenangStart Preflight v1.0
|
|
4
4
|
* An opinionated set of base styles for SenangStart CSS projects
|
|
5
5
|
* Based on modern-normalize and Tailwind CSS Preflight
|
|
@@ -386,7 +386,7 @@ video {
|
|
|
386
386
|
<span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">4</span>
|
|
387
387
|
<span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">5</span>
|
|
388
388
|
<span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">6</span>
|
|
389
|
-
</div>`,highlightValue:"grid"}]}
|
|
389
|
+
</div>`,highlightValue:"grid"}]},j={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">
|
|
390
390
|
<span space="p:small" visual="bg:primary text:white rounded:small">1</span>
|
|
391
391
|
<span space="p:small" visual="bg:primary text:white rounded:small">2</span>
|
|
392
392
|
<span space="p:small" visual="bg:primary text:white rounded:small">3</span>
|
|
@@ -398,7 +398,7 @@ video {
|
|
|
398
398
|
<span space="p:small" visual="bg:primary text:white rounded:small">1</span>
|
|
399
399
|
<span space="p:small" visual="bg:primary text:white rounded:small">2</span>
|
|
400
400
|
<span space="p:small" visual="bg:primary text:white rounded:small">3</span>
|
|
401
|
-
</div>`,highlightValue:"row-reverse"}]},
|
|
401
|
+
</div>`,highlightValue:"row-reverse"}]},B={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;">
|
|
402
402
|
<span space="p:small" visual="bg:primary text:white rounded:small">Item 1</span>
|
|
403
403
|
<span space="p:small" visual="bg:primary text:white rounded:small">Item 2</span>
|
|
404
404
|
<span space="p:small" visual="bg:primary text:white rounded:small">Item 3</span>
|
|
@@ -407,25 +407,25 @@ video {
|
|
|
407
407
|
<span space="p:small" visual="bg:primary text:white rounded:small">Item 1</span>
|
|
408
408
|
<span space="p:small" visual="bg:primary text:white rounded:small">Item 2</span>
|
|
409
409
|
<span space="p:small" visual="bg:primary text:white rounded:small">Item 3</span>
|
|
410
|
-
</div>`,highlightValue:"nowrap"}]},
|
|
410
|
+
</div>`,highlightValue:"nowrap"}]},E={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">
|
|
411
411
|
<span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">Fixed</span>
|
|
412
412
|
<span layout="grow text:center" space="p:small" visual="bg:primary text:white rounded:small">Grows</span>
|
|
413
413
|
<span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">Fixed</span>
|
|
414
414
|
</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;">
|
|
415
415
|
<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>
|
|
416
416
|
<span layout="shrink" space="p:small" visual="bg:primary text:white rounded:small">Can Shrink</span>
|
|
417
|
-
</div>`,highlightValue:"shrink"}]},
|
|
417
|
+
</div>`,highlightValue:"shrink"}]},P={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">
|
|
418
418
|
<span layout="flex:1 text:center" space="p:small" visual="bg:primary text:white rounded:small">flex:1</span>
|
|
419
419
|
<span layout="flex:1 text:center" space="p:small" visual="bg:primary text:white rounded:small">flex:1</span>
|
|
420
420
|
<span layout="flex:1 text:center" space="p:small" visual="bg:primary text:white rounded:small">flex:1</span>
|
|
421
421
|
</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">
|
|
422
422
|
<span layout="flex:auto" space="p:small" visual="bg:primary text:white rounded:small">auto</span>
|
|
423
423
|
<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>
|
|
424
|
-
</div>`,highlightValue:"flex:auto"}]},
|
|
424
|
+
</div>`,highlightValue:"flex:auto"}]},K={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">
|
|
425
425
|
<span layout="basis:[100px] text:center" space="p:small" visual="bg:primary text:white rounded:small">100px</span>
|
|
426
426
|
<span layout="basis:[150px] text:center" space="p:small" visual="bg:primary text:white rounded:small">150px</span>
|
|
427
427
|
<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>
|
|
428
|
-
</div>`,highlightValue:"basis:[100px]"}]},
|
|
428
|
+
</div>`,highlightValue:"basis:[100px]"}]},R={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">
|
|
429
429
|
<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>
|
|
430
430
|
<span layout="order:1" space="p:small" visual="bg:primary text:white rounded:small">B (order:1)</span>
|
|
431
431
|
<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>
|
|
@@ -433,7 +433,7 @@ video {
|
|
|
433
433
|
<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>
|
|
434
434
|
<span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">Middle</span>
|
|
435
435
|
<span layout="order:first" space="p:small" visual="bg:primary text:white rounded:small">Last in DOM (order:first)</span>
|
|
436
|
-
</div>`,highlightValue:"order:first"}]};var
|
|
436
|
+
</div>`,highlightValue:"order:first"}]};var I={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">
|
|
437
437
|
<span space="p:small" visual="bg:primary text:white rounded:small">1</span>
|
|
438
438
|
<span space="p:small" visual="bg:primary text:white rounded:small">2</span>
|
|
439
439
|
<span space="p:small" visual="bg:primary text:white rounded:small">3</span>
|
|
@@ -457,11 +457,11 @@ video {
|
|
|
457
457
|
<span layout="flex center" space="p:small" visual="bg:primary text:white rounded:small">1</span>
|
|
458
458
|
<span layout="flex center" space="p:small" visual="bg:primary text:white rounded:small">2</span>
|
|
459
459
|
<span layout="flex center" space="p:small" visual="bg:primary text:white rounded:small">3</span>
|
|
460
|
-
</div>`,highlightValue:"items:stretch"}]},
|
|
460
|
+
</div>`,highlightValue:"items:stretch"}]},N={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;">
|
|
461
461
|
<span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">Start</span>
|
|
462
462
|
<span layout="self:center" space="p:small" visual="bg:primary text:white rounded:small">self:center</span>
|
|
463
463
|
<span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">Start</span>
|
|
464
|
-
</div>`,highlightValue:"self:center"}]},
|
|
464
|
+
</div>`,highlightValue:"self:center"}]},O={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;">
|
|
465
465
|
<span space="p:small" visual="bg:primary text:white rounded:small">1</span>
|
|
466
466
|
<span space="p:small" visual="bg:primary text:white rounded:small">2</span>
|
|
467
467
|
<span space="p:small" visual="bg:primary text:white rounded:small">3</span>
|
|
@@ -476,26 +476,26 @@ video {
|
|
|
476
476
|
</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">
|
|
477
477
|
<span space="p:small" visual="bg:primary text:white rounded:small">Left</span>
|
|
478
478
|
<span space="p:small" visual="bg:primary text:white rounded:small">Right</span>
|
|
479
|
-
</div>`,highlightValue:"between"}]},
|
|
479
|
+
</div>`,highlightValue:"between"}]},H={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">
|
|
480
480
|
<span space="p:small" visual="bg:primary text:white rounded:small">1</span>
|
|
481
481
|
<span space="p:small" visual="bg:primary text:white rounded:small">2</span>
|
|
482
482
|
<span space="p:small" visual="bg:primary text:white rounded:small">3</span>
|
|
483
|
-
</div>`,highlightValue:"justify-items:center"}]},
|
|
483
|
+
</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">
|
|
484
484
|
<span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">Default</span>
|
|
485
485
|
<span layout="justify-self:center" space="p:small" visual="bg:primary text:white rounded:small">center</span>
|
|
486
486
|
<span layout="justify-self:end" space="p:small" visual="bg:primary text:white rounded:small">end</span>
|
|
487
|
-
</div>`,highlightValue:"justify-self:center"}]},
|
|
487
|
+
</div>`,highlightValue:"justify-self:center"}]},q={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;">
|
|
488
488
|
<span space="p:small" visual="bg:primary text:white rounded:small">1</span>
|
|
489
489
|
<span space="p:small" visual="bg:primary text:white rounded:small">2</span>
|
|
490
490
|
</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;">
|
|
491
491
|
<span space="p:small" visual="bg:primary text:white rounded:small">1</span>
|
|
492
492
|
<span space="p:small" visual="bg:primary text:white rounded:small">2</span>
|
|
493
493
|
<span space="p:small" visual="bg:primary text:white rounded:small">3</span>
|
|
494
|
-
</div>`,highlightValue:"place-items:center"}]},
|
|
494
|
+
</div>`,highlightValue:"place-items:center"}]},U={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;">
|
|
495
495
|
<span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">Default</span>
|
|
496
496
|
<span layout="place-self:center" space="p:small" visual="bg:primary text:white rounded:small">center</span>
|
|
497
497
|
<span space="p:small" visual="bg:neutral-300 dark:bg:neutral-700 text:neutral-800 dark:text:neutral-200 rounded:small">Default</span>
|
|
498
|
-
</div>`,highlightValue:"place-self:center"}]};var
|
|
498
|
+
</div>`,highlightValue:"place-self:center"}]};var _={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">
|
|
499
499
|
<span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">1</span>
|
|
500
500
|
<span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">2</span>
|
|
501
501
|
<span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">3</span>
|
|
@@ -514,7 +514,7 @@ video {
|
|
|
514
514
|
<span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">4</span>
|
|
515
515
|
<span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">5</span>
|
|
516
516
|
<span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">6</span>
|
|
517
|
-
</div>`,highlightValue:"grid-rows:3"}]},
|
|
517
|
+
</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">
|
|
518
518
|
<span layout="col-span:2 text:center" space="p:small" visual="bg:primary text:white rounded:small">col-span:2</span>
|
|
519
519
|
<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>
|
|
520
520
|
<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>
|
|
@@ -525,13 +525,13 @@ video {
|
|
|
525
525
|
<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>
|
|
526
526
|
<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>
|
|
527
527
|
<span layout="col-span:full text:center" space="p:small" visual="bg:primary text:white rounded:small">col-span:full</span>
|
|
528
|
-
</div>`,highlightValue:"col-span:full"}]},
|
|
528
|
+
</div>`,highlightValue:"col-span:full"}]},Z={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">
|
|
529
529
|
<span layout="row-span:2 flex center" space="p:small" visual="bg:primary text:white rounded:small">row-span:2</span>
|
|
530
530
|
<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>
|
|
531
531
|
<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>
|
|
532
532
|
<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>
|
|
533
533
|
<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>
|
|
534
|
-
</div>`,highlightValue:"row-span:2"}]},
|
|
534
|
+
</div>`,highlightValue:"row-span:2"}]},Q={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">
|
|
535
535
|
<span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">1</span>
|
|
536
536
|
<span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">2</span>
|
|
537
537
|
<span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">3</span>
|
|
@@ -541,11 +541,11 @@ video {
|
|
|
541
541
|
<span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">2</span>
|
|
542
542
|
<span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">3</span>
|
|
543
543
|
<span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">4</span>
|
|
544
|
-
</div>`,highlightValue:"grid-flow:col"}]},
|
|
544
|
+
</div>`,highlightValue:"grid-flow:col"}]},ee={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">
|
|
545
545
|
<span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">Auto 1</span>
|
|
546
546
|
<span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">Auto 2</span>
|
|
547
547
|
<span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">Auto 3</span>
|
|
548
|
-
</div>`,highlightValue:"auto-cols:fr"}]};var
|
|
548
|
+
</div>`,highlightValue:"auto-cols:fr"}]};var ae={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">
|
|
549
549
|
<span space="p:small" visual="bg:primary text:white rounded:small">Relative Container</span>
|
|
550
550
|
<span layout="absolute top:0 right:0" space="p:tiny" visual="bg:danger text:white rounded:small">Abs</span>
|
|
551
551
|
</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">
|
|
@@ -558,28 +558,28 @@ video {
|
|
|
558
558
|
<span layout="absolute top:0 right:0" space="p:tiny" visual="bg:primary text:white rounded:small">TR</span>
|
|
559
559
|
<span layout="absolute bottom:0 left:0" space="p:tiny" visual="bg:primary text:white rounded:small">BL</span>
|
|
560
560
|
<span layout="absolute bottom:0 right:0" space="p:tiny" visual="bg:primary text:white rounded:small">BR</span>
|
|
561
|
-
</div>`,highlightValue:"top:0"}]},
|
|
561
|
+
</div>`,highlightValue:"top:0"}]},te={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;">
|
|
562
562
|
<span layout="absolute z:base left:0 top:10px" space="p:small" visual="bg:neutral-400 text:white rounded:small">z:base</span>
|
|
563
563
|
<span layout="absolute z:low left:30px top:20px" space="p:small" visual="bg:neutral-500 text:white rounded:small">z:low</span>
|
|
564
564
|
<span layout="absolute z:mid left:60px top:30px" space="p:small" visual="bg:neutral-600 text:white rounded:small">z:mid</span>
|
|
565
565
|
<span layout="absolute z:high left:90px top:40px" space="p:small" visual="bg:primary text:white rounded:small">z:high</span>
|
|
566
|
-
</div>`,highlightValue:"z:high"}]};var
|
|
566
|
+
</div>`,highlightValue:"z:high"}]};var se={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">
|
|
567
567
|
<span space="p:small" visual="bg:primary text:white rounded:small">Visible</span>
|
|
568
568
|
<span layout="invisible" space="p:small" visual="bg:neutral-300 rounded:small">Invisible</span>
|
|
569
569
|
<span space="p:small" visual="bg:primary text:white rounded:small">Visible</span>
|
|
570
|
-
</div>`,highlightValue:"invisible"}]},
|
|
570
|
+
</div>`,highlightValue:"invisible"}]},re={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;">
|
|
571
571
|
<p visual="text:neutral-800 dark:text:neutral-200">This is a long text that will be clipped because overflow is hidden.</p>
|
|
572
572
|
</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;">
|
|
573
573
|
<p visual="text:neutral-800 dark:text:neutral-200">This is a long text that will show a scrollbar because overflow is auto.</p>
|
|
574
|
-
</div>`,highlightValue:"overflow:auto"}]},
|
|
574
|
+
</div>`,highlightValue:"overflow:auto"}]},ne={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">
|
|
575
575
|
<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>
|
|
576
|
-
</div>`,highlightValue:"box:border"}]},
|
|
576
|
+
</div>`,highlightValue:"box:border"}]},le={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">
|
|
577
577
|
<div layout="float:left" space="p:small m-r:small m-b:small" visual="bg:primary text:white rounded:small">Float</div>
|
|
578
578
|
<p visual="text:neutral-800 dark:text:neutral-200">Text wraps around the floated element naturally.</p>
|
|
579
|
-
</div>`,highlightValue:"float:left"}]},
|
|
579
|
+
</div>`,highlightValue:"float:left"}]},oe={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">
|
|
580
580
|
<div layout="aspect:square flex center" visual="bg:primary text:white rounded:small" style="width: 80px;">1:1</div>
|
|
581
581
|
<div layout="aspect:video flex center" visual="bg:primary text:white rounded:small" style="width: 80px;">16:9</div>
|
|
582
|
-
</div>`,highlightValue:"aspect:square"}]},
|
|
582
|
+
</div>`,highlightValue:"aspect:square"}]},de={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">
|
|
583
583
|
<div style="width: 80px; height: 60px;" visual="bg:neutral-300 rounded:small" layout="overflow:hidden">
|
|
584
584
|
<div layout="object:cover" style="width: 100%; height: 100%;" visual="bg:primary"></div>
|
|
585
585
|
</div>
|
|
@@ -589,17 +589,17 @@ video {
|
|
|
589
589
|
<div layout="object:contain" style="width: 60%; height: 60%;" visual="bg:primary rounded:small"></div>
|
|
590
590
|
</div>
|
|
591
591
|
<span layout="flex center" visual="text:neutral-600 dark:text:neutral-400">object:contain</span>
|
|
592
|
-
</div>`,highlightValue:"object:contain"}]},
|
|
592
|
+
</div>`,highlightValue:"object:contain"}]},pe={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">
|
|
593
593
|
<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>
|
|
594
594
|
<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>
|
|
595
595
|
<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>
|
|
596
|
-
</div>`,highlightValue:"object-pos:center"}]},
|
|
596
|
+
</div>`,highlightValue:"object-pos:center"}]},ue={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">
|
|
597
597
|
<div layout="container text:center" space="p:medium" visual="bg:primary text:white rounded:small">Centered Container</div>
|
|
598
|
-
</div>`,highlightValue:"container"}]},
|
|
598
|
+
</div>`,highlightValue:"container"}]},ce={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">
|
|
599
599
|
<div layout="isolation:isolate" space="p:small" visual="bg:primary text:white rounded:small">isolation:isolate</div>
|
|
600
|
-
</div>`,highlightValue:"isolation:isolate"}]},
|
|
600
|
+
</div>`,highlightValue:"isolation:isolate"}]},me={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;">
|
|
601
601
|
<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>
|
|
602
|
-
</div>`,highlightValue:"overscroll:contain"}]},
|
|
602
|
+
</div>`,highlightValue:"overscroll:contain"}]},ge={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">
|
|
603
603
|
<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>
|
|
604
604
|
</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%;">
|
|
605
605
|
<tbody>
|
|
@@ -623,7 +623,7 @@ video {
|
|
|
623
623
|
<td space="p:small" visual="border:1 border:neutral-300 dark:border:neutral-700 bg:primary text:white rounded:small">B2</td>
|
|
624
624
|
</tr>
|
|
625
625
|
</tbody>
|
|
626
|
-
</table>`,highlightValue:"border:separate"}]},
|
|
626
|
+
</table>`,highlightValue:"border:separate"}]},he={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;">
|
|
627
627
|
<tbody>
|
|
628
628
|
<tr>
|
|
629
629
|
<td space="p:small" visual="bg:primary text:white rounded:small">A1</td>
|
|
@@ -634,7 +634,7 @@ video {
|
|
|
634
634
|
<td space="p:small" visual="bg:primary text:white rounded:small">B2</td>
|
|
635
635
|
</tr>
|
|
636
636
|
</tbody>
|
|
637
|
-
</table>`,highlightValue:"border-spacing:small"}]},
|
|
637
|
+
</table>`,highlightValue:"border-spacing:small"}]},be={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">
|
|
638
638
|
<tbody>
|
|
639
639
|
<tr>
|
|
640
640
|
<td space="p:small" visual="bg:primary text:white">Fixed</td>
|
|
@@ -650,7 +650,7 @@ video {
|
|
|
650
650
|
<td space="p:small" visual="bg:primary text:white">Med</td>
|
|
651
651
|
</tr>
|
|
652
652
|
</tbody>
|
|
653
|
-
</table>`,highlightValue:"table:auto"}]},
|
|
653
|
+
</table>`,highlightValue:"table:auto"}]},xe={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%;">
|
|
654
654
|
<caption layout="caption:top" space="p:small" visual="text:neutral-600 dark:text:neutral-400">Table Caption (Top)</caption>
|
|
655
655
|
<tbody>
|
|
656
656
|
<tr>
|
|
@@ -666,7 +666,7 @@ video {
|
|
|
666
666
|
<td space="p:small" visual="bg:primary text:white rounded:small">Data</td>
|
|
667
667
|
</tr>
|
|
668
668
|
</tbody>
|
|
669
|
-
</table>`,highlightValue:"caption:bottom"}]};var
|
|
669
|
+
</table>`,highlightValue:"caption:bottom"}]};var ye={display:D,flexDirection:j,flexWrap:B,flexItems:E,flexShorthand:P,flexBasis:K,order:R,justifyContent:I,alignItems:L,alignSelf:N,alignContent:O,shorthandAlignment:G,justifyItems:H,justifySelf:J,placeContent:q,placeItems:W,placeSelf:U,gridColumns:_,gridRows:X,gridColSpan:Y,gridRowSpan:Z,gridAutoFlow:Q,gridAutoSizing:ee,position:ae,inset:ie,zIndex:te,visibility:se,overflow:re,boxSizing:ne,floatClear:le,aspectRatio:oe,objectFit:de,objectPosition:pe,container:ue,isolation:ce,overscroll:me,columns:ge,borderCollapse:ve,borderSpacing:he,tableLayout:be,captionSide:xe};function S(r=ye){let n={};for(let t of Object.values(r))if(!t.dynamic&&!(!t.syntax||!t.syntax.includes('layout="[')))for(let e of t.values)e.value.match(/^\d+-\d+$/)||(n[e.value]=e.css);return n}var na={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">
|
|
670
670
|
<div space="p:tiny" visual="bg:primary text:white rounded:small">tiny</div>
|
|
671
671
|
<div space="p:small" visual="bg:primary text:white rounded:small">small</div>
|
|
672
672
|
<div space="p:medium" visual="bg:primary text:white rounded:small">medium</div>
|
|
@@ -674,13 +674,13 @@ video {
|
|
|
674
674
|
</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">
|
|
675
675
|
<div space="p-x:big p-y:small" visual="bg:primary text:white rounded:small">p-x:big p-y:small</div>
|
|
676
676
|
<div space="p-t:big" visual="bg:primary text:white rounded:small">p-t:big</div>
|
|
677
|
-
</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"}]},
|
|
677
|
+
</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"}]},la={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">
|
|
678
678
|
<div space="m:tiny" visual="bg:primary text:white rounded:small">m:tiny</div>
|
|
679
679
|
<div space="m:small" visual="bg:primary text:white rounded:small">m:small</div>
|
|
680
680
|
<div space="m:medium" visual="bg:primary text:white rounded:small">m:medium</div>
|
|
681
681
|
</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">
|
|
682
682
|
<div space="m-x:auto p:small" visual="bg:primary text:white rounded:small" style="width: fit-content;">m-x:auto</div>
|
|
683
|
-
</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"}]},
|
|
683
|
+
</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"}]},oa={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">
|
|
684
684
|
<span space="p:small" visual="bg:primary text:white rounded:small">1</span>
|
|
685
685
|
<span space="p:small" visual="bg:primary text:white rounded:small">2</span>
|
|
686
686
|
<span space="p:small" visual="bg:primary text:white rounded:small">3</span>
|
|
@@ -691,7 +691,7 @@ video {
|
|
|
691
691
|
<span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">4</span>
|
|
692
692
|
<span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">5</span>
|
|
693
693
|
<span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">6</span>
|
|
694
|
-
</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"}]},
|
|
694
|
+
</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"}]},da={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">
|
|
695
695
|
<div space="w:full p:small" visual="bg:primary text:white rounded:small">w:full</div>
|
|
696
696
|
<div space="w:quarter-3x p:small" visual="bg:primary text:white rounded:small">w:quarter-3x</div>
|
|
697
697
|
<div space="w:half p:small" visual="bg:primary text:white rounded:small">w:half</div>
|
|
@@ -703,7 +703,7 @@ video {
|
|
|
703
703
|
<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>
|
|
704
704
|
<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>
|
|
705
705
|
<div space="max-w:[200px] p:small" visual="bg:green-600 text:white rounded:small">max-w:[200px] - Fixed max</div>
|
|
706
|
-
</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"}]},
|
|
706
|
+
</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"}]},pa={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;">
|
|
707
707
|
<div space="h:full p:small" visual="bg:primary text:white rounded:small" layout="flex center">h:full</div>
|
|
708
708
|
<div space="h:third-2x p:small" visual="bg:primary text:white rounded:small" layout="flex center">h:third-2x</div>
|
|
709
709
|
<div space="h:half p:small" visual="bg:primary text:white rounded:small" layout="flex center">h:half</div>
|
|
@@ -715,45 +715,45 @@ video {
|
|
|
715
715
|
<div space="min-h:min p:small" visual="bg:primary text:white rounded:small">min-h:min</div>
|
|
716
716
|
<div space="max-h:max p:small" visual="bg:pink-600 text:white rounded:small">max-h:max</div>
|
|
717
717
|
<div space="min-h:[80px] p:small" visual="bg:amber-600 text:white rounded:small" layout="flex center">min-h:[80px]</div>
|
|
718
|
-
</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"}]},
|
|
718
|
+
</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"}]},fe={padding:na,margin:la,gap:oa,width:da,height:pa};function A(){let r={};for(let n of Object.values(fe))for(let t of n.values)r[t.property]=t.css;return r}var ua={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">
|
|
719
719
|
<div space="p:small" visual="bg:primary text:white rounded:small">primary</div>
|
|
720
720
|
<div space="p:small" visual="bg:secondary text:white rounded:small">secondary</div>
|
|
721
721
|
<div space="p:small" visual="bg:success text:white rounded:small">success</div>
|
|
722
722
|
<div space="p:small" visual="bg:warning text:black rounded:small">warning</div>
|
|
723
723
|
<div space="p:small" visual="bg:danger text:white rounded:small">danger</div>
|
|
724
|
-
</div>`,highlightValue:"bg:primary"}]},
|
|
724
|
+
</div>`,highlightValue:"bg:primary"}]},ca={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">
|
|
725
725
|
<span visual="text:primary">Primary</span>
|
|
726
726
|
<span visual="text:secondary">Secondary</span>
|
|
727
727
|
<span visual="text:success">Success</span>
|
|
728
728
|
<span visual="text:danger">Danger</span>
|
|
729
|
-
</div>`,highlightValue:"text:primary"}]},
|
|
729
|
+
</div>`,highlightValue:"text:primary"}]},ma={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">
|
|
730
730
|
<span visual="text-size:mini">mini (0.75rem / 1rem)</span>
|
|
731
731
|
<span visual="text-size:small">small (0.875rem / 1.25rem)</span>
|
|
732
732
|
<span visual="text-size:base">base (1rem / 1.5rem)</span>
|
|
733
733
|
<span visual="text-size:big">big (1.25rem / 1.75rem)</span>
|
|
734
734
|
<span visual="text-size:giant">giant (2.25rem / 2.5rem)</span>
|
|
735
|
-
</div>`,highlightValue:"text-size:big"}]},
|
|
735
|
+
</div>`,highlightValue:"text-size:big"}]},ga={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">
|
|
736
736
|
<span visual="font:normal">normal</span>
|
|
737
737
|
<span visual="font:medium">medium</span>
|
|
738
738
|
<span visual="font:bold">bold</span>
|
|
739
|
-
</div>`,highlightValue:"font:bold"}]},
|
|
739
|
+
</div>`,highlightValue:"font:bold"}]},va={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">
|
|
740
740
|
<span visual="font:sans">Sans-serif font</span>
|
|
741
741
|
<span visual="font:serif">Serif font</span>
|
|
742
742
|
<span visual="font:mono">Monospace font</span>
|
|
743
|
-
</div>`,highlightValue:"font:sans"}]},
|
|
743
|
+
</div>`,highlightValue:"font:sans"}]},ke={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">
|
|
744
744
|
<span visual="italic">italic</span>
|
|
745
745
|
<span visual="uppercase">upper</span>
|
|
746
746
|
<span visual="underline">underline</span>
|
|
747
747
|
<span visual="line-through">strike</span>
|
|
748
|
-
</div>`,highlightValue:"italic"}]},
|
|
748
|
+
</div>`,highlightValue:"italic"}]},ha={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">
|
|
749
749
|
<span visual="tracking:tighter">tighter spacing</span>
|
|
750
750
|
<span visual="tracking:normal">normal spacing</span>
|
|
751
751
|
<span visual="tracking:widest">widest spacing</span>
|
|
752
|
-
</div>`,highlightValue:"tracking:wide"}]},
|
|
752
|
+
</div>`,highlightValue:"tracking:wide"}]},ba={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">
|
|
753
753
|
<p space="m:0" visual="leading:tight">Tight leading<br>for headings</p>
|
|
754
754
|
<p space="m:0" visual="leading:normal">Normal leading<br>for body text</p>
|
|
755
755
|
<p space="m:0" visual="leading:loose">Loose leading<br>for readability</p>
|
|
756
|
-
</div>`,highlightValue:"leading:relaxed"}]},
|
|
756
|
+
</div>`,highlightValue:"leading:relaxed"}]},xa={name:"border-radius",property:"visual",syntax:'visual="rounded:[value]" | visual="rounded-{t|b|l|r|tl|tr|bl|br}:[value]"',description:"Set border radius for all corners or specific corners",descriptionMs:"Tetapkan jejari sempadan untuk semua bucu atau bucu tertentu",category:"visual",usesScale:"radius",supportsArbitrary:!0,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:"All corners rounded"},{code:'<div visual="rounded:round">Pill shape</div>',description:"Fully round"},{code:'<div visual="rounded-t:medium">Top rounded</div>',description:"Top corners only"},{code:'<div visual="rounded-tl:big rounded-br:big">Opposite corners</div>',description:"Specific corners"}],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">
|
|
757
757
|
<div space="p:small" visual="bg:primary text:white rounded:none">none</div>
|
|
758
758
|
<div space="p:small" visual="bg:primary text:white rounded:small">small</div>
|
|
759
759
|
<div space="p:small" visual="bg:primary text:white rounded:medium">medium</div>
|
|
@@ -763,213 +763,213 @@ video {
|
|
|
763
763
|
<div space="p:small" visual="bg:primary text:white rounded-b:medium">bottom</div>
|
|
764
764
|
<div space="p:small" visual="bg:primary text:white rounded-l:medium">left</div>
|
|
765
765
|
<div space="p:small" visual="bg:primary text:white rounded-r:medium">right</div>
|
|
766
|
-
</div>`,highlightValue:"rounded-t:medium"}]},
|
|
766
|
+
</div>`,highlightValue:"rounded-t:medium"}]},ya={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">
|
|
767
767
|
<div space="p:small" visual="bg:white dark:bg:neutral-800 rounded:small shadow:small">small</div>
|
|
768
768
|
<div space="p:small" visual="bg:white dark:bg:neutral-800 rounded:small shadow:medium">medium</div>
|
|
769
769
|
<div space="p:small" visual="bg:white dark:bg:neutral-800 rounded:small shadow:big">big</div>
|
|
770
|
-
</div>`,highlightValue:"shadow:medium"}]},
|
|
770
|
+
</div>`,highlightValue:"shadow:medium"}]},fa={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">
|
|
771
771
|
<div space="p:small" visual="bg:primary text:white rounded:small opacity:25">25%</div>
|
|
772
772
|
<div space="p:small" visual="bg:primary text:white rounded:small opacity:50">50%</div>
|
|
773
773
|
<div space="p:small" visual="bg:primary text:white rounded:small opacity:75">75%</div>
|
|
774
774
|
<div space="p:small" visual="bg:primary text:white rounded:small opacity:100">100%</div>
|
|
775
|
-
</div>`,highlightValue:"opacity:50"}]},
|
|
775
|
+
</div>`,highlightValue:"opacity:50"}]},ka={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">
|
|
776
776
|
<div space="p:small" visual="bg:primary text:white rounded:small blur:none">none</div>
|
|
777
777
|
<div space="p:small" visual="bg:primary text:white rounded:small blur:tiny">tiny</div>
|
|
778
778
|
<div space="p:small" visual="bg:primary text:white rounded:small blur:small">small</div>
|
|
779
|
-
</div>`,highlightValue:"blur:small"}]},
|
|
779
|
+
</div>`,highlightValue:"blur:small"}]},wa={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">
|
|
780
780
|
<div space="p:small" visual="bg:primary text:white rounded:small cursor:pointer">pointer</div>
|
|
781
781
|
<div space="p:small" visual="bg:primary text:white rounded:small cursor:wait">wait</div>
|
|
782
782
|
<div space="p:small" visual="bg:primary text:white rounded:small cursor:not-allowed">not-allowed</div>
|
|
783
|
-
</div>`,highlightValue:"cursor:pointer"}]},
|
|
783
|
+
</div>`,highlightValue:"cursor:pointer"}]},Ma={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">
|
|
784
784
|
<div space="p:small" visual="bg:primary text:white rounded:small select:none">none (try select)</div>
|
|
785
785
|
<div space="p:small" visual="bg:success text:white rounded:small select:all">all (click to select)</div>
|
|
786
|
-
</div>`,highlightValue:"select:none"}]},
|
|
786
|
+
</div>`,highlightValue:"select:none"}]},Sa={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">
|
|
787
787
|
<div space="p:small" visual="bg:primary text:white rounded:small pointer-events:auto">auto (clickable)</div>
|
|
788
788
|
<div space="p:small" visual="bg:neutral-400 text:white rounded:small pointer-events:none">none (click-through)</div>
|
|
789
|
-
</div>`,highlightValue:"pointer-events:none"}]},
|
|
789
|
+
</div>`,highlightValue:"pointer-events:none"}]},Aa={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">
|
|
790
790
|
<div space="p:small" visual="bg:blue-500 text:white rounded:small mix-blend:multiply">multiply</div>
|
|
791
791
|
<div space="p:small" visual="bg:blue-500 text:white rounded:small mix-blend:screen">screen</div>
|
|
792
|
-
</div>`,highlightValue:"mix-blend:multiply"}]},
|
|
792
|
+
</div>`,highlightValue:"mix-blend:multiply"}]},Fa={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">
|
|
793
793
|
<input type="checkbox" checked visual="accent:primary w:[20px] h:[20px]">
|
|
794
794
|
<input type="radio" checked visual="accent:success w:[20px] h:[20px]">
|
|
795
795
|
<input type="range" visual="accent:secondary w:[100px]">
|
|
796
|
-
</div>`,highlightValue:"accent:primary"}]},
|
|
796
|
+
</div>`,highlightValue:"accent:primary"}]},Va={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">
|
|
797
797
|
<input type="text" placeholder="Type here..." space="p:small" visual="caret:primary border:neutral-300 rounded:small">
|
|
798
|
-
</div>`,highlightValue:"caret:primary"}]},
|
|
798
|
+
</div>`,highlightValue:"caret:primary"}]},Ta={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">
|
|
799
799
|
<select space="p:tiny" visual="appearance:auto"><option>Native</option></select>
|
|
800
800
|
<select space="p:tiny" visual="appearance:none bg:white border:neutral-300 rounded:small"><option>Custom</option></select>
|
|
801
|
-
</div>`,highlightValue:"appearance:none"}]},
|
|
801
|
+
</div>`,highlightValue:"appearance:none"}]},we={backgroundColor:ua,textColor:ca,fontSize:ma,fontWeight:ga,fontFamily:va,typographyKeywords:ke,letterSpacing:ha,lineHeight:ba,borderRadius:xa,boxShadow:ya,opacity:fa,blur:ka,cursor:wa,userSelect:Ma,pointerEvents:Sa,mixBlendMode:Aa,accentColor:Fa,caretColor:Va,appearance:Ta};function F(){let r={};for(let n of ke.values)r[n.value]=n.css;return r}var Me=we;var Ca={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">
|
|
802
802
|
<div space="p:medium" visual="bg-image:gradient-to-r from:blue-500 to:violet-500 text:white rounded:small">gradient-to-r</div>
|
|
803
803
|
<div space="p:medium" visual="bg-image:gradient-to-b from:emerald-500 to:blue-500 text:white rounded:small">gradient-to-b</div>
|
|
804
|
-
</div>`,highlightValue:"bg-image:gradient-to-r"}]}
|
|
804
|
+
</div>`,highlightValue:"bg-image:gradient-to-r"}]},$a={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">
|
|
805
805
|
<div space="p:small" visual="bg:primary text:white rounded:small">fixed</div>
|
|
806
806
|
<div space="p:small" visual="bg:primary text:white rounded:small">scroll</div>
|
|
807
|
-
</div>`,highlightValue:"bg-attachment:fixed"}]},
|
|
807
|
+
</div>`,highlightValue:"bg-attachment:fixed"}]},za={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">
|
|
808
808
|
<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>
|
|
809
|
-
</div>`,highlightValue:"bg-clip:text"}]}
|
|
809
|
+
</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">
|
|
810
810
|
<div space="p:small" visual="bg:primary text:white rounded:small">border</div>
|
|
811
811
|
<div space="p:small" visual="bg:primary text:white rounded:small">padding</div>
|
|
812
812
|
<div space="p:small" visual="bg:primary text:white rounded:small">content</div>
|
|
813
|
-
</div>`,highlightValue:"bg-origin:content"}]},
|
|
813
|
+
</div>`,highlightValue:"bg-origin:content"}]},ja={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">
|
|
814
814
|
<div space="p:small" visual="bg:primary text:white rounded:small">center</div>
|
|
815
815
|
<div space="p:small" visual="bg:primary text:white rounded:small">top</div>
|
|
816
816
|
<div space="p:small" visual="bg:primary text:white rounded:small">bottom</div>
|
|
817
|
-
</div>`,highlightValue:"bg-pos:center"}]},
|
|
817
|
+
</div>`,highlightValue:"bg-pos:center"}]},Ba={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">
|
|
818
818
|
<div space="p:small" visual="bg:primary text:white rounded:small">repeat</div>
|
|
819
819
|
<div space="p:small" visual="bg:primary text:white rounded:small">no-repeat</div>
|
|
820
820
|
<div space="p:small" visual="bg:primary text:white rounded:small">repeat-x</div>
|
|
821
|
-
</div>`,highlightValue:"bg-repeat:no-repeat"}]},
|
|
821
|
+
</div>`,highlightValue:"bg-repeat:no-repeat"}]},Ea={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">
|
|
822
822
|
<div space="p:small" visual="bg:primary text:white rounded:small">auto</div>
|
|
823
823
|
<div space="p:small" visual="bg:primary text:white rounded:small">cover</div>
|
|
824
824
|
<div space="p:small" visual="bg:primary text:white rounded:small">contain</div>
|
|
825
|
-
</div>`,highlightValue:"bg-size:cover"}]},
|
|
825
|
+
</div>`,highlightValue:"bg-size:cover"}]},Pa={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">
|
|
826
826
|
<div space="p:small" visual="bg:primary text:white rounded:small">multiply</div>
|
|
827
827
|
<div space="p:small" visual="bg:primary text:white rounded:small">screen</div>
|
|
828
828
|
<div space="p:small" visual="bg:primary text:white rounded:small">overlay</div>
|
|
829
|
-
</div>`,highlightValue:"bg-blend:multiply"}]},
|
|
829
|
+
</div>`,highlightValue:"bg-blend:multiply"}]},Ka={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">
|
|
830
830
|
<div space="p:medium" visual="backdrop-blur:medium bg:[rgba(255,255,255,0.2)] rounded:small">
|
|
831
831
|
<span visual="text:white">Frosted Glass</span>
|
|
832
832
|
</div>
|
|
833
|
-
</div>`,highlightValue:"backdrop-blur:medium"}]},
|
|
833
|
+
</div>`,highlightValue:"backdrop-blur:medium"}]},Ra={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">
|
|
834
834
|
<div space="p:small" visual="backdrop-brightness:dim rounded:small text:white">dim (50%)</div>
|
|
835
835
|
<div space="p:small" visual="backdrop-brightness:normal rounded:small text:white">normal</div>
|
|
836
836
|
<div space="p:small" visual="backdrop-brightness:vivid rounded:small text:white">bright (150%)</div>
|
|
837
|
-
</div>`,highlightValue:"backdrop-brightness:dark"}]},
|
|
837
|
+
</div>`,highlightValue:"backdrop-brightness:dark"}]},Ia={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">
|
|
838
838
|
<div space="p:small" visual="bg:primary text:white rounded:small">low</div>
|
|
839
839
|
<div space="p:small" visual="bg:primary text:white rounded:small">normal</div>
|
|
840
840
|
<div space="p:small" visual="bg:primary text:white rounded:small">high</div>
|
|
841
|
-
</div>`,highlightValue:"backdrop-contrast:high"}]},
|
|
841
|
+
</div>`,highlightValue:"backdrop-contrast:high"}]},La={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">
|
|
842
842
|
<div space="p:small" visual="bg-image:gradient-to-br from:blue-500 to:emerald-500 rounded:small text:white">Original</div>
|
|
843
843
|
<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>
|
|
844
|
-
</div>`,highlightValue:"backdrop-grayscale:full"}]},
|
|
844
|
+
</div>`,highlightValue:"backdrop-grayscale:full"}]},Na={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">
|
|
845
845
|
<div space="p:small" visual="bg:primary text:white rounded:small">0\xB0</div>
|
|
846
846
|
<div space="p:small" visual="bg:primary text:white rounded:small">90\xB0</div>
|
|
847
847
|
<div space="p:small" visual="bg:primary text:white rounded:small">180\xB0</div>
|
|
848
|
-
</div>`,highlightValue:"backdrop-hue-rotate:90"}]},
|
|
848
|
+
</div>`,highlightValue:"backdrop-hue-rotate:90"}]},Oa={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">
|
|
849
849
|
<div space="p:small" visual="bg:primary text:white rounded:small">none</div>
|
|
850
850
|
<div space="p:small" visual="bg:primary text:white rounded:small">full</div>
|
|
851
|
-
</div>`,highlightValue:"backdrop-invert:full"}]},
|
|
851
|
+
</div>`,highlightValue:"backdrop-invert:full"}]},Ga={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">
|
|
852
852
|
<div space="p:small" visual="bg:primary text:white rounded:small">0</div>
|
|
853
853
|
<div space="p:small" visual="bg:primary text:white rounded:small">50</div>
|
|
854
854
|
<div space="p:small" visual="bg:primary text:white rounded:small">100</div>
|
|
855
|
-
</div>`,highlightValue:"backdrop-opacity:50"}]},
|
|
855
|
+
</div>`,highlightValue:"backdrop-opacity:50"}]},Ha={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">
|
|
856
856
|
<div space="p:small" visual="bg:primary text:white rounded:small">none</div>
|
|
857
857
|
<div space="p:small" visual="bg:primary text:white rounded:small">normal</div>
|
|
858
858
|
<div space="p:small" visual="bg:primary text:white rounded:small">vivid</div>
|
|
859
|
-
</div>`,highlightValue:"backdrop-saturate:vivid"}]},
|
|
859
|
+
</div>`,highlightValue:"backdrop-saturate:vivid"}]},Ja={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">
|
|
860
860
|
<div space="p:small" visual="bg-image:gradient-to-br from:blue-500 to:emerald-500 rounded:small text:white">Original</div>
|
|
861
861
|
<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>
|
|
862
|
-
</div>`,highlightValue:"backdrop-sepia:full"}]},
|
|
862
|
+
</div>`,highlightValue:"backdrop-sepia:full"}]},qa={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">
|
|
863
863
|
<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>
|
|
864
864
|
<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>
|
|
865
|
-
</div>`,highlightValue:"from:blue-500"}]},
|
|
865
|
+
</div>`,highlightValue:"from:blue-500"}]},Wa={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">
|
|
866
866
|
<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>
|
|
867
|
-
</div>`,highlightValue:"via:purple-500"}]},
|
|
867
|
+
</div>`,highlightValue:"via:purple-500"}]},Ua={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">
|
|
868
868
|
<div space="p:medium" visual="bg-image:gradient-to-r from:blue-500 to:purple-500 text:white rounded:small">to:purple-500</div>
|
|
869
869
|
<div space="p:medium" visual="bg-image:gradient-to-r from:blue-500 to:pink-500 text:white rounded:small">to:pink-500</div>
|
|
870
|
-
</div>`,highlightValue:"to:purple-500"}]},
|
|
870
|
+
</div>`,highlightValue:"to:purple-500"}]},Se={backgroundImage:Ca,backgroundAttachment:$a,backgroundClip:za,backgroundOrigin:Da,backgroundPosition:ja,backgroundRepeat:Ba,backgroundSize:Ea,backgroundBlendMode:Pa,gradientFrom:qa,gradientVia:Wa,gradientTo:Ua,backdropBlur:Ka,backdropBrightness:Ra,backdropContrast:Ia,backdropGrayscale:La,backdropHueRotate:Na,backdropInvert:Oa,backdropOpacity:Ga,backdropSaturate:Ha,backdropSepia:Ja},Ae=Se;var _a={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">
|
|
871
871
|
<div space="p:small" visual="bg:primary text:white rounded:small">auto</div>
|
|
872
872
|
<div space="p:small" visual="bg:primary text:white rounded:small">smooth</div>
|
|
873
|
-
</div>`,highlightValue:"scroll-behavior:smooth"}]},
|
|
873
|
+
</div>`,highlightValue:"scroll-behavior:smooth"}]},Xa={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">
|
|
874
874
|
<div space="p:small" visual="bg:primary text:white rounded:small">scroll-m:medium</div>
|
|
875
|
-
</div>`,highlightValue:"scroll-m:medium"}]},
|
|
875
|
+
</div>`,highlightValue:"scroll-m:medium"}]},Ya={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">
|
|
876
876
|
<div space="p:small" visual="bg:primary text:white rounded:small">scroll-p:big</div>
|
|
877
|
-
</div>`,highlightValue:"scroll-p:big"}]},
|
|
877
|
+
</div>`,highlightValue:"scroll-p:big"}]},Za={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">
|
|
878
878
|
<div space="p:small" visual="bg:primary text:white rounded:small">start</div>
|
|
879
879
|
<div space="p:small" visual="bg:primary text:white rounded:small">center</div>
|
|
880
880
|
<div space="p:small" visual="bg:primary text:white rounded:small">end</div>
|
|
881
|
-
</div>`,highlightValue:"snap-align:start"}]},
|
|
881
|
+
</div>`,highlightValue:"snap-align:start"}]},Qa={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">
|
|
882
882
|
<div space="p:small" visual="bg:primary text:white rounded:small">normal</div>
|
|
883
883
|
<div space="p:small" visual="bg:primary text:white rounded:small">always</div>
|
|
884
|
-
</div>`,highlightValue:"snap-stop:always"}]},
|
|
884
|
+
</div>`,highlightValue:"snap-stop:always"}]},ei={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">
|
|
885
885
|
<div space="p:small" visual="bg:primary text:white rounded:small">x</div>
|
|
886
886
|
<div space="p:small" visual="bg:primary text:white rounded:small">y</div>
|
|
887
887
|
<div space="p:small" visual="bg:primary text:white rounded:small">both</div>
|
|
888
|
-
</div>`,highlightValue:"snap-type:x"}]},
|
|
888
|
+
</div>`,highlightValue:"snap-type:x"}]},ai={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">
|
|
889
889
|
<div space="p:small" visual="bg:primary text:white rounded:small">pan-x</div>
|
|
890
890
|
<div space="p:small" visual="bg:primary text:white rounded:small">pan-y</div>
|
|
891
891
|
<div space="p:small" visual="bg:primary text:white rounded:small">manipulation</div>
|
|
892
|
-
</div>`,highlightValue:"touch:manipulation"}]},
|
|
892
|
+
</div>`,highlightValue:"touch:manipulation"}]},ii={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">
|
|
893
893
|
<div space="p:small" visual="bg:primary text:white rounded:small">none</div>
|
|
894
894
|
<div space="p:small" visual="bg:primary text:white rounded:small">x</div>
|
|
895
895
|
<div space="p:small" visual="bg:primary text:white rounded:small">y</div>
|
|
896
896
|
<div space="p:small" visual="bg:primary text:white rounded:small">both</div>
|
|
897
|
-
</div>`,highlightValue:"resize:y"}]},
|
|
897
|
+
</div>`,highlightValue:"resize:y"}]},ti={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">
|
|
898
898
|
<div space="p:small" visual="bg:primary text:white rounded:small">transform</div>
|
|
899
899
|
<div space="p:small" visual="bg:primary text:white rounded:small">opacity</div>
|
|
900
|
-
</div>`,highlightValue:"will-change:transform"}]},
|
|
900
|
+
</div>`,highlightValue:"will-change:transform"}]},si={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">
|
|
901
901
|
<div space="p:small" visual="bg:primary text:white rounded:small">light</div>
|
|
902
902
|
<div space="p:small" visual="bg:primary text:white rounded:small">dark</div>
|
|
903
|
-
</div>`,highlightValue:"color-scheme:dark"}]},
|
|
903
|
+
</div>`,highlightValue:"color-scheme:dark"}]},ri={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">
|
|
904
904
|
<div space="p:small" visual="bg:primary text:white rounded:small">fixed</div>
|
|
905
905
|
<div space="p:small" visual="bg:primary text:white rounded:small">content</div>
|
|
906
|
-
</div>`,highlightValue:"field-sizing:content"}]},
|
|
906
|
+
</div>`,highlightValue:"field-sizing:content"}]},ni={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">
|
|
907
907
|
<div space="p:small" visual="bg:primary text:white rounded:small">auto</div>
|
|
908
908
|
<div space="p:small" visual="bg:primary text:white rounded:small">none</div>
|
|
909
|
-
</div>`,highlightValue:"forced-color:none"}]},
|
|
909
|
+
</div>`,highlightValue:"forced-color:none"}]},Fe={scrollBehavior:_a,scrollMargin:Xa,scrollPadding:Ya,scrollSnapAlign:Za,scrollSnapStop:Qa,scrollSnapType:ei,touchAction:ai,resize:ii,willChange:ti,colorScheme:si,fieldSizing:ri,forcedColorAdjust:ni},Ve=Fe;var li={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">
|
|
910
910
|
<div visual="text:left bg:primary text:white rounded:small" space="p:small">left</div>
|
|
911
911
|
<div visual="text:center bg:primary text:white rounded:small" space="p:small">center</div>
|
|
912
912
|
<div visual="text:right bg:primary text:white rounded:small" space="p:small">right</div>
|
|
913
|
-
</div>`,highlightValue:"text:center"}]},
|
|
913
|
+
</div>`,highlightValue:"text:center"}]},oi={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">
|
|
914
914
|
<span space="p:small" visual="bg:primary text:white rounded:small uppercase">upper</span>
|
|
915
915
|
<span space="p:small" visual="bg:primary text:white rounded:small lowercase">LOWER</span>
|
|
916
916
|
<span space="p:small" visual="bg:primary text:white rounded:small capitalize">capitalize me</span>
|
|
917
|
-
</div>`,highlightValue:"uppercase"}]},
|
|
917
|
+
</div>`,highlightValue:"uppercase"}]},di={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">
|
|
918
918
|
<span space="p:small" visual="bg:primary text:white rounded:small underline">underline</span>
|
|
919
919
|
<span space="p:small" visual="bg:primary text:white rounded:small line-through">line-through</span>
|
|
920
920
|
<span space="p:small" visual="bg:primary text:white rounded:small overline">overline</span>
|
|
921
|
-
</div>`,highlightValue:"underline"}]},
|
|
921
|
+
</div>`,highlightValue:"underline"}]},pi={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">
|
|
922
922
|
<div space="p:small w:[150px]" visual="bg:primary text:white rounded:small truncate">This long text will be truncated with ellipsis</div>
|
|
923
923
|
<div space="p:small w:[150px]" visual="bg:success text:white rounded:small text-clip">This long text will be clipped without ellipsis</div>
|
|
924
|
-
</div>`,highlightValue:"truncate"}]},
|
|
924
|
+
</div>`,highlightValue:"truncate"}]},ui={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">
|
|
925
925
|
<div space="p:small w:[200px]" visual="bg:primary text:white rounded:small text-wrap">This text will wrap normally when needed</div>
|
|
926
926
|
<div space="p:small w:[200px]" visual="bg:success text:white rounded:small text-nowrap">This text won't wrap at all</div>
|
|
927
927
|
<div space="p:small w:[200px]" visual="bg:warning text:black rounded:small text-balance">This heading text is balanced</div>
|
|
928
|
-
</div>`,highlightValue:"text-balance"}]},
|
|
928
|
+
</div>`,highlightValue:"text-balance"}]},ci={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">
|
|
929
929
|
<div space="p:small" visual="bg:primary text:white rounded:small whitespace:normal">Normal spaces collapse</div>
|
|
930
930
|
<div space="p:small" visual="bg:success text:white rounded:small whitespace:nowrap">This text won't wrap to next line</div>
|
|
931
931
|
<div space="p:small" visual="bg:warning text:black rounded:small whitespace:pre">Preserved spaces here</div>
|
|
932
|
-
</div>`,highlightValue:"whitespace:pre"}]},
|
|
932
|
+
</div>`,highlightValue:"whitespace:pre"}]},mi={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">
|
|
933
933
|
<div space="p:small w:[120px]" visual="bg:primary text:white rounded:small break-normal">Supercalifragilisticexpialidocious</div>
|
|
934
934
|
<div space="p:small w:[120px]" visual="bg:success text:white rounded:small break-words">Supercalifragilisticexpialidocious</div>
|
|
935
935
|
<div space="p:small w:[120px]" visual="bg:warning text:black rounded:small break-all">Supercalifragilisticexpialidocious</div>
|
|
936
|
-
</div>`,highlightValue:"break-words"}]},
|
|
936
|
+
</div>`,highlightValue:"break-words"}]},gi={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">
|
|
937
937
|
<div space="p:small" visual="bg:primary text:white rounded:small hyphens:none">none</div>
|
|
938
938
|
<div space="p:small" visual="bg:primary text:white rounded:small hyphens:manual">manual</div>
|
|
939
939
|
<div space="p:small" visual="bg:primary text:white rounded:small hyphens:auto">auto</div>
|
|
940
|
-
</div>`,highlightValue:"hyphens:auto"}]},
|
|
940
|
+
</div>`,highlightValue:"hyphens:auto"}]},vi={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">
|
|
941
941
|
<p space="p:small" visual="bg:primary text:white rounded:small indent:0">No indent on this text paragraph.</p>
|
|
942
942
|
<p space="p:small" visual="bg:success text:white rounded:small indent:medium">Medium indent on this first line of the paragraph.</p>
|
|
943
943
|
<p space="p:small" visual="bg:warning text:black rounded:small indent:big">Bigger indent on this first line of the paragraph.</p>
|
|
944
|
-
</div>`,highlightValue:"indent:medium"}]},
|
|
944
|
+
</div>`,highlightValue:"indent:medium"}]},hi={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">
|
|
945
945
|
<span space="p:small" visual="bg:primary text:white rounded:small align:top">top</span>
|
|
946
946
|
<span space="p:small" visual="bg:success text:white rounded:small align:middle">middle</span>
|
|
947
947
|
<span space="p:small" visual="bg:warning text:black rounded:small align:bottom">bottom</span>
|
|
948
948
|
<span visual="text-size:huge text:neutral-500">Big</span>
|
|
949
|
-
</div>`,highlightValue:"align:middle"}]},
|
|
949
|
+
</div>`,highlightValue:"align:middle"}]},bi={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">
|
|
950
950
|
<span space="p:small" visual="bg:primary text:white rounded:small italic">italic</span>
|
|
951
951
|
<span space="p:small" visual="bg:success text:white rounded:small not-italic">not-italic</span>
|
|
952
|
-
</div>`,highlightValue:"italic"}]},
|
|
952
|
+
</div>`,highlightValue:"italic"}]},xi={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">
|
|
953
953
|
<div space="p:small" visual="bg:primary text:white rounded:small antialiased">antialiased</div>
|
|
954
954
|
<div space="p:small" visual="bg:success text:white rounded:small subpixel-antialiased">subpixel</div>
|
|
955
|
-
</div>`,highlightValue:"antialiased"}]},
|
|
955
|
+
</div>`,highlightValue:"antialiased"}]},yi={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">
|
|
956
956
|
<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>
|
|
957
957
|
<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>
|
|
958
958
|
<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>
|
|
959
|
-
</div>`,highlightValue:"line-clamp:2"}]},
|
|
959
|
+
</div>`,highlightValue:"line-clamp:2"}]},fi={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">
|
|
960
960
|
<ul space="p:small" visual="bg:primary text:white rounded:small list:none"><li>none</li><li>no bullets</li></ul>
|
|
961
961
|
<ul space="p:small" visual="bg:success text:white rounded:small list:disc"><li>disc</li><li>bullet</li></ul>
|
|
962
962
|
<ol space="p:small" visual="bg:warning text:black rounded:small list:decimal"><li>decimal</li><li>numbers</li></ol>
|
|
963
|
-
</div>`,highlightValue:"list:disc"}]},
|
|
963
|
+
</div>`,highlightValue:"list:disc"}]},ki={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">
|
|
964
964
|
<div space="p:small" visual="bg:primary text:white rounded:small text-shadow:none text-size:big">none</div>
|
|
965
965
|
<div space="p:small" visual="bg:success text:white rounded:small text-shadow:small text-size:big">small</div>
|
|
966
966
|
<div space="p:small" visual="bg:warning text:black rounded:small text-shadow:medium text-size:big">medium</div>
|
|
967
967
|
<div space="p:small" visual="bg:danger text:white rounded:small text-shadow:big text-size:big">big</div>
|
|
968
|
-
</div>`,highlightValue:"text-shadow:medium"}]},
|
|
968
|
+
</div>`,highlightValue:"text-shadow:medium"}]},wi={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">
|
|
969
969
|
<div space="p:small" visual="bg:primary text:white rounded:small tabular-nums text-size:big">123,456.00</div>
|
|
970
970
|
<div space="p:small" visual="bg:success text:white rounded:small slashed-zero text-size:big">0123</div>
|
|
971
971
|
<div space="p:small" visual="bg:warning text:black rounded:small ordinal text-size:big">1st 2nd 3rd</div>
|
|
972
|
-
</div>`,highlightValue:"tabular-nums"}]},
|
|
972
|
+
</div>`,highlightValue:"tabular-nums"}]},Te={textAlignment:li,textTransform:oi,textDecoration:di,textOverflow:pi,textWrap:ui,whitespace:ci,wordBreak:mi,hyphens:gi,textIndent:vi,verticalAlign:hi,fontStyle:bi,fontSmoothing:xi,lineClamp:yi,listStyle:fi,textShadow:ki,fontVariantNumeric:wi},Ce=Te;var Mi={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">
|
|
973
973
|
<div layout="flex col" space="g:tiny">
|
|
974
974
|
<span visual="text:neutral-500 text-size:tiny">dramatic</span>
|
|
975
975
|
<div space="p:medium" visual="perspective:dramatic">
|
|
@@ -988,7 +988,7 @@ video {
|
|
|
988
988
|
<div space="p:small" visual="bg:warning text:black rounded:small rotate-y:45">3D</div>
|
|
989
989
|
</div>
|
|
990
990
|
</div>
|
|
991
|
-
</div>`,highlightValue:"perspective:normal"}]},
|
|
991
|
+
</div>`,highlightValue:"perspective:normal"}]},Si={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">
|
|
992
992
|
<div layout="flex col" space="g:tiny">
|
|
993
993
|
<span visual="text:neutral-500 text-size:tiny">left</span>
|
|
994
994
|
<div space="p:medium" visual="perspective:normal perspective-origin:left">
|
|
@@ -1007,7 +1007,7 @@ video {
|
|
|
1007
1007
|
<div space="p:small" visual="bg:warning text:black rounded:small rotate-y:30">3D</div>
|
|
1008
1008
|
</div>
|
|
1009
1009
|
</div>
|
|
1010
|
-
</div>`,highlightValue:"perspective-origin:center"}]},
|
|
1010
|
+
</div>`,highlightValue:"perspective-origin:center"}]},Ai={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">
|
|
1011
1011
|
<div layout="flex col" space="g:tiny">
|
|
1012
1012
|
<span visual="text:neutral-500 text-size:tiny">rotate-x:45</span>
|
|
1013
1013
|
<div space="p:medium" visual="perspective:normal">
|
|
@@ -1026,7 +1026,7 @@ video {
|
|
|
1026
1026
|
<div space="p:small" visual="bg:warning text:black rounded:small rotate-z:45">Z</div>
|
|
1027
1027
|
</div>
|
|
1028
1028
|
</div>
|
|
1029
|
-
</div>`,highlightValue:"rotate-y:45"}]},
|
|
1029
|
+
</div>`,highlightValue:"rotate-y:45"}]},Fi={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">
|
|
1030
1030
|
<div layout="flex col" space="g:tiny">
|
|
1031
1031
|
<span visual="text:neutral-500 text-size:tiny">translate-z:far</span>
|
|
1032
1032
|
<div space="p:medium" visual="perspective:near">
|
|
@@ -1045,7 +1045,7 @@ video {
|
|
|
1045
1045
|
<div space="p:small" visual="bg:warning text:black rounded:small translate-z:near">near</div>
|
|
1046
1046
|
</div>
|
|
1047
1047
|
</div>
|
|
1048
|
-
</div>`,highlightValue:"translate-z:near"}]},
|
|
1048
|
+
</div>`,highlightValue:"translate-z:near"}]},Vi={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">
|
|
1049
1049
|
<div layout="flex col" space="g:tiny">
|
|
1050
1050
|
<span visual="text:neutral-500 text-size:tiny">flat</span>
|
|
1051
1051
|
<div space="p:medium" visual="perspective:normal transform-style:flat rotate-x:20">
|
|
@@ -1058,7 +1058,7 @@ video {
|
|
|
1058
1058
|
<div space="p:small" visual="bg:success text:white rounded:small rotate-y:45">3D</div>
|
|
1059
1059
|
</div>
|
|
1060
1060
|
</div>
|
|
1061
|
-
</div>`,highlightValue:"transform-style:preserve-3d"}]},
|
|
1061
|
+
</div>`,highlightValue:"transform-style:preserve-3d"}]},Ti={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">
|
|
1062
1062
|
<div layout="flex col" space="g:tiny">
|
|
1063
1063
|
<span visual="text:neutral-500 text-size:tiny">visible + rotate-y:180</span>
|
|
1064
1064
|
<div space="p:medium" visual="perspective:normal">
|
|
@@ -1071,74 +1071,74 @@ video {
|
|
|
1071
1071
|
<div space="p:small" visual="bg:danger text:white rounded:small backface:hidden rotate-y:180">\u{1F648}</div>
|
|
1072
1072
|
</div>
|
|
1073
1073
|
</div>
|
|
1074
|
-
</div>`,highlightValue:"backface:hidden"}]},
|
|
1074
|
+
</div>`,highlightValue:"backface:hidden"}]},Ci={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">
|
|
1075
1075
|
<div space="p:medium" visual="bg:primary text:white rounded:small mask:none">none</div>
|
|
1076
1076
|
<div space="p:medium" visual="bg:primary text:white rounded:small mask:fade-y">fade-y</div>
|
|
1077
1077
|
<div space="p:medium" visual="bg:primary text:white rounded:small mask:fade-x">fade-x</div>
|
|
1078
|
-
</div>`,highlightValue:"mask:fade-y"}]}
|
|
1078
|
+
</div>`,highlightValue:"mask:fade-y"}]},$i={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">
|
|
1079
1079
|
<button space="p:small" visual="bg:primary text:white rounded:small transition:all hover:scale:110">hover:scale:110</button>
|
|
1080
1080
|
<button space="p:small" visual="bg:neutral-500 text:white rounded:small transition:all hover:bg:primary">hover:bg:primary</button>
|
|
1081
|
-
</div>`,highlightValue:"hover:scale:110"}]}
|
|
1081
|
+
</div>`,highlightValue:"hover:scale:110"}]},$e={perspective:Mi,perspectiveOrigin:Si,rotate3d:Ai,translateZ:Fi,transformStyle:Vi,backfaceVisibility:Ti,mask:Ci,statePrefixes:$i},ze=$e;var zi={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">
|
|
1082
1082
|
<div space="p:small" visual="bg:primary text:white rounded:small brightness:dim">dim</div>
|
|
1083
1083
|
<div space="p:small" visual="bg:primary text:white rounded:small">normal</div>
|
|
1084
1084
|
<div space="p:small" visual="bg:primary text:white rounded:small brightness:vivid">vivid</div>
|
|
1085
|
-
</div>`,highlightValue:"brightness:bright"}]}
|
|
1085
|
+
</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">
|
|
1086
1086
|
<div space="p:small" visual="bg:primary text:white rounded:small contrast:low">low</div>
|
|
1087
1087
|
<div space="p:small" visual="bg:primary text:white rounded:small">normal</div>
|
|
1088
1088
|
<div space="p:small" visual="bg:primary text:white rounded:small contrast:max">high</div>
|
|
1089
|
-
</div>`,highlightValue:"contrast:high"}]},
|
|
1089
|
+
</div>`,highlightValue:"contrast:high"}]},ji={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">
|
|
1090
1090
|
<div space="p:small" visual="bg:primary text:white rounded:small">none</div>
|
|
1091
1091
|
<div space="p:small" visual="bg:primary text:white rounded:small grayscale:partial">partial</div>
|
|
1092
1092
|
<div space="p:small" visual="bg:primary text:white rounded:small grayscale:full">full</div>
|
|
1093
|
-
</div>`,highlightValue:"grayscale:full"}]},
|
|
1093
|
+
</div>`,highlightValue:"grayscale:full"}]},Bi={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">
|
|
1094
1094
|
<div space="p:small" visual="bg:primary text:white rounded:small">0\xB0</div>
|
|
1095
1095
|
<div space="p:small" visual="bg:primary text:white rounded:small hue-rotate:90">90\xB0</div>
|
|
1096
1096
|
<div space="p:small" visual="bg:primary text:white rounded:small hue-rotate:180">180\xB0</div>
|
|
1097
|
-
</div>`,highlightValue:"hue-rotate:90"}]},
|
|
1097
|
+
</div>`,highlightValue:"hue-rotate:90"}]},Ei={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">
|
|
1098
1098
|
<div space="p:small" visual="bg:primary text:white rounded:small">none</div>
|
|
1099
1099
|
<div space="p:small" visual="bg:primary text:white rounded:small invert:full">full</div>
|
|
1100
|
-
</div>`,highlightValue:"invert:full"}]},
|
|
1100
|
+
</div>`,highlightValue:"invert:full"}]},Pi={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">
|
|
1101
1101
|
<div space="p:small" visual="bg:primary text:white rounded:small saturate:none">none</div>
|
|
1102
1102
|
<div space="p:small" visual="bg:primary text:white rounded:small">normal</div>
|
|
1103
1103
|
<div space="p:small" visual="bg:primary text:white rounded:small saturate:vivid">vivid</div>
|
|
1104
|
-
</div>`,highlightValue:"saturate:vivid"}]},
|
|
1104
|
+
</div>`,highlightValue:"saturate:vivid"}]},Ki={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">
|
|
1105
1105
|
<div space="p:small" visual="bg:primary text:white rounded:small">none</div>
|
|
1106
1106
|
<div space="p:small" visual="bg:primary text:white rounded:small sepia:partial">partial</div>
|
|
1107
1107
|
<div space="p:small" visual="bg:primary text:white rounded:small sepia:full">full</div>
|
|
1108
|
-
</div>`,highlightValue:"sepia:full"}]},
|
|
1108
|
+
</div>`,highlightValue:"sepia:full"}]},Ri={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">
|
|
1109
1109
|
<div space="p:small" visual="bg:primary text:white rounded:small drop-shadow:small">small</div>
|
|
1110
1110
|
<div space="p:small" visual="bg:primary text:white rounded:small drop-shadow:medium">medium</div>
|
|
1111
1111
|
<div space="p:small" visual="bg:primary text:white rounded:small drop-shadow:big">big</div>
|
|
1112
|
-
</div>`,highlightValue:"drop-shadow:medium"}]},De={filterBrightness:
|
|
1112
|
+
</div>`,highlightValue:"drop-shadow:medium"}]},De={filterBrightness:zi,filterContrast:Di,filterGrayscale:ji,filterHueRotate:Bi,filterInvert:Ei,filterSaturate:Pi,filterSepia:Ki,filterDropShadow:Ri},je=De;var Ii={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">
|
|
1113
1113
|
<button space="p:small" visual="bg:primary text:white rounded:small transition:all">transition:all</button>
|
|
1114
|
-
</div>`,highlightValue:"transition:all"}]},
|
|
1114
|
+
</div>`,highlightValue:"transition:all"}]},Li={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">
|
|
1115
1115
|
<button space="p:small" visual="bg:primary text:white rounded:small transition:all duration:fast hover:scale:110">fast</button>
|
|
1116
1116
|
<button space="p:small" visual="bg:primary text:white rounded:small transition:all duration:slow hover:scale:110">slow</button>
|
|
1117
|
-
</div>`,highlightValue:"duration:slow"}]},
|
|
1117
|
+
</div>`,highlightValue:"duration:slow"}]},Ni={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">
|
|
1118
1118
|
<button space="p:small" visual="bg:primary text:white rounded:small transition:all ease:in hover:scale:110">ease:in</button>
|
|
1119
1119
|
<button space="p:small" visual="bg:primary text:white rounded:small transition:all ease:out hover:scale:110">ease:out</button>
|
|
1120
1120
|
<button space="p:small" visual="bg:primary text:white rounded:small transition:all ease:in-out hover:scale:110">ease:in-out</button>
|
|
1121
|
-
</div>`,highlightValue:"ease:out"}]},
|
|
1121
|
+
</div>`,highlightValue:"ease:out"}]},Oi={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">
|
|
1122
1122
|
<button space="p:small" visual="bg:primary text:white rounded:small transition:all delay:instant hover:scale:110">instant</button>
|
|
1123
1123
|
<button space="p:small" visual="bg:primary text:white rounded:small transition:all delay:slow hover:scale:110">slow</button>
|
|
1124
|
-
</div>`,highlightValue:"delay:slow"}]},
|
|
1124
|
+
</div>`,highlightValue:"delay:slow"}]},Gi={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">
|
|
1125
1125
|
<div space="p:small" visual="bg:primary text:white rounded:small animate:spin">spin</div>
|
|
1126
1126
|
<div space="p:small" visual="bg:primary text:white rounded:small animate:pulse">pulse</div>
|
|
1127
1127
|
<div space="p:small" visual="bg:primary text:white rounded:small animate:bounce">bounce</div>
|
|
1128
|
-
</div>`,highlightValue:"animate:spin"}]},
|
|
1128
|
+
</div>`,highlightValue:"animate:spin"}]},Hi={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">
|
|
1129
1129
|
<div space="p:small" visual="bg:primary text:white rounded:small animate:spin animation-duration:fast">fast</div>
|
|
1130
1130
|
<div space="p:small" visual="bg:primary text:white rounded:small animate:spin animation-duration:slow">slow</div>
|
|
1131
|
-
</div>`,highlightValue:"animation-duration:slow"}]},
|
|
1131
|
+
</div>`,highlightValue:"animation-duration:slow"}]},Ji={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">
|
|
1132
1132
|
<div space="p:small" visual="bg:primary text:white rounded:small animate:pulse animation-delay:instant">instant</div>
|
|
1133
1133
|
<div space="p:small" visual="bg:primary text:white rounded:small animate:pulse animation-delay:slow">slow</div>
|
|
1134
|
-
</div>`,highlightValue:"animation-delay:slow"}]},
|
|
1134
|
+
</div>`,highlightValue:"animation-delay:slow"}]},qi={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">
|
|
1135
1135
|
<div space="p:small" visual="bg:primary text:white rounded:small animate:bounce animation-iteration:1">once</div>
|
|
1136
1136
|
<div space="p:small" visual="bg:primary text:white rounded:small animate:bounce animation-iteration:infinite">infinite</div>
|
|
1137
|
-
</div>`,highlightValue:"animation-iteration:infinite"}]},
|
|
1137
|
+
</div>`,highlightValue:"animation-iteration:infinite"}]},Wi={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">
|
|
1138
1138
|
<div space="p:small" visual="bg:primary text:white rounded:small animate:spin animation-direction:normal">normal</div>
|
|
1139
1139
|
<div space="p:small" visual="bg:primary text:white rounded:small animate:spin animation-direction:reverse">reverse</div>
|
|
1140
1140
|
<div space="p:small" visual="bg:primary text:white rounded:small animate:spin animation-direction:alternate">alternate</div>
|
|
1141
|
-
</div>`,highlightValue:"animation-direction:alternate"}]},
|
|
1141
|
+
</div>`,highlightValue:"animation-direction:alternate"}]},Ui={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">
|
|
1142
1142
|
<p visual="text-size:small text:neutral-600 dark:text:neutral-400">Hover to replay animation:</p>
|
|
1143
1143
|
<div layout="flex" space="g:medium">
|
|
1144
1144
|
<div layout="flex col" space="g:tiny">
|
|
@@ -1154,18 +1154,18 @@ video {
|
|
|
1154
1154
|
<div space="p:small" visual="bg:warning text:white rounded:small animate:bounce animation-iteration:1 animation-fill:both hover:animate:bounce">\u2B06</div>
|
|
1155
1155
|
</div>
|
|
1156
1156
|
</div>
|
|
1157
|
-
</div>`,highlightValue:"animation-fill:forwards"}]},
|
|
1157
|
+
</div>`,highlightValue:"animation-fill:forwards"}]},_i={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">
|
|
1158
1158
|
<div space="p:small" visual="bg:primary text:white rounded:small animate:spin animation-play:running">running</div>
|
|
1159
1159
|
<div space="p:small" visual="bg:primary text:white rounded:small animate:spin animation-play:paused">paused</div>
|
|
1160
|
-
</div>`,highlightValue:"animation-play:paused"}]},
|
|
1160
|
+
</div>`,highlightValue:"animation-play:paused"}]},Be={transitionProperty:Ii,transitionDuration:Li,transitionTiming:Ni,transitionDelay:Oi,animation:Gi,animationDuration:Hi,animationDelay:Ji,animationIteration:qi,animationDirection:Wi,animationFill:Ui,animationPlay:_i},Ee=Be;var Xi={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">
|
|
1161
1161
|
<div space="p:small" visual="bg:primary text:white rounded:small scale:75">75%</div>
|
|
1162
1162
|
<div space="p:small" visual="bg:primary text:white rounded:small scale:100">100%</div>
|
|
1163
1163
|
<div space="p:small" visual="bg:primary text:white rounded:small scale:125">125%</div>
|
|
1164
|
-
</div>`,highlightValue:"scale:75"}]},
|
|
1164
|
+
</div>`,highlightValue:"scale:75"}]},Yi={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">
|
|
1165
1165
|
<div space="p:small" visual="bg:primary text:white rounded:small rotate:0">0\xB0</div>
|
|
1166
1166
|
<div space="p:small" visual="bg:primary text:white rounded:small rotate:45">45\xB0</div>
|
|
1167
1167
|
<div space="p:small" visual="bg:primary text:white rounded:small rotate:90">90\xB0</div>
|
|
1168
|
-
</div>`,highlightValue:"rotate:45"}]},
|
|
1168
|
+
</div>`,highlightValue:"rotate:45"}]},Zi={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">
|
|
1169
1169
|
<div layout="flex" space="g:small">
|
|
1170
1170
|
<span visual="text:neutral-500 text-size:small">X axis:</span>
|
|
1171
1171
|
<div space="p:small" visual="bg:primary text:white rounded:small translate-x:0">0</div>
|
|
@@ -1178,14 +1178,14 @@ video {
|
|
|
1178
1178
|
<div space="p:small" visual="bg:success text:white rounded:small translate-y:small">small</div>
|
|
1179
1179
|
<div space="p:small" visual="bg:success text:white rounded:small translate-y:medium">medium</div>
|
|
1180
1180
|
</div>
|
|
1181
|
-
</div>`,highlightValue:"translate-x:medium"}]},
|
|
1181
|
+
</div>`,highlightValue:"translate-x:medium"}]},Qi={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">
|
|
1182
1182
|
<div space="p:small" visual="bg:primary text:white rounded:small skew-x:0">0\xB0</div>
|
|
1183
1183
|
<div space="p:small" visual="bg:primary text:white rounded:small skew-x:6">6\xB0</div>
|
|
1184
1184
|
<div space="p:small" visual="bg:primary text:white rounded:small skew-x:12">12\xB0</div>
|
|
1185
1185
|
</div>`,highlightValue:"skew-x:6"}]},et={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">
|
|
1186
1186
|
<div space="p:small" visual="bg:primary text:white rounded:small rotate:45 origin:center">center</div>
|
|
1187
1187
|
<div space="p:small" visual="bg:primary text:white rounded:small rotate:45 origin:top-left">top-left</div>
|
|
1188
|
-
</div>`,highlightValue:"origin:center"}]},
|
|
1188
|
+
</div>`,highlightValue:"origin:center"}]},Pe={transformScale:Xi,transformRotate:Yi,transformTranslate:Zi,transformSkew:Qi,transformOrigin:et},Ke=Pe;var at={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">
|
|
1189
1189
|
<div space="p:medium" visual="border:primary border-w:regular rounded:small">primary</div>
|
|
1190
1190
|
<div space="p:medium" visual="border:danger border-w:regular rounded:small">danger</div>
|
|
1191
1191
|
<div space="p:medium" visual="border:neutral-400 border-w:regular rounded:small">neutral</div>
|
|
@@ -1193,7 +1193,7 @@ video {
|
|
|
1193
1193
|
<div space="p:medium" visual="border-t:primary border-t-w:regular bg:white dark:bg:neutral-800 rounded:small">top</div>
|
|
1194
1194
|
<div space="p:medium" visual="border-b:primary border-b-w:regular bg:white dark:bg:neutral-800 rounded:small">bottom</div>
|
|
1195
1195
|
<div space="p:medium" visual="border-l:primary border-l-w:regular bg:white dark:bg:neutral-800 rounded:small">left</div>
|
|
1196
|
-
</div>`,highlightValue:"border-t:primary"}]},
|
|
1196
|
+
</div>`,highlightValue:"border-t:primary"}]},it={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">
|
|
1197
1197
|
<div space="p:medium" visual="border:neutral-500 border-w:thin rounded:small bg:white dark:bg:neutral-800">thin</div>
|
|
1198
1198
|
<div space="p:medium" visual="border:neutral-500 border-w:regular rounded:small bg:white dark:bg:neutral-800">regular</div>
|
|
1199
1199
|
<div space="p:medium" visual="border:neutral-500 border-w:thick rounded:small bg:white dark:bg:neutral-800">thick</div>
|
|
@@ -1203,10 +1203,10 @@ video {
|
|
|
1203
1203
|
<div space="p:medium" visual="border:neutral-500 border-w:regular border-style:dotted rounded:small bg:white dark:bg:neutral-800">dotted</div>
|
|
1204
1204
|
</div>`,highlightValue:"border-style:dashed"}]},st={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">
|
|
1205
1205
|
<button space="p:small" visual="outline:primary bg:white dark:bg:neutral-800 rounded:small">outline:primary</button>
|
|
1206
|
-
</div>`,highlightValue:"outline:primary"}]},rt={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">
|
|
1206
|
+
</div>`,highlightValue:"outline:primary"}]},rt={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: var(--ring-inset) 0 0 0 1px var(--ss-ring-color);",description:"Thin ring (1px)",descriptionMs:"Cincin nipis (1px)"},{value:"regular",css:"box-shadow: var(--ring-inset) 0 0 0 2px var(--ss-ring-color);",description:"Regular ring (2px)",descriptionMs:"Cincin biasa (2px)"},{value:"small",css:"box-shadow: var(--ring-inset) 0 0 0 4px var(--ss-ring-color);",description:"Small ring (4px)",descriptionMs:"Cincin kecil (4px)"},{value:"medium",css:"box-shadow: var(--ring-inset) 0 0 0 6px var(--ss-ring-color);",description:"Medium ring (6px)",descriptionMs:"Cincin sederhana (6px)"},{value:"big",css:"box-shadow: var(--ring-inset) 0 0 0 8px var(--ss-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">
|
|
1207
1207
|
<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>
|
|
1208
1208
|
<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>
|
|
1209
|
-
</div>`,highlightValue:"focus-visible:ring:small"}]},nt={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"}]},lt={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"}]},
|
|
1209
|
+
</div>`,highlightValue:"focus-visible:ring:small"}]},nt={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:"--ss-ring-color: var(--c-primary);",description:"Primary ring color",descriptionMs:"Warna cincin utama"},{value:"blue-500",css:"--ss-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"}]},lt={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:"--ss-ring-offset-width: 0px;",description:"No offset",descriptionMs:"Tiada ruang"},{value:"2",css:"--ss-ring-offset-width: 2px;",description:"2px offset",descriptionMs:"Ruang 2px"},{value:"4",css:"--ss-ring-offset-width: 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"}]},Re={borderColor:at,borderWidth:it,borderStyle:tt,outlineColor:st,ring:rt,ringColor:nt,ringOffset:lt},Ie=Re;var ot={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">
|
|
1210
1210
|
<div space="p:medium" visual="bg:white dark:bg:neutral-800">Item 1</div>
|
|
1211
1211
|
<div space="p:medium" visual="bg:white dark:bg:neutral-800">Item 2</div>
|
|
1212
1212
|
<div space="p:medium" visual="bg:white dark:bg:neutral-800">Item 3</div>
|
|
@@ -1269,18 +1269,18 @@ video {
|
|
|
1269
1269
|
<div space="p:medium">dotted</div>
|
|
1270
1270
|
<div space="p:medium">dotted</div>
|
|
1271
1271
|
</div>
|
|
1272
|
-
</div>`,highlightValue:"divide-style:dashed"}]},Le={divideColor:ot,divideWidth:dt,divideStyle:ut,divideReverse:pt},
|
|
1272
|
+
</div>`,highlightValue:"divide-style:dashed"}]},Le={divideColor:ot,divideWidth:dt,divideStyle:ut,divideReverse:pt},Ne=Le;var ct={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">
|
|
1273
1273
|
<svg visual="fill:primary" width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>
|
|
1274
1274
|
<svg visual="fill:danger" width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>
|
|
1275
1275
|
<svg visual="fill:success" width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>
|
|
1276
1276
|
</div>`,highlightValue:"fill:primary"}]},mt={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">
|
|
1277
1277
|
<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>
|
|
1278
1278
|
<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>
|
|
1279
|
-
</div>`,highlightValue:"stroke:primary"}]},
|
|
1279
|
+
</div>`,highlightValue:"stroke:primary"}]},gt={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">
|
|
1280
1280
|
<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>
|
|
1281
1281
|
<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>
|
|
1282
1282
|
<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>
|
|
1283
|
-
</div>`,highlightValue:"stroke-w:2"}]},
|
|
1283
|
+
</div>`,highlightValue:"stroke-w:2"}]},Oe={svgFill:ct,svgStroke:mt,svgStrokeWidth:gt},Ge=Oe;var vt={name:"content-visibility",property:"visual",syntax:'visual="content-visibility:[value]"',description:"Optimize rendering by skipping off-screen content",descriptionMs:"Optimumkan rendering dengan melangkau kandungan luar skrin",category:"visual",values:[{value:"visible",css:"content-visibility: visible;",description:"Render all content",descriptionMs:"Render semua kandungan"},{value:"auto",css:"content-visibility: auto;",description:"Skip when off-screen",descriptionMs:"Langkau bila luar skrin"},{value:"hidden",css:"content-visibility: hidden;",description:"Never render off-screen",descriptionMs:"Jangan render luar skrin"}],examples:[{code:'<section visual="content-visibility:auto">Large list</section>',description:"Auto-optimize large content"},{code:'<div visual="content-visibility:hidden">Hidden until needed</div>',description:"Hide until revealed"}],preview:[{title:"Content Visibility",titleMs:"Ketampakan Kandungan",description:"Performance optimization for off-screen content",descriptionMs:"Pengoptimuman prestasi untuk kandungan luar skrin",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
|
|
1284
1284
|
<div space="p:small" visual="bg:primary text:white rounded:small">visible</div>
|
|
1285
1285
|
<div space="p:small" visual="bg:primary text:white rounded:small">auto</div>
|
|
1286
1286
|
<div space="p:small" visual="bg:primary text:white rounded:small">hidden</div>
|
|
@@ -1291,35 +1291,36 @@ video {
|
|
|
1291
1291
|
</div>`,highlightValue:"contain:strict"}]},bt={name:"writing-mode",property:"visual",syntax:'visual="writing-mode:[value]"',description:"Set writing direction for RTL/vertical text",descriptionMs:"Tetapkan arah penulisan untuk teks RTL/menegak",category:"visual",values:[{value:"horizontal-tb",css:"writing-mode: horizontal-tb;",description:"Left to right",descriptionMs:"Kiri ke kanan"},{value:"vertical-rl",css:"writing-mode: vertical-rl;",description:"Top to bottom RTL",descriptionMs:"Atas ke bawah RTL"},{value:"vertical-lr",css:"writing-mode: vertical-lr;",description:"Top to bottom LTR",descriptionMs:"Atas ke bawah LTR"},{value:"sideways-rl",css:"writing-mode: sideways-rl;",description:"Sideways RTL",descriptionMs:"Menyerong RTL"},{value:"sideways-lr",css:"writing-mode: sideways-lr;",description:"Sideways LTR",descriptionMs:"Menyerong LTR"}],examples:[{code:'<div visual="writing-mode:vertical-rl">Vertical text</div>',description:"Vertical text RTL"},{code:'<div visual="writing-mode:horizontal-tb">Horizontal text</div>',description:"Horizontal text LTR"}],preview:[{title:"Writing Mode",titleMs:"Mod Penulisan",description:"Control text direction and orientation",descriptionMs:"Kawal arah dan orientasi teks",html:`<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
|
|
1292
1292
|
<div space="p:small" visual="bg:primary text:white rounded:small">horizontal-tb</div>
|
|
1293
1293
|
<div space="p:small" visual="bg:primary text:white rounded:small">vertical-rl</div>
|
|
1294
|
-
</div>`,highlightValue:"writing-mode:vertical-rl"}]},
|
|
1295
|
-
`;for(let[
|
|
1296
|
-
`;for(let[
|
|
1297
|
-
`;for(let[
|
|
1298
|
-
`;for(let[
|
|
1299
|
-
`;if(
|
|
1300
|
-
`;for(let[
|
|
1301
|
-
`;for(let[
|
|
1302
|
-
`;
|
|
1294
|
+
</div>`,highlightValue:"writing-mode:vertical-rl"}]},He={contentVisibility:vt,contain:ht,writingMode:bt},Je=He;var qs={...Me,...Ae,...Ve,...Ce,...ze,...je,...Ee,...Ke,...Ie,...Ne,...Ge,...Je};function qe(){return{layoutMap:S(),spacePropertyMap:A(),typographyKeywords:F()}}var{layoutMap:V,typographyKeywords:We}=qe();function y(r){return x(r)}var xt=["transparent","currentColor","inherit","initial","unset"];function v(r,n){return n||xt.includes(r)?r:`var(--c-${r})`}function yt(r){let{theme:n}=r,t=`:root {
|
|
1295
|
+
`;for(let[d,l]of Object.entries(n.spacing))t+=` --s-${d}: ${l};
|
|
1296
|
+
`;for(let[d,l]of Object.entries(n.radius))t+=` --r-${d}: ${l};
|
|
1297
|
+
`;for(let[d,l]of Object.entries(n.shadow))t+=` --shadow-${d}: ${l};
|
|
1298
|
+
`;for(let[d,l]of Object.entries(n.fontSize))t+=` --font-${d}: ${l};
|
|
1299
|
+
`;if(n.fontSizeLineHeight)for(let[d,l]of Object.entries(n.fontSizeLineHeight))t+=` --font-lh-${d}: ${l};
|
|
1300
|
+
`;for(let[d,l]of Object.entries(n.fontWeight))t+=` --fw-${d}: ${l};
|
|
1301
|
+
`;for(let[d,l]of Object.entries(n.colors))t+=` --c-${d}: ${l};
|
|
1302
|
+
`;n.placeholder?t+=` --placeholder-color: ${n.placeholder};
|
|
1303
1303
|
`:t+=` --placeholder-color: #9ca3af;
|
|
1304
1304
|
`,t+=` --gradient-from: transparent;
|
|
1305
1305
|
`,t+=` --gradient-via: transparent;
|
|
1306
1306
|
`,t+=` --gradient-to: transparent;
|
|
1307
1307
|
`,t+=` --gradient-stops: var(--gradient-from), var(--gradient-via), var(--gradient-to);
|
|
1308
|
-
`;for(let[
|
|
1309
|
-
`;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[
|
|
1310
|
-
`;let
|
|
1311
|
-
`;let
|
|
1312
|
-
`;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[
|
|
1313
|
-
`;let
|
|
1314
|
-
`;let s={thin:"100",extralight:"200",light:"300",normal:"400",medium:"500",semibold:"600",bold:"700",extrabold:"800",black:"900"};for(let[
|
|
1308
|
+
`;for(let[d,l]of Object.entries(n.zIndex))t+=` --z-${d}: ${l};
|
|
1309
|
+
`;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[d,l]of Object.entries(e))t+=` --tw-${d.replace(/\./g,"\\\\.")}: ${l};
|
|
1310
|
+
`;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[d,l]of Object.entries(i))t+=` --r-tw-${d}: ${l};
|
|
1311
|
+
`;let u={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[d,l]of Object.entries(u))t+=` --shadow-tw-${d}: ${l};
|
|
1312
|
+
`;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[d,l]of Object.entries(c))t+=` --tw-text-${d}: ${l};
|
|
1313
|
+
`;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[d,l]of Object.entries(a))t+=` --tw-leading-${d}: ${l};
|
|
1314
|
+
`;let s={thin:"100",extralight:"200",light:"300",normal:"400",medium:"500",semibold:"600",bold:"700",extrabold:"800",black:"900"};for(let[d,l]of Object.entries(s))t+=` --tw-font-${d}: ${l};
|
|
1315
1315
|
`;return t+=` --ss-divide-x-reverse: 0;
|
|
1316
1316
|
`,t+=` --ss-divide-y-reverse: 0;
|
|
1317
|
-
`,t+=` --ring-inset:
|
|
1317
|
+
`,t+=` --ring-inset: ;
|
|
1318
|
+
`,t+=` --ss-ring-color: var(--c-primary);
|
|
1318
1319
|
`,t+=`}
|
|
1319
1320
|
|
|
1320
|
-
`,t}function ft(n,l){let{property:t,value:e,isArbitrary:a}=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: ${a?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: ${a?e.replace(/_/g," "):e};`;if(t==="content-visibility")return`content-visibility: ${e};`;if(t==="contain")return`contain: ${a?e:{none:"none",strict:"strict",content:"content",size:"size",layout:"layout",style:"style",paint:"paint"}[e]||e};`;if(t==="writing")return`writing-mode: ${a?e.replace(/_/g," "):{"horizontal-tb":"horizontal-tb","vertical-rl":"vertical-rl","vertical-lr":"vertical-lr"}[e]||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=(i,s)=>{if(s)return i;if(i==="0")return"0";if(i.startsWith("-")){let o=i.substring(1);if(d[o])return`-${d[o]}`}return d[i]?d[i]:`var(--s-${i})`};if(t==="inset")return`inset: ${c(e,a)};`;if(["top","right","bottom","left"].includes(t)){let i=c(e,a);return`${t}: ${i};`}if(t==="inset-x"){let i=c(e,a);return`left: ${i}; right: ${i};`}if(t==="inset-y"){let i=c(e,a);return`top: ${i}; bottom: ${i};`}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: ${a?e:`var(--s-${e})`};`:t==="flex"?`flex: ${a?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;":a?`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;":a?`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: ${a?e:{auto:"auto",min:"min-content",max:"max-content",fr:"minmax(0, 1fr)"}[e]||e};`:t==="auto-rows"?`grid-auto-rows: ${a?e:{auto:"auto",min:"min-content",max:"max-content",fr:"minmax(0, 1fr)"}[e]||e};`:t==="border-spacing"?`border-spacing: ${a?e:`var(--s-${e})`};`:t==="border-spacing-x"?`border-spacing: ${a?e:`var(--s-${e})`} 0;`:t==="border-spacing-y"?`border-spacing: 0 ${a?e:`var(--s-${e})`};`:A[t]||""}function kt(n,l){let{property:t,value:e,isArbitrary:a}=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 i={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)&&i[e]){let r=i[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(a)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 wt(n,l){let{property:t,value:e,isArbitrary:a}=n;if(We[t])return We[t];let c={bg:()=>`background-color: ${m(e,a)};`,"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: ${a?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: ${a?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: ${a?e.replace(/_/g," "):{auto:"auto",cover:"cover",contain:"contain"}[e]||e};`,"bg-blend":()=>`background-blend-mode: ${e};`,from:()=>`--ss-gradient-from: ${m(e,a)}; --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,a)}, var(--ss-gradient-to);`,to:()=>`--ss-gradient-to: ${m(e,a)};`,text:()=>["left","center","right","justify"].includes(e)?`text-align: ${e};`:`color: ${m(e,a)};`,"text-shadow":()=>`text-shadow: ${a?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 i,s;if(a)return i=e,`font-size: ${i};`;if(e.startsWith("tw-")){let o=e.slice(3);i=`var(--tw-text-${o})`,s=`var(--tw-leading-${o})`}else i=`var(--font-${e})`,s=`var(--font-lh-${e})`;return`font-size: ${i}; line-height: ${s};`},font:()=>{let i={sans:"ui-sans-serif, system-ui, sans-serif",serif:"ui-serif, Georgia, serif",mono:"ui-monospace, monospace"};if(i[e])return`font-family: ${i[e]};`;let s;return a?s=e:e.startsWith("tw-")?s=`var(--tw-font-${e.slice(3)})`:s=`var(--fw-${e})`,`font-weight: ${s};`},tracking:()=>`letter-spacing: ${a?e:{tighter:"-0.05em",tight:"-0.025em",normal:"0",wide:"0.025em",wider:"0.05em",widest:"0.1em"}[e]||e};`,leading:()=>`line-height: ${a?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,a)};`,"decoration-thickness":()=>`text-decoration-thickness: ${a?e:`${e}px`};`,"underline-offset":()=>`text-underline-offset: ${a?e:`${e}px`};`,indent:()=>`text-indent: ${a?e:`var(--s-${e})`};`,border:()=>`border-color: ${m(e,a)}; border-style: solid;`,"border-t":()=>`border-top-color: ${m(e,a)}; border-top-style: solid;`,"border-b":()=>`border-bottom-color: ${m(e,a)}; border-bottom-style: solid;`,"border-l":()=>`border-left-color: ${m(e,a)}; border-left-style: solid;`,"border-r":()=>`border-right-color: ${m(e,a)}; border-right-style: solid;`,"border-x":()=>{let i=m(e,a);return`border-left-color: ${i}; border-right-color: ${i}; border-left-style: solid; border-right-style: solid;`},"border-y":()=>{let i=m(e,a);return`border-top-color: ${i}; border-bottom-color: ${i}; border-top-style: solid; border-bottom-style: solid;`},"border-w":()=>`border-width: ${a?e:`var(--s-${e})`};`,"border-t-w":()=>`border-top-width: ${a?e:`var(--s-${e})`};`,"border-b-w":()=>`border-bottom-width: ${a?e:`var(--s-${e})`};`,"border-l-w":()=>`border-left-width: ${a?e:`var(--s-${e})`};`,"border-r-w":()=>`border-right-width: ${a?e:`var(--s-${e})`};`,"border-x-w":()=>{let i=a?e:`var(--s-${e})`;return`border-left-width: ${i}; border-right-width: ${i};`},"border-y-w":()=>{let i=a?e:`var(--s-${e})`;return`border-top-width: ${i}; border-bottom-width: ${i};`},"border-style":()=>`border-style: ${e};`,rounded:()=>`border-radius: var(--r-${e});`,"rounded-t":()=>{let i=a?e:`var(--r-${e})`;return`border-top-left-radius: ${i}; border-top-right-radius: ${i};`},"rounded-b":()=>{let i=a?e:`var(--r-${e})`;return`border-bottom-left-radius: ${i}; border-bottom-right-radius: ${i};`},"rounded-l":()=>{let i=a?e:`var(--r-${e})`;return`border-top-left-radius: ${i}; border-bottom-left-radius: ${i};`},"rounded-r":()=>{let i=a?e:`var(--r-${e})`;return`border-top-right-radius: ${i}; border-bottom-right-radius: ${i};`},"rounded-tl":()=>`border-top-left-radius: ${a?e:`var(--r-${e})`};`,"rounded-tr":()=>`border-top-right-radius: ${a?e:`var(--r-${e})`};`,"rounded-bl":()=>`border-bottom-left-radius: ${a?e:`var(--r-${e})`};`,"rounded-br":()=>`border-bottom-right-radius: ${a?e:`var(--r-${e})`};`,divide:()=>`border-color: ${m(e,a)}; border-style: solid;`,"divide-x":()=>{if(e==="reverse")return"--ss-divide-x-reverse: 1;";let i=m(e,a);return`border-left-color: ${i}; border-right-color: ${i}; border-left-style: solid; border-right-style: solid;`},"divide-y":()=>{if(e==="reverse")return"--ss-divide-y-reverse: 1;";let i=m(e,a);return`border-top-color: ${i}; border-bottom-color: ${i}; border-top-style: solid; border-bottom-style: solid;`},"divide-w":()=>{let i=a?e:`var(--s-${e})`;return`border-top-width: calc(${i} * (1 - var(--ss-divide-y-reverse))); border-bottom-width: calc(${i} * var(--ss-divide-y-reverse)); border-left-width: calc(${i} * (1 - var(--ss-divide-x-reverse))); border-right-width: calc(${i} * var(--ss-divide-x-reverse));`},"divide-x-w":()=>{let i=a?e:`var(--s-${e})`;return`border-right-width: calc(${i} * var(--ss-divide-x-reverse)); border-left-width: calc(${i} * (1 - var(--ss-divide-x-reverse)));`},"divide-y-w":()=>{let i=a?e:`var(--s-${e})`;return`border-bottom-width: calc(${i} * var(--ss-divide-y-reverse)); border-top-width: calc(${i} * (1 - var(--ss-divide-y-reverse)));`},"divide-style":()=>`border-style: ${e};`,"outline-w":()=>`outline-width: ${a?e:`var(--s-${e})`};`,outline:()=>`outline-color: ${m(e,a)};`,"outline-style":()=>`outline-style: ${e};`,"outline-offset":()=>`outline-offset: ${a?e:`var(--s-${e})`};`,"ring-w":()=>`--ss-ring-width: ${a?e:`var(--s-${e})`};`,"ring-color":()=>`--ss-ring-color: ${m(e,a)};`,"ring-offset":()=>`--ss-ring-offset-width: ${a?e:`var(--s-${e})`};`,"ring-offset-color":()=>`--ss-ring-offset-color: ${m(e,a)};`,ring:()=>e==="none"?"box-shadow: 0 0 #0000;":`--ss-ring-width: ${a?e:{thin:"1px",regular:"2px",small:"4px",medium:"6px",big:"8px"}[e]||(parseInt(e)?`${e}px`:`var(--s-${e})`)}; box-shadow: var(--ring-inset) 0 0 0 calc(var(--ss-ring-width) + var(--ss-ring-offset-width, 0px)) var(--c-primary);`,shadow:()=>`box-shadow: var(--shadow-${e});`,opacity:()=>{let i=parseInt(e,10);return!isNaN(i)&&i>=0&&i<=100?`opacity: ${i/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 i=x(e);return`mask-image: ${a?`url(${i})`:`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: ${a?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: ${a?e.replace(/_/g," "):{auto:"auto",cover:"cover",contain:"contain"}[e]||e};`,"mask-type":()=>`mask-type: ${e};`,content:()=>`content: "${x(e).replace(/"/g,'\\"')}";`,blur:()=>{let i={none:"0",tiny:"2px",small:"4px",medium:"8px",big:"12px",giant:"24px",vast:"48px"};return`filter: blur(${a?e:i[e]||i.medium});`},brightness:()=>{let i={dim:.5,dark:.75,normal:1,bright:1.25,vivid:1.5};return`filter: brightness(${a?e:i[e]||i.normal});`},contrast:()=>{let i={low:.5,reduced:.75,normal:1,high:1.25,max:1.5};return`filter: contrast(${a?e:i[e]||i.normal});`},"drop-shadow":()=>{let i={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(${a?e.replace(/_/g," "):i[e]||i.medium});`},grayscale:()=>{let i={none:"0%",partial:"50%",full:"100%"};return`filter: grayscale(${a?e:i[e]||i.full});`},"hue-rotate":()=>`filter: hue-rotate(${a?e:`${e}deg`});`,invert:()=>{let i={none:"0%",partial:"50%",full:"100%"};return`filter: invert(${a?e:i[e]||i.full});`},saturate:()=>{let i={none:0,low:.5,normal:1,high:1.5,vivid:2};return`filter: saturate(${a?e:i[e]||i.normal});`},sepia:()=>{let i={none:"0%",partial:"50%",full:"100%"};return`filter: sepia(${a?e:i[e]||i.full});`},"backdrop-blur":()=>{let i={none:"0",tiny:"2px",small:"4px",medium:"8px",big:"12px",giant:"24px",vast:"48px"};return`backdrop-filter: blur(${a?e:i[e]||i.medium});`},"backdrop-brightness":()=>{let i={dim:.5,dark:.75,normal:1,bright:1.25,vivid:1.5};return`backdrop-filter: brightness(${a?e:i[e]||i.normal});`},"backdrop-contrast":()=>{let i={low:.5,reduced:.75,normal:1,high:1.25,max:1.5};return`backdrop-filter: contrast(${a?e:i[e]||i.normal});`},"backdrop-grayscale":()=>{let i={none:"0%",partial:"50%",full:"100%"};return`backdrop-filter: grayscale(${a?e:i[e]||i.full});`},"backdrop-hue-rotate":()=>`backdrop-filter: hue-rotate(${a?e:`${e}deg`});`,"backdrop-invert":()=>{let i={none:"0%",partial:"50%",full:"100%"};return`backdrop-filter: invert(${a?e:i[e]||i.full});`},"backdrop-opacity":()=>{let i={invisible:0,faint:.25,half:.5,visible:.75,solid:1};return`backdrop-filter: opacity(${a?e:i[e]||i.solid});`},"backdrop-saturate":()=>{let i={none:0,low:.5,normal:1,high:1.5,vivid:2};return`backdrop-filter: saturate(${a?e:i[e]||i.normal});`},"backdrop-sepia":()=>{let i={none:"0%",partial:"50%",full:"100%"};return`backdrop-filter: sepia(${a?e:i[e]||i.full});`},transition:()=>{let i={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: ${i[e]||i.DEFAULT}; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;`},"transition-none":()=>"transition-property: none;",duration:()=>{let i={instant:"75ms",quick:"100ms",fast:"150ms",normal:"200ms",slow:"300ms",slower:"500ms",lazy:"700ms"};return`transition-duration: ${a?e:i[e]||i.normal};`},ease:()=>{let i={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: ${a?e:i[e]||i["in-out"]};`},delay:()=>{let i={instant:"75ms",quick:"100ms",fast:"150ms",normal:"200ms",slow:"300ms",slower:"500ms",lazy:"700ms"};return`transition-delay: ${a?e:i[e]||i.normal};`},"transition-behavior":()=>`transition-behavior: ${e};`,animate:()=>`animation: ${a?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 i={instant:"75ms",quick:"100ms",fast:"150ms",normal:"200ms",slow:"300ms",slower:"500ms",lazy:"700ms"};return`animation-duration: ${a?e:i[e]||i.normal};`},"animation-delay":()=>{let i={instant:"75ms",quick:"100ms",fast:"150ms",normal:"200ms",slow:"300ms",slower:"500ms",lazy:"700ms"};return`animation-delay: ${a?e:i[e]||i.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(${a?e:parseInt(e)/100});`,"scale-x":()=>`transform: scaleX(${a?e:parseInt(e)/100});`,"scale-y":()=>`transform: scaleY(${a?e:parseInt(e)/100});`,rotate:()=>`transform: rotate(${a?e:`${e}deg`});`,"translate-x":()=>`transform: translateX(${a?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(${a?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(${a?e:`${e}deg`});`,"skew-y":()=>`transform: skewY(${a?e:`${e}deg`});`,"-skew-x":()=>`transform: skewX(${a?`-${e}`:`-${e}deg`});`,"-skew-y":()=>`transform: skewY(${a?`-${e}`:`-${e}deg`});`,"rotate-x":()=>`transform: rotateX(${a?e:`${e}deg`});`,"rotate-y":()=>`transform: rotateY(${a?e:`${e}deg`});`,"rotate-z":()=>`transform: rotateZ(${a?e:`${e}deg`});`,"translate-z":()=>`transform: translateZ(${a?e:{near:"50px",far:"-50px",0:"0"}[e]||`var(--s-${e})`});`,origin:()=>`transform-origin: ${a?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 i={none:"none",small:"250px",medium:"500px",big:"750px",giant:"1000px",vast:"1500px"};return`perspective: ${a?e:i[e]||i.medium};`},"perspective-origin":()=>`perspective-origin: ${a?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: ${a?e:`var(--c-${e})`};`,appearance:()=>`appearance: ${e};`,caret:()=>`caret-color: ${a?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: ${a?e:`var(--s-${e})`};`,"scroll-m-t":()=>`scroll-margin-top: ${a?e:`var(--s-${e})`};`,"scroll-m-r":()=>`scroll-margin-right: ${a?e:`var(--s-${e})`};`,"scroll-m-b":()=>`scroll-margin-bottom: ${a?e:`var(--s-${e})`};`,"scroll-m-l":()=>`scroll-margin-left: ${a?e:`var(--s-${e})`};`,"scroll-m-x":()=>{let i=a?e:`var(--s-${e})`;return`scroll-margin-left: ${i}; scroll-margin-right: ${i};`},"scroll-m-y":()=>{let i=a?e:`var(--s-${e})`;return`scroll-margin-top: ${i}; scroll-margin-bottom: ${i};`},"scroll-p":()=>`scroll-padding: ${a?e:`var(--s-${e})`};`,"scroll-p-t":()=>`scroll-padding-top: ${a?e:`var(--s-${e})`};`,"scroll-p-r":()=>`scroll-padding-right: ${a?e:`var(--s-${e})`};`,"scroll-p-b":()=>`scroll-padding-bottom: ${a?e:`var(--s-${e})`};`,"scroll-p-l":()=>`scroll-padding-left: ${a?e:`var(--s-${e})`};`,"scroll-p-x":()=>{let i=a?e:`var(--s-${e})`;return`scroll-padding-left: ${i}; scroll-padding-right: ${i};`},"scroll-p-y":()=>{let i=a?e:`var(--s-${e})`;return`scroll-padding-top: ${i}; scroll-padding-bottom: ${i};`},"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: ${a?e:`var(--c-${e})`};`,stroke:()=>e==="none"?"stroke: none;":e==="current"?"stroke: currentColor;":`stroke: ${a?e:`var(--c-${e})`};`,"stroke-w":()=>`stroke-width: ${a?e:`${e}px`};`,"forced-colors":()=>`forced-color-adjust: ${e};`}[t];return c?c():""}function f(n,l,t=!1,e=new Set){let{raw:a,attrType:d,breakpoint:c,state:i}=n,s="";switch(d){case"layout":s=ft(n,l);break;case"space":s=kt(n,l);break;case"visual":s=wt(n,l);break}if(!s)return"";let o=a.startsWith("divide"),r="";if(o?r=`[${d}~="${a}"] > :not([hidden]) ~ :not([hidden])`:r=`[${d}~="${a}"]`,i&&i!=="dark")if(o)r=`[${d}~="${a}"] > :not([hidden]) ~ :not([hidden]):${i}`;else{let p=g=>({expanded:'[aria-expanded="true"]',selected:'[aria-selected="true"]',disabled:":disabled"})[g]||`:${g}`,u=[];u.push(`${r}${p(i)}`);let v={hover:"hoverable",focus:"focusable","focus-visible":"focusable",active:"pressable",expanded:"expandable",selected:"selectable"};if(v[i]){let g=v[i],h=i;(i==="focus"||i==="focus-visible")&&(h="focus-within");let F=p(h),_e=`[layout~="${g}"]:not([layout~="disabled"])${F} ${r}`;if(u.push(_e),e&&e.size>0)for(let V of e){let Ye=`[interact~="${V}"]:not([layout~="disabled"])${F} ~ [listens~="${V}"]${r}`;u.push(Ye)}}r=u.join(`,
|
|
1321
|
-
`)}return`${
|
|
1322
|
-
`}function
|
|
1321
|
+
`,t}function ft(r,n){let{property:t,value:e,isArbitrary:i}=r;if(t===e&&V[t])return V[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};`;if(t==="content-visibility")return`content-visibility: ${e};`;if(t==="contain")return`contain: ${i?e:{none:"none",strict:"strict",content:"content",size:"size",layout:"layout",style:"style",paint:"paint"}[e]||e};`;if(t==="writing")return`writing-mode: ${i?e.replace(/_/g," "):{"horizontal-tb":"horizontal-tb","vertical-rl":"vertical-rl","vertical-lr":"vertical-lr"}[e]||e};`;let u={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||a==="0")return"0";if(a.startsWith("-")){let d=a.substring(1);if(u[d])return`-${u[d]}`}return u[a]?u[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: ${y(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: ${y(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})`};`:V[t]||""}function kt(r,n){let{property:t,value:e,isArbitrary:i}=r,u={min:"min-content",max:"max-content",fit:"fit-content"},c=["w","h","min-w","max-w","min-h","max-h"];if(c.includes(t)&&u[e]){let l=u[e];return{w:`width: ${l};`,h:`height: ${l};`,"min-w":`min-width: ${l};`,"max-w":`max-width: ${l};`,"min-h":`min-height: ${l};`,"max-h":`max-height: ${l};`}[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 l=a[e];return{w:`width: ${l};`,h:`height: ${l};`,"min-w":`min-width: ${l};`,"max-w":`max-width: ${l};`,"min-h":`min-height: ${l};`,"max-h":`max-height: ${l};`}[t]||""}let s;if(i)s=e;else{let l=e&&e.startsWith("-"),o=l?e.substring(1):e||"",p;o.startsWith("tw-")?p=`var(--tw-${o.slice(3).replace(/\./g,"\\\\.")})`:p=`var(--s-${o})`,s=l?`calc(${p} * -1)`:p}if(e==="auto"){let l="auto";return{m:`margin: ${l};`,"m-x":`margin-left: ${l}; margin-right: ${l};`,"m-y":`margin-top: ${l}; margin-bottom: ${l};`,"m-t":`margin-top: ${l};`,"m-r":`margin-right: ${l};`,"m-b":`margin-bottom: ${l};`,"m-l":`margin-left: ${l};`}[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 wt(r,n){let{property:t,value:e,isArbitrary:i}=r;if(We[t])return We[t];let c={bg:()=>`background-color: ${v(e,i)};`,"bg-image":()=>{if(!e||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"},d=e.replace("gradient-to-",""),l=s[d];if(l)return`background-image: linear-gradient(${l}, var(--ss-gradient-stops, transparent));`}return`background-image: ${i?y(`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: ${v(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), ${v(e,i)}, var(--ss-gradient-to);`,to:()=>`--ss-gradient-to: ${v(e,i)};`,text:()=>["left","center","right","justify"].includes(e)?`text-align: ${e};`:`color: ${v(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 d=e.slice(3);a=`var(--tw-text-${d})`,s=`var(--tw-leading-${d})`}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: ${v(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: ${v(e,i)}; border-style: solid;`,"border-t":()=>`border-top-color: ${v(e,i)}; border-top-style: solid;`,"border-b":()=>`border-bottom-color: ${v(e,i)}; border-bottom-style: solid;`,"border-l":()=>`border-left-color: ${v(e,i)}; border-left-style: solid;`,"border-r":()=>`border-right-color: ${v(e,i)}; border-right-style: solid;`,"border-x":()=>{let a=v(e,i);return`border-left-color: ${a}; border-right-color: ${a}; border-left-style: solid; border-right-style: solid;`},"border-y":()=>{let a=v(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-t-w":()=>`border-top-width: ${i?e:`var(--s-${e})`};`,"border-b-w":()=>`border-bottom-width: ${i?e:`var(--s-${e})`};`,"border-l-w":()=>`border-left-width: ${i?e:`var(--s-${e})`};`,"border-r-w":()=>`border-right-width: ${i?e:`var(--s-${e})`};`,"border-x-w":()=>{let a=i?e:`var(--s-${e})`;return`border-left-width: ${a}; border-right-width: ${a};`},"border-y-w":()=>{let a=i?e:`var(--s-${e})`;return`border-top-width: ${a}; border-bottom-width: ${a};`},"border-style":()=>`border-style: ${e};`,rounded:()=>`border-radius: var(--r-${e});`,"rounded-t":()=>{let a=i?e:`var(--r-${e})`;return`border-top-left-radius: ${a}; border-top-right-radius: ${a};`},"rounded-b":()=>{let a=i?e:`var(--r-${e})`;return`border-bottom-left-radius: ${a}; border-bottom-right-radius: ${a};`},"rounded-l":()=>{let a=i?e:`var(--r-${e})`;return`border-top-left-radius: ${a}; border-bottom-left-radius: ${a};`},"rounded-r":()=>{let a=i?e:`var(--r-${e})`;return`border-top-right-radius: ${a}; border-bottom-right-radius: ${a};`},"rounded-tl":()=>`border-top-left-radius: ${i?e:`var(--r-${e})`};`,"rounded-tr":()=>`border-top-right-radius: ${i?e:`var(--r-${e})`};`,"rounded-bl":()=>`border-bottom-left-radius: ${i?e:`var(--r-${e})`};`,"rounded-br":()=>`border-bottom-right-radius: ${i?e:`var(--r-${e})`};`,divide:()=>`border-color: ${v(e,i)}; border-style: solid;`,"divide-x":()=>{if(e==="reverse")return"--ss-divide-x-reverse: 1;";let a=v(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=v(e,i);return`border-top-color: ${a}; border-bottom-color: ${a}; border-top-style: solid; border-bottom-style: solid;`},"divide-w":()=>{let a=i?e:`var(--s-${e})`;return`border-top-width: calc(${a} * (1 - var(--ss-divide-y-reverse))); border-bottom-width: calc(${a} * var(--ss-divide-y-reverse)); border-left-width: calc(${a} * (1 - var(--ss-divide-x-reverse))); border-right-width: calc(${a} * var(--ss-divide-x-reverse));`},"divide-x-w":()=>{let a=i?e:`var(--s-${e})`;return`border-right-width: calc(${a} * var(--ss-divide-x-reverse)); border-left-width: calc(${a} * (1 - var(--ss-divide-x-reverse)));`},"divide-y-w":()=>{let a=i?e:`var(--s-${e})`;return`border-bottom-width: calc(${a} * var(--ss-divide-y-reverse)); border-top-width: calc(${a} * (1 - var(--ss-divide-y-reverse)));`},"divide-style":()=>`border-style: ${e};`,"outline-w":()=>`outline-width: ${i?e:`var(--s-${e})`};`,outline:()=>e==="none"?"outline: none;":`outline-color: ${v(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: ${v(e,i)};`,"ring-offset":()=>`--ss-ring-offset-width: ${i?e:`var(--s-${e})`};`,"ring-offset-color":()=>`--ss-ring-offset-color: ${v(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(--ring-inset) 0 0 0 calc(var(--ss-ring-width) + var(--ss-ring-offset-width, 0px)) var(--ss-ring-color);`,"ring-inset":()=>"--ring-inset: inset;",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=y(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: "${y(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 Mt(r){if(!r||typeof r!="string"||(r=r.trim(),!r)||!r.endsWith(";"))return!1;let n=r.substring(0,r.length-1).split(":");if(n.length<2)return!1;let t=n[0].trim(),e=n.slice(1).join(":").trim();return!(!t||!e)}function k(r,n,t=!1,e=new Set){try{if(!r||typeof r!="object")return console.warn("[SenangStart] Invalid token object:",r),"";let{raw:i,attrType:u,breakpoint:c,state:a}=r;if(!u||typeof u!="string")return console.warn("[SenangStart] Invalid token attrType:",u),"";if(!i||typeof i!="string")return console.warn("[SenangStart] Invalid token raw:",i),"";let s="";switch(u){case"layout":try{s=ft(r,n)}catch(o){return console.warn(`[SenangStart] Error generating layout rule for "${i}": ${o.message}`),""}break;case"space":try{s=kt(r,n)}catch(o){return console.warn(`[SenangStart] Error generating space rule for "${i}": ${o.message}`),""}break;case"visual":try{s=wt(r,n)}catch(o){return console.warn(`[SenangStart] Error generating visual rule for "${i}": ${o.message}`),""}break;default:return console.warn(`[SenangStart] Unknown attrType: ${u}`),""}if(!s)return"";if(!Mt(s))return console.warn(`[SenangStart] Invalid CSS rule generated for "${i}": ${s}`),"";let d=i&&i.startsWith("divide"),l="";if(d?l=`[${u}~="${i}"] > :not([hidden]) ~ :not([hidden])`:l=`[${u}~="${i}"]`,a&&a!=="dark")if(d)l=`[${u}~="${i}"] > :not([hidden]) ~ :not([hidden]):${a}`;else{let o=g=>({expanded:'[aria-expanded="true"]',selected:'[aria-selected="true"]',disabled:":disabled"})[g]||`:${g}`,p=[];p.push(`${l}${o(a)}`);let h={hover:"hoverable",focus:"focusable","focus-visible":"focusable",active:"pressable",expanded:"expandable",selected:"selectable"};if(h[a]){let g=h[a],m=a;(a==="focus"||a==="focus-visible")&&(m="focus-within");let b=o(m),w=`[layout~="${g}"]:not([layout~="disabled"])${b} ${l}`;if(p.push(w),e&&e.size>0)for(let T of e){let Ye=`[interact~="${T}"]:not([layout~="disabled"])${b} ~ [listens~="${T}"]${l}`;p.push(Ye)}}l=p.join(`,
|
|
1322
|
+
`)}return`${l} { ${s} }
|
|
1323
|
+
`}catch(i){return console.warn(`[SenangStart] Error in generateRule: ${i.message}`),""}}function St(r){let n=r.darkMode||"media";return Array.isArray(n)?n[1]||".dark":n==="selector"?".dark":null}function At(r,n){let t=[];try{let e="";if(!n||typeof n!="object")return t.push({type:"config",message:"Invalid config provided"}),{css:"",errors:t};if(!Array.isArray(r))return t.push({type:"tokens",message:"Invalid tokens provided"}),{css:"",errors:t};try{e+=yt(n)}catch(o){t.push({type:"variables",message:o.message}),console.warn(`[SenangStart] Error generating CSS variables: ${o.message}`)}if(n.preflight!==!1)try{e+=z(n)}catch(o){t.push({type:"preflight",message:o.message}),console.warn(`[SenangStart] Error generating preflight: ${o.message}`)}e+=`/* SenangStart CSS - Animation Keyframes */
|
|
1323
1324
|
@keyframes spin {
|
|
1324
1325
|
to { transform: rotate(360deg); }
|
|
1325
1326
|
}
|
|
@@ -1335,14 +1336,14 @@ video {
|
|
|
1335
1336
|
}
|
|
1336
1337
|
|
|
1337
1338
|
/* SenangStart CSS - Utility Classes */
|
|
1338
|
-
`;let
|
|
1339
|
-
@media (min-width: ${
|
|
1340
|
-
`;let
|
|
1341
|
-
`,
|
|
1342
|
-
`}if(
|
|
1339
|
+
`;let i=[],u=[],c={},{screens:a}=n.theme||{};if(a&&typeof a=="object")for(let o of Object.keys(a))c[o]=[];for(let o of r)try{o&&typeof o=="object"?o.state==="dark"?u.push(o):o.breakpoint?(c[o.breakpoint]||(c[o.breakpoint]=[]),c[o.breakpoint].push(o)):i.push(o):t.push({type:"token_format",token:o,message:"Token is not an object"})}catch(p){t.push({type:"token_processing",token:o?.raw,message:p.message}),console.warn(`[SenangStart] Error processing token: ${p.message}`)}let s=new Set;for(let o of r)try{o&&o.attrType==="interact"&&o.raw&&s.add(o.raw)}catch(p){t.push({type:"interact_collection",token:o?.raw,message:p.message}),console.warn(`[SenangStart] Error collecting interact IDs: ${p.message}`)}let d=["flex","grid","inline-flex","inline-grid","block","inline","hidden","contents"],l=new Map;for(let o of i)try{o.attrType&&d.includes(o.property)&&(l.has(o.attrType)||l.set(o.attrType,new Set),l.get(o.attrType).add(o.raw))}catch(p){t.push({type:"display_track",token:o?.raw,message:p.message}),console.warn(`[SenangStart] Error tracking display properties: ${p.message}`)}for(let o of i)try{let p=k(o,n,!1,s);p?e+=p:t.push({type:"rule_generation",token:o.raw,message:"No rule generated"})}catch(p){t.push({type:"rule_generation",token:o.raw,message:p.message}),console.warn(`[SenangStart] Error generating base rule: ${p.message}`)}for(let[o,p]of Object.entries(c))try{if(p.length>0){let h=a&&a[o]?a[o]:o;e+=`
|
|
1340
|
+
@media (min-width: ${h}) {
|
|
1341
|
+
`;let g=new Set;for(let m of p)try{if(m.attrType&&d.includes(m.property)&&l.has(m.attrType)){let b=l.get(m.attrType);if(b.size>0&&!b.has(m.raw)&&!g.has(m.raw)){let w=`[${m.attrType}~="${m.raw}"]`;e+=` ${w} { display: revert-layer; }
|
|
1342
|
+
`,g.add(m.raw)}}}catch(b){t.push({type:"display_reset",token:m.raw,message:b.message}),console.warn(`[SenangStart] Error generating display reset: ${b.message}`)}for(let m of p)try{let b=k(m,n,!1,s);b?e+=" "+b:t.push({type:"responsive_rule",token:m.raw,message:"No rule generated"})}catch(b){t.push({type:"responsive_rule",token:m.raw,message:b.message}),console.warn(`[SenangStart] Error generating responsive rule: ${b.message}`)}e+=`}
|
|
1343
|
+
`}}catch(h){t.push({type:"breakpoint_generation",message:`Error generating breakpoint ${o}: ${h.message}`}),console.warn(`[SenangStart] Error generating breakpoint ${o}: ${h.message}`)}if(u.length>0)try{let o=n.darkMode||"media",p=St(n);if(o==="media"){e+=`
|
|
1343
1344
|
/* Dark Mode (prefers-color-scheme) */
|
|
1344
|
-
`,
|
|
1345
|
-
`;for(let
|
|
1346
|
-
`}else{
|
|
1345
|
+
`,e+=`@media (prefers-color-scheme: dark) {
|
|
1346
|
+
`;for(let h of u)try{let g=k(h,n,!0,s);g?e+=" "+g:t.push({type:"dark_rule",token:h.raw,message:"No rule generated"})}catch(g){t.push({type:"dark_rule",token:h.raw,message:g.message}),console.warn(`[SenangStart] Error generating dark rule (media): ${g.message}`)}e+=`}
|
|
1347
|
+
`}else{e+=`
|
|
1347
1348
|
/* Dark Mode (${p}) */
|
|
1348
|
-
`;for(let
|
|
1349
|
+
`;for(let h of u)try{let g=k(h,n,!0,s);if(g){let m=g.replace(/^(\[[^\]]+\])/,`${p} $1`);e+=m}else t.push({type:"dark_rule",token:h.raw,message:"No rule generated"})}catch(g){t.push({type:"dark_rule",token:h.raw,message:g.message}),console.warn(`[SenangStart] Error generating dark rule (selector): ${g.message}`)}}}catch(o){t.push({type:"dark_mode_generation",message:o.message}),console.warn(`[SenangStart] Error generating dark mode rules: ${o.message}`)}return{css:e,errors:t}}catch(e){return t.push({type:"fatal",message:e.message}),console.error(`[SenangStart] Fatal error in generateCSSWithErrors: ${e.message}`),{css:"",errors:t}}}function Ue(r,n){let{css:t}=At(r,n);return t}var Ft={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",print:"print","tw-sm":"640px","tw-md":"768px","tw-lg":"1024px","tw-xl":"1280px","tw-2xl":"1536px"},placeholder:"#9ca3af",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 _e(r,n,t=new WeakSet){if(t.has(r)||t.has(n))return n;t.add(r),t.add(n);let e={...r};for(let i of Object.keys(n))n[i]&&typeof n[i]=="object"&&!Array.isArray(n[i])?e[i]=_e(e[i]||{},n[i],t):e[i]=n[i];return e}function Xe(r={}){let n={...Ft};return r.content&&(n.content=r.content),r.output&&(n.output={...n.output,...r.output}),r.darkMode!==void 0&&(n.darkMode=r.darkMode),r.preflight!==void 0&&(n.preflight=r.preflight),r.theme&&(n.theme=_e(n.theme,r.theme)),n}(function(){"use strict";function r(a){return!(!a||typeof a!="object"||Array.isArray(a)||a.theme&&(typeof a.theme!="object"||Array.isArray(a.theme)))}function n(){let a=document.querySelector('script[type="senangstart/config"]');if(!a)return{};try{let s=JSON.parse(a.textContent);return r(s)?s:(console.error("[SenangStart] Invalid config structure"),{})}catch(s){return console.error("[SenangStart] Invalid config JSON:",s),{}}}function t(){let a=n();return Xe(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(d=>{["layout","space","visual"].forEach(l=>{let o=d.getAttribute(l);o&&o.split(/\s+/).forEach(p=>{p&&a[l].add(p)})}),["interact","listens"].forEach(l=>{let o=d.getAttribute(l);o&&o.split(/\s+/).forEach(p=>{p&&a[l].add(p)})})}),a}function i(a,s){let d=$(a);return Ue(d,s)}function u(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(),d=i(s,a);u(d),new MutationObserver(()=>{let o=e(),p=i(o,a);u(p)}).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()})();})();
|