zdp-design-system 0.43.8

package/dist/components/Pagination.svelte

@@ -0,0 +1,297 @@
+<script lang="ts">
+  import type { ZdpPaginationItem } from '../pagination';
+
+  type ZdpPaginationRenderItem =
+    | (Extract<ZdpPaginationItem, { readonly type: 'page' }> & {
+        readonly href: string | null;
+      })
+    | Extract<ZdpPaginationItem, { readonly type: 'ellipsis' }>;
+
+  export let currentPage = 1;
+  export let totalPages = 1;
+  export let siblingCount = 1;
+  export let ariaLabel = 'Pagination';
+  export let previousLabel = 'Previous';
+  export let nextLabel = 'Next';
+  export let pageLabel: (page: number) => string = (page) => `${page} page`;
+  export let currentLabel: (page: number) => string = (page) => `Current page, page ${page}`;
+  export let hrefForPage: ((page: number) => string | null) | null = null;
+  export let onPageChange: ((event: MouseEvent, page: number) => void) | null = null;
+
+  $: normalizedTotalPages = normalizePositiveInteger(totalPages);
+  $: activePage = clampPage(currentPage, normalizedTotalPages);
+  $: safeSiblingCount = clampSiblingCount(siblingCount);
+  $: paginationItems = toRenderItems(
+    buildPaginationItems(activePage, normalizedTotalPages, safeSiblingCount)
+  );
+  $: previousPage = Math.max(1, activePage - 1);
+  $: nextPage = Math.min(normalizedTotalPages, activePage + 1);
+  $: previousHref = activePage > 1 ? hrefFor(previousPage) : null;
+  $: nextHref = activePage < normalizedTotalPages ? hrefFor(nextPage) : null;
+  $: hasPrevious = activePage > 1;
+  $: hasNext = activePage < normalizedTotalPages;
+
+  function normalizeInteger(value: number, fallback: number): number {
+    return Number.isFinite(value) ? Math.floor(value) : fallback;
+  }
+
+  function normalizePositiveInteger(value: number): number {
+    return Math.max(1, normalizeInteger(value, 1));
+  }
+
+  function clampPage(value: number, total: number): number {
+    return Math.min(total, Math.max(1, normalizeInteger(value, 1)));
+  }
+
+  function clampSiblingCount(value: number): number {
+    return Math.min(3, Math.max(0, normalizeInteger(value, 1)));
+  }
+
+  function hrefFor(page: number): string | null {
+    return hrefForPage?.(page) ?? null;
+  }
+
+  function toRenderItems(items: readonly ZdpPaginationItem[]): readonly ZdpPaginationRenderItem[] {
+    return items.map((item) => (item.type === 'page' ? { ...item, href: hrefFor(item.page) } : item));
+  }
+
+  function buildPaginationItems(
+    current: number,
+    total: number,
+    siblings: number
+  ): readonly ZdpPaginationItem[] {
+    const pages = new Set<number>([1, total]);
+
+    for (let page = current - siblings; page <= current + siblings; page += 1) {
+      if (page >= 1 && page <= total) {
+        pages.add(page);
+      }
+    }
+
+    const sortedPages = [...pages].sort((left, right) => left - right);
+    const items: ZdpPaginationItem[] = [];
+    let previousPageNumber = 0;
+
+    for (const page of sortedPages) {
+      if (previousPageNumber > 0 && page - previousPageNumber > 1) {
+        if (page - previousPageNumber === 2) {
+          const adjacentPage = previousPageNumber + 1;
+          items.push({
+            type: 'page',
+            page: adjacentPage,
+            key: `page-${adjacentPage}`
+          });
+        } else {
+          items.push({
+            type: 'ellipsis',
+            key: `ellipsis-${previousPageNumber}-${page}`
+          });
+        }
+      }
+
+      items.push({
+        type: 'page',
+        page,
+        key: `page-${page}`
+      });
+      previousPageNumber = page;
+    }
+
+    return items;
+  }
+
+  function handlePageClick(event: MouseEvent, page: number): void {
+    onPageChange?.(event, page);
+  }
+
+  function labelForPage(page: number): string {
+    return page === activePage ? currentLabel(page) : pageLabel(page);
+  }
+</script>
+
+<nav class="zdp-pagination" aria-label={ariaLabel}>
+  <ol class="zdp-pagination__list">
+    <li class="zdp-pagination__item">
+      {#if previousHref}
+        <a
+          class="zdp-pagination__link zdp-pagination__link--control"
+          href={previousHref}
+          aria-label={previousLabel}
+          onclick={(event) => handlePageClick(event, previousPage)}
+        >
+          {previousLabel}
+        </a>
+      {:else}
+        <button
+          class="zdp-pagination__link zdp-pagination__link--control"
+          type="button"
+          aria-label={previousLabel}
+          disabled={!hasPrevious}
+          onclick={(event) => handlePageClick(event, previousPage)}
+        >
+          {previousLabel}
+        </button>
+      {/if}
+    </li>
+
+    {#each paginationItems as item (item.key)}
+      <li class="zdp-pagination__item">
+        {#if item.type === 'ellipsis'}
+          <span class="zdp-pagination__ellipsis" aria-hidden="true">...</span>
+        {:else if item.href && item.page !== activePage}
+          <a
+            class="zdp-pagination__link"
+            href={item.href}
+            aria-label={labelForPage(item.page)}
+            aria-current={item.page === activePage ? 'page' : undefined}
+            onclick={(event) => handlePageClick(event, item.page)}
+          >
+            {item.page}
+          </a>
+        {:else}
+          <button
+            class="zdp-pagination__link"
+            type="button"
+            aria-label={labelForPage(item.page)}
+            aria-current={item.page === activePage ? 'page' : undefined}
+            disabled={item.page === activePage}
+            onclick={(event) => handlePageClick(event, item.page)}
+          >
+            {item.page}
+          </button>
+        {/if}
+      </li>
+    {/each}
+
+    <li class="zdp-pagination__item">
+      {#if nextHref}
+        <a
+          class="zdp-pagination__link zdp-pagination__link--control"
+          href={nextHref}
+          aria-label={nextLabel}
+          onclick={(event) => handlePageClick(event, nextPage)}
+        >
+          {nextLabel}
+        </a>
+      {:else}
+        <button
+          class="zdp-pagination__link zdp-pagination__link--control"
+          type="button"
+          aria-label={nextLabel}
+          disabled={!hasNext}
+          onclick={(event) => handlePageClick(event, nextPage)}
+        >
+          {nextLabel}
+        </button>
+      {/if}
+    </li>
+  </ol>
+</nav>
+
+<style>
+  .zdp-pagination {
+    --zdp-pagination-focus-bleed: calc(var(--zdp-control-focus-outline-width) + var(--zdp-control-focus-outline-offset));
+
+    color: var(--zdp-color-ink-normal);
+    font-family: var(--zdp-font-family-sans);
+    font-size: var(--zdp-type-control-size);
+    line-height: var(--zdp-type-control-line-height);
+    max-width: 100%;
+    min-width: 0;
+    overscroll-behavior-inline: contain;
+    overflow-x: auto;
+    padding-block: var(--zdp-pagination-focus-bleed);
+    padding-inline: var(--zdp-pagination-focus-bleed);
+    scrollbar-gutter: stable;
+    scroll-padding-inline: var(--zdp-pagination-focus-bleed);
+    -webkit-overflow-scrolling: touch;
+    touch-action: pan-x pan-y;
+  }
+
+  .zdp-pagination__list {
+    align-items: center;
+    display: flex;
+    flex-wrap: nowrap;
+    gap: var(--zdp-space-2);
+    list-style: none;
+    margin: 0;
+    min-width: 0;
+    padding: 0;
+    width: max-content;
+  }
+
+  .zdp-pagination__item {
+    display: inline-flex;
+    flex: 0 0 auto;
+    min-width: 0;
+  }
+
+  .zdp-pagination__link,
+  .zdp-pagination__ellipsis {
+    align-items: center;
+    border: var(--zdp-control-border-width) solid transparent;
+    border-radius: var(--zdp-control-radius);
+    box-sizing: border-box;
+    display: inline-flex;
+    font-family: var(--zdp-font-family-sans);
+    font-size: var(--zdp-type-control-size);
+    font-weight: var(--zdp-font-weight-medium);
+    justify-content: center;
+    line-height: var(--zdp-type-control-line-height);
+    min-block-size: var(--zdp-control-height-sm);
+    min-inline-size: var(--zdp-control-height-sm);
+    padding: var(--zdp-space-1) var(--zdp-space-2);
+    text-align: center;
+    white-space: nowrap;
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  .zdp-pagination__link {
+    background: var(--zdp-color-surface-panel);
+    border-color: var(--zdp-color-line-subtle);
+    color: var(--zdp-color-ink-normal);
+    cursor: pointer;
+    text-decoration-line: none;
+    transition:
+      background-color var(--zdp-motion-fast) ease,
+      border-color var(--zdp-motion-fast) ease,
+      color var(--zdp-motion-fast) ease;
+  }
+
+  .zdp-pagination__link--control {
+    padding-inline: var(--zdp-space-3);
+  }
+
+  .zdp-pagination__link:hover:not(:disabled):not([aria-current='page']) {
+    background: var(--zdp-color-surface-raised);
+    border-color: var(--zdp-color-line-strong);
+    color: var(--zdp-color-ink-strong);
+  }
+
+  .zdp-pagination__link:focus-visible {
+    border-color: var(--zdp-color-focus-line);
+    outline: var(--zdp-control-focus-outline-width) solid var(--zdp-color-focus-surface);
+    outline-offset: var(--zdp-control-focus-outline-offset);
+  }
+
+  .zdp-pagination__link[aria-current='page'] {
+    background: var(--zdp-color-accent-primary-soft);
+    border-color: var(--zdp-color-accent-primary-strong);
+    color: var(--zdp-color-ink-strong);
+    cursor: default;
+  }
+
+  .zdp-pagination__link:disabled {
+    cursor: not-allowed;
+    opacity: 0.56;
+  }
+
+  .zdp-pagination__link[aria-current='page']:disabled {
+    opacity: 1;
+  }
+
+  .zdp-pagination__ellipsis {
+    color: var(--zdp-color-ink-muted);
+  }
+</style>

package/dist/components/Popover.svelte

@@ -0,0 +1,208 @@
+<script lang="ts" context="module">
+  let nextPopoverInstanceId = 0;
+</script>
+
+<script lang="ts">
+  export let open = false;
+  export let idPrefix: string | null = null;
+  export let placement: 'top' | 'right' | 'bottom' | 'left' = 'bottom';
+  export let align: 'start' | 'center' | 'end' = 'start';
+  export let labelledBy: string | null = null;
+  export let describedBy: string | null = null;
+  export let role: 'dialog' | 'group' | null = 'dialog';
+  export let closeOnEscape = true;
+  export let closeOnOutside = true;
+  export let onOpenChange: ((open: boolean) => void) | null = null;
+
+  const fallbackIdPrefix = `zdp-popover-${++nextPopoverInstanceId}`;
+
+  let rootElement: HTMLElement | null = null;
+  let previousFocusElement: HTMLElement | null = null;
+  let knownOpenState = false;
+  let restoreFocusAfterClose = false;
+
+  $: resolvedIdPrefix = toDomId(idPrefix ?? fallbackIdPrefix);
+  $: triggerId = `${resolvedIdPrefix}-trigger`;
+  $: panelId = `${resolvedIdPrefix}-panel`;
+
+  $: if (open !== knownOpenState) {
+    knownOpenState = open;
+
+    if (open) {
+      capturePreviousFocus();
+    } else if (restoreFocusAfterClose) {
+      restorePreviousFocus();
+      restoreFocusAfterClose = false;
+    }
+  }
+
+  function setOpen(nextOpen: boolean): void {
+    if (open === nextOpen) {
+      return;
+    }
+
+    open = nextOpen;
+    onOpenChange?.(nextOpen);
+  }
+
+  function toggle(): void {
+    if (open) {
+      close(false);
+      return;
+    }
+
+    setOpen(true);
+  }
+
+  function close(restoreFocus = true): void {
+    restoreFocusAfterClose = restoreFocus;
+    setOpen(false);
+  }
+
+  function capturePreviousFocus(): void {
+    if (typeof document === 'undefined') {
+      return;
+    }
+
+    const activeElement = document.activeElement;
+    previousFocusElement = activeElement instanceof HTMLElement ? activeElement : null;
+  }
+
+  function restorePreviousFocus(): void {
+    if (typeof document === 'undefined') {
+      return;
+    }
+
+    if (previousFocusElement !== null && document.contains(previousFocusElement)) {
+      previousFocusElement.focus();
+    }
+
+    previousFocusElement = null;
+  }
+
+  function handleDocumentClick(event: MouseEvent): void {
+    if (!open || !closeOnOutside || rootElement?.contains(event.target as Node)) {
+      return;
+    }
+
+    close(false);
+  }
+
+  function handleDocumentKeydown(event: KeyboardEvent): void {
+    if (open && event.key === 'Escape' && closeOnEscape) {
+      event.preventDefault();
+      close();
+    }
+  }
+
+  function toDomId(id: string): string {
+    return id.trim().replace(/[^a-zA-Z0-9_-]+/g, '-') || 'popover';
+  }
+</script>
+
+<svelte:document onclick={handleDocumentClick} onkeydown={handleDocumentKeydown} />
+
+<span
+  class={`zdp-popover zdp-popover--${placement} zdp-popover--align-${align}`}
+  data-open={open ? 'true' : 'false'}
+  bind:this={rootElement}
+>
+  <span class="zdp-popover__trigger" id={triggerId}>
+    <slot name="trigger" open={open} toggle={toggle} close={close} panelId={panelId} triggerId={triggerId} />
+  </span>
+  {#if open}
+    <div
+      class="zdp-popover__panel"
+      id={panelId}
+      role={role ?? undefined}
+      aria-labelledby={labelledBy ?? triggerId}
+      aria-describedby={describedBy ?? undefined}
+      tabindex="-1"
+    >
+      <slot open={open} close={close} panelId={panelId} triggerId={triggerId} />
+    </div>
+  {/if}
+</span>
+
+<style>
+  .zdp-popover {
+    display: inline-flex;
+    min-width: 0;
+    position: relative;
+    vertical-align: middle;
+  }
+
+  .zdp-popover__trigger {
+    display: inline-flex;
+    min-width: 0;
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  .zdp-popover__panel {
+    background: var(--zdp-color-surface-panel);
+    border: var(--zdp-control-border-width) solid var(--zdp-color-line-strong);
+    border-radius: var(--zdp-control-radius);
+    color: var(--zdp-color-ink-normal);
+    display: grid;
+    font-family: var(--zdp-font-family-sans);
+    gap: var(--zdp-space-3);
+    inline-size: max-content;
+    max-block-size: min(24rem, calc(100vh - var(--zdp-space-8)));
+    max-inline-size: min(22rem, calc(100vw - var(--zdp-space-6)));
+    min-inline-size: 12rem;
+    overflow: auto;
+    padding: var(--zdp-space-3);
+    position: absolute;
+    z-index: 40;
+  }
+
+  .zdp-popover__panel:focus-visible {
+    border-color: var(--zdp-color-focus-line);
+    outline: var(--zdp-control-focus-outline-width) solid var(--zdp-color-focus-surface);
+    outline-offset: var(--zdp-control-focus-outline-offset);
+  }
+
+  .zdp-popover--top .zdp-popover__panel {
+    bottom: calc(100% + var(--zdp-space-2));
+  }
+
+  .zdp-popover--right .zdp-popover__panel {
+    left: calc(100% + var(--zdp-space-2));
+    top: 0;
+  }
+
+  .zdp-popover--bottom .zdp-popover__panel {
+    top: calc(100% + var(--zdp-space-2));
+  }
+
+  .zdp-popover--left .zdp-popover__panel {
+    right: calc(100% + var(--zdp-space-2));
+    top: 0;
+  }
+
+  .zdp-popover--align-start .zdp-popover__panel {
+    left: 0;
+  }
+
+  .zdp-popover--align-center .zdp-popover__panel {
+    left: 50%;
+    translate: -50% 0;
+  }
+
+  .zdp-popover--align-end .zdp-popover__panel {
+    right: 0;
+  }
+
+  .zdp-popover--right.zdp-popover--align-end .zdp-popover__panel,
+  .zdp-popover--left.zdp-popover--align-end .zdp-popover__panel {
+    bottom: 0;
+    top: auto;
+  }
+
+  .zdp-popover--right.zdp-popover--align-center .zdp-popover__panel,
+  .zdp-popover--left.zdp-popover--align-center .zdp-popover__panel {
+    top: 50%;
+    translate: 0 -50%;
+  }
+</style>

package/dist/components/Progress.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">
+  import type { ZdpProgressSize, ZdpProgressTone } from '../progress';
+
+  export let value: number | null = null;
+  export let min = 0;
+  export let max = 100;
+  export let tone: ZdpProgressTone = 'primary';
+  export let size: ZdpProgressSize = 'md';
+  export let ariaLabel = 'Progress';
+  export let labelledBy: string | null = null;
+  export let describedBy: string | null = null;
+  export let valueText: string | null = null;
+
+  $: hasRange = Number.isFinite(min) && Number.isFinite(max) && max > min;
+  $: hasValue = value !== null && Number.isFinite(value) && hasRange;
+  $: clampedValue = hasValue ? Math.min(max, Math.max(min, value ?? min)) : min;
+  $: progressPercent = hasRange ? ((clampedValue - min) / (max - min)) * 100 : 0;
+  $: progressStyle = `--zdp-progress-value: ${progressPercent}%;`;
+</script>
+
+<div
+  class={`zdp-progress zdp-progress--${tone} zdp-progress--${size}`}
+  aria-label={labelledBy ? undefined : ariaLabel}
+  aria-labelledby={labelledBy ?? undefined}
+  aria-describedby={describedBy ?? undefined}
+  aria-valuemin={hasRange ? min : undefined}
+  aria-valuemax={hasRange ? max : undefined}
+  aria-valuenow={hasValue ? clampedValue : undefined}
+  aria-valuetext={valueText ?? undefined}
+  data-indeterminate={hasValue ? undefined : 'true'}
+  role="progressbar"
+  style={progressStyle}
+>
+  <span class="zdp-progress__track" aria-hidden="true">
+    <span class="zdp-progress__bar"></span>
+  </span>
+</div>
+
+<style>
+  .zdp-progress {
+    --zdp-progress-accent: var(--zdp-color-accent-primary);
+    --zdp-progress-value: 0%;
+
+    box-sizing: border-box;
+    display: grid;
+    inline-size: min(100%, 28rem);
+    min-width: 0;
+  }
+
+  .zdp-progress__track {
+    background: var(--zdp-color-surface-raised);
+    border: var(--zdp-control-border-width) solid var(--zdp-color-line-subtle);
+    border-radius: var(--zdp-control-radius);
+    box-sizing: border-box;
+    display: block;
+    inline-size: 100%;
+    overflow: hidden;
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  .zdp-progress--sm .zdp-progress__track {
+    block-size: var(--zdp-space-2);
+  }
+
+  .zdp-progress--md .zdp-progress__track {
+    block-size: var(--zdp-space-3);
+  }
+
+  .zdp-progress__bar {
+    background: var(--zdp-progress-accent);
+    block-size: 100%;
+    display: block;
+    inline-size: var(--zdp-progress-value);
+    min-inline-size: 0;
+    transition: inline-size var(--zdp-motion-fast) ease;
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  .zdp-progress[data-indeterminate="true"] .zdp-progress__bar {
+    inline-size: 100%;
+    opacity: 0.64;
+  }
+
+  .zdp-progress--neutral {
+    --zdp-progress-accent: var(--zdp-color-line-strong);
+  }
+
+  .zdp-progress--primary {
+    --zdp-progress-accent: var(--zdp-color-accent-primary);
+  }
+
+  .zdp-progress--success {
+    --zdp-progress-accent: var(--zdp-color-accent-success);
+  }
+
+  .zdp-progress--warning {
+    --zdp-progress-accent: var(--zdp-color-accent-warning);
+  }
+
+  .zdp-progress--danger {
+    --zdp-progress-accent: var(--zdp-color-accent-danger);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .zdp-progress__bar {
+      transition: none;
+    }
+  }
+</style>