@bookklik/senangstart-css 0.2.9 → 0.2.10

package/dist/senangstart-css.js

@@ -39,11 +39,16 @@
     if (typeof value !== "string") {
       return "";
     }
+    let sanitized = value;
     const dangerousChars = /[;]/g;
-    if (dangerousChars.test(value)) {
-      return value.replace(dangerousChars, "_");
-    }
-    return value;
+    sanitized = sanitized.replace(dangerousChars, "_");
+    const atRules = /@import|@charset|@namespace|@supports|@keyframes/gi;
+    sanitized = sanitized.replace(atRules, "");
+    const expression = /expression\s*\(/gi;
+    sanitized = sanitized.replace(expression, "");
+    const dangerousUrls = /(url\s*\(\s*['"]?)(javascript:|data:)([^)]*\))/gi;
+    sanitized = sanitized.replace(dangerousUrls, "$1about:blank$3");
+    return sanitized;
   }
 
   // src/core/tokenizer-core.js
@@ -221,10 +226,13 @@ hr {
 }
 
 /*
- * Add the correct text decoration in Chrome, Edge, and Safari
+ * Set default placeholder color to a semi-transparent gray
+ * Uses theme variable for customization with fallback
  */
-abbr:where([title]) {
-  text-decoration: underline dotted;
+input::placeholder,
+textarea::placeholder {
+  opacity: 1; /* 1 */
+  color: var(--placeholder-color, #9ca3af); /* 2 */
 }
 
 /*
@@ -367,10 +375,17 @@ input:where([type='submit']) {
 }
 
 /*
- * Add the correct vertical alignment in Chrome and Firefox
+ * Add the correct text decoration in Chrome, Edge, and Safari
  */
-progress {
-  vertical-align: baseline;
+abbr:where([title]) {
+  text-decoration: underline dotted;
+}
+
+/*
+ * Make sure links don't get underlined in headings
+ */
+h1, h2, h3, h4, h5, h6 {
+  text-decoration: none;
 }
 
 /*
@@ -442,14 +457,17 @@ legend {
 }
 
 /*
- * Remove default list styles
+ * 1. Use a more sensible default box-sizing strategy
  */
-ol,
-ul,
-menu {
-  list-style: none;
-  margin: 0;
-  padding: 0;
+*,
+::before,
+::after {
+  box-sizing: border-box;
+  /* Support safe-area-inset for modern devices with notches */
+  padding-top: env(safe-area-inset-top);
+  padding-right: env(safe-area-inset-right);
+  padding-bottom: env(safe-area-inset-bottom);
+  padding-left: env(safe-area-inset-left);
 }
 
 /*
@@ -3151,11 +3169,12 @@ video {
   var borderRadius = {
     name: "border-radius",
     property: "visual",
-    syntax: 'visual="rounded:[value]"',
-    description: "Set border radius",
-    descriptionMs: "Tetapkan jejari sempadan",
+    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: true,
     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" },
@@ -3164,8 +3183,10 @@ video {
       { value: "round", css: "border-radius: var(--r-round);", description: "Fully round", descriptionMs: "Sepenuhnya bulat" }
     ],
     examples: [
-      { code: '<div visual="rounded:medium">Rounded corners</div>', description: "Medium radius" },
-      { code: '<div visual="rounded:round">Pill shape</div>', description: "Pill" }
+      { 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: [
       {
@@ -3183,12 +3204,25 @@ video {
         description: "Round element corners from subtle to pill-shaped",
         descriptionMs: "Bulatkan sudut elemen dari halus hingga berbentuk pil",
         html: `<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <div space="p:small" visual="bg:primary text:white rounded:none">none</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small">small</div>
-  <div space="p:small" visual="bg:primary text:white rounded:medium">medium</div>
-  <div space="p:small" visual="bg:primary text:white rounded:round">round</div>
+   <div space="p:small" visual="bg:primary text:white rounded:none">none</div>
+   <div space="p:small" visual="bg:primary text:white rounded:small">small</div>
+   <div space="p:small" visual="bg:primary text:white rounded:medium">medium</div>
+   <div space="p:small" visual="bg:primary text:white rounded:round">round</div>
 </div>`,
         highlightValue: "rounded:medium"
+      },
+      {
+        title: "Directional Border Radius",
+        titleMs: "Jejari Sempadan Arah",
+        description: "Round specific corners for unique shapes",
+        descriptionMs: "Bulatkan bucu tertentu untuk bentuk unik",
+        html: `<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+   <div space="p:small" visual="bg:primary text:white rounded-t:medium">top</div>
+   <div space="p:small" visual="bg:primary text:white rounded-b:medium">bottom</div>
+   <div space="p:small" visual="bg:primary text:white rounded-l:medium">left</div>
+   <div space="p:small" visual="bg:primary text:white rounded-r:medium">right</div>
+</div>`,
+        highlightValue: "rounded-t:medium"
       }
     ]
   };
@@ -6828,6 +6862,112 @@ video {
   };
   var visual_svg_default = svgDefinitions;
 
+  // src/definitions/visual-performance.js
+  var contentVisibility = {
+    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">
+   <div space="p:small" visual="bg:primary text:white rounded:small">visible</div>
+   <div space="p:small" visual="bg:primary text:white rounded:small">auto</div>
+   <div space="p:small" visual="bg:primary text:white rounded:small">hidden</div>
+ </div>`,
+        highlightValue: "content-visibility:auto"
+      }
+    ]
+  };
+  var contain = {
+    name: "contain",
+    property: "visual",
+    syntax: 'visual="contain:[value]"',
+    description: "Isolate element rendering for performance",
+    descriptionMs: "Pencil rendering elemen untuk prestasi",
+    category: "visual",
+    values: [
+      { value: "none", css: "contain: none;", description: "No containment", descriptionMs: "Tiada pengandungan" },
+      { value: "strict", css: "contain: strict;", description: "Full containment", descriptionMs: "Pengandungan penuh" },
+      { value: "content", css: "contain: content;", description: "Content containment", descriptionMs: "Pengandungan kandungan" },
+      { value: "size", css: "contain: size;", description: "Size containment", descriptionMs: "Pengandungan saiz" },
+      { value: "layout", css: "contain: layout;", description: "Layout containment", descriptionMs: "Pengandungan susun atur" },
+      { value: "style", css: "contain: style;", description: "Style containment", descriptionMs: "Pengandungan gaya" },
+      { value: "paint", css: "contain: paint;", description: "Paint containment", descriptionMs: "Pengandungan lukis" }
+    ],
+    examples: [
+      { code: '<div visual="contain:strict">Isolated rendering</div>', description: "Full containment" },
+      { code: '<div visual="contain:content">Content isolation</div>', description: "Content only" }
+    ],
+    preview: [
+      {
+        title: "Contain",
+        titleMs: "Mengandung",
+        description: "Isolate element from rest of page for performance",
+        descriptionMs: "Pencil elemen dari halaman lain untuk prestasi",
+        html: `<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+   <div space="p:small" visual="bg:primary text:white rounded:small">none</div>
+   <div space="p:small" visual="bg:primary text:white rounded:small">content</div>
+   <div space="p:small" visual="bg:primary text:white rounded:small">strict</div>
+ </div>`,
+        highlightValue: "contain:strict"
+      }
+    ]
+  };
+  var writingMode = {
+    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">
+   <div space="p:small" visual="bg:primary text:white rounded:small">horizontal-tb</div>
+   <div space="p:small" visual="bg:primary text:white rounded:small">vertical-rl</div>
+ </div>`,
+        highlightValue: "writing-mode:vertical-rl"
+      }
+    ]
+  };
+  var performanceDefinitions = {
+    contentVisibility,
+    contain,
+    writingMode
+  };
+  var visual_performance_default = performanceDefinitions;
+
   // src/definitions/index.js
   var allVisualDefinitions = {
     ...visual_default,
@@ -6840,7 +6980,8 @@ video {
     ...visual_transforms_default,
     ...visual_borders_default,
     ...visual_divide_default,
-    ...visual_svg_default
+    ...visual_svg_default,
+    ...visual_performance_default
   };
   function buildAllMaps() {
     return {
@@ -6898,6 +7039,16 @@ video {
       css += `  --c-${key}: ${value};
 `;
     }
+    if (theme.placeholder) {
+      css += `  --placeholder-color: ${theme.placeholder};
+`;
+    } else {
+      css += "  --placeholder-color: #9ca3af;\n";
+    }
+    css += "  --gradient-from: transparent;\n";
+    css += "  --gradient-via: transparent;\n";
+    css += "  --gradient-to: transparent;\n";
+    css += "  --gradient-stops: var(--gradient-from), var(--gradient-via), var(--gradient-to);\n";
     for (const [key, value] of Object.entries(theme.zIndex)) {
       css += `  --z-${key}: ${value};
 `;
@@ -7025,6 +7176,9 @@ video {
       css += `  --tw-font-${key}: ${value};
 `;
     }
+    css += "  --ss-divide-x-reverse: 0;\n";
+    css += "  --ss-divide-y-reverse: 0;\n";
+    css += "  --ring-inset: 0 0 0 0;\n";
     css += "}\n\n";
     return css;
   }
@@ -7130,6 +7284,31 @@ video {
       const cssValue = isArbitrary ? value.replace(/_/g, " ") : value;
       return `object-position: ${cssValue};`;
     }
+    if (property === "content-visibility") {
+      return `content-visibility: ${value};`;
+    }
+    if (property === "contain") {
+      const containMap = {
+        "none": "none",
+        "strict": "strict",
+        "content": "content",
+        "size": "size",
+        "layout": "layout",
+        "style": "style",
+        "paint": "paint"
+      };
+      const cssValue = isArbitrary ? value : containMap[value] || value;
+      return `contain: ${cssValue};`;
+    }
+    if (property === "writing") {
+      const writingMap = {
+        "horizontal-tb": "horizontal-tb",
+        "vertical-rl": "vertical-rl",
+        "vertical-lr": "vertical-lr"
+      };
+      const cssValue = isArbitrary ? value.replace(/_/g, " ") : writingMap[value] || value;
+      return `writing-mode: ${cssValue};`;
+    }
     const positioningPercentages = {
       "full": "100%",
       "half": "50%",
@@ -7659,32 +7838,32 @@ video {
       // Border width
       "border-w": () => {
         const cssValue = isArbitrary ? value : `var(--s-${value})`;
-        return `border-width: ${cssValue}; border-style: solid;`;
+        return `border-width: ${cssValue};`;
       },
       // Border width - directional  
       "border-t-w": () => {
         const cssValue = isArbitrary ? value : `var(--s-${value})`;
-        return `border-top-width: ${cssValue}; border-top-style: solid;`;
+        return `border-top-width: ${cssValue};`;
       },
       "border-b-w": () => {
         const cssValue = isArbitrary ? value : `var(--s-${value})`;
-        return `border-bottom-width: ${cssValue}; border-bottom-style: solid;`;
+        return `border-bottom-width: ${cssValue};`;
       },
       "border-l-w": () => {
         const cssValue = isArbitrary ? value : `var(--s-${value})`;
-        return `border-left-width: ${cssValue}; border-left-style: solid;`;
+        return `border-left-width: ${cssValue};`;
       },
       "border-r-w": () => {
         const cssValue = isArbitrary ? value : `var(--s-${value})`;
-        return `border-right-width: ${cssValue}; border-right-style: solid;`;
+        return `border-right-width: ${cssValue};`;
       },
       "border-x-w": () => {
         const cssValue = isArbitrary ? value : `var(--s-${value})`;
-        return `border-left-width: ${cssValue}; border-right-width: ${cssValue}; border-left-style: solid; border-right-style: solid;`;
+        return `border-left-width: ${cssValue}; border-right-width: ${cssValue};`;
       },
       "border-y-w": () => {
         const cssValue = isArbitrary ? value : `var(--s-${value})`;
-        return `border-top-width: ${cssValue}; border-bottom-width: ${cssValue}; border-top-style: solid; border-bottom-style: solid;`;
+        return `border-top-width: ${cssValue}; border-bottom-width: ${cssValue};`;
       },
       // Border style
       "border-style": () => {
@@ -7694,6 +7873,39 @@ video {
       "rounded": () => {
         return `border-radius: var(--r-${value});`;
       },
+      // Directional border radius
+      "rounded-t": () => {
+        const cssValue = isArbitrary ? value : `var(--r-${value})`;
+        return `border-top-left-radius: ${cssValue}; border-top-right-radius: ${cssValue};`;
+      },
+      "rounded-b": () => {
+        const cssValue = isArbitrary ? value : `var(--r-${value})`;
+        return `border-bottom-left-radius: ${cssValue}; border-bottom-right-radius: ${cssValue};`;
+      },
+      "rounded-l": () => {
+        const cssValue = isArbitrary ? value : `var(--r-${value})`;
+        return `border-top-left-radius: ${cssValue}; border-bottom-left-radius: ${cssValue};`;
+      },
+      "rounded-r": () => {
+        const cssValue = isArbitrary ? value : `var(--r-${value})`;
+        return `border-top-right-radius: ${cssValue}; border-bottom-right-radius: ${cssValue};`;
+      },
+      "rounded-tl": () => {
+        const cssValue = isArbitrary ? value : `var(--r-${value})`;
+        return `border-top-left-radius: ${cssValue};`;
+      },
+      "rounded-tr": () => {
+        const cssValue = isArbitrary ? value : `var(--r-${value})`;
+        return `border-top-right-radius: ${cssValue};`;
+      },
+      "rounded-bl": () => {
+        const cssValue = isArbitrary ? value : `var(--r-${value})`;
+        return `border-bottom-left-radius: ${cssValue};`;
+      },
+      "rounded-br": () => {
+        const cssValue = isArbitrary ? value : `var(--r-${value})`;
+        return `border-bottom-right-radius: ${cssValue};`;
+      },
       // =====================
       // DIVIDE UTILITIES
       // =====================
@@ -7720,16 +7932,16 @@ video {
       // Divide width - all sides
       "divide-w": () => {
         const cssValue = isArbitrary ? value : `var(--s-${value})`;
-        return `border-width: ${cssValue}; border-style: solid;`;
+        return `border-top-width: calc(${cssValue} * (1 - var(--ss-divide-y-reverse))); border-bottom-width: calc(${cssValue} * var(--ss-divide-y-reverse)); border-left-width: calc(${cssValue} * (1 - var(--ss-divide-x-reverse))); border-right-width: calc(${cssValue} * var(--ss-divide-x-reverse));`;
       },
       // Divide width - directional
       "divide-x-w": () => {
         const cssValue = isArbitrary ? value : `var(--s-${value})`;
-        return `border-left-width: ${cssValue}; border-right-width: ${cssValue}; border-left-style: solid; border-right-style: solid;`;
+        return `border-right-width: calc(${cssValue} * var(--ss-divide-x-reverse)); border-left-width: calc(${cssValue} * (1 - var(--ss-divide-x-reverse)));`;
       },
       "divide-y-w": () => {
         const cssValue = isArbitrary ? value : `var(--s-${value})`;
-        return `border-top-width: ${cssValue}; border-bottom-width: ${cssValue}; border-top-style: solid; border-bottom-style: solid;`;
+        return `border-bottom-width: calc(${cssValue} * var(--ss-divide-y-reverse)); border-top-width: calc(${cssValue} * (1 - var(--ss-divide-y-reverse)));`;
       },
       // Divide style
       "divide-style": () => {
@@ -7787,7 +7999,7 @@ video {
           "big": "8px"
         };
         const width2 = isArbitrary ? value : ringPresets[value] || (parseInt(value) ? `${value}px` : `var(--s-${value})`);
-        return `--ss-ring-width: ${width2}; box-shadow: var(--ss-ring-inset) 0 0 0 calc(var(--ss-ring-width) + var(--ss-ring-offset-width, 0px)) var(--ss-ring-color, currentColor);`;
+        return `--ss-ring-width: ${width2}; box-shadow: var(--ring-inset) 0 0 0 calc(var(--ss-ring-width) + var(--ss-ring-offset-width, 0px)) var(--c-primary);`;
       },
       // Box shadow
       "shadow": () => {
@@ -8953,6 +9165,8 @@ video {
         // Laptop
         "desk": "1280px",
         // Desktop
+        "print": "print",
+        // Print media query
         // Tailwind Compatibility
         "tw-sm": "640px",
         "tw-md": "768px",
@@ -8961,6 +9175,8 @@ video {
         "tw-2xl": "1536px"
       },
       // 7. COLORS: Palette Scales
+      // Placeholder color for form inputs
+      placeholder: "#9ca3af",
       colors: {
         // Base colors
         "white": "#FFFFFF",