zdp-design-system 0.43.8

package/dist/components/Textarea.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+  type DescribedBy = string | readonly string[] | null;
+
+  export let id: string | null = null;
+  export let name: string | null = null;
+  export let value = '';
+  export let placeholder: string | null = null;
+  export let describedBy: DescribedBy = null;
+  export let errorMessageId: string | null = null;
+  export let invalid = false;
+  export let disabled = false;
+  export let readonly = false;
+  export let required = false;
+  export let rows = 4;
+
+  $: ariaDescribedBy = normalizeIdRefs(describedBy);
+  $: resolvedErrorMessageId = invalid && errorMessageId ? errorMessageId : null;
+
+  function handleInput(event: Event): void {
+    value = (event.currentTarget as HTMLTextAreaElement).value;
+  }
+
+  function normalizeIdRefs(value: DescribedBy): string | null {
+    if (value === null) {
+      return null;
+    }
+
+    if (typeof value === 'string') {
+      const normalized = value.trim();
+      return normalized ? normalized : null;
+    }
+
+    const normalized = value.map((entry) => entry.trim()).filter(Boolean);
+    return normalized.length > 0 ? normalized.join(' ') : null;
+  }
+</script>
+
+<textarea
+  class="zdp-textarea"
+  id={id ?? undefined}
+  name={name ?? undefined}
+  {value}
+  placeholder={placeholder ?? undefined}
+  aria-describedby={ariaDescribedBy ?? undefined}
+  aria-errormessage={resolvedErrorMessageId ?? undefined}
+  aria-invalid={invalid ? 'true' : undefined}
+  {disabled}
+  readonly={readonly}
+  {required}
+  {rows}
+  oninput={handleInput}
+></textarea>
+
+<style>
+  .zdp-textarea {
+    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-strong);
+    font-family: var(--zdp-font-family-sans);
+    font-size: var(--zdp-type-control-size);
+    line-height: var(--zdp-font-line-height-normal);
+    min-height: 7rem;
+    padding: var(--zdp-space-3);
+    resize: vertical;
+    transition:
+      background-color var(--zdp-motion-fast) ease,
+      border-color var(--zdp-motion-fast) ease,
+      color var(--zdp-motion-fast) ease;
+    width: 100%;
+  }
+
+  .zdp-textarea::placeholder {
+    color: var(--zdp-color-ink-muted);
+  }
+
+  .zdp-textarea:hover:not(:disabled) {
+    background: var(--zdp-color-surface-raised);
+    border-color: var(--zdp-color-line-strong);
+  }
+
+  .zdp-textarea: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-textarea[aria-invalid="true"] {
+    border-color: var(--zdp-color-accent-danger);
+  }
+
+  .zdp-textarea[readonly] {
+    background: var(--zdp-color-surface-raised);
+    color: var(--zdp-color-ink-normal);
+  }
+
+  .zdp-textarea[readonly]:hover {
+    background: var(--zdp-color-surface-raised);
+  }
+
+  .zdp-textarea:disabled {
+    cursor: not-allowed;
+    opacity: 0.56;
+  }
+</style>

package/dist/components/ThemeToggle.svelte

