feat: add CssContain, CssWillChange, CssTouchAction, CssUserSelect, CssHyphens

packages/spark_css/CHANGELOG.md

@@ -31,6 +31,11 @@
 - **Feat**: Added `CssIsolation` sealed class for `isolation` property with `.auto`, `.isolate` keywords, plus `.variable()`, `.raw()`, and `.global()` escape hatches.
 - **Feat**: Added `CssMixBlendMode` sealed class for `mix-blend-mode` property with `.normal`, `.multiply`, `.screen`, `.overlay`, `.darken`, `.lighten`, `.colorDodge`, `.colorBurn`, `.hardLight`, `.softLight`, `.difference`, `.exclusion`, `.hue`, `.saturation`, `.color`, `.luminosity` keywords, plus `.variable()`, `.raw()`, and `.global()` escape hatches.
 - **Feat**: Added `CssBackgroundBlendMode` sealed class for `background-blend-mode` property with `.normal`, `.multiply`, `.screen`, `.overlay`, `.darken`, `.lighten`, `.colorDodge`, `.colorBurn`, `.hardLight`, `.softLight`, `.difference`, `.exclusion`, `.hue`, `.saturation`, `.color`, `.luminosity` keywords, plus `.variable()`, `.raw()`, and `.global()` escape hatches.
+- **Feat**: Added `CssContain` sealed class for `contain` property with `.none`, `.strict`, `.content` keyword shortcuts, `.size`, `.layout`, `.style`, `.paint` individual keyword constants, and `.flags()` factory for composing individual containment values, plus `.variable()`, `.raw()`, and `.global()` escape hatches.
+- **Feat**: Added `CssWillChange` sealed class for `will-change` property with `.auto`, `.scrollPosition`, `.contents` keywords and `.properties()` factory for arbitrary CSS property names, plus `.variable()`, `.raw()`, and `.global()` escape hatches.
+- **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.
 
 ### Changed
 

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

@@ -0,0 +1,86 @@
+import 'css_value.dart';
+
+/// CSS contain property values.
+sealed class CssContain implements CssValue {
+  const CssContain._();
+
+  static const CssContain none = _CssContainKeyword('none');
+  static const CssContain strict = _CssContainKeyword('strict');
+  static const CssContain content = _CssContainKeyword('content');
+  static const CssContain size = _CssContainKeyword('size');
+  static const CssContain layout = _CssContainKeyword('layout');
+  static const CssContain style = _CssContainKeyword('style');
+  static const CssContain paint = _CssContainKeyword('paint');
+
+  /// Constructs a `contain` value from boolean flags.
+  ///
+  /// Active flags are joined with spaces in the order: size, layout, style,
+  /// paint. Returns `none` if no flags are true.
+  factory CssContain.flags({bool size, bool layout, bool style, bool paint}) =
+      _CssContainFlags;
+
+  /// CSS variable reference.
+  factory CssContain.variable(String varName) = _CssContainVariable;
+
+  /// Raw CSS value escape hatch.
+  factory CssContain.raw(String value) = _CssContainRaw;
+
+  /// Global keyword (inherit, initial, unset, revert).
+  factory CssContain.global(CssGlobal global) = _CssContainGlobal;
+}
+
+final class _CssContainKeyword extends CssContain {
+  final String keyword;
+  const _CssContainKeyword(this.keyword) : super._();
+
+  @override
+  String toCss() => keyword;
+}
+
+final class _CssContainFlags extends CssContain {
+  final bool size;
+  final bool layout;
+  final bool style;
+  final bool paint;
+
+  const _CssContainFlags({
+    this.size = false,
+    this.layout = false,
+    this.style = false,
+    this.paint = false,
+  }) : super._();
+
+  @override
+  String toCss() {
+    final parts = <String>[];
+    if (size) parts.add('size');
+    if (layout) parts.add('layout');
+    if (style) parts.add('style');
+    if (paint) parts.add('paint');
+    return parts.isEmpty ? 'none' : parts.join(' ');
+  }
+}
+
+final class _CssContainVariable extends CssContain {
+  final String varName;
+  const _CssContainVariable(this.varName) : super._();
+
+  @override
+  String toCss() => 'var(--$varName)';
+}
+
+final class _CssContainRaw extends CssContain {
+  final String value;
+  const _CssContainRaw(this.value) : super._();
+
+  @override
+  String toCss() => value;
+}
+
+final class _CssContainGlobal extends CssContain {
+  final CssGlobal global;
+  const _CssContainGlobal(this.global) : super._();
+
+  @override
+  String toCss() => global.toCss();
+}

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

