zdp-design-system 0.43.8

package/dist/components/Accordion.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+  import Disclosure from './Disclosure.svelte';
+  import type {
+    ZdpAccordionItem,
+    ZdpAccordionMode,
+    ZdpDisclosureHeadingLevel
+  } from '../disclosure';
+
+  export let items: readonly ZdpAccordionItem[] = [];
+  export let mode: ZdpAccordionMode = 'multiple';
+  export let ariaLabel = 'Collapsed sections';
+  export let headingLevel: ZdpDisclosureHeadingLevel | null = 3;
+  export let onOpenChange:
+    | ((
+        item: ZdpAccordionItem,
+        open: boolean,
+        openIds: readonly string[]
+      ) => void)
+    | null = null;
+
+  let openIds: readonly string[] = [];
+  let itemOpenSignature = '';
+
+  $: nextItemOpenSignature = `${mode}|${items
+    .map((item) => `${item.id}:${item.open === true}:${item.disabled === true}`)
+    .join('|')}`;
+  $: if (nextItemOpenSignature !== itemOpenSignature) {
+    openIds = normalizeInitialOpenIds(items, mode);
+    itemOpenSignature = nextItemOpenSignature;
+  }
+
+  function normalizeInitialOpenIds(
+    sourceItems: readonly ZdpAccordionItem[],
+    currentMode: ZdpAccordionMode
+  ): readonly string[] {
+    const initialOpenIds = sourceItems.filter((item) => item.open && !item.disabled).map((item) => item.id);
+
+    return currentMode === 'single' ? initialOpenIds.slice(0, 1) : initialOpenIds;
+  }
+
+  function isItemOpen(id: string): boolean {
+    return openIds.includes(id);
+  }
+
+  function handleItemOpenChange(item: ZdpAccordionItem, nextOpen: boolean): void {
+    if (item.disabled) {
+      return;
+    }
+
+    const nextOpenIds = resolveNextOpenIds(item.id, nextOpen);
+    openIds = nextOpenIds;
+    onOpenChange?.(item, nextOpen, nextOpenIds);
+  }
+
+  function resolveNextOpenIds(itemId: string, nextOpen: boolean): readonly string[] {
+    if (mode === 'single') {
+      return nextOpen ? [itemId] : [];
+    }
+
+    if (nextOpen) {
+      return openIds.includes(itemId) ? openIds : [...openIds, itemId];
+    }
+
+    return openIds.filter((id) => id !== itemId);
+  }
+</script>
+
+<div class="zdp-accordion" role="list" aria-label={ariaLabel}>
+  {#each items as item (item.id)}
+    <div class="zdp-accordion__item" role="listitem">
+      <Disclosure
+        id={item.id}
+        title={item.title}
+        open={isItemOpen(item.id)}
+        disabled={item.disabled ?? false}
+        {headingLevel}
+        onOpenChange={(nextOpen) => handleItemOpenChange(item, nextOpen)}
+      >
+        <p>{item.content}</p>
+      </Disclosure>
+    </div>
+  {/each}
+</div>
+
+<style>
+  .zdp-accordion {
+    color: var(--zdp-color-ink-normal);
+    display: grid;
+    font-family: var(--zdp-font-family-sans);
+    gap: var(--zdp-space-2);
+    min-width: 0;
+  }
+
+  .zdp-accordion__item {
+    min-width: 0;
+  }
+</style>

package/dist/components/Avatar.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+  import type { ZdpAvatarSize, ZdpAvatarTone } from '../identity';
+
+  export let label: string | null = null;
+  export let initials: string | null = null;
+  export let imageSrc: string | null = null;
+  export let size: ZdpAvatarSize = 'md';
+  export let tone: ZdpAvatarTone = 'neutral';
+  export let decorative = false;
+
+  $: resolvedLabel = label?.trim() || 'User';
+  $: resolvedInitials = initials?.trim() ?? '';
+  $: accessibilityLabel = decorative ? undefined : resolvedLabel;
+</script>
+
+<span
+  class={`zdp-avatar zdp-avatar--${size} zdp-avatar--${tone}`}
+  role={decorative ? undefined : 'img'}
+  aria-label={accessibilityLabel}
+  aria-hidden={decorative ? 'true' : undefined}
+>
+  {#if imageSrc}
+    <img class="zdp-avatar__image" src={imageSrc} alt="" />
+  {:else if resolvedInitials}
+    <span class="zdp-avatar__initials" aria-hidden="true">{resolvedInitials}</span>
+  {:else}
+    <span class="zdp-avatar__initials" aria-hidden="true"></span>
+  {/if}
+</span>
+
+<style>
+  .zdp-avatar {
+    align-items: center;
+    background: var(--zdp-color-surface-raised);
+    border: var(--zdp-control-border-width) solid var(--zdp-color-line-subtle);
+    border-radius: 50%;
+    box-sizing: border-box;
+    color: var(--zdp-color-ink-strong);
+    display: inline-flex;
+    flex: 0 0 auto;
+    font-family: var(--zdp-font-family-sans);
+    font-weight: var(--zdp-font-weight-medium);
+    justify-content: center;
+    line-height: 1;
+    overflow: hidden;
+    text-align: center;
+    vertical-align: middle;
+  }
+
+  .zdp-avatar--sm {
+    font-size: var(--zdp-font-size-xs);
+    height: var(--zdp-control-height-sm);
+    width: var(--zdp-control-height-sm);
+  }
+
+  .zdp-avatar--md {
+    font-size: var(--zdp-type-caption-size);
+    height: var(--zdp-control-height-md);
+    width: var(--zdp-control-height-md);
+  }
+
+  .zdp-avatar--lg {
+    font-size: var(--zdp-type-body-size);
+    height: calc(var(--zdp-control-height-md) + var(--zdp-space-4));
+    width: calc(var(--zdp-control-height-md) + var(--zdp-space-4));
+  }
+
+  .zdp-avatar--primary {
+    background: var(--zdp-color-accent-primary-soft);
+    border-color: var(--zdp-color-accent-primary-strong);
+  }
+
+  .zdp-avatar__image {
+    display: block;
+    height: 100%;
+    object-fit: cover;
+    width: 100%;
+  }
+
+  .zdp-avatar__initials {
+    display: block;
+    max-width: 100%;
+    overflow: hidden;
+    padding: 0 var(--zdp-space-1);
+    text-overflow: ellipsis;
+    -webkit-user-select: none;
+    user-select: none;
+    white-space: nowrap;
+  }
+</style>

package/dist/components/Badge.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  export let tone: 'neutral' | 'primary' | 'success' | 'warning' | 'danger' = 'neutral';
+  export let size: 'sm' | 'md' = 'md';
+</script>
+
+<span class={`zdp-badge zdp-badge--${tone} zdp-badge--${size}`}>
+  <slot />
+</span>
+
+<style>
+  .zdp-badge {
+    align-items: center;
+    background: var(--zdp-color-surface-panel);
+    border: 1px solid var(--zdp-color-line-strong);
+    border-radius: var(--zdp-control-radius);
+    box-sizing: border-box;
+    color: var(--zdp-color-ink-strong);
+    display: inline-flex;
+    font-family: var(--zdp-font-family-sans);
+    font-weight: var(--zdp-font-weight-medium);
+    justify-content: center;
+    line-height: var(--zdp-type-caption-line-height);
+    max-width: 100%;
+    min-width: 0;
+    text-decoration: none;
+    white-space: nowrap;
+  }
+
+  .zdp-badge--sm {
+    font-size: var(--zdp-font-size-xs);
+    min-height: var(--zdp-control-height-sm);
+    padding: 0 var(--zdp-space-2);
+  }
+
+  .zdp-badge--md {
+    font-size: var(--zdp-type-caption-size);
+    min-height: var(--zdp-control-height-sm);
+    padding: 0 var(--zdp-space-3);
+  }
+
+  .zdp-badge--primary {
+    background: var(--zdp-color-accent-primary-soft);
+    border-color: var(--zdp-color-accent-primary-strong);
+    color: var(--zdp-color-ink-strong);
+  }
+
+  .zdp-badge--success {
+    border-color: var(--zdp-color-accent-success);
+    color: var(--zdp-color-ink-strong);
+  }
+
+  .zdp-badge--warning {
+    border-color: var(--zdp-color-accent-warning);
+    color: var(--zdp-color-ink-strong);
+  }
+
+  .zdp-badge--danger {
+    border-color: var(--zdp-color-accent-danger);
+    color: var(--zdp-color-accent-danger);
+  }
+</style>

package/dist/components/Breadcrumb.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+  interface BreadcrumbItem {
+    readonly label: string;
+    readonly href?: string;
+    readonly current?: boolean;
+  }
+
+  export let items: readonly BreadcrumbItem[] = [];
+  export let ariaLabel = 'Breadcrumb';
+
+  $: normalizedItems = items.map((item, index) => ({
+    ...item,
+    current: item.current === true || index === items.length - 1
+  }));
+</script>
+
+<nav class="zdp-breadcrumb" aria-label={ariaLabel}>
+  <ol class="zdp-breadcrumb__list">
+    {#each normalizedItems as item, index}
+      <li class="zdp-breadcrumb__item">
+        {#if index > 0}
+          <span class="zdp-breadcrumb__separator" aria-hidden="true">/</span>
+        {/if}
+
+        {#if item.href && !item.current}
+          <a class="zdp-breadcrumb__link" href={item.href}>{item.label}</a>
+        {:else}
+          <span class="zdp-breadcrumb__current" aria-current={item.current ? 'page' : undefined}>
+            {item.label}
+          </span>
+        {/if}
+      </li>
+    {/each}
+  </ol>
+</nav>
+
+<style>
+  .zdp-breadcrumb {
+    color: var(--zdp-color-ink-muted);
+    font-family: var(--zdp-font-family-sans);
+    font-size: var(--zdp-type-body-small-size);
+    line-height: var(--zdp-type-body-small-line-height);
+    min-width: 0;
+  }
+
+  .zdp-breadcrumb__list {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--zdp-space-2);
+    list-style: none;
+    margin: 0;
+    min-width: 0;
+    padding: 0;
+  }
+
+  .zdp-breadcrumb__item {
+    align-items: center;
+    display: inline-flex;
+    gap: var(--zdp-space-2);
+    min-width: 0;
+  }
+
+  .zdp-breadcrumb__link {
+    border-bottom: var(--zdp-control-focus-underline-width) solid transparent;
+    color: var(--zdp-color-ink-normal);
+    overflow-wrap: var(--zdp-i18n-overflow-wrap);
+    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;
+  }
+
+  .zdp-breadcrumb__link:hover {
+    color: var(--zdp-color-ink-strong);
+  }
+
+  .zdp-breadcrumb__link:focus-visible {
+    background: var(--zdp-color-focus-surface);
+    border-bottom-color: var(--zdp-color-focus-line);
+    color: var(--zdp-color-focus-text);
+    outline: 0;
+  }
+
+  .zdp-breadcrumb__current {
+    color: var(--zdp-color-ink-strong);
+    font-weight: var(--zdp-font-weight-medium);
+    overflow-wrap: var(--zdp-i18n-overflow-wrap);
+  }
+
+  .zdp-breadcrumb__separator {
+    color: var(--zdp-color-line-strong);
+    -webkit-user-select: none;
+    user-select: none;
+  }
+</style>

package/dist/components/Button.svelte

@@ -0,0 +1,163 @@
+<script lang="ts">
+  export let variant: 'primary' | 'secondary' | 'danger' = 'primary';
+  export let size: 'sm' | 'md' = 'md';
+  export let type: 'button' | 'submit' | 'reset' = 'button';
+  export let disabled = false;
+  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 ariaLabel: string | null = null;
+  export let ariaControls: string | null = null;
+  export let ariaDescribedBy: string | null = null;
+  export let ariaExpanded: boolean | null = null;
+  export let ariaPressed: boolean | null = null;
+  export let ariaKeyShortcuts: string | null = null;
+  export let onclick: ((event: MouseEvent) => void) | null = null;
+</script>
+
+<button
+  class={`zdp-button zdp-button--${variant} zdp-button--${size}`}
+  {id}
+  {name}
+  {value}
+  {form}
+  {type}
+  {disabled}
+  aria-disabled={disabled}
+  aria-label={ariaLabel ?? undefined}
+  aria-controls={ariaControls ?? undefined}
+  aria-describedby={ariaDescribedBy ?? undefined}
+  aria-expanded={ariaExpanded ?? undefined}
+  aria-pressed={ariaPressed ?? undefined}
+  aria-keyshortcuts={ariaKeyShortcuts ?? undefined}
+  onclick={onclick ?? undefined}
+>
+  <slot />
+</button>
+
+<style>
+  .zdp-button {
+    align-items: center;
+    border: var(--zdp-control-border-width) solid var(--zdp-color-line-strong);
+    border-radius: var(--zdp-control-radius);
+    cursor: pointer;
+    display: inline-flex;
+    font-family: var(--zdp-font-family-sans);
+    font-weight: var(--zdp-font-weight-medium);
+    gap: var(--zdp-space-2);
+    justify-content: center;
+    font-size: var(--zdp-type-control-size);
+    line-height: var(--zdp-type-control-line-height);
+    min-height: var(--zdp-control-height-md);
+    text-decoration: none;
+    text-align: center;
+    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-button--sm {
+    font-size: var(--zdp-font-size-sm);
+    min-height: var(--zdp-control-height-sm);
+    padding: 0 var(--zdp-space-3);
+  }
+
+  .zdp-button--md {
+    font-size: var(--zdp-type-control-size);
+    min-height: var(--zdp-control-height-md);
+    padding: 0 var(--zdp-space-4);
+  }
+
+  .zdp-button--primary {
+    background: var(--zdp-color-accent-primary);
+    border-color: var(--zdp-color-accent-primary-strong);
+    color: var(--zdp-color-ink-strong);
+  }
+
+  .zdp-button--primary:hover:not(:disabled) {
+    background: var(--zdp-color-accent-primary-strong);
+    border-color: var(--zdp-color-accent-primary-strong);
+  }
+
+  .zdp-button--primary:active:not(:disabled) {
+    background: var(--zdp-color-accent-primary-strong);
+    border-color: var(--zdp-color-accent-primary-strong);
+  }
+
+  :global([data-zdp-theme="dark"]) .zdp-button--primary {
+    color: var(--zdp-color-ink-inverse);
+  }
+
+  .zdp-button--secondary {
+    background: var(--zdp-color-surface-panel);
+    border-color: var(--zdp-color-line-subtle);
+    color: var(--zdp-color-ink-strong);
+  }
+
+  .zdp-button--secondary:hover:not(:disabled) {
+    background: var(--zdp-color-surface-raised);
+    border-color: var(--zdp-color-line-strong);
+    color: var(--zdp-color-ink-strong);
+  }
+
+  .zdp-button--secondary:active:not(:disabled) {
+    background: var(--zdp-color-surface-raised);
+    border-color: var(--zdp-color-line-strong);
+  }
+
+  :global([data-zdp-theme="dark"]) .zdp-button--secondary {
+    background: var(--zdp-color-surface-panel);
+    border-color: var(--zdp-color-line-subtle);
+    color: var(--zdp-color-ink-muted);
+  }
+
+  :global([data-zdp-theme="dark"]) .zdp-button--secondary:hover:not(:disabled) {
+    background: var(--zdp-color-surface-raised);
+    border-color: var(--zdp-color-line-strong);
+    color: var(--zdp-color-ink-strong);
+  }
+
+  .zdp-button--danger {
+    background: var(--zdp-color-surface-panel);
+    border-color: var(--zdp-color-accent-danger);
+    color: var(--zdp-color-accent-danger);
+  }
+
+  :global([data-zdp-theme="dark"]) .zdp-button--danger {
+    background: transparent;
+    border-color: var(--zdp-color-accent-danger);
+    color: var(--zdp-color-accent-danger);
+  }
+
+  .zdp-button--danger:hover:not(:disabled) {
+    background: var(--zdp-color-surface-raised);
+  }
+
+  :global([data-zdp-theme="dark"]) .zdp-button--danger:hover:not(:disabled) {
+    background: var(--zdp-color-surface-raised);
+    border-color: var(--zdp-color-accent-danger);
+    color: var(--zdp-color-accent-danger);
+  }
+
+  .zdp-button--danger:active:not(:disabled) {
+    background: var(--zdp-color-surface-raised);
+    border-color: var(--zdp-color-accent-danger);
+    color: var(--zdp-color-accent-danger);
+  }
+
+  .zdp-button: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-button:disabled {
+    cursor: not-allowed;
+    opacity: 0.56;
+  }
+
+</style>

package/dist/components/Callout.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+  export let tone: 'neutral' | 'info' | 'success' | 'warning' | 'danger' = 'neutral';
+  export let labelledBy: string | null = null;
+  export let semanticRole: 'note' | 'status' | 'alert' | null = null;
+</script>
+
+<section
+  class={`zdp-callout zdp-callout--${tone}`}
+  aria-labelledby={labelledBy ?? undefined}
+  role={semanticRole ?? undefined}
+>
+  <span class="zdp-callout__mark" aria-hidden="true"></span>
+  <div class="zdp-callout__body">
+    <slot />
+  </div>
+</section>
+
+<style>
+  .zdp-callout {
+    align-items: start;
+    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-3);
+    grid-template-columns: var(--zdp-space-2) minmax(0, 1fr);
+    line-height: var(--zdp-type-body-small-line-height);
+    min-width: 0;
+    padding: var(--zdp-space-4);
+  }
+
+  .zdp-callout__mark {
+    align-self: start;
+    background: var(--zdp-color-line-strong);
+    border-radius: var(--zdp-radius-sm);
+    display: block;
+    height: 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-callout__body {
+    display: grid;
+    gap: var(--zdp-space-2);
+    min-width: 0;
+  }
+
+  .zdp-callout__body :global(*) {
+    margin-bottom: 0;
+    margin-top: 0;
+  }
+
+  .zdp-callout__body :global(strong) {
+    color: var(--zdp-color-ink-strong);
+    font-weight: var(--zdp-font-weight-semibold);
+  }
+
+  .zdp-callout--info .zdp-callout__mark {
+    background: var(--zdp-color-accent-primary);
+  }
+
+  .zdp-callout--success .zdp-callout__mark {
+    background: var(--zdp-color-accent-success);
+  }
+
+  .zdp-callout--warning .zdp-callout__mark {
+    background: var(--zdp-color-accent-warning);
+  }
+
+  .zdp-callout--danger {
+    border-color: var(--zdp-color-accent-danger);
+  }
+
+  .zdp-callout--danger .zdp-callout__mark {
+    background: var(--zdp-color-accent-danger);
+  }
+</style>