@@ -0,0 +1,148 @@
+<script lang="ts">
+  import type { ZdpThemeMode, ZdpThemeToggleSize } from '../theme';
+
+  export let theme: ZdpThemeMode = 'light';
+  export let size: ZdpThemeToggleSize = 'md';
+  export let id: string | null = null;
+  export let name: string | null = null;
+  export let value: string | null = null;
+  export let form: string | null = null;
+  export let disabled = false;
+  export let type: 'button' | 'submit' | 'reset' = 'button';
+  export let lightLabel = 'Switch to light mode';
+  export let darkLabel = 'Switch to dark mode';
+  export let ariaControls: string | null = null;
+  export let ariaDescribedBy: string | null = null;
+  export let onclick: ((event: MouseEvent) => void) | null = null;
+
+  $: isDark = theme === 'dark';
+  $: ariaLabel = isDark ? lightLabel : darkLabel;
+</script>
+
+<button
+  class={`zdp-theme-toggle zdp-theme-toggle--${size}`}
+  {id}
+  {name}
+  {value}
+  {form}
+  {type}
+  {disabled}
+  aria-label={ariaLabel}
+  aria-pressed={isDark}
+  aria-controls={ariaControls ?? undefined}
+  aria-describedby={ariaDescribedBy ?? undefined}
+  data-zdp-theme-toggle
+  data-zdp-theme-state={theme}
+  onclick={onclick ?? undefined}
+>
+  <span class="zdp-theme-toggle__icon zdp-theme-toggle__icon--sun" aria-hidden="true">
+    <svg viewBox="0 0 24 24" focusable="false">
+      <circle cx="12" cy="12" r="3.6"></circle>
+      <path d="M12 3v2.2M12 18.8V21M3 12h2.2M18.8 12H21M5.6 5.6l1.6 1.6M16.8 16.8l1.6 1.6M18.4 5.6l-1.6 1.6M7.2 16.8l-1.6 1.6"></path>
+    </svg>
+  </span>
+  <span class="zdp-theme-toggle__icon zdp-theme-toggle__icon--moon" aria-hidden="true">
+    <svg viewBox="0 0 24 24" focusable="false">
+      <path d="M17.8 15.4A7 7 0 0 1 8.6 6.2 7.4 7.4 0 1 0 17.8 15.4Z"></path>
+    </svg>
+  </span>
+</button>
+
+<style>
+  .zdp-theme-toggle {
+    align-items: center;
+    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);
+    cursor: pointer;
+    display: inline-grid;
+    flex: 0 0 auto;
+    font-family: var(--zdp-font-family-sans);
+    justify-items: center;
+    line-height: 1;
+    padding: 0;
+    place-items: center;
+    position: relative;
+    transition:
+      background-color var(--zdp-motion-fast) ease,
+      border-color var(--zdp-motion-fast) ease,
+      color var(--zdp-motion-fast) ease;
+    vertical-align: middle;
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  .zdp-theme-toggle--sm {
+    height: var(--zdp-control-icon-sm);
+    width: var(--zdp-control-icon-sm);
+  }
+
+  .zdp-theme-toggle--md {
+    height: var(--zdp-control-icon-md);
+    width: var(--zdp-control-icon-md);
+  }
+
+  .zdp-theme-toggle:hover:not(:disabled) {
+    background: var(--zdp-color-surface-raised);
+    border-color: var(--zdp-color-line-strong);
+    color: var(--zdp-color-ink-strong);
+  }
+
+  .zdp-theme-toggle: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-theme-toggle:disabled {
+    cursor: not-allowed;
+    opacity: 0.56;
+  }
+
+  .zdp-theme-toggle__icon {
+    color: currentColor;
+    display: grid;
+    grid-area: 1 / 1;
+    height: var(--zdp-control-glyph-md);
+    place-items: center;
+    transition: opacity var(--zdp-motion-fast) ease;
+    width: var(--zdp-control-glyph-md);
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  .zdp-theme-toggle--sm .zdp-theme-toggle__icon {
+    height: var(--zdp-control-glyph-sm);
+    width: var(--zdp-control-glyph-sm);
+  }
+
+  .zdp-theme-toggle__icon svg {
+    display: block;
+    fill: none;
+    height: 100%;
+    stroke: currentColor;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-width: 1.8;
+    width: 100%;
+  }
+
+  .zdp-theme-toggle__icon--moon svg {
+    fill: currentColor;
+    stroke: currentColor;
+    transform: translate(0.08rem, -0.04rem);
+  }
+
+  .zdp-theme-toggle[data-zdp-theme-state='light'] .zdp-theme-toggle__icon--moon,
+  .zdp-theme-toggle[data-zdp-theme-state='dark'] .zdp-theme-toggle__icon--sun {
+    opacity: 0;
+  }
+
+  .zdp-theme-toggle[data-zdp-theme-state='dark'] {
+    background: var(--zdp-color-surface-raised);
+    border-color: var(--zdp-color-line-strong);
+    color: var(--zdp-color-ink-strong);
+  }
+</style>

package/dist/components/Toast.svelte

@@ -0,0 +1,180 @@
+<script lang="ts">
+  import type { ZdpToastTone } from '../toast';
+
+  export let tone: ZdpToastTone = 'neutral';
+  export let labelledBy: string | null = null;
+  export let describedBy: string | null = null;
+  export let semanticRole: 'status' | 'alert' | 'note' | null = null;
+  export let live: 'off' | 'polite' | 'assertive' | null = null;
+  export let atomic = true;
+  export let dismissLabel = 'Dismiss notification';
+  export let onClose: ((event: MouseEvent) => void) | null = null;
+
+  $: resolvedRole = semanticRole ?? (tone === 'danger' ? 'alert' : 'status');
+  $: resolvedLive = live === 'off' ? undefined : live ?? (tone === 'danger' ? 'assertive' : 'polite');
+  $: resolvedAtomic = live === 'off' ? undefined : atomic;
+</script>
+
+<div
+  class={`zdp-toast zdp-toast--${tone}`}
+  aria-labelledby={labelledBy ?? undefined}
+  aria-describedby={describedBy ?? undefined}
+  aria-live={resolvedLive}
+  aria-atomic={resolvedAtomic}
+  role={resolvedRole ?? undefined}
+>
+  <span class="zdp-toast__mark" aria-hidden="true"></span>
+  <div class="zdp-toast__body">
+    <slot />
+  </div>
+  {#if onClose}
+    <button class="zdp-toast__close" type="button" aria-label={dismissLabel} onclick={onClose}>
+      <span aria-hidden="true">×</span>
+    </button>
+  {/if}
+</div>
+
+<style>
+  .zdp-toast {
+    align-items: start;
+    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;
+    font-family: var(--zdp-font-family-sans);
+    gap: var(--zdp-space-3);
+    grid-template-columns: var(--zdp-space-2) minmax(0, 1fr) auto;
+    inline-size: min(100%, 28rem);
+    line-height: var(--zdp-type-body-small-line-height);
+    min-width: 0;
+    padding: var(--zdp-space-4);
+  }
+
+  .zdp-toast__mark {
+    align-self: stretch;
+    background: var(--zdp-color-line-strong);
+    border-radius: var(--zdp-radius-sm);
+    display: block;
+    min-block-size: calc(var(--zdp-type-body-small-size) * var(--zdp-type-body-small-line-height));
+    -webkit-user-select: none;
+    user-select: none;
+    width: var(--zdp-space-2);
+  }
+
+  .zdp-toast__body {
+    display: grid;
+    gap: var(--zdp-space-1);
+    min-width: 0;
+  }
+
+  .zdp-toast__body :global(*) {
+    margin-bottom: 0;
+    margin-top: 0;
+  }
+
+  .zdp-toast__body :global(strong),
+  .zdp-toast__body :global(.zdp-toast__title) {
+    color: var(--zdp-color-ink-strong);
+    font-size: var(--zdp-type-body-small-size);
+    font-weight: var(--zdp-font-weight-medium);
+    line-height: var(--zdp-type-body-small-line-height);
+  }
+
+  .zdp-toast__body :global(p),
+  .zdp-toast__body :global(.zdp-toast__message) {
+    color: var(--zdp-color-ink-muted);
+    font-size: var(--zdp-type-caption-size);
+    line-height: var(--zdp-type-caption-line-height);
+    overflow-wrap: var(--zdp-i18n-overflow-wrap);
+  }
+
+  .zdp-toast__body :global(.zdp-toast__action) {
+    align-items: center;
+    align-self: start;
+    background: transparent;
+    border: var(--zdp-control-border-width) solid var(--zdp-color-line-subtle);
+    border-radius: var(--zdp-control-radius);
+    color: var(--zdp-color-ink-strong);
+    cursor: pointer;
+    display: inline-flex;
+    font-family: var(--zdp-font-family-sans);
+    font-size: var(--zdp-type-caption-size);
+    font-weight: var(--zdp-font-weight-medium);
+    justify-content: center;
+    line-height: var(--zdp-type-caption-line-height);
+    margin-block-start: var(--zdp-space-3);
+    min-height: var(--zdp-control-height-sm);
+    padding: 0 var(--zdp-space-3);
+    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;
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  .zdp-toast__body :global(.zdp-toast__action:hover) {
+    background: var(--zdp-color-surface-raised);
+    border-color: var(--zdp-color-line-strong);
+  }
+
+  .zdp-toast__body :global(.zdp-toast__action: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-toast__close {
+    align-items: center;
+    background: transparent;
+    border: var(--zdp-control-border-width) solid transparent;
+    border-radius: var(--zdp-control-radius);
+    color: var(--zdp-color-ink-muted);
+    cursor: pointer;
+    display: inline-flex;
+    font-family: var(--zdp-font-family-sans);
+    font-size: var(--zdp-type-title-size);
+    height: var(--zdp-control-height-sm);
+    justify-content: center;
+    line-height: 1;
+    padding: 0;
+    -webkit-user-select: none;
+    user-select: none;
+    width: var(--zdp-control-height-sm);
+  }
+
+  .zdp-toast__close:hover {
+    background: var(--zdp-color-surface-raised);
+    border-color: var(--zdp-color-line-strong);
+    color: var(--zdp-color-ink-strong);
+  }
+
+  .zdp-toast__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);
+  }
+
+  .zdp-toast--info .zdp-toast__mark {
+    background: var(--zdp-color-accent-primary);
+  }
+
+  .zdp-toast--success .zdp-toast__mark {
+    background: var(--zdp-color-accent-success);
+  }
+
+  .zdp-toast--warning .zdp-toast__mark {
+    background: var(--zdp-color-accent-warning);
+  }
+
+  .zdp-toast--danger {
+    border-color: var(--zdp-color-accent-danger);
+  }
+
+  .zdp-toast--danger .zdp-toast__mark {
+    background: var(--zdp-color-accent-danger);
+  }
+</style>

package/dist/components/Toolbar.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+  export let as: 'div' | 'section' | 'nav' | 'header' | 'footer' = 'div';
+  export let gap: 'sm' | 'md' | 'lg' = 'md';
+  export let align: 'start' | 'center' | 'end' = 'center';
+  export let labelledBy: string | null = null;
+
+  $: labelledGroupRole = as === 'div' && labelledBy ? 'group' : undefined;
+</script>
+
+<svelte:element
+  this={as}
+  class={`zdp-toolbar zdp-toolbar--gap-${gap} zdp-toolbar--align-${align}`}
+  role={labelledGroupRole}
+  aria-labelledby={labelledBy ?? undefined}
+>
+  <div class="zdp-toolbar__main">
+    <slot />
+  </div>
+  <div class="zdp-toolbar__actions">
+    <slot name="actions" />
+  </div>
+</svelte:element>
+
+<style>
+  .zdp-toolbar {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--zdp-space-3);
+    justify-content: space-between;
+    min-width: 0;
+  }
+
+  .zdp-toolbar--gap-sm {
+    gap: var(--zdp-space-2);
+  }
+
+  .zdp-toolbar--gap-md {
+    gap: var(--zdp-space-3);
+  }
+
+  .zdp-toolbar--gap-lg {
+    gap: var(--zdp-space-4);
+  }
+
+  .zdp-toolbar--align-start {
+    align-items: flex-start;
+  }
+
+  .zdp-toolbar--align-center {
+    align-items: center;
+  }
+
+  .zdp-toolbar--align-end {
+    align-items: flex-end;
+  }
+
+  .zdp-toolbar__main,
+  .zdp-toolbar__actions {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--zdp-space-2);
+    min-width: 0;
+  }
+
+  .zdp-toolbar__main {
+    flex: 1 1 16rem;
+  }
+
+  .zdp-toolbar__actions {
+    flex: 0 1 auto;
+    justify-content: flex-end;
+  }
+
+  @media (max-width: 42rem) {
+    .zdp-toolbar__main,
+    .zdp-toolbar__actions {
+      inline-size: 100%;
+      justify-content: flex-start;
+    }
+  }
+</style>

