zdp-design-system 0.43.8

package/dist/components/Grid.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+  export let as: 'div' | 'section' | 'ul' | 'ol' = 'div';
+  export let columns: 'one' | 'two' | 'three' | 'four' | 'auto' = 'auto';
+  export let gap: 'sm' | 'md' | 'lg' | 'xl' = 'md';
+  export let labelledBy: string | null = null;
+
+  $: labelledGroupRole = as === 'div' && labelledBy ? 'group' : undefined;
+</script>
+
+<svelte:element
+  this={as}
+  class={`zdp-grid zdp-grid--columns-${columns} zdp-grid--gap-${gap}`}
+  role={labelledGroupRole}
+  aria-labelledby={labelledBy ?? undefined}
+>
+  <slot />
+</svelte:element>
+
+<style>
+  .zdp-grid {
+    display: grid;
+    gap: var(--zdp-space-4);
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
+    min-width: 0;
+  }
+
+  .zdp-grid--columns-one {
+    grid-template-columns: 1fr;
+  }
+
+  .zdp-grid--columns-two {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .zdp-grid--columns-three {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .zdp-grid--columns-four {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  .zdp-grid--columns-auto {
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
+  }
+
+  .zdp-grid--gap-sm {
+    gap: var(--zdp-space-2);
+  }
+
+  .zdp-grid--gap-md {
+    gap: var(--zdp-space-4);
+  }
+
+  .zdp-grid--gap-lg {
+    gap: var(--zdp-space-6);
+  }
+
+  .zdp-grid--gap-xl {
+    gap: var(--zdp-space-8);
+  }
+
+  @media (max-width: 64rem) {
+    .zdp-grid--columns-four {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+
+  @media (max-width: 42rem) {
+    .zdp-grid--columns-two,
+    .zdp-grid--columns-three,
+    .zdp-grid--columns-four {
+      grid-template-columns: 1fr;
+    }
+  }
+</style>

package/dist/components/HelpText.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  export let id: string | null = null;
+</script>
+
+<p class="zdp-help-text" id={id ?? undefined}>
+  <slot />
+</p>
+
+<style>
+  .zdp-help-text {
+    color: var(--zdp-color-ink-muted);
+    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/Icon.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  export let size: 'sm' | 'md' = 'md';
+  export let label: string | null = null;
+</script>
+
+<span
+  class={`zdp-icon zdp-icon--${size}`}
+  role={label ? 'img' : undefined}
+  aria-label={label ?? undefined}
+  aria-hidden={label ? undefined : 'true'}
+>
+  <slot />
+</span>
+
+<style>
+  .zdp-icon {
+    align-items: center;
+    display: inline-flex;
+    flex: 0 0 auto;
+    justify-content: center;
+    line-height: 1;
+    text-align: center;
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  .zdp-icon--sm {
+    font-size: var(--zdp-control-glyph-sm);
+    height: var(--zdp-control-glyph-sm);
+    width: var(--zdp-control-glyph-sm);
+  }
+
+  .zdp-icon--md {
+    font-size: var(--zdp-control-glyph-md);
+    height: var(--zdp-control-glyph-md);
+    width: var(--zdp-control-glyph-md);
+  }
+
+  .zdp-icon :global(svg) {
+    display: block;
+    flex: 0 0 auto;
+    height: 100%;
+    width: 100%;
+  }
+</style>

package/dist/components/IconButton.svelte

@@ -0,0 +1,162 @@
+<script lang="ts">
+  export let ariaLabel: string;
+  export let title: string | null = null;
+  export let variant: 'ghost' | 'solid' = 'ghost';
+  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 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-icon-button zdp-icon-button--${variant} zdp-icon-button--${size}`}
+  {id}
+  {name}
+  {value}
+  {form}
+  aria-label={ariaLabel}
+  title={title ?? ariaLabel}
+  {type}
+  {disabled}
+  aria-controls={ariaControls ?? undefined}
+  aria-describedby={ariaDescribedBy ?? undefined}
+  aria-expanded={ariaExpanded ?? undefined}
+  aria-pressed={ariaPressed ?? undefined}
+  aria-keyshortcuts={ariaKeyShortcuts ?? undefined}
+  onclick={onclick ?? undefined}
+>
+  <span class={`zdp-icon zdp-icon--${size} zdp-icon-button__glyph`} aria-hidden="true">
+    <slot />
+  </span>
+</button>
+
+<style>
+  .zdp-icon-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-regular);
+    justify-content: 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-icon-button--sm {
+    height: var(--zdp-control-icon-sm);
+    width: var(--zdp-control-icon-sm);
+  }
+
+  .zdp-icon-button--md {
+    height: var(--zdp-control-icon-md);
+    width: var(--zdp-control-icon-md);
+  }
+
+  .zdp-icon-button--ghost {
+    background: var(--zdp-color-surface-panel);
+    border-color: var(--zdp-color-line-subtle);
+    color: var(--zdp-color-ink-normal);
+  }
+
+  .zdp-icon-button--ghost:hover:not(:disabled) {
+    background: var(--zdp-color-surface-raised);
+    border-color: var(--zdp-color-line-strong);
+    color: var(--zdp-color-ink-strong);
+  }
+
+  :global([data-zdp-theme="dark"]) .zdp-icon-button--ghost {
+    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-icon-button--ghost:hover:not(:disabled) {
+    background: var(--zdp-color-surface-raised);
+    border-color: var(--zdp-color-line-strong);
+    color: var(--zdp-color-ink-strong);
+  }
+
+  .zdp-icon-button--ghost:active:not(:disabled) {
+    background: var(--zdp-color-surface-raised);
+    border-color: var(--zdp-color-line-strong);
+    color: var(--zdp-color-ink-strong);
+  }
+
+  .zdp-icon-button--solid {
+    background: var(--zdp-color-accent-primary);
+    border-color: var(--zdp-color-accent-primary-strong);
+    color: var(--zdp-color-ink-strong);
+  }
+
+  .zdp-icon-button--solid:hover:not(:disabled) {
+    background: var(--zdp-color-accent-primary-strong);
+    border-color: var(--zdp-color-accent-primary-strong);
+  }
+
+  .zdp-icon-button--solid:active:not(:disabled) {
+    background: var(--zdp-color-accent-primary-strong);
+    border-color: var(--zdp-color-accent-primary-strong);
+  }
+
+  :global([data-zdp-theme="dark"]) .zdp-icon-button--solid {
+    color: var(--zdp-color-ink-inverse);
+  }
+
+  .zdp-icon-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-icon-button:disabled {
+    cursor: not-allowed;
+    opacity: 0.56;
+  }
+
+  .zdp-icon,
+  .zdp-icon-button__glyph {
+    align-items: center;
+    display: inline-flex;
+    flex: 0 0 auto;
+    justify-content: center;
+    line-height: 1;
+    text-align: center;
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  .zdp-icon--sm {
+    font-size: var(--zdp-control-glyph-sm);
+    height: var(--zdp-control-glyph-sm);
+    width: var(--zdp-control-glyph-sm);
+  }
+
+  .zdp-icon--md {
+    font-size: var(--zdp-control-glyph-md);
+    height: var(--zdp-control-glyph-md);
+    width: var(--zdp-control-glyph-md);
+  }
+
+  .zdp-icon :global(svg),
+  .zdp-icon-button__glyph :global(svg) {
+    display: block;
+    flex: 0 0 auto;
+    height: 100%;
+    width: 100%;
+  }
+</style>

package/dist/components/IdentityChip.svelte

@@ -0,0 +1,130 @@
+<script lang="ts">
+  import Avatar from './Avatar.svelte';
+  import type { ZdpIdentityChipAriaCurrent, ZdpIdentityChipSize } from '../identity';
+
+  export let label = 'User';
+  export let description: string | null = null;
+  export let initials: string | null = null;
+  export let imageSrc: string | null = null;
+  export let href: string | null = null;
+  export let size: ZdpIdentityChipSize = 'md';
+  export let selected = false;
+  export let ariaLabel: string | null = null;
+  export let ariaCurrent: ZdpIdentityChipAriaCurrent | null = null;
+
+  $: chipClass = `zdp-identity-chip zdp-identity-chip--${size} ${href ? 'zdp-identity-chip--link' : ''}`;
+</script>
+
+{#if href}
+  <a
+    class={chipClass}
+    href={href}
+    aria-label={ariaLabel ?? undefined}
+    aria-current={ariaCurrent ?? undefined}
+    data-selected={selected ? 'true' : undefined}
+  >
+    <Avatar label={label} initials={initials} imageSrc={imageSrc} size={size} decorative />
+    <span class="zdp-identity-chip__body">
+      <span class="zdp-identity-chip__label">{label}</span>
+      {#if description}
+        <span class="zdp-identity-chip__description">{description}</span>
+      {/if}
+    </span>
+  </a>
+{:else}
+  <span
+    class={chipClass}
+    role={ariaLabel ? 'group' : undefined}
+    aria-label={ariaLabel ?? undefined}
+    data-selected={selected ? 'true' : undefined}
+  >
+    <Avatar label={label} initials={initials} imageSrc={imageSrc} size={size} decorative />
+    <span class="zdp-identity-chip__body">
+      <span class="zdp-identity-chip__label">{label}</span>
+      {#if description}
+        <span class="zdp-identity-chip__description">{description}</span>
+      {/if}
+    </span>
+  </span>
+{/if}
+
+<style>
+  .zdp-identity-chip {
+    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: inline-flex;
+    font-family: var(--zdp-font-family-sans);
+    gap: var(--zdp-space-2);
+    max-width: 100%;
+    min-width: 0;
+    text-align: start;
+    text-decoration: none;
+    vertical-align: middle;
+  }
+
+  .zdp-identity-chip--sm {
+    min-height: var(--zdp-control-height-md);
+    padding: var(--zdp-space-1) var(--zdp-space-2);
+  }
+
+  .zdp-identity-chip--md {
+    min-height: calc(var(--zdp-control-height-md) + var(--zdp-space-2));
+    padding: var(--zdp-space-2) var(--zdp-space-3);
+  }
+
+  .zdp-identity-chip--link {
+    cursor: pointer;
+    transition:
+      background-color var(--zdp-motion-fast) ease,
+      border-color var(--zdp-motion-fast) ease,
+      color var(--zdp-motion-fast) ease;
+  }
+
+  .zdp-identity-chip--link:hover {
+    background: var(--zdp-color-surface-raised);
+    border-color: var(--zdp-color-line-strong);
+    color: var(--zdp-color-ink-strong);
+  }
+
+  .zdp-identity-chip--link: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-identity-chip[data-selected='true'],
+  .zdp-identity-chip[aria-current] {
+    border-color: var(--zdp-color-accent-primary-strong);
+    color: var(--zdp-color-ink-strong);
+  }
+
+  .zdp-identity-chip__body {
+    display: grid;
+    gap: var(--zdp-space-1);
+    min-width: 0;
+  }
+
+  .zdp-identity-chip__label,
+  .zdp-identity-chip__description {
+    display: block;
+    min-width: 0;
+    overflow-wrap: var(--zdp-i18n-overflow-wrap);
+  }
+
+  .zdp-identity-chip__label {
+    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-identity-chip__description {
+    color: var(--zdp-color-ink-muted);
+    font-size: var(--zdp-type-caption-size);
+    line-height: var(--zdp-type-caption-line-height);
+  }
+</style>

package/dist/components/Inline.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+  export let as: 'div' | 'section' | 'nav' | 'header' | 'footer' = 'div';
+  export let gap: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';
+  export let align: 'stretch' | 'start' | 'center' | 'end' | 'baseline' = 'center';
+  export let justify: 'start' | 'center' | 'end' | 'between' = 'start';
+  export let labelledBy: string | null = null;
+
+  $: labelledGroupRole = as === 'div' && labelledBy ? 'group' : undefined;
+</script>
+
+<svelte:element
+  this={as}
+  class={`zdp-inline zdp-inline--gap-${gap} zdp-inline--align-${align} zdp-inline--justify-${justify}`}
+  role={labelledGroupRole}
+  aria-labelledby={labelledBy ?? undefined}
+>
+  <slot />
+</svelte:element>
+
+<style>
+  .zdp-inline {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--zdp-space-3);
+    justify-content: flex-start;
+    min-width: 0;
+  }
+
+  .zdp-inline--gap-xs {
+    gap: var(--zdp-space-1);
+  }
+
+  .zdp-inline--gap-sm {
+    gap: var(--zdp-space-2);
+  }
+
+  .zdp-inline--gap-md {
+    gap: var(--zdp-space-3);
+  }
+
+  .zdp-inline--gap-lg {
+    gap: var(--zdp-space-4);
+  }
+
+  .zdp-inline--gap-xl {
+    gap: var(--zdp-space-6);
+  }
+
+  .zdp-inline--align-stretch {
+    align-items: stretch;
+  }
+
+  .zdp-inline--align-start {
+    align-items: flex-start;
+  }
+
+  .zdp-inline--align-center {
+    align-items: center;
+  }
+
+  .zdp-inline--align-end {
+    align-items: flex-end;
+  }
+
+  .zdp-inline--align-baseline {
+    align-items: baseline;
+  }
+
+  .zdp-inline--justify-start {
+    justify-content: flex-start;
+  }
+
+  .zdp-inline--justify-center {
+    justify-content: center;
+  }
+
+  .zdp-inline--justify-end {
+    justify-content: flex-end;
+  }
+
+  .zdp-inline--justify-between {
+    justify-content: space-between;
+  }
+</style>

package/dist/components/InlineCode.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  export let text: string | null = null;
+  export let ariaLabel: string | null = null;
+</script>
+
+<code class="zdp-inline-code" aria-label={ariaLabel ?? undefined}>
+  {#if text !== null}
+    {text}
+  {:else}
+    <slot />
+  {/if}
+</code>
+
+<style>
+  .zdp-inline-code {
+    background: var(--zdp-color-surface-raised);
+    border: var(--zdp-control-border-width) solid var(--zdp-color-line-subtle);
+    border-radius: var(--zdp-radius-sm);
+    box-decoration-break: clone;
+    color: var(--zdp-color-ink-strong);
+    font-family: var(--zdp-font-family-mono);
+    font-size: 0.92em;
+    line-height: 1.4;
+    padding: 0.05em 0.36em;
+    word-break: break-word;
+  }
+</style>

package/dist/components/Input.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+  import type { HTMLInputAttributes } from 'svelte/elements';
+
+  type DescribedBy = string | readonly string[] | null;
+
+  export let id: string | null = null;
+  export let name: string | null = null;
+  export let type: HTMLInputAttributes['type'] = 'text';
+  export let value = '';
+  export let placeholder: string | null = null;
+  export let autocomplete: HTMLInputAttributes['autocomplete'] | 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;
+
+  $: ariaDescribedBy = normalizeIdRefs(describedBy);
+  $: resolvedErrorMessageId = invalid && errorMessageId ? errorMessageId : null;
+
+  function handleInput(event: Event): void {
+    value = (event.currentTarget as HTMLInputElement).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>
+
+<input
+  class="zdp-input"
+  id={id ?? undefined}
+  name={name ?? undefined}
+  {type}
+  {value}
+  placeholder={placeholder ?? undefined}
+  autocomplete={autocomplete ?? undefined}
+  aria-describedby={ariaDescribedBy ?? undefined}
+  aria-errormessage={resolvedErrorMessageId ?? undefined}
+  aria-invalid={invalid ? 'true' : undefined}
+  {disabled}
+  readonly={readonly}
+  {required}
+  oninput={handleInput}
+/>
+
+<style>
+  .zdp-input {
+    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-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;
+    width: 100%;
+  }
+
+  .zdp-input::placeholder {
+    color: var(--zdp-color-ink-muted);
+  }
+
+  .zdp-input:hover:not(:disabled) {
+    background: var(--zdp-color-surface-raised);
+    border-color: var(--zdp-color-line-strong);
+  }
+
+  .zdp-input: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-input[aria-invalid="true"] {
+    border-color: var(--zdp-color-accent-danger);
+  }
+
+  .zdp-input[readonly] {
+    background: var(--zdp-color-surface-raised);
+    color: var(--zdp-color-ink-normal);
+  }
+
+  .zdp-input[readonly]:hover {
+    background: var(--zdp-color-surface-raised);
+  }
+
+  .zdp-input:disabled {
+    cursor: not-allowed;
+    opacity: 0.56;
+  }
+</style>