Selur Changelog

All notable changes to Selur will be documented in this file. Selur follows Semantic Versioning (SemVer) principles.

Current Status: Pre-release Development
Target Release: v1.0.0-stable (2026)

[unreleased]

Added

• Core CSS Engine: Comprehensive variable system and mathematical operations for visual objects

  • Dynamic state handling with automatic CSS variable updates based on element states (:focus, :hover, :active, etc.)
  • Adaptive variables that respond to screen breakpoints (xs, sm, md, lg, xl) and element conditions
  • Computed variables with hierarchical lookup system (e.g., margin-top → d-margin-top → hard-coded fallback)
  • Mathematical operations using CSS variables for calculations (pi, contrast calculations, animation delays, apothem calculation or approximation based on browser support)

• Visual Objects Architecture: Modular component system with dynamic compilation

  • HTML Objects:
    • Button: Enhanced button styling with accessibility features and interaction states.
    • Card: Simple card visual vertical and horizontal layouts with solid and overlay caption variants.
    • Field: Improved user inputs elements.
    • Fold: Slightly improved detail element.
    • Form: tooltip, error and form elements orchestrator. Handling validation state, visibility and placement.
    • Gauge: Dynamic animated gauge with optional overlay caption.
    • Heading: Contextual emphasis of headings elements based on semantic meaning and relationship.
    • Link: Automatic link styling with states based indicators, colors and decorations.
  • Custom Objects:
    • Toggle: Complete toggle system supporting multiple variants (hamburger, bento, switch, etc.)
  • Effect Objects:
    • Animate: Visual object state based variant (fade, flip, pop, zip and zoom).
    • Appearance: Visual object legacy and flat variants.
    • Collage: Visual object group variant.
    • Menu: Visual object dropdown and navbar variants.
    • Slideshow: Visual object tab, carousel variants and init slider variant.

• Responsive Design System: Screen breakpoint management and adaptive behaviors

  • Breakpoint-based variable adaptation (xs, sm, md, lg, xl).
  • Responsive state management with automatic CSS variable updates.
  • Mobile-first approach with progressive enhancement.

• Build System: Sophisticated compilation pipeline with PostCSS integration

  • Support for multiple output formats (Longhand, ARIA, Shorthand CSS).
  • Modular build scripts supporting different output variants and optimizations.
  • Dynamic component discovery and compilation based on available source files.
  • CSS rule atomification for optimized output.
  • Development and production build modes with asset generation.
  • KSS documentation generation and example building.

• Developer Experience: Complete toolchain and documentation

  • Comprehensive build scripts for different development workflows.
  • GitLab CI/CD pipeline for automated version management and NPM publishing.
  • Package configuration with scoped NPM distribution setup.
  • Complete framework documentation with usage examples and browser compatibility notes.
  • Interactive examples and design system samples.

• Extra Features:

  • CSS containment and scope isolation techniques.
  • Pure CSS Interactivity on modern browsers with :has() pseudo-class support updates state based on the children ones.

Release Note: Selur is currently in active development. All features listed above are being implemented for the first stable release (v1.0.0-stable). The current features are available on NPM as selur@staging.

We follow the Semantic Versioning 2.0.0 guidelines.

For previous release notes, see the GitLab Releases.