seblify 0.1.7 → 0.1.8

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,17 @@
+[![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
 
-> First package publish test
+[comment]: <> (==== ========================= ====)
+[comment]: <> (=== AUTOGENERATED - DO NOT EDIT ===)
+[comment]: <> (==== ========================= ====)
+[comment]: <> (= edit scripts/readme/template.md =)
+[comment]: <> (==== ========================= ====)
 
-Svelte component library for Seblify.
+Svelte UI component library for building themed interfaces.
 
 ## Installation
 
@@ -16,3 +25,210 @@ npm install seblify
 import { Button, Badge } from 'seblify';
 import 'seblify/theme.css';
 ```
+
+## Components
+
+[![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)
+
+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)
+- [Display Components](https://seblify.com/sections/display)
+- [Framework Components](https://seblify.com/sections/framework)
+- [Design System](https://seblify.com/design-system)
+
+---
+
+## Input Components <small>&middot; 6 items</small>
+
+Components that let users make choices, submit data, and trigger behavior.
+
+<details>
+<summary><strong>Input Fields</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 |
+
+
+---
+</details>
+
+<br />
+
+<details>
+<summary><strong>Selectable</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 |
+
+
+---
+</details>
+
+## Display Components <small>&middot; 8 items</small>
+
+Components for showing content, feedback, media, and motion.
+
+<details>
+<summary><strong>Annotation</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 |
+
+
+---
+</details>
+
+<br />
+
+<details>
+<summary><strong>Loading</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 |
+
+
+---
+</details>
+
+<br />
+
+<details>
+<summary><strong>Typography</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 |
+
+
+---
+</details>
+
+<br />
+
+<details>
+<summary><strong>Media</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 |
+
+
+---
+</details>
+
+## Framework Components <small>&middot; 10 items</small>
+
+Layout, navigation, overlays, and surface primitives.
+
+<details>
+<summary><strong>Align</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 |
+
+
+---
+</details>
+
+<br />
+
+<details>
+<summary><strong>Container</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 |
+
+
+---
+</details>
+
+<br />
+
+<details>
+<summary><strong>Navigation</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 |
+
+
+---
+</details>
+
+<br />
+
+<details>
+<summary><strong>Surface</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 |
+
+
+---
+</details>
+
+## 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. |
+
+## Release Notes <small>&middot; 0.1.8</small>
+
+_May 14 2026_ &middot; _1 item 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)
+
+- Temporary task note for release note workflow

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>

package/dist/components/Banner.svelte

@@ -1,56 +1,56 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  type BannerTone = 'info' | 'success' | 'warning' | 'error';
-
-  interface Props {
-    children?: Snippet;
-    tone?: BannerTone;
-  }
-
-  let { children, tone = 'info' }: Props = $props();
-</script>
-
-<section
-  class="banner"
-  class:success={tone === 'success'}
-  class:warning={tone === 'warning'}
-  class:error={tone === 'error'}
->
-  <div class="content">
-    {@render children?.()}
-  </div>
-</section>
-
-<style>
-  .banner {
-    width: 100%;
-    border-bottom: 1px solid var(--seblify-color-info-border, #bfd1ea);
-    background: var(--seblify-color-info-surface, #eaf3ff);
-    color: var(--seblify-color-info-text, #102f55);
-  }
-
-  .content {
-    padding: 10px 16px;
-    font-size: 14px;
-    line-height: 1.4;
-  }
-
-  .success {
-    border-bottom-color: var(--seblify-color-success-border, #b8ddc7);
-    background: var(--seblify-color-success-surface, #e8f8ee);
-    color: var(--seblify-color-success-text, #143d25);
-  }
-
-  .warning {
-    border-bottom-color: var(--seblify-color-warning-border, #e8d28f);
-    background: var(--seblify-color-warning-surface, #fff6d8);
-    color: var(--seblify-color-warning-text, #4d3900);
-  }
-
-  .error {
-    border-bottom-color: var(--seblify-color-error-border, #efb6b6);
-    background: var(--seblify-color-error-surface, #fff0f0);
-    color: var(--seblify-color-error-text, #5a1717);
-  }
-</style>
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  type BannerTone = 'info' | 'success' | 'warning' | 'error';
+
+  interface Props {
+    children?: Snippet;
+    tone?: BannerTone;
+  }
+
+  let { children, tone = 'info' }: Props = $props();
+</script>
+
+<section
+  class="banner"
+  class:success={tone === 'success'}
+  class:warning={tone === 'warning'}
+  class:error={tone === 'error'}
+>
+  <div class="content">
+    {@render children?.()}
+  </div>
+</section>
+
+<style>
+  .banner {
+    width: 100%;
+    border-bottom: 1px solid var(--seblify-color-info-border, #bfd1ea);
+    background: var(--seblify-color-info-surface, #eaf3ff);
+    color: var(--seblify-color-info-text, #102f55);
+  }
+
+  .content {
+    padding: 10px 16px;
+    font-size: 14px;
+    line-height: 1.4;
+  }
+
+  .success {
+    border-bottom-color: var(--seblify-color-success-border, #b8ddc7);
+    background: var(--seblify-color-success-surface, #e8f8ee);
+    color: var(--seblify-color-success-text, #143d25);
+  }
+
+  .warning {
+    border-bottom-color: var(--seblify-color-warning-border, #e8d28f);
+    background: var(--seblify-color-warning-surface, #fff6d8);
+    color: var(--seblify-color-warning-text, #4d3900);
+  }
+
+  .error {
+    border-bottom-color: var(--seblify-color-error-border, #efb6b6);
+    background: var(--seblify-color-error-surface, #fff0f0);
+    color: var(--seblify-color-error-text, #5a1717);
+  }
+</style>

package/dist/components/Button.svelte

@@ -1,64 +1,64 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  type ButtonVariant = 'primary' | 'secondary';
-  type ButtonType = 'button' | 'submit' | 'reset';
-
-  interface Props {
-    children?: Snippet;
-    disabled?: boolean;
-    onclick?: (event: MouseEvent) => void;
-    type?: ButtonType;
-    variant?: ButtonVariant;
-  }
-
-  let {
-    children,
-    disabled = false,
-    onclick,
-    type = 'button',
-    variant = 'primary',
-  }: Props = $props();
-</script>
-
-<button {disabled} {onclick} {type} class:secondary={variant === 'secondary'}>
-  {@render children?.()}
-</button>
-
-<style>
-  button {
-    min-height: 36px;
-    border: 1px solid var(--seblify-color-fill-accent, #146a6f);
-    border-radius: 6px;
-    padding: 0 14px;
-    background: var(--seblify-color-fill-accent, #146a6f);
-    color: var(--seblify-color-fill-accent-text, #ffffff);
-    font: inherit;
-    font-weight: 600;
-    cursor: pointer;
-  }
-
-  button:hover:not(:disabled) {
-    background: var(--seblify-color-fill-accent-hover, #0d4d52);
-  }
-
-  button:focus-visible {
-    outline: 3px solid var(--seblify-color-focus-ring, #9bd4d8);
-    outline-offset: 2px;
-  }
-
-  button:disabled {
-    cursor: not-allowed;
-    opacity: var(--seblify-opacity-disabled, 0.56);
-  }
-
-  .secondary {
-    border-color: var(--seblify-color-border, #c8d2df);
-    background: var(--seblify-color-surface, #ffffff);
-    color: var(--seblify-color-text, #172033);
-  }
-
-  .secondary:hover:not(:disabled) {
-    background: var(--seblify-color-surface-hover, #f1f4f9);
-  }
-</style>
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  type ButtonVariant = 'primary' | 'secondary';
+  type ButtonType = 'button' | 'submit' | 'reset';
+
+  interface Props {
+    children?: Snippet;
+    disabled?: boolean;
+    onclick?: (event: MouseEvent) => void;
+    type?: ButtonType;
+    variant?: ButtonVariant;
+  }
+
+  let {
+    children,
+    disabled = false,
+    onclick,
+    type = 'button',
+    variant = 'primary',
+  }: Props = $props();
+</script>
+
+<button {disabled} {onclick} {type} class:secondary={variant === 'secondary'}>
+  {@render children?.()}
+</button>
+
+<style>
+  button {
+    min-height: 36px;
+    border: 1px solid var(--seblify-color-fill-accent, #146a6f);
+    border-radius: 6px;
+    padding: 0 14px;
+    background: var(--seblify-color-fill-accent, #146a6f);
+    color: var(--seblify-color-fill-accent-text, #ffffff);
+    font: inherit;
+    font-weight: 600;
+    cursor: pointer;
+  }
+
+  button:hover:not(:disabled) {
+    background: var(--seblify-color-fill-accent-hover, #0d4d52);
+  }
+
+  button:focus-visible {
+    outline: 3px solid var(--seblify-color-focus-ring, #9bd4d8);
+    outline-offset: 2px;
+  }
+
+  button:disabled {
+    cursor: not-allowed;
+    opacity: var(--seblify-opacity-disabled, 0.56);
+  }
+
+  .secondary {
+    border-color: var(--seblify-color-border, #c8d2df);
+    background: var(--seblify-color-surface, #ffffff);
+    color: var(--seblify-color-text, #172033);
+  }
+
+  .secondary:hover:not(:disabled) {
+    background: var(--seblify-color-surface-hover, #f1f4f9);
+  }
+</style>

package/dist/components/Icon.svelte

@@ -1,67 +1,67 @@
-<script lang="ts">
-  const iconModules = import.meta.glob("../icons/**/*.svg", {
-    eager: true,
-    import: "default"
-  });
-
-  interface Props {
-    alt?: string;
-    name?: string;
-    size?: number;
-  }
-
-  let { alt = "", name = "", size = 24 }: Props = $props();
-
-  function normalizeNameToPath(value: unknown): string | null {
-    const safe = typeof value === "string" ? value.trim() : "";
-
-    if (safe.length === 0) {
-      return null;
-    }
-
-    const parts = safe.split("-").filter((part) => part.length > 0);
-
-    if (parts.length < 2) {
-      return null;
-    }
-
-    const folder = parts[0];
-    const file = parts.slice(1).join("-");
-
-    return `../icons/${folder}/${file}.svg`;
-  }
-
-  let groupedPath = $derived(normalizeNameToPath(name));
-  let iconPath = $derived(
-    (groupedPath != null ? iconModules[groupedPath] : undefined) ??
-      iconModules[`../icons/${name}.svg`] ??
-      ""
-  );
-</script>
-
-{#if iconPath}
-  <span
-    role={alt ? "img" : undefined}
-    aria-label={alt || undefined}
-    aria-hidden={alt ? undefined : "true"}
-    style:--icon-url={`url('${iconPath}')`}
-    style:width={`${size / 16}rem`}
-    style:height={`${size / 16}rem`}
-  ></span>
-{/if}
-
-<style>
-  span {
-    display: inline-block;
-    flex: 0 0 auto;
-    background-color: currentColor;
-    mask-image: var(--icon-url);
-    mask-position: center;
-    mask-repeat: no-repeat;
-    mask-size: contain;
-    -webkit-mask-image: var(--icon-url);
-    -webkit-mask-position: center;
-    -webkit-mask-repeat: no-repeat;
-    -webkit-mask-size: contain;
-  }
-</style>
+<script lang="ts">
+  const iconModules = import.meta.glob("../icons/**/*.svg", {
+    eager: true,
+    import: "default"
+  });
+
+  interface Props {
+    alt?: string;
+    name?: string;
+    size?: number;
+  }
+
+  let { alt = "", name = "", size = 24 }: Props = $props();
+
+  function normalizeNameToPath(value: unknown): string | null {
+    const safe = typeof value === "string" ? value.trim() : "";
+
+    if (safe.length === 0) {
+      return null;
+    }
+
+    const parts = safe.split("-").filter((part) => part.length > 0);
+
+    if (parts.length < 2) {
+      return null;
+    }
+
+    const folder = parts[0];
+    const file = parts.slice(1).join("-");
+
+    return `../icons/${folder}/${file}.svg`;
+  }
+
+  let groupedPath = $derived(normalizeNameToPath(name));
+  let iconPath = $derived(
+    (groupedPath != null ? iconModules[groupedPath] : undefined) ??
+      iconModules[`../icons/${name}.svg`] ??
+      ""
+  );
+</script>
+
+{#if iconPath}
+  <span
+    role={alt ? "img" : undefined}
+    aria-label={alt || undefined}
+    aria-hidden={alt ? undefined : "true"}
+    style:--icon-url={`url('${iconPath}')`}
+    style:width={`${size / 16}rem`}
+    style:height={`${size / 16}rem`}
+  ></span>
+{/if}
+
+<style>
+  span {
+    display: inline-block;
+    flex: 0 0 auto;
+    background-color: currentColor;
+    mask-image: var(--icon-url);
+    mask-position: center;
+    mask-repeat: no-repeat;
+    mask-size: contain;
+    -webkit-mask-image: var(--icon-url);
+    -webkit-mask-position: center;
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-size: contain;
+  }
+</style>

package/dist/components/Sidebar.svelte

@@ -1,106 +1,106 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  interface SidebarNavItem {
-    active?: boolean;
-    href?: string;
-    label: string;
-  }
-
-  interface Props {
-    bottomItems?: SidebarNavItem[];
-    logo?: Snippet;
-    topItems?: SidebarNavItem[];
-  }
-
-  let { bottomItems = [], logo, topItems = [] }: Props = $props();
-</script>
-
-<aside class="sidebar">
-  {#if logo}
-    <div class="brand">
-      {@render logo()}
-    </div>
-  {/if}
-
-  <nav class="nav-section top" aria-label="Primary navigation">
-    {#each topItems as item}
-      <a
-        class="nav-item"
-        class:active={item.active}
-        href={item.href ?? '#'}
-        aria-current={item.active ? 'page' : undefined}
-      >
-        {item.label}
-      </a>
-    {/each}
-  </nav>
-
-  {#if bottomItems.length > 0}
-    <nav class="nav-section bottom" aria-label="Secondary navigation">
-      {#each bottomItems as item}
-        <a
-          class="nav-item"
-          class:active={item.active}
-          href={item.href ?? '#'}
-          aria-current={item.active ? 'page' : undefined}
-        >
-          {item.label}
-        </a>
-      {/each}
-    </nav>
-  {/if}
-</aside>
-
-<style>
-  .sidebar {
-    display: flex;
-    flex-direction: column;
-    width: 16.5rem;
-    max-width: 100%;
-    min-height: 100%;
-    background: var(--seblify-color-surface-inverse, #172033);
-  }
-
-  .brand {
-    padding: 1.5rem 1rem;
-    color: var(--seblify-color-text-inverse, #ffffff);
-  }
-
-  .nav-section {
-    display: grid;
-    gap: 0.25rem;
-    margin: 0 1rem;
-  }
-
-  .top {
-    align-content: start;
-  }
-
-  .bottom {
-    margin-top: auto;
-    padding-bottom: 1rem;
-  }
-
-  .nav-item {
-    display: block;
-    width: 100%;
-    border-radius: 0.375rem;
-    padding: 0.75rem 1rem;
-    color: var(--seblify-color-text-inverse, #ffffff);
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    text-decoration: none;
-    box-sizing: border-box;
-  }
-
-  .nav-item:hover {
-    background: var(--seblify-color-surface-inverse-hover, #263043);
-    color: var(--seblify-color-text-inverse, #ffffff);
-  }
-
-  .active {
-    background: var(--seblify-color-surface-inverse-hover, #263043);
-    color: var(--seblify-color-text-inverse, #ffffff);
-  }
-</style>
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface SidebarNavItem {
+    active?: boolean;
+    href?: string;
+    label: string;
+  }
+
+  interface Props {
+    bottomItems?: SidebarNavItem[];
+    logo?: Snippet;
+    topItems?: SidebarNavItem[];
+  }
+
+  let { bottomItems = [], logo, topItems = [] }: Props = $props();
+</script>
+
+<aside class="sidebar">
+  {#if logo}
+    <div class="brand">
+      {@render logo()}
+    </div>
+  {/if}
+
+  <nav class="nav-section top" aria-label="Primary navigation">
+    {#each topItems as item}
+      <a
+        class="nav-item"
+        class:active={item.active}
+        href={item.href ?? '#'}
+        aria-current={item.active ? 'page' : undefined}
+      >
+        {item.label}
+      </a>
+    {/each}
+  </nav>
+
+  {#if bottomItems.length > 0}
+    <nav class="nav-section bottom" aria-label="Secondary navigation">
+      {#each bottomItems as item}
+        <a
+          class="nav-item"
+          class:active={item.active}
+          href={item.href ?? '#'}
+          aria-current={item.active ? 'page' : undefined}
+        >
+          {item.label}
+        </a>
+      {/each}
+    </nav>
+  {/if}
+</aside>
+
+<style>
+  .sidebar {
+    display: flex;
+    flex-direction: column;
+    width: 16.5rem;
+    max-width: 100%;
+    min-height: 100%;
+    background: var(--seblify-color-surface-inverse, #172033);
+  }
+
+  .brand {
+    padding: 1.5rem 1rem;
+    color: var(--seblify-color-text-inverse, #ffffff);
+  }
+
+  .nav-section {
+    display: grid;
+    gap: 0.25rem;
+    margin: 0 1rem;
+  }
+
+  .top {
+    align-content: start;
+  }
+
+  .bottom {
+    margin-top: auto;
+    padding-bottom: 1rem;
+  }
+
+  .nav-item {
+    display: block;
+    width: 100%;
+    border-radius: 0.375rem;
+    padding: 0.75rem 1rem;
+    color: var(--seblify-color-text-inverse, #ffffff);
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    text-decoration: none;
+    box-sizing: border-box;
+  }
+
+  .nav-item:hover {
+    background: var(--seblify-color-surface-inverse-hover, #263043);
+    color: var(--seblify-color-text-inverse, #ffffff);
+  }
+
+  .active {
+    background: var(--seblify-color-surface-inverse-hover, #263043);
+    color: var(--seblify-color-text-inverse, #ffffff);
+  }
+</style>

package/dist/components/Snackbar.svelte

@@ -1,26 +1,26 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    children?: Snippet;
-  }
-
-  let { children }: Props = $props();
-</script>
-
-<section class="snackbar" role="status">
-  {@render children?.()}
-</section>
-
-<style>
-  .snackbar {
-    border: 1px solid var(--seblify-color-border-inverse, #263043);
-    border-radius: 6px;
-    padding: 12px 14px;
-    background: var(--seblify-color-surface-inverse, #172033);
-    color: var(--seblify-color-text-inverse, #ffffff);
-    box-shadow: var(--seblify-shadow-raised, 0 12px 28px rgb(23 32 51 / 22%));
-    font-size: 14px;
-    line-height: 1.4;
-  }
-</style>
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    children?: Snippet;
+  }
+
+  let { children }: Props = $props();
+</script>
+
+<section class="snackbar" role="status">
+  {@render children?.()}
+</section>
+
+<style>
+  .snackbar {
+    border: 1px solid var(--seblify-color-border-inverse, #263043);
+    border-radius: 6px;
+    padding: 12px 14px;
+    background: var(--seblify-color-surface-inverse, #172033);
+    color: var(--seblify-color-text-inverse, #ffffff);
+    box-shadow: var(--seblify-shadow-raised, 0 12px 28px rgb(23 32 51 / 22%));
+    font-size: 14px;
+    line-height: 1.4;
+  }
+</style>

package/dist/components/Toast.svelte

@@ -1,27 +1,27 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    children?: Snippet;
-  }
-
-  let { children }: Props = $props();
-</script>
-
-<section class="toast" role="status">
-  {@render children?.()}
-</section>
-
-<style>
-  .toast {
-    border: 1px solid var(--seblify-color-success-border, #b8ddc7);
-    border-radius: 999px;
-    padding: 8px 14px;
-    background: var(--seblify-color-success-surface, #e8f8ee);
-    color: var(--seblify-color-success-text, #143d25);
-    box-shadow: var(--seblify-shadow-status, 0 10px 24px rgb(20 61 37 / 14%));
-    font-size: 14px;
-    line-height: 1.4;
-    text-align: center;
-  }
-</style>
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    children?: Snippet;
+  }
+
+  let { children }: Props = $props();
+</script>
+
+<section class="toast" role="status">
+  {@render children?.()}
+</section>
+
+<style>
+  .toast {
+    border: 1px solid var(--seblify-color-success-border, #b8ddc7);
+    border-radius: 999px;
+    padding: 8px 14px;
+    background: var(--seblify-color-success-surface, #e8f8ee);
+    color: var(--seblify-color-success-text, #143d25);
+    box-shadow: var(--seblify-shadow-status, 0 10px 24px rgb(20 61 37 / 14%));
+    font-size: 14px;
+    line-height: 1.4;
+    text-align: center;
+  }
+</style>

package/dist/components/component-doc.d.ts

@@ -1,4 +1,4 @@
-export type ComponentStatus = 'draft' | 'planned' | 'stable';
+export type ComponentStatus = 'draft' | 'planned' | 'beta' | 'stable' | 'deprecated';
 export interface ComponentDocExample {
     id: string;
     title: string;

package/package.json

@@ -1,14 +1,16 @@
 {
   "name": "seblify",
   "private": false,
-  "version": "0.1.7",
+  "license": "MIT",
+  "version": "0.1.8",
   "type": "module",
   "scripts": {
     "build": "svelte-package --input src --output dist --tsconfig ./tsconfig.json",
     "generate:icons": "node ./scripts/generate-icons.mjs",
-    "change-log:new": "node ./scripts/change-log/document-change.mjs",
+    "doc": "node ./scripts/change-log/document-change.mjs",
     "change-log:validate": "node ./scripts/change-log/validate-pending.mjs",
-    "prepare-release": "node ./scripts/bump-version.mjs",
+    "readme:generate": "node ./scripts/readme/generate-readme.mjs",
+    "prepare-release": "node ./scripts/prepare-release.mjs",
     "prepublishOnly": "pnpm run generate:icons && pnpm run build"
   },
   "svelte": "./dist/index.js",
@@ -58,9 +60,26 @@
     "prompts": "^2.4.2",
     "yaml": "^2.9.0"
   },
-  "homepage": "https://seblify.com",
   "publishConfig": {
     "access": "public",
     "provenance": false
+  },
+  "description": "Svelte UI component library for building themed interfaces",
+  "keywords": [
+    "svelte",
+    "sveltekit",
+    "ui",
+    "component",
+    "component-library",
+    "design-system",
+    "theme",
+    "theming",
+    "css-variables",
+    "accessibility",
+    "custom-theme"
+  ],
+  "homepage": "https://seblify.com",
+  "bugs": {
+    "email": "support.seblify@gmail.com"
   }
 }