@aiaiai-pt/design-system 0.1.0

package/components/KeyValue.svelte

@@ -0,0 +1,79 @@
+<!--
+  @component KeyValue
+
+  Structured data display. Key in mono label, value in mono data.
+  Consumes --kv-* tokens from components.css.
+
+  @example Stacked (default)
+  <KeyValue key="STATUS" value="Active" />
+
+  @example Inline
+  <KeyValue key="PLAN" value="Pro" layout="inline" />
+
+  @example Custom value via snippet
+  <KeyValue key="STATUS">
+    {#snippet value()}<Badge variant="success">ACTIVE</Badge>{/snippet}
+  </KeyValue>
+-->
+<script>
+  /**
+   * @typedef {'stacked' | 'inline'} Layout
+   */
+
+  let {
+    /** @type {string} */
+    key,
+    /** @type {string | import('svelte').Snippet | undefined} */
+    value = undefined,
+    /** @type {Layout} */
+    layout = 'stacked',
+    /** @type {string} */
+    class: className = '',
+    ...rest
+  } = $props();
+
+  // Determine if we got a snippet or a string for value
+  const hasSnippet = $derived(typeof value === 'function');
+</script>
+
+<div
+  class="kv kv-{layout} {className}"
+  {...rest}
+>
+  <span class="kv-key">{key}</span>
+  {#if hasSnippet}
+    <span class="kv-value">{@render /** @type {import('svelte').Snippet} */ (value)()}</span>
+  {:else if value != null}
+    <span class="kv-value">{value}</span>
+  {/if}
+</div>
+
+<style>
+  .kv {
+    display: flex;
+    gap: var(--kv-gap);
+  }
+
+  .kv-stacked {
+    flex-direction: column;
+  }
+
+  .kv-inline {
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .kv-key {
+    font-family: var(--kv-key-font);
+    font-size: var(--kv-key-size);
+    color: var(--kv-key-color);
+    letter-spacing: var(--type-label-tracking);
+  }
+
+  .kv-value {
+    font-family: var(--kv-value-font);
+    font-size: var(--kv-value-size);
+    color: var(--kv-value-color);
+  }
+</style>

package/components/Label.svelte

@@ -0,0 +1,49 @@
+<!--
+  @component Label
+
+  Standalone form label. Uses the same typography tokens as Input labels.
+  Use this in complex form layouts where the label isn't built into a form component.
+
+  @example
+  <Label for="my-input">EMAIL ADDRESS</Label>
+
+  @example Disabled
+  <Label for="my-input" disabled>LOCKED FIELD</Label>
+-->
+<script>
+  let {
+    /** @type {string | undefined} */
+    for: htmlFor = undefined,
+    /** @type {boolean} */
+    disabled = false,
+    /** @type {string} */
+    class: className = '',
+    /** @type {import('svelte').Snippet | undefined} */
+    children = undefined,
+    ...rest
+  } = $props();
+</script>
+
+<label
+  for={htmlFor}
+  class="label {className}"
+  class:label-disabled={disabled}
+  {...rest}
+>
+  {#if children}{@render children()}{/if}
+</label>
+
+<style>
+  .label {
+    font-family: var(--input-label-font);
+    font-size: var(--input-label-size);
+    letter-spacing: var(--input-label-tracking);
+    color: var(--input-label-color);
+    cursor: default;
+  }
+
+  .label-disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+</style>

package/components/List.svelte

@@ -0,0 +1,70 @@
+<!--
+  @component List
+
+  Container for sequences of items. Two variants:
+  - "gap" (default) — flex column with `var(--list-gap)` between children.
+  - "bordered" — outer border + border-radius + overflow hidden. Children use border-bottom dividers.
+
+  Consumes --list-* tokens from components.css.
+
+  @example Gap variant (default)
+  <List>
+    <ListItem>First item</ListItem>
+    <ListItem>Second item</ListItem>
+  </List>
+
+  @example Bordered variant
+  <List variant="bordered">
+    <ListItem>Row one</ListItem>
+    <ListItem>Row two</ListItem>
+  </List>
+-->
+<script>
+  /**
+   * @typedef {'gap' | 'bordered'} Variant
+   */
+
+  let {
+    /** @type {Variant} */
+    variant = 'gap',
+    /** @type {string} */
+    class: className = '',
+    /** @type {import('svelte').Snippet | undefined} */
+    children = undefined,
+    ...rest
+  } = $props();
+</script>
+
+<div class="list list-{variant} {className}" role="list" {...rest}>
+  {#if children}{@render children()}{/if}
+</div>
+
+<style>
+  .list {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .list-gap {
+    gap: var(--list-gap);
+  }
+
+  .list-bordered {
+    border: var(--list-border);
+    border-radius: var(--list-border-radius);
+    overflow: hidden;
+  }
+
+  /* Bordered variant: dividers + hover on direct children */
+  .list-bordered > :global([role="listitem"]) {
+    border-bottom: var(--list-item-divider);
+  }
+
+  .list-bordered > :global([role="listitem"]:last-child) {
+    border-bottom: none;
+  }
+
+  .list-bordered > :global([role="listitem"]:hover) {
+    background: var(--list-item-bg-hover);
+  }
+</style>

package/components/ListItem.svelte

@@ -0,0 +1,125 @@
+<!--
+  @component ListItem
+
+  A single row with leading content area (flex: 1, column layout) and trailing action area (flex-shrink: 0).
+  Consumes --list-item-* tokens from components.css.
+
+  @example Simple content
+  <ListItem>Item text here</ListItem>
+
+  @example With leading and trailing snippets
+  <ListItem>
+    {#snippet leading()}
+      <span class="name">Pipeline v2</span>
+      <span class="desc">Last run: 2 hours ago</span>
+    {/snippet}
+    {#snippet trailing()}
+      <Toggle checked />
+    {/snippet}
+  </ListItem>
+
+  @example Interactive (renders as button)
+  <ListItem interactive onclick={() => select(id)}>
+    {#snippet leading()}
+      <span>Clickable row</span>
+    {/snippet}
+  </ListItem>
+-->
+<script>
+  let {
+    /** @type {boolean} */
+    interactive = false,
+    /** @type {string} */
+    class: className = '',
+    /** @type {import('svelte').Snippet | undefined} */
+    leading = undefined,
+    /** @type {import('svelte').Snippet | undefined} */
+    trailing = undefined,
+    /** @type {import('svelte').Snippet | undefined} */
+    children = undefined,
+    ...rest
+  } = $props();
+</script>
+
+{#snippet body()}
+  <div class="list-item-leading">
+    {#if leading}
+      {@render leading()}
+    {:else if children}
+      {@render children()}
+    {/if}
+  </div>
+  {#if trailing}
+    <div class="list-item-trailing">
+      {@render trailing()}
+    </div>
+  {/if}
+{/snippet}
+
+{#if interactive}
+  <button
+    class="list-item list-item-interactive {className}"
+    role="listitem"
+    {...rest}
+  >
+    {@render body()}
+  </button>
+{:else}
+  <div
+    class="list-item {className}"
+    role="listitem"
+    {...rest}
+  >
+    {@render body()}
+  </div>
+{/if}
+
+<style>
+  .list-item {
+    display: flex;
+    align-items: center;
+    gap: var(--list-item-gap);
+    padding: var(--list-item-padding-y) var(--list-item-padding-x);
+    background: var(--list-item-bg);
+    transition: background var(--list-item-transition);
+  }
+
+  .list-item-interactive {
+    all: unset;
+    display: flex;
+    align-items: center;
+    gap: var(--list-item-gap);
+    padding: var(--list-item-padding-y) var(--list-item-padding-x);
+    background: var(--list-item-bg);
+    transition: background var(--list-item-transition);
+    width: 100%;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: inherit;
+    text-align: left;
+  }
+
+  .list-item-interactive:hover {
+    background: var(--list-item-bg-hover);
+  }
+
+  .list-item-interactive:focus-visible {
+    outline: var(--focus-ring-width) solid var(--focus-ring-color);
+    outline-offset: calc(-1 * var(--focus-ring-offset));
+  }
+
+  .list-item-leading {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--list-item-leading-gap);
+  }
+
+  .list-item-trailing {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    gap: var(--list-item-trailing-gap);
+  }
+</style>

package/components/Menu.svelte

@@ -0,0 +1,161 @@
+<!--
+  @component Menu
+
+  Positioned floating menu anchored to a trigger element.
+  Composes Popover internally and adds WAI-ARIA Menu Button semantics:
+  arrow key navigation, typeahead, and Enter/Space activation.
+
+  Consumes --menu-* tokens from components.css.
+
+  @example
+  <button bind:this={anchor} onclick={() => open = !open}>Options</button>
+  <Menu bind:open {anchor} placement="bottom-start">
+    <MenuItem onclick={handleEdit}>
+      {#snippet leading()}<PencilIcon size={14} />{/snippet}
+      Edit name
+    </MenuItem>
+    <MenuSeparator />
+    <MenuItem variant="destructive" onclick={handleDelete}>
+      {#snippet leading()}<TrashIcon size={14} />{/snippet}
+      Delete
+    </MenuItem>
+  </Menu>
+-->
+<script>
+  import Popover from './Popover.svelte';
+
+  let {
+    /** @type {boolean} */
+    open = $bindable(false),
+    /** @type {HTMLElement | undefined} */
+    anchor = undefined,
+    /** @type {'bottom-start' | 'bottom-end' | 'top-start' | 'top-end'} */
+    placement = 'bottom-start',
+    /** @type {(() => void) | undefined} */
+    onclose = undefined,
+    /** @type {string} */
+    class: className = '',
+    /** @type {import('svelte').Snippet | undefined} */
+    children = undefined,
+    ...rest
+  } = $props();
+
+  /** @type {HTMLElement | undefined} */
+  let menuEl;
+
+  let typeaheadBuffer = $state('');
+  let typeaheadTimer = $state(0);
+
+  /**
+   * Get all enabled menu items inside the menu container.
+   * @returns {HTMLElement[]}
+   */
+  function getItems() {
+    if (!menuEl) return [];
+    return /** @type {HTMLElement[]} */ (
+      Array.from(menuEl.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])'))
+    );
+  }
+
+  /**
+   * Focus the menu item at the given index (clamped).
+   * @param {HTMLElement[]} items
+   * @param {number} index
+   */
+  function focusItem(items, index) {
+    const clamped = Math.max(0, Math.min(items.length - 1, index));
+    items[clamped]?.focus();
+  }
+
+  /** @param {KeyboardEvent} e */
+  function handleKeydown(e) {
+    const items = getItems();
+    if (items.length === 0) return;
+
+    const current = /** @type {HTMLElement} */ (document.activeElement);
+    const currentIndex = items.indexOf(current);
+
+    switch (e.key) {
+      case 'ArrowDown': {
+        e.preventDefault();
+        const next = currentIndex < items.length - 1 ? currentIndex + 1 : 0;
+        focusItem(items, next);
+        break;
+      }
+      case 'ArrowUp': {
+        e.preventDefault();
+        const prev = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
+        focusItem(items, prev);
+        break;
+      }
+      case 'Home': {
+        e.preventDefault();
+        focusItem(items, 0);
+        break;
+      }
+      case 'End': {
+        e.preventDefault();
+        focusItem(items, items.length - 1);
+        break;
+      }
+      case 'Enter':
+      case ' ': {
+        e.preventDefault();
+        if (current && current.getAttribute('role') === 'menuitem') {
+          current.click();
+        }
+        break;
+      }
+      default: {
+        // Typeahead: printable characters
+        if (e.key.length === 1 && !e.ctrlKey && !e.metaKey) {
+          e.preventDefault();
+          clearTimeout(typeaheadTimer);
+          typeaheadBuffer += e.key.toLowerCase();
+          typeaheadTimer = /** @type {number} */ (/** @type {unknown} */ (setTimeout(() => {
+            typeaheadBuffer = '';
+          }, 500)));
+
+          const match = items.find((item) =>
+            (item.textContent ?? '').trim().toLowerCase().startsWith(typeaheadBuffer)
+          );
+          if (match) match.focus();
+        }
+      }
+    }
+  }
+</script>
+
+<Popover
+  bind:open
+  {anchor}
+  {placement}
+  {onclose}
+  class="menu-popover {className}"
+  role="menu"
+  aria-orientation="vertical"
+  {...rest}
+>
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    bind:this={menuEl}
+    class="menu"
+    onkeydown={handleKeydown}
+  >
+    {#if children}{@render children()}{/if}
+  </div>
+</Popover>
+
+<style>
+  :global(.menu-popover) {
+    padding: 0 !important;
+    min-width: var(--menu-min-width);
+  }
+
+  .menu {
+    display: flex;
+    flex-direction: column;
+    padding: var(--menu-padding);
+    outline: none;
+  }
+</style>

package/components/MenuItem.svelte

@@ -0,0 +1,120 @@
+<!--
+  @component MenuItem
+
+  A single actionable row inside a Menu.
+  Renders as <button role="menuitem"> with optional leading/trailing snippets.
+
+  Consumes --menu-item-* tokens from components.css.
+
+  @example
+  <MenuItem onclick={handleEdit}>
+    {#snippet leading()}<PencilIcon size={14} />{/snippet}
+    Edit name
+  </MenuItem>
+
+  @example Destructive
+  <MenuItem variant="destructive" onclick={handleDelete}>
+    {#snippet leading()}<TrashIcon size={14} />{/snippet}
+    Delete
+  </MenuItem>
+
+  @example With keyboard shortcut
+  <MenuItem onclick={handleCopy}>
+    Copy
+    {#snippet trailing()}<kbd>⌘C</kbd>{/snippet}
+  </MenuItem>
+-->
+<script>
+  let {
+    /** @type {'default' | 'destructive'} */
+    variant = 'default',
+    /** @type {boolean} */
+    disabled = false,
+    /** @type {import('svelte').Snippet | undefined} */
+    leading = undefined,
+    /** @type {import('svelte').Snippet | undefined} */
+    trailing = undefined,
+    /** @type {import('svelte').Snippet | undefined} */
+    children = undefined,
+    /** @type {string} */
+    class: className = '',
+    ...rest
+  } = $props();
+</script>
+
+<button
+  role="menuitem"
+  class="menu-item menu-item-{variant} {className}"
+  class:menu-item-disabled={disabled}
+  disabled={disabled || undefined}
+  aria-disabled={disabled || undefined}
+  tabindex={disabled ? -1 : -1}
+  {...rest}
+>
+  {#if leading}
+    <span class="menu-item-leading" aria-hidden="true">{@render leading()}</span>
+  {/if}
+  <span class="menu-item-label">
+    {#if children}{@render children()}{/if}
+  </span>
+  {#if trailing}
+    <span class="menu-item-trailing">{@render trailing()}</span>
+  {/if}
+</button>
+
+<style>
+  .menu-item {
+    all: unset;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    gap: var(--menu-item-gap);
+    min-height: var(--menu-item-height);
+    padding: var(--menu-item-padding-y) var(--menu-item-padding-x);
+    border-radius: var(--menu-item-radius);
+    font-size: var(--menu-item-font-size);
+    color: var(--menu-item-color);
+    cursor: pointer;
+    user-select: none;
+    text-align: start;
+    width: 100%;
+  }
+
+  .menu-item:hover:not(.menu-item-disabled),
+  .menu-item:focus-visible:not(.menu-item-disabled) {
+    background: var(--menu-item-bg-hover);
+    outline: none;
+  }
+
+  .menu-item-destructive {
+    color: var(--menu-item-color-destructive);
+  }
+
+  .menu-item-disabled {
+    color: var(--menu-item-color-disabled);
+    cursor: default;
+    pointer-events: none;
+  }
+
+  .menu-item-leading {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+  }
+
+  .menu-item-label {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .menu-item-trailing {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    color: var(--menu-item-color-disabled);
+    font-size: var(--type-caption-size);
+  }
+</style>

package/components/MenuSeparator.svelte

@@ -0,0 +1,34 @@
+<!--
+  @component MenuSeparator
+
+  A thin visual divider between groups of MenuItems.
+  Consumes --menu-separator-* tokens from components.css.
+
+  @example
+  <Menu bind:open {anchor}>
+    <MenuItem>Edit</MenuItem>
+    <MenuSeparator />
+    <MenuItem variant="destructive">Delete</MenuItem>
+  </Menu>
+-->
+<script>
+  let {
+    /** @type {string} */
+    class: className = '',
+    ...rest
+  } = $props();
+</script>
+
+<div
+  role="separator"
+  class="menu-separator {className}"
+  {...rest}
+></div>
+
+<style>
+  .menu-separator {
+    height: 1px;
+    background: var(--menu-separator-color);
+    margin: var(--menu-separator-spacing) 0;
+  }
+</style>