zdp-design-system 0.43.8

package/dist/components/Skeleton.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+  import type { ZdpSkeletonVariant } from '../progress';
+
+  export let variant: ZdpSkeletonVariant = 'block';
+  export let lines = 1;
+  export let animated = true;
+  export let decorative = true;
+  export let ariaLabel = 'Loading content';
+  export let labelledBy: string | null = null;
+
+  $: lineCount = Math.max(1, Math.min(8, Math.floor(Number.isFinite(lines) ? lines : 1)));
+  $: placeholders = Array.from({ length: variant === 'text' ? lineCount : 1 });
+</script>
+
+<div
+  class={`zdp-skeleton zdp-skeleton--${variant}`}
+  aria-hidden={decorative ? 'true' : undefined}
+  aria-label={!decorative && !labelledBy ? ariaLabel : undefined}
+  aria-labelledby={!decorative ? labelledBy ?? undefined : undefined}
+  data-animated={animated ? 'true' : 'false'}
+  role={decorative ? undefined : 'status'}
+>
+  {#each placeholders as _, index}
+    <span
+      class={`zdp-skeleton__line ${index === placeholders.length - 1 ? 'zdp-skeleton__line--last' : ''}`}
+      aria-hidden="true"
+    ></span>
+  {/each}
+</div>
+
+<style>
+  .zdp-skeleton {
+    --zdp-skeleton-fill: var(--zdp-color-surface-raised);
+    --zdp-skeleton-line: var(--zdp-color-line-subtle);
+
+    box-sizing: border-box;
+    display: grid;
+    gap: var(--zdp-space-2);
+    inline-size: 100%;
+    max-inline-size: 100%;
+    min-width: 0;
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  .zdp-skeleton__line {
+    background: var(--zdp-skeleton-fill);
+    border: var(--zdp-control-border-width) solid var(--zdp-skeleton-line);
+    border-radius: var(--zdp-control-radius);
+    box-sizing: border-box;
+    display: block;
+    inline-size: 100%;
+    min-width: 0;
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  .zdp-skeleton--text .zdp-skeleton__line {
+    block-size: calc(var(--zdp-type-body-small-size) * var(--zdp-type-body-small-line-height));
+  }
+
+  .zdp-skeleton--text .zdp-skeleton__line--last {
+    inline-size: 72%;
+  }
+
+  .zdp-skeleton--block .zdp-skeleton__line {
+    block-size: min(9rem, 28vw);
+  }
+
+  .zdp-skeleton--avatar {
+    inline-size: var(--zdp-control-height-md);
+  }
+
+  .zdp-skeleton--avatar .zdp-skeleton__line {
+    aspect-ratio: 1;
+    border-radius: 50%;
+  }
+
+  .zdp-skeleton[data-animated="false"] .zdp-skeleton__line {
+    opacity: 0.72;
+  }
+</style>

package/dist/components/SkipLink.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  export let href = '#content';
+</script>
+
+<a class="zdp-skip-link" {href}>
+  <slot />
+</a>
+
+<style>
+  .zdp-skip-link {
+    background: var(--zdp-color-focus-surface);
+    border: var(--zdp-control-border-width) solid var(--zdp-color-focus-line);
+    border-radius: var(--zdp-control-radius);
+    color: var(--zdp-color-focus-text);
+    font-family: var(--zdp-font-family-sans);
+    font-size: var(--zdp-type-control-size);
+    font-weight: var(--zdp-font-weight-medium);
+    left: var(--zdp-space-3);
+    line-height: var(--zdp-type-control-line-height);
+    opacity: 0;
+    padding: var(--zdp-space-2) var(--zdp-space-3);
+    pointer-events: none;
+    position: fixed;
+    text-decoration-line: none;
+    top: var(--zdp-space-3);
+    transition:
+      background-color var(--zdp-motion-fast) ease,
+      border-color var(--zdp-motion-fast) ease,
+      color var(--zdp-motion-fast) ease,
+      opacity var(--zdp-motion-fast) ease;
+    z-index: 10000;
+  }
+
+  .zdp-skip-link:focus-visible {
+    opacity: 1;
+    outline: var(--zdp-control-focus-outline-width) solid var(--zdp-color-focus-surface);
+    outline-offset: var(--zdp-control-focus-outline-offset);
+    pointer-events: auto;
+  }
+</style>

package/dist/components/SortHeader.svelte

@@ -0,0 +1,138 @@
+<script lang="ts">
+  import type { ZdpSortDirection } from '../table-tools';
+
+  export let label = 'Sort';
+  export let direction: ZdpSortDirection = 'none';
+  export let disabled = false;
+  export let ariaLabel: string | null = null;
+  export let onSort:
+    | ((event: MouseEvent, nextDirection: Exclude<ZdpSortDirection, 'none'>) => void)
+    | null = null;
+
+  $: normalizedDirection = normalizeDirection(direction);
+  $: nextDirection = getNextDirection(normalizedDirection);
+  $: directionLabel =
+    normalizedDirection === 'ascending'
+      ? 'Ascending'
+      : normalizedDirection === 'descending'
+        ? 'Descending'
+        : 'Not sorted';
+  $: resolvedAriaLabel = ariaLabel ?? `${label} ${directionLabel}`;
+
+  function handleClick(event: MouseEvent): void {
+    if (disabled) {
+      return;
+    }
+
+    onSort?.(event, nextDirection);
+  }
+
+  function normalizeDirection(value: ZdpSortDirection): ZdpSortDirection {
+    if (value === 'ascending' || value === 'descending') {
+      return value;
+    }
+
+    return 'none';
+  }
+
+  function getNextDirection(value: ZdpSortDirection): Exclude<ZdpSortDirection, 'none'> {
+    return value === 'ascending' ? 'descending' : 'ascending';
+  }
+</script>
+
+<button
+  class={`zdp-sort-header zdp-sort-header--${normalizedDirection}`}
+  type="button"
+  aria-label={resolvedAriaLabel}
+  aria-disabled={disabled ? 'true' : undefined}
+  data-sort-direction={normalizedDirection}
+  disabled={disabled}
+  onclick={handleClick}
+>
+  <span class="zdp-sort-header__label"><slot>{label}</slot></span>
+  <span class="zdp-sort-header__mark" aria-hidden="true"></span>
+</button>
+
+<style>
+  .zdp-sort-header {
+    align-items: center;
+    background: transparent;
+    border: var(--zdp-control-border-width) solid transparent;
+    border-radius: var(--zdp-control-radius);
+    box-sizing: border-box;
+    color: inherit;
+    cursor: pointer;
+    display: inline-flex;
+    font-family: var(--zdp-font-family-sans);
+    font-size: inherit;
+    font-weight: inherit;
+    gap: var(--zdp-space-2);
+    justify-content: space-between;
+    line-height: inherit;
+    margin: calc(var(--zdp-space-1) * -1);
+    max-width: 100%;
+    min-block-size: var(--zdp-control-height-sm);
+    min-width: 0;
+    padding: var(--zdp-space-1) var(--zdp-space-2);
+    text-align: start;
+    transition:
+      background-color var(--zdp-motion-fast) ease,
+      border-color var(--zdp-motion-fast) ease,
+      color var(--zdp-motion-fast) ease;
+    -webkit-user-select: none;
+    user-select: none;
+    vertical-align: middle;
+  }
+
+  .zdp-sort-header:hover:not(:disabled) {
+    background: var(--zdp-color-surface-panel);
+    border-color: var(--zdp-color-line-strong);
+    color: var(--zdp-color-ink-strong);
+  }
+
+  .zdp-sort-header: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-sort-header:disabled {
+    cursor: not-allowed;
+    opacity: 0.56;
+  }
+
+  .zdp-sort-header__label {
+    min-width: 0;
+    overflow-wrap: var(--zdp-i18n-overflow-wrap);
+  }
+
+  .zdp-sort-header__mark {
+    align-items: center;
+    color: var(--zdp-color-ink-muted);
+    display: inline-flex;
+    flex: 0 0 auto;
+    font-size: var(--zdp-type-caption-size);
+    justify-content: center;
+    line-height: 1;
+    min-inline-size: 1em;
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  .zdp-sort-header__mark::before {
+    content: '↕';
+  }
+
+  .zdp-sort-header--ascending .zdp-sort-header__mark::before {
+    content: '↑';
+  }
+
+  .zdp-sort-header--descending .zdp-sort-header__mark::before {
+    content: '↓';
+  }
+
+  .zdp-sort-header--ascending .zdp-sort-header__mark,
+  .zdp-sort-header--descending .zdp-sort-header__mark {
+    color: var(--zdp-color-accent-primary-strong);
+  }
+</style>

package/dist/components/Spinner.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+  import type { ZdpProgressTone, ZdpSpinnerSize } from '../progress';
+
+  export let size: ZdpSpinnerSize = 'md';
+  export let tone: ZdpProgressTone = 'primary';
+  export let label = 'Loading';
+  export let decorative = false;
+  export let semanticRole: 'status' | 'img' | null = 'status';
+</script>
+
+<span
+  class={`zdp-spinner zdp-spinner--${tone} zdp-spinner--${size}`}
+  aria-hidden={decorative ? 'true' : undefined}
+  aria-label={decorative ? undefined : label}
+  role={decorative ? undefined : semanticRole ?? undefined}
+>
+  <span class="zdp-spinner__mark" aria-hidden="true"></span>
+</span>
+
+<style>
+  .zdp-spinner {
+    --zdp-spinner-accent: var(--zdp-color-accent-primary);
+
+    align-items: center;
+    box-sizing: border-box;
+    color: var(--zdp-spinner-accent);
+    display: inline-flex;
+    flex: 0 0 auto;
+    justify-content: center;
+    line-height: 1;
+    -webkit-user-select: none;
+    user-select: none;
+    vertical-align: middle;
+  }
+
+  .zdp-spinner__mark {
+    border: var(--zdp-control-border-width) solid var(--zdp-color-line-subtle);
+    border-block-start-color: currentColor;
+    border-inline-end-color: currentColor;
+    border-radius: 50%;
+    box-sizing: border-box;
+    display: block;
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  .zdp-spinner--sm .zdp-spinner__mark {
+    block-size: var(--zdp-control-glyph-sm);
+    inline-size: var(--zdp-control-glyph-sm);
+  }
+
+  .zdp-spinner--md .zdp-spinner__mark {
+    block-size: var(--zdp-control-glyph-md);
+    inline-size: var(--zdp-control-glyph-md);
+  }
+
+  .zdp-spinner--lg .zdp-spinner__mark {
+    block-size: var(--zdp-control-height-sm);
+    inline-size: var(--zdp-control-height-sm);
+  }
+
+  .zdp-spinner--neutral {
+    --zdp-spinner-accent: var(--zdp-color-line-strong);
+  }
+
+  .zdp-spinner--primary {
+    --zdp-spinner-accent: var(--zdp-color-accent-primary-strong);
+  }
+
+  .zdp-spinner--success {
+    --zdp-spinner-accent: var(--zdp-color-accent-success);
+  }
+
+  .zdp-spinner--warning {
+    --zdp-spinner-accent: var(--zdp-color-accent-warning);
+  }
+
+  .zdp-spinner--danger {
+    --zdp-spinner-accent: var(--zdp-color-accent-danger);
+  }
+
+</style>

package/dist/components/Stack.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+  export let as: 'div' | 'section' | 'article' | 'nav' | 'header' | 'footer' = 'div';
+  export let gap: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';
+  export let align: 'stretch' | 'start' | 'center' | 'end' = 'stretch';
+  export let labelledBy: string | null = null;
+
+  $: labelledGroupRole = as === 'div' && labelledBy ? 'group' : undefined;
+</script>
+
+<svelte:element
+  this={as}
+  class={`zdp-stack zdp-stack--gap-${gap} zdp-stack--align-${align}`}
+  role={labelledGroupRole}
+  aria-labelledby={labelledBy ?? undefined}
+>
+  <slot />
+</svelte:element>
+
+<style>
+  .zdp-stack {
+    align-items: stretch;
+    display: grid;
+    gap: var(--zdp-space-4);
+    min-width: 0;
+  }
+
+  .zdp-stack--gap-xs {
+    gap: var(--zdp-space-1);
+  }
+
+  .zdp-stack--gap-sm {
+    gap: var(--zdp-space-2);
+  }
+
+  .zdp-stack--gap-md {
+    gap: var(--zdp-space-4);
+  }
+
+  .zdp-stack--gap-lg {
+    gap: var(--zdp-space-6);
+  }
+
+  .zdp-stack--gap-xl {
+    gap: var(--zdp-space-8);
+  }
+
+  .zdp-stack--align-stretch {
+    align-items: stretch;
+  }
+
+  .zdp-stack--align-start {
+    align-items: start;
+  }
+
+  .zdp-stack--align-center {
+    align-items: center;
+  }
+
+  .zdp-stack--align-end {
+    align-items: end;
+  }
+</style>

package/dist/components/StatusToast.svelte

@@ -0,0 +1,133 @@
+<script lang="ts">
+  import Toast from './Toast.svelte';
+  import type { ZdpStatusToastItem } from '../toast';
+
+  export let items: readonly ZdpStatusToastItem[] = [];
+  export let placement:
+    | 'inline'
+    | 'top-start'
+    | 'top-end'
+    | 'bottom-start'
+    | 'bottom-end' = 'bottom-end';
+  export let idPrefix = 'zdp-status-toast';
+  export let ariaLabel = 'Status notifications';
+  export let labelledBy: string | null = null;
+  export let onDismiss: ((event: MouseEvent, item: ZdpStatusToastItem) => void) | null = null;
+
+  function titleId(item: ZdpStatusToastItem): string | null {
+    return item.title ? `${idPrefix}-${item.id}-title` : null;
+  }
+
+  function messageId(item: ZdpStatusToastItem): string {
+    return `${idPrefix}-${item.id}-message`;
+  }
+
+  function handleDismiss(event: MouseEvent, item: ZdpStatusToastItem): void {
+    onDismiss?.(event, item);
+  }
+
+  function handleAction(event: MouseEvent, item: ZdpStatusToastItem): void {
+    item.onclick?.(event, item);
+  }
+
+  function resolvedRel(item: ZdpStatusToastItem): string | undefined {
+    return item.target === '_blank' ? item.rel ?? 'noopener noreferrer' : item.rel;
+  }
+</script>
+
+<div
+  class={`zdp-status-toast zdp-status-toast--${placement}`}
+  aria-label={labelledBy ? undefined : ariaLabel}
+  aria-labelledby={labelledBy ?? undefined}
+  role="group"
+>
+  {#each items as item (item.id)}
+    <Toast
+      tone={item.tone ?? 'neutral'}
+      labelledBy={titleId(item)}
+      describedBy={messageId(item)}
+      dismissLabel={item.dismissLabel ?? 'Dismiss notification'}
+      onClose={onDismiss ? (event) => handleDismiss(event, item) : null}
+    >
+      {#if item.title}
+        <strong class="zdp-toast__title" id={titleId(item) ?? undefined}>{item.title}</strong>
+      {/if}
+      <p class="zdp-toast__message" id={messageId(item)}>{item.message}</p>
+      {#if item.actionLabel}
+        {#if item.href}
+          <a
+            class="zdp-toast__action"
+            href={item.href}
+            target={item.target}
+            rel={resolvedRel(item)}
+            onclick={item.onclick ? (event) => handleAction(event, item) : undefined}
+          >
+            {item.actionLabel}
+          </a>
+        {:else if item.onclick}
+          <button class="zdp-toast__action" type="button" onclick={(event) => handleAction(event, item)}>
+            {item.actionLabel}
+          </button>
+        {/if}
+      {/if}
+    </Toast>
+  {/each}
+</div>
+
+<style>
+  .zdp-status-toast {
+    box-sizing: border-box;
+    display: grid;
+    gap: var(--zdp-space-3);
+    inline-size: min(28rem, calc(100vw - var(--zdp-space-6)));
+    max-inline-size: 100%;
+    pointer-events: none;
+    z-index: 50;
+  }
+
+  .zdp-status-toast :global(.zdp-toast) {
+    pointer-events: auto;
+  }
+
+  .zdp-status-toast--inline {
+    inline-size: min(100%, 28rem);
+    position: static;
+  }
+
+  .zdp-status-toast--top-start,
+  .zdp-status-toast--top-end,
+  .zdp-status-toast--bottom-start,
+  .zdp-status-toast--bottom-end {
+    position: fixed;
+  }
+
+  .zdp-status-toast--top-start {
+    left: var(--zdp-space-4);
+    top: var(--zdp-space-4);
+  }
+
+  .zdp-status-toast--top-end {
+    right: var(--zdp-space-4);
+    top: var(--zdp-space-4);
+  }
+
+  .zdp-status-toast--bottom-start {
+    bottom: var(--zdp-space-4);
+    left: var(--zdp-space-4);
+  }
+
+  .zdp-status-toast--bottom-end {
+    bottom: var(--zdp-space-4);
+    right: var(--zdp-space-4);
+  }
+
+  @media (max-width: 42rem) {
+    .zdp-status-toast--top-start,
+    .zdp-status-toast--top-end,
+    .zdp-status-toast--bottom-start,
+    .zdp-status-toast--bottom-end {
+      left: var(--zdp-space-3);
+      right: var(--zdp-space-3);
+    }
+  }
+</style>

package/dist/components/Surface.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  export let tone: 'panel' | 'raised' | 'inverse' = 'panel';
+  export let padding: 'none' | 'sm' | 'md' | 'lg' = 'md';
+  export let labelledBy: string | null = null;
+</script>
+
+<section
+  class={`zdp-surface zdp-surface--${tone} zdp-surface--padding-${padding}`}
+  aria-labelledby={labelledBy ?? undefined}
+>
+  <slot />
+</section>
+
+<style>
+  .zdp-surface {
+    border: 1px solid var(--zdp-color-line-subtle);
+    border-radius: var(--zdp-radius-lg);
+    color: var(--zdp-color-ink-normal);
+  }
+
+  .zdp-surface--panel {
+    background: var(--zdp-color-surface-panel);
+  }
+
+  :global([data-zdp-theme="dark"]) .zdp-surface--panel {
+    background: var(--zdp-color-surface-panel);
+  }
+
+  .zdp-surface--raised {
+    background: var(--zdp-color-surface-raised);
+  }
+
+  .zdp-surface--inverse {
+    background: var(--zdp-color-surface-inverse);
+    color: var(--zdp-color-ink-inverse);
+  }
+
+  .zdp-surface--padding-none {
+    padding: 0;
+  }
+
+  .zdp-surface--padding-sm {
+    padding: var(--zdp-space-3);
+  }
+
+  .zdp-surface--padding-md {
+    padding: var(--zdp-space-4);
+  }
+
+  .zdp-surface--padding-lg {
+    padding: var(--zdp-space-6);
+  }
+</style>