feat: add CssTabSize, CssCaretColor, CssScrollSnapType, CssScrollSnapAlign, CssScrollMargin

packages/spark_css/CHANGELOG.md

@@ -36,6 +36,11 @@
 - **Feat**: Added `CssTouchAction` sealed class for `touch-action` property with `.auto`, `.none`, `.manipulation` standalone keywords, `.panX`, `.panLeft`, `.panRight`, `.panY`, `.panUp`, `.panDown`, `.pinchZoom` combinable keywords, and `.combine()` factory, plus `.variable()`, `.raw()`, and `.global()` escape hatches.
 - **Feat**: Added `CssUserSelect` sealed class for `user-select` property with `.none`, `.auto`, `.text`, `.all`, `.contain` keywords, plus `.variable()`, `.raw()`, and `.global()` escape hatches.
 - **Feat**: Added `CssHyphens` sealed class for `hyphens` property with `.none`, `.manual`, `.auto` keywords, plus `.variable()`, `.raw()`, and `.global()` escape hatches.
+- **Feat**: Added `CssTabSize` sealed class for `tab-size` property with `.number()`, `.length()` factories, plus `.variable()`, `.raw()`, and `.global()` escape hatches.
+- **Feat**: Added `CssCaretColor` sealed class for `caret-color` property with `.auto` keyword, `.color()` factory, plus `.variable()`, `.raw()`, and `.global()` escape hatches.
+- **Feat**: Added `CssScrollSnapType` sealed class for `scroll-snap-type` property with `.none` keyword, `.axis()` factory with optional strictness, plus `.variable()`, `.raw()`, and `.global()` escape hatches.
+- **Feat**: Added `CssScrollSnapAlign` sealed class for `scroll-snap-align` property with `.none`, `.start`, `.end`, `.center` keywords, `.pair()` for two-value syntax, plus `.variable()`, `.raw()`, and `.global()` escape hatches.
+- **Feat**: Added `CssScrollMargin` sealed class for `scroll-margin` property with `.all()`, `.symmetric()`, `.only()` factories, plus `.variable()`, `.raw()`, and `.global()` escape hatches.
 
 ### Changed
 

packages/spark_css/lib/src/css_types/css_caret_color.dart

@@ -0,0 +1,61 @@
+import 'css_color.dart';
+import 'css_value.dart';
+
+/// CSS caret-color property values.
+sealed class CssCaretColor implements CssValue {
+  const CssCaretColor._();
+
+  static const CssCaretColor auto = _CssCaretColorKeyword('auto');
+
+  /// Caret color from a CssColor value.
+  factory CssCaretColor.color(CssColor color) = _CssCaretColorValue;
+
+  /// CSS variable reference.
+  factory CssCaretColor.variable(String varName) = _CssCaretColorVariable;
+
+  /// Raw CSS value escape hatch.
+  factory CssCaretColor.raw(String value) = _CssCaretColorRaw;
+
+  /// Global keyword (inherit, initial, unset, revert).
+  factory CssCaretColor.global(CssGlobal global) = _CssCaretColorGlobal;
+}
+
+final class _CssCaretColorKeyword extends CssCaretColor {
+  final String keyword;
+  const _CssCaretColorKeyword(this.keyword) : super._();
+
+  @override
+  String toCss() => keyword;
+}
+
+final class _CssCaretColorValue extends CssCaretColor {
+  final CssColor color;
+  const _CssCaretColorValue(this.color) : super._();
+
+  @override
+  String toCss() => color.toCss();
+}
+
+final class _CssCaretColorVariable extends CssCaretColor {
+  final String varName;
+  const _CssCaretColorVariable(this.varName) : super._();
+
+  @override
+  String toCss() => 'var(--$varName)';
+}
+
+final class _CssCaretColorRaw extends CssCaretColor {
+  final String value;
+  const _CssCaretColorRaw(this.value) : super._();
+
+  @override
+  String toCss() => value;
+}
+
+final class _CssCaretColorGlobal extends CssCaretColor {
+  final CssGlobal global;
+  const _CssCaretColorGlobal(this.global) : super._();
+
+  @override
+  String toCss() => global.toCss();
+}

