zdp-design-system 0.43.8

package/dist/components/TermSheet.svelte

@@ -0,0 +1,392 @@
+<script lang="ts">
+  import { onDestroy, tick } from 'svelte';
+  import { isZdpFocusableElement, zdpFocusableSelector } from '../focusable';
+  import { createZdpModalLayer } from '../modal-layer';
+  import type { ZdpTermSheetPlacement, ZdpTermSheetTerm } from '../term';
+
+  export let open = false;
+  export let id = 'zdp-term-sheet';
+  export let term: ZdpTermSheetTerm | null = null;
+  export let placement: ZdpTermSheetPlacement = 'right';
+  export let closeLabel = 'Close';
+  export let eyebrow = 'Term';
+  export let detailLabel = 'View details';
+  export let relatedLabel = 'Related terms';
+  export let exampleLabel = 'Example';
+  export let closeOnEscape = true;
+  export let closeOnBackdrop = true;
+  export let onClose: (() => void) | null = null;
+  export let onRelatedTerm: ((termId: string) => void) | null = null;
+
+  let panelElement: HTMLElement | null = null;
+  let layerElement: HTMLElement | null = null;
+  let previousFocusElement: HTMLElement | null = null;
+  let knownOpenState = false;
+  const modalLayer = createZdpModalLayer();
+
+  $: modalLayer.setActive(open && term !== null, layerElement);
+
+  onDestroy(() => {
+    modalLayer.destroy();
+  });
+
+  $: titleId = `${id}-title`;
+  $: descriptionId = `${id}-description`;
+  $: resolvedPlacement = placement;
+
+  $: if (open !== knownOpenState) {
+    knownOpenState = open;
+
+    if (open) {
+      void handleSheetOpened();
+    } else {
+      restorePreviousFocus();
+    }
+  }
+
+  async function handleSheetOpened(): Promise<void> {
+    if (typeof document === 'undefined') {
+      return;
+    }
+
+    const activeElement = document.activeElement;
+    previousFocusElement = activeElement instanceof HTMLElement ? activeElement : null;
+
+    await tick();
+
+    const firstElement = getFocusableElements()[0] ?? panelElement;
+    firstElement?.focus();
+  }
+
+  function restorePreviousFocus(): void {
+    if (typeof document === 'undefined') {
+      return;
+    }
+
+    if (previousFocusElement !== null && document.contains(previousFocusElement)) {
+      previousFocusElement.focus();
+    }
+
+    previousFocusElement = null;
+  }
+
+  function requestClose(): void {
+    open = false;
+    onClose?.();
+  }
+
+  function handleBackdropClick(): void {
+    if (closeOnBackdrop) {
+      requestClose();
+    }
+  }
+
+  function handleKeydown(event: KeyboardEvent): void {
+    if (event.key === 'Escape' && closeOnEscape) {
+      event.preventDefault();
+      requestClose();
+      return;
+    }
+
+    if (event.key !== 'Tab') {
+      return;
+    }
+
+    const focusableElements = getFocusableElements();
+
+    if (focusableElements.length === 0) {
+      event.preventDefault();
+      panelElement?.focus();
+      return;
+    }
+
+    const firstElement = focusableElements[0];
+    const lastElement = focusableElements[focusableElements.length - 1];
+
+    if (event.shiftKey && document.activeElement === firstElement) {
+      event.preventDefault();
+      lastElement.focus();
+      return;
+    }
+
+    if (!event.shiftKey && document.activeElement === lastElement) {
+      event.preventDefault();
+      firstElement.focus();
+    }
+  }
+
+  function getFocusableElements(): HTMLElement[] {
+    if (panelElement === null) {
+      return [];
+    }
+
+    return Array.from(panelElement.querySelectorAll<HTMLElement>(zdpFocusableSelector)).filter(
+      isZdpFocusableElement
+    );
+  }
+</script>
+
+{#if open && term !== null}
+  <div class="zdp-term-layer" bind:this={layerElement}>
+    <button
+      class="zdp-term-sheet__backdrop"
+      type="button"
+      aria-label={closeLabel}
+      tabindex="-1"
+      onclick={handleBackdropClick}
+    ></button>
+    <div
+      class={`zdp-term-sheet zdp-term-sheet--${resolvedPlacement}`}
+      id={id}
+      bind:this={panelElement}
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby={titleId}
+      aria-describedby={descriptionId}
+      tabindex="-1"
+      data-term-id={term.id}
+      data-zdp-ad-exclude="true"
+      data-zdp-term-id={term.id}
+      data-zdp-term-placement={resolvedPlacement}
+      data-zdp-term-surface="sheet"
+      onkeydown={handleKeydown}
+    >
+      <header class="zdp-term-sheet__header">
+        <div class="zdp-term-sheet__heading">
+          <p class="zdp-term-sheet__eyebrow">{eyebrow}</p>
+          <h2 id={titleId} class="zdp-term-sheet__title">{term.label}</h2>
+        </div>
+        <button class="zdp-term-sheet__close" type="button" aria-label={closeLabel} onclick={requestClose}>
+          <span aria-hidden="true">×</span>
+        </button>
+      </header>
+
+      <div class="zdp-term-sheet__body">
+        <p id={descriptionId} class="zdp-term-sheet__short">{term.short}</p>
+
+        {#if term.long}
+          <p>{term.long}</p>
+        {/if}
+
+        {#if term.example}
+          <section class="zdp-term-sheet__section" aria-label={exampleLabel}>
+            <h3>{exampleLabel}</h3>
+            <p>{term.example}</p>
+          </section>
+        {/if}
+
+        {#if term.relatedTerms && term.relatedTerms.length > 0}
+          <section class="zdp-term-sheet__section" aria-label={relatedLabel}>
+            <h3>{relatedLabel}</h3>
+            <div class="zdp-term-sheet__related">
+              {#each term.relatedTerms as relatedTerm}
+                <button
+                  class="zdp-term-sheet__related-button"
+                  type="button"
+                  data-term-id={relatedTerm.id}
+                  data-zdp-term-id={relatedTerm.id}
+                  onclick={() => onRelatedTerm?.(relatedTerm.id)}
+                >
+                  {relatedTerm.label}
+                </button>
+              {/each}
+            </div>
+          </section>
+        {/if}
+      </div>
+
+      {#if term.canonicalPath}
+        <footer class="zdp-term-sheet__footer">
+          <a class="zdp-term-sheet__detail-link" href={term.canonicalPath}>{detailLabel}</a>
+        </footer>
+      {/if}
+    </div>
+  </div>
+{/if}
+
+<style>
+  .zdp-term-layer {
+    display: contents;
+  }
+
+  .zdp-term-sheet {
+    background: var(--zdp-color-surface-panel);
+    border: var(--zdp-control-border-width) solid var(--zdp-color-line-strong);
+    box-sizing: border-box;
+    color: var(--zdp-color-ink-normal);
+    display: grid;
+    font-family: var(--zdp-font-family-sans);
+    gap: var(--zdp-space-4);
+    max-block-size: calc(100vh - var(--zdp-space-6));
+    overflow: auto;
+    padding: var(--zdp-space-5);
+    position: fixed;
+    z-index: 901;
+  }
+
+  .zdp-term-sheet__backdrop {
+    background: rgb(47 36 24 / 0.28);
+    border: 0;
+    cursor: pointer;
+    inset: 0;
+    margin: 0;
+    padding: 0;
+    position: fixed;
+    z-index: 900;
+  }
+
+  :global([data-zdp-theme="dark"]) .zdp-term-sheet__backdrop {
+    background: rgb(10 8 5 / 0.64);
+  }
+
+  .zdp-term-sheet--right {
+    block-size: calc(100vh - var(--zdp-space-6));
+    border-radius: var(--zdp-control-radius);
+    inline-size: min(28rem, calc(100vw - var(--zdp-space-6)));
+    inset-block: var(--zdp-space-3);
+    inset-inline-end: var(--zdp-space-3);
+  }
+
+  .zdp-term-sheet--bottom {
+    border-end-end-radius: 0;
+    border-end-start-radius: 0;
+    border-radius: var(--zdp-control-radius) var(--zdp-control-radius) 0 0;
+    inset-block-end: 0;
+    inset-inline: 0;
+    max-block-size: min(34rem, calc(100vh - var(--zdp-space-6)));
+  }
+
+  .zdp-term-sheet: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-term-sheet__header {
+    align-items: start;
+    display: grid;
+    gap: var(--zdp-space-3);
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+
+  .zdp-term-sheet__heading {
+    display: grid;
+    gap: var(--zdp-space-1);
+    min-width: 0;
+  }
+
+  .zdp-term-sheet__eyebrow {
+    color: var(--zdp-color-ink-muted);
+    font-size: var(--zdp-type-caption-size);
+    line-height: var(--zdp-type-caption-line-height);
+    margin: 0;
+  }
+
+  .zdp-term-sheet__title {
+    color: var(--zdp-color-ink-strong);
+    font-size: var(--zdp-type-title-size);
+    line-height: var(--zdp-type-title-line-height);
+    margin: 0;
+    overflow-wrap: anywhere;
+  }
+
+  .zdp-term-sheet__close {
+    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);
+    color: var(--zdp-color-ink-normal);
+    cursor: pointer;
+    display: inline-flex;
+    font-family: var(--zdp-font-family-sans);
+    font-size: var(--zdp-type-control-size);
+    height: var(--zdp-control-icon-sm);
+    justify-content: center;
+    line-height: 1;
+    -webkit-user-select: none;
+    user-select: none;
+    width: var(--zdp-control-icon-sm);
+  }
+
+  .zdp-term-sheet__close:focus-visible,
+  .zdp-term-sheet__related-button:focus-visible,
+  .zdp-term-sheet__detail-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-term-sheet__body {
+    display: grid;
+    gap: var(--zdp-space-3);
+    line-height: var(--zdp-type-body-line-height);
+    min-width: 0;
+  }
+
+  .zdp-term-sheet__body p,
+  .zdp-term-sheet__section h3 {
+    margin: 0;
+  }
+
+  .zdp-term-sheet__short {
+    color: var(--zdp-color-ink-strong);
+    font-weight: var(--zdp-font-weight-semibold);
+  }
+
+  .zdp-term-sheet__section {
+    display: grid;
+    gap: var(--zdp-space-2);
+  }
+
+  .zdp-term-sheet__section h3 {
+    color: var(--zdp-color-ink-strong);
+    font-size: var(--zdp-type-control-size);
+    line-height: var(--zdp-type-control-line-height);
+  }
+
+  .zdp-term-sheet__related {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--zdp-space-2);
+  }
+
+  .zdp-term-sheet__related-button {
+    background: var(--zdp-color-surface-raised);
+    border: var(--zdp-control-border-width) solid var(--zdp-color-line-normal);
+    border-radius: var(--zdp-control-radius);
+    color: var(--zdp-color-ink-normal);
+    cursor: pointer;
+    font: inherit;
+    min-height: var(--zdp-control-height-sm);
+    padding: 0 var(--zdp-space-2);
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  .zdp-term-sheet__footer {
+    border-block-start: var(--zdp-control-border-width) solid var(--zdp-color-line-subtle);
+    padding-block-start: var(--zdp-space-3);
+  }
+
+  .zdp-term-sheet__detail-link {
+    color: var(--zdp-color-ink-strong);
+    font-weight: var(--zdp-font-weight-semibold);
+    text-decoration: underline;
+    text-underline-offset: 0.16em;
+  }
+
+  @media (max-width: 720px) {
+    .zdp-term-sheet,
+    .zdp-term-sheet--right {
+      block-size: auto;
+      border-end-end-radius: 0;
+      border-end-start-radius: 0;
+      border-radius: var(--zdp-control-radius) var(--zdp-control-radius) 0 0;
+      inline-size: auto;
+      inset-block: auto 0;
+      inset-inline: 0;
+      max-block-size: min(34rem, calc(100vh - var(--zdp-space-6)));
+      padding: var(--zdp-space-4);
+    }
+  }
+</style>

package/dist/components/TermTrigger.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+  export let termId: string;
+  export let controls: string | null = null;
+  export let expanded = false;
+  export let disabled = false;
+  export let ariaLabel: string | null = null;
+  export let onopen: ((termId: string) => void) | null = null;
+
+  $: resolvedControls = controls !== null && expanded ? controls : null;
+
+  function handleClick(): void {
+    if (disabled) {
+      return;
+    }
+
+    onopen?.(termId);
+  }
+</script>
+
+<button
+  class="zdp-term-trigger"
+  type="button"
+  data-term-id={termId}
+  aria-label={ariaLabel ?? undefined}
+  aria-controls={resolvedControls ?? undefined}
+  aria-expanded={controls === null ? undefined : expanded}
+  aria-haspopup="dialog"
+  disabled={disabled}
+  onclick={handleClick}
+>
+  <slot />
+</button>
+
+<style>
+  .zdp-term-trigger {
+    align-items: baseline;
+    appearance: none;
+    background: transparent;
+    border: 0;
+    border-block-end: var(--zdp-control-border-width) solid var(--zdp-color-focus-line);
+    border-radius: var(--zdp-radius-sm);
+    color: inherit;
+    cursor: pointer;
+    display: inline;
+    font: inherit;
+    line-height: inherit;
+    margin: 0;
+    padding: 0 0.2rem;
+    text-align: inherit;
+    text-decoration: none;
+    text-underline-offset: 0.14em;
+  }
+
+  .zdp-term-trigger:hover:not(:disabled) {
+    background: var(--zdp-color-accent-primary-soft);
+    color: inherit;
+  }
+
+  .zdp-term-trigger:focus-visible {
+    background: var(--zdp-color-focus-surface);
+    color: var(--zdp-color-focus-text);
+    outline: var(--zdp-control-focus-outline-width) solid var(--zdp-color-focus-surface);
+    outline-offset: var(--zdp-control-focus-outline-offset);
+  }
+
+  .zdp-term-trigger:disabled {
+    cursor: not-allowed;
+    opacity: 0.58;
+  }
+</style>

package/dist/components/TextScaleControl.svelte

@@ -0,0 +1,219 @@
+<script lang="ts" context="module">
+  let nextTextScaleControlInstanceId = 0;
+</script>
+
+<script lang="ts">
+  import {
+    zdpTextScaleControlOptions,
+    type ZdpTextScale,
+    type ZdpTextScaleControlOption,
+    type ZdpTextScaleControlSize
+  } from '../preferences';
+
+  export let value: ZdpTextScale = 'base';
+  export let options: readonly ZdpTextScaleControlOption[] = zdpTextScaleControlOptions;
+  export let ariaLabel = 'Text size';
+  export let idPrefix: string | null = null;
+  export let size: ZdpTextScaleControlSize = 'md';
+  export let disabled = false;
+  export let onChange:
+    | ((event: MouseEvent | KeyboardEvent, option: ZdpTextScaleControlOption) => void)
+    | null = null;
+
+  const fallbackIdPrefix = `zdp-text-scale-control-${++nextTextScaleControlInstanceId}`;
+
+  $: enabledOptions = options.filter((option) => !option.disabled);
+  $: activeOption =
+    enabledOptions.find((option) => option.value === value) ?? enabledOptions[0] ?? options[0] ?? null;
+  $: activeValue = activeOption?.value ?? value;
+  $: resolvedIdPrefix = toDomId(idPrefix ?? fallbackIdPrefix);
+
+  function selectOption(event: MouseEvent | KeyboardEvent, option: ZdpTextScaleControlOption): void {
+    if (disabled || option.disabled) {
+      return;
+    }
+
+    const previousValue = value;
+    value = option.value;
+
+    if (previousValue !== option.value) {
+      onChange?.(event, option);
+    }
+  }
+
+  function handleKeydown(event: KeyboardEvent): void {
+    if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) {
+      return;
+    }
+
+    const target = event.currentTarget as HTMLElement;
+    const controls = Array.from(target.querySelectorAll<HTMLButtonElement>('[role="radio"]:not(:disabled)'));
+
+    if (controls.length === 0) {
+      return;
+    }
+
+    event.preventDefault();
+
+    const currentIndex = Math.max(
+      0,
+      controls.findIndex((control) => control.getAttribute('aria-checked') === 'true')
+    );
+    const nextIndex = getNextIndex(event.key, currentIndex, controls.length);
+    const nextControl = controls[nextIndex];
+
+    nextControl.focus();
+    nextControl.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;
+  }
+
+  function optionId(option: ZdpTextScaleControlOption): string {
+    return `${resolvedIdPrefix}-option-${toDomId(option.value)}`;
+  }
+
+  function toDomId(value: string): string {
+    return value.trim().replace(/[^a-zA-Z0-9_-]+/g, '-') || 'option';
+  }
+</script>
+
+<div
+  class={`zdp-text-scale-control zdp-text-scale-control--${size}`}
+  role="radiogroup"
+  aria-label={ariaLabel}
+  aria-disabled={disabled ? 'true' : undefined}
+  tabindex="-1"
+  data-zdp-text-scale-control
+  data-zdp-text-scale-value={activeValue}
+  onkeydown={handleKeydown}
+>
+  {#each options as option (option.value)}
+    <button
+      class={`zdp-text-scale-control__item ${
+        option.value === activeValue ? 'zdp-text-scale-control__item--selected' : ''
+      }`}
+      id={optionId(option)}
+      type="button"
+      role="radio"
+      aria-label={option.ariaLabel ?? undefined}
+      aria-checked={option.value === activeValue}
+      tabindex={option.value === activeValue ? 0 : -1}
+      disabled={disabled || option.disabled}
+      data-zdp-text-scale-option
+      data-zdp-text-scale-option-value={option.value}
+      onclick={(event) => selectOption(event, option)}
+    >
+      <span class="zdp-text-scale-control__sample" aria-hidden={option.ariaLabel ? 'true' : undefined}>
+        {option.label}
+      </span>
+    </button>
+  {/each}
+</div>
+
+<style>
+  .zdp-text-scale-control {
+    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;
+    flex: 0 0 auto;
+    font-family: var(--zdp-font-family-sans);
+    gap: var(--zdp-space-1);
+    max-width: 100%;
+    min-width: 0;
+    padding: var(--zdp-space-1);
+  }
+
+  .zdp-text-scale-control__item {
+    align-items: center;
+    background: transparent;
+    border: var(--zdp-control-border-width) solid transparent;
+    border-radius: var(--zdp-control-radius);
+    box-sizing: border-box;
+    color: var(--zdp-color-ink-muted);
+    cursor: pointer;
+    display: inline-grid;
+    font-family: var(--zdp-font-family-sans);
+    font-weight: var(--zdp-font-weight-medium);
+    justify-content: center;
+    line-height: 1;
+    min-width: 0;
+    padding: 0;
+    place-items: center;
+    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-text-scale-control--sm .zdp-text-scale-control__item {
+    height: var(--zdp-control-icon-sm);
+    width: var(--zdp-control-icon-sm);
+  }
+
+  .zdp-text-scale-control--md .zdp-text-scale-control__item {
+    height: var(--zdp-control-icon-md);
+    width: var(--zdp-control-icon-md);
+  }
+
+  .zdp-text-scale-control__item:hover:not(:disabled):not([aria-checked='true']) {
+    background: var(--zdp-color-surface-raised);
+    border-color: var(--zdp-color-line-strong);
+    color: var(--zdp-color-ink-strong);
+  }
+
+  .zdp-text-scale-control__item: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-text-scale-control__item--selected,
+  .zdp-text-scale-control__item[aria-checked='true'] {
+    background: var(--zdp-color-accent-primary-soft);
+    border-color: var(--zdp-color-accent-primary-strong);
+    color: var(--zdp-color-ink-strong);
+  }
+
+  .zdp-text-scale-control__item:disabled {
+    cursor: not-allowed;
+    opacity: 0.56;
+  }
+
+  .zdp-text-scale-control__sample {
+    display: inline-block;
+    line-height: 1;
+  }
+
+  .zdp-text-scale-control__item[data-zdp-text-scale-option-value='base'] .zdp-text-scale-control__sample {
+    font-size: var(--zdp-font-size-sm);
+  }
+
+  .zdp-text-scale-control__item[data-zdp-text-scale-option-value='large'] .zdp-text-scale-control__sample {
+    font-size: var(--zdp-font-size-md);
+  }
+
+  .zdp-text-scale-control__item[data-zdp-text-scale-option-value='larger'] .zdp-text-scale-control__sample {
+    font-size: var(--zdp-font-size-lg);
+  }
+</style>