zdp-design-system 0.43.8

package/dist/components/Switch.svelte

@@ -0,0 +1,152 @@
+<script lang="ts">
+  type DescribedBy = string | readonly string[] | null;
+
+  export let id: string | null = null;
+  export let name: string | null = null;
+  export let checked = false;
+  export let describedBy: DescribedBy = null;
+  export let errorMessageId: string | null = null;
+  export let invalid = false;
+  export let disabled = false;
+  export let required = false;
+
+  $: ariaDescribedBy = normalizeIdRefs(describedBy);
+  $: resolvedErrorMessageId = invalid && errorMessageId ? errorMessageId : null;
+
+  function handleChange(event: Event): void {
+    checked = (event.currentTarget as HTMLInputElement).checked;
+  }
+
+  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-switch" data-invalid={invalid ? 'true' : undefined}>
+  <input
+    class="zdp-switch__input"
+    id={id ?? undefined}
+    name={name ?? undefined}
+    type="checkbox"
+    role="switch"
+    {checked}
+    aria-describedby={ariaDescribedBy ?? undefined}
+    aria-errormessage={resolvedErrorMessageId ?? undefined}
+    aria-invalid={invalid ? 'true' : undefined}
+    {disabled}
+    {required}
+    onchange={handleChange}
+  />
+  <span class="zdp-switch__track" aria-hidden="true"></span>
+  <span class="zdp-switch__body">
+    <span class="zdp-switch__label"><slot /></span>
+    <slot name="help" />
+  </span>
+</label>
+
+<style>
+  .zdp-switch {
+    align-items: start;
+    color: var(--zdp-color-ink-normal);
+    cursor: pointer;
+    display: grid;
+    font-family: var(--zdp-font-family-sans);
+    gap: var(--zdp-space-3);
+    grid-template-columns: var(--zdp-control-switch-width) minmax(0, 1fr);
+    line-height: var(--zdp-type-body-small-line-height);
+    min-width: 0;
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  .zdp-switch__input {
+    height: 1px;
+    margin: 0;
+    opacity: 0;
+    position: absolute;
+    width: 1px;
+  }
+
+  .zdp-switch__track {
+    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;
+    display: inline-flex;
+    height: var(--zdp-control-switch-height);
+    margin-top: var(--zdp-control-switch-thumb-offset);
+    position: relative;
+    -webkit-user-select: none;
+    user-select: none;
+    transition:
+      background-color var(--zdp-motion-fast) ease,
+      border-color var(--zdp-motion-fast) ease;
+    width: var(--zdp-control-switch-width);
+  }
+
+  .zdp-switch__track::after {
+    background: var(--zdp-color-ink-muted);
+    border-radius: var(--zdp-radius-sm);
+    content: "";
+    height: var(--zdp-control-switch-thumb-size);
+    left: var(--zdp-control-switch-thumb-offset);
+    position: absolute;
+    top: var(--zdp-control-switch-thumb-offset);
+    transition:
+      background-color var(--zdp-motion-fast) ease,
+      left var(--zdp-motion-fast) ease;
+    width: var(--zdp-control-switch-thumb-size);
+  }
+
+  .zdp-switch:hover .zdp-switch__input:not(:checked):not(:disabled) + .zdp-switch__track {
+    background: var(--zdp-color-surface-raised);
+    border-color: var(--zdp-color-line-strong);
+  }
+
+  .zdp-switch__input:checked + .zdp-switch__track {
+    background: var(--zdp-color-accent-primary);
+    border-color: var(--zdp-color-accent-primary-strong);
+  }
+
+  .zdp-switch__input:checked + .zdp-switch__track::after {
+    background: var(--zdp-color-ink-inverse);
+    left: var(--zdp-control-switch-thumb-checked-offset);
+  }
+
+  .zdp-switch__input:focus-visible + .zdp-switch__track {
+    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-switch__input[aria-invalid="true"] + .zdp-switch__track {
+    border-color: var(--zdp-color-accent-danger);
+  }
+
+  .zdp-switch:has(.zdp-switch__input:disabled) {
+    cursor: not-allowed;
+    opacity: 0.56;
+  }
+
+  .zdp-switch__body {
+    display: grid;
+    gap: var(--zdp-space-1);
+    min-width: 0;
+  }
+
+  .zdp-switch__label {
+    color: var(--zdp-color-ink-strong);
+    font-size: var(--zdp-type-body-small-size);
+    line-height: var(--zdp-type-body-small-line-height);
+  }
+</style>

package/dist/components/Table.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+  export let caption: string | null = null;
+  export let captionMode: 'visible' | 'hidden' = 'visible';
+  export let density: 'default' | 'compact' = 'default';
+  export let labelledBy: string | null = null;
+</script>
+
+<div class="zdp-table-wrap">
+  <table
+    class={`zdp-table zdp-table--density-${density}`}
+    aria-labelledby={labelledBy ?? undefined}
+  >
+    {#if caption}
+      <caption class={`zdp-table__caption zdp-table__caption--${captionMode}`}>
+        {caption}
+      </caption>
+    {/if}
+    <slot />
+  </table>
+</div>
+
+<style>
+  .zdp-table-wrap {
+    background: var(--zdp-color-surface-panel);
+    border: 1px solid var(--zdp-color-line-subtle);
+    border-radius: var(--zdp-control-radius);
+    box-sizing: border-box;
+    max-width: 100%;
+    min-width: 0;
+    overscroll-behavior-inline: contain;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    touch-action: pan-x pan-y;
+  }
+
+  .zdp-table {
+    background: var(--zdp-color-surface-panel);
+    border-collapse: collapse;
+    color: var(--zdp-color-ink-normal);
+    font-family: var(--zdp-font-family-sans);
+    font-size: var(--zdp-type-body-small-size);
+    inline-size: 100%;
+    line-height: var(--zdp-type-body-small-line-height);
+    min-inline-size: 36rem;
+  }
+
+  .zdp-table__caption {
+    color: var(--zdp-color-ink-strong);
+    font-size: var(--zdp-type-label-size);
+    font-weight: var(--zdp-font-weight-medium);
+    line-height: var(--zdp-type-label-line-height);
+    padding: var(--zdp-space-3) var(--zdp-space-4);
+    text-align: start;
+  }
+
+  .zdp-table__caption--hidden {
+    border: 0;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
+
+  .zdp-table :global(th),
+  .zdp-table :global(td) {
+    background: var(--zdp-color-surface-panel);
+    border-block-start: 1px solid var(--zdp-color-line-subtle);
+    overflow-wrap: normal;
+    padding: var(--zdp-space-3) var(--zdp-space-4);
+    text-align: start;
+    vertical-align: top;
+    white-space: nowrap;
+    word-break: normal;
+  }
+
+  .zdp-table :global(th) {
+    color: var(--zdp-color-ink-strong);
+    font-weight: var(--zdp-font-weight-medium);
+  }
+
+  .zdp-table :global(thead th) {
+    background: var(--zdp-color-surface-raised);
+  }
+
+  .zdp-table--density-compact :global(th),
+  .zdp-table--density-compact :global(td) {
+    padding: var(--zdp-space-2) var(--zdp-space-3);
+  }
+</style>

package/dist/components/TableToolbar.svelte

@@ -0,0 +1,195 @@
+<script lang="ts">
+  import SegmentedControl from './SegmentedControl.svelte';
+  import type { ZdpSegmentedControlItem } from '../segmented';
+  import type { ZdpTableDensity, ZdpTableToolbarDensityItem } from '../table-tools';
+
+  const defaultDensityItems: readonly ZdpTableToolbarDensityItem[] = [
+    { id: 'default', label: 'Default' },
+    { id: 'compact', label: 'Compact' }
+  ];
+
+  export let title: string | null = null;
+  export let summary: string | null = null;
+  export let selectedCount: number | null = null;
+  export let selectedLabel: string | null = null;
+  export let density: ZdpTableDensity = 'default';
+  export let densityLabel = 'Table density';
+  export let densityItems: readonly ZdpTableToolbarDensityItem[] = defaultDensityItems;
+  export let labelledBy: string | null = null;
+  export let ariaLabel = 'Table tools';
+  export let onDensityChange:
+    | ((event: MouseEvent | KeyboardEvent, density: ZdpTableDensity, item: ZdpTableToolbarDensityItem) => void)
+    | null = null;
+
+  $: normalizedSelectedCount = normalizeCount(selectedCount);
+  $: resolvedSelectedLabel =
+    selectedLabel ?? (normalizedSelectedCount > 0 ? `${normalizedSelectedCount} selected` : null);
+  $: segmentedDensityItems = densityItems.map((item) => ({
+    id: item.id,
+    label: item.label,
+    ariaLabel: item.ariaLabel,
+    disabled: item.disabled
+  }));
+  $: activeDensity = normalizeDensity(density, densityItems);
+
+  function handleDensityChange(
+    event: MouseEvent | KeyboardEvent,
+    item: ZdpSegmentedControlItem
+  ): void {
+    const densityItem = densityItems.find((entry) => entry.id === item.id);
+
+    if (densityItem) {
+      onDensityChange?.(event, densityItem.id, densityItem);
+    }
+  }
+
+  function normalizeCount(value: number | null): number {
+    if (typeof value !== 'number' || !Number.isFinite(value) || value <= 0) {
+      return 0;
+    }
+
+    return Math.floor(value);
+  }
+
+  function normalizeDensity(
+    value: ZdpTableDensity,
+    items: readonly ZdpTableToolbarDensityItem[]
+  ): ZdpTableDensity {
+    if (items.some((item) => item.id === value && !item.disabled)) {
+      return value;
+    }
+
+    return items.find((item) => !item.disabled)?.id ?? value;
+  }
+</script>
+
+<div
+  class="zdp-table-toolbar"
+  role="group"
+  aria-label={labelledBy ? undefined : ariaLabel}
+  aria-labelledby={labelledBy ?? undefined}
+>
+  <div class="zdp-table-toolbar__body">
+    {#if title}
+      <strong class="zdp-table-toolbar__title">{title}</strong>
+    {/if}
+    {#if summary}
+      <p class="zdp-table-toolbar__summary">{summary}</p>
+    {/if}
+    {#if resolvedSelectedLabel}
+      <p class="zdp-table-toolbar__selection">{resolvedSelectedLabel}</p>
+    {/if}
+    <slot />
+  </div>
+
+  <div class="zdp-table-toolbar__controls">
+    <slot name="controls" />
+    {#if densityItems.length > 0}
+      <div class="zdp-table-toolbar__density">
+        <span class="zdp-table-toolbar__density-label">{densityLabel}</span>
+        <SegmentedControl
+          ariaLabel={densityLabel}
+          items={segmentedDensityItems}
+          selectedId={activeDensity}
+          size="sm"
+          onChange={handleDensityChange}
+        />
+      </div>
+    {/if}
+  </div>
+
+  <div class="zdp-table-toolbar__actions">
+    {#if normalizedSelectedCount > 0}
+      <slot name="selection-actions" />
+    {/if}
+    <slot name="actions" />
+  </div>
+</div>
+
+<style>
+  .zdp-table-toolbar {
+    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);
+    display: flex;
+    flex-wrap: wrap;
+    font-family: var(--zdp-font-family-sans);
+    gap: var(--zdp-space-3);
+    justify-content: space-between;
+    min-width: 0;
+    padding: var(--zdp-space-3);
+  }
+
+  .zdp-table-toolbar__body {
+    display: grid;
+    flex: 1 1 16rem;
+    gap: var(--zdp-space-1);
+    min-inline-size: min(100%, 16rem);
+  }
+
+  .zdp-table-toolbar__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);
+    min-width: 0;
+    overflow-wrap: var(--zdp-i18n-overflow-wrap);
+  }
+
+  .zdp-table-toolbar__summary,
+  .zdp-table-toolbar__selection {
+    font-size: var(--zdp-type-caption-size);
+    line-height: var(--zdp-type-caption-line-height);
+    margin: 0;
+    min-width: 0;
+    overflow-wrap: var(--zdp-i18n-overflow-wrap);
+  }
+
+  .zdp-table-toolbar__summary {
+    color: var(--zdp-color-ink-muted);
+  }
+
+  .zdp-table-toolbar__selection {
+    color: var(--zdp-color-ink-strong);
+    font-weight: var(--zdp-font-weight-medium);
+  }
+
+  .zdp-table-toolbar__controls,
+  .zdp-table-toolbar__actions,
+  .zdp-table-toolbar__density {
+    align-items: center;
+    display: flex;
+    flex: 0 1 auto;
+    flex-wrap: wrap;
+    gap: var(--zdp-space-2);
+    min-width: 0;
+  }
+
+  .zdp-table-toolbar__controls:empty,
+  .zdp-table-toolbar__actions:empty {
+    display: none;
+  }
+
+  .zdp-table-toolbar__actions {
+    justify-content: flex-end;
+    margin-inline-start: auto;
+  }
+
+  .zdp-table-toolbar__density-label {
+    color: var(--zdp-color-ink-muted);
+    font-size: var(--zdp-type-caption-size);
+    font-weight: var(--zdp-font-weight-medium);
+    line-height: var(--zdp-type-caption-line-height);
+  }
+
+  @media (max-width: 48rem) {
+    .zdp-table-toolbar__actions {
+      inline-size: 100%;
+      justify-content: flex-start;
+      margin-inline-start: 0;
+    }
+  }
+</style>

package/dist/components/Tabs.svelte

@@ -0,0 +1,205 @@
+<script lang="ts" context="module">
+  let nextTabsInstanceId = 0;
+</script>
+
+<script lang="ts">
+  interface TabItem {
+    readonly id: string;
+    readonly label: string;
+    readonly disabled?: boolean;
+  }
+
+  export let items: readonly TabItem[] = [];
+  export let selectedId: string | null = null;
+  export let ariaLabel = 'Tabs';
+  export let idPrefix: string | null = null;
+
+  const fallbackIdPrefix = `zdp-tabs-${++nextTabsInstanceId}`;
+
+  $: selectedItem =
+    items.find((item) => item.id === selectedId && !item.disabled) ??
+    items.find((item) => !item.disabled) ??
+    items[0] ??
+    null;
+  $: activeId = selectedItem?.id ?? '';
+
+  function selectTab(item: TabItem): void {
+    if (item.disabled) {
+      return;
+    }
+
+    selectedId = item.id;
+  }
+
+  function handleKeydown(event: KeyboardEvent): void {
+    if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) {
+      return;
+    }
+
+    const target = event.currentTarget as HTMLElement;
+    const tabs = Array.from(target.querySelectorAll<HTMLButtonElement>('[role="tab"]:not(:disabled)'));
+
+    if (tabs.length === 0) {
+      return;
+    }
+
+    event.preventDefault();
+
+    const currentIndex = Math.max(
+      0,
+      tabs.findIndex((tab) => tab.getAttribute('aria-selected') === 'true')
+    );
+    const nextIndex = getNextIndex(event.key, currentIndex, tabs.length);
+    const nextTab = tabs[nextIndex];
+
+    nextTab.focus();
+    nextTab.click();
+  }
+
+  function getNextIndex(key: string, currentIndex: number, length: number): number {
+    if (key === 'Home') {
+      return 0;
+    }
+
+    if (key === 'End') {
+      return length - 1;
+    }
+
+    if (key === 'ArrowLeft') {
+      return (currentIndex - 1 + length) % length;
+    }
+
+    return (currentIndex + 1) % length;
+  }
+
+  $: resolvedIdPrefix = toDomId(idPrefix ?? fallbackIdPrefix);
+
+  function tabId(id: string): string {
+    return `${resolvedIdPrefix}-tab-${toDomId(id)}`;
+  }
+
+  function panelId(id: string): string {
+    return `${resolvedIdPrefix}-panel-${toDomId(id)}`;
+  }
+
+  function toDomId(id: string): string {
+    return id.trim().replace(/[^a-zA-Z0-9_-]+/g, '-') || 'item';
+  }
+</script>
+
+<div class="zdp-tabs">
+  <div
+    class="zdp-tabs__list"
+    role="tablist"
+    aria-label={ariaLabel}
+    tabindex="-1"
+    onkeydown={handleKeydown}
+  >
+    {#each items as item}
+      <button
+        class={`zdp-tabs__tab ${item.id === activeId ? 'zdp-tabs__tab--active' : ''}`}
+        id={tabId(item.id)}
+        type="button"
+        role="tab"
+        aria-selected={item.id === activeId}
+        aria-controls={panelId(item.id)}
+        tabindex={item.id === activeId ? 0 : -1}
+        disabled={item.disabled}
+        onclick={() => selectTab(item)}
+      >
+        {item.label}
+      </button>
+    {/each}
+  </div>
+
+  {#if selectedItem}
+    <div
+      class="zdp-tabs__panel"
+      id={panelId(selectedItem.id)}
+      role="tabpanel"
+      aria-labelledby={tabId(selectedItem.id)}
+      tabindex="0"
+    >
+      <slot selectedId={selectedItem.id} selectedItem={selectedItem} />
+    </div>
+  {/if}
+</div>
+
+<style>
+  .zdp-tabs {
+    display: grid;
+    gap: var(--zdp-space-3);
+    min-width: 0;
+  }
+
+  .zdp-tabs__list {
+    align-items: center;
+    border-bottom: 1px solid var(--zdp-color-line-subtle);
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--zdp-space-1);
+    min-width: 0;
+  }
+
+  .zdp-tabs__tab {
+    align-items: center;
+    background: transparent;
+    border: 0;
+    border-bottom: var(--zdp-control-border-width) solid transparent;
+    border-radius: var(--zdp-control-radius) var(--zdp-control-radius) 0 0;
+    color: var(--zdp-color-ink-muted);
+    cursor: pointer;
+    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-height: var(--zdp-control-height-md);
+    padding: 0 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;
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  .zdp-tabs__tab:hover:not(:disabled) {
+    background: var(--zdp-color-surface-raised);
+    color: var(--zdp-color-ink-strong);
+  }
+
+  .zdp-tabs__tab--active {
+    border-bottom-color: var(--zdp-color-accent-primary-strong);
+    color: var(--zdp-color-ink-strong);
+  }
+
+  .zdp-tabs__tab: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-tabs__tab:disabled {
+    cursor: not-allowed;
+    opacity: 0.56;
+  }
+
+  .zdp-tabs__panel {
+    background: var(--zdp-color-surface-panel);
+    border: 1px solid var(--zdp-color-line-subtle);
+    border-radius: var(--zdp-control-radius);
+    color: var(--zdp-color-ink-normal);
+    display: grid;
+    gap: var(--zdp-space-2);
+    min-width: 0;
+    padding: var(--zdp-space-4);
+  }
+
+  .zdp-tabs__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);
+  }
+</style>