package/dist/components/Tooltip.svelte

@@ -0,0 +1,199 @@
+<script context="module" lang="ts">
+  let tooltipIdCounter = 0;
+</script>
+
+<script lang="ts">
+  import { onMount } from 'svelte';
+
+  export let text: string;
+  export let placement: 'top' | 'right' | 'bottom' | 'left' = 'top';
+  export let id: string | null = null;
+  export let disabled = false;
+
+  let rootElement: HTMLElement | null = null;
+  const fallbackId = `zdp-tooltip-${++tooltipIdCounter}`;
+
+  let dismissed = false;
+  let pointerInside = false;
+
+  $: tooltipId = id ?? fallbackId;
+  $: describedBy = disabled ? null : tooltipId;
+
+  onMount(() => {
+    const root = rootElement;
+
+    if (!root) {
+      return;
+    }
+
+    root.addEventListener('mouseenter', handleMouseenter);
+    root.addEventListener('mouseleave', handleMouseleave);
+    root.addEventListener('focusin', handleFocusin);
+    root.addEventListener('focusout', handleFocusout);
+    root.addEventListener('keydown', handleKeydown);
+
+    return () => {
+      root.removeEventListener('mouseenter', handleMouseenter);
+      root.removeEventListener('mouseleave', handleMouseleave);
+      root.removeEventListener('focusin', handleFocusin);
+      root.removeEventListener('focusout', handleFocusout);
+      root.removeEventListener('keydown', handleKeydown);
+    };
+  });
+
+  function handleMouseenter(): void {
+    pointerInside = true;
+    dismissed = false;
+  }
+
+  function handleMouseleave(): void {
+    pointerInside = false;
+    dismissed = false;
+  }
+
+  function handleFocusin(): void {
+    if (!pointerInside) {
+      dismissed = false;
+    }
+  }
+
+  function handleFocusout(): void {
+    if (!pointerInside) {
+      dismissed = false;
+    }
+  }
+
+  function handleKeydown(event: KeyboardEvent): void {
+    if (event.key !== 'Escape' || disabled) {
+      return;
+    }
+
+    dismissed = true;
+
+    if (typeof document !== 'undefined' && document.activeElement instanceof HTMLElement) {
+      document.activeElement.blur();
+    }
+  }
+</script>
+
+<span
+  class={`zdp-tooltip zdp-tooltip--${placement}`}
+  data-disabled={disabled ? 'true' : undefined}
+  data-dismissed={dismissed ? 'true' : undefined}
+  bind:this={rootElement}
+>
+  <span class="zdp-tooltip__trigger">
+    <slot describedBy={describedBy} />
+  </span>
+  {#if !disabled}
+    <span
+      id={tooltipId}
+      class="zdp-tooltip__content"
+      role="tooltip"
+    >
+      {text}
+    </span>
+  {/if}
+</span>
+
+<style>
+  .zdp-tooltip {
+    display: inline-flex;
+    min-width: 0;
+    position: relative;
+    vertical-align: middle;
+  }
+
+  .zdp-tooltip__trigger {
+    display: inline-flex;
+    min-width: 0;
+  }
+
+  .zdp-tooltip__content {
+    background: var(--zdp-color-ink-strong);
+    border: var(--zdp-control-border-width) solid var(--zdp-color-line-strong);
+    border-radius: var(--zdp-control-radius);
+    bottom: var(--zdp-tooltip-bottom, auto);
+    color: var(--zdp-color-surface-panel);
+    font-family: var(--zdp-font-family-sans);
+    font-size: var(--zdp-type-caption-size);
+    left: var(--zdp-tooltip-left, auto);
+    line-height: var(--zdp-type-caption-line-height);
+    opacity: 0;
+    padding: var(--zdp-space-1) var(--zdp-space-2);
+    pointer-events: none;
+    position: absolute;
+    right: var(--zdp-tooltip-right, auto);
+    top: var(--zdp-tooltip-top, auto);
+    transform: var(--zdp-tooltip-transform, none);
+    -webkit-user-select: none;
+    user-select: none;
+    white-space: nowrap;
+    z-index: 30;
+  }
+
+  .zdp-tooltip--top {
+    --zdp-tooltip-bottom: calc(100% + var(--zdp-space-2));
+    --zdp-tooltip-left: 0;
+    --zdp-tooltip-right: auto;
+    --zdp-tooltip-top: auto;
+    --zdp-tooltip-transform: none;
+  }
+
+  .zdp-tooltip--top .zdp-tooltip__content {
+    bottom: var(--zdp-tooltip-bottom);
+    left: var(--zdp-tooltip-left);
+  }
+
+  .zdp-tooltip--right {
+    --zdp-tooltip-bottom: auto;
+    --zdp-tooltip-left: calc(100% + var(--zdp-space-2));
+    --zdp-tooltip-right: auto;
+    --zdp-tooltip-top: 0;
+    --zdp-tooltip-transform: none;
+  }
+
+  .zdp-tooltip--right .zdp-tooltip__content {
+    left: var(--zdp-tooltip-left);
+    top: var(--zdp-tooltip-top);
+  }
+
+  .zdp-tooltip--bottom {
+    --zdp-tooltip-bottom: auto;
+    --zdp-tooltip-left: 0;
+    --zdp-tooltip-right: auto;
+    --zdp-tooltip-top: calc(100% + var(--zdp-space-2));
+    --zdp-tooltip-transform: none;
+  }
+
+  .zdp-tooltip--bottom .zdp-tooltip__content {
+    left: var(--zdp-tooltip-left);
+    top: var(--zdp-tooltip-top);
+  }
+
+  .zdp-tooltip--left {
+    --zdp-tooltip-bottom: auto;
+    --zdp-tooltip-left: auto;
+    --zdp-tooltip-right: calc(100% + var(--zdp-space-2));
+    --zdp-tooltip-top: 0;
+    --zdp-tooltip-transform: none;
+  }
+
+  .zdp-tooltip--left .zdp-tooltip__content {
+    right: var(--zdp-tooltip-right);
+    top: var(--zdp-tooltip-top);
+  }
+
+  .zdp-tooltip:hover .zdp-tooltip__content,
+  .zdp-tooltip:focus-within .zdp-tooltip__content {
+    opacity: 1;
+  }
+
+  .zdp-tooltip[data-dismissed="true"] .zdp-tooltip__content {
+    opacity: 0;
+  }
+
+  .zdp-tooltip[data-disabled="true"] {
+    cursor: default;
+  }
+</style>