zdp-design-system 0.43.8

package/dist/components/Dialog.svelte

@@ -0,0 +1,303 @@
+<script lang="ts">
+  import { onDestroy, tick } from 'svelte';
+  import { isZdpFocusableElement, zdpFocusableSelector } from '../focusable';
+  import { createZdpModalLayer } from '../modal-layer';
+
+  export let open = false;
+  export let id: string | null = null;
+  export let labelledBy: string;
+  export let describedBy: string | null = null;
+  export let size: 'sm' | 'md' | 'lg' = 'md';
+  export let closeLabel = 'Close';
+  export let closeOnEscape = true;
+  export let closeOnBackdrop = true;
+  export let onClose: (() => void) | null = null;
+
+  let panelElement: HTMLElement | null = null;
+  let layerElement: HTMLElement | null = null;
+  let previousFocusElement: HTMLElement | null = null;
+  let knownOpenState = false;
+  const modalLayer = createZdpModalLayer();
+
+  $: modalLayer.setActive(open, layerElement);
+
+  onDestroy(() => {
+    modalLayer.destroy();
+  });
+
+  $: if (open !== knownOpenState) {
+    knownOpenState = open;
+
+    if (open) {
+      void handleDialogOpened();
+    } else {
+      restorePreviousFocus();
+    }
+  }
+
+  async function handleDialogOpened(): Promise<void> {
+    if (typeof document === 'undefined') {
+      return;
+    }
+
+    const activeElement = document.activeElement;
+    previousFocusElement = activeElement instanceof HTMLElement ? activeElement : null;
+
+    await tick();
+
+    const firstElement = getFocusableElements()[0] ?? panelElement;
+    firstElement?.focus();
+  }
+
+  function restorePreviousFocus(): void {
+    if (typeof document === 'undefined') {
+      return;
+    }
+
+    if (previousFocusElement !== null && document.contains(previousFocusElement)) {
+      previousFocusElement.focus();
+    }
+
+    previousFocusElement = null;
+  }
+
+  function requestClose(): void {
+    open = false;
+    onClose?.();
+  }
+
+  function handleBackdropClick(): void {
+    if (closeOnBackdrop) {
+      requestClose();
+    }
+  }
+
+  function handleKeydown(event: KeyboardEvent): void {
+    if (event.key === 'Escape' && closeOnEscape) {
+      event.preventDefault();
+      requestClose();
+      return;
+    }
+
+    if (event.key !== 'Tab') {
+      return;
+    }
+
+    const focusableElements = getFocusableElements();
+
+    if (focusableElements.length === 0) {
+      event.preventDefault();
+      panelElement?.focus();
+      return;
+    }
+
+    const firstElement = focusableElements[0];
+    const lastElement = focusableElements[focusableElements.length - 1];
+
+    if (event.shiftKey && document.activeElement === firstElement) {
+      event.preventDefault();
+      lastElement.focus();
+      return;
+    }
+
+    if (!event.shiftKey && document.activeElement === lastElement) {
+      event.preventDefault();
+      firstElement.focus();
+    }
+  }
+
+  function getFocusableElements(): HTMLElement[] {
+    if (panelElement === null) {
+      return [];
+    }
+
+    return Array.from(panelElement.querySelectorAll<HTMLElement>(zdpFocusableSelector)).filter(
+      isZdpFocusableElement
+    );
+  }
+</script>
+
+{#if open}
+  <div class="zdp-dialog" bind:this={layerElement}>
+    <button
+      class="zdp-dialog__backdrop"
+      type="button"
+      aria-label={closeLabel}
+      tabindex="-1"
+      onclick={handleBackdropClick}
+    ></button>
+    <div
+      class={`zdp-dialog__panel zdp-dialog__panel--${size}`}
+      id={id ?? undefined}
+      bind:this={panelElement}
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby={labelledBy}
+      aria-describedby={describedBy ?? undefined}
+      tabindex="-1"
+      onkeydown={handleKeydown}
+    >
+      <header class="zdp-dialog__header">
+        <div class="zdp-dialog__title">
+          <slot name="title" />
+        </div>
+        <button class="zdp-dialog__close" type="button" aria-label={closeLabel} onclick={requestClose}>
+          <span aria-hidden="true">×</span>
+        </button>
+      </header>
+      <div class="zdp-dialog__body">
+        <slot />
+      </div>
+      <div class="zdp-dialog__footer">
+        <slot name="footer" />
+      </div>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .zdp-dialog {
+    align-items: center;
+    box-sizing: border-box;
+    display: grid;
+    inset: 0;
+    justify-items: center;
+    padding: var(--zdp-space-4);
+    position: fixed;
+    z-index: 1000;
+  }
+
+  .zdp-dialog__backdrop {
+    background: rgb(47 36 24 / 0.42);
+    border: 0;
+    cursor: pointer;
+    inset: 0;
+    margin: 0;
+    padding: 0;
+    position: fixed;
+  }
+
+  :global([data-zdp-theme="dark"]) .zdp-dialog__backdrop {
+    background: rgb(10 8 5 / 0.72);
+  }
+
+  .zdp-dialog__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);
+    box-sizing: border-box;
+    color: var(--zdp-color-ink-normal);
+    display: grid;
+    gap: var(--zdp-space-4);
+    max-height: min(42rem, calc(100vh - var(--zdp-space-8)));
+    min-width: 0;
+    overflow: auto;
+    padding: var(--zdp-space-5);
+    position: relative;
+    width: min(100%, 34rem);
+  }
+
+  .zdp-dialog__panel--sm {
+    width: min(100%, 26rem);
+  }
+
+  .zdp-dialog__panel--md {
+    width: min(100%, 34rem);
+  }
+
+  .zdp-dialog__panel--lg {
+    width: min(100%, 46rem);
+  }
+
+  .zdp-dialog__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-dialog__header {
+    align-items: start;
+    display: grid;
+    gap: var(--zdp-space-3);
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+
+  .zdp-dialog__title {
+    color: var(--zdp-color-ink-strong);
+    display: grid;
+    gap: var(--zdp-space-1);
+    min-width: 0;
+  }
+
+  .zdp-dialog__title :global(*) {
+    margin: 0;
+  }
+
+  .zdp-dialog__body {
+    color: var(--zdp-color-ink-normal);
+    display: grid;
+    gap: var(--zdp-space-3);
+    line-height: var(--zdp-type-body-line-height);
+    min-width: 0;
+  }
+
+  .zdp-dialog__body :global(*) {
+    margin-bottom: 0;
+    margin-top: 0;
+  }
+
+  .zdp-dialog__footer {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--zdp-space-3);
+    justify-content: end;
+    min-width: 0;
+  }
+
+  .zdp-dialog__close {
+    align-items: center;
+    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);
+    cursor: pointer;
+    display: inline-flex;
+    font-family: var(--zdp-font-family-sans);
+    font-size: var(--zdp-type-control-size);
+    height: var(--zdp-control-icon-sm);
+    justify-content: center;
+    line-height: 1;
+    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;
+    width: var(--zdp-control-icon-sm);
+  }
+
+  .zdp-dialog__close:hover:not(:disabled) {
+    background: var(--zdp-color-surface-raised);
+    border-color: var(--zdp-color-line-strong);
+    color: var(--zdp-color-ink-strong);
+  }
+
+  .zdp-dialog__close: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);
+  }
+
+  @media (max-width: 520px) {
+    .zdp-dialog {
+      align-items: end;
+      padding: var(--zdp-space-3);
+    }
+
+    .zdp-dialog__panel {
+      max-height: calc(100vh - var(--zdp-space-6));
+      padding: var(--zdp-space-4);
+    }
+  }
+</style>

