@lostgradient/cinder 0.6.0 → 0.7.0

package/src/components/tag-input/tag-input.schema.ts

@@ -0,0 +1,172 @@
+import type { ComponentSchema } from '../../schema-types';
+
+const schema = {
+  $schema: 'https://json-schema.org/draft/2020-12/schema',
+  type: 'object',
+  properties: {
+    max: {
+      type: 'number',
+      description: 'Maximum number of tags allowed. Non-finite values disable the cap.',
+    },
+    id: {
+      type: 'string',
+      description:
+        'Stable id for the visible text input. Falls back to FormField context or a generated id.',
+    },
+    value: {
+      type: 'array',
+      items: {
+        type: 'string',
+      },
+      description: 'Controlled tags. When provided, the parent owns the tag array.',
+    },
+    defaultValue: {
+      type: 'array',
+      items: {
+        type: 'string',
+      },
+      description: 'Initial tags for uncontrolled usage. Ignored after mount.',
+    },
+    allowDuplicates: {
+      type: 'boolean',
+      description: 'Allow the same trimmed tag value to appear more than once.',
+    },
+    autocapitalize: {
+      enum: ['off', 'on', 'characters', 'none', 'sentences', 'words', null],
+      description: 'Autocapitalization hint forwarded to the visible text input.',
+    },
+    enterkeyhint: {
+      enum: ['enter', 'done', 'go', 'next', 'previous', 'search', 'send', null],
+      description: 'Virtual-keyboard Enter hint forwarded to the visible text input.',
+    },
+    inputmode: {
+      enum: ['email', 'tel', 'url', 'none', 'search', 'text', 'numeric', 'decimal', null],
+      description: 'Virtual-keyboard input mode forwarded to the visible text input.',
+    },
+    maxlength: {
+      anyOf: [
+        {
+          type: 'number',
+        },
+        {
+          type: 'null',
+        },
+      ],
+      description: 'Maximum pending-text length forwarded to the visible text input.',
+    },
+    placeholder: {
+      anyOf: [
+        {
+          type: 'string',
+        },
+        {
+          type: 'null',
+        },
+      ],
+      description: 'Placeholder text shown while the pending tag input is empty.',
+    },
+    readonly: {
+      type: 'boolean',
+      description:
+        'Render the pending-tag input as read-only and make committed tags non-removable.',
+    },
+    spellcheck: {
+      enum: [false, true, 'true', 'false', null],
+      description: 'Spellcheck setting forwarded to the visible text input.',
+    },
+    disabled: {
+      type: 'boolean',
+      description: 'Disable the input and chip removal affordances.',
+    },
+    name: {
+      type: 'string',
+      description:
+        'Hidden input name used for native form submission; one hidden field is rendered per tag.',
+    },
+    class: {
+      type: 'string',
+      description: 'Additional class merged onto the root element.',
+    },
+    'aria-label': {
+      anyOf: [
+        {
+          type: 'string',
+        },
+        {
+          type: 'null',
+        },
+      ],
+      description: 'Accessible label applied when no labelled-by chain is present.',
+    },
+    'aria-invalid': {
+      enum: [false, true, 'true', 'false', 'grammar', 'spelling', null],
+      description:
+        'Manual invalid-state override used when no inline validation message or FormField invalid state is active.',
+    },
+    'aria-labelledby': {
+      anyOf: [
+        {
+          type: 'string',
+        },
+        {
+          type: 'null',
+        },
+      ],
+      description: 'Element ids that label both the text input and the committed-tag listbox.',
+    },
+    'aria-describedby': {
+      anyOf: [
+        {
+          type: 'string',
+        },
+        {
+          type: 'null',
+        },
+      ],
+      description:
+        'Additional description ids composed into the visible input aria-describedby chain.',
+    },
+  },
+  additionalProperties: false,
+  metadata: {
+    unsupportedProps: [
+      {
+        name: 'autocomplete',
+        reason: 'unknown-shape',
+        description: 'Autocomplete hint forwarded to the visible text input.',
+      },
+      {
+        name: 'delimiter',
+        reason: 'unknown-shape',
+        description:
+          'Key that commits the current input into a tag. Enter always commits separately.',
+      },
+      {
+        name: 'onblur',
+        reason: 'function-or-snippet',
+      },
+      {
+        name: 'onchange',
+        reason: 'function-or-snippet',
+      },
+      {
+        name: 'onfocus',
+        reason: 'function-or-snippet',
+      },
+      {
+        name: 'oninput',
+        reason: 'function-or-snippet',
+      },
+      {
+        name: 'onkeydown',
+        reason: 'function-or-snippet',
+      },
+      {
+        name: 'validate',
+        reason: 'function-or-snippet',
+      },
+    ],
+  },
+} satisfies ComponentSchema;
+
+export default schema as ComponentSchema;

