seblify 0.2.0 → 0.3.0

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

@@ -0,0 +1,404 @@
+<script lang="ts">
+  import type { Component, Snippet } from 'svelte';
+  import TriangleSmallDownIcon from '../../../../../../icons/generated/triangle-small-down.svelte';
+  import type { SidenavItemData } from 'seblify';
+
+  type InteractiveMode = 'static' | 'button' | 'link';
+  type Appearance = 'default' | 'header' | 'muted';
+
+  type Props = {
+    item: SidenavItemData;
+    label: string;
+    depth: number;
+    compact?: boolean;
+    icon?: Component;
+    interactive: InteractiveMode;
+    appearance?: Appearance;
+    accentAncestor?: boolean;
+    href?: string;
+    disabled?: boolean;
+    current?: boolean;
+    expandable?: boolean;
+    expanded?: boolean;
+    ariaCurrent?: 'page' | undefined;
+    onPrimary?: () => void;
+    onToggle?: () => void;
+    onLinkClick?: (event: MouseEvent) => void;
+    labelContent?: Snippet<[SidenavItemData]>;
+    trailingContent?: Snippet<[SidenavItemData]>;
+    toggleDisabled?: boolean;
+    toggleMode?: 'button' | 'indicator';
+  };
+
+  let {
+    item,
+    label,
+    depth,
+    compact = false,
+    icon,
+    interactive,
+    appearance = 'default',
+    accentAncestor = false,
+    href,
+    disabled = false,
+    current = false,
+    expandable = false,
+    expanded = false,
+    ariaCurrent,
+    onPrimary,
+    onToggle,
+    onLinkClick,
+    labelContent,
+    trailingContent,
+    toggleDisabled = false,
+    toggleMode = 'button',
+  }: Props = $props();
+
+  let IconComponent = $derived(icon);
+
+  function handlePrimaryClick(): void {
+    if (disabled) {
+      return;
+    }
+
+    onPrimary?.();
+  }
+</script>
+
+<div
+  class:accent-ancestor={accentAncestor}
+  class:compact
+  class:current
+  class:header={appearance === 'header'}
+  class:link-item={interactive === 'link'}
+  class:muted={appearance === 'muted'}
+  class:expandable
+  class="sidenav-row"
+  style:--sidenav-depth={`${depth}`}
+>
+  {#if interactive === 'link' && href}
+    <a
+      aria-current={ariaCurrent}
+      aria-disabled={disabled}
+      class="sidenav-row__primary"
+      {href}
+      onclick={onLinkClick}
+      tabindex={disabled ? -1 : undefined}
+    >
+      {#if IconComponent}
+        <span class="sidenav-row__icon">
+          <IconComponent size="1.5rem" />
+        </span>
+      {/if}
+      <span class="sidenav-row__label">
+        {#if labelContent}
+          {@render labelContent(item)}
+        {:else}
+          {label}
+        {/if}
+      </span>
+    </a>
+  {:else if interactive === 'button'}
+    <button
+      aria-current={ariaCurrent}
+      class="sidenav-row__primary"
+      {disabled}
+      onclick={handlePrimaryClick}
+      type="button"
+    >
+      {#if IconComponent}
+        <span class="sidenav-row__icon">
+          <IconComponent size="1.5rem" />
+        </span>
+      {/if}
+      <span class="sidenav-row__label">
+        {#if labelContent}
+          {@render labelContent(item)}
+        {:else}
+          {label}
+        {/if}
+      </span>
+    </button>
+  {:else}
+    <div class="sidenav-row__primary sidenav-row__primary--static">
+      {#if IconComponent}
+        <span class="sidenav-row__icon">
+          <IconComponent size="1.5rem" />
+        </span>
+      {/if}
+      <span class="sidenav-row__label">
+        {#if labelContent}
+          {@render labelContent(item)}
+        {:else}
+          {label}
+        {/if}
+      </span>
+    </div>
+  {/if}
+
+  {#if trailingContent}
+    <div class="sidenav-row__trailing">
+      {@render trailingContent(item)}
+    </div>
+  {/if}
+
+  {#if expandable && !compact && toggleMode === 'button'}
+    <button
+      aria-expanded={expanded}
+      aria-label={expanded ? `Collapse ${label}` : `Expand ${label}`}
+      class="sidenav-row__toggle"
+      disabled={toggleDisabled}
+      onclick={onToggle}
+      type="button"
+    >
+      <span class:collapsed={!expanded} class="sidenav-row__chevron">
+        <TriangleSmallDownIcon />
+      </span>
+    </button>
+  {:else if expandable && !compact}
+    {#if interactive === 'link' && href}
+      <a
+        aria-label={expanded ? `Collapse ${label}` : `Expand ${label}`}
+        class="sidenav-row__toggle sidenav-row__toggle--indicator"
+        {href}
+        onclick={onLinkClick}
+        tabindex={disabled ? -1 : undefined}
+      >
+        <span class:collapsed={!expanded} class="sidenav-row__chevron">
+          <TriangleSmallDownIcon />
+        </span>
+      </a>
+    {:else if interactive === 'button'}
+      <button
+        aria-label={expanded ? `Collapse ${label}` : `Expand ${label}`}
+        class="sidenav-row__toggle sidenav-row__toggle--indicator"
+        {disabled}
+        onclick={handlePrimaryClick}
+        type="button"
+      >
+        <span class:collapsed={!expanded} class="sidenav-row__chevron">
+          <TriangleSmallDownIcon />
+        </span>
+      </button>
+    {:else}
+      <span
+        aria-hidden="true"
+        class="sidenav-row__toggle sidenav-row__toggle--indicator"
+      >
+        <span class:collapsed={!expanded} class="sidenav-row__chevron">
+          <TriangleSmallDownIcon />
+        </span>
+      </span>
+    {/if}
+  {/if}
+</div>
+
+<style>
+  .sidenav-row {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto auto;
+    gap: 0.375rem;
+    align-items: center;
+    min-height: 2.25rem;
+    border-radius: 0.5rem;
+    background: transparent;
+    color: var(--seblify-sidenav-supporting);
+    transition:
+      background-color 160ms ease,
+      color 160ms ease,
+      gap 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
+  }
+
+  .sidenav-row.current {
+    background: var(--seblify-sidenav-accent-background);
+  }
+
+  .sidenav-row.compact {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .sidenav-row.header {
+    color: var(--seblify-sidenav-supporting);
+  }
+
+  .sidenav-row.muted {
+    color: var(--seblify-sidenav-supporting);
+  }
+
+  .sidenav-row__primary,
+  .sidenav-row__toggle {
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+  }
+
+  .sidenav-row__primary {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    gap: 0.625rem;
+    align-items: center;
+    min-width: 0;
+    min-height: 2.25rem;
+    border-radius: 0.5rem;
+    padding: 0.5rem 0.625rem 0.5rem
+      calc(0.75rem + (var(--sidenav-depth) * 0.875rem));
+    color: inherit;
+    text-align: left;
+    text-decoration: none;
+  }
+
+  .sidenav-row.compact .sidenav-row__primary {
+    grid-template-columns: auto 0;
+    gap: 0;
+    width: 100%;
+    justify-content: center;
+    padding: 0.5rem;
+    place-items: center;
+  }
+
+  .sidenav-row__primary:is(button, a) {
+    cursor: pointer;
+  }
+
+  .sidenav-row:has(.sidenav-row__primary:is(button, a):not(:disabled):not([aria-disabled='true']):hover),
+  .sidenav-row:has(.sidenav-row__toggle:not(:disabled):hover) {
+    background: var(--seblify-sidenav-hover-background);
+  }
+
+  .sidenav-row.current:has(.sidenav-row__primary:is(button, a):not(:disabled):not([aria-disabled='true']):hover),
+  .sidenav-row.current:has(.sidenav-row__toggle:not(:disabled):hover) {
+    background: var(--seblify-sidenav-accent-background);
+  }
+
+  .sidenav-row__primary:is(button, a):not(:disabled):not([aria-disabled='true']):hover,
+  .sidenav-row__toggle:not(:disabled):hover {
+    color: var(--seblify-sidenav-supporting);
+  }
+
+  .sidenav-row.header.expandable:has(.sidenav-row__primary:is(button):not(:disabled):hover),
+  .sidenav-row.header.expandable:has(.sidenav-row__toggle:not(:disabled):hover) {
+    color: var(--seblify-sidenav-supporting);
+  }
+
+  .sidenav-row__primary:disabled,
+  .sidenav-row__primary[aria-disabled='true'] {
+    cursor: default;
+  }
+
+  .sidenav-row__primary--static,
+  .sidenav-row.header .sidenav-row__primary {
+    font-size: 0.75rem;
+    font-weight: 750;
+    text-transform: uppercase;
+  }
+
+  .sidenav-row__icon {
+    display: grid;
+    width: 1.5rem;
+    height: 1.5rem;
+    place-items: center;
+    color: inherit;
+  }
+
+  .sidenav-row.compact .sidenav-row__icon {
+    width: 1.5rem;
+    height: 1.5rem;
+    margin: 0;
+  }
+
+  .sidenav-row__label {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 14rem;
+    opacity: 1;
+    transform: translateX(0);
+    transition:
+      max-width 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
+      opacity 140ms ease,
+      transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
+  }
+
+  .sidenav-row.compact .sidenav-row__label {
+    max-width: 0;
+    opacity: 0;
+    transform: translateX(-0.25rem);
+  }
+
+  .sidenav-row.link-item .sidenav-row__label {
+    color: var(--seblify-sidenav-link-label);
+  }
+
+  .sidenav-row.link-item.current .sidenav-row__label {
+    color: var(--seblify-sidenav-link-label-current);
+  }
+
+  .sidenav-row.link-item.current .sidenav-row__toggle,
+  .sidenav-row.link-item.current .sidenav-row__chevron {
+    color: var(--seblify-sidenav-accent-foreground);
+  }
+
+  .sidenav-row.accent-ancestor .sidenav-row__label {
+    color: var(--seblify-sidenav-accent-foreground);
+  }
+
+  .sidenav-row.accent-ancestor .sidenav-row__icon,
+  .sidenav-row.accent-ancestor .sidenav-row__toggle,
+  .sidenav-row.accent-ancestor .sidenav-row__chevron {
+    color: var(--seblify-sidenav-accent-foreground);
+  }
+
+  .sidenav-row__primary:disabled .sidenav-row__label,
+  .sidenav-row__primary[aria-disabled='true'] .sidenav-row__label,
+  .sidenav-row__primary:disabled .sidenav-row__icon,
+  .sidenav-row__primary[aria-disabled='true'] .sidenav-row__icon,
+  .sidenav-row__toggle:disabled,
+  .sidenav-row__toggle:disabled .sidenav-row__chevron {
+    color: var(--seblify-sidenav-disabled);
+  }
+
+  .sidenav-row__toggle {
+    display: grid;
+    width: 2rem;
+    height: 2rem;
+    margin-right: 0.25rem;
+    place-items: center;
+    border-radius: 0.5rem;
+    cursor: pointer;
+  }
+
+  .sidenav-row__toggle--indicator {
+    cursor: default;
+  }
+
+  .sidenav-row__trailing {
+    display: grid;
+    align-items: center;
+    min-width: 0;
+    max-width: 12rem;
+    opacity: 1;
+    overflow: hidden;
+    transition:
+      max-width 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
+      opacity 140ms ease,
+      transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
+  }
+
+  .sidenav-row.compact .sidenav-row__trailing {
+    max-width: 0;
+    opacity: 0;
+    transform: translateX(-0.25rem);
+    pointer-events: none;
+  }
+
+  .sidenav-row__chevron {
+    display: grid;
+    transition: transform 160ms ease;
+  }
+
+  .sidenav-row__chevron.collapsed {
+    transform: rotate(-90deg);
+  }
+</style>

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

@@ -0,0 +1,30 @@
+import type { Component, Snippet } from 'svelte';
+import type { SidenavItemData } from 'seblify';
+type InteractiveMode = 'static' | 'button' | 'link';
+type Appearance = 'default' | 'header' | 'muted';
+type Props = {
+    item: SidenavItemData;
+    label: string;
+    depth: number;
+    compact?: boolean;
+    icon?: Component;
+    interactive: InteractiveMode;
+    appearance?: Appearance;
+    accentAncestor?: boolean;
+    href?: string;
+    disabled?: boolean;
+    current?: boolean;
+    expandable?: boolean;
+    expanded?: boolean;
+    ariaCurrent?: 'page' | undefined;
+    onPrimary?: () => void;
+    onToggle?: () => void;
+    onLinkClick?: (event: MouseEvent) => void;
+    labelContent?: Snippet<[SidenavItemData]>;
+    trailingContent?: Snippet<[SidenavItemData]>;
+    toggleDisabled?: boolean;
+    toggleMode?: 'button' | 'indicator';
+};
+declare const SidenavItemRow: Component<Props, {}, "">;
+type SidenavItemRow = ReturnType<typeof SidenavItemRow>;
+export default SidenavItemRow;

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

@@ -0,0 +1,29 @@
+import type { Component } from 'svelte';
+export type SidenavIconComponent = Component<{
+    size?: string;
+}>;
+export interface SidenavItemData {
+    id: string;
+    label?: string;
+    href?: string;
+    icon?: SidenavIconComponent;
+    children?: SidenavItemData[];
+    collapsible?: boolean;
+    disabled?: boolean;
+    action?: string;
+    payload?: unknown;
+}
+export interface SidenavActionDetail {
+    id: string;
+    action: string;
+    payload?: unknown;
+    item: SidenavItemData;
+}
+export type SidenavItemKind = 'divider' | 'header' | 'link' | 'action' | 'group' | 'action-group' | 'link-group';
+export declare function hasSidenavChildren(item: SidenavItemData): boolean;
+export declare function getSidenavItemLabel(item: SidenavItemData): string;
+export declare function getSidenavItemKind(item: SidenavItemData): SidenavItemKind;
+export declare function itemMatchesHref(item: SidenavItemData, currentHref: string | undefined): boolean;
+export declare function itemContainsHref(item: SidenavItemData, currentHref: string | undefined): boolean;
+export declare function getDescendantSidenavItemIds(items: SidenavItemData[] | undefined): string[];
+export declare function getSidenavAccentAncestorId(items: SidenavItemData[] | undefined, currentHref: string | undefined): string | undefined;

package/dist/components/framework/navigation/sidebar/sidenav/sidenav.js

@@ -0,0 +1,86 @@
+export function hasSidenavChildren(item) {
+    return Boolean(item.children?.length);
+}
+export function getSidenavItemLabel(item) {
+    if (item.label) {
+        return item.label;
+    }
+    if (item.href || item.action) {
+        return 'Label';
+    }
+    return '';
+}
+export function getSidenavItemKind(item) {
+    const hasChildren = hasSidenavChildren(item);
+    const hasLabelOrIcon = Boolean(item.label || item.icon);
+    if (item.action && hasChildren) {
+        return 'action-group';
+    }
+    if (item.action) {
+        return 'action';
+    }
+    if (item.href && hasChildren) {
+        return 'link-group';
+    }
+    if (hasChildren) {
+        return 'group';
+    }
+    if (item.href) {
+        return 'link';
+    }
+    if (hasLabelOrIcon) {
+        return 'header';
+    }
+    return 'divider';
+}
+export function itemMatchesHref(item, currentHref) {
+    return Boolean(item.href && currentHref && item.href === currentHref);
+}
+export function itemContainsHref(item, currentHref) {
+    if (!currentHref) {
+        return false;
+    }
+    if (itemMatchesHref(item, currentHref)) {
+        return true;
+    }
+    return Boolean(item.children?.some((child) => itemContainsHref(child, currentHref)));
+}
+export function getDescendantSidenavItemIds(items) {
+    if (!items?.length) {
+        return [];
+    }
+    const ids = [];
+    for (const item of items) {
+        ids.push(item.id);
+        ids.push(...getDescendantSidenavItemIds(item.children));
+    }
+    return ids;
+}
+function getSidenavSelectedPath(items, currentHref) {
+    if (!items?.length || !currentHref) {
+        return undefined;
+    }
+    for (const item of items) {
+        if (itemMatchesHref(item, currentHref)) {
+            return [item];
+        }
+        const childPath = getSidenavSelectedPath(item.children, currentHref);
+        if (childPath) {
+            return [item, ...childPath];
+        }
+    }
+    return undefined;
+}
+export function getSidenavAccentAncestorId(items, currentHref) {
+    const path = getSidenavSelectedPath(items, currentHref);
+    if (!path || path.length < 2) {
+        return undefined;
+    }
+    for (const item of path.slice(0, -1)) {
+        const kind = getSidenavItemKind(item);
+        if (kind !== 'header' && kind !== 'divider') {
+            return item.id;
+        }
+    }
+    return undefined;
+}