seblify 0.1.8 → 0.2.1

package/README.md

@@ -1,8 +1,7 @@
+[![docs](https://img.shields.io/badge/docs-seblify.com-black.svg)](https://seblify.com)
 [![license](https://img.shields.io/npm/l/seblify.svg)](https://www.npmjs.com/package/seblify)
 [![npm downloads](https://img.shields.io/npm/dm/seblify.svg)](https://www.npmjs.com/package/seblify)
 
-[![docs](https://img.shields.io/badge/docs-seblify.com-black.svg)](https://seblify.com)
-
 # Seblify
 
 [comment]: <> (==== ========================= ====)
@@ -13,6 +12,12 @@
 
 Svelte UI component library for building themed interfaces.
 
+### Feedback
+
+Seblify is a work in progress, and I am very open to feedback. If you find a bug, hit a rough edge, or have an idea for a component, API, example, or design-system improvement, please let me know.
+
+Ideas and bug reports are genuinely welcome: [support.seblify@gmail.com](mailto:support.seblify@gmail.com)
+
 ## Installation
 
 ```bash
@@ -28,12 +33,12 @@ import 'seblify/theme.css';
 
 ## Components
 
+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-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)
 
-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.
-
 ### Quick links
 
 - [Input Components](https://seblify.com/sections/action)
@@ -41,177 +46,164 @@ Explore the supported components in this library. Components are grouped by purp
 - [Framework Components](https://seblify.com/sections/framework)
 - [Design System](https://seblify.com/design-system)
 
----
+<br />
 
-## Input Components <small>&middot; 6 items</small>
+### Input Components
+
+_6 items_
 
 Components that let users make choices, submit data, and trigger behavior.
 
 <details>
-<summary><strong>Input Fields</strong></summary>
+<summary><strong>Input Fields &middot; 1</strong></summary>
 
 Text-like controls for entering structured user input.
 
 | Component | Summary | Status |
 | --- | --- | --- |
-| [Pin&nbsp;Input](https://seblify.com/components/pin-input) | A segmented numeric input for short verification codes. | &#x26AA;&nbsp;Draft |
-
+| [Pin&nbsp;Input](https://seblify.com/components/pin-input) | A segmented numeric input for short verification codes. | Draft |
 
----
 </details>
-
 <br />
 
 <details>
-<summary><strong>Selectable</strong></summary>
+<summary><strong>Selectable &middot; 5</strong></summary>
 
 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. | &#x26AA;&nbsp;Draft |
-| [SegmentControl](https://seblify.com/components/segment-control) | A compact single-selection control for switching between a small set of options. | &#x26AA;&nbsp;Draft |
-| [Slider](https://seblify.com/components/slider) | A range input for choosing an approximate numeric value. | &#x26AA;&nbsp;Draft |
-| [Switch](https://seblify.com/components/switch) | A two-state control for immediately turning a setting on or off. | &#x26AA;&nbsp;Draft |
-| [ThemeSwitch](https://seblify.com/components/theme-switch) | A segmented control for selecting system, light, or dark color mode. | &#x26AA;&nbsp;Draft |
+| [Checkbox](https://seblify.com/components/checkbox) | A boolean selection control for one option in a form or settings flow. | 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 <small>&middot; 8 items</small>
+### Display Components
+
+_10 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</strong></summary>
+<summary><strong>Annotation &middot; 3</strong></summary>
 
 Small attached indicators, labels, and supporting markers.
 
 | Component | Summary | Status |
 | --- | --- | --- |
-| [Badge](https://seblify.com/components/badge) | A small attached indicator for counts, labels, and presence states around another item. | &#x26AA;&nbsp;Draft |
-| [Tag](https://seblify.com/components/tag) | A compact text marker for statuses, categories, and item labels. | &#x26AA;&nbsp;Draft |
-| [TagGroup](https://seblify.com/components/tag-group) | A wrapping inline group for tags with the standard tag spacing. | &#x26AA;&nbsp;Draft |
-
+| [Badge](https://seblify.com/components/badge) | A small attached indicator for counts, labels, and presence states around another item. | Draft |
+| [Tag](https://seblify.com/components/tag) | A compact text marker for statuses, categories, and item labels. | Draft |
+| [TagGroup](https://seblify.com/components/tag-group) | A wrapping inline group for tags with the standard tag spacing. | Draft |
 
----
 </details>
-
 <br />
 
 <details>
-<summary><strong>Loading</strong></summary>
+<summary><strong>Loading &middot; 2</strong></summary>
 
 Progress indicators and waiting states.
 
 | Component | Summary | Status |
 | --- | --- | --- |
-| [Loading&nbsp;Dots](https://seblify.com/components/loading-dots) | A compact animated loading indicator for inline waiting states. | &#x26AA;&nbsp;Draft |
-| [Spinner](https://seblify.com/components/spinner) | A circular loading indicator for indeterminate progress. | &#x26AA;&nbsp;Draft |
-
+| [Loading&nbsp;Dots](https://seblify.com/components/loading-dots) | A compact animated loading indicator for inline waiting states. | Draft |
+| [Spinner](https://seblify.com/components/spinner) | A circular loading indicator for indeterminate progress. | Draft |
 
----
 </details>
-
 <br />
 
 <details>
-<summary><strong>Typography</strong></summary>
+<summary><strong>Typography &middot; 3</strong></summary>
 
 Text primitives and typographic treatments for readable interfaces.
 
 | Component | Summary | Status |
 | --- | --- | --- |
-| [Eyebrow](https://seblify.com/components/eyebrow) | A short contextual label that sits above a heading or dense content block. | &#x26AA;&nbsp;Draft |
-| [Highlight](https://seblify.com/components/highlight) | Highlights case-insensitive text matches inside a plain text string. | &#x26AA;&nbsp;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 |
 
----
 </details>
-
 <br />
 
 <details>
-<summary><strong>Media</strong></summary>
+<summary><strong>Media &middot; 1</strong></summary>
 
 Icons, images, video, and other visual media components.
 
 | Component | Summary | Status |
 | --- | --- | --- |
-| [Icon](https://seblify.com/components/icon) | A convenient registry-based icon component for Seblify SVG icons. | &#x26AA;&nbsp;Draft |
-
+| [Icon](https://seblify.com/components/icon) | A convenient registry-based icon component for Seblify SVG icons. | Draft |
 
----
 </details>
+<br />
 
-## Framework Components <small>&middot; 10 items</small>
+### Framework Components
+
+_10 items_
 
 Layout, navigation, overlays, and surface primitives.
 
 <details>
-<summary><strong>Align</strong></summary>
+<summary><strong>Align &middot; 4</strong></summary>
 
 Small layout primitives for spacing and aligning content.
 
 | Component | Summary | Status |
 | --- | --- | --- |
-| [Cluster](https://seblify.com/components/cluster) | A wrapping horizontal layout primitive that spaces items with a configurable gap. | &#x26AA;&nbsp;Draft |
-| [Grid](https://seblify.com/components/grid) | A responsive grid layout primitive with automatic columns or an explicit column count. | &#x26AA;&nbsp;Draft |
-| [Row](https://seblify.com/components/row) | A horizontal layout primitive that spaces items with a configurable gap. | &#x26AA;&nbsp;Draft |
-| [Stack](https://seblify.com/components/stack) | A vertical layout primitive that spaces items with a configurable gap. | &#x26AA;&nbsp;Draft |
-
+| [Cluster](https://seblify.com/components/cluster) | A wrapping horizontal layout primitive that spaces items with a configurable gap. | Draft |
+| [Grid](https://seblify.com/components/grid) | A responsive grid layout primitive with automatic columns or an explicit column count. | Draft |
+| [Row](https://seblify.com/components/row) | A horizontal layout primitive that spaces items with a configurable gap. | Draft |
+| [Stack](https://seblify.com/components/stack) | A vertical layout primitive that spaces items with a configurable gap. | Draft |
 
----
 </details>
-
 <br />
 
 <details>
-<summary><strong>Container</strong></summary>
+<summary><strong>Container &middot; 2</strong></summary>
 
 Page and region containers that define app structure.
 
 | Component | Summary | Status |
 | --- | --- | --- |
-| [AppShell](https://seblify.com/components/app-shell) | A full-page application frame with sidebar, header, and content regions. | &#x26AA;&nbsp;Draft |
-| [PageHeader](https://seblify.com/components/page-header) | A page-level heading block with optional breadcrumb, eyebrow, summary, and actions. | &#x26AA;&nbsp;Draft |
-| [Sidebar](https://seblify.com/components/sidebar) | A responsive side container for persistent or overlay navigation. | &#x26AA;&nbsp;Draft |
-
+| [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 |
 
----
 </details>
-
 <br />
 
 <details>
-<summary><strong>Navigation</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. | &#x26AA;&nbsp;Draft |
-| [Sidenav](https://seblify.com/components/sidenav) | A hierarchical side navigation for sections, links, and nested pages. | &#x26AA;&nbsp;Draft |
-
+| [Breadcrumb](https://seblify.com/components/breadcrumb) | A contextual navigation trail for showing page hierarchy. | 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 />
 
 <details>
-<summary><strong>Surface</strong></summary>
+<summary><strong>Surface &middot; 1</strong></summary>
 
 Framing primitives for cards, papers, tiles, and other contained regions.
 
 | Component | Summary | Status |
 | --- | --- | --- |
-| [Paper](https://seblify.com/components/paper) | A themed container for grouping content with configurable variant, tone, padding, border, and elevation. | &#x26AA;&nbsp;Draft |
+| [Paper](https://seblify.com/components/paper) | A themed container for grouping content with configurable variant, tone, padding, border, and elevation. | Draft |
 
-
----
 </details>
+<br />
 
 ## Design System
 
@@ -221,14 +213,65 @@ 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, 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. |
 
-## Release Notes <small>&middot; 0.1.8</small>
+<br />
+
+## Release Notes <small>&middot; 0.2.1</small>
 
-_May 14 2026_ &middot; _1 item updated_
+_June 3 2026_ &middot; _9 items updated_
 
 Recent changes are summarized below. For the full release history, see the [changelog](https://seblify.com/release-notes).
 
-### [other](https://seblify.com/components/other)
+### [CodeSnippet](https://seblify.com/components/code-snippet)
+
+- 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
+
+### [general](https://seblify.com/components/general)
+
+- Documentation can now display code examples
+
+### [Highlight](https://seblify.com/components/highlight)
+
+- Added code examples to docs
+
+### [inheritance](https://seblify.com/components/inheritance)
+
+- Added tone inheritance with consuming and publishing css variables
+
+### [SegmentControl](https://seblify.com/components/segment-control)
+
+- Selected background moves smoothly between active option
+
+### [Sidenav](https://seblify.com/components/sidenav)
+
+- 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
+
+### [Spinner](https://seblify.com/components/spinner)
+
+- Added code examples to documentation
+
+### [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
+
+### [Timeline](https://seblify.com/components/timeline)
 
-- Temporary task note for release note workflow
+- Added timeline component
+- Added node align options
+- Timeline can use custom markers

package/dist/components/action/input/select/segment-control/SegmentControl.svelte

@@ -1,10 +1,13 @@
 <script lang="ts">
   import type { SeblifyProps } from 'seblify';
+  import type { Component } from 'svelte';
 
   export interface SegmentControlOption {
     value: string;
-    label: string;
+    label?: string;
+    ariaLabel?: string;
     disabled?: boolean;
+    icon?: Component<{ size?: string }>;
   }
 
   type Props = SeblifyProps<{
@@ -24,6 +27,75 @@
     name = 'segment-control',
     disabled = false,
   }: Props = $props();
+
+  let optionsElement = $state<HTMLDivElement>();
+  let indicatorLeft = $state(0);
+  let indicatorWidth = $state(0);
+  let indicatorVisible = $state(false);
+  const optionElements: Array<HTMLLabelElement | undefined> = [];
+
+  function measureIndicator() {
+    if (!optionsElement) {
+      indicatorVisible = false;
+      return;
+    }
+
+    const selectedIndex = options.findIndex((option) => option.value === value);
+    const selectedElement =
+      selectedIndex >= 0 ? optionElements[selectedIndex] : undefined;
+
+    if (!selectedElement) {
+      indicatorVisible = false;
+      return;
+    }
+
+    const parentRect = optionsElement.getBoundingClientRect();
+    const selectedRect = selectedElement.getBoundingClientRect();
+
+    indicatorLeft = selectedRect.left - parentRect.left - optionsElement.clientLeft;
+    indicatorWidth = selectedRect.width;
+    indicatorVisible = true;
+  }
+
+  function registerOption(node: HTMLLabelElement, index: number) {
+    optionElements[index] = node;
+    queueMicrotask(measureIndicator);
+
+    return {
+      destroy() {
+        if (optionElements[index] === node) {
+          optionElements[index] = undefined;
+          queueMicrotask(measureIndicator);
+        }
+      },
+    };
+  }
+
+  $effect(() => {
+    value;
+    options;
+    queueMicrotask(measureIndicator);
+  });
+
+  $effect(() => {
+    if (typeof ResizeObserver === 'undefined') {
+      return;
+    }
+
+    const resizeObserver = new ResizeObserver(() => measureIndicator());
+
+    if (optionsElement) {
+      resizeObserver.observe(optionsElement);
+    }
+
+    for (const optionElement of optionElements) {
+      if (optionElement) {
+        resizeObserver.observe(optionElement);
+      }
+    }
+
+    return () => resizeObserver.disconnect();
+  });
 </script>
 
 <fieldset class="segment-control" class:disabled>
@@ -38,20 +110,41 @@
     </legend>
   {/if}
 
-  <span
-    class="options"
-    style={`--segment-count: ${Math.max(options.length, 1)}`}
-  >
-    {#each options as option}
-      <label>
+  <span class="options" bind:this={optionsElement}>
+    {#if indicatorVisible}
+      <span
+        aria-hidden="true"
+        class="indicator"
+        style:left={`${indicatorLeft}px`}
+        style:width={`${indicatorWidth}px`}
+      ></span>
+    {/if}
+
+    {#each options as option, index (option.value)}
+      <label use:registerOption={index}>
         <input
+          aria-label={option.ariaLabel ?? option.label}
           bind:group={value}
           disabled={disabled || option.disabled}
           {name}
           type="radio"
           value={option.value}
         />
-        <span>{option.label}</span>
+
+        <span
+          class="option-content"
+          data-icon-only={option.icon && !option.label ? 'true' : undefined}
+        >
+          {#if option.icon}
+            <span class="icon">
+              <option.icon size="1rem" />
+            </span>
+          {/if}
+
+          {#if option.label}
+            <span class="option-label">{option.label}</span>
+          {/if}
+        </span>
       </label>
     {/each}
   </span>
@@ -86,20 +179,33 @@
   }
 
   .options {
-    display: grid;
-    grid-template-columns: repeat(var(--segment-count), minmax(0, 1fr));
+    position: relative;
+    display: inline-flex;
     width: fit-content;
     max-width: 100%;
+    align-items: stretch;
     border: 1px solid var(--seblify-color-border-strong, #aab7c5);
     border-radius: 999px;
     background: var(--seblify-color-surface-muted, #d9e0e8);
     padding: 3px;
+    gap: 4px;
+  }
+
+  .indicator {
+    position: absolute;
+    top: 3px;
+    bottom: 3px;
+    border-radius: 999px;
+    background: var(--seblify-color-fill-accent, #146a6f);
+    transition:
+      left 220ms cubic-bezier(0.22, 1, 0.36, 1),
+      width 220ms cubic-bezier(0.22, 1, 0.36, 1);
   }
 
   label {
     position: relative;
     display: grid;
-    min-width: 76px;
+    min-width: max-content;
     cursor: pointer;
   }
 
@@ -114,32 +220,50 @@
     white-space: nowrap;
   }
 
-  label span {
-    display: grid;
+  .option-content {
+    position: relative;
+    z-index: 1;
+    display: inline-flex;
     min-height: 32px;
-    place-items: center;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
     border-radius: 999px;
     padding: 6px 12px;
     color: var(--seblify-color-text-muted, #516176);
     font-size: 0.875rem;
     font-weight: 800;
     line-height: 1;
-    transition:
-      color 160ms ease,
-      background 160ms ease;
+    user-select: none;
+    transition: color 160ms ease;
+  }
+
+  .option-content[data-icon-only='true'] {
+    min-width: 32px;
+    padding-inline: 8px;
+  }
+
+  .icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 0;
   }
 
-  input:checked + span {
+  .option-label {
+    white-space: nowrap;
+  }
+
+  input:checked + .option-content {
     color: var(--seblify-color-fill-accent-text, #ffffff);
-    background: var(--seblify-color-fill-accent, #146a6f);
   }
 
-  input:focus-visible + span {
+  label:has(input:focus-visible) .option-content {
     outline: 3px solid var(--seblify-color-focus-ring, #9bd4d8);
     outline-offset: 2px;
   }
 
-  input:disabled + span {
+  input:disabled + .option-content {
     cursor: not-allowed;
     opacity: var(--seblify-opacity-disabled, 0.56);
   }

package/dist/components/action/input/select/segment-control/SegmentControl.svelte.d.ts

@@ -1,9 +1,14 @@
+import type { Component } from 'svelte';
 export interface SegmentControlOption {
     value: string;
-    label: string;
+    label?: string;
+    ariaLabel?: string;
     disabled?: boolean;
+    icon?: Component<{
+        size?: string;
+    }>;
 }
-declare const SegmentControl: import("svelte").Component<{
+declare const SegmentControl: Component<{
     value?: string | undefined;
     options: SegmentControlOption[];
     label?: string | undefined;