packages/spark_css/lib/src/css_types/css_scroll_margin.dart

@@ -0,0 +1,96 @@
+import 'css_length.dart';
+import 'css_value.dart';
+
+/// CSS scroll-margin property values.
+sealed class CssScrollMargin implements CssValue {
+  const CssScrollMargin._();
+
+  /// Same value for all four sides.
+  ///
+  /// Example: `CssScrollMargin.all(CssLength.px(10))` → `10px`
+  factory CssScrollMargin.all(CssLength value) = _CssScrollMarginAll;
+
+  /// Symmetric scroll margin (vertical and horizontal).
+  ///
+  /// Example: `CssScrollMargin.symmetric(CssLength.px(10), CssLength.px(20))` → `10px 20px`
+  factory CssScrollMargin.symmetric(CssLength vertical, CssLength horizontal) =
+      _CssScrollMarginSymmetric;
+
+  /// Individual sides.
+  ///
+  /// Example: `CssScrollMargin.only(top: CssLength.px(10), right: CssLength.px(20), bottom: CssLength.px(30), left: CssLength.px(40))` → `10px 20px 30px 40px`
+  factory CssScrollMargin.only({
+    CssLength? top,
+    CssLength? right,
+    CssLength? bottom,
+    CssLength? left,
+  }) = _CssScrollMarginOnly;
+
+  /// CSS variable reference.
+  factory CssScrollMargin.variable(String varName) = _CssScrollMarginVariable;
+
+  /// Raw CSS value escape hatch.
+  factory CssScrollMargin.raw(String value) = _CssScrollMarginRaw;
+
+  /// Global keyword (inherit, initial, unset, revert).
+  factory CssScrollMargin.global(CssGlobal global) = _CssScrollMarginGlobal;
+}
+
+final class _CssScrollMarginAll extends CssScrollMargin {
+  final CssLength value;
+  const _CssScrollMarginAll(this.value) : super._();
+
+  @override
+  String toCss() => value.toCss();
+}
+
+final class _CssScrollMarginSymmetric extends CssScrollMargin {
+  final CssLength vertical;
+  final CssLength horizontal;
+  const _CssScrollMarginSymmetric(this.vertical, this.horizontal) : super._();
+
+  @override
+  String toCss() => '${vertical.toCss()} ${horizontal.toCss()}';
+}
+
+final class _CssScrollMarginOnly extends CssScrollMargin {
+  final CssLength? top;
+  final CssLength? right;
+  final CssLength? bottom;
+  final CssLength? left;
+  const _CssScrollMarginOnly({this.top, this.right, this.bottom, this.left})
+    : super._();
+
+  @override
+  String toCss() {
+    final t = top ?? CssLength.zero;
+    final r = right ?? CssLength.zero;
+    final b = bottom ?? CssLength.zero;
+    final l = left ?? CssLength.zero;
+    return '${t.toCss()} ${r.toCss()} ${b.toCss()} ${l.toCss()}';
+  }
+}
+
+final class _CssScrollMarginVariable extends CssScrollMargin {
+  final String varName;
+  const _CssScrollMarginVariable(this.varName) : super._();
+
+  @override
+  String toCss() => 'var(--$varName)';
+}
+
+final class _CssScrollMarginRaw extends CssScrollMargin {
+  final String value;
+  const _CssScrollMarginRaw(this.value) : super._();
+
+  @override
+  String toCss() => value;
+}
+
+final class _CssScrollMarginGlobal extends CssScrollMargin {
+  final CssGlobal global;
+  const _CssScrollMarginGlobal(this.global) : super._();
+
+  @override
+  String toCss() => global.toCss();
+}

packages/spark_css/lib/src/css_types/css_scroll_snap_align.dart

