seblify 0.2.0 → 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-0%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,7 +85,7 @@ Controls for selecting boolean, range, or option-based values.
 
 ### Display Components
 
-_8 items_
+_14 items_
 
 Components for showing content, feedback, media, and motion.
 
@@ -116,14 +117,30 @@ Progress indicators and waiting states.
 <br />
 
 <details>
-<summary><strong>Typography &middot; 2</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. | Draft |
+| [Highlight](https://seblify.com/components/highlight) | Highlights case-insensitive text matches inside a plain text string. | Beta |
+
+</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 />
@@ -140,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.
 
@@ -162,7 +191,7 @@ Small layout primitives for spacing and aligning content.
 <br />
 
 <details>
-<summary><strong>Container &middot; 3</strong></summary>
+<summary><strong>Container &middot; 2</strong></summary>
 
 Page and region containers that define app structure.
 
@@ -170,20 +199,20 @@ Page and region containers that define app structure.
 | --- | --- | --- |
 | [AppShell](https://seblify.com/components/app-shell) | A full-page application frame with sidebar, header, and content regions. | Draft |
 | [PageHeader](https://seblify.com/components/page-header) | A page-level heading block with optional breadcrumb, eyebrow, summary, and actions. | Draft |
-| [Sidebar](https://seblify.com/components/sidebar) | A responsive side container for persistent or overlay navigation. | Draft |
 
 </details>
 <br />
 
 <details>
-<summary><strong>Navigation &middot; 2</strong></summary>
+<summary><strong>Navigation &middot; 3</strong></summary>
 
 Components that help users understand location and move around.
 
 | Component | Summary | Status |
 | --- | --- | --- |
 | [Breadcrumb](https://seblify.com/components/breadcrumb) | A contextual navigation trail for showing page hierarchy. | Draft |
-| [Sidenav](https://seblify.com/components/sidenav) | A hierarchical side navigation for sections, links, and nested pages. | Draft |
+| [Sidebar](https://seblify.com/components/sidebar) | An orchestrator for main and deep sidebar navigation panels, with optional brand, search, and footer content. | Draft |
+| [Sidenav](https://seblify.com/components/sidenav) | A recursive side navigation that renders links, headers, dividers, and expandable branches from a data tree. | Draft |
 
 </details>
 <br />
@@ -200,146 +229,122 @@ Framing primitives for cards, papers, tiles, and other contained regions.
 </details>
 <br />
 
-## Design System
+<details>
+<summary><strong>Overlay &middot; 1</strong></summary>
 
-Theme, tokens, and styling guidance for Seblify.
+Floating UI that appears above nearby interface content.
 
-| 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. |
-| [Icons](https://seblify.com/design-system/icons) | Browse all generated Seblify icons, grouped automatically from the SVG source folders. |
-| [Theme](https://seblify.com/design-system/theme) | Seblify themes use CSS variables for light, dark, system, and custom color modes. |
+| 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 />
 
-## Release Notes <small>&middot; 0.2.0</small>
-
-_May 14 2026_ &middot; _28 items updated_
-
-Recent changes are summarized below. For the full release history, see the [changelog](https://seblify.com/release-notes).
-
-### [AppShell](https://seblify.com/components/app-shell)
-
-- Added AppShell component
-
-### [Badge](https://seblify.com/components/badge)
-
-- Added badge component. It takes a number or a short text
-- Added inheritable dir support. Added right-to-left example
-- Badge can now be placed on the center edge of its content
-- Badge can be colored with the tone property
-- Added appear animation when badge is populated. Added interactive example for badge with no content
-- Fixed badge placement on round objects
+### Utility
 
-### [Breadcrumb](https://seblify.com/components/breadcrumb)
+_2 items_
 
-- Added breadcrumb component with examples
+Reusable helpers for formatting, behavior, providers, and rendering.
 
-### [Checkbox](https://seblify.com/components/checkbox)
-
-- Added checkbox component. Added example with optional disable state. Added example with checkboxes in a table
-
-### [Cluster](https://seblify.com/components/cluster)
-
-- Added cluster component for wrapping lines
-
-### [component-api](https://seblify.com/components/component-api)
-
-- Reserved prop value options to streamline semantics across components
-
-### [Eyebrow](https://seblify.com/components/eyebrow)
-
-- Added eyebrow component
-
-### [general](https://seblify.com/components/general)
-
-- Setup release note collection flow
-
-### [Grid](https://seblify.com/components/grid)
-
-- Added grid component. Set column amount or item size
+<details>
+<summary><strong>Format &middot; 2</strong></summary>
 
-### [Highlight](https://seblify.com/components/highlight)
+Helpers for turning values into localized display text.
 
-- Added highlight component to highlight query matches in a text
-- Customize highlight style with tone and variant prop
-- Made a better example with a longer 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 |
 
-### [Icon](https://seblify.com/components/icon)
+</details>
+<br />
 
-- Added icon component. Takes the name of an icon to display
-- Generates icon components. Specific icons can be imported instead of entire svg collection. Better tree-shaking support
+## Design System
 
-### [icons](https://seblify.com/components/icons)
+Theme, tokens, and styling guidance for Seblify.
 
-- Added initial icons as poc
+| Guide | Summary |
+| --- | --- |
+| [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. |
 
-### [Loading&nbsp;Dots](https://seblify.com/components/loading-dots)
+<br />
 
-- Added loading dots component. Takes size prop
-- Different colors via tones prop
+## Release Notes <small>&middot; 0.3.0</small>
 
-### [PageHeader](https://seblify.com/components/page-header)
+_July 4 2026_ &middot; _12 items updated_
 
-- Added page-header component. Uses eyebrow and breadcrumb
+Recent changes are summarized below. For the full release history, see the [changelog](https://seblify.com/release-notes).
 
-### [Paper](https://seblify.com/components/paper)
+### [Accordion](https://seblify.com/components/accordion)
 
-- Added Paper basic surface component
+- Created accordion component
+- Added expand/collapse animation for content
+- Created accordion-group component
 
-### [Pin&nbsp;Input](https://seblify.com/components/pin-input)
+### [Checkbox](https://seblify.com/components/checkbox)
 
-- Added pin-input component. It has optional length and can be disabled
+- 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
 
-### [Row](https://seblify.com/components/row)
+### [Collapse](https://seblify.com/components/collapse)
 
-- Added row component as non-wrapping horizontal container
+- Created collapse controlled wrapper component
+- Added duration prop
+- Added closed min-height prop
 
-### [SegmentControl](https://seblify.com/components/segment-control)
+### [component-api](https://seblify.com/components/component-api)
 
-- Added segment-control component
+- Added tone prop Strong
+- Documented shared animation options
 
-### [Sidebar](https://seblify.com/components/sidebar)
+### [Duration](https://seblify.com/components/duration)
 
-- Added sidebar component - a left-side container. Uses sidenav component
+- Added Duration formatter component
+- Added code snippets to docs examples
 
-### [Sidenav](https://seblify.com/components/sidenav)
+### [formatDuration](https://seblify.com/components/format-duration)
 
-- Added sidenav component. Takes tree data to build collapsible nav items
+- Added duration formatter
+- Added code snippets for all docs examples
 
-### [Slider](https://seblify.com/components/slider)
+### [formatRelativeTime](https://seblify.com/components/format-relative-time)
 
-- Added slider component. It can take stepsize
-- Added example with optional disabled slider
+- Added function to format relative time
+- Added support for ranged custom labels
 
-### [Spinner](https://seblify.com/components/spinner)
+### [general](https://seblify.com/components/general)
 
-- Added spinner component with customizable size
-- Accepts tone prop
+- Added automated tests with generated test results displayed in docs
 
-### [Stack](https://seblify.com/components/stack)
+### [RelativeTime](https://seblify.com/components/relative-time)
 
-- Added stack component as vertical container with gap prop
+- Added relative-time component
+- Added docs code snippets to all examples
 
 ### [Switch](https://seblify.com/components/switch)
 
-- Added switch component
-
-### [Tag](https://seblify.com/components/tag)
-
-- Added tag component with custom radius
-- Tag takes variant, tone, and border props
-- Nested icons, spinner, or loading dots inherit size and tone
-
-### [TagGroup](https://seblify.com/components/tag-group)
-
-- Added tag-group component. Used in all tag examples
+- Added outline variant
+- Added animation duration prop
+- Added switch orientation prop
+- Added focus tone prop
+- Added automated component tests
 
 ### [theme](https://seblify.com/components/theme)
 
-- Setup initial theme structure
-- Added doc example for scoped theme customization
+- Added secondary color option
 
-### [ThemeSwitch](https://seblify.com/components/theme-switch)
+### [Tooltip](https://seblify.com/components/tooltip)
 
-- Added theme-switch component. It uses the segment-control
+- Added tooltip component
+- Supports tones prop
+- Controlled visibility and emits events
+- Customizable distance to anchor element
+- Added animation options