fix: scroll

src/constants/css-property-keyword.ts

@@ -206,4 +206,6 @@ export const OUTLINE = 'outline';
 export const COLLAPSE = 'collapse';
 export const LAYOUT = 'layout';
 export const ACCENT = 'accent';
-export const CARET = 'caret';
+export const CARET = 'caret';
+export const SNAP = 'snap';
+export const STOP = 'stop';

src/index.ts

@@ -136,6 +136,11 @@ import { AppearanceStyle } from './appearance';
 import { CaretColorStyle } from './caret-color';
 import { ScrollBehaviorStyle } from './scroll-behavior';
 import { ScrollMarginStyle } from './scroll-margin';
+import { ScrollPaddingStyle } from './scroll-padding';
+import { ScrollSnapAlignStyle } from './scroll-snap-align';
+import { ScrollSnapStopStyle } from './scroll-snap-stop';
+import { ScrollSnapTypeStyle } from './scroll-snap-type';
+import { WillChangeStyle } from './will-change';
 
 Style.Subscriptions.push(
     VariableStyle,
@@ -287,6 +292,12 @@ Style.Subscriptions.push(
     AccentColorStyle,
     AppearanceStyle,
     CaretColorStyle,
+    // scroll
     ScrollBehaviorStyle,
-    ScrollMarginStyle
+    ScrollMarginStyle,
+    ScrollPaddingStyle,
+    ScrollSnapAlignStyle,
+    ScrollSnapStopStyle,
+    ScrollSnapTypeStyle,
+    WillChangeStyle
 )

src/scroll-padding.ts

@@ -0,0 +1,50 @@
+import { Style } from '@master/style';
+import { DASH, PADDING, SCROLL } from './constants/css-property-keyword';
+import { B, BOTTOM, L, LEFT, R, RIGHT, T, TOP, X, Y } from './constants/direction';
+
+export class ScrollPaddingStyle extends Style {
+    static override prefixes = /^scroll-(p(x|y|t|b|l|r)|p(adding)?(-(top|bottom|left|right))?):/;
+    static override supportFullName = false;
+    override get properties(): { [key: string]: any } {
+        if (this.prefix.slice(-3, -2) === 'p') {
+            const SCROLL_PADDING_PREFIX = SCROLL + DASH + PADDING + DASH,
+                SCROLL_PADDING_LEFT = SCROLL_PADDING_PREFIX + LEFT,
+                SCROLL_PADDING_RIGHT = SCROLL_PADDING_PREFIX + RIGHT,
+                SCROLL_PADDING_TOP = SCROLL_PADDING_PREFIX + TOP,
+                SCROLL_PADDING_BOTTOM = SCROLL_PADDING_PREFIX + BOTTOM;
+
+            switch (this.prefix.slice(-2, -1)) {
+                case X:
+                    return {
+                        [SCROLL_PADDING_LEFT]: this,
+                        [SCROLL_PADDING_RIGHT]: this
+                    }
+                case Y:
+                    return {
+                        [SCROLL_PADDING_TOP]: this,
+                        [SCROLL_PADDING_BOTTOM]: this
+                    }
+                case L:
+                    return {
+                        [SCROLL_PADDING_LEFT]: this
+                    }
+                case R:
+                    return {
+                        [SCROLL_PADDING_RIGHT]: this
+                    }
+                case T:
+                    return {
+                        [SCROLL_PADDING_TOP]: this
+                    }
+                case B:
+                    return {
+                        [SCROLL_PADDING_BOTTOM]: this
+                    }
+            }
+        } else {
+            return {
+                [this.prefix.replace(/-p(?!adding)/, '-' + PADDING).slice(0, -1)]: this
+            }
+        }
+    }
+}

src/scroll-snap-align.ts

@@ -0,0 +1,6 @@
+import { Style } from '@master/style';
+import { ALIGN, DASH, SCROLL, SNAP } from './constants/css-property-keyword';
+
+export class ScrollSnapAlignStyle extends Style {
+    static override properties = [SCROLL + DASH + SNAP + DASH + ALIGN];
+}

src/scroll-snap-stop.ts

@@ -0,0 +1,6 @@
+import { Style } from '@master/style';
+import { DASH, SCROLL, SNAP, STOP } from './constants/css-property-keyword';
+
+export class ScrollSnapStopStyle extends Style {
+    static override properties = [SCROLL + DASH + SNAP + DASH + STOP];
+}

src/scroll-snap-type.ts

@@ -0,0 +1,6 @@
+import { Style } from '@master/style';
+import { DASH, SCROLL, SNAP, TYPE } from './constants/css-property-keyword';
+
+export class ScrollSnapTypeStyle extends Style {
+    static override properties = [SCROLL + DASH + SNAP + DASH + TYPE];
+}

src/will-change.ts

@@ -0,0 +1,5 @@
+import { Style } from '@master/style';
+
+export class WillChangeStyle extends Style {
+    static override properties = ['will-change'];
+}