package/src/components/tag-input/tag-input.svelte

@@ -0,0 +1,348 @@
+<script lang="ts" module>
+export {};
+</script>
+
+<script lang="ts">
+import { tick, untrack } from 'svelte';
+import { devWarn } from '../../utilities/dev-warn.ts';
+import { ariaInvalid, composeDescribedBy, resolveFieldControl, } from '../../_internal/field-control.ts';
+import VisuallyHiddenLiveRegion from '../_visually-hidden-live-region.svelte';
+import { getFormFieldContext } from '../../_internal/form-field-context.ts';
+import { classNames } from '../../utilities/class-names.ts';
+import { handleRovingKeydown, isRovingKey } from '../../utilities/roving-tabindex.ts';
+const generatedId = $props.id();
+let { id, value, defaultValue, delimiter = ',', max, validate, allowDuplicates = false, disabled, readonly = false, name, class: className, oninput: consumerInput, onkeydown: consumerKeyDown, onfocus: consumerFocus, onblur: consumerBlur, 'aria-describedby': consumerDescribedBy, 'aria-label': consumerAriaLabel, 'aria-labelledby': consumerAriaLabelledBy, 'aria-invalid': consumerInvalid, required: _ignoredRequired, onchange, ...rest } = $props();
+const initialDefaultTags = untrack(() => [...(defaultValue ?? [])]);
+const context = getFormFieldContext();
+let rootElement = $state(null);
+let inputElement = $state(null);
+let draftValue = $state('');
+let inlineError = $state(null);
+let uncontrolledTags = $state(initialDefaultTags);
+let focusedChipIndex = $state(-1);
+let statusAnnouncement = $state('');
+// Bumped on every announce so the live region re-fires even when two consecutive
+// announcements share the same text (e.g. adding the same tag again) — a same-value
+// `$state` assignment is a no-op in Svelte 5 and would otherwise be swallowed.
+let statusAnnouncementSequence = $state(0);
+function announceStatus(announcement) {
+    statusAnnouncement = announcement;
+    statusAnnouncementSequence += 1;
+}
+const isControlled = $derived(value !== undefined);
+const currentTags = $derived(isControlled ? (value ?? []) : uncontrolledTags);
+const resolvedReadonly = $derived(readonly === true);
+// Base field-control wiring: id, disabled, required, and context-provided
+// describedBy resolved from props + FormField context.
+const field = $derived(resolveFieldControl({
+    ...(id !== undefined ? { id } : {}),
+    generatedId,
+    context,
+    hasDescription: false,
+    hasError: false,
+    consumerDescribedBy,
+    consumerInvalid,
+    disabled,
+}));
+const resolvedId = $derived(field.id);
+const tagListId = $derived(`${resolvedId}-tags`);
+const inlineErrorId = $derived(`${resolvedId}-inline-error`);
+// Roving tabindex: exactly one remove button is in the tab order at a time.
+// When a chip is focused it owns the tab stop; otherwise the FIRST chip's
+// button does, so a Tab-only user can always reach the tag list (the keyboard
+// counterpart to the pointer/voice affordance the button provides).
+//
+// Clamp to the live tag count: with no tags there is no tab stop (-1), and a
+// stale focusedChipIndex (e.g. after a controlled value shrinks) is pulled
+// back into range — without this, every button could end up tabindex="-1" and
+// the tag list would become Tab-unreachable.
+const rovingChipIndex = $derived(currentTags.length === 0
+    ? -1
+    : Math.min(focusedChipIndex === -1 ? 0 : focusedChipIndex, currentTags.length - 1));
+const resolvedMax = $derived(Number.isFinite(max) ? Math.max(0, Math.floor(max)) : undefined);
+// Memoize the delimiter matcher: a RegExp delimiter only changes when the prop
+// changes, so build the expression once here instead of allocating a new
+// RegExp on every keydown. Both the global (g) and sticky (y) flags are stripped
+// because they make `.test()` stateful (it advances/reads `lastIndex`), which would
+// make repeated calls on the memoized instance return inconsistent results.
+const delimiterExpression = $derived(typeof delimiter === 'string'
+    ? null
+    : new RegExp(delimiter.source, delimiter.flags.replaceAll('g', '').replaceAll('y', '')));
+const labelledBy = $derived(composeDescribedBy(context?.labelId, consumerAriaLabelledBy));
+const ariaLabel = $derived(labelledBy ? undefined : consumerAriaLabel?.trim() ? consumerAriaLabel : undefined);
+// Compose aria-describedby: field wiring (context description + error) plus the
+// inline validation error id when one is active.
+const describedBy = $derived(composeDescribedBy(field.describedBy, inlineError ? inlineErrorId : undefined));
+// aria-invalid: prefer the inline validation error over the context/consumer value.
+const resolvedAriaInvalid = $derived(inlineError ? ariaInvalid(true) : field.ariaInvalid);
+const isInvalid = $derived(resolvedAriaInvalid === 'true');
+$effect(() => {
+    if (context && id && context.controlId !== id) {
+        devWarn(`[cinder/TagInput] id mismatch: TagInput id="${id}" but wrapping FormField expects controlId="${context.controlId}". Set the same id on both.`);
+    }
+});
+$effect(() => {
+    if (focusedChipIndex >= currentTags.length) {
+        focusedChipIndex = -1;
+    }
+});
+$effect(() => {
+    if (!inputElement)
+        return;
+    const form = inputElement.closest('form');
+    if (!form)
+        return;
+    const onReset = () => {
+        draftValue = '';
+        inlineError = null;
+        focusedChipIndex = -1;
+        if (!isControlled) {
+            uncontrolledTags = [...initialDefaultTags];
+        }
+    };
+    form.addEventListener('reset', onReset);
+    return () => form.removeEventListener('reset', onReset);
+});
+function getChipElements() {
+    // The focusable, keyboard-removable element is the remove <button> — the
+    // <li> chip itself is a non-interactive listitem. Roving tabindex and the
+    // Backspace/Delete/arrow handlers all live on the button.
+    return Array.from(rootElement?.querySelectorAll('.cinder-tag-input__remove') ?? []);
+}
+async function focusChip(index) {
+    await tick();
+    const chip = getChipElements()[index];
+    chip?.focus();
+}
+async function focusInput() {
+    await tick();
+    inputElement?.focus();
+}
+function setTags(nextTags) {
+    const normalized = [...nextTags];
+    if (!isControlled) {
+        uncontrolledTags = normalized;
+    }
+    onchange?.(normalized);
+}
+function validationError(candidate) {
+    if (resolvedMax !== undefined && currentTags.length >= resolvedMax) {
+        return `You can add up to ${resolvedMax} tag${resolvedMax === 1 ? '' : 's'}.`;
+    }
+    if (!allowDuplicates && currentTags.some((tag) => tag.trim() === candidate)) {
+        return `"${candidate}" is already added.`;
+    }
+    const result = validate?.(candidate);
+    if (result === false)
+        return 'Enter a valid tag.';
+    if (typeof result === 'string' && result.trim().length > 0)
+        return result;
+    return null;
+}
+function matchesDelimiter(key) {
+    if (typeof delimiter === 'string')
+        return key === delimiter;
+    return delimiterExpression?.test(key) ?? false;
+}
+function commitDraft() {
+    if (field.disabled || resolvedReadonly)
+        return false;
+    const candidate = draftValue.trim();
+    if (!candidate)
+        return false;
+    const errorMessage = validationError(candidate);
+    if (errorMessage) {
+        inlineError = errorMessage;
+        return false;
+    }
+    inlineError = null;
+    draftValue = '';
+    focusedChipIndex = -1;
+    setTags([...currentTags, candidate]);
+    announceStatus(`${candidate} added.`);
+    return true;
+}
+function removeTag(index) {
+    if (field.disabled || resolvedReadonly)
+        return;
+    inlineError = null;
+    const removed = currentTags[index] ?? '';
+    const nextTags = currentTags.filter((_, candidateIndex) => candidateIndex !== index);
+    setTags(nextTags);
+    if (removed)
+        announceStatus(`${removed} removed.`);
+}
+function focusAfterRemove(index) {
+    if (index > 0) {
+        void focusChip(index - 1);
+        return;
+    }
+    focusedChipIndex = -1;
+    void focusInput();
+}
+function handleInput(event) {
+    const target = event.currentTarget;
+    if (resolvedReadonly) {
+        target.value = draftValue;
+        return;
+    }
+    draftValue = target.value;
+    inlineError = null;
+    consumerInput?.(event);
+}
+function handleInputFocus(event) {
+    focusedChipIndex = -1;
+    consumerFocus?.(event);
+}
+function handleInputBlur(event) {
+    consumerBlur?.(event);
+}
+function handleInputKeydown(event) {
+    if (!field.disabled && !resolvedReadonly) {
+        const input = event.currentTarget;
+        const candidate = draftValue.trim();
+        const delimiterMatch = matchesDelimiter(event.key);
+        if (!event.isComposing && event.key === 'Enter' && candidate.length > 0) {
+            event.preventDefault();
+            commitDraft();
+        }
+        else if (!event.isComposing && delimiterMatch) {
+            event.preventDefault();
+            commitDraft();
+        }
+        else if (event.key === 'Backspace' &&
+            draftValue === '' &&
+            currentTags.length > 0 &&
+            !event.defaultPrevented) {
+            event.preventDefault();
+            void focusChip(currentTags.length - 1);
+        }
+        else if ((event.key === 'ArrowLeft' || event.key === 'ArrowRight') &&
+            draftValue === '' &&
+            input.selectionStart === 0 &&
+            input.selectionEnd === 0 &&
+            currentTags.length > 0) {
+            event.preventDefault();
+            void focusChip(currentTags.length - 1);
+        }
+    }
+    consumerKeyDown?.(event);
+}
+function handleChipFocus(index) {
+    focusedChipIndex = index;
+}
+function handleChipKeydown(index, event) {
+    if (field.disabled || resolvedReadonly)
+        return;
+    if (event.key === 'Backspace' || event.key === 'Delete') {
+        event.preventDefault();
+        removeTag(index);
+        focusAfterRemove(index);
+    }
+    else if (isRovingKey(event.key)) {
+        const nextIndex = handleRovingKeydown(event, index, currentTags.length, {
+            horizontal: true,
+            vertical: false,
+        });
+        if (nextIndex !== null) {
+            event.preventDefault();
+            if (event.key === 'ArrowRight' && index === currentTags.length - 1) {
+                focusedChipIndex = -1;
+                void focusInput();
+            }
+            else {
+                void focusChip(nextIndex);
+            }
+        }
+    }
+}
+</script>
+
+<div
+  bind:this={rootElement}
+  class={classNames('cinder-tag-input', className)}
+  data-disabled={field.disabled ? '' : undefined}
+  data-invalid={isInvalid ? '' : undefined}
+>
+  <div class="cinder-tag-input__control" data-disabled={field.disabled ? '' : undefined}>
+    <!-- Committed tags are confirmed VALUES with a per-item "remove" command,
+         not selectable options — so this is a plain list (implicit role="list"
+         / "listitem"), NOT a role="listbox". A listbox would force every child
+         to be a role="option", which legally cannot contain the interactive
+         remove <button> (aria-required-children + nested-interactive). As a
+         list, the remove <button> is a fully valid, named, focusable control
+         reachable by keyboard, pointer, voice control, and switch access. The
+         button carries the roving tabindex; arrow keys move between buttons and
+         Backspace/Delete removes the focused tag. -->
+    <ul
+      id={tagListId}
+      class="cinder-tag-input__listbox"
+      aria-label={ariaLabel}
+      aria-labelledby={labelledBy}
+    >
+      <!-- Always key by a position-qualified composite (index:tag). A controlled
+           `value` prop can contain duplicate strings even when allowDuplicates is
+           false, so a pure value key would throw each_key_duplicate. -->
+      {#each currentTags as tag, index (`${index}:${tag}`)}
+        <li class="cinder-tag-input__chip">
+          <span class="cinder-tag-input__chip-label">{tag}</span>
+          {#if !field.disabled && !resolvedReadonly}
+            <button
+              type="button"
+              class="cinder-tag-input__remove"
+              aria-label={`Remove ${tag}`}
+              tabindex={rovingChipIndex === index ? 0 : -1}
+              onfocus={() => {
+                handleChipFocus(index);
+              }}
+              onclick={(event) => {
+                event.stopPropagation();
+                removeTag(index);
+                focusAfterRemove(index);
+              }}
+              onkeydown={(event) => {
+                handleChipKeydown(index, event);
+              }}
+            >
+              <span aria-hidden="true">×</span>
+            </button>
+          {/if}
+        </li>
+      {/each}
+    </ul>
+
+    <input
+      bind:this={inputElement}
+      {...rest}
+      id={resolvedId}
+      type="text"
+      class="cinder-tag-input__input"
+      value={draftValue}
+      readonly={resolvedReadonly}
+      disabled={field.disabled}
+      aria-label={ariaLabel}
+      aria-labelledby={labelledBy}
+      aria-describedby={describedBy}
+      aria-invalid={resolvedAriaInvalid}
+      aria-required={field.required ? 'true' : undefined}
+      oninput={handleInput}
+      onfocus={handleInputFocus}
+      onblur={handleInputBlur}
+      onkeydown={handleInputKeydown}
+    />
+  </div>
+
+  {#if inlineError}
+    <p id={inlineErrorId} class="cinder-tag-input__error" aria-live="polite">{inlineError}</p>
+  {/if}
+
+  {#if name}
+    {#each currentTags as tag, index (`hidden:${index}:${tag}`)}
+      <input type="hidden" {name} value={tag} disabled={field.disabled} />
+    {/each}
+  {/if}
+  <VisuallyHiddenLiveRegion
+    message={statusAnnouncement}
+    announcementSequence={statusAnnouncementSequence}
+  />
+</div>

package/src/components/tag-input/tag-input.types.ts

@@ -0,0 +1,98 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+
+type SupportedInputAttributes = Pick<
+  HTMLInputAttributes,
+  | 'aria-describedby'
+  | 'aria-invalid'
+  | 'aria-label'
+  | 'aria-labelledby'
+  | 'autocomplete'
+  | 'autocapitalize'
+  | 'enterkeyhint'
+  | 'inputmode'
+  | 'maxlength'
+  | 'onblur'
+  | 'onfocus'
+  | 'oninput'
+  | 'onkeydown'
+  | 'placeholder'
+  | 'spellcheck'
+>;
+
+export type TagInputProps = SupportedInputAttributes & {
+  /** Stable id for the visible text input. Falls back to FormField context or a generated id. */
+  id?: string;
+  /** Controlled tags. When provided, the parent owns the tag array. */
+  value?: string[];
+  /** Initial tags for uncontrolled usage. Ignored after mount. */
+  defaultValue?: string[];
+  /** Key that commits the current input into a tag. Enter always commits separately. */
+  delimiter?: string | RegExp;
+  /** Maximum number of tags allowed. Non-finite values disable the cap. */
+  max?: number;
+  /** Optional per-tag validation hook. */
+  validate?: (tag: string) => boolean | string;
+  /** Allow the same trimmed tag value to appear more than once. */
+  allowDuplicates?: boolean;
+  /** Disable the input and chip removal affordances. */
+  disabled?: boolean;
+  /** Render the pending-tag input as read-only and make committed tags non-removable. */
+  readonly?: boolean;
+  /** Hidden input name used for native form submission. */
+  name?: string;
+  /** Additional class merged onto the root element. */
+  class?: string;
+  /** Fires whenever a commit or removal requests a new tag list. */
+  onchange?: (tags: string[]) => void;
+};
+
+export interface TagInputSchemaProps {
+  /** Maximum number of tags allowed. Non-finite values disable the cap. */
+  max?: number;
+  /** Stable id for the visible text input. Falls back to FormField context or a generated id. */
+  id?: string;
+  /** Controlled tags. When provided, the parent owns the tag array. */
+  value?: string[];
+  /** Initial tags for uncontrolled usage. Ignored after mount. */
+  defaultValue?: string[];
+  /** Key that commits the current input into a tag. Enter always commits separately. */
+  delimiter?: string | RegExp;
+  /** Allow the same trimmed tag value to appear more than once. */
+  allowDuplicates?: boolean;
+  /** Autocomplete hint forwarded to the visible text input. */
+  autocomplete?: HTMLInputAttributes['autocomplete'];
+  /** Autocapitalization hint forwarded to the visible text input. */
+  autocapitalize?: HTMLInputAttributes['autocapitalize'];
+  /** Virtual-keyboard Enter hint forwarded to the visible text input. */
+  enterkeyhint?: HTMLInputAttributes['enterkeyhint'];
+  /** Virtual-keyboard input mode forwarded to the visible text input. */
+  inputmode?: HTMLInputAttributes['inputmode'];
+  /** Maximum pending-text length forwarded to the visible text input. */
+  maxlength?: HTMLInputAttributes['maxlength'];
+  /** Placeholder text shown while the pending tag input is empty. */
+  placeholder?: HTMLInputAttributes['placeholder'];
+  /** Render the pending-tag input as read-only and make committed tags non-removable. */
+  readonly?: boolean;
+  /** Spellcheck setting forwarded to the visible text input. */
+  spellcheck?: HTMLInputAttributes['spellcheck'];
+  /** Disable the input and chip removal affordances. */
+  disabled?: boolean;
+  /** Hidden input name used for native form submission; one hidden field is rendered per tag. */
+  name?: string;
+  /** Additional class merged onto the root element. */
+  class?: string;
+  /** Accessible label applied when no labelled-by chain is present. */
+  'aria-label'?: HTMLInputAttributes['aria-label'];
+  /** Manual invalid-state override used when no inline validation message or FormField invalid state is active. */
+  'aria-invalid'?: HTMLInputAttributes['aria-invalid'];
+  /** Element ids that label both the text input and the committed-tag listbox. */
+  'aria-labelledby'?: HTMLInputAttributes['aria-labelledby'];
+  /** Additional description ids composed into the visible input aria-describedby chain. */
+  'aria-describedby'?: HTMLInputAttributes['aria-describedby'];
+  onblur?: HTMLInputAttributes['onblur'];
+  onchange?: (tags: string[]) => void;
+  onfocus?: HTMLInputAttributes['onfocus'];
+  oninput?: HTMLInputAttributes['oninput'];
+  onkeydown?: HTMLInputAttributes['onkeydown'];
+  validate?: (tag: string) => boolean | string;
+}

package/src/components/tag-input/tag-input.variables.ts

@@ -0,0 +1,3 @@
+const variables: readonly string[] = [];
+
+export default variables;

package/src/components/team-section/index.ts

@@ -0,0 +1,6 @@
+import './team-section.css';
+import TeamSection from './team-section.svelte';
+
+export default TeamSection;
+export type { TeamSectionMember, TeamSectionProps } from './team-section.types.ts';
+export { TeamSection };