zdp-design-system 0.43.8

package/dist/components/CommandField.svelte

@@ -0,0 +1,230 @@
+<script lang="ts">
+  import type { HTMLInputAttributes } from 'svelte/elements';
+  import type { ZdpCommandFieldSize } from '../command';
+  import ShortcutHint from './ShortcutHint.svelte';
+
+  type DescribedBy = string | readonly string[] | null;
+  type AriaAutocomplete = 'none' | 'inline' | 'list' | 'both';
+
+  export let id: string | null = null;
+  export let name: string | null = null;
+  export let value = '';
+  export let type: HTMLInputAttributes['type'] = 'search';
+  export let label: string | null = 'Search';
+  export let labelVisible = false;
+  export let ariaLabel: string | null = null;
+  export let placeholder: string | null = 'Search query';
+  export let autocomplete: HTMLInputAttributes['autocomplete'] | null = 'off';
+  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 size: ZdpCommandFieldSize = 'md';
+  export let shortcutKeys: readonly string[] = ['/'];
+  export let ariaKeyShortcuts: string | null = null;
+  export let ariaAutocomplete: AriaAutocomplete | null = null;
+  export let ariaControls: string | null = null;
+  export let ariaExpanded: boolean | null = null;
+  export let ariaActivedescendant: string | null = null;
+  export let inputmode: HTMLInputAttributes['inputmode'] | null = null;
+  export let enterkeyhint: HTMLInputAttributes['enterkeyhint'] | null = null;
+  export let oninput: ((event: Event) => void) | null = null;
+  export let onfocus: ((event: FocusEvent) => void) | null = null;
+  export let onblur: ((event: FocusEvent) => void) | null = null;
+  export let onkeydown: ((event: KeyboardEvent) => void) | null = null;
+
+  $: ariaDescribedBy = normalizeIdRefs(describedBy);
+  $: resolvedErrorMessageId = invalid && errorMessageId ? errorMessageId : null;
+  $: hasShortcut = shortcutKeys.length > 0;
+  $: inputAriaLabel = label ? undefined : ariaLabel ?? 'Search';
+
+  function handleInput(event: Event): void {
+    value = (event.currentTarget as HTMLInputElement).value;
+    oninput?.(event);
+  }
+
+  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>
+
+<label
+  class={`zdp-command-field-shell zdp-command-field-shell--${size}`}
+  data-invalid={invalid ? 'true' : undefined}
+  data-disabled={disabled ? 'true' : undefined}
+>
+  {#if label}
+    <span class={`zdp-command-field__label ${labelVisible ? '' : 'zdp-command-field__label--hidden'}`}>
+      {label}
+    </span>
+  {/if}
+  <span class={`zdp-command-field zdp-command-field--${size}`}>
+    <input
+      class="zdp-command-field__input"
+      id={id ?? undefined}
+      name={name ?? undefined}
+      {type}
+      {value}
+      placeholder={placeholder ?? undefined}
+      autocomplete={autocomplete ?? undefined}
+      aria-label={inputAriaLabel}
+      aria-describedby={ariaDescribedBy ?? undefined}
+      aria-errormessage={resolvedErrorMessageId ?? undefined}
+      aria-invalid={invalid ? 'true' : undefined}
+      aria-keyshortcuts={ariaKeyShortcuts ?? undefined}
+      aria-autocomplete={ariaAutocomplete ?? undefined}
+      aria-controls={ariaControls ?? undefined}
+      aria-expanded={ariaExpanded ?? undefined}
+      aria-activedescendant={ariaActivedescendant ?? undefined}
+      {disabled}
+      readonly={readonly}
+      {required}
+      inputmode={inputmode ?? undefined}
+      enterkeyhint={enterkeyhint ?? undefined}
+      oninput={handleInput}
+      onfocus={onfocus ?? undefined}
+      onblur={onblur ?? undefined}
+      onkeydown={onkeydown ?? undefined}
+    />
+    {#if hasShortcut}
+      <span class="zdp-command-field__shortcut" aria-hidden="true">
+        <ShortcutHint keys={shortcutKeys} size={size} />
+      </span>
+    {/if}
+  </span>
+</label>
+
+<style>
+  .zdp-command-field-shell {
+    box-sizing: border-box;
+    display: grid;
+    gap: var(--zdp-space-2);
+    inline-size: 100%;
+    min-width: 0;
+  }
+
+  .zdp-command-field-shell--sm {
+    gap: var(--zdp-space-1);
+  }
+
+  .zdp-command-field-shell--md {
+    gap: var(--zdp-space-2);
+  }
+
+  .zdp-command-field__label {
+    color: var(--zdp-color-ink-strong);
+    font-family: var(--zdp-font-family-sans);
+    font-size: var(--zdp-type-label-size);
+    font-weight: var(--zdp-font-weight-medium);
+    line-height: var(--zdp-type-label-line-height);
+  }
+
+  .zdp-command-field__label--hidden {
+    block-size: 1px;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    inline-size: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    white-space: nowrap;
+  }
+
+  .zdp-command-field {
+    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-radius-md);
+    box-sizing: border-box;
+    color: var(--zdp-color-ink-strong);
+    display: flex;
+    font-family: var(--zdp-font-family-sans);
+    font-size: var(--zdp-type-control-size);
+    gap: var(--zdp-space-2);
+    inline-size: 100%;
+    min-width: 0;
+    transition:
+      background-color var(--zdp-motion-fast) ease,
+      border-color var(--zdp-motion-fast) ease,
+      color var(--zdp-motion-fast) ease;
+  }
+
+  .zdp-command-field--sm {
+    min-height: var(--zdp-control-height-sm);
+    padding: 0 var(--zdp-space-2);
+  }
+
+  .zdp-command-field--md {
+    min-height: var(--zdp-control-height-md);
+    padding: 0 var(--zdp-space-2) 0 var(--zdp-space-3);
+  }
+
+  .zdp-command-field:hover {
+    background: var(--zdp-color-surface-raised);
+    border-color: var(--zdp-color-line-strong);
+  }
+
+  .zdp-command-field:focus-within {
+    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-command-field-shell[data-invalid="true"] .zdp-command-field {
+    border-color: var(--zdp-color-accent-danger);
+  }
+
+  .zdp-command-field-shell[data-disabled="true"] .zdp-command-field {
+    cursor: not-allowed;
+    opacity: 0.56;
+  }
+
+  .zdp-command-field__input {
+    background: transparent;
+    border: 0;
+    color: inherit;
+    flex: 1 1 auto;
+    font: inherit;
+    min-height: calc(var(--zdp-control-height-md) - 2px);
+    min-width: 0;
+    padding: 0;
+  }
+
+  .zdp-command-field--sm .zdp-command-field__input {
+    min-height: calc(var(--zdp-control-height-sm) - 2px);
+  }
+
+  .zdp-command-field__input::placeholder {
+    color: var(--zdp-color-ink-muted);
+  }
+
+  .zdp-command-field__input:focus {
+    outline: 0;
+  }
+
+  .zdp-command-field__input::-webkit-calendar-picker-indicator {
+    display: none !important;
+  }
+
+  .zdp-command-field__shortcut {
+    align-items: center;
+    display: inline-flex;
+    flex: 0 0 auto;
+    pointer-events: none;
+    -webkit-user-select: none;
+    user-select: none;
+  }
+</style>

package/dist/components/ConfirmAction.svelte

@@ -0,0 +1,307 @@
+<script lang="ts">
+  import { onDestroy } from 'svelte';
+
+  export let id: string | null = null;
+  export let tone: 'primary' | 'danger' = 'primary';
+  export let label = 'Slide to confirm';
+  export let hint = 'Slide or hold for 2 seconds';
+  export let completeLabel = 'Confirmed';
+  export let disabled = false;
+  export let durationMs = 2000;
+  export let onconfirm: (() => void) | null = null;
+
+  let progress = 0;
+  let active = false;
+  let confirmed = false;
+  let startX = 0;
+  let trackWidth = 1;
+  let startedAt = 0;
+  let progressTimer: number | null = null;
+  let resetTimer: number | null = null;
+
+  $: safeDurationMs = Math.max(600, durationMs);
+  $: progressStyle = `--zdp-confirm-action-progress: ${progress};`;
+
+  function beginInteraction(clientX: number | null, element: HTMLButtonElement): void {
+    if (disabled || confirmed) {
+      return;
+    }
+
+    clearTimers();
+    active = true;
+    progress = 0;
+    startedAt = Date.now();
+    startX = clientX ?? 0;
+    trackWidth = Math.max(1, element.getBoundingClientRect().width);
+    progressTimer = window.setInterval(updateHoldProgress, 40);
+  }
+
+  function updateHoldProgress(): void {
+    if (!active) {
+      return;
+    }
+
+    progress = Math.max(progress, Math.min(1, (Date.now() - startedAt) / safeDurationMs));
+
+    if (progress >= 1) {
+      confirmAction();
+    }
+  }
+
+  function updateSlideProgress(clientX: number): void {
+    if (!active || disabled || confirmed) {
+      return;
+    }
+
+    progress = Math.max(progress, Math.min(1, (clientX - startX) / trackWidth));
+
+    if (progress >= 0.92) {
+      confirmAction();
+    }
+  }
+
+  function confirmAction(): void {
+    if (confirmed) {
+      return;
+    }
+
+    clearTimers();
+    active = false;
+    confirmed = true;
+    progress = 1;
+    onconfirm?.();
+    resetTimer = window.setTimeout(reset, 1000);
+  }
+
+  function cancelInteraction(): void {
+    if (confirmed) {
+      return;
+    }
+
+    clearTimers();
+    active = false;
+    progress = 0;
+  }
+
+  function reset(): void {
+    clearTimers();
+    active = false;
+    confirmed = false;
+    progress = 0;
+  }
+
+  function clearTimers(): void {
+    if (progressTimer !== null) {
+      window.clearInterval(progressTimer);
+      progressTimer = null;
+    }
+
+    if (resetTimer !== null) {
+      window.clearTimeout(resetTimer);
+      resetTimer = null;
+    }
+  }
+
+  function handlePointerDown(event: PointerEvent): void {
+    const button = event.currentTarget as HTMLButtonElement;
+    button.setPointerCapture(event.pointerId);
+    beginInteraction(event.clientX, button);
+  }
+
+  function handlePointerMove(event: PointerEvent): void {
+    updateSlideProgress(event.clientX);
+  }
+
+  function handlePointerEnd(event: PointerEvent): void {
+    const button = event.currentTarget as HTMLButtonElement;
+
+    if (button.hasPointerCapture(event.pointerId)) {
+      button.releasePointerCapture(event.pointerId);
+    }
+
+    cancelInteraction();
+  }
+
+  function handleKeydown(event: KeyboardEvent): void {
+    if (event.key !== 'Enter' && event.key !== ' ') {
+      return;
+    }
+
+    event.preventDefault();
+
+    if (!active) {
+      beginInteraction(null, event.currentTarget as HTMLButtonElement);
+    }
+  }
+
+  function handleKeyup(event: KeyboardEvent): void {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      cancelInteraction();
+    }
+  }
+
+  onDestroy(clearTimers);
+</script>
+
+<button
+  class={`zdp-confirm-action zdp-confirm-action--${tone}`}
+  {id}
+  type="button"
+  {disabled}
+  aria-disabled={disabled}
+  aria-live="polite"
+  data-active={active ? 'true' : undefined}
+  data-confirmed={confirmed ? 'true' : undefined}
+  style={progressStyle}
+  onpointerdown={handlePointerDown}
+  onpointermove={handlePointerMove}
+  onpointerup={handlePointerEnd}
+  onpointercancel={handlePointerEnd}
+  onkeydown={handleKeydown}
+  onkeyup={handleKeyup}
+>
+  <span class="zdp-confirm-action__fill" aria-hidden="true"></span>
+  <span class="zdp-confirm-action__thumb" aria-hidden="true">
+    <svg class="zdp-confirm-action__glyph" viewBox="0 0 24 24" focusable="false" aria-hidden="true">
+      <path d="M5 12h14m-6-6 6 6-6 6" />
+    </svg>
+  </span>
+  <span class="zdp-confirm-action__body">
+    <span class="zdp-confirm-action__label">{confirmed ? completeLabel : label}</span>
+    <span class="zdp-confirm-action__hint">{hint}</span>
+  </span>
+</button>
+
+<style>
+  .zdp-confirm-action {
+    --zdp-confirm-action-progress: 0;
+    --zdp-confirm-action-fill: var(--zdp-color-accent-primary);
+
+    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);
+    box-sizing: border-box;
+    color: var(--zdp-color-ink-strong);
+    cursor: pointer;
+    display: inline-grid;
+    font-family: var(--zdp-font-family-sans);
+    grid-template-columns: var(--zdp-control-height-sm) minmax(0, 1fr);
+    isolation: isolate;
+    min-height: calc(var(--zdp-control-height-md) + var(--zdp-space-3));
+    min-width: min(100%, 18rem);
+    overflow: hidden;
+    padding: var(--zdp-space-2) var(--zdp-space-4) var(--zdp-space-2) var(--zdp-space-2);
+    position: relative;
+    text-align: start;
+    touch-action: none;
+    -webkit-user-select: none;
+    user-select: none;
+    vertical-align: middle;
+  }
+
+  .zdp-confirm-action__fill {
+    background: var(--zdp-confirm-action-fill);
+    bottom: 0;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: calc(var(--zdp-confirm-action-progress) * 100%);
+    z-index: -1;
+  }
+
+  .zdp-confirm-action__thumb {
+    align-items: center;
+    background: var(--zdp-color-accent-primary);
+    border: var(--zdp-control-border-width) solid var(--zdp-color-accent-primary-strong);
+    border-radius: var(--zdp-control-radius);
+    box-sizing: border-box;
+    color: var(--zdp-color-ink-strong);
+    display: inline-flex;
+    font-size: var(--zdp-control-glyph-sm);
+    height: var(--zdp-control-height-sm);
+    justify-content: center;
+    line-height: 1;
+    width: var(--zdp-control-height-sm);
+  }
+
+  .zdp-confirm-action__glyph {
+    display: block;
+    fill: none;
+    height: var(--zdp-control-glyph-sm);
+    stroke: currentColor;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-width: 2.25;
+    width: var(--zdp-control-glyph-sm);
+  }
+
+  :global([data-zdp-theme="dark"]) .zdp-confirm-action__thumb {
+    color: var(--zdp-color-ink-inverse);
+  }
+
+  :global([data-zdp-theme="dark"]) .zdp-confirm-action {
+    --zdp-confirm-action-fill: var(--zdp-color-accent-primary-soft);
+  }
+
+  .zdp-confirm-action__body {
+    display: grid;
+    gap: var(--zdp-space-1);
+    min-width: 0;
+    padding-left: var(--zdp-space-3);
+  }
+
+  .zdp-confirm-action__label {
+    color: var(--zdp-color-ink-strong);
+    font-size: var(--zdp-type-control-size);
+    font-weight: var(--zdp-font-weight-medium);
+    line-height: var(--zdp-type-control-line-height);
+  }
+
+  .zdp-confirm-action__hint {
+    color: var(--zdp-color-ink-muted);
+    font-size: var(--zdp-type-caption-size);
+    line-height: var(--zdp-type-caption-line-height);
+  }
+
+  .zdp-confirm-action:hover:not(:disabled) {
+    background: var(--zdp-color-surface-raised);
+    border-color: var(--zdp-color-line-strong);
+  }
+
+  .zdp-confirm-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-confirm-action--danger {
+    border-color: var(--zdp-color-accent-danger);
+  }
+
+  .zdp-confirm-action--danger .zdp-confirm-action__fill {
+    background: var(--zdp-color-accent-danger);
+    opacity: 0.24;
+  }
+
+  .zdp-confirm-action--danger .zdp-confirm-action__thumb {
+    background: var(--zdp-color-accent-danger);
+    border-color: var(--zdp-color-accent-danger);
+  }
+
+  .zdp-confirm-action[data-active="true"],
+  .zdp-confirm-action[data-confirmed="true"] {
+    border-color: var(--zdp-color-focus-line);
+  }
+
+  .zdp-confirm-action[data-confirmed="true"] .zdp-confirm-action__thumb {
+    background: var(--zdp-color-accent-success);
+    border-color: var(--zdp-color-accent-success);
+  }
+
+  .zdp-confirm-action:disabled {
+    cursor: not-allowed;
+    opacity: 0.56;
+  }
+</style>

