v1.2.0 - SVG-Based Border Rendering

What's New in v1.2.0

SVG-Based Border Rendering (Feature 006)

Complete rewrite of the border system using layered SVG paths, eliminating anti-aliasing artifacts on dark backgrounds.

Added

• SVG-based borders - Clean borders with no anti-aliasing fringe (SC-001)
• New border styles - Support for solid, dashed, and dotted borders
• Custom dash patterns - Configure via border.dashArray
• Gradient borders - Linear gradients with configurable color stops
• Border data attributes - Declarative HTML configuration
• Border validation - Width clamped to 1-8px, invalid colors fall back to transparent
• Background capture - Preserves background-image and box-shadow

Changed

• New nested border config API (backward compatible with borderWidth/borderColor)
• Bundle size: ~5.8 KB gzipped (under 6KB target per SC-004)
• CSS framework compatibility with !important for Tailwind

Technical Details

• Dotted borders use inset path rendering (no clip-path artifacts)
• ResizeObserver updates within 16ms frame timing
• 412 unit tests + 66 integration tests passing
• Chrome 90+, Firefox 90+, Safari 14+, Edge 90+

Installation

npm install @cornerkit/core

Usage

import CornerKit from '@cornerkit/core'

const ck = new CornerKit()
ck.apply(element, {
  radius: 24,
  smoothing: 0.8,
  border: {
    width: 2,
    color: '#3b82f6',
    style: 'solid' // or 'dashed', 'dotted'
  }
})

Full Changelog: v1.1.0...v1.2.0

@cornerkit/vue@1.0.0

What's New

Official Vue 3 integration for CornerKit.

Features

• <Squircle> component with slot-based API
• useSquircle() composable for Composition API
• v-squircle directive for inline usage
• Polymorphic rendering via tag prop
• Full TypeScript support with exported types
• Border configuration via border prop

Compatibility

• Vue 3.0+
• Nuxt 3 SSR compatible
• Composition API and Options API

Package Info

Metric	Value
Bundle Size	~2.1 KB gzipped
Peer Dependencies	vue, @cornerkit/core
Tests	102 passing

Full Changelog: https://github.com/bejarcode/cornerKit/blob/main/packages/vue/CHANGELOG.md

@cornerkit/svelte@1.0.0

What's New

Official Svelte integration for CornerKit.

Features

• <Squircle> component with slot-based API
• squircle action for use:squircle directive
• Shorthand syntax support (number for radius only)
• Full TypeScript support with exported types
• Border configuration via border prop

Compatibility

• Svelte 3, 4, and 5
• SvelteKit SSR compatible
• No hydration mismatch issues

Package Info

Metric	Value
Bundle Size	~2.1 KB gzipped
Peer Dependencies	svelte, @cornerkit/core
Tests	75 passing

Full Changelog: https://github.com/bejarcode/cornerKit/blob/main/packages/svelte/CHANGELOG.md

@cornerkit/react@1.0.0

What's New

Official React integration for CornerKit.

Features

• <Squircle> component with polymorphic as prop
• useSquircle() hook for ref-based control
• Full TypeScript support with exported types
• Border configuration via border prop
• Automatic cleanup on unmount

Compatibility

• React 16.8+ (hooks support)
• React 17, 18, and 19
• Next.js SSR compatible

Package Info

Metric	Value
Bundle Size	~1.5 KB gzipped
Peer Dependencies	react, @cornerkit/core
Tests	49 passing

Full Changelog: https://github.com/bejarcode/cornerKit/blob/main/packages/react/CHANGELOG.md

@cornerkit/core@1.1.0

What's New

Border Support

Added squircle border rendering using a dual pseudo-element technique.

Added

• borderWidth and borderColor configuration options
• data-squircle-border-width and data-squircle-border-color attributes
• Border support for compatible elements (div, button, span, etc.)

Documentation

• Border usage examples and compatibility guide
• Manual wrapper pattern for form elements

Full Changelog: https://github.com/bejarcode/cornerKit/compare/@cornerkit/core@1.0.2...@cornerkit/core@1.1.0

@cornerkit/core@1.0.2

What's Changed

Bug Fixes

• Fixed Safari clip-path detection for improved browser compatibility

Added

• Interactive demo website with live playground
• Side-by-side comparison tool (squircle vs border-radius)
• Real-time code generation
• 36+ UI component examples

Demo: https://bejarcode.github.io/cornerKit/

Full Changelog: https://github.com/bejarcode/cornerKit/compare/@cornerkit/core@1.0.0...@cornerkit/core@1.0.2

@cornerkit/core@1.0.0

What's New

Initial release of CornerKit - a lightweight library for iOS-style squircle corners on the web.

Highlights

• SVG clip-path rendering with automatic browser detection
• Configurable radius (px) and smoothing (0-1) parameters
• Data attribute API for declarative HTML usage
• Programmatic JavaScript API with full control
• ResizeObserver integration for responsive updates
• TypeScript definitions included

Package Info

Metric	Value
Bundle Size	4.58 KB gzipped
Dependencies	Zero
Browser Support	98%+
Test Coverage	97.9%

Full Changelog: https://github.com/bejarcode/cornerKit/blob/main/packages/core/CHANGELOG.md