@aiaiai-pt/design-system 0.1.0

package/components/Modal.svelte

@@ -0,0 +1,260 @@
+<!--
+  @component Modal
+
+  Centered overlay dialog with focus trap and backdrop.
+  Unlike Panel (slide-over drawer), Modal is centered and rounded.
+  Consumes --modal-* tokens from components.css.
+
+  @example
+  <Modal open={showConfirm} title="Delete Pipeline" onclose={() => showConfirm = false}>
+    Are you sure you want to delete this pipeline?
+    {#snippet footer()}
+      <Button variant="ghost" onclick={() => showConfirm = false}>CANCEL</Button>
+      <Button variant="destructive" onclick={handleDelete}>DELETE</Button>
+    {/snippet}
+  </Modal>
+
+  @example Small
+  <Modal open width="sm" title="Rename" onclose={close}>
+    <Input label="NAME" bind:value={name} />
+  </Modal>
+-->
+<script module>
+  let _modalUid = 0;
+</script>
+
+<script>
+  /**
+   * @typedef {'default' | 'sm' | 'lg'} Width
+   */
+
+  let {
+    /** @type {boolean} */
+    open = false,
+    /** @type {string | undefined} */
+    title,
+    /** @type {Width} */
+    width = 'default',
+    /** @type {(() => void) | undefined} */
+    onclose,
+    /** @type {string} */
+    class: className = '',
+    /** @type {import('svelte').Snippet | undefined} */
+    header = undefined,
+    /** @type {import('svelte').Snippet | undefined} */
+    footer = undefined,
+    /** @type {import('svelte').Snippet | undefined} */
+    children = undefined,
+    ...rest
+  } = $props();
+
+  const headerId = `modal-header-${_modalUid++}`;
+
+  /** @type {HTMLElement | undefined} */
+  let modalEl = $state();
+
+  const FOCUSABLE = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+
+  // Focus trap + scroll lock
+  $effect(() => {
+    if (!open || !modalEl) return;
+
+    const previouslyFocused = /** @type {HTMLElement | null} */ (document.activeElement);
+    document.body.style.overflow = 'hidden';
+
+    const firstFocusable = modalEl.querySelector(FOCUSABLE);
+    if (firstFocusable) /** @type {HTMLElement} */ (firstFocusable).focus();
+
+    /** @param {KeyboardEvent} e */
+    function handleKeydown(e) {
+      if (e.key === 'Escape') {
+        onclose?.();
+        return;
+      }
+      if (e.key !== 'Tab') return;
+
+      const focusable = /** @type {NodeListOf<HTMLElement>} */ (modalEl?.querySelectorAll(FOCUSABLE));
+      if (!focusable?.length) return;
+
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+
+      if (e.shiftKey && document.activeElement === first) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && document.activeElement === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    }
+
+    document.addEventListener('keydown', handleKeydown);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeydown);
+      document.body.style.overflow = '';
+      previouslyFocused?.focus();
+    };
+  });
+
+  function handleBackdropClick() {
+    onclose?.();
+  }
+</script>
+
+{#if open}
+  <div class="modal-backdrop" onclick={handleBackdropClick} aria-hidden="true"></div>
+
+  <div class="modal-container">
+    <div
+      bind:this={modalEl}
+      class="modal modal-{width} {className}"
+      role="dialog"
+      aria-modal="true"
+      aria-label={!header ? title : undefined}
+      aria-labelledby={header ? headerId : undefined}
+      {...rest}
+    >
+      <div class="modal-header">
+        {#if header}
+          <div id={headerId}>{@render header()}</div>
+        {:else if title}
+          <h2 class="modal-title">{title}</h2>
+        {/if}
+        <button
+          class="modal-close"
+          onclick={onclose}
+          aria-label="Close"
+        >
+          <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
+            <path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+          </svg>
+        </button>
+      </div>
+
+      <div class="modal-body">
+        {#if children}{@render children()}{/if}
+      </div>
+
+      {#if footer}
+        <div class="modal-footer">
+          {@render footer()}
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}
+
+<style>
+  .modal-backdrop {
+    position: fixed;
+    inset: 0;
+    background: var(--modal-backdrop);
+    z-index: 50;
+    animation: modal-fade-in var(--duration-normal) var(--easing-enter);
+  }
+
+  .modal-container {
+    position: fixed;
+    inset: 0;
+    z-index: 51;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--space-lg);
+    pointer-events: none;
+  }
+
+  .modal {
+    pointer-events: auto;
+    background: var(--modal-bg);
+    border-radius: var(--modal-radius);
+    box-shadow: var(--modal-shadow);
+    display: flex;
+    flex-direction: column;
+    max-height: calc(100vh - calc(2 * var(--space-lg)));
+    animation: modal-scale-in var(--modal-transition);
+  }
+
+  .modal-default { width: var(--modal-width); max-width: 100%; }
+  .modal-sm { width: var(--modal-width-sm); max-width: 100%; }
+  .modal-lg { width: var(--modal-width-lg); max-width: 100%; }
+
+  .modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    min-height: var(--modal-header-height);
+    padding: 0 var(--modal-padding);
+    border-bottom: var(--modal-header-border);
+    flex-shrink: 0;
+  }
+
+  .modal-title {
+    font-family: var(--modal-header-font);
+    font-size: var(--modal-header-size);
+    font-weight: var(--modal-header-weight);
+    color: var(--color-text);
+    margin: 0;
+  }
+
+  .modal-close {
+    all: unset;
+    box-sizing: border-box;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border-radius: var(--radius-sm);
+    color: var(--color-text-secondary);
+    transition: all var(--duration-instant) var(--easing-default);
+  }
+
+  .modal-close:hover {
+    background: var(--color-surface-secondary);
+    color: var(--color-text);
+  }
+
+  .modal-close:focus-visible {
+    outline: var(--focus-ring-width) solid var(--focus-ring-color);
+    outline-offset: var(--focus-ring-offset);
+  }
+
+  .modal-close svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  .modal-body {
+    flex: 1;
+    overflow-y: auto;
+    padding: var(--modal-padding);
+  }
+
+  .modal-footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--space-sm);
+    padding: var(--space-md) var(--modal-padding);
+    border-top: var(--modal-header-border);
+    flex-shrink: 0;
+  }
+
+  @keyframes modal-fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  @keyframes modal-scale-in {
+    from { opacity: 0; transform: scale(0.95); }
+    to { opacity: 1; transform: scale(1); }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .modal { animation: none; }
+    .modal-backdrop { animation: none; }
+  }
+</style>

