seblify 0.2.1 → 0.3.0

package/README.md

@@ -36,14 +36,15 @@ import 'seblify/theme.css';
 Explore the supported components in this library. Components are grouped by purpose and linked to their full documentation, including usage examples, props, accessibility notes, and design-system guidance.
 
 [![components-stable](https://img.shields.io/badge/stable-0%20components-brightgreen.svg)](https://seblify.com/components)
-[![components-beta](https://img.shields.io/badge/beta-2%20components-yellow.svg)](https://seblify.com/components)
-[![components-draft](https://img.shields.io/badge/draft-24%20components-lightgrey.svg)](https://seblify.com/components)
+[![components-beta](https://img.shields.io/badge/beta-6%20components-yellow.svg)](https://seblify.com/components)
+[![components-draft](https://img.shields.io/badge/draft-27%20components-lightgrey.svg)](https://seblify.com/components)
 
 ### Quick links
 
 - [Input Components](https://seblify.com/sections/action)
 - [Display Components](https://seblify.com/sections/display)
 - [Framework Components](https://seblify.com/sections/framework)
+- [Utility](https://seblify.com/sections/utility)
 - [Design System](https://seblify.com/design-system)
 
 <br />
@@ -84,14 +85,10 @@ Controls for selecting boolean, range, or option-based values.
 
 ### Display Components
 
-_10 items_
+_14 items_
 
 Components for showing content, feedback, media, and motion.
 
-| Component | Summary | Status |
-| --- | --- | --- |
-| [Timeline](https://seblify.com/components/timeline) | Arranges connected timeline items vertically or horizontally with flexible content, labels, and markers. | Beta |
-
 <details>
 <summary><strong>Annotation &middot; 3</strong></summary>
 
@@ -120,12 +117,13 @@ Progress indicators and waiting states.
 <br />
 
 <details>
-<summary><strong>Typography &middot; 3</strong></summary>
+<summary><strong>Typography &middot; 4</strong></summary>
 
 Text primitives and typographic treatments for readable interfaces.
 
 | Component | Summary | Status |
 | --- | --- | --- |
+| [Accordion](https://seblify.com/components/accordion) | A collapsible text section for optional details, explanations, and supporting content. | Draft |
 | [CodeSnippet](https://seblify.com/components/code-snippet) | Displays formatted code snippets with Svelte-focused highlighting and optional line numbers. | Draft |
 | [Eyebrow](https://seblify.com/components/eyebrow) | A short contextual label that sits above a heading or dense content block. | Draft |
 | [Highlight](https://seblify.com/components/highlight) | Highlights case-insensitive text matches inside a plain text string. | Beta |
@@ -133,6 +131,20 @@ Text primitives and typographic treatments for readable interfaces.
 </details>
 <br />
 
+<details>
+<summary><strong>Data Display &middot; 3</strong></summary>
+
+Components for presenting structured values, metrics, and records.
+
+| Component | Summary | Status |
+| --- | --- | --- |
+| [Duration](https://seblify.com/components/duration) | Displays millisecond durations as localized unit text or clock-style text. | Beta |
+| [RelativeTime](https://seblify.com/components/relative-time) | Formats dates as relative time, with reusable unit steps and automatic updates. | Beta |
+| [Timeline](https://seblify.com/components/timeline) | Arranges connected timeline items vertically or horizontally with flexible content, labels, and markers. | Beta |
+
+</details>
+<br />
+
 <details>
 <summary><strong>Media &middot; 1</strong></summary>
 
@@ -145,9 +157,21 @@ Icons, images, video, and other visual media components.
 </details>
 <br />
 
+<details>
+<summary><strong>Motion &middot; 1</strong></summary>
+
+Controlled animation helpers for revealing, hiding, and moving UI.
+
+| Component | Summary | Status |
+| --- | --- | --- |
+| [Collapse](https://seblify.com/components/collapse) | A controlled wrapper that animates content between its full height and a collapsed height. | Draft |
+
+</details>
+<br />
+
 ### Framework Components
 
-_10 items_
+_11 items_
 
 Layout, navigation, overlays, and surface primitives.
 
@@ -205,73 +229,122 @@ Framing primitives for cards, papers, tiles, and other contained regions.
 </details>
 <br />
 
+<details>
+<summary><strong>Overlay &middot; 1</strong></summary>
+
+Floating UI that appears above nearby interface content.
+
+| Component | Summary | Status |
+| --- | --- | --- |
+| [Tooltip](https://seblify.com/components/tooltip) | A small hover and focus hint that appears beside wrapped content with an arrow pointing back to it. | Draft |
+
+</details>
+<br />
+
+### Utility
+
+_2 items_
+
+Reusable helpers for formatting, behavior, providers, and rendering.
+
+<details>
+<summary><strong>Format &middot; 2</strong></summary>
+
+Helpers for turning values into localized display text.
+
+| Component | Summary | Status |
+| --- | --- | --- |
+| [formatDuration](https://seblify.com/components/format-duration) | Formats millisecond durations as localized unit text or clock-style text. | Beta |
+| [formatRelativeTime](https://seblify.com/components/format-relative-time) | Formats dates as localized relative time text from a reusable utility function. | Beta |
+
+</details>
+<br />
+
 ## Design System
 
 Theme, tokens, and styling guidance for Seblify.
 
 | Guide | Summary |
 | --- | --- |
-| [Component&nbsp;API](https://seblify.com/design-system/component-api) | Shared prop naming rules for variants, tones, size, slots, radius, placement, and contextual inheritance. |
+| [Component&nbsp;API](https://seblify.com/design-system/component-api) | Shared prop naming rules for variants, tones, size, slots, radius, animation, placement, and contextual inheritance. |
 | [Icons](https://seblify.com/design-system/icons) | Browse all generated Seblify icons, grouped automatically from the SVG source folders. |
 | [Inheritance](https://seblify.com/design-system/inheritance) | Ambient CSS variables let components inherit tone and size from their context without hard-coded parent-child edge cases. |
 | [Theme](https://seblify.com/design-system/theme) | Seblify themes use CSS variables for light, dark, system, and custom color modes. |
 
 <br />
 
-## Release Notes <small>&middot; 0.2.1</small>
+## Release Notes <small>&middot; 0.3.0</small>
 
-_June 3 2026_ &middot; _9 items updated_
+_July 4 2026_ &middot; _12 items updated_
 
 Recent changes are summarized below. For the full release history, see the [changelog](https://seblify.com/release-notes).
 
-### [CodeSnippet](https://seblify.com/components/code-snippet)
+### [Accordion](https://seblify.com/components/accordion)
 
-- Added code snippet component for readonly code formatting
-- Long lines can now optionally wrap
-- Changed tokenizer to track word context for smarter token detection
-- CodeSnippet no longer enters infinite loop on trailing plain text
+- Created accordion component
+- Added expand/collapse animation for content
+- Created accordion-group component
 
-### [general](https://seblify.com/components/general)
+### [Checkbox](https://seblify.com/components/checkbox)
 
-- Documentation can now display code examples
+- Supports tone prop
+- Supports intermediate state
+- Can be indirectly selected
+- Created helper for checkbox relationship management
+- Added automated test coverage
+- Relations helper now supports indirect intermediate states
 
-### [Highlight](https://seblify.com/components/highlight)
+### [Collapse](https://seblify.com/components/collapse)
 
-- Added code examples to docs
+- Created collapse controlled wrapper component
+- Added duration prop
+- Added closed min-height prop
 
-### [inheritance](https://seblify.com/components/inheritance)
+### [component-api](https://seblify.com/components/component-api)
 
-- Added tone inheritance with consuming and publishing css variables
+- Added tone prop Strong
+- Documented shared animation options
 
-### [SegmentControl](https://seblify.com/components/segment-control)
+### [Duration](https://seblify.com/components/duration)
 
-- Selected background moves smoothly between active option
+- Added Duration formatter component
+- Added code snippets to docs examples
 
-### [Sidenav](https://seblify.com/components/sidenav)
+### [formatDuration](https://seblify.com/components/format-duration)
 
-- Item can execute a method with a payload
-- Item can take custom trailing content
-- Item groups can be forced expanded
-- Selecting an already selected link item with expanded children will collapse its children
-- Sidenav no longer auto-collapses sections
+- Added duration formatter
+- Added code snippets for all docs examples
 
-### [Spinner](https://seblify.com/components/spinner)
+### [formatRelativeTime](https://seblify.com/components/format-relative-time)
+
+- Added function to format relative time
+- Added support for ranged custom labels
+
+### [general](https://seblify.com/components/general)
 
-- Added code examples to documentation
+- Added automated tests with generated test results displayed in docs
+
+### [RelativeTime](https://seblify.com/components/relative-time)
+
+- Added relative-time component
+- Added docs code snippets to all examples
 
 ### [Switch](https://seblify.com/components/switch)
 
-- Added tone and variant options
-- Radius prop
-- Added size prop
-- Added shapes Pill, Flat, Long, Floating, Line
-- Added optional grip icon to shapes Pill, Floating and Line
-- Added optional track I/O icons
-- Added animation options
-- Focus ring color matches selected tone
+- Added outline variant
+- Added animation duration prop
+- Added switch orientation prop
+- Added focus tone prop
+- Added automated component tests
 
-### [Timeline](https://seblify.com/components/timeline)
+### [theme](https://seblify.com/components/theme)
 
-- Added timeline component
-- Added node align options
-- Timeline can use custom markers
+- Added secondary color option
+
+### [Tooltip](https://seblify.com/components/tooltip)
+
+- Added tooltip component
+- Supports tones prop
+- Controlled visibility and emits events
+- Customizable distance to anchor element
+- Added animation options