@@ -0,0 +1,69 @@
+import 'css_value.dart';
+
+/// CSS scroll-snap-align property values.
+sealed class CssScrollSnapAlign implements CssValue {
+  const CssScrollSnapAlign._();
+
+  static const CssScrollSnapAlign none = _CssScrollSnapAlignKeyword('none');
+  static const CssScrollSnapAlign start = _CssScrollSnapAlignKeyword('start');
+  static const CssScrollSnapAlign end = _CssScrollSnapAlignKeyword('end');
+  static const CssScrollSnapAlign center = _CssScrollSnapAlignKeyword('center');
+
+  /// Two-value syntax: inline alignment and block alignment.
+  ///
+  /// Example: `CssScrollSnapAlign.pair('start', 'end')` → `start end`
+  factory CssScrollSnapAlign.pair(String align, String blockAlign) =
+      _CssScrollSnapAlignPair;
+
+  /// CSS variable reference.
+  factory CssScrollSnapAlign.variable(String varName) =
+      _CssScrollSnapAlignVariable;
+
+  /// Raw CSS value escape hatch.
+  factory CssScrollSnapAlign.raw(String value) = _CssScrollSnapAlignRaw;
+
+  /// Global keyword (inherit, initial, unset, revert).
+  factory CssScrollSnapAlign.global(CssGlobal global) =
+      _CssScrollSnapAlignGlobal;
+}
+
+final class _CssScrollSnapAlignKeyword extends CssScrollSnapAlign {
+  final String keyword;
+  const _CssScrollSnapAlignKeyword(this.keyword) : super._();
+
+  @override
+  String toCss() => keyword;
+}
+
+final class _CssScrollSnapAlignPair extends CssScrollSnapAlign {
+  final String align;
+  final String blockAlign;
+  const _CssScrollSnapAlignPair(this.align, this.blockAlign) : super._();
+
+  @override
+  String toCss() => '$align $blockAlign';
+}
+
+final class _CssScrollSnapAlignVariable extends CssScrollSnapAlign {
+  final String varName;
+  const _CssScrollSnapAlignVariable(this.varName) : super._();
+
+  @override
+  String toCss() => 'var(--$varName)';
+}
+
+final class _CssScrollSnapAlignRaw extends CssScrollSnapAlign {
+  final String value;
+  const _CssScrollSnapAlignRaw(this.value) : super._();
+
+  @override
+  String toCss() => value;
+}
+
+final class _CssScrollSnapAlignGlobal extends CssScrollSnapAlign {
+  final CssGlobal global;
+  const _CssScrollSnapAlignGlobal(this.global) : super._();
+
+  @override
+  String toCss() => global.toCss();
+}

packages/spark_css/lib/src/css_types/css_scroll_snap_type.dart

@@ -0,0 +1,68 @@
+import 'css_value.dart';
+
+/// CSS scroll-snap-type property values.
+sealed class CssScrollSnapType implements CssValue {
+  const CssScrollSnapType._();
+
+  static const CssScrollSnapType none = _CssScrollSnapTypeKeyword('none');
+
+  /// Scroll snap type with axis and optional strictness.
+  ///
+  /// [axis] must be one of: `x`, `y`, `block`, `inline`, `both`.
+  /// [strictness] is optional: `mandatory` or `proximity`.
+  ///
+  /// Example: `CssScrollSnapType.axis('x', 'mandatory')` → `x mandatory`
+  factory CssScrollSnapType.axis(String axis, [String? strictness]) =
+      _CssScrollSnapTypeAxis;
+
+  /// CSS variable reference.
+  factory CssScrollSnapType.variable(String varName) =
+      _CssScrollSnapTypeVariable;
+
+  /// Raw CSS value escape hatch.
+  factory CssScrollSnapType.raw(String value) = _CssScrollSnapTypeRaw;
+
+  /// Global keyword (inherit, initial, unset, revert).
+  factory CssScrollSnapType.global(CssGlobal global) = _CssScrollSnapTypeGlobal;
+}
+
+final class _CssScrollSnapTypeKeyword extends CssScrollSnapType {
+  final String keyword;
+  const _CssScrollSnapTypeKeyword(this.keyword) : super._();
+
+  @override
+  String toCss() => keyword;
+}
+
+final class _CssScrollSnapTypeAxis extends CssScrollSnapType {
+  final String axis;
+  final String? strictness;
+  const _CssScrollSnapTypeAxis(this.axis, [this.strictness]) : super._();
+
+  @override
+  String toCss() => strictness != null ? '$axis $strictness' : axis;
+}
+
+final class _CssScrollSnapTypeVariable extends CssScrollSnapType {
+  final String varName;
+  const _CssScrollSnapTypeVariable(this.varName) : super._();
+
+  @override
+  String toCss() => 'var(--$varName)';
+}
+
+final class _CssScrollSnapTypeRaw extends CssScrollSnapType {
+  final String value;
+  const _CssScrollSnapTypeRaw(this.value) : super._();
+
+  @override
+  String toCss() => value;
+}
+
+final class _CssScrollSnapTypeGlobal extends CssScrollSnapType {
+  final CssGlobal global;
+  const _CssScrollSnapTypeGlobal(this.global) : super._();
+
+  @override
+  String toCss() => global.toCss();
+}

