seblify 0.2.1 → 0.4.0

package/README.md

@@ -36,24 +36,43 @@ 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-9%20components-yellow.svg)](https://seblify.com/components)
+[![components-draft](https://img.shields.io/badge/draft-34%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 />
 
 ### Input Components
 
-_6 items_
+_13 items_
 
 Components that let users make choices, submit data, and trigger behavior.
 
+<details>
+<summary><strong>Buttons &middot; 7</strong></summary>
+
+Command controls for triggering actions and grouping related actions.
+
+| Component | Summary | Status |
+| --- | --- | --- |
+| [Button](https://seblify.com/components/button) | A clickable command control with text and optional icons. | Draft |
+| [ButtonGroup](https://seblify.com/components/button-group) | A visual group for related Button and IconButton controls. | Draft |
+| [FloatingActionButton](https://seblify.com/components/floating-action-button) | A prominent floating button for a primary page action. | Draft |
+| [IconButton](https://seblify.com/components/icon-button) | An icon-only button for compact commands with an accessible label. | Draft |
+| [TimedButton](https://seblify.com/components/timed-button) | A button with a visible timer layer for delayed or temporary actions. | Draft |
+| [ToggleButton](https://seblify.com/components/toggle-button) | A button that switches a single option on or off. | Draft |
+| [ToggleButtonGroup](https://seblify.com/components/toggle-button-group) | A connected group of ToggleButton controls. | Draft |
+
+</details>
+<br />
+
 <details>
 <summary><strong>Input Fields &middot; 1</strong></summary>
 
@@ -74,24 +93,20 @@ Controls for selecting boolean, range, or option-based values.
 | Component | Summary | Status |
 | --- | --- | --- |
 | [Checkbox](https://seblify.com/components/checkbox) | A boolean selection control for one option in a form or settings flow. | Draft |
+| [ColorModeSwitch](https://seblify.com/components/color-mode-switch) | A segmented control for selecting system, light, or dark color mode. | Draft |
 | [SegmentControl](https://seblify.com/components/segment-control) | A compact single-selection control for switching between a small set of options. | Draft |
 | [Slider](https://seblify.com/components/slider) | A range input for choosing an approximate numeric value. | Draft |
 | [Switch](https://seblify.com/components/switch) | A two-state control for immediately turning a setting on or off. | Draft |
-| [ThemeSwitch](https://seblify.com/components/theme-switch) | A segmented control for selecting system, light, or dark color mode. | Draft |
 
 </details>
 <br />
 
 ### Display Components
 
-_10 items_
+_16 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 +135,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 +149,22 @@ Text primitives and typographic treatments for readable interfaces.
 </details>
 <br />
 
+<details>
+<summary><strong>Data Display &middot; 5</strong></summary>
+
+Components for presenting structured values, metrics, and records.
+
+| Component | Summary | Status |
+| --- | --- | --- |
+| [Date&nbsp;and&nbsp;Time](https://seblify.com/components/date-time) | Displays timestamps as localized date, time, or date-time text. | Beta |
+| [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 |
+| [TimestampCard](https://seblify.com/components/timestamp-card) | Shows one timestamp as relative time with date and time details below. | Beta |
+
+</details>
+<br />
+
 <details>
 <summary><strong>Media &middot; 1</strong></summary>
 
@@ -145,9 +177,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 +249,125 @@ 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
+
+_3 items_
+
+Reusable helpers for formatting, behavior, providers, and rendering.
+
+<details>
+<summary><strong>Format &middot; 3</strong></summary>
+
+Helpers for turning values into localized display text.
+
+| Component | Summary | Status |
+| --- | --- | --- |
+| [formatDateTime](https://seblify.com/components/format-date-time) | Formats timestamps as localized date, time, or date-time text. | Beta |
+| [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. |
+| [Theme](https://seblify.com/design-system/theme) | Seblify themes are importable CSS files with light, dark, system, and custom color modes. |
 
 <br />
 
-## Release Notes <small>&middot; 0.2.1</small>
+## Release Notes <small>&middot; 0.4.0</small>
 
-_June 3 2026_ &middot; _9 items updated_
+_July 26 2026_ &middot; _16 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)
+### [Button](https://seblify.com/components/button)
+
+- Added Button
+- Added icon slots
+
+### [ButtonGroup](https://seblify.com/components/button-group)
+
+- Added ButtonGroup
+
+### [Checkbox](https://seblify.com/components/checkbox)
+
+- Added checkbox variants
+- Added customizable size and radius
+- Added optional animations
+- Supports multiple intermediate symbols
+- Added example code snippets
+
+### [ColorModeSwitch](https://seblify.com/components/color-mode-switch)
+
+- Renamed from ThemeSwitch to ColorModeSwitch
+
+### [Date&nbsp;and&nbsp;Time](https://seblify.com/components/date-time)
+
+- Added date and time formatting
+
+### [FloatingActionButton](https://seblify.com/components/floating-action-button)
+
+- Added Floating Action Button
+
+### [formatDateTime](https://seblify.com/components/format-date-time)
+
+- Added date time formatter
+
+### [formatRelativeTime](https://seblify.com/components/format-relative-time)
 
-- 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
+- Added options for largest/smallest/min/max units
 
-### [general](https://seblify.com/components/general)
+### [IconButton](https://seblify.com/components/icon-button)
 
-- Documentation can now display code examples
+- Added icon button
 
-### [Highlight](https://seblify.com/components/highlight)
+### [Paper](https://seblify.com/components/paper)
 
-- Added code examples to docs
+- Customize tones and variants
 
-### [inheritance](https://seblify.com/components/inheritance)
+### [RelativeTime](https://seblify.com/components/relative-time)
 
-- Added tone inheritance with consuming and publishing css variables
+- Customize displayed unit count with largest/smallest/min/max units
 
-### [SegmentControl](https://seblify.com/components/segment-control)
+### [theme](https://seblify.com/components/theme)
 
-- Selected background moves smoothly between active option
+- Added different themes to docs
+- Added inverse surface behavior
+- Added on-inverse tokens for better control
+- Removed inverse from tone options
 
-### [Sidenav](https://seblify.com/components/sidenav)
+### [TimedButton](https://seblify.com/components/timed-button)
 
-- 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 Timed Button
 
-### [Spinner](https://seblify.com/components/spinner)
+### [TimestampCard](https://seblify.com/components/timestamp-card)
 
-- Added code examples to documentation
+- Added relative timestamp card
 
-### [Switch](https://seblify.com/components/switch)
+### [ToggleButton](https://seblify.com/components/toggle-button)
 
-- 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 ToggleButton
 
-### [Timeline](https://seblify.com/components/timeline)
+### [ToggleButtonGroup](https://seblify.com/components/toggle-button-group)
 
-- Added timeline component
-- Added node align options
-- Timeline can use custom markers
+- Added ToggleButtonGroup

package/dist/components/AppShell.svelte

@@ -65,7 +65,7 @@
     display: flex;
     flex-direction: column;
     min-height: 100vh;
-    background: var(--app-shell-background, var(--seblify-color-page, #f4f6f8));
+    background: var(--app-shell-background, var(--seblify-color-background, #f4f6f8));
     color: var(--app-shell-color, var(--seblify-color-text, #172033));
   }
 

package/dist/components/Banner.svelte

@@ -49,8 +49,8 @@
   }
 
   .error {
-    border-bottom-color: var(--seblify-color-error-border, #efb6b6);
-    background: var(--seblify-color-error-surface, #fff0f0);
-    color: var(--seblify-color-error-text, #5a1717);
+    border-bottom-color: var(--seblify-color-danger-border, #efb6b6);
+    background: var(--seblify-color-danger-surface, #fff0f0);
+    color: var(--seblify-color-danger-text, #5a1717);
   }
 </style>

package/dist/components/Button.svelte

@@ -28,18 +28,18 @@
 <style>
   button {
     min-height: 36px;
-    border: 1px solid var(--seblify-color-fill-accent, #146a6f);
+    border: 1px solid var(--seblify-color-primary-fill, #146a6f);
     border-radius: 6px;
     padding: 0 14px;
-    background: var(--seblify-color-fill-accent, #146a6f);
-    color: var(--seblify-color-fill-accent-text, #ffffff);
+    background: var(--seblify-color-primary-fill, #146a6f);
+    color: var(--seblify-color-primary-fill-text, #ffffff);
     font: inherit;
     font-weight: 600;
     cursor: pointer;
   }
 
   button:hover:not(:disabled) {
-    background: var(--seblify-color-fill-accent-hover, #0d4d52);
+    background: var(--seblify-color-primary-fill-hover, #0d4d52);
   }
 
   button:focus-visible {