seblify 0.1.4

package/dist/components/framework/layout/container/page-header/PageHeader.svelte

@@ -0,0 +1,114 @@
+<script lang="ts">
+  import type { SeblifyProps } from 'seblify';
+  import type { Snippet } from 'svelte';
+
+  import Breadcrumb, {
+    type BreadcrumbItem,
+  } from '../../../navigation/context/breadcrumb/Breadcrumb.svelte';
+  import Eyebrow from '../../../../display/typography/eyebrow/Eyebrow.svelte';
+
+  type Props = SeblifyProps<{
+    actions?: Snippet;
+    breadcrumbItems?: BreadcrumbItem[];
+    eyebrow?: string;
+    summary?: string;
+    title: string;
+  }>;
+
+  let {
+    actions,
+    breadcrumbItems = [],
+    eyebrow,
+    summary,
+    title,
+  }: Props = $props();
+</script>
+
+<header class="page-header">
+  {#if breadcrumbItems.length > 0}
+    <div class="page-header__breadcrumb">
+      <Breadcrumb items={breadcrumbItems} />
+    </div>
+  {/if}
+
+  <div class="page-header__content">
+    <div class="page-header__copy">
+      {#if eyebrow}
+        <div class="page-header__eyebrow">
+          <Eyebrow>{eyebrow}</Eyebrow>
+        </div>
+      {/if}
+
+      <h1>{title}</h1>
+
+      {#if summary}
+        <p>{summary}</p>
+      {/if}
+    </div>
+
+    {#if actions}
+      <div class="page-header__actions">
+        {@render actions()}
+      </div>
+    {/if}
+  </div>
+</header>
+
+<style>
+  .page-header {
+    display: grid;
+    gap: 20px;
+    max-width: 860px;
+  }
+
+  .page-header__breadcrumb {
+    min-width: 0;
+  }
+
+  .page-header__content {
+    display: flex;
+    gap: 24px;
+    align-items: end;
+    justify-content: space-between;
+  }
+
+  .page-header__copy {
+    min-width: 0;
+  }
+
+  .page-header__eyebrow {
+    margin: 0 0 12px;
+  }
+
+  h1 {
+    margin: 0 0 16px;
+    color: var(--seblify-color-text, #172033);
+    font-size: 3rem;
+    line-height: 1.05;
+  }
+
+  p {
+    margin: 0;
+    color: var(--seblify-color-text-muted, #516176);
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  .page-header__actions {
+    flex: 0 0 auto;
+  }
+
+  @media (max-width: 760px) {
+    .page-header__content {
+      display: block;
+    }
+
+    .page-header__actions {
+      margin-top: 16px;
+    }
+
+    h1 {
+      font-size: 2.25rem;
+    }
+  }
+</style>

package/dist/components/framework/layout/container/page-header/PageHeader.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import { type BreadcrumbItem } from '../../../navigation/context/breadcrumb/Breadcrumb.svelte';
+declare const PageHeader: import("svelte").Component<{
+    actions?: Snippet | undefined;
+    breadcrumbItems?: BreadcrumbItem[] | undefined;
+    eyebrow?: string | undefined;
+    summary?: string | undefined;
+    title: string;
+}, {}, "">;
+type PageHeader = ReturnType<typeof PageHeader>;
+export default PageHeader;

package/dist/components/framework/layout/container/sidebar/Sidebar.svelte

@@ -0,0 +1,134 @@
+<script lang="ts">
+  import type { SeblifyProps } from 'seblify';
+  import type { Snippet } from 'svelte';
+
+  type Props = SeblifyProps<{
+    children?: Snippet;
+    header?: Snippet;
+    label?: string;
+    open?: boolean;
+  }>;
+
+  let {
+    children,
+    header,
+    label = 'Sidebar',
+    open = $bindable(false),
+  }: Props = $props();
+
+  function close(): void {
+    open = false;
+  }
+</script>
+
+{#if open}
+  <button
+    aria-label="Close sidebar"
+    class="sidebar-backdrop"
+    onclick={close}
+    type="button"
+  ></button>
+{/if}
+
+<aside aria-label={label} class:open class="sidebar">
+  <div class="sidebar__inner">
+    {#if header}
+      <div class="sidebar__header">
+        {@render header()}
+        <button
+          aria-label="Close sidebar"
+          class="sidebar__close"
+          onclick={close}
+          type="button"
+        >
+          Close
+        </button>
+      </div>
+    {/if}
+
+    <div class="sidebar__body">
+      {@render children?.()}
+    </div>
+  </div>
+</aside>
+
+<style>
+  .sidebar {
+    position: sticky;
+    top: 0;
+    z-index: 30;
+    height: 100vh;
+    overflow: auto;
+    border-right: 1px solid var(--seblify-color-surface-muted, #d9e0e8);
+    background: var(--seblify-color-surface, #ffffff);
+    color: var(--seblify-color-text, #172033);
+  }
+
+  .sidebar__inner {
+    display: grid;
+    grid-template-rows: auto minmax(0, 1fr);
+    align-content: start;
+    gap: 8px;
+    min-height: 100%;
+    padding: var(--sidebar-padding, 18px 14px);
+  }
+
+  .sidebar__header {
+    display: flex;
+    gap: 12px;
+    align-items: flex-start;
+    justify-content: space-between;
+  }
+
+  .sidebar__body {
+    align-self: start;
+    min-width: 0;
+  }
+
+  .sidebar__close,
+  .sidebar-backdrop {
+    display: none;
+  }
+
+  @media (max-width: 760px) {
+    .sidebar {
+      position: fixed;
+      inset: 0 auto 0 0;
+      width: min(320px, calc(100vw - 48px));
+      max-width: 100%;
+      border-right: 1px solid var(--seblify-color-surface-muted, #d9e0e8);
+      box-shadow: var(--seblify-shadow-raised, 0 12px 28px rgb(23 32 51 / 22%));
+      transform: translateX(-100%);
+      transition: transform 160ms ease;
+    }
+
+    .open {
+      transform: translateX(0);
+    }
+
+    .sidebar__close {
+      display: inline-flex;
+      min-height: 34px;
+      align-items: center;
+      border: 1px solid var(--seblify-color-border, #c8d2df);
+      border-radius: 6px;
+      padding: 0 10px;
+      color: var(--seblify-color-text, #172033);
+      background: var(--seblify-color-surface, #ffffff);
+      font: inherit;
+      font-size: 0.875rem;
+      font-weight: 800;
+      cursor: pointer;
+    }
+
+    .sidebar-backdrop {
+      position: fixed;
+      inset: 0;
+      z-index: 20;
+      display: block;
+      border: 0;
+      background: rgb(13 17 23 / 48%);
+      cursor: pointer;
+    }
+  }
+</style>

package/dist/components/framework/layout/container/sidebar/Sidebar.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+declare const Sidebar: import("svelte").Component<{
+    children?: Snippet | undefined;
+    header?: Snippet | undefined;
+    label?: string | undefined;
+    open?: boolean | undefined;
+}, {}, "open">;
+type Sidebar = ReturnType<typeof Sidebar>;
+export default Sidebar;

package/dist/components/framework/navigation/context/breadcrumb/Breadcrumb.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+  import type { SeblifyProps } from 'seblify';
+  export interface BreadcrumbItem {
+    label: string;
+    href?: string;
+  }
+
+  type Props = SeblifyProps<{
+    items: BreadcrumbItem[];
+    label?: string;
+  }>;
+
+  let { items, label = 'Breadcrumb' }: Props = $props();
+</script>
+
+<nav aria-label={label} class="breadcrumb">
+  <ol>
+    {#each items as item, index}
+      {@const isCurrent = index === items.length - 1}
+      <li>
+        {#if item.href && !isCurrent}
+          <a href={item.href}>{item.label}</a>
+        {:else}
+          <span aria-current={isCurrent ? 'page' : undefined}>{item.label}</span
+          >
+        {/if}
+      </li>
+    {/each}
+  </ol>
+</nav>
+
+<style>
+  .breadcrumb {
+    color: var(--seblify-color-text-subtle, #667085);
+    font-size: 0.875rem;
+    font-weight: 700;
+  }
+
+  ol {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  li {
+    display: inline-flex;
+    gap: 8px;
+    align-items: center;
+  }
+
+  li:not(:first-child)::before {
+    content: '/';
+    color: var(--seblify-color-border-strong, #aab7c5);
+  }
+
+  a {
+    color: var(--seblify-color-fill-accent, #146a6f);
+    text-decoration: none;
+  }
+
+  a:hover {
+    text-decoration: underline;
+  }
+
+  span[aria-current='page'] {
+    color: var(--seblify-color-text, #172033);
+  }
+</style>

package/dist/components/framework/navigation/context/breadcrumb/Breadcrumb.svelte.d.ts

@@ -0,0 +1,10 @@
+export interface BreadcrumbItem {
+    label: string;
+    href?: string;
+}
+declare const Breadcrumb: import("svelte").Component<{
+    items: BreadcrumbItem[];
+    label?: string | undefined;
+}, {}, "">;
+type Breadcrumb = ReturnType<typeof Breadcrumb>;
+export default Breadcrumb;

package/dist/components/framework/navigation/sidenav/Sidenav.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+  import type { SeblifyProps } from 'seblify';
+  import { untrack } from 'svelte';
+  import SidenavTree from './SidenavTree.svelte';
+  import type { SidenavItem } from './sidenav';
+
+  type Props = SeblifyProps<{
+    items: SidenavItem[];
+    currentHref?: string;
+    label?: string;
+  }>;
+
+  let { items, currentHref, label = 'Navigation' }: Props = $props();
+  let expandedItemId = $state<string | undefined>();
+  let collapsedItemId = $state<string | undefined>();
+  let retainedExpandedItemId = $state<string | undefined>();
+  let previousSelectedItemId: string | undefined;
+  let selectedItemIds = $derived(findSelectedItemIds(items, currentHref));
+  let selectedItemId = $derived(selectedItemIds.at(-1));
+
+  $effect(() => {
+    const nextSelectedItemId = selectedItemId;
+
+    untrack(() => {
+      if (!nextSelectedItemId) {
+        return;
+      }
+
+      if (nextSelectedItemId !== previousSelectedItemId) {
+        expandedItemId = undefined;
+        collapsedItemId = undefined;
+      }
+
+      previousSelectedItemId = nextSelectedItemId;
+      retainedExpandedItemId = nextSelectedItemId;
+    });
+  });
+
+  function setItemOpen(id: string, open: boolean): void {
+    expandedItemId = open ? id : undefined;
+    collapsedItemId = open ? undefined : id;
+  }
+
+  function findSelectedItemIds(
+    navItems: SidenavItem[],
+    href: string | undefined,
+  ): string[] {
+    if (!href) {
+      return [];
+    }
+
+    for (const item of navItems) {
+      if (item.href === href) {
+        return [item.id];
+      }
+
+      const childPath = findSelectedItemIds(item.children ?? [], href);
+
+      if (item.children?.length && childPath.length) {
+        return [item.id, ...childPath];
+      }
+    }
+
+    return [];
+  }
+</script>
+
+<nav aria-label={label} class="sidenav">
+  <SidenavTree
+    activeItemIds={selectedItemIds}
+    {collapsedItemId}
+    {currentHref}
+    depth={0}
+    {expandedItemId}
+    {items}
+    onToggle={setItemOpen}
+    {retainedExpandedItemId}
+  />
+</nav>
+
+<style>
+  .sidenav {
+    color: var(--seblify-color-text-muted, #516176);
+    font-size: 0.925rem;
+  }
+</style>

package/dist/components/framework/navigation/sidenav/Sidenav.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { SidenavItem } from './sidenav';
+declare const Sidenav: import("svelte").Component<{
+    items: SidenavItem[];
+    currentHref?: string | undefined;
+    label?: string | undefined;
+}, {}, "">;
+type Sidenav = ReturnType<typeof Sidenav>;
+export default Sidenav;

package/dist/components/framework/navigation/sidenav/SidenavTree.svelte

@@ -0,0 +1,265 @@
+<script lang="ts">
+  import type { SeblifyProps } from 'seblify';
+  import SidenavTree from './SidenavTree.svelte';
+  import type { SidenavItem } from './sidenav';
+
+  type Props = SeblifyProps<{
+    activeItemIds: string[];
+    collapsedItemId?: string;
+    items: SidenavItem[];
+    currentHref?: string;
+    depth: number;
+    expandedItemId?: string;
+    onToggle: (id: string, open: boolean) => void;
+    retainedExpandedItemId?: string;
+  }>;
+
+  let {
+    activeItemIds,
+    collapsedItemId,
+    items,
+    currentHref,
+    depth,
+    expandedItemId,
+    onToggle,
+    retainedExpandedItemId,
+  }: Props = $props();
+
+  function isCurrent(item: SidenavItem): boolean {
+    return Boolean(item.href && item.href === currentHref);
+  }
+
+  function hasCurrentDescendant(item: SidenavItem): boolean {
+    return Boolean(
+      item.children?.some(
+        (child) =>
+          Boolean(child.href && child.href === currentHref) ||
+          hasCurrentDescendant(child),
+      ),
+    );
+  }
+
+  function containsItemId(item: SidenavItem, id: string | undefined): boolean {
+    return Boolean(
+      id &&
+      item.children?.some(
+        (child) => child.id === id || containsItemId(child, id),
+      ),
+    );
+  }
+
+  function isOpen(item: SidenavItem): boolean {
+    if (collapsedItemId === item.id) {
+      return false;
+    }
+
+    if (activeItemIds.includes(item.id)) {
+      return true;
+    }
+
+    if (expandedItemId) {
+      return item.id === expandedItemId || containsItemId(item, expandedItemId);
+    }
+
+    return (
+      item.id === retainedExpandedItemId ||
+      containsItemId(item, retainedExpandedItemId)
+    );
+  }
+</script>
+
+<ul class:root={depth === 0} class="sidenav-list">
+  {#each items as item}
+    {@const children = item.children ?? []}
+    {@const hasChildren = children.length > 0}
+    {@const current = isCurrent(item)}
+    {@const selectedBranch =
+      hasChildren && (current || hasCurrentDescendant(item))}
+    {@const sectionHeader = !item.href && !hasChildren}
+    {@const expanded = hasChildren && isOpen(item)}
+    {@const activeBranch = hasChildren && (expanded || selectedBranch)}
+    <li
+      class:active-branch={activeBranch}
+      class:item-node={!sectionHeader}
+      class:section-header={sectionHeader}
+    >
+      {#if sectionHeader}
+        <div class="section-label">{item.label}</div>
+      {:else}
+        <div class="item-row" style:--sidenav-indent={`${depth * 12}px`}>
+          {#if item.href}
+            <a class:current href={item.href}>{item.label}</a>
+          {:else}
+            <button
+              class:current
+              class="item-button"
+              onclick={() => onToggle(item.id, !expanded)}
+              type="button"
+            >
+              {item.label}
+            </button>
+          {/if}
+
+          {#if hasChildren}
+            <button
+              aria-expanded={expanded}
+              aria-label={expanded
+                ? `Collapse ${item.label}`
+                : `Expand ${item.label}`}
+              class="toggle"
+              onclick={() => onToggle(item.id, !expanded)}
+              type="button"
+            >
+              <span class:expanded>&gt;</span>
+            </button>
+          {/if}
+        </div>
+
+        {#if hasChildren && expanded}
+          <SidenavTree
+            {activeItemIds}
+            {collapsedItemId}
+            {currentHref}
+            depth={depth + 1}
+            {expandedItemId}
+            items={children}
+            {onToggle}
+            {retainedExpandedItemId}
+          />
+        {/if}
+      {/if}
+    </li>
+  {/each}
+</ul>
+
+<style>
+  .sidenav-list {
+    display: grid;
+    gap: 2px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .sidenav-list:not(.root) {
+    margin-top: 3px;
+  }
+
+  li {
+    border-radius: 8px;
+  }
+
+  .item-node {
+    padding: 4px;
+  }
+
+  .active-branch {
+    background: var(--seblify-color-surface-hover, #f1f4f9);
+  }
+
+  .section-header {
+    margin: 14px 0 4px;
+  }
+
+  .root > .section-header {
+    margin-top: 22px;
+  }
+
+  .section-label {
+    padding: 0 10px;
+    color: var(--seblify-color-text-subtle, #667085);
+    font-size: 0.72rem;
+    font-weight: 900;
+    letter-spacing: 0;
+    text-transform: uppercase;
+  }
+
+  .item-row {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: 8px;
+    align-items: center;
+    min-height: 34px;
+  }
+
+  .root > .item-node > .item-row {
+    font-size: 1rem;
+  }
+
+  .sidenav-list:not(.root) > .item-node > .item-row {
+    font-size: 0.875rem;
+  }
+
+  .sidenav-list:not(.root) a,
+  .sidenav-list:not(.root) .item-button {
+    font-weight: 400;
+  }
+
+  a,
+  .item-button {
+    min-width: 0;
+    border: 0;
+    border-radius: 6px;
+    padding: 8px 8px 8px calc(10px + var(--sidenav-indent));
+    overflow: hidden;
+    color: inherit;
+    background: transparent;
+    font: inherit;
+    font-weight: 750;
+    text-align: left;
+    text-decoration: none;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .item-button {
+    cursor: pointer;
+  }
+
+  a:hover,
+  .item-button:hover,
+  .toggle:hover {
+    color: var(--seblify-color-text, #172033);
+  }
+
+  .current {
+    color: var(--seblify-color-text, #172033);
+  }
+
+  .root > .item-node > .item-row > .current {
+    font-weight: 750;
+  }
+
+  .sidenav-list:not(.root) .current {
+    font-weight: 400;
+  }
+
+  .active-branch > .item-row > a,
+  .active-branch > .item-row > .item-button {
+    color: var(--seblify-color-text, #172033);
+  }
+
+  .toggle {
+    display: grid;
+    width: 30px;
+    height: 30px;
+    place-items: center;
+    border: 0;
+    border-radius: 6px;
+    color: var(--seblify-color-text-subtle, #667085);
+    background: transparent;
+    font: inherit;
+    cursor: pointer;
+  }
+
+  .toggle span {
+    display: block;
+    font-size: 1.15rem;
+    line-height: 1;
+    transition: transform 120ms ease;
+  }
+
+  .toggle span.expanded {
+    transform: rotate(90deg);
+  }
+</style>