seblify 0.2.0 → 0.3.0

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

@@ -0,0 +1,195 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { SeblifyProps } from 'seblify';
+  import SidenavItem from './SidenavItem.svelte';
+  import {
+    getDescendantSidenavItemIds,
+    getSidenavAccentAncestorId,
+    type SidenavActionDetail,
+    type SidenavItemData,
+  } from './sidenav';
+
+  type Props = SeblifyProps<{
+    items: SidenavItemData[];
+    currentHref?: string;
+    ariaLabel?: string;
+    defaultOpenIds?: string[];
+    openStateKey?: string | number;
+    maxDepth?: number;
+    compact?: boolean;
+    onAction?: (detail: SidenavActionDetail) => void;
+    onItemActivate?: (item: SidenavItemData) => void;
+    label?: Snippet<[SidenavItemData]>;
+    trailing?: Snippet<[SidenavItemData]>;
+  }>;
+
+  let {
+    items,
+    currentHref,
+    ariaLabel = 'Navigation',
+    defaultOpenIds = [],
+    openStateKey,
+    maxDepth,
+    compact = false,
+    onAction,
+    onItemActivate,
+    label: labelSnippet,
+    trailing: trailingSnippet,
+  }: Props = $props();
+
+  let openIds = $state(new Set<string>());
+  let suppressedDefaultOpenIds = $state(new Set<string>());
+  let accentAncestorId = $derived(getSidenavAccentAncestorId(items, currentHref));
+  let lastOpenStateKey = $state<string | number | undefined>(undefined);
+  let lastDefaultOpenSignature = $state('');
+
+  function getDefaultOpenSignature(ids: string[]): string {
+    return ids.join('|');
+  }
+
+  $effect(() => {
+    const defaultOpenSignature = getDefaultOpenSignature(defaultOpenIds);
+
+    if (openStateKey !== undefined && openStateKey !== lastOpenStateKey) {
+      lastOpenStateKey = openStateKey;
+      lastDefaultOpenSignature = defaultOpenSignature;
+      suppressedDefaultOpenIds = new Set();
+      openIds = new Set(defaultOpenIds);
+      return;
+    }
+
+    if (defaultOpenSignature !== lastDefaultOpenSignature) {
+      lastDefaultOpenSignature = defaultOpenSignature;
+      suppressedDefaultOpenIds = new Set();
+    }
+
+    const nextOpenIds = new Set(openIds);
+
+    for (const id of defaultOpenIds) {
+      if (!suppressedDefaultOpenIds.has(id)) {
+        nextOpenIds.add(id);
+      }
+    }
+
+    if (!setsEqual(openIds, nextOpenIds)) {
+      openIds = nextOpenIds;
+    }
+  });
+
+  function isItemOpen(id: string): boolean {
+    return openIds.has(id);
+  }
+
+  function findItemById(
+    searchItems: SidenavItemData[],
+    id: string,
+  ): SidenavItemData | undefined {
+    for (const item of searchItems) {
+      if (item.id === id) {
+        return item;
+      }
+
+      if (item.children?.length) {
+        const match = findItemById(item.children, id);
+
+        if (match) {
+          return match;
+        }
+      }
+    }
+
+    return undefined;
+  }
+
+  function toggleItem(id: string): void {
+    const nextOpenIds = new Set(openIds);
+    const nextSuppressedDefaultOpenIds = new Set(suppressedDefaultOpenIds);
+
+    if (nextOpenIds.has(id)) {
+      nextOpenIds.delete(id);
+      nextSuppressedDefaultOpenIds.add(id);
+      const item = findItemById(items, id);
+
+      for (const descendantId of getDescendantSidenavItemIds(item?.children)) {
+        nextOpenIds.delete(descendantId);
+        nextSuppressedDefaultOpenIds.add(descendantId);
+      }
+    } else {
+      nextOpenIds.add(id);
+      nextSuppressedDefaultOpenIds.delete(id);
+    }
+
+    openIds = nextOpenIds;
+    suppressedDefaultOpenIds = nextSuppressedDefaultOpenIds;
+  }
+
+  function setsEqual(a: Set<string>, b: Set<string>): boolean {
+    if (a.size !== b.size) {
+      return false;
+    }
+
+    for (const value of a) {
+      if (!b.has(value)) {
+        return false;
+      }
+    }
+
+    return true;
+  }
+</script>
+
+<nav aria-label={ariaLabel} class="sidenav">
+  <ul class="sidenav__list">
+    {#each items as item (item.id)}
+      <SidenavItem
+        {accentAncestorId}
+        {compact}
+        {currentHref}
+        depth={0}
+        isItemOpen={isItemOpen}
+        {item}
+        label={labelSnippet}
+        {maxDepth}
+        {onAction}
+        {onItemActivate}
+        trailing={trailingSnippet}
+        toggleItem={toggleItem}
+      />
+    {/each}
+  </ul>
+</nav>
+
+<style>
+  .sidenav {
+    --seblify-sidenav-accent-background: color-mix(
+      in srgb,
+      var(--seblify-color-fill-primary, #146a6f) 22%,
+      transparent
+    );
+    --seblify-sidenav-accent-foreground: var(
+      --seblify-color-fill-primary,
+      #146a6f
+    );
+    --seblify-sidenav-hover-background: var(
+      --seblify-color-surface-hover,
+      #f1f4f9
+    );
+    --seblify-sidenav-link-label: var(--seblify-color-text-muted, #aebdd2);
+    --seblify-sidenav-link-label-current: var(--seblify-color-text, #ffffff);
+    --seblify-sidenav-disabled: var(--seblify-color-text-disabled, #58677b);
+    --seblify-sidenav-supporting: color-mix(
+      in srgb,
+      var(--seblify-color-text-subtle, #667085) 45%,
+      var(--seblify-color-text-disabled, #58677b) 55%
+    );
+    font-size: 0.925rem;
+  }
+
+  .sidenav__list {
+    display: grid;
+    gap: 0.125rem;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+</style>

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

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+import { type SidenavActionDetail, type SidenavItemData } from './sidenav';
+declare const Sidenav: import("svelte").Component<{
+    items: SidenavItemData[];
+    currentHref?: string | undefined;
+    ariaLabel?: string | undefined;
+    defaultOpenIds?: string[] | undefined;
+    openStateKey?: string | number | undefined;
+    maxDepth?: number | undefined;
+    compact?: boolean | undefined;
+    onAction?: ((detail: SidenavActionDetail) => void) | undefined;
+    onItemActivate?: ((item: SidenavItemData) => void) | undefined;
+    label?: string | undefined;
+    trailing?: Snippet<[SidenavItemData]> | undefined;
+}, {}, "">;
+type Sidenav = ReturnType<typeof Sidenav>;
+export default Sidenav;

package/dist/components/framework/navigation/sidebar/sidenav/SidenavItem.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import SidenavItemBranch from './fragments/SidenavItemBranch.svelte';
+  import SidenavItemDivider from './fragments/SidenavItemDivider.svelte';
+  import SidenavItemLeaf from './fragments/SidenavItemLeaf.svelte';
+  import type {
+    SidenavActionDetail,
+    SidenavItemData,
+    SidenavItemKind,
+  } from './sidenav';
+  import { getSidenavItemKind } from './sidenav';
+
+  type Props = {
+    item: SidenavItemData;
+    depth: number;
+    accentAncestorId?: string;
+    currentHref?: string;
+    compact?: boolean;
+    maxDepth?: number;
+    isItemOpen: (id: string) => boolean;
+    toggleItem: (id: string) => void;
+    onAction?: (detail: SidenavActionDetail) => void;
+    onItemActivate?: (item: SidenavItemData) => void;
+    label?: Snippet<[SidenavItemData]>;
+    trailing?: Snippet<[SidenavItemData]>;
+  };
+
+  let {
+    item,
+    depth,
+    accentAncestorId,
+    currentHref,
+    compact = false,
+    maxDepth,
+    isItemOpen,
+    toggleItem,
+    onAction,
+    onItemActivate,
+    label: labelSnippet,
+    trailing: trailingSnippet,
+  }: Props =
+    $props();
+
+  let kind = $derived(getSidenavItemKind(item));
+
+  function isBranchKind(value: SidenavItemKind): boolean {
+    return (
+      value === 'group' || value === 'action-group' || value === 'link-group'
+    );
+  }
+
+  function isDividerKind(value: SidenavItemKind): boolean {
+    return value === 'divider';
+  }
+</script>
+
+{#if isDividerKind(kind)}
+  <SidenavItemDivider />
+{:else if isBranchKind(kind)}
+  <SidenavItemBranch
+    {accentAncestorId}
+    {compact}
+    {currentHref}
+    {depth}
+    isOpen={isItemOpen(item.id)}
+    {isItemOpen}
+    {item}
+    {kind}
+    label={labelSnippet}
+    {maxDepth}
+    {onAction}
+    {onItemActivate}
+    trailing={trailingSnippet}
+    {toggleItem}
+  />
+{:else}
+  <SidenavItemLeaf
+    {accentAncestorId}
+    {compact}
+    {currentHref}
+    {depth}
+    {item}
+    {kind}
+    label={labelSnippet}
+    {onAction}
+    {onItemActivate}
+    trailing={trailingSnippet}
+  />
+{/if}

package/dist/components/framework/navigation/sidebar/sidenav/SidenavItem.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+import type { SidenavActionDetail, SidenavItemData } from './sidenav';
+type Props = {
+    item: SidenavItemData;
+    depth: number;
+    accentAncestorId?: string;
+    currentHref?: string;
+    compact?: boolean;
+    maxDepth?: number;
+    isItemOpen: (id: string) => boolean;
+    toggleItem: (id: string) => void;
+    onAction?: (detail: SidenavActionDetail) => void;
+    onItemActivate?: (item: SidenavItemData) => void;
+    label?: Snippet<[SidenavItemData]>;
+    trailing?: Snippet<[SidenavItemData]>;
+};
+declare const SidenavItem: import("svelte").Component<Props, {}, "">;
+type SidenavItem = ReturnType<typeof SidenavItem>;
+export default SidenavItem;

package/dist/components/framework/navigation/sidebar/sidenav/fragments/SidenavItemBranch.svelte

@@ -0,0 +1,203 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import SidenavItem from '../SidenavItem.svelte';
+  import SidenavItemRow from './SidenavItemRow.svelte';
+  import type {
+    SidenavActionDetail,
+    SidenavItemData,
+    SidenavItemKind,
+  } from '../sidenav';
+  import {
+    getSidenavItemLabel,
+    itemContainsHref,
+    itemMatchesHref,
+  } from '../sidenav';
+
+  type Props = {
+    item: SidenavItemData;
+    kind: Extract<SidenavItemKind, 'group' | 'action-group' | 'link-group'>;
+    depth: number;
+    accentAncestorId?: string;
+    currentHref?: string;
+    compact?: boolean;
+    maxDepth?: number;
+    isOpen: boolean;
+    isItemOpen: (id: string) => boolean;
+    toggleItem: (id: string) => void;
+    onAction?: (detail: SidenavActionDetail) => void;
+    onItemActivate?: (item: SidenavItemData) => void;
+    label?: Snippet<[SidenavItemData]>;
+    trailing?: Snippet<[SidenavItemData]>;
+  };
+
+  let {
+    item,
+    kind,
+    depth,
+    accentAncestorId,
+    currentHref,
+    compact = false,
+    maxDepth,
+    isOpen,
+    isItemOpen,
+    toggleItem,
+    onAction,
+    onItemActivate,
+    label: labelSnippet,
+    trailing: trailingSnippet,
+  }: Props = $props();
+
+  let label = $derived(getSidenavItemLabel(item));
+  let hasChildren = $derived(Boolean(item.children?.length));
+  let collapsible = $derived(item.collapsible !== false);
+  let expanded = $derived(!collapsible || (canRenderChildren ? isOpen : false));
+  let current = $derived(itemMatchesHref(item, currentHref));
+  let containsCurrent = $derived(itemContainsHref(item, currentHref));
+  let canRenderChildren = $derived(
+    maxDepth === undefined || depth + 1 < maxDepth,
+  );
+  let showToggle = $derived(collapsible && !compact && hasChildren);
+  let toggleMode = $derived(showToggle && canRenderChildren ? 'button' : 'indicator');
+  let canActivateCompactRoot = $derived(
+    compact && depth === 0 && kind === 'group' && Boolean(onItemActivate),
+  );
+  let primaryInteractive = $derived(
+    kind === 'group'
+      ? canActivateCompactRoot || (collapsible && !compact && canRenderChildren)
+        ? 'button'
+        : 'static'
+      : kind === 'link-group'
+        ? 'link'
+        : 'button',
+  );
+
+  function handlePrimary(): void {
+    if (kind === 'group') {
+      if (canActivateCompactRoot && !item.disabled) {
+        onItemActivate?.(item);
+      }
+      return;
+    }
+
+    if (kind === 'action-group') {
+      if (item.action && !item.disabled) {
+        onAction?.({
+          id: item.id,
+          action: item.action,
+          payload: item.payload,
+          item,
+        });
+      }
+    }
+  }
+
+  function handleDisabledLinkClick(event: MouseEvent): void {
+    if (item.disabled) {
+      event.preventDefault();
+      return;
+    }
+
+    if (
+      kind === 'link-group' &&
+      current &&
+      !canRenderChildren &&
+      hasChildren &&
+      onItemActivate
+    ) {
+      event.preventDefault();
+      onItemActivate(item);
+      return;
+    }
+
+    if (kind === 'link-group' && collapsible && canRenderChildren && !compact) {
+      if (containsCurrent && expanded) {
+        event.preventDefault();
+        toggleItem(item.id);
+        return;
+      }
+
+      if (!expanded) {
+        toggleItem(item.id);
+      }
+    }
+  }
+
+  function handleToggle(): void {
+    if (item.disabled) {
+      return;
+    }
+
+    toggleItem(item.id);
+  }
+</script>
+
+<li class="sidenav-branch">
+  <SidenavItemRow
+    accentAncestor={item.id === accentAncestorId}
+    appearance={kind === 'group' ? 'header' : kind === 'action-group' ? 'muted' : 'default'}
+    ariaCurrent={current ? 'page' : undefined}
+    {compact}
+    current={current}
+    {depth}
+    disabled={item.disabled}
+    expandable={showToggle}
+    expanded={expanded}
+    href={kind === 'link-group' ? item.href : undefined}
+    icon={item.icon}
+    {item}
+    interactive={primaryInteractive}
+    label={label}
+    labelContent={labelSnippet}
+    onLinkClick={kind === 'link-group' ? handleDisabledLinkClick : undefined}
+    onPrimary={
+      kind === 'group'
+        ? canActivateCompactRoot
+          ? handlePrimary
+          : collapsible && !compact && canRenderChildren
+            ? handleToggle
+            : undefined
+        : kind === 'action-group'
+          ? handlePrimary
+          : undefined
+    }
+    onToggle={handleToggle}
+    trailingContent={trailingSnippet}
+    toggleDisabled={item.disabled}
+    {toggleMode}
+  />
+
+  {#if expanded && canRenderChildren}
+    <ul class="sidenav-branch__children">
+      {#each item.children ?? [] as child (child.id)}
+        <SidenavItem
+          {accentAncestorId}
+          {compact}
+          {currentHref}
+          depth={depth + 1}
+          {isItemOpen}
+          item={child}
+          label={labelSnippet}
+          {maxDepth}
+          {onAction}
+          {onItemActivate}
+          trailing={trailingSnippet}
+          {toggleItem}
+        />
+      {/each}
+    </ul>
+  {/if}
+</li>
+
+<style>
+  .sidenav-branch {
+    list-style: none;
+  }
+
+  .sidenav-branch__children {
+    display: grid;
+    gap: 0.125rem;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+</style>

package/dist/components/framework/navigation/sidebar/sidenav/fragments/SidenavItemBranch.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { Snippet } from 'svelte';
+import type { SidenavActionDetail, SidenavItemData, SidenavItemKind } from '../sidenav';
+type Props = {
+    item: SidenavItemData;
+    kind: Extract<SidenavItemKind, 'group' | 'action-group' | 'link-group'>;
+    depth: number;
+    accentAncestorId?: string;
+    currentHref?: string;
+    compact?: boolean;
+    maxDepth?: number;
+    isOpen: boolean;
+    isItemOpen: (id: string) => boolean;
+    toggleItem: (id: string) => void;
+    onAction?: (detail: SidenavActionDetail) => void;
+    onItemActivate?: (item: SidenavItemData) => void;
+    label?: Snippet<[SidenavItemData]>;
+    trailing?: Snippet<[SidenavItemData]>;
+};
+declare const SidenavItemBranch: import("svelte").Component<Props, {}, "">;
+type SidenavItemBranch = ReturnType<typeof SidenavItemBranch>;
+export default SidenavItemBranch;

package/dist/components/framework/navigation/sidebar/sidenav/fragments/SidenavItemDivider.svelte

@@ -0,0 +1,17 @@
+<li class="sidenav-divider">
+  <hr />
+</li>
+
+<style>
+  .sidenav-divider {
+    margin: 0.375rem 0;
+    padding: 0 0.75rem;
+    list-style: none;
+  }
+
+  hr {
+    margin: 0;
+    border: 0;
+    border-top: 1px solid var(--seblify-color-border, #c8d2df);
+  }
+</style>

package/dist/components/framework/navigation/sidebar/sidenav/fragments/SidenavItemDivider.svelte.d.ts

@@ -0,0 +1,26 @@
+export default SidenavItemDivider;
+type SidenavItemDivider = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const SidenavItemDivider: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/framework/navigation/sidebar/sidenav/fragments/SidenavItemLeaf.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import SidenavItemRow from './SidenavItemRow.svelte';
+  import type {
+    SidenavActionDetail,
+    SidenavItemData,
+    SidenavItemKind,
+  } from '../sidenav';
+  import { getSidenavItemLabel, itemMatchesHref } from '../sidenav';
+
+  type Props = {
+    item: SidenavItemData;
+    kind: Exclude<SidenavItemKind, 'divider' | 'group' | 'action-group' | 'link-group'>;
+    depth: number;
+    accentAncestorId?: string;
+    currentHref?: string;
+    compact?: boolean;
+    onAction?: (detail: SidenavActionDetail) => void;
+    onItemActivate?: (item: SidenavItemData) => void;
+    label?: Snippet<[SidenavItemData]>;
+    trailing?: Snippet<[SidenavItemData]>;
+  };
+
+  let {
+    item,
+    kind,
+    depth,
+    accentAncestorId,
+    currentHref,
+    compact = false,
+    onAction,
+    onItemActivate,
+    label: labelSnippet,
+    trailing: trailingSnippet,
+  }: Props = $props();
+
+  let label = $derived(getSidenavItemLabel(item));
+  let current = $derived(itemMatchesHref(item, currentHref));
+
+  function handleAction(): void {
+    if (!item.action || item.disabled) {
+      return;
+    }
+
+    onAction?.({
+      id: item.id,
+      action: item.action,
+      payload: item.payload,
+      item,
+    });
+  }
+
+  function handleDisabledLinkClick(event: MouseEvent): void {
+    if (item.disabled) {
+      event.preventDefault();
+    }
+  }
+</script>
+
+<li>
+  <SidenavItemRow
+    accentAncestor={item.id === accentAncestorId}
+    appearance={kind === 'header' ? 'header' : kind === 'action' ? 'muted' : 'default'}
+    ariaCurrent={current ? 'page' : undefined}
+    current={current}
+    {compact}
+    {depth}
+    disabled={item.disabled}
+    href={kind === 'link' ? item.href : undefined}
+    icon={item.icon}
+    {item}
+    interactive={kind === 'header' ? 'static' : kind === 'link' ? 'link' : 'button'}
+    label={label}
+    labelContent={labelSnippet}
+    onLinkClick={kind === 'link' ? handleDisabledLinkClick : undefined}
+    onPrimary={kind === 'action' ? handleAction : undefined}
+    trailingContent={trailingSnippet}
+  />
+</li>
+
+<style>
+  li {
+    list-style: none;
+  }
+</style>

package/dist/components/framework/navigation/sidebar/sidenav/fragments/SidenavItemLeaf.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+import type { SidenavActionDetail, SidenavItemData, SidenavItemKind } from '../sidenav';
+type Props = {
+    item: SidenavItemData;
+    kind: Exclude<SidenavItemKind, 'divider' | 'group' | 'action-group' | 'link-group'>;
+    depth: number;
+    accentAncestorId?: string;
+    currentHref?: string;
+    compact?: boolean;
+    onAction?: (detail: SidenavActionDetail) => void;
+    onItemActivate?: (item: SidenavItemData) => void;
+    label?: Snippet<[SidenavItemData]>;
+    trailing?: Snippet<[SidenavItemData]>;
+};
+declare const SidenavItemLeaf: import("svelte").Component<Props, {}, "">;
+type SidenavItemLeaf = ReturnType<typeof SidenavItemLeaf>;
+export default SidenavItemLeaf;