@stephen-netu/design-system 0.1.0 → 0.2.0

package/dist/u0-primitives/grant-badge/GrantStatusBadge.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+  interface Props {
+    status: string;
+    size?: 'sm' | 'md' | 'lg';
+    class?: string;
+  }
+
+  let { status, size = 'sm', class: className = '' }: Props = $props();
+
+  let dotColor = $derived(
+    status === 'open' ? 'var(--color-success)'
+    : status === 'closed' ? 'var(--color-error)'
+    : status === 'forecast' ? 'var(--color-warning)'
+    : status === 'awarded' ? 'var(--color-accent)'
+    : status === 'drafting' ? 'var(--color-accent)'
+    : status === 'submitted' ? 'var(--color-accent)'
+    : status === 'internal_review' ? 'var(--color-warning)'
+    : status === 'revision' ? 'var(--color-warning)'
+    : status === 'final_review' ? 'var(--color-accent)'
+    : status === 'declined' ? 'var(--color-error)'
+    : 'var(--color-text-tertiary)'
+  );
+
+  let label = $derived(
+    status === 'internal_review' ? 'Review'
+    : status === 'final_review' ? 'Final'
+    : status.charAt(0).toUpperCase() + status.slice(1)
+  );
+
+  let variantClass = $derived(
+    size === 'sm' ? 'size-sm'
+    : size === 'lg' ? 'size-lg'
+    : 'size-md'
+  );
+</script>
+
+<span class="ds-grant-status {variantClass} {className}" aria-label={status} role="status">
+  <span class="ds-grant-status-dot" style="background: {dotColor}"></span>
+  <span class="ds-grant-status-label">{label}</span>
+</span>
+
+<style>
+  .ds-grant-status {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+    font-family: var(--font-sans);
+    font-weight: 600;
+    white-space: nowrap;
+    border-radius: var(--radius-full);
+  }
+
+  .ds-grant-status-dot {
+    display: inline-block;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+
+  .ds-grant-status-label {
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
+
+  .size-sm {
+    padding: 1px 6px;
+    font-size: var(--text-xs);
+  }
+
+  .size-md {
+    padding: 2px 8px;
+    font-size: var(--text-sm);
+  }
+
+  .size-lg {
+    padding: 3px 10px;
+    font-size: var(--text-base);
+  }
+</style>

package/dist/u0-primitives/grant-badge/GrantStatusBadge.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    status: string;
+    size?: 'sm' | 'md' | 'lg';
+    class?: string;
+}
+declare const GrantStatusBadge: import("svelte").Component<Props, {}, "">;
+type GrantStatusBadge = ReturnType<typeof GrantStatusBadge>;
+export default GrantStatusBadge;
+//# sourceMappingURL=GrantStatusBadge.svelte.d.ts.map

package/dist/u0-primitives/grant-badge/GrantStatusBadge.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GrantStatusBadge.svelte.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/grant-badge/GrantStatusBadge.svelte.ts"],"names":[],"mappings":"AAGE,UAAU,KAAK;IACb,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA0CH,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/u0-primitives/grant-badge/index.d.ts

@@ -0,0 +1,2 @@
+export { default as GrantStatusBadge } from './GrantStatusBadge.svelte';
+//# sourceMappingURL=index.d.ts.map

package/dist/u0-primitives/grant-badge/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/grant-badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/u0-primitives/grant-badge/index.js

@@ -0,0 +1 @@
+export { default as GrantStatusBadge } from './GrantStatusBadge.svelte';

package/dist/u0-primitives/index.d.ts

@@ -0,0 +1,27 @@
+export { default as Button } from './button/Button.svelte';
+export { default as Input } from './input/Input.svelte';
+export { default as Card } from './card/Card.svelte';
+export { default as Badge } from './badge/Badge.svelte';
+export { default as ValidityBadge } from './badge/ValidityBadge.svelte';
+export { default as Avatar } from './avatar/Avatar.svelte';
+export { default as Toggle } from './toggle/Toggle.svelte';
+export { default as Tooltip } from './tooltip/Tooltip.svelte';
+export { default as Dropdown } from './dropdown/Dropdown.svelte';
+export { default as Tabs } from './tabs/Tabs.svelte';
+export type { Tab } from './tabs/tabs-types';
+export { default as Spinner } from './spinner/Spinner.svelte';
+export { default as Modal } from './modal/Modal.svelte';
+export { default as AnimatedIcon } from './animated-icon/AnimatedIcon.svelte';
+export type { AnimatedIconName, AnimationType } from './animated-icon/index.js';
+export { default as VerticalToolbar } from './VerticalToolbar.svelte';
+export { default as AccordionSection } from './AccordionSection.svelte';
+export { default as LockIndicator } from './LockIndicator.svelte';
+export type { ToolbarItem } from './VerticalToolbar.svelte';
+export type { AccordionSectionProps } from './AccordionSection.svelte';
+export type { LockUser, LockState } from './LockIndicator.svelte';
+export { default as RsvpReader } from './rsvp/RsvpReader.svelte';
+export * from './rsvp/rsvp-utils';
+export { CommandPalette, commandStore } from './command-palette';
+export type { CommandSchema, CommandParameter, CommandResult, CommandContext, InvocationContext, CommandUIState, ActiveCommandSession, } from './command-palette';
+export { default as GrantStatusBadge } from './grant-badge/GrantStatusBadge.svelte';
+//# sourceMappingURL=index.d.ts.map

package/dist/u0-primitives/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/u0-primitives/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,8BAA8B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,oBAAoB,CAAC;AACrD,YAAY,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qCAAqC,CAAC;AAC9E,YAAY,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAGhF,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,YAAY,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,YAAY,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AACvE,YAAY,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAGlE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACjE,cAAc,mBAAmB,CAAC;AAGlC,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjE,YAAY,EACV,aAAa,EACb,gBAAgB,EAChB,aAAa,EACb,cAAc,EACd,iBAAiB,EACjB,cAAc,EACd,oBAAoB,GACrB,MAAM,mBAAmB,CAAC;AAG3B,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,uCAAuC,CAAC"}

package/{src/u0-primitives/index.ts → dist/u0-primitives/index.js}

@@ -1,35 +1,25 @@
 // U0 Primitives — Atomic UI components
-
 export { default as Button } from './button/Button.svelte';
 export { default as Input } from './input/Input.svelte';
 export { default as Card } from './card/Card.svelte';
 export { default as Badge } from './badge/Badge.svelte';
+export { default as ValidityBadge } from './badge/ValidityBadge.svelte';
 export { default as Avatar } from './avatar/Avatar.svelte';
 export { default as Toggle } from './toggle/Toggle.svelte';
 export { default as Tooltip } from './tooltip/Tooltip.svelte';
 export { default as Dropdown } from './dropdown/Dropdown.svelte';
 export { default as Tabs } from './tabs/Tabs.svelte';
-export type { Tab } from './tabs/tabs-types';
 export { default as Spinner } from './spinner/Spinner.svelte';
 export { default as Modal } from './modal/Modal.svelte';
 export { default as AnimatedIcon } from './animated-icon/AnimatedIcon.svelte';
-export type { AnimatedIconName, AnimationType } from './animated-icon/index.js';
-export * from './assay-badge/index.js';
-export * from './allay-gauge/index.js';
-export * from './expert-badge/index.js';
-
-// Re-export types
-export type {
-  ButtonProps,
-  InputProps,
-  CardProps,
-  BadgeProps,
-  ToggleProps,
-  SpinnerProps,
-  TabsProps,
-  ModalProps,
-  TooltipProps,
-  DropdownProps,
-  DropdownItem,
-  AvatarProps,
-} from '../p0-primitives/types';
+// New from NNJAS port
+export { default as VerticalToolbar } from './VerticalToolbar.svelte';
+export { default as AccordionSection } from './AccordionSection.svelte';
+export { default as LockIndicator } from './LockIndicator.svelte';
+// RSVP Speed Reading
+export { default as RsvpReader } from './rsvp/RsvpReader.svelte';
+export * from './rsvp/rsvp-utils';
+// Command Palette — Slash commands for LEAP chat
+export { CommandPalette, commandStore } from './command-palette';
+// Grant Status Badge — Grant lifecycle status indicator
+export { default as GrantStatusBadge } from './grant-badge/GrantStatusBadge.svelte';

package/dist/u0-primitives/input/Input.svelte

@@ -0,0 +1,410 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  export interface AutocompleteResult {
+    completions: Array<{ label: string; type?: string; detail?: string }>;
+  }
+
+  export interface AutocompleteConfig {
+    source: { complete: (query: string) => Promise<AutocompleteResult> | AutocompleteResult };
+    maxVisible?: number;
+    minChars?: number;
+  }
+
+  export interface Props {
+    value?: string;
+    type?: 'text' | 'search' | 'password' | 'email' | 'url';
+    placeholder?: string;
+    disabled?: boolean;
+    error?: boolean;
+    class?: string;
+    id?: string;
+    name?: string;
+    iconLeading?: Snippet;
+    iconTrailing?: Snippet;
+    autocomplete?: AutocompleteConfig;
+  }
+
+  let {
+    value = $bindable(''),
+    type = 'text',
+    placeholder = '',
+    disabled = false,
+    error = false,
+    class: className = '',
+    id,
+    name,
+    iconLeading,
+    iconTrailing,
+    autocomplete,
+  }: Props = $props();
+
+  let isFocused = $state(false);
+  let showPassword = $state(false);
+  let completions = $state<Array<{ label: string; type?: string; detail?: string }>>([]);
+  let showCompletions = $state(false);
+  let selectedIndex = $state(0);
+
+  let currentType = $derived(type === 'password' && showPassword ? 'text' : type);
+  let maxVisible = $derived(autocomplete?.maxVisible ?? 8);
+  let minChars = $derived(autocomplete?.minChars ?? 1);
+
+  async function fetchCompletions(query: string) {
+    if (!autocomplete || query.length < minChars) {
+      completions = [];
+      showCompletions = false;
+      return;
+    }
+    const result = await autocomplete.source.complete(query);
+    completions = result.completions.slice(0, maxVisible);
+    selectedIndex = 0;
+    showCompletions = completions.length > 0;
+  }
+
+  function applyCompletion(completion: { label: string }) {
+    value = completion.label;
+    completions = [];
+    showCompletions = false;
+  }
+
+  function handleInput() {
+    fetchCompletions(value);
+  }
+
+  function handleFocus() {
+    isFocused = true;
+    if (value.length >= minChars) {
+      fetchCompletions(value);
+    }
+  }
+
+  function handleBlur() {
+    isFocused = false;
+    setTimeout(() => {
+      showCompletions = false;
+    }, 150);
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (!showCompletions) return;
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      selectedIndex = Math.min(selectedIndex + 1, completions.length - 1);
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      selectedIndex = Math.max(selectedIndex - 1, 0);
+    } else if (e.key === 'Enter' && completions[selectedIndex]) {
+      e.preventDefault();
+      applyCompletion(completions[selectedIndex]);
+    } else if (e.key === 'Escape') {
+      showCompletions = false;
+    }
+  }
+
+  function togglePassword() {
+    showPassword = !showPassword;
+  }
+</script>
+
+<div class="ds-input-container">
+  <div
+    class="ds-input-wrapper {className}"
+    class:is-focused={isFocused}
+    class:is-disabled={disabled}
+    class:has-error={error}
+    class:has-leading={!!iconLeading}
+    class:has-trailing={!!iconTrailing || type === 'password'}
+  >
+  {#if iconLeading}
+    <div class="ds-input-icon leading">
+      {@render iconLeading()}
+    </div>
+  {/if}
+
+  <input
+    {id}
+    {name}
+    type={currentType}
+    bind:value
+    {placeholder}
+    {disabled}
+    aria-invalid={error ? 'true' : undefined}
+    aria-disabled={disabled ? 'true' : undefined}
+    aria-autocomplete={autocomplete ? 'list' : undefined}
+    aria-expanded={showCompletions ? 'true' : 'false'}
+    aria-activedescendant={showCompletions ? `autocomplete-option-${selectedIndex}` : undefined}
+    autocomplete="off"
+    onfocus={handleFocus}
+    onblur={handleBlur}
+    oninput={handleInput}
+    onkeydown={handleKeydown}
+    class="ds-input-element"
+  />
+
+  {#if type === 'password'}
+    <button 
+      type="button" 
+      class="ds-input-action trailing"
+      onclick={togglePassword}
+      aria-label={showPassword ? "Hide password" : "Show password"}
+      tabindex="-1"
+    >
+      {#if showPassword}
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path>
+          <line x1="1" y1="1" x2="23" y2="23"></line>
+        </svg>
+      {:else}
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
+          <circle cx="12" cy="12" r="3"></circle>
+        </svg>
+      {/if}
+    </button>
+  {:else if iconTrailing}
+    <div class="ds-input-icon trailing">
+      {@render iconTrailing()}
+    </div>
+  {/if}
+  
+  <!-- Animated bottom border glow -->
+  <div class="ds-input-glow"></div>
+  </div>
+
+  {#if showCompletions && autocomplete}
+    <ul
+      class="ds-input-autocomplete"
+      role="listbox"
+      id="autocomplete-list"
+    >
+      {#each completions as completion, i}
+        <li
+          id="autocomplete-option-{i}"
+          role="option"
+          aria-selected={i === selectedIndex}
+          class:selected={i === selectedIndex}
+          onclick={() => applyCompletion(completion)}
+          class="ds-input-autocomplete__item"
+        >
+          {#if completion.type}
+            <span class="ds-input-autocomplete__type">{completion.type}</span>
+          {/if}
+          <span class="ds-input-autocomplete__label">{completion.label}</span>
+          {#if completion.detail}
+            <span class="ds-input-autocomplete__detail">{completion.detail}</span>
+          {/if}
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</div>
+
+<style>
+  .ds-input-container {
+    position: relative;
+    width: 100%;
+  }
+
+  .ds-input-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    background: var(--color-bg-panel);
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-md);
+    transition: all var(--transition-fast);
+    overflow: hidden;
+  }
+
+  .ds-input-wrapper:hover:not(.is-disabled) {
+    border-color: var(--border-hover);
+    background: var(--color-bg-panel-elevated);
+  }
+
+  .ds-input-wrapper.is-focused {
+    border-color: var(--color-accent);
+    background: var(--color-bg-app); /* Darker inside when focused */
+    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
+  }
+
+  .ds-input-wrapper.has-error {
+    border-color: var(--color-error);
+  }
+
+  .ds-input-wrapper.is-disabled {
+    opacity: 0.5;
+    background: rgba(0,0,0,0.2);
+    cursor: not-allowed;
+  }
+
+  .ds-input-element {
+    flex: 1;
+    width: 100%;
+    height: 2.25rem;
+    padding: 0 var(--space-3);
+    background: transparent;
+    border: none;
+    outline: none;
+    color: var(--color-text-primary);
+    font-family: var(--font-sans);
+    font-size: var(--text-sm);
+  }
+
+  .ds-input-wrapper.has-leading .ds-input-element {
+    padding-left: var(--space-8);
+  }
+
+  .ds-input-wrapper.has-trailing .ds-input-element {
+    padding-right: var(--space-8);
+  }
+
+  .ds-input-element::placeholder {
+    color: var(--color-text-muted);
+  }
+
+  .ds-input-element:disabled {
+    cursor: not-allowed;
+  }
+
+  /* Icons */
+  .ds-input-icon, .ds-input-action {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-text-muted);
+    width: var(--space-8);
+    height: 100%;
+    transition: color var(--transition-fast);
+  }
+
+  .ds-input-icon :global(svg), .ds-input-action svg {
+    width: 1em;
+    height: 1em;
+  }
+
+  .ds-input-wrapper.is-focused .ds-input-icon.leading {
+    color: var(--color-accent);
+  }
+
+  .leading { left: 0; }
+  .trailing { right: 0; }
+
+  /* Actions (like password toggle) */
+  .ds-input-action {
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    border-radius: var(--radius-sm);
+  }
+
+  .ds-input-action:hover {
+    color: var(--color-text-primary);
+  }
+
+  .ds-input-action:focus-visible {
+    outline: 2px solid var(--color-accent);
+    outline-offset: -2px;
+  }
+
+  /* Animated Bottom Glow Line */
+  .ds-input-glow {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 1px;
+    background: var(--color-accent);
+    transform: scaleX(0);
+    transform-origin: center;
+    transition: transform var(--transition-normal);
+    box-shadow: 0 -1px 4px var(--color-accent-glow);
+  }
+
+  .ds-input-wrapper.is-focused .ds-input-glow {
+    transform: scaleX(1);
+  }
+
+  .ds-input-wrapper.has-error .ds-input-glow {
+    background: var(--color-error);
+    box-shadow: 0 -1px 4px rgba(166, 94, 94, 0.4);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ds-input-wrapper { transition: none; }
+    .ds-input-glow { transition: none; }
+  }
+
+  /* Autocomplete suggestion list */
+  .ds-input-autocomplete {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    z-index: 100;
+    list-style: none;
+    margin: 4px 0 0 0;
+    padding: 4px 0;
+    background: var(--color-bg-panel, #1a1a1a);
+    border: 1px solid var(--border-default, #2a2a2a);
+    border-radius: var(--radius-md, 6px);
+    box-shadow: var(--shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.4));
+    max-height: 240px;
+    overflow-y: auto;
+  }
+
+  .ds-input-autocomplete__item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2, 8px);
+    padding: 6px 12px;
+    cursor: pointer;
+    font-size: var(--text-sm, 13px);
+    color: var(--color-text-primary, #f5f2eb);
+  }
+
+  .ds-input-autocomplete__item:hover,
+  .ds-input-autocomplete__item.selected {
+    background: var(--color-accent, #b87333);
+    color: #fff;
+  }
+
+  .ds-input-autocomplete__type {
+    font-size: 10px;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    padding: 1px 5px;
+    border-radius: var(--radius-sm, 3px);
+    background: var(--color-bg-panel-elevated, #252525);
+    color: var(--color-text-tertiary, #6b6b6b);
+    flex-shrink: 0;
+  }
+
+  .ds-input-autocomplete__item:hover .ds-input-autocomplete__type,
+  .ds-input-autocomplete__item.selected .ds-input-autocomplete__type {
+    background: rgba(255, 255, 255, 0.15);
+    color: rgba(255, 255, 255, 0.8);
+  }
+
+  .ds-input-autocomplete__label {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .ds-input-autocomplete__detail {
+    font-size: 11px;
+    color: var(--color-text-tertiary, #6b6b6b);
+    flex-shrink: 0;
+  }
+
+  .ds-input-autocomplete__item:hover .ds-input-autocomplete__detail,
+  .ds-input-autocomplete__item.selected .ds-input-autocomplete__detail {
+    color: rgba(255, 255, 255, 0.7);
+  }
+</style>

package/dist/u0-primitives/input/Input.svelte.d.ts

@@ -0,0 +1,32 @@
+import type { Snippet } from 'svelte';
+export interface AutocompleteResult {
+    completions: Array<{
+        label: string;
+        type?: string;
+        detail?: string;
+    }>;
+}
+export interface AutocompleteConfig {
+    source: {
+        complete: (query: string) => Promise<AutocompleteResult> | AutocompleteResult;
+    };
+    maxVisible?: number;
+    minChars?: number;
+}
+export interface Props {
+    value?: string;
+    type?: 'text' | 'search' | 'password' | 'email' | 'url';
+    placeholder?: string;
+    disabled?: boolean;
+    error?: boolean;
+    class?: string;
+    id?: string;
+    name?: string;
+    iconLeading?: Snippet;
+    iconTrailing?: Snippet;
+    autocomplete?: AutocompleteConfig;
+}
+declare const Input: import("svelte").Component<Props, {}, "value">;
+type Input = ReturnType<typeof Input>;
+export default Input;
+//# sourceMappingURL=Input.svelte.d.ts.map

package/dist/u0-primitives/input/Input.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.svelte.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/input/Input.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,MAAM,WAAW,kBAAkB;IACjC,WAAW,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CACvE;AAED,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE;QAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,kBAAkB,CAAC,GAAG,kBAAkB,CAAA;KAAE,CAAC;IAC1F,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,KAAK;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,GAAG,KAAK,CAAC;IACxD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,kBAAkB,CAAC;CACnC;AA+IH,QAAA,MAAM,KAAK,gDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}