seblify 0.1.7 → 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Sebastian Andresen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,8 +1,22 @@
+[![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)
+
 # Seblify
 
-> First package publish test
+[comment]: <> (==== ========================= ====)
+[comment]: <> (=== AUTOGENERATED - DO NOT EDIT ===)
+[comment]: <> (==== ========================= ====)
+[comment]: <> (= edit scripts/readme/template.md =)
+[comment]: <> (==== ========================= ====)
+
+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.
 
-Svelte component library for Seblify.
+Ideas and bug reports are genuinely welcome: [support.seblify@gmail.com](mailto:support.seblify@gmail.com)
 
 ## Installation
 
@@ -16,3 +30,316 @@ npm install seblify
 import { Button, Badge } from 'seblify';
 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-draft](https://img.shields.io/badge/draft-24%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)
+- [Design System](https://seblify.com/design-system)
+
+<br />
+
+### Input Components
+
+_6 items_
+
+Components that let users make choices, submit data, and trigger behavior.
+
+<details>
+<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. | Draft |
+
+</details>
+<br />
+
+<details>
+<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. | 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
+
+_8 items_
+
+Components for showing content, feedback, media, and motion.
+
+<details>
+<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. | 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 &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. | Draft |
+| [Spinner](https://seblify.com/components/spinner) | A circular loading indicator for indeterminate progress. | Draft |
+
+</details>
+<br />
+
+<details>
+<summary><strong>Typography &middot; 2</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. | Draft |
+| [Highlight](https://seblify.com/components/highlight) | Highlights case-insensitive text matches inside a plain text string. | Draft |
+
+</details>
+<br />
+
+<details>
+<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. | Draft |
+
+</details>
+<br />
+
+### Framework Components
+
+_10 items_
+
+Layout, navigation, overlays, and surface primitives.
+
+<details>
+<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. | 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 &middot; 3</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. | 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>
+
+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 |
+
+</details>
+<br />
+
+<details>
+<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. | Draft |
+
+</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. |
+| [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. |
+
+<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
+
+### [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
+
+### [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
+
+### [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 initial icons as poc
+
+### [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
+
+### [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
+
+### [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
+
+### [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
+
+### [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
+
+### [ThemeSwitch](https://seblify.com/components/theme-switch)
+
+- Added theme-switch component. It uses the segment-control

package/dist/components/AppShell.svelte

@@ -1,136 +1,136 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    banners?: Snippet;
-    children?: Snippet;
-    drawer?: Snippet;
-    snackbars?: Snippet;
-    sidebar?: Snippet;
-    toasts?: Snippet;
-    sidebarWidth?: string;
-  }
-
-  let {
-    banners,
-    children,
-    drawer,
-    snackbars,
-    sidebar,
-    toasts,
-    sidebarWidth = '280px',
-  }: Props = $props();
-</script>
-
-<div class="app-shell" style:--sidebar-width={sidebarWidth}>
-  {#if banners}
-    <div class="banner-stack" aria-label="Page alerts">
-      {@render banners()}
-    </div>
-  {/if}
-
-  <div class="app-body">
-    {#if sidebar}
-      <aside class="sidebar">
-        {@render sidebar()}
-      </aside>
-    {/if}
-
-    <main class="main-content" tabindex="-1">
-      {@render children?.()}
-    </main>
-  </div>
-
-  {#if toasts}
-    <div class="toast-region" aria-live="polite" aria-label="Confirmations">
-      {@render toasts()}
-    </div>
-  {/if}
-
-  {#if snackbars}
-    <div class="snackbar-region" aria-live="polite" aria-label="Notifications">
-      {@render snackbars()}
-    </div>
-  {/if}
-
-  {#if drawer}
-    <div class="drawer-layer">
-      {@render drawer()}
-    </div>
-  {/if}
-</div>
-
-<style>
-  .app-shell {
-    display: flex;
-    flex-direction: column;
-    min-height: 100vh;
-    background: var(--app-shell-background, var(--seblify-color-page, #f4f6f8));
-    color: var(--app-shell-color, var(--seblify-color-text, #172033));
-  }
-
-  .banner-stack {
-    position: relative;
-    z-index: 100;
-    display: grid;
-    width: 100%;
-  }
-
-  .app-body {
-    flex: 1;
-    display: grid;
-    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
-    min-height: 0;
-  }
-
-  .sidebar {
-    min-width: 0;
-    background: transparent;
-  }
-
-  .main-content {
-    min-width: 0;
-  }
-
-  .toast-region {
-    position: fixed;
-    top: 16px;
-    left: 50%;
-    z-index: 650;
-    display: grid;
-    gap: 8px;
-    width: min(420px, calc(100vw - 32px));
-    transform: translateX(-50%);
-  }
-
-  .snackbar-region {
-    position: fixed;
-    right: 16px;
-    bottom: 16px;
-    z-index: 700;
-    display: grid;
-    gap: 8px;
-    width: min(360px, calc(100vw - 32px));
-  }
-
-  .drawer-layer {
-    position: fixed;
-    inset: 0;
-    z-index: 1000;
-    pointer-events: none;
-  }
-
-  .drawer-layer :global(*) {
-    pointer-events: auto;
-  }
-
-  @media (max-width: 760px) {
-    .app-body {
-      grid-template-columns: 1fr;
-    }
-
-    .sidebar {
-      border-bottom: 0;
-    }
-  }
-</style>
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    banners?: Snippet;
+    children?: Snippet;
+    drawer?: Snippet;
+    snackbars?: Snippet;
+    sidebar?: Snippet;
+    toasts?: Snippet;
+    sidebarWidth?: string;
+  }
+
+  let {
+    banners,
+    children,
+    drawer,
+    snackbars,
+    sidebar,
+    toasts,
+    sidebarWidth = '280px',
+  }: Props = $props();
+</script>
+
+<div class="app-shell" style:--sidebar-width={sidebarWidth}>
+  {#if banners}
+    <div class="banner-stack" aria-label="Page alerts">
+      {@render banners()}
+    </div>
+  {/if}
+
+  <div class="app-body">
+    {#if sidebar}
+      <aside class="sidebar">
+        {@render sidebar()}
+      </aside>
+    {/if}
+
+    <main class="main-content" tabindex="-1">
+      {@render children?.()}
+    </main>
+  </div>
+
+  {#if toasts}
+    <div class="toast-region" aria-live="polite" aria-label="Confirmations">
+      {@render toasts()}
+    </div>
+  {/if}
+
+  {#if snackbars}
+    <div class="snackbar-region" aria-live="polite" aria-label="Notifications">
+      {@render snackbars()}
+    </div>
+  {/if}
+
+  {#if drawer}
+    <div class="drawer-layer">
+      {@render drawer()}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .app-shell {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    background: var(--app-shell-background, var(--seblify-color-page, #f4f6f8));
+    color: var(--app-shell-color, var(--seblify-color-text, #172033));
+  }
+
+  .banner-stack {
+    position: relative;
+    z-index: 100;
+    display: grid;
+    width: 100%;
+  }
+
+  .app-body {
+    flex: 1;
+    display: grid;
+    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
+    min-height: 0;
+  }
+
+  .sidebar {
+    min-width: 0;
+    background: transparent;
+  }
+
+  .main-content {
+    min-width: 0;
+  }
+
+  .toast-region {
+    position: fixed;
+    top: 16px;
+    left: 50%;
+    z-index: 650;
+    display: grid;
+    gap: 8px;
+    width: min(420px, calc(100vw - 32px));
+    transform: translateX(-50%);
+  }
+
+  .snackbar-region {
+    position: fixed;
+    right: 16px;
+    bottom: 16px;
+    z-index: 700;
+    display: grid;
+    gap: 8px;
+    width: min(360px, calc(100vw - 32px));
+  }
+
+  .drawer-layer {
+    position: fixed;
+    inset: 0;
+    z-index: 1000;
+    pointer-events: none;
+  }
+
+  .drawer-layer :global(*) {
+    pointer-events: auto;
+  }
+
+  @media (max-width: 760px) {
+    .app-body {
+      grid-template-columns: 1fr;
+    }
+
+    .sidebar {
+      border-bottom: 0;
+    }
+  }
+</style>