package/dist/components/Container.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+  export let as: 'div' | 'section' | 'article' | 'header' | 'footer' = 'div';
+  export let size: 'sm' | 'md' | 'lg' | 'xl' | 'full' = 'lg';
+  export let padding: 'none' | 'sm' | 'md' | 'lg' = 'md';
+  export let id: string | null = null;
+  export let labelledBy: string | null = null;
+
+  $: labelledGroupRole = as === 'div' && labelledBy ? 'group' : undefined;
+</script>
+
+<svelte:element
+  this={as}
+  class={`zdp-container zdp-container--${size} zdp-container--padding-${padding}`}
+  {id}
+  role={labelledGroupRole}
+  aria-labelledby={labelledBy ?? undefined}
+>
+  <slot />
+</svelte:element>
+
+<style>
+  .zdp-container {
+    inline-size: 100%;
+    margin-inline: auto;
+    min-width: 0;
+  }
+
+  .zdp-container--sm {
+    max-inline-size: var(--zdp-breakpoint-mobile);
+  }
+
+  .zdp-container--md {
+    max-inline-size: var(--zdp-breakpoint-tablet);
+  }
+
+  .zdp-container--lg {
+    max-inline-size: var(--zdp-breakpoint-desktop);
+  }
+
+  .zdp-container--xl {
+    max-inline-size: var(--zdp-breakpoint-wide);
+  }
+
+  .zdp-container--full {
+    max-inline-size: none;
+  }
+
+  .zdp-container--padding-none {
+    padding-inline: 0;
+  }
+
+  .zdp-container--padding-sm {
+    padding-inline: var(--zdp-space-3);
+  }
+
+  .zdp-container--padding-md {
+    padding-inline: var(--zdp-space-4);
+  }
+
+  .zdp-container--padding-lg {
+    padding-inline: var(--zdp-space-6);
+  }
+</style>