package/dist/components/Disclosure.svelte

@@ -0,0 +1,176 @@
+<script lang="ts" context="module">
+  let nextDisclosureInstanceId = 0;
+</script>
+
+<script lang="ts">
+  import type { ZdpDisclosureHeadingLevel } from '../disclosure';
+
+  export let open = false;
+  export let disabled = false;
+  export let id: string | null = null;
+  export let title = 'View details';
+  export let headingLevel: ZdpDisclosureHeadingLevel | null = null;
+  export let onOpenChange: ((open: boolean) => void) | null = null;
+
+  const fallbackId = `zdp-disclosure-${++nextDisclosureInstanceId}`;
+
+  $: resolvedId = toDomId(id ?? fallbackId);
+  $: triggerId = `${resolvedId}-trigger`;
+  $: panelId = `${resolvedId}-panel`;
+
+  function setOpen(nextOpen: boolean): void {
+    if (disabled || open === nextOpen) {
+      return;
+    }
+
+    open = nextOpen;
+    onOpenChange?.(nextOpen);
+  }
+
+  function handleToggle(): void {
+    setOpen(!open);
+  }
+
+  function toDomId(value: string): string {
+    return value.trim().replace(/[^a-zA-Z0-9_-]+/g, '-') || 'disclosure';
+  }
+</script>
+
+<div class="zdp-disclosure" data-open={open ? 'true' : 'false'} data-disabled={disabled ? 'true' : undefined}>
+  {#if headingLevel}
+    <div class="zdp-disclosure__heading" role="heading" aria-level={headingLevel}>
+      <button
+        class="zdp-disclosure__trigger"
+        id={triggerId}
+        type="button"
+        aria-expanded={open}
+        aria-controls={panelId}
+        disabled={disabled}
+        onclick={handleToggle}
+      >
+        <span class="zdp-disclosure__title">
+          <slot name="title">{title}</slot>
+        </span>
+        <span class="zdp-disclosure__mark" aria-hidden="true">{open ? '-' : '+'}</span>
+      </button>
+    </div>
+  {:else}
+    <button
+      class="zdp-disclosure__trigger"
+      id={triggerId}
+      type="button"
+      aria-expanded={open}
+      aria-controls={panelId}
+      disabled={disabled}
+      onclick={handleToggle}
+    >
+      <span class="zdp-disclosure__title">
+        <slot name="title">{title}</slot>
+      </span>
+      <span class="zdp-disclosure__mark" aria-hidden="true">{open ? '-' : '+'}</span>
+    </button>
+  {/if}
+
+  {#if open}
+    <div class="zdp-disclosure__panel" id={panelId} role="group" aria-labelledby={triggerId}>
+      <slot />
+    </div>
+  {/if}
+</div>
+
+<style>
+  .zdp-disclosure {
+    background: var(--zdp-color-surface-panel);
+    border: var(--zdp-control-border-width) solid var(--zdp-color-line-subtle);
+    border-radius: var(--zdp-control-radius);
+    box-sizing: border-box;
+    color: var(--zdp-color-ink-normal);
+    display: grid;
+    font-family: var(--zdp-font-family-sans);
+    min-width: 0;
+  }
+
+  .zdp-disclosure__heading {
+    margin: 0;
+    min-width: 0;
+  }
+
+  .zdp-disclosure__trigger {
+    align-items: center;
+    background: transparent;
+    border: 0;
+    border-radius: var(--zdp-control-radius);
+    box-sizing: border-box;
+    color: var(--zdp-color-ink-normal);
+    cursor: pointer;
+    display: grid;
+    font-family: var(--zdp-font-family-sans);
+    font-size: var(--zdp-type-control-size);
+    font-weight: var(--zdp-font-weight-medium);
+    gap: var(--zdp-space-3);
+    grid-template-columns: minmax(0, 1fr) auto;
+    line-height: var(--zdp-type-control-line-height);
+    min-block-size: var(--zdp-control-height-md);
+    min-width: 0;
+    padding: var(--zdp-space-2) var(--zdp-space-3);
+    text-align: left;
+    transition:
+      background-color var(--zdp-motion-fast) ease,
+      color var(--zdp-motion-fast) ease;
+    -webkit-user-select: none;
+    user-select: none;
+    width: 100%;
+  }
+
+  .zdp-disclosure__trigger:hover:not(:disabled) {
+    background: var(--zdp-color-surface-raised);
+    color: var(--zdp-color-ink-strong);
+  }
+
+  .zdp-disclosure__trigger:focus-visible {
+    outline: var(--zdp-control-focus-outline-width) solid var(--zdp-color-focus-surface);
+    outline-offset: var(--zdp-control-focus-outline-offset);
+  }
+
+  .zdp-disclosure__trigger:disabled {
+    cursor: not-allowed;
+    opacity: 0.56;
+  }
+
+  .zdp-disclosure__title {
+    min-width: 0;
+    overflow-wrap: var(--zdp-i18n-overflow-wrap);
+  }
+
+  .zdp-disclosure__mark {
+    align-items: center;
+    border: var(--zdp-control-border-width) solid var(--zdp-color-line-subtle);
+    border-radius: var(--zdp-control-radius);
+    box-sizing: border-box;
+    color: var(--zdp-color-ink-muted);
+    display: inline-flex;
+    flex: 0 0 auto;
+    font-size: var(--zdp-type-caption-size);
+    inline-size: var(--zdp-control-glyph-md);
+    justify-content: center;
+    line-height: 1;
+    min-block-size: var(--zdp-control-glyph-md);
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  .zdp-disclosure__panel {
+    border-block-start: 1px solid var(--zdp-color-line-subtle);
+    color: var(--zdp-color-ink-normal);
+    display: grid;
+    gap: var(--zdp-space-2);
+    line-height: var(--zdp-type-body-line-height);
+    min-width: 0;
+    overflow-wrap: var(--zdp-i18n-overflow-wrap);
+    padding: var(--zdp-space-3);
+  }
+
+  .zdp-disclosure__panel :global(*) {
+    margin-block: 0;
+  }
+</style>

package/dist/components/Divider.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  export let orientation: 'horizontal' | 'vertical' = 'horizontal';
+  export let tone: 'subtle' | 'strong' = 'subtle';
+  export let decorative = true;
+  export let label: string | null = null;
+</script>
+
+<div
+  class={`zdp-divider zdp-divider--${orientation} zdp-divider--${tone}`}
+  role={decorative ? 'presentation' : 'separator'}
+  aria-orientation={decorative ? undefined : orientation}
+  aria-label={decorative ? undefined : label ?? undefined}
+  aria-hidden={decorative ? 'true' : undefined}
+></div>
+
+<style>
+  .zdp-divider {
+    border: 0;
+    box-sizing: border-box;
+    min-width: 0;
+  }
+
+  .zdp-divider--horizontal {
+    border-block-start: 1px solid var(--zdp-color-line-subtle);
+    inline-size: 100%;
+  }
+
+  .zdp-divider--vertical {
+    align-self: stretch;
+    border-inline-start: 1px solid var(--zdp-color-line-subtle);
+    min-block-size: var(--zdp-control-height-md);
+  }
+
+  .zdp-divider--subtle {
+    border-color: var(--zdp-color-line-subtle);
+  }
+
+  .zdp-divider--strong {
+    border-color: var(--zdp-color-line-strong);
+  }
+</style>

package/dist/components/EmptyState.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+  export let align: 'start' | 'center' = 'start';
+  export let tone: 'panel' | 'raised' = 'panel';
+  export let labelledBy: string | null = null;
+</script>
+
+<section
+  class={`zdp-empty-state zdp-empty-state--align-${align} zdp-empty-state--${tone}`}
+  aria-labelledby={labelledBy ?? undefined}
+>
+  <div class="zdp-empty-state__body">
+    <slot />
+  </div>
+  <div class="zdp-empty-state__actions">
+    <slot name="actions" />
+  </div>
+</section>
+
+<style>
+  .zdp-empty-state {
+    background: var(--zdp-color-surface-panel);
+    border: 1px solid var(--zdp-color-line-subtle);
+    border-radius: var(--zdp-control-radius);
+    box-sizing: border-box;
+    color: var(--zdp-color-ink-normal);
+    display: grid;
+    font-family: var(--zdp-font-family-sans);
+    gap: var(--zdp-space-4);
+    min-width: 0;
+    padding: var(--zdp-space-6);
+  }
+
+  .zdp-empty-state--raised {
+    background: var(--zdp-color-surface-raised);
+  }
+
+  .zdp-empty-state--align-center {
+    justify-items: center;
+    text-align: center;
+  }
+
+  .zdp-empty-state__body {
+    display: grid;
+    gap: var(--zdp-space-2);
+    max-inline-size: 36rem;
+    min-width: 0;
+  }
+
+  .zdp-empty-state__body :global(*) {
+    margin-block: 0;
+  }
+
+  .zdp-empty-state__body :global(strong),
+  .zdp-empty-state__body :global(h2),
+  .zdp-empty-state__body :global(h3) {
+    color: var(--zdp-color-ink-strong);
+    font-size: var(--zdp-type-body-size);
+    font-weight: var(--zdp-font-weight-medium);
+    line-height: var(--zdp-type-body-line-height);
+  }
+
+  .zdp-empty-state__body :global(p) {
+    color: var(--zdp-color-ink-muted);
+    font-size: var(--zdp-type-body-small-size);
+    line-height: var(--zdp-type-body-small-line-height);
+  }
+
+  .zdp-empty-state__actions {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--zdp-space-2);
+    min-width: 0;
+  }
+
+  .zdp-empty-state--align-center .zdp-empty-state__actions {
+    justify-content: center;
+  }
+</style>

package/dist/components/ErrorText.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  export let id: string | null = null;
+  export let live: 'off' | 'polite' | 'assertive' = 'polite';
+</script>
+
+<p class="zdp-error-text" id={id ?? undefined} aria-live={live === 'off' ? undefined : live}>
+  <slot />
+</p>
+
+<style>
+  .zdp-error-text {
+    color: var(--zdp-color-accent-danger);
+    font-family: var(--zdp-font-family-sans);
+    font-size: var(--zdp-type-caption-size);
+    line-height: var(--zdp-type-caption-line-height);
+    margin: 0;
+  }
+</style>

package/dist/components/Field.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  export let gap: 'sm' | 'md' = 'md';
+  export let invalid = false;
+  export let disabled = false;
+  export let readonly = false;
+  export let required = false;
+</script>
+
+<div
+  class={`zdp-field zdp-field--${gap}`}
+  data-invalid={invalid ? 'true' : undefined}
+  data-disabled={disabled ? 'true' : undefined}
+  data-readonly={readonly ? 'true' : undefined}
+  data-required={required ? 'true' : undefined}
+>
+  <slot />
+</div>
+
+<style>
+  .zdp-field {
+    display: grid;
+    gap: var(--zdp-space-2);
+    min-width: 0;
+  }
+
+  .zdp-field--sm {
+    gap: var(--zdp-space-1);
+  }
+
+  .zdp-field--md {
+    gap: var(--zdp-space-2);
+  }
+
+  .zdp-field[data-disabled="true"] :global(.zdp-label),
+  .zdp-field[data-disabled="true"] :global(.zdp-help-text) {
+    color: var(--zdp-color-ink-muted);
+  }
+</style>