seblify 0.2.0 → 0.2.1

package/README.md

@@ -36,7 +36,7 @@ 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-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)
 
 ### Quick links
@@ -84,10 +84,14 @@ Controls for selecting boolean, range, or option-based values.
 
 ### Display Components
 
-_8 items_
+_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 &middot; 3</strong></summary>
 
@@ -116,14 +120,15 @@ Progress indicators and waiting states.
 <br />
 
 <details>
-<summary><strong>Typography &middot; 2</strong></summary>
+<summary><strong>Typography &middot; 3</strong></summary>
 
 Text primitives and typographic treatments for readable interfaces.
 
 | Component | Summary | Status |
 | --- | --- | --- |
+| [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 />
@@ -162,7 +167,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 +175,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 />
@@ -208,138 +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. |
 
 <br />
 
-## Release Notes <small>&middot; 0.2.0</small>
+## Release Notes <small>&middot; 0.2.1</small>
 
-_May 14 2026_ &middot; _28 items 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).
 
-### [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
-
-### [Breadcrumb](https://seblify.com/components/breadcrumb)
-
-- Added breadcrumb component with examples
-
-### [Checkbox](https://seblify.com/components/checkbox)
-
-- Added checkbox component. Added example with optional disable state. Added example with checkboxes in a table
+### [CodeSnippet](https://seblify.com/components/code-snippet)
 
-### [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
+- 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)
 
-- Setup release note collection flow
-
-### [Grid](https://seblify.com/components/grid)
-
-- Added grid component. Set column amount or item size
+- Documentation can now display code examples
 
 ### [Highlight](https://seblify.com/components/highlight)
 
-- 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
-
-### [Icon](https://seblify.com/components/icon)
-
-- 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
-
-### [icons](https://seblify.com/components/icons)
+- Added code examples to docs
 
-- Added initial icons as poc
+### [inheritance](https://seblify.com/components/inheritance)
 
-### [Loading&nbsp;Dots](https://seblify.com/components/loading-dots)
-
-- Added loading dots component. Takes size prop
-- Different colors via tones prop
-
-### [PageHeader](https://seblify.com/components/page-header)
-
-- Added page-header component. Uses eyebrow and breadcrumb
-
-### [Paper](https://seblify.com/components/paper)
-
-- Added Paper basic surface component
-
-### [Pin&nbsp;Input](https://seblify.com/components/pin-input)
-
-- Added pin-input component. It has optional length and can be disabled
-
-### [Row](https://seblify.com/components/row)
-
-- Added row component as non-wrapping horizontal container
+- Added tone inheritance with consuming and publishing css variables
 
 ### [SegmentControl](https://seblify.com/components/segment-control)
 
-- Added segment-control component
-
-### [Sidebar](https://seblify.com/components/sidebar)
-
-- Added sidebar component - a left-side container. Uses sidenav component
+- Selected background moves smoothly between active option
 
 ### [Sidenav](https://seblify.com/components/sidenav)
 
-- Added sidenav component. Takes tree data to build collapsible nav items
-
-### [Slider](https://seblify.com/components/slider)
-
-- Added slider component. It can take stepsize
-- Added example with optional disabled slider
+- 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 spinner component with customizable size
-- Accepts tone prop
-
-### [Stack](https://seblify.com/components/stack)
-
-- Added stack component as vertical container with gap prop
+- Added code examples to documentation
 
 ### [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
-
-### [theme](https://seblify.com/components/theme)
-
-- Setup initial theme structure
-- Added doc example for scoped theme customization
+- 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
 
-### [ThemeSwitch](https://seblify.com/components/theme-switch)
+### [Timeline](https://seblify.com/components/timeline)
 
-- Added theme-switch component. It uses the segment-control
+- 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;