@bookklik/senangstart-css 0.1.4 → 0.1.7

package/src/compiler/generators/css.js

@@ -3,6 +3,8 @@
  * Generates CSS from tokens using attribute selectors
  */
 
+import { generatePreflight } from './preflight.js';
+
 /**
  * Generate CSS custom properties from config
  * @param {Object} config - Configuration object
@@ -55,23 +57,43 @@ export function generateCSSVariables(config) {
  * Generate CSS rule for a layout token
  */
 function generateLayoutRule(token, config) {
-  const { property, value } = token;
+  const { property, value, isArbitrary } = token;
   
   const layoutMap = {
     // Display
     'flex': 'display: flex;',
     'grid': 'display: grid;',
+    'inline-flex': 'display: inline-flex;',
+    'inline-grid': 'display: inline-grid;',
     'block': 'display: block;',
     'inline': 'display: inline-block;',
     'hidden': 'display: none;',
     
-    // Flex direction
+    // Flex Direction
     'row': 'flex-direction: row;',
     'col': 'flex-direction: column;',
     'row-reverse': 'flex-direction: row-reverse;',
     'col-reverse': 'flex-direction: column-reverse;',
     
-    // Alignment
+    // Flex Wrap
+    'wrap': 'flex-wrap: wrap;',
+    'nowrap': 'flex-wrap: nowrap;',
+    'wrap-reverse': 'flex-wrap: wrap-reverse;',
+    
+    // Flex Item
+    'grow': 'flex-grow: 1;',
+    'grow-0': 'flex-grow: 0;',
+    'shrink': 'flex-shrink: 1;',
+    'shrink-0': 'flex-shrink: 0;',
+    
+    // Grid Auto Flow
+    'grid-flow-row': 'grid-auto-flow: row;',
+    'grid-flow-col': 'grid-auto-flow: column;',
+    'grid-flow-dense': 'grid-auto-flow: dense;',
+    'grid-flow-row-dense': 'grid-auto-flow: row dense;',
+    'grid-flow-col-dense': 'grid-auto-flow: column dense;',
+    
+    // Shorthand Alignment (backwards compat - simple keywords)
     'center': 'justify-content: center; align-items: center;',
     'start': 'justify-content: flex-start; align-items: flex-start;',
     'end': 'justify-content: flex-end; align-items: flex-end;',
@@ -79,17 +101,144 @@ function generateLayoutRule(token, config) {
     'around': 'justify-content: space-around;',
     'evenly': 'justify-content: space-evenly;',
     
-    // Wrap
-    'wrap': 'flex-wrap: wrap;',
-    'nowrap': 'flex-wrap: nowrap;',
-    
     // Position
     'absolute': 'position: absolute;',
     'relative': 'position: relative;',
     'fixed': 'position: fixed;',
-    'sticky': 'position: sticky;'
+    'sticky': 'position: sticky;',
+    'static': 'position: static;',
+    
+    // Visibility
+    'visible': 'visibility: visible;',
+    'invisible': 'visibility: hidden;',
+    
+    // Isolation
+    'isolate': 'isolation: isolate;',
+    'isolate-auto': 'isolation: auto;',
+    
+    // Box Sizing
+    'box-border': 'box-sizing: border-box;',
+    'box-content': 'box-sizing: content-box;',
+    
+    // Float
+    'float-left': 'float: left;',
+    'float-right': 'float: right;',
+    'float-none': 'float: none;',
+    
+    // Clear
+    'clear-left': 'clear: left;',
+    'clear-right': 'clear: right;',
+    'clear-both': 'clear: both;',
+    'clear-none': 'clear: none;',
+    
+    // Table - Border Collapse
+    'border-collapse': 'border-collapse: collapse;',
+    'border-separate': 'border-collapse: separate;',
+    
+    // Table - Table Layout
+    'table-auto': 'table-layout: auto;',
+    'table-fixed': 'table-layout: fixed;',
+    
+    // Table - Caption Side
+    'caption-top': 'caption-side: top;',
+    'caption-bottom': 'caption-side: bottom;',
+    
+    // Container
+    'container': 'width: 100%; margin-left: auto; margin-right: auto;'
   };
   
+  // Check for simple layout keywords first (property === value means it's a keyword like 'flex', 'grid', etc.)
+  if (property === value && layoutMap[property]) {
+    return layoutMap[property];
+  }
+  
+  // Justify Content (justify:[value])
+  if (property === 'justify') {
+    const justifyMap = {
+      'start': 'flex-start',
+      'end': 'flex-end',
+      'center': 'center',
+      'between': 'space-between',
+      'around': 'space-around',
+      'evenly': 'space-evenly',
+      'stretch': 'stretch'
+    };
+    return `justify-content: ${justifyMap[value] || value};`;
+  }
+  
+  // Justify Items (justify-items:[value])
+  if (property === 'justify-items') {
+    return `justify-items: ${value};`;
+  }
+  
+  // Justify Self (justify-self:[value])
+  if (property === 'justify-self') {
+    return `justify-self: ${value};`;
+  }
+  
+  // Align Content (content:[value])
+  if (property === 'content') {
+    const contentMap = {
+      'start': 'flex-start',
+      'end': 'flex-end',
+      'center': 'center',
+      'between': 'space-between',
+      'around': 'space-around',
+      'evenly': 'space-evenly',
+      'stretch': 'stretch'
+    };
+    return `align-content: ${contentMap[value] || value};`;
+  }
+  
+  // Align Items (items:[value])
+  if (property === 'items') {
+    const itemsMap = {
+      'start': 'flex-start',
+      'end': 'flex-end',
+      'center': 'center',
+      'baseline': 'baseline',
+      'stretch': 'stretch'
+    };
+    return `align-items: ${itemsMap[value] || value};`;
+  }
+  
+  // Align Self (self:[value])
+  if (property === 'self') {
+    const selfMap = {
+      'auto': 'auto',
+      'start': 'flex-start',
+      'end': 'flex-end',
+      'center': 'center',
+      'baseline': 'baseline',
+      'stretch': 'stretch'
+    };
+    return `align-self: ${selfMap[value] || value};`;
+  }
+  
+  // Place Content (place-content:[value])
+  if (property === 'place-content') {
+    const placeContentMap = {
+      'start': 'start',
+      'end': 'end',
+      'center': 'center',
+      'between': 'space-between',
+      'around': 'space-around',
+      'evenly': 'space-evenly',
+      'stretch': 'stretch'
+    };
+    return `place-content: ${placeContentMap[value] || value};`;
+  }
+  
+  // Place Items (place-items:[value])
+  if (property === 'place-items') {
+    return `place-items: ${value};`;
+  }
+  
+  // Place Self (place-self:[value])
+  if (property === 'place-self') {
+    return `place-self: ${value};`;
+  }
+  
   // Z-index
   if (property === 'z') {
     return `z-index: var(--z-${value});`;
@@ -100,6 +249,207 @@ function generateLayoutRule(token, config) {
     return `overflow: ${value};`;
   }
   
+  // Overflow X/Y
+  if (property === 'overflow-x') {
+    return `overflow-x: ${value};`;
+  }
+  if (property === 'overflow-y') {
+    return `overflow-y: ${value};`;
+  }
+  
+  // Aspect Ratio
+  if (property === 'aspect') {
+    const aspectMap = {
+      'square': '1 / 1',
+      'video': '16 / 9',
+      'auto': 'auto'
+    };
+    const cssValue = isArbitrary ? value.replace(/_/g, ' ') : (aspectMap[value] || value);
+    return `aspect-ratio: ${cssValue};`;
+  }
+  
+  // Object Fit
+  if (property === 'object') {
+    return `object-fit: ${value};`;
+  }
+  
+  // Object Position
+  if (property === 'object-pos') {
+    const cssValue = isArbitrary ? value.replace(/_/g, ' ') : value;
+    return `object-position: ${cssValue};`;
+  }
+  
+  // Inset (all sides)
+  if (property === 'inset') {
+    const cssValue = isArbitrary ? value : (value === '0' ? '0' : `var(--s-${value})`);
+    return `inset: ${cssValue};`;
+  }
+  
+  // Individual positioning: top, right, bottom, left
+  if (['top', 'right', 'bottom', 'left'].includes(property)) {
+    const cssValue = isArbitrary ? value : (value === '0' ? '0' : `var(--s-${value})`);
+    return `${property}: ${cssValue};`;
+  }
+  
+  // Inset X (left + right)
+  if (property === 'inset-x') {
+    const cssValue = isArbitrary ? value : (value === '0' ? '0' : `var(--s-${value})`);
+    return `left: ${cssValue}; right: ${cssValue};`;
+  }
+  
+  // Inset Y (top + bottom)
+  if (property === 'inset-y') {
+    const cssValue = isArbitrary ? value : (value === '0' ? '0' : `var(--s-${value})`);
+    return `top: ${cssValue}; bottom: ${cssValue};`;
+  }
+  
+  // Columns
+  if (property === 'cols') {
+    return `columns: ${value};`;
+  }
+  
+  // Overscroll Behavior
+  if (property === 'overscroll') {
+    return `overscroll-behavior: ${value};`;
+  }
+  if (property === 'overscroll-x') {
+    return `overscroll-behavior-x: ${value};`;
+  }
+  if (property === 'overscroll-y') {
+    return `overscroll-behavior-y: ${value};`;
+  }
+  
+  // Flex Basis
+  if (property === 'basis') {
+    const cssValue = isArbitrary ? value : `var(--s-${value})`;
+    return `flex-basis: ${cssValue};`;
+  }
+  
+  // Flex (shorthand)
+  if (property === 'flex') {
+    const flexPresets = {
+      '1': '1 1 0%',
+      'auto': '1 1 auto',
+      'initial': '0 1 auto',
+      'none': 'none'
+    };
+    const cssValue = isArbitrary ? value.replace(/_/g, ' ') : (flexPresets[value] || value);
+    return `flex: ${cssValue};`;
+  }
+  
+  // Order
+  if (property === 'order') {
+    const orderPresets = {
+      'first': '-9999',
+      'last': '9999',
+      'none': '0'
+    };
+    const cssValue = orderPresets[value] || value;
+    return `order: ${cssValue};`;
+  }
+  
+  // Grid Template Columns
+  if (property === 'grid-cols') {
+    if (value === 'none') {
+      return 'grid-template-columns: none;';
+    }
+    if (value === 'subgrid') {
+      return 'grid-template-columns: subgrid;';
+    }
+    if (isArbitrary) {
+      return `grid-template-columns: ${value.replace(/_/g, ' ')};`;
+    }
+    return `grid-template-columns: repeat(${value}, minmax(0, 1fr));`;
+  }
+  
+  // Grid Template Rows
+  if (property === 'grid-rows') {
+    if (value === 'none') {
+      return 'grid-template-rows: none;';
+    }
+    if (value === 'subgrid') {
+      return 'grid-template-rows: subgrid;';
+    }
+    if (isArbitrary) {
+      return `grid-template-rows: ${value.replace(/_/g, ' ')};`;
+    }
+    return `grid-template-rows: repeat(${value}, minmax(0, 1fr));`;
+  }
+  
+  // Grid Column Span
+  if (property === 'col-span') {
+    if (value === 'full') {
+      return 'grid-column: 1 / -1;';
+    }
+    return `grid-column: span ${value} / span ${value};`;
+  }
+  
+  // Grid Column Start/End
+  if (property === 'col-start') {
+    return `grid-column-start: ${value};`;
+  }
+  if (property === 'col-end') {
+    return `grid-column-end: ${value};`;
+  }
+  
+  // Grid Row Span
+  if (property === 'row-span') {
+    if (value === 'full') {
+      return 'grid-row: 1 / -1;';
+    }
+    return `grid-row: span ${value} / span ${value};`;
+  }
+  
+  // Grid Row Start/End
+  if (property === 'row-start') {
+    return `grid-row-start: ${value};`;
+  }
+  if (property === 'row-end') {
+    return `grid-row-end: ${value};`;
+  }
+  
+  // Grid Auto Columns
+  if (property === 'auto-cols') {
+    const autoPresets = {
+      'auto': 'auto',
+      'min': 'min-content',
+      'max': 'max-content',
+      'fr': 'minmax(0, 1fr)'
+    };
+    const cssValue = isArbitrary ? value : (autoPresets[value] || value);
+    return `grid-auto-columns: ${cssValue};`;
+  }
+  
+  // Grid Auto Rows
+  if (property === 'auto-rows') {
+    const autoPresets = {
+      'auto': 'auto',
+      'min': 'min-content',
+      'max': 'max-content',
+      'fr': 'minmax(0, 1fr)'
+    };
+    const cssValue = isArbitrary ? value : (autoPresets[value] || value);
+    return `grid-auto-rows: ${cssValue};`;
+  }
+  
+  // Border Spacing (for tables)
+  if (property === 'border-spacing') {
+    const cssValue = isArbitrary ? value : `var(--s-${value})`;
+    return `border-spacing: ${cssValue};`;
+  }
+  
+  // Border Spacing X (horizontal)
+  if (property === 'border-spacing-x') {
+    const cssValue = isArbitrary ? value : `var(--s-${value})`;
+    return `border-spacing: ${cssValue} 0;`;
+  }
+  
+  // Border Spacing Y (vertical)
+  if (property === 'border-spacing-y') {
+    const cssValue = isArbitrary ? value : `var(--s-${value})`;
+    return `border-spacing: 0 ${cssValue};`;
+  }
+  
   return layoutMap[property] || '';
 }
 
@@ -171,33 +521,288 @@ function generateSpaceRule(token, config) {
 function generateVisualRule(token, config) {
   const { property, value, isArbitrary } = token;
   
+  // Static typography keywords
+  const typographyKeywords = {
+    // Font Style
+    'italic': 'font-style: italic;',
+    'not-italic': 'font-style: normal;',
+    
+    // Font Stretch
+    'font-stretch-condensed': 'font-stretch: condensed;',
+    'font-stretch-expanded': 'font-stretch: expanded;',
+    'font-stretch-normal': 'font-stretch: normal;',
+    
+    // Font Smoothing
+    'antialiased': '-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;',
+    'subpixel-antialiased': '-webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto;',
+    
+    // Font Variant Numeric
+    'normal-nums': 'font-variant-numeric: normal;',
+    'ordinal': 'font-variant-numeric: ordinal;',
+    'slashed-zero': 'font-variant-numeric: slashed-zero;',
+    'lining-nums': 'font-variant-numeric: lining-nums;',
+    'oldstyle-nums': 'font-variant-numeric: oldstyle-nums;',
+    'proportional-nums': 'font-variant-numeric: proportional-nums;',
+    'tabular-nums': 'font-variant-numeric: tabular-nums;',
+    
+    // Text Transform
+    'uppercase': 'text-transform: uppercase;',
+    'lowercase': 'text-transform: lowercase;',
+    'capitalize': 'text-transform: capitalize;',
+    'normal-case': 'text-transform: none;',
+    
+    // Text Decoration Line
+    'underline': 'text-decoration-line: underline;',
+    'overline': 'text-decoration-line: overline;',
+    'line-through': 'text-decoration-line: line-through;',
+    'no-underline': 'text-decoration-line: none;',
+    
+    // Text Decoration Style
+    'decoration-solid': 'text-decoration-style: solid;',
+    'decoration-double': 'text-decoration-style: double;',
+    'decoration-dotted': 'text-decoration-style: dotted;',
+    'decoration-dashed': 'text-decoration-style: dashed;',
+    'decoration-wavy': 'text-decoration-style: wavy;',
+    
+    // Text Overflow
+    'truncate': 'overflow: hidden; text-overflow: ellipsis; white-space: nowrap;',
+    'text-ellipsis': 'text-overflow: ellipsis;',
+    'text-clip': 'text-overflow: clip;',
+    
+    // Text Wrap
+    'text-wrap': 'text-wrap: wrap;',
+    'text-nowrap': 'text-wrap: nowrap;',
+    'text-balance': 'text-wrap: balance;',
+    'text-pretty': 'text-wrap: pretty;',
+    
+    // Whitespace
+    'whitespace-normal': 'white-space: normal;',
+    'whitespace-nowrap': 'white-space: nowrap;',
+    'whitespace-pre': 'white-space: pre;',
+    'whitespace-pre-line': 'white-space: pre-line;',
+    'whitespace-pre-wrap': 'white-space: pre-wrap;',
+    'whitespace-break-spaces': 'white-space: break-spaces;',
+    
+    // Word Break
+    'break-normal': 'overflow-wrap: normal; word-break: normal;',
+    'break-words': 'overflow-wrap: break-word;',
+    'break-all': 'word-break: break-all;',
+    'break-keep': 'word-break: keep-all;',
+    
+    // Hyphens
+    'hyphens-none': 'hyphens: none;',
+    'hyphens-manual': 'hyphens: manual;',
+    'hyphens-auto': 'hyphens: auto;',
+    
+    // Vertical Align
+    'align-baseline': 'vertical-align: baseline;',
+    'align-top': 'vertical-align: top;',
+    'align-middle': 'vertical-align: middle;',
+    'align-bottom': 'vertical-align: bottom;',
+    'align-text-top': 'vertical-align: text-top;',
+    'align-text-bottom': 'vertical-align: text-bottom;',
+    'align-sub': 'vertical-align: sub;',
+    'align-super': 'vertical-align: super;',
+    
+    // List Style Type
+    'list-none': 'list-style-type: none;',
+    'list-disc': 'list-style-type: disc;',
+    'list-decimal': 'list-style-type: decimal;',
+    'list-square': 'list-style-type: square;',
+    
+    // List Style Position
+    'list-inside': 'list-style-position: inside;',
+    'list-outside': 'list-style-position: outside;'
+  };
+  
+  // Check static keywords first
+  if (typographyKeywords[property]) {
+    return typographyKeywords[property];
+  }
+  
   const rules = {
-    // Background
+    // Background Color
     'bg': () => {
       const cssValue = isArbitrary ? value : `var(--c-${value})`;
       return `background-color: ${cssValue};`;
     },
     
+    // Background Image
+    'bg-image': () => {
+      const cssValue = isArbitrary ? value : `url(${value})`;
+      return `background-image: ${cssValue};`;
+    },
+    
+    // Background Attachment
+    'bg-attachment': () => {
+      return `background-attachment: ${value};`;
+    },
+    
+    // Background Clip
+    'bg-clip': () => {
+      const clipMap = {
+        'border': 'border-box',
+        'padding': 'padding-box',
+        'content': 'content-box',
+        'text': 'text'
+      };
+      const cssValue = clipMap[value] || value;
+      return `background-clip: ${cssValue};`;
+    },
+    
+    // Background Origin
+    'bg-origin': () => {
+      const originMap = {
+        'border': 'border-box',
+        'padding': 'padding-box',
+        'content': 'content-box'
+      };
+      const cssValue = originMap[value] || value;
+      return `background-origin: ${cssValue};`;
+    },
+    
+    // Background Position
+    'bg-position': () => {
+      const positionMap = {
+        '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'
+      };
+      const cssValue = isArbitrary ? value.replace(/_/g, ' ') : (positionMap[value] || value);
+      return `background-position: ${cssValue};`;
+    },
+    
+    // Background Repeat
+    'bg-repeat': () => {
+      const repeatMap = {
+        'repeat': 'repeat',
+        'no-repeat': 'no-repeat',
+        'repeat-x': 'repeat-x',
+        'repeat-y': 'repeat-y',
+        'round': 'round',
+        'space': 'space'
+      };
+      const cssValue = repeatMap[value] || value;
+      return `background-repeat: ${cssValue};`;
+    },
+    
+    // Background Size
+    'bg-size': () => {
+      const sizeMap = {
+        'auto': 'auto',
+        'cover': 'cover',
+        'contain': 'contain'
+      };
+      const cssValue = isArbitrary ? value.replace(/_/g, ' ') : (sizeMap[value] || value);
+      return `background-size: ${cssValue};`;
+    },
+    
+    // Background Blend Mode
+    'bg-blend': () => {
+      return `background-blend-mode: ${value};`;
+    },
+    
     // Text color
     'text': () => {
-      // Check if it's alignment
-      if (['left', 'center', 'right'].includes(value)) {
+      if (['left', 'center', 'right', 'justify'].includes(value)) {
         return `text-align: ${value};`;
       }
       const cssValue = isArbitrary ? value : `var(--c-${value})`;
       return `color: ${cssValue};`;
     },
     
+    // Text Shadow
+    'text-shadow': () => {
+      const shadowPresets = {
+        '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)'
+      };
+      const cssValue = isArbitrary ? value.replace(/_/g, ' ') : (shadowPresets[value] || value);
+      return `text-shadow: ${cssValue};`;
+    },
+    
     // Font size
     'text-size': () => {
       const cssValue = isArbitrary ? value : `var(--font-${value})`;
       return `font-size: ${cssValue};`;
     },
     
-    // Font weight
+    // Font weight / family
     'font': () => {
-      const cssValue = `var(--fw-${value})`;
-      return `font-weight: ${cssValue};`;
+      const fontFamilies = {
+        'sans': 'ui-sans-serif, system-ui, sans-serif',
+        'serif': 'ui-serif, Georgia, serif',
+        'mono': 'ui-monospace, monospace'
+      };
+      if (fontFamilies[value]) {
+        return `font-family: ${fontFamilies[value]};`;
+      }
+      return `font-weight: var(--fw-${value});`;
+    },
+    
+    // Letter spacing
+    'tracking': () => {
+      const trackingScale = {
+        'tighter': '-0.05em',
+        'tight': '-0.025em',
+        'normal': '0',
+        'wide': '0.025em',
+        'wider': '0.05em',
+        'widest': '0.1em'
+      };
+      const cssValue = isArbitrary ? value : (trackingScale[value] || value);
+      return `letter-spacing: ${cssValue};`;
+    },
+    
+    // Line height
+    'leading': () => {
+      const leadingScale = {
+        'none': '1',
+        'tight': '1.25',
+        'snug': '1.375',
+        'normal': '1.5',
+        'relaxed': '1.625',
+        'loose': '2'
+      };
+      const cssValue = isArbitrary ? value : (leadingScale[value] || value);
+      return `line-height: ${cssValue};`;
+    },
+    
+    // Line clamp
+    'line-clamp': () => {
+      return `overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: ${value};`;
+    },
+    
+    // Text decoration color
+    'decoration': () => {
+      const cssValue = isArbitrary ? value : `var(--c-${value})`;
+      return `text-decoration-color: ${cssValue};`;
+    },
+    
+    // Text decoration thickness
+    'decoration-thickness': () => {
+      const cssValue = isArbitrary ? value : `${value}px`;
+      return `text-decoration-thickness: ${cssValue};`;
+    },
+    
+    // Underline offset
+    'underline-offset': () => {
+      const cssValue = isArbitrary ? value : `${value}px`;
+      return `text-underline-offset: ${cssValue};`;
+    },
+    
+    // Text indent
+    'indent': () => {
+      const cssValue = isArbitrary ? value : `var(--s-${value})`;
+      return `text-indent: ${cssValue};`;
     },
     
     // Border color
@@ -206,28 +811,920 @@ function generateVisualRule(token, config) {
       return `border-color: ${cssValue}; border-style: solid;`;
     },
     
+    // Border color - directional
+    'border-t': () => {
+      const cssValue = isArbitrary ? value : `var(--c-${value})`;
+      return `border-top-color: ${cssValue}; border-top-style: solid;`;
+    },
+    'border-b': () => {
+      const cssValue = isArbitrary ? value : `var(--c-${value})`;
+      return `border-bottom-color: ${cssValue}; border-bottom-style: solid;`;
+    },
+    'border-l': () => {
+      const cssValue = isArbitrary ? value : `var(--c-${value})`;
+      return `border-left-color: ${cssValue}; border-left-style: solid;`;
+    },
+    'border-r': () => {
+      const cssValue = isArbitrary ? value : `var(--c-${value})`;
+      return `border-right-color: ${cssValue}; border-right-style: solid;`;
+    },
+    'border-x': () => {
+      const cssValue = isArbitrary ? value : `var(--c-${value})`;
+      return `border-left-color: ${cssValue}; border-right-color: ${cssValue}; border-left-style: solid; border-right-style: solid;`;
+    },
+    'border-y': () => {
+      const cssValue = isArbitrary ? value : `var(--c-${value})`;
+      return `border-top-color: ${cssValue}; border-bottom-color: ${cssValue}; border-top-style: solid; border-bottom-style: solid;`;
+    },
+    
     // Border width
     'border-w': () => {
       const cssValue = isArbitrary ? value : `var(--s-${value})`;
       return `border-width: ${cssValue}; border-style: solid;`;
     },
     
+    // Border width - directional  
+    'border-t-w': () => {
+      const cssValue = isArbitrary ? value : `var(--s-${value})`;
+      return `border-top-width: ${cssValue}; border-top-style: solid;`;
+    },
+    'border-b-w': () => {
+      const cssValue = isArbitrary ? value : `var(--s-${value})`;
+      return `border-bottom-width: ${cssValue}; border-bottom-style: solid;`;
+    },
+    'border-l-w': () => {
+      const cssValue = isArbitrary ? value : `var(--s-${value})`;
+      return `border-left-width: ${cssValue}; border-left-style: solid;`;
+    },
+    'border-r-w': () => {
+      const cssValue = isArbitrary ? value : `var(--s-${value})`;
+      return `border-right-width: ${cssValue}; border-right-style: solid;`;
+    },
+    '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;`;
+    },
+    '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;`;
+    },
+    
+    // Border style
+    'border-style': () => {
+      return `border-style: ${value};`;
+    },
+    
     // Border radius
     'rounded': () => {
-      const cssValue = `var(--r-${value})`;
-      return `border-radius: ${cssValue};`;
+      return `border-radius: var(--r-${value});`;
+    },
+    
+    // Outline Width
+    'outline-w': () => {
+      const cssValue = isArbitrary ? value : `var(--s-${value})`;
+      return `outline-width: ${cssValue};`;
+    },
+    
+    // Outline Color
+    'outline': () => {
+      const cssValue = isArbitrary ? value : `var(--c-${value})`;
+      return `outline-color: ${cssValue};`;
+    },
+    
+    // Outline Style
+    'outline-style': () => {
+      return `outline-style: ${value};`;
+    },
+    
+    // Outline Offset
+    'outline-offset': () => {
+      const cssValue = isArbitrary ? value : `var(--s-${value})`;
+      return `outline-offset: ${cssValue};`;
     },
     
     // Box shadow
     'shadow': () => {
-      const cssValue = `var(--shadow-${value})`;
-      return `box-shadow: ${cssValue};`;
+      return `box-shadow: var(--shadow-${value});`;
     },
     
     // Opacity
     'opacity': () => {
-      const cssValue = isArbitrary ? value : value;
-      return `opacity: ${cssValue};`;
+      // Convert percentage (0-100) to decimal (0-1)
+      const numValue = parseInt(value, 10);
+      if (!isNaN(numValue) && numValue >= 0 && numValue <= 100) {
+        return `opacity: ${numValue / 100};`;
+      }
+      // For arbitrary values or already decimal, pass through
+      return `opacity: ${value};`;
+    },
+    
+    // Mix Blend Mode
+    'mix-blend': () => {
+      return `mix-blend-mode: ${value};`;
+    },
+    
+    // Mask Clip
+    'mask-clip': () => {
+      const clipMap = {
+        'border': 'border-box',
+        'padding': 'padding-box',
+        'content': 'content-box',
+        'text': 'text'
+      };
+      const cssValue = clipMap[value] || value;
+      return `mask-clip: ${cssValue};`;
+    },
+    
+    // Mask Composite
+    'mask-composite': () => {
+      return `mask-composite: ${value};`;
+    },
+    
+    // Mask Image
+    'mask-image': () => {
+      const cssValue = isArbitrary ? value : `url(${value})`;
+      return `mask-image: ${cssValue};`;
+    },
+    
+    // Mask Mode
+    'mask-mode': () => {
+      return `mask-mode: ${value};`;
+    },
+    
+    // Mask Origin
+    'mask-origin': () => {
+      const originMap = {
+        'border': 'border-box',
+        'padding': 'padding-box',
+        'content': 'content-box'
+      };
+      const cssValue = originMap[value] || value;
+      return `mask-origin: ${cssValue};`;
+    },
+    
+    // Mask Position
+    'mask-position': () => {
+      const positionMap = {
+        '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'
+      };
+      const cssValue = isArbitrary ? value.replace(/_/g, ' ') : (positionMap[value] || value);
+      return `mask-position: ${cssValue};`;
+    },
+    
+    // Mask Repeat
+    'mask-repeat': () => {
+      const repeatMap = {
+        'repeat': 'repeat',
+        'no-repeat': 'no-repeat',
+        'repeat-x': 'repeat-x',
+        'repeat-y': 'repeat-y',
+        'round': 'round',
+        'space': 'space'
+      };
+      const cssValue = repeatMap[value] || value;
+      return `mask-repeat: ${cssValue};`;
+    },
+    
+    // Mask Size
+    'mask-size': () => {
+      const sizeMap = {
+        'auto': 'auto',
+        'cover': 'cover',
+        'contain': 'contain'
+      };
+      const cssValue = isArbitrary ? value.replace(/_/g, ' ') : (sizeMap[value] || value);
+      return `mask-size: ${cssValue};`;
+    },
+    
+    // Mask Type
+    'mask-type': () => {
+      return `mask-type: ${value};`;
+    },
+    
+    // Content
+    'content': () => {
+      return `content: "${value}";`;
+    },
+    
+    // Filter utilities
+    'blur': () => {
+      const blurScale = {
+        'none': '0',
+        'tiny': '2px',
+        'small': '4px',
+        'medium': '8px',
+        'big': '12px',
+        'giant': '24px',
+        'vast': '48px'
+      };
+      const cssValue = isArbitrary ? value : (blurScale[value] || blurScale['medium']);
+      return `filter: blur(${cssValue});`;
+    },
+    
+    'brightness': () => {
+      const brightnessScale = {
+        'dim': 0.5,
+        'dark': 0.75,
+        'normal': 1,
+        'bright': 1.25,
+        'vivid': 1.5
+      };
+      const cssValue = isArbitrary ? value : (brightnessScale[value] || brightnessScale['normal']);
+      return `filter: brightness(${cssValue});`;
+    },
+    
+    'contrast': () => {
+      const contrastScale = {
+        'low': 0.5,
+        'reduced': 0.75,
+        'normal': 1,
+        'high': 1.25,
+        'max': 1.5
+      };
+      const cssValue = isArbitrary ? value : (contrastScale[value] || contrastScale['normal']);
+      return `filter: contrast(${cssValue});`;
+    },
+    
+    'drop-shadow': () => {
+      const shadowPresets = {
+        '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)'
+      };
+      const cssValue = isArbitrary ? value.replace(/_/g, ' ') : (shadowPresets[value] || shadowPresets['medium']);
+      return `filter: drop-shadow(${cssValue});`;
+    },
+    
+    'grayscale': () => {
+      const grayscaleScale = {
+        'none': '0%',
+        'partial': '50%',
+        'full': '100%'
+      };
+      const cssValue = isArbitrary ? value : (grayscaleScale[value] || grayscaleScale['full']);
+      return `filter: grayscale(${cssValue});`;
+    },
+    
+    'hue-rotate': () => {
+      const cssValue = isArbitrary ? value : `${value}deg`;
+      return `filter: hue-rotate(${cssValue});`;
+    },
+    
+    'invert': () => {
+      const invertScale = {
+        'none': '0%',
+        'partial': '50%',
+        'full': '100%'
+      };
+      const cssValue = isArbitrary ? value : (invertScale[value] || invertScale['full']);
+      return `filter: invert(${cssValue});`;
+    },
+    
+    'saturate': () => {
+      const saturateScale = {
+        'none': 0,
+        'low': 0.5,
+        'normal': 1,
+        'high': 1.5,
+        'vivid': 2
+      };
+      const cssValue = isArbitrary ? value : (saturateScale[value] || saturateScale['normal']);
+      return `filter: saturate(${cssValue});`;
+    },
+    
+    'sepia': () => {
+      const sepiaScale = {
+        'none': '0%',
+        'partial': '50%',
+        'full': '100%'
+      };
+      const cssValue = isArbitrary ? value : (sepiaScale[value] || sepiaScale['full']);
+      return `filter: sepia(${cssValue});`;
+    },
+    
+    // Backdrop Filter utilities
+    'backdrop-blur': () => {
+      const blurScale = {
+        'none': '0',
+        'tiny': '2px',
+        'small': '4px',
+        'medium': '8px',
+        'big': '12px',
+        'giant': '24px',
+        'vast': '48px'
+      };
+      const cssValue = isArbitrary ? value : (blurScale[value] || blurScale['medium']);
+      return `backdrop-filter: blur(${cssValue});`;
+    },
+    
+    'backdrop-brightness': () => {
+      const brightnessScale = {
+        'dim': 0.5,
+        'dark': 0.75,
+        'normal': 1,
+        'bright': 1.25,
+        'vivid': 1.5
+      };
+      const cssValue = isArbitrary ? value : (brightnessScale[value] || brightnessScale['normal']);
+      return `backdrop-filter: brightness(${cssValue});`;
+    },
+    
+    'backdrop-contrast': () => {
+      const contrastScale = {
+        'low': 0.5,
+        'reduced': 0.75,
+        'normal': 1,
+        'high': 1.25,
+        'max': 1.5
+      };
+      const cssValue = isArbitrary ? value : (contrastScale[value] || contrastScale['normal']);
+      return `backdrop-filter: contrast(${cssValue});`;
+    },
+    
+    'backdrop-grayscale': () => {
+      const grayscaleScale = {
+        'none': '0%',
+        'partial': '50%',
+        'full': '100%'
+      };
+      const cssValue = isArbitrary ? value : (grayscaleScale[value] || grayscaleScale['full']);
+      return `backdrop-filter: grayscale(${cssValue});`;
+    },
+    
+    'backdrop-hue-rotate': () => {
+      const cssValue = isArbitrary ? value : `${value}deg`;
+      return `backdrop-filter: hue-rotate(${cssValue});`;
+    },
+    
+    'backdrop-invert': () => {
+      const invertScale = {
+        'none': '0%',
+        'partial': '50%',
+        'full': '100%'
+      };
+      const cssValue = isArbitrary ? value : (invertScale[value] || invertScale['full']);
+      return `backdrop-filter: invert(${cssValue});`;
+    },
+    
+    'backdrop-opacity': () => {
+      const opacityScale = {
+        'invisible': 0,
+        'faint': 0.25,
+        'half': 0.5,
+        'visible': 0.75,
+        'solid': 1
+      };
+      const cssValue = isArbitrary ? value : (opacityScale[value] || opacityScale['solid']);
+      return `backdrop-filter: opacity(${cssValue});`;
+    },
+    
+    'backdrop-saturate': () => {
+      const saturateScale = {
+        'none': 0,
+        'low': 0.5,
+        'normal': 1,
+        'high': 1.5,
+        'vivid': 2
+      };
+      const cssValue = isArbitrary ? value : (saturateScale[value] || saturateScale['normal']);
+      return `backdrop-filter: saturate(${cssValue});`;
+    },
+    
+    'backdrop-sepia': () => {
+      const sepiaScale = {
+        'none': '0%',
+        'partial': '50%',
+        'full': '100%'
+      };
+      const cssValue = isArbitrary ? value : (sepiaScale[value] || sepiaScale['full']);
+      return `backdrop-filter: sepia(${cssValue});`;
+    },
+    
+    // =====================
+    // TRANSITION UTILITIES
+    // =====================
+    
+    // Transition Property
+    'transition': () => {
+      const transitionPresets = {
+        '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'
+      };
+      const prop = transitionPresets[value] || transitionPresets['DEFAULT'];
+      return `transition-property: ${prop}; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;`;
+    },
+    
+    'transition-none': () => {
+      return 'transition-property: none;';
+    },
+    
+    // Transition Duration
+    'duration': () => {
+      const durationScale = {
+        'instant': '75ms',
+        'quick': '100ms',
+        'fast': '150ms',
+        'normal': '200ms',
+        'slow': '300ms',
+        'slower': '500ms',
+        'lazy': '700ms'
+      };
+      const cssValue = isArbitrary ? value : (durationScale[value] || durationScale['normal']);
+      return `transition-duration: ${cssValue};`;
+    },
+    
+    // Transition Timing Function
+    'ease': () => {
+      const easingMap = {
+        '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)'
+      };
+      const cssValue = isArbitrary ? value : (easingMap[value] || easingMap['in-out']);
+      return `transition-timing-function: ${cssValue};`;
+    },
+    
+    // Transition Delay
+    'delay': () => {
+      const delayScale = {
+        'instant': '75ms',
+        'quick': '100ms',
+        'fast': '150ms',
+        'normal': '200ms',
+        'slow': '300ms',
+        'slower': '500ms',
+        'lazy': '700ms'
+      };
+      const cssValue = isArbitrary ? value : (delayScale[value] || delayScale['normal']);
+      return `transition-delay: ${cssValue};`;
+    },
+    
+    // Transition Behavior
+    'transition-behavior': () => {
+      return `transition-behavior: ${value};`;
+    },
+    
+    // =====================
+    // ANIMATION UTILITIES
+    // =====================
+    
+    'animate': () => {
+      const animationPresets = {
+        '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'
+      };
+      const cssValue = isArbitrary ? value.replace(/_/g, ' ') : (animationPresets[value] || value);
+      return `animation: ${cssValue};`;
+    },
+    
+    // Animation Duration
+    'animation-duration': () => {
+      const durationScale = {
+        'instant': '75ms',
+        'quick': '100ms',
+        'fast': '150ms',
+        'normal': '200ms',
+        'slow': '300ms',
+        'slower': '500ms',
+        'lazy': '700ms'
+      };
+      const cssValue = isArbitrary ? value : (durationScale[value] || durationScale['normal']);
+      return `animation-duration: ${cssValue};`;
+    },
+    
+    // Animation Delay
+    'animation-delay': () => {
+      const delayScale = {
+        'instant': '75ms',
+        'quick': '100ms',
+        'fast': '150ms',
+        'normal': '200ms',
+        'slow': '300ms',
+        'slower': '500ms',
+        'lazy': '700ms'
+      };
+      const cssValue = isArbitrary ? value : (delayScale[value] || delayScale['normal']);
+      return `animation-delay: ${cssValue};`;
+    },
+    
+    // Animation Iteration Count
+    'animation-iteration': () => {
+      return `animation-iteration-count: ${value};`;
+    },
+    
+    // Animation Direction
+    'animation-direction': () => {
+      return `animation-direction: ${value};`;
+    },
+    
+    // Animation Fill Mode
+    'animation-fill': () => {
+      return `animation-fill-mode: ${value};`;
+    },
+    
+    // Animation Play State
+    'animation-play': () => {
+      return `animation-play-state: ${value};`;
+    },
+    
+    // =====================
+    // TRANSFORM UTILITIES
+    // =====================
+    
+    // Scale
+    'scale': () => {
+      const cssValue = isArbitrary ? value : (parseInt(value) / 100);
+      return `transform: scale(${cssValue});`;
+    },
+    
+    'scale-x': () => {
+      const cssValue = isArbitrary ? value : (parseInt(value) / 100);
+      return `transform: scaleX(${cssValue});`;
+    },
+    
+    'scale-y': () => {
+      const cssValue = isArbitrary ? value : (parseInt(value) / 100);
+      return `transform: scaleY(${cssValue});`;
+    },
+    
+    // Rotate
+    'rotate': () => {
+      const cssValue = isArbitrary ? value : `${value}deg`;
+      return `transform: rotate(${cssValue});`;
+    },
+    
+    // Translate
+    'translate-x': () => {
+      const translatePresets = {
+        'full': '100%',
+        '1/2': '50%',
+        '1/3': '33.333333%',
+        '2/3': '66.666667%',
+        '1/4': '25%',
+        '3/4': '75%'
+      };
+      const cssValue = isArbitrary ? value : (translatePresets[value] || `var(--s-${value})`);
+      return `transform: translateX(${cssValue});`;
+    },
+    
+    'translate-y': () => {
+      const translatePresets = {
+        'full': '100%',
+        '1/2': '50%',
+        '1/3': '33.333333%',
+        '2/3': '66.666667%',
+        '1/4': '25%',
+        '3/4': '75%'
+      };
+      const cssValue = isArbitrary ? value : (translatePresets[value] || `var(--s-${value})`);
+      return `transform: translateY(${cssValue});`;
+    },
+    
+    '-translate-x': () => {
+      const translatePresets = {
+        'full': '-100%',
+        '1/2': '-50%',
+        '1/3': '-33.333333%',
+        '2/3': '-66.666667%',
+        '1/4': '-25%',
+        '3/4': '-75%'
+      };
+      const cssValue = isArbitrary ? `-${value}` : (translatePresets[value] || `calc(var(--s-${value}) * -1)`);
+      return `transform: translateX(${cssValue});`;
+    },
+    
+    '-translate-y': () => {
+      const translatePresets = {
+        'full': '-100%',
+        '1/2': '-50%',
+        '1/3': '-33.333333%',
+        '2/3': '-66.666667%',
+        '1/4': '-25%',
+        '3/4': '-75%'
+      };
+      const cssValue = isArbitrary ? `-${value}` : (translatePresets[value] || `calc(var(--s-${value}) * -1)`);
+      return `transform: translateY(${cssValue});`;
+    },
+    
+    // Skew
+    'skew-x': () => {
+      const cssValue = isArbitrary ? value : `${value}deg`;
+      return `transform: skewX(${cssValue});`;
+    },
+    
+    'skew-y': () => {
+      const cssValue = isArbitrary ? value : `${value}deg`;
+      return `transform: skewY(${cssValue});`;
+    },
+    
+    '-skew-x': () => {
+      const cssValue = isArbitrary ? `-${value}` : `-${value}deg`;
+      return `transform: skewX(${cssValue});`;
+    },
+    
+    '-skew-y': () => {
+      const cssValue = isArbitrary ? `-${value}` : `-${value}deg`;
+      return `transform: skewY(${cssValue});`;
+    },
+    
+    // Transform Origin
+    'origin': () => {
+      const originMap = {
+        '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'
+      };
+      const cssValue = isArbitrary ? value.replace(/_/g, ' ') : (originMap[value] || value);
+      return `transform-origin: ${cssValue};`;
+    },
+    
+    // Transform Style (for 3D transforms)
+    'transform-style': () => {
+      return `transform-style: ${value};`;
+    },
+    
+    // Backface Visibility
+    'backface': () => {
+      return `backface-visibility: ${value};`;
+    },
+    
+    // Perspective
+    'perspective': () => {
+      const perspectivePresets = {
+        'none': 'none',
+        'small': '250px',
+        'medium': '500px',
+        'big': '750px',
+        'giant': '1000px',
+        'vast': '1500px'
+      };
+      const cssValue = isArbitrary ? value : (perspectivePresets[value] || perspectivePresets['medium']);
+      return `perspective: ${cssValue};`;
+    },
+    
+    // Perspective Origin
+    'perspective-origin': () => {
+      const originMap = {
+        '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'
+      };
+      const cssValue = isArbitrary ? value.replace(/_/g, ' ') : (originMap[value] || value);
+      return `perspective-origin: ${cssValue};`;
+    },
+    
+    // =====================
+    // INTERACTIVITY UTILITIES
+    // =====================
+    
+    // Accent Color
+    'accent': () => {
+      const cssValue = isArbitrary ? value : `var(--c-${value})`;
+      return `accent-color: ${cssValue};`;
+    },
+    
+    // Appearance
+    'appearance': () => {
+      return `appearance: ${value};`;
+    },
+    
+    // Caret Color
+    'caret': () => {
+      const cssValue = isArbitrary ? value : `var(--c-${value})`;
+      return `caret-color: ${cssValue};`;
+    },
+    
+    // Color Scheme
+    'color-scheme': () => {
+      return `color-scheme: ${value};`;
+    },
+    
+    // Cursor
+    'cursor': () => {
+      return `cursor: ${value};`;
+    },
+    
+    // Field Sizing
+    'field-sizing': () => {
+      return `field-sizing: ${value};`;
+    },
+    
+    // Pointer Events
+    'pointer-events': () => {
+      return `pointer-events: ${value};`;
+    },
+    
+    // Resize
+    'resize': () => {
+      const resizeMap = {
+        'none': 'none',
+        'both': 'both',
+        'x': 'horizontal',
+        'y': 'vertical'
+      };
+      const cssValue = resizeMap[value] || value;
+      return `resize: ${cssValue};`;
+    },
+    
+    // Scroll Behavior
+    'scroll': () => {
+      return `scroll-behavior: ${value};`;
+    },
+    
+    // Scroll Margin
+    'scroll-m': () => {
+      const cssValue = isArbitrary ? value : `var(--s-${value})`;
+      return `scroll-margin: ${cssValue};`;
+    },
+    'scroll-m-t': () => {
+      const cssValue = isArbitrary ? value : `var(--s-${value})`;
+      return `scroll-margin-top: ${cssValue};`;
+    },
+    'scroll-m-r': () => {
+      const cssValue = isArbitrary ? value : `var(--s-${value})`;
+      return `scroll-margin-right: ${cssValue};`;
+    },
+    'scroll-m-b': () => {
+      const cssValue = isArbitrary ? value : `var(--s-${value})`;
+      return `scroll-margin-bottom: ${cssValue};`;
+    },
+    'scroll-m-l': () => {
+      const cssValue = isArbitrary ? value : `var(--s-${value})`;
+      return `scroll-margin-left: ${cssValue};`;
+    },
+    'scroll-m-x': () => {
+      const cssValue = isArbitrary ? value : `var(--s-${value})`;
+      return `scroll-margin-left: ${cssValue}; scroll-margin-right: ${cssValue};`;
+    },
+    'scroll-m-y': () => {
+      const cssValue = isArbitrary ? value : `var(--s-${value})`;
+      return `scroll-margin-top: ${cssValue}; scroll-margin-bottom: ${cssValue};`;
+    },
+    
+    // Scroll Padding
+    'scroll-p': () => {
+      const cssValue = isArbitrary ? value : `var(--s-${value})`;
+      return `scroll-padding: ${cssValue};`;
+    },
+    'scroll-p-t': () => {
+      const cssValue = isArbitrary ? value : `var(--s-${value})`;
+      return `scroll-padding-top: ${cssValue};`;
+    },
+    'scroll-p-r': () => {
+      const cssValue = isArbitrary ? value : `var(--s-${value})`;
+      return `scroll-padding-right: ${cssValue};`;
+    },
+    'scroll-p-b': () => {
+      const cssValue = isArbitrary ? value : `var(--s-${value})`;
+      return `scroll-padding-bottom: ${cssValue};`;
+    },
+    'scroll-p-l': () => {
+      const cssValue = isArbitrary ? value : `var(--s-${value})`;
+      return `scroll-padding-left: ${cssValue};`;
+    },
+    'scroll-p-x': () => {
+      const cssValue = isArbitrary ? value : `var(--s-${value})`;
+      return `scroll-padding-left: ${cssValue}; scroll-padding-right: ${cssValue};`;
+    },
+    'scroll-p-y': () => {
+      const cssValue = isArbitrary ? value : `var(--s-${value})`;
+      return `scroll-padding-top: ${cssValue}; scroll-padding-bottom: ${cssValue};`;
+    },
+    
+    // Scroll Snap Align
+    'snap-align': () => {
+      return `scroll-snap-align: ${value};`;
+    },
+    
+    // Scroll Snap Stop
+    'snap-stop': () => {
+      return `scroll-snap-stop: ${value};`;
+    },
+    
+    // Scroll Snap Type
+    'snap': () => {
+      const snapMap = {
+        'none': 'none',
+        'x': 'x mandatory',
+        'x-proximity': 'x proximity',
+        'y': 'y mandatory',
+        'y-proximity': 'y proximity',
+        'both': 'both mandatory',
+        'both-proximity': 'both proximity'
+      };
+      const cssValue = snapMap[value] || value;
+      return `scroll-snap-type: ${cssValue};`;
+    },
+    
+    // Touch Action
+    'touch': () => {
+      const touchMap = {
+        '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'
+      };
+      const cssValue = touchMap[value] || value;
+      return `touch-action: ${cssValue};`;
+    },
+    
+    // User Select
+    'select': () => {
+      return `user-select: ${value};`;
+    },
+    
+    // Will Change
+    'will-change': () => {
+      const willChangeMap = {
+        'auto': 'auto',
+        'scroll': 'scroll-position',
+        'contents': 'contents',
+        'transform': 'transform',
+        'opacity': 'opacity'
+      };
+      const cssValue = willChangeMap[value] || value;
+      return `will-change: ${cssValue};`;
+    },
+    
+    // =====================
+    // SVG UTILITIES
+    // =====================
+    
+    // Fill
+    'fill': () => {
+      if (value === 'none') {
+        return 'fill: none;';
+      }
+      if (value === 'current') {
+        return 'fill: currentColor;';
+      }
+      const cssValue = isArbitrary ? value : `var(--c-${value})`;
+      return `fill: ${cssValue};`;
+    },
+    
+    // Stroke
+    'stroke': () => {
+      if (value === 'none') {
+        return 'stroke: none;';
+      }
+      if (value === 'current') {
+        return 'stroke: currentColor;';
+      }
+      const cssValue = isArbitrary ? value : `var(--c-${value})`;
+      return `stroke: ${cssValue};`;
+    },
+    
+    // Stroke Width
+    'stroke-w': () => {
+      const cssValue = isArbitrary ? value : `${value}px`;
+      return `stroke-width: ${cssValue};`;
+    },
+    
+    // =====================
+    // ACCESSIBILITY UTILITIES
+    // =====================
+    
+    // Forced Color Adjust
+    'forced-colors': () => {
+      return `forced-color-adjust: ${value};`;
     }
   };
   
@@ -304,13 +1801,28 @@ export function generateCSS(tokens, config) {
   // Add CSS variables
   css += generateCSSVariables(config);
   
-  // Add base reset styles
-  css += `/* SenangStart CSS - Base Reset */
-*, *::before, *::after {
-  box-sizing: border-box;
+  // Add Preflight base styles if enabled (default: true)
+  if (config.preflight !== false) {
+    css += generatePreflight(config);
+  }
+  
+  // Add animation keyframes
+  css += `/* SenangStart CSS - Animation Keyframes */
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+@keyframes ping {
+  75%, 100% { transform: scale(2); opacity: 0; }
+}
+@keyframes pulse {
+  50% { opacity: .5; }
+}
+@keyframes bounce {
+  0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
+  50% { transform: none; animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
 }
 
-/* Layout utilities */
+/* SenangStart CSS - Utility Classes */
 `;
   
   // Group tokens by breakpoint and dark mode