package/components/OptionGrid.svelte

@@ -0,0 +1,195 @@
+<!--
+  @component OptionGrid
+
+  Exclusive selection grid using Card (interactive + selected).
+  Implements radiogroup semantics with keyboard navigation.
+
+  @example
+  <script>
+    import { Database, Code } from 'phosphor-svelte';
+    let type = $state(null);
+    const options = [
+      { value: 'sql', label: 'SQL', description: 'SQL transform', icon: Database },
+      { value: 'python', label: 'Python', description: 'Python code', icon: Code },
+    ];
+  </script>
+
+  <OptionGrid {options} bind:value={type} columns={2} />
+
+  @example Compact mode (no descriptions)
+  <OptionGrid {options} bind:value={type} columns={3} compact />
+-->
+<script>
+  import Card from './Card.svelte';
+
+  /**
+   * @typedef {{ value: string, label: string, description?: string, icon?: any }} GridOption
+   */
+
+  let {
+    /** @type {GridOption[]} */
+    options = [],
+    /** @type {string | null} */
+    value = $bindable(null),
+    /** @type {number} */
+    columns = 2,
+    /** @type {boolean} */
+    compact = false,
+    /** @type {string} */
+    class: className = '',
+    ...rest
+  } = $props();
+
+  /** @type {HTMLElement[]} */
+  let buttonRefs = [];
+
+  /**
+   * Handle keyboard navigation within the radiogroup.
+   * @param {KeyboardEvent} e
+   */
+  function handleKeydown(e) {
+    let next = -1;
+
+    switch (e.key) {
+      case 'ArrowRight':
+      case 'ArrowDown': {
+        e.preventDefault();
+        const idx = options.findIndex((o) => o.value === value);
+        next = idx < options.length - 1 ? idx + 1 : 0;
+        break;
+      }
+      case 'ArrowLeft':
+      case 'ArrowUp': {
+        e.preventDefault();
+        const idx = options.findIndex((o) => o.value === value);
+        next = idx > 0 ? idx - 1 : options.length - 1;
+        break;
+      }
+      default:
+        return;
+    }
+
+    if (next >= 0) {
+      value = options[next].value;
+      buttonRefs[next]?.focus();
+    }
+  }
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<!-- svelte-ignore a11y_interactive_supports_focus -->
+<div
+  class="option-grid {className}"
+  class:option-grid--compact={compact}
+  style:--cols={columns}
+  role="radiogroup"
+  onkeydown={handleKeydown}
+  {...rest}
+>
+  {#each options as option, i (option.value)}
+    {@const selected = value === option.value}
+    <Card {selected} class="option-card">
+      {#snippet children()}
+        <button
+          type="button"
+          class="option-button"
+          class:option-button--compact={compact}
+          role="radio"
+          aria-checked={selected}
+          tabindex={selected || (!value && options[0]?.value === option.value) ? 0 : -1}
+          onclick={() => value = option.value}
+          bind:this={buttonRefs[i]}
+        >
+          {#if option.icon}
+            <span class="option-icon" class:option-icon--compact={compact}>
+              <option.icon size={compact ? 20 : 24} weight="regular" />
+            </span>
+          {/if}
+          <span class="option-text">
+            <span class="option-label">{option.label}</span>
+            {#if !compact && option.description}
+              <span class="option-description">{option.description}</span>
+            {/if}
+          </span>
+        </button>
+      {/snippet}
+    </Card>
+  {/each}
+</div>
+
+<style>
+  .option-grid {
+    display: grid;
+    grid-template-columns: repeat(var(--cols, 2), 1fr);
+    gap: var(--space-sm);
+  }
+
+  /* Remove Card's internal padding — button handles layout */
+  .option-grid :global(.option-card) {
+    padding: 0;
+  }
+
+  .option-button {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--space-sm);
+    width: 100%;
+    padding: var(--space-md);
+    background: none;
+    border: none;
+    cursor: pointer;
+    text-align: left;
+    color: inherit;
+    font: inherit;
+  }
+
+  .option-button--compact {
+    align-items: center;
+    padding: var(--space-sm) var(--space-md);
+  }
+
+  .option-button:focus-visible {
+    outline: none;
+  }
+
+  .option-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--space-xl);
+    height: var(--space-xl);
+    background: var(--color-surface-secondary);
+    border-radius: var(--radius-sm);
+    color: var(--color-text-secondary);
+    flex-shrink: 0;
+  }
+
+  .option-icon--compact {
+    width: auto;
+    height: auto;
+    background: none;
+    border-radius: 0;
+  }
+
+  .option-text {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2xs);
+    min-width: 0;
+  }
+
+  .option-label {
+    font-family: var(--type-data-font);
+    font-size: var(--type-data-size);
+    font-weight: 500;
+    line-height: var(--type-data-leading);
+    color: var(--color-text);
+  }
+
+  .option-description {
+    font-family: var(--type-body-sm-font);
+    font-size: var(--type-body-sm-size);
+    line-height: var(--type-body-sm-leading);
+    color: var(--color-text-secondary);
+  }
+</style>

