seblify 0.3.0 → 0.4.0

package/README.md

@@ -36,8 +36,8 @@ 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-6%20components-yellow.svg)](https://seblify.com/components)
-[![components-draft](https://img.shields.io/badge/draft-27%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
 
@@ -51,10 +51,28 @@ Explore the supported components in this library. Components are grouped by purp
 
 ### 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>
 
@@ -75,17 +93,17 @@ 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
 
-_14 items_
+_16 items_
 
 Components for showing content, feedback, media, and motion.
 
@@ -132,15 +150,17 @@ Text primitives and typographic treatments for readable interfaces.
 <br />
 
 <details>
-<summary><strong>Data Display &middot; 3</strong></summary>
+<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 />
@@ -243,17 +263,18 @@ Floating UI that appears above nearby interface content.
 
 ### Utility
 
-_2 items_
+_3 items_
 
 Reusable helpers for formatting, behavior, providers, and rendering.
 
 <details>
-<summary><strong>Format &middot; 2</strong></summary>
+<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 |
 
@@ -269,82 +290,84 @@ Theme, tokens, and styling guidance for Seblify.
 | [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.3.0</small>
+## Release Notes <small>&middot; 0.4.0</small>
 
-_July 4 2026_ &middot; _12 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).
 
-### [Accordion](https://seblify.com/components/accordion)
+### [Button](https://seblify.com/components/button)
+
+- Added Button
+- Added icon slots
 
-- Created accordion component
-- Added expand/collapse animation for content
-- Created accordion-group component
+### [ButtonGroup](https://seblify.com/components/button-group)
+
+- Added ButtonGroup
 
 ### [Checkbox](https://seblify.com/components/checkbox)
 
-- 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
+- Added checkbox variants
+- Added customizable size and radius
+- Added optional animations
+- Supports multiple intermediate symbols
+- Added example code snippets
 
-### [Collapse](https://seblify.com/components/collapse)
+### [ColorModeSwitch](https://seblify.com/components/color-mode-switch)
 
-- Created collapse controlled wrapper component
-- Added duration prop
-- Added closed min-height prop
+- Renamed from ThemeSwitch to ColorModeSwitch
 
-### [component-api](https://seblify.com/components/component-api)
+### [Date&nbsp;and&nbsp;Time](https://seblify.com/components/date-time)
 
-- Added tone prop Strong
-- Documented shared animation options
+- Added date and time formatting
 
-### [Duration](https://seblify.com/components/duration)
+### [FloatingActionButton](https://seblify.com/components/floating-action-button)
 
-- Added Duration formatter component
-- Added code snippets to docs examples
+- Added Floating Action Button
 
-### [formatDuration](https://seblify.com/components/format-duration)
+### [formatDateTime](https://seblify.com/components/format-date-time)
 
-- Added duration formatter
-- Added code snippets for all docs examples
+- Added date time formatter
 
 ### [formatRelativeTime](https://seblify.com/components/format-relative-time)
 
-- Added function to format relative time
-- Added support for ranged custom labels
+- Added options for largest/smallest/min/max units
 
-### [general](https://seblify.com/components/general)
+### [IconButton](https://seblify.com/components/icon-button)
 
-- Added automated tests with generated test results displayed in docs
+- Added icon button
 
-### [RelativeTime](https://seblify.com/components/relative-time)
+### [Paper](https://seblify.com/components/paper)
 
-- Added relative-time component
-- Added docs code snippets to all examples
+- Customize tones and variants
 
-### [Switch](https://seblify.com/components/switch)
+### [RelativeTime](https://seblify.com/components/relative-time)
 
-- Added outline variant
-- Added animation duration prop
-- Added switch orientation prop
-- Added focus tone prop
-- Added automated component tests
+- Customize displayed unit count with largest/smallest/min/max units
 
 ### [theme](https://seblify.com/components/theme)
 
-- Added secondary color option
+- Added different themes to docs
+- Added inverse surface behavior
+- Added on-inverse tokens for better control
+- Removed inverse from tone options
+
+### [TimedButton](https://seblify.com/components/timed-button)
+
+- Added Timed Button
+
+### [TimestampCard](https://seblify.com/components/timestamp-card)
+
+- Added relative timestamp card
+
+### [ToggleButton](https://seblify.com/components/toggle-button)
+
+- Added ToggleButton
 
-### [Tooltip](https://seblify.com/components/tooltip)
+### [ToggleButtonGroup](https://seblify.com/components/toggle-button-group)
 
-- Added tooltip component
-- Supports tones prop
-- Controlled visibility and emits events
-- Customizable distance to anchor element
-- Added animation options
+- 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 {