packages/spark_css/lib/src/css_types/css_tab_size.dart

@@ -0,0 +1,62 @@
+import 'css_length.dart';
+import 'css_value.dart';
+
+/// CSS tab-size property values.
+sealed class CssTabSize implements CssValue {
+  const CssTabSize._();
+
+  /// Tab size as a number (number of spaces).
+  factory CssTabSize.number(int value) = _CssTabSizeNumber;
+
+  /// Tab size as a length.
+  factory CssTabSize.length(CssLength value) = _CssTabSizeLength;
+
+  /// CSS variable reference.
+  factory CssTabSize.variable(String varName) = _CssTabSizeVariable;
+
+  /// Raw CSS value escape hatch.
+  factory CssTabSize.raw(String value) = _CssTabSizeRaw;
+
+  /// Global keyword (inherit, initial, unset, revert).
+  factory CssTabSize.global(CssGlobal global) = _CssTabSizeGlobal;
+}
+
+final class _CssTabSizeNumber extends CssTabSize {
+  final int value;
+  const _CssTabSizeNumber(this.value) : super._();
+
+  @override
+  String toCss() => '$value';
+}
+
+final class _CssTabSizeLength extends CssTabSize {
+  final CssLength value;
+  const _CssTabSizeLength(this.value) : super._();
+
+  @override
+  String toCss() => value.toCss();
+}
+
+final class _CssTabSizeVariable extends CssTabSize {
+  final String varName;
+  const _CssTabSizeVariable(this.varName) : super._();
+
+  @override
+  String toCss() => 'var(--$varName)';
+}
+
+final class _CssTabSizeRaw extends CssTabSize {
+  final String value;
+  const _CssTabSizeRaw(this.value) : super._();
+
+  @override
+  String toCss() => value;
+}
+
+final class _CssTabSizeGlobal extends CssTabSize {
+  final CssGlobal global;
+  const _CssTabSizeGlobal(this.global) : super._();
+
+  @override
+  String toCss() => global.toCss();
+}

packages/spark_css/lib/src/css_types/css_types.dart

@@ -18,6 +18,7 @@ export 'css_border_collapse.dart';
 export 'css_border_radius.dart';
 export 'css_box_shadow.dart';
 export 'css_box_sizing.dart';
+export 'css_caret_color.dart';
 export 'css_color.dart';
 export 'css_contain.dart';
 export 'css_content.dart';
@@ -49,7 +50,11 @@ export 'css_radial_shape.dart';
 export 'css_radial_size.dart';
 export 'css_resize.dart';
 export 'css_scroll_behavior.dart';
+export 'css_scroll_margin.dart';
+export 'css_scroll_snap_align.dart';
+export 'css_scroll_snap_type.dart';
 export 'css_spacing.dart';
+export 'css_tab_size.dart';
 export 'css_text.dart';
 export 'css_text_overflow.dart';
 export 'css_text_shadow.dart';