package/components/Panel.svelte

@@ -0,0 +1,256 @@
+<!--
+  @component Panel
+
+  Slide-over drawer surface. Opens from the right edge.
+  Consumes --panel-* tokens from components.css.
+
+  @example
+  <Panel open={showEditor} title="Edit Step" onclose={() => showEditor = false}>
+    Panel content here
+  </Panel>
+
+  @example Narrow
+  <Panel open width="narrow" title="Settings" onclose={close}>
+    Settings form
+  </Panel>
+-->
+<script module>
+  let _panelUid = 0;
+</script>
+
+<script>
+  /**
+   * @typedef {'default' | 'narrow' | 'wide'} Width
+   */
+
+  let {
+    /** @type {boolean} */
+    open = false,
+    /** @type {string | undefined} */
+    title,
+    /** @type {Width} */
+    width = 'default',
+    /** @type {(() => void) | undefined} */
+    onclose,
+    /** @type {string} */
+    class: className = '',
+    /** @type {import('svelte').Snippet | undefined} */
+    header = undefined,
+    /** @type {import('svelte').Snippet | undefined} */
+    children = undefined,
+    ...rest
+  } = $props();
+
+  const headerId = `panel-header-${_panelUid++}`;
+
+  /** @type {HTMLElement | undefined} */
+  let panelEl = $state();
+
+  const FOCUSABLE = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+
+  // Focus trap: save previous focus, trap Tab, restore on close
+  $effect(() => {
+    if (!open || !panelEl) return;
+
+    const previouslyFocused = /** @type {HTMLElement | null} */ (document.activeElement);
+
+    // Focus the close button on open
+    const firstFocusable = panelEl.querySelector(FOCUSABLE);
+    if (firstFocusable) /** @type {HTMLElement} */ (firstFocusable).focus();
+
+    /** @param {KeyboardEvent} e */
+    function handleKeydown(e) {
+      if (e.key === 'Escape') {
+        onclose?.();
+        return;
+      }
+      if (e.key !== 'Tab') return;
+
+      const focusable = /** @type {NodeListOf<HTMLElement>} */ (panelEl?.querySelectorAll(FOCUSABLE));
+      if (!focusable?.length) return;
+
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+
+      if (e.shiftKey && document.activeElement === first) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && document.activeElement === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    }
+
+    document.addEventListener('keydown', handleKeydown);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeydown);
+      previouslyFocused?.focus();
+    };
+  });
+
+  function handleBackdropClick() {
+    onclose?.();
+  }
+</script>
+
+{#if open}
+  <!-- Backdrop -->
+  <div
+    class="panel-backdrop"
+    onclick={handleBackdropClick}
+    aria-hidden="true"
+  ></div>
+
+  <!-- Panel -->
+  <aside
+    bind:this={panelEl}
+    class="panel panel-{width} {className}"
+    role="dialog"
+    aria-modal="true"
+    aria-label={!header ? title : undefined}
+    aria-labelledby={header ? headerId : undefined}
+    {...rest}
+  >
+    <div class="panel-header">
+      {#if header}
+        <div id={headerId}>{@render header()}</div>
+      {:else if title}
+        <h2 class="panel-title">{title}</h2>
+      {/if}
+      <button
+        class="panel-close"
+        onclick={onclose}
+        aria-label="Close panel"
+      >
+        <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
+          <path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+        </svg>
+      </button>
+    </div>
+
+    <div class="panel-body">
+      {#if children}{@render children()}{/if}
+    </div>
+  </aside>
+{/if}
+
+<style>
+  .panel-backdrop {
+    position: fixed;
+    inset: 0;
+    background: var(--panel-backdrop);
+    z-index: 40;
+    animation: fade-in var(--duration-normal) var(--easing-enter);
+  }
+
+  .panel {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background: var(--panel-bg);
+    border-left: var(--panel-border);
+    box-shadow: var(--panel-shadow);
+    border-radius: var(--panel-radius);
+    z-index: 41;
+    display: flex;
+    flex-direction: column;
+    animation: slide-in var(--panel-transition);
+  }
+
+  .panel-default {
+    width: var(--panel-width);
+    max-width: 100vw;
+  }
+
+  .panel-narrow {
+    width: var(--panel-width-narrow);
+    max-width: 100vw;
+  }
+
+  .panel-wide {
+    width: var(--panel-width-wide);
+    max-width: 100vw;
+  }
+
+  .panel-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: var(--panel-header-height);
+    padding: 0 var(--panel-padding);
+    border-bottom: var(--panel-header-border);
+    flex-shrink: 0;
+  }
+
+  .panel-title {
+    font-family: var(--panel-header-font);
+    font-size: var(--panel-header-size);
+    font-weight: var(--panel-header-weight);
+    color: var(--color-text);
+    margin: 0;
+  }
+
+  .panel-close {
+    all: unset;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border-radius: var(--radius-sm);
+    color: var(--color-text-secondary);
+    transition: all var(--duration-instant) var(--easing-default);
+  }
+
+  .panel-close:hover {
+    background: var(--color-surface-secondary);
+    color: var(--color-text);
+  }
+
+  .panel-close:focus-visible {
+    outline: var(--focus-ring-width) solid var(--focus-ring-color);
+    outline-offset: var(--focus-ring-offset);
+  }
+
+  .panel-close svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  .panel-body {
+    flex: 1;
+    overflow-y: auto;
+    padding: var(--panel-padding);
+  }
+
+  @keyframes slide-in {
+    from {
+      transform: translateX(100%);
+    }
+    to {
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .panel {
+      animation: none;
+    }
+
+    .panel-backdrop {
+      animation: none;
+    }
+  }
+</style>