@@ -0,0 +1,51 @@
+import 'css_value.dart';
+
+/// CSS hyphens property values.
+sealed class CssHyphens implements CssValue {
+  const CssHyphens._();
+
+  static const CssHyphens none = _CssHyphensKeyword('none');
+  static const CssHyphens manual = _CssHyphensKeyword('manual');
+  static const CssHyphens auto = _CssHyphensKeyword('auto');
+
+  /// CSS variable reference.
+  factory CssHyphens.variable(String varName) = _CssHyphensVariable;
+
+  /// Raw CSS value escape hatch.
+  factory CssHyphens.raw(String value) = _CssHyphensRaw;
+
+  /// Global keyword (inherit, initial, unset, revert).
+  factory CssHyphens.global(CssGlobal global) = _CssHyphensGlobal;
+}
+
+final class _CssHyphensKeyword extends CssHyphens {
+  final String keyword;
+  const _CssHyphensKeyword(this.keyword) : super._();
+
+  @override
+  String toCss() => keyword;
+}
+
+final class _CssHyphensVariable extends CssHyphens {
+  final String varName;
+  const _CssHyphensVariable(this.varName) : super._();
+
+  @override
+  String toCss() => 'var(--$varName)';
+}
+
+final class _CssHyphensRaw extends CssHyphens {
+  final String value;
+  const _CssHyphensRaw(this.value) : super._();
+
+  @override
+  String toCss() => value;
+}
+
+final class _CssHyphensGlobal extends CssHyphens {
+  final CssGlobal global;
+  const _CssHyphensGlobal(this.global) : super._();
+
+  @override
+  String toCss() => global.toCss();
+}

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

@@ -0,0 +1,75 @@
+import 'css_value.dart';
+
+/// CSS touch-action property values.
+sealed class CssTouchAction implements CssValue {
+  const CssTouchAction._();
+
+  static const CssTouchAction auto = _CssTouchActionKeyword('auto');
+  static const CssTouchAction none = _CssTouchActionKeyword('none');
+  static const CssTouchAction manipulation = _CssTouchActionKeyword(
+    'manipulation',
+  );
+  static const CssTouchAction panX = _CssTouchActionKeyword('pan-x');
+  static const CssTouchAction panLeft = _CssTouchActionKeyword('pan-left');
+  static const CssTouchAction panRight = _CssTouchActionKeyword('pan-right');
+  static const CssTouchAction panY = _CssTouchActionKeyword('pan-y');
+  static const CssTouchAction panUp = _CssTouchActionKeyword('pan-up');
+  static const CssTouchAction panDown = _CssTouchActionKeyword('pan-down');
+  static const CssTouchAction pinchZoom = _CssTouchActionKeyword('pinch-zoom');
+
+  /// Combines multiple touch-action values.
+  ///
+  /// Example: `CssTouchAction.combine([CssTouchAction.panX, CssTouchAction.pinchZoom])`
+  /// produces `pan-x pinch-zoom`.
+  factory CssTouchAction.combine(List<CssTouchAction> values) =
+      _CssTouchActionCombined;
+
+  /// CSS variable reference.
+  factory CssTouchAction.variable(String varName) = _CssTouchActionVariable;
+
+  /// Raw CSS value escape hatch.
+  factory CssTouchAction.raw(String value) = _CssTouchActionRaw;
+
+  /// Global keyword (inherit, initial, unset, revert).
+  factory CssTouchAction.global(CssGlobal global) = _CssTouchActionGlobal;
+}
+
+final class _CssTouchActionKeyword extends CssTouchAction {
+  final String keyword;
+  const _CssTouchActionKeyword(this.keyword) : super._();
+
+  @override
+  String toCss() => keyword;
+}
+
+final class _CssTouchActionCombined extends CssTouchAction {
+  final List<CssTouchAction> values;
+  const _CssTouchActionCombined(this.values) : super._();
+
+  @override
+  String toCss() => values.map((v) => v.toCss()).join(' ');
+}
+
+final class _CssTouchActionVariable extends CssTouchAction {
+  final String varName;
+  const _CssTouchActionVariable(this.varName) : super._();
+
+  @override
+  String toCss() => 'var(--$varName)';
+}
+
+final class _CssTouchActionRaw extends CssTouchAction {
+  final String value;
+  const _CssTouchActionRaw(this.value) : super._();
+
+  @override
+  String toCss() => value;
+}
+
+final class _CssTouchActionGlobal extends CssTouchAction {
+  final CssGlobal global;
+  const _CssTouchActionGlobal(this.global) : super._();
+
+  @override
+  String toCss() => global.toCss();
+}

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

@@ -19,6 +19,7 @@ export 'css_border_radius.dart';
 export 'css_box_shadow.dart';
 export 'css_box_sizing.dart';
 export 'css_color.dart';
+export 'css_contain.dart';
 export 'css_content.dart';
 export 'css_cursor.dart';
 export 'css_display.dart';
@@ -28,6 +29,7 @@ export 'css_flex_shorthand.dart';
 export 'css_font.dart';
 export 'css_gradient_direction.dart';
 export 'css_grid_template_columns.dart';
+export 'css_hyphens.dart';
 export 'css_isolation.dart';
 export 'css_justify_items.dart';
 export 'css_justify_self.dart';
@@ -51,6 +53,9 @@ export 'css_spacing.dart';
 export 'css_text.dart';
 export 'css_text_overflow.dart';
 export 'css_text_shadow.dart';
+export 'css_touch_action.dart';
 export 'css_transform.dart';
 export 'css_transition.dart';
+export 'css_user_select.dart';
 export 'css_value.dart';
+export 'css_will_change.dart';

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

@@ -0,0 +1,53 @@
+import 'css_value.dart';
+
+/// CSS user-select property values.
+sealed class CssUserSelect implements CssValue {
+  const CssUserSelect._();
+
+  static const CssUserSelect none = _CssUserSelectKeyword('none');
+  static const CssUserSelect auto = _CssUserSelectKeyword('auto');
+  static const CssUserSelect text = _CssUserSelectKeyword('text');
+  static const CssUserSelect all = _CssUserSelectKeyword('all');
+  static const CssUserSelect contain = _CssUserSelectKeyword('contain');
+
+  /// CSS variable reference.
+  factory CssUserSelect.variable(String varName) = _CssUserSelectVariable;
+
+  /// Raw CSS value escape hatch.
+  factory CssUserSelect.raw(String value) = _CssUserSelectRaw;
+
+  /// Global keyword (inherit, initial, unset, revert).
+  factory CssUserSelect.global(CssGlobal global) = _CssUserSelectGlobal;
+}
+
+final class _CssUserSelectKeyword extends CssUserSelect {
+  final String keyword;
+  const _CssUserSelectKeyword(this.keyword) : super._();
+
+  @override
+  String toCss() => keyword;
+}
+
+final class _CssUserSelectVariable extends CssUserSelect {
+  final String varName;
+  const _CssUserSelectVariable(this.varName) : super._();
+
+  @override
+  String toCss() => 'var(--$varName)';
+}
+
+final class _CssUserSelectRaw extends CssUserSelect {
+  final String value;
+  const _CssUserSelectRaw(this.value) : super._();
+
+  @override
+  String toCss() => value;
+}
+
+final class _CssUserSelectGlobal extends CssUserSelect {
+  final CssGlobal global;
+  const _CssUserSelectGlobal(this.global) : super._();
+
+  @override
+  String toCss() => global.toCss();
+}

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

@@ -0,0 +1,68 @@
+import 'css_value.dart';
+
+/// CSS will-change property values.
+sealed class CssWillChange implements CssValue {
+  const CssWillChange._();
+
+  static const CssWillChange auto = _CssWillChangeKeyword('auto');
+  static const CssWillChange scrollPosition = _CssWillChangeKeyword(
+    'scroll-position',
+  );
+  static const CssWillChange contents = _CssWillChangeKeyword('contents');
+
+  /// Hints that the listed CSS property names will change.
+  ///
+  /// Example: `CssWillChange.properties(['transform', 'opacity'])`
+  /// produces `will-change: transform, opacity`.
+  factory CssWillChange.properties(List<String> properties) =
+      _CssWillChangeProperties;
+
+  /// CSS variable reference.
+  factory CssWillChange.variable(String varName) = _CssWillChangeVariable;
+
+  /// Raw CSS value escape hatch.
+  factory CssWillChange.raw(String value) = _CssWillChangeRaw;
+
+  /// Global keyword (inherit, initial, unset, revert).
+  factory CssWillChange.global(CssGlobal global) = _CssWillChangeGlobal;
+}
+
+final class _CssWillChangeKeyword extends CssWillChange {
+  final String keyword;
+  const _CssWillChangeKeyword(this.keyword) : super._();
+
+  @override
+  String toCss() => keyword;
+}
+
+final class _CssWillChangeProperties extends CssWillChange {
+  final List<String> properties;
+  const _CssWillChangeProperties(this.properties) : super._();
+
+  @override
+  String toCss() => properties.join(', ');
+}
+
+final class _CssWillChangeVariable extends CssWillChange {
+  final String varName;
+  const _CssWillChangeVariable(this.varName) : super._();
+
+  @override
+  String toCss() => 'var(--$varName)';
+}
+
+final class _CssWillChangeRaw extends CssWillChange {
+  final String value;
+  const _CssWillChangeRaw(this.value) : super._();
+
+  @override
+  String toCss() => value;
+}
+
+final class _CssWillChangeGlobal extends CssWillChange {
+  final CssGlobal global;
+  const _CssWillChangeGlobal(this.global) : super._();
+
+  @override
+  String toCss() => global.toCss();
+}