@lostgradient/cinder 0.5.0 → 0.6.0

package/src/components/_internal/create-command-list-state.svelte.ts

@@ -1,171 +0,0 @@
-import { inDocumentOrder } from '../../utilities/document-order.ts';
-import type { CommandItemRegistrationInput, CommandListContext } from './command-list-context.ts';
-
-type RegistrationRecord = CommandItemRegistrationInput & { id: string; node: HTMLElement };
-
-export type CommandListKeyboardOptions = {
-  event: KeyboardEvent;
-  onEnter?: (id: string) => void;
-  onEscape?: () => void;
-  ignoreModifiedNavigation?: boolean;
-  preventDefaultOnEmptyEnter?: boolean;
-};
-
-export class CommandListState {
-  readonly listboxId: string;
-  registrations = $state<RegistrationRecord[]>([]);
-  registrationsReady = $state(false);
-  #itemCounter = 0;
-  #readyCycle = 0;
-  #intendedActiveId = $state<string | null>(null);
-
-  enabledIds = $derived.by(() => {
-    return inDocumentOrder(this.registrations)
-      .filter((registration) => !registration.getDisabled())
-      .map((registration) => registration.id);
-  });
-
-  activeItemId = $derived(
-    this.#intendedActiveId !== null && this.enabledIds.includes(this.#intendedActiveId)
-      ? this.#intendedActiveId
-      : (this.enabledIds[0] ?? null),
-  );
-
-  constructor(listboxId: string) {
-    this.listboxId = listboxId;
-  }
-
-  resetActiveItem(): void {
-    this.#intendedActiveId = null;
-  }
-
-  refreshRegistrationsReady(): void {
-    this.registrationsReady = false;
-    const cycle = ++this.#readyCycle;
-    queueMicrotask(() => {
-      if (cycle === this.#readyCycle) this.registrationsReady = true;
-    });
-  }
-
-  scrollActiveItemIntoView(): void {
-    if (this.activeItemId === null) return;
-    const record = this.registrations.find((registration) => registration.id === this.activeItemId);
-    record?.node.scrollIntoView({ block: 'nearest' });
-  }
-
-  setActiveById(id: string): void {
-    this.#intendedActiveId = id;
-  }
-
-  register(input: CommandItemRegistrationInput, node: HTMLElement) {
-    const id = `${this.listboxId}-item-${++this.#itemCounter}`;
-    this.registrations.push({
-      id,
-      node,
-      getValue: input.getValue,
-      getOnselect: input.getOnselect,
-      getDisabled: input.getDisabled,
-    });
-    return {
-      id,
-      unregister: () => {
-        const index = this.registrations.findIndex((registration) => registration.id === id);
-        if (index !== -1) this.registrations.splice(index, 1);
-      },
-    };
-  }
-
-  activateItemById(id: string): RegistrationRecord | null {
-    const record = this.registrations.find((registration) => registration.id === id);
-    if (!record || record.getDisabled()) return null;
-    record.getOnselect()();
-    return record;
-  }
-
-  handleKeydown({
-    event,
-    onEnter,
-    onEscape,
-    ignoreModifiedNavigation = false,
-    preventDefaultOnEmptyEnter = false,
-  }: CommandListKeyboardOptions): boolean {
-    if (event.isComposing || event.keyCode === 229) return false;
-    const isModified = event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
-    const ids = this.enabledIds;
-
-    if (event.key === 'ArrowDown') {
-      if (ignoreModifiedNavigation && isModified) return false;
-      event.preventDefault();
-      if (ids.length === 0) return true;
-      const index = this.activeItemId === null ? -1 : ids.indexOf(this.activeItemId);
-      this.#intendedActiveId = ids[(index + 1) % ids.length] ?? null;
-      return true;
-    }
-
-    if (event.key === 'ArrowUp') {
-      if (ignoreModifiedNavigation && isModified) return false;
-      event.preventDefault();
-      if (ids.length === 0) return true;
-      const index = this.activeItemId === null ? 0 : ids.indexOf(this.activeItemId);
-      this.#intendedActiveId = ids[index <= 0 ? ids.length - 1 : index - 1] ?? null;
-      return true;
-    }
-
-    if (event.key === 'Home') {
-      if (ignoreModifiedNavigation && isModified) return false;
-      event.preventDefault();
-      this.#intendedActiveId = ids[0] ?? null;
-      return true;
-    }
-
-    if (event.key === 'End') {
-      if (ignoreModifiedNavigation && isModified) return false;
-      event.preventDefault();
-      this.#intendedActiveId = ids[ids.length - 1] ?? null;
-      return true;
-    }
-
-    if (event.key === 'Enter') {
-      if (!onEnter) return false;
-      if (this.activeItemId === null && !preventDefaultOnEmptyEnter) return false;
-      event.preventDefault();
-      event.stopPropagation();
-      if (this.activeItemId === null) return true;
-      onEnter?.(this.activeItemId);
-      return true;
-    }
-
-    if (event.key === 'Escape' && onEscape) {
-      event.preventDefault();
-      event.stopPropagation();
-      onEscape();
-      return true;
-    }
-
-    return false;
-  }
-
-  createContext(activateItemById: (id: string) => void = (id) => void this.activateItemById(id)) {
-    const listboxId = this.listboxId;
-    const getActiveItemId = () => this.activeItemId;
-    const register = (input: CommandItemRegistrationInput, node: HTMLElement) =>
-      this.register(input, node);
-    const setActiveById = (id: string) => this.setActiveById(id);
-
-    return {
-      get listboxId() {
-        return listboxId;
-      },
-      get activeItemId() {
-        return getActiveItemId();
-      },
-      register,
-      setActiveById,
-      activateItemById,
-    } satisfies CommandListContext;
-  }
-}
-
-export function createCommandListState(listboxId: string): CommandListState {
-  return new CommandListState(listboxId);
-}

package/src/components/_internal/create-sliding-dialog-state.svelte.ts

@@ -1,170 +0,0 @@
-import { captureFocus, lockBodyScroll, pushEscapeHandler } from '../../_internal/overlay.ts';
-import { waitForTransitionCompletion } from '../../_internal/transition-completion.ts';
-import { restoreFocusTo } from '../../utilities/focus.ts';
-
-export type SlidingDialogStateOptions = {
-  getOpen: () => boolean;
-  setOpen: (open: boolean) => void;
-  getDialogElement: () => HTMLDialogElement | undefined;
-  getPanelElement: () => HTMLElement | undefined;
-  getReducedMotion: () => boolean;
-  getTriggerRef: () => HTMLElement | null;
-  onOpen?: () => void;
-  onClosed?: () => void;
-};
-
-export class SlidingDialogState {
-  hydrated = $state(false);
-  renderPanel = $state(false);
-  isClosing = $state(false);
-  readonly #options: SlidingDialogStateOptions;
-  #closeGeneration = $state(0);
-  #capturedFocus: HTMLElement | null = null;
-  #releaseScrollLock: (() => void) | null = null;
-  #releaseEscape: (() => void) | null = null;
-  #cancelPendingClose: (() => void) | null = null;
-
-  constructor(options: SlidingDialogStateOptions) {
-    this.#options = options;
-    this.renderPanel = options.getOpen();
-  }
-
-  markHydrated(): void {
-    this.hydrated = true;
-  }
-
-  syncOpenState(): void {
-    const dialogElement = this.#options.getDialogElement();
-    if (!dialogElement) return;
-
-    if (this.#options.getOpen()) {
-      if (this.isClosing) {
-        this.#closeGeneration += 1;
-        this.#cancelPendingClose?.();
-        this.#cancelPendingClose = null;
-        this.isClosing = false;
-      }
-
-      if (!this.renderPanel) {
-        this.renderPanel = true;
-      }
-
-      if (!dialogElement.open) {
-        this.#capturedFocus = captureFocus();
-        dialogElement.showModal();
-        this.#acquireScrollLock();
-        this.#acquireEscapeMarker();
-        this.#options.onOpen?.();
-      }
-      return;
-    }
-
-    if (dialogElement.open) {
-      this.beginClosing();
-    } else {
-      this.renderPanel = false;
-    }
-  }
-
-  beginClosing(): void {
-    const dialogElement = this.#options.getDialogElement();
-    if (!dialogElement?.open || this.isClosing) return;
-    const panelElement = this.#options.getPanelElement();
-    if (!panelElement) {
-      this.#finishClosing(this.#closeGeneration);
-      return;
-    }
-
-    this.isClosing = true;
-    const generation = ++this.#closeGeneration;
-    this.#cancelPendingClose?.();
-    this.#cancelPendingClose = waitForTransitionCompletion({
-      element: panelElement,
-      reducedMotion: this.#options.getReducedMotion(),
-      onComplete: () => this.#finishClosing(generation),
-    });
-  }
-
-  handleClose(): void {
-    this.#releaseScrollLock?.();
-    this.#releaseScrollLock = null;
-    this.#releaseEscape?.();
-    this.#releaseEscape = null;
-    this.#options.setOpen(false);
-    this.#returnFocus();
-  }
-
-  requestClose(): void {
-    if (!this.#options.getOpen() && (this.isClosing || !this.#options.getDialogElement()?.open)) {
-      return;
-    }
-    this.#options.setOpen(false);
-    this.beginClosing();
-  }
-
-  handleBackdropClick(event: MouseEvent): void {
-    if (event.target === this.#options.getDialogElement()) {
-      this.requestClose();
-    }
-  }
-
-  handleNativeCancel(event: Event): void {
-    event.preventDefault();
-    this.requestClose();
-  }
-
-  destroy(): void {
-    this.#cancelPendingClose?.();
-    this.#cancelPendingClose = null;
-    const wasOpen = this.#releaseScrollLock !== null || this.#releaseEscape !== null;
-    this.#releaseScrollLock?.();
-    this.#releaseScrollLock = null;
-    this.#releaseEscape?.();
-    this.#releaseEscape = null;
-    if (wasOpen) {
-      this.#returnFocus();
-    }
-  }
-
-  #finishClosing(generation: number): void {
-    if (generation !== this.#closeGeneration) return;
-    this.#cancelPendingClose?.();
-    this.#cancelPendingClose = null;
-    this.isClosing = false;
-    if (this.#options.getOpen()) {
-      this.renderPanel = true;
-      return;
-    }
-    this.renderPanel = false;
-    this.#options.onClosed?.();
-    const dialogElement = this.#options.getDialogElement();
-    if (dialogElement?.open) {
-      dialogElement.close();
-    }
-  }
-
-  #acquireScrollLock(): void {
-    if (this.#releaseScrollLock) return;
-    this.#releaseScrollLock = lockBodyScroll();
-  }
-
-  #acquireEscapeMarker(): void {
-    if (this.#releaseEscape) return;
-    this.#releaseEscape = pushEscapeHandler(() => {});
-  }
-
-  #returnFocus(): void {
-    const candidates: Array<HTMLElement | null> = [
-      this.#options.getTriggerRef(),
-      this.#capturedFocus,
-    ];
-    this.#capturedFocus = null;
-    for (const candidate of candidates) {
-      if (restoreFocusTo(candidate)) break;
-    }
-  }
-}
-
-export function createSlidingDialogState(options: SlidingDialogStateOptions): SlidingDialogState {
-  return new SlidingDialogState(options);
-}

package/src/components/_internal/side-navigation-group-context.ts

@@ -1,48 +0,0 @@
-/**
- * Shared context contract between SideNavigationGroup and SideNavigationItem.
- *
- * Kept under `_internal/` so the context handles are reachable by both
- * components without being part of the package's public surface, matching the
- * convention established by `_internal/command-list-context.ts`.
- *
- * Unlike the command-palette context, this one is *optional*: a
- * `SideNavigationItem` may live directly in a flat `SideNavigation` with no
- * group ancestor. `tryGetSideNavigationGroupContext` returns `undefined` in
- * that case rather than throwing — a missing context is a no-op.
- *
- * The mechanism lets a group light up its disclosure trigger ("the current
- * page lives in here") when any descendant item is active, even while the
- * group is collapsed. Registration is fixed at mount; live reparenting of the
- * same item instance across group boundaries is unsupported (Svelte unmounts
- * and remounts on keyed `{#each}`/`{#if}` moves, which runs cleanup plus a
- * fresh `register()` — correct by construction).
- */
-
-import { createContext } from 'svelte';
-
-import { optionalContext } from '../../_internal/optional-context.ts';
-
-/** Registration handle returned to each child item. */
-export type SideNavigationGroupRegistration = {
-  /** Report whether this item is currently active. Idempotent per state. */
-  setActive: (active: boolean) => void;
-  /** Remove this item from the active tally on unmount. Idempotent. */
-  unregister: () => void;
-};
-
-export type SideNavigationGroupContext = {
-  /** Register a descendant item; returns its handle. */
-  register: () => SideNavigationGroupRegistration;
-};
-
-const [getSideNavigationGroupContextStrict, setSideNavigationGroupContext] =
-  createContext<SideNavigationGroupContext>();
-
-export { setSideNavigationGroupContext };
-
-/**
- * Optional read — items outside a group are valid (flat sidebars), so a
- * missing context resolves to `undefined` instead of throwing.
- */
-export const tryGetSideNavigationGroupContext: () => SideNavigationGroupContext | undefined =
-  optionalContext(getSideNavigationGroupContextStrict);

package/src/components/_radio/index.ts

@@ -1,6 +0,0 @@
-import './radio.css';
-import Radio from './radio.svelte';
-
-export default Radio;
-export type { RadioProps } from './radio.types.ts';
-export { Radio };

package/src/components/_radio/radio.svelte

@@ -1,93 +0,0 @@
-<script lang="ts" module>
-  /**
-   * @cinder
-   * @category form
-   * @status stable
-   * @purpose Single radio button that contributes a value, label, and id to a parent radio-group for one-of-many selection.
-   * @tag form
-   * @tag selection
-   * @useWhen Rendering one option inside a radio-group where exactly one value must be chosen.
-   * @useWhen Overriding the group disabled state for a single option.
-   * @avoidWhen Selecting zero or more independent options — use checkbox instead.
-   * @avoidWhen Used outside a radio-group — the group owns the shared name and value.
-   * @related radio-group, checkbox
-   */
-  export type { RadioProps } from './radio.types.ts';
-</script>
-
-<script lang="ts">
-  import type { RadioProps } from './radio.types.ts';
-
-  import { ariaInvalid, composeDescribedBy, describeId } from '../../_internal/field-control.ts';
-  import { getRadioGroupContext } from '../radio-group/radio-group-context.ts';
-  import { classNames } from '../../utilities/class-names.ts';
-
-  let {
-    id,
-    value,
-    label,
-    description,
-    disabled,
-    class: className,
-    'aria-describedby': consumerAriaDescribedBy,
-    ...rest
-  }: RadioProps = $props();
-
-  const group = getRadioGroupContext();
-
-  const checked = $derived(group.value === value);
-  const effectiveDisabled = $derived(disabled ?? group.disabled);
-
-  const descriptionId = $derived(describeId(id, !!description));
-  const describedBy = $derived(composeDescribedBy(descriptionId, consumerAriaDescribedBy));
-
-  function handleChange(): void {
-    if (effectiveDisabled) return;
-    group.select(value);
-  }
-</script>
-
-<div
-  class="cinder-radio-row"
-  data-checked={checked || undefined}
-  data-disabled={effectiveDisabled || undefined}
-  data-invalid={group.invalid || undefined}
-  data-has-description={description ? '' : undefined}
->
-  <span class="cinder-radio-row__control">
-    <!--
-      aria-invalid mirrors the group's validity onto the native radio so screen
-      readers announce invalidity on focus. It is a global ARIA state and the
-      standard way to mark form-control validity; the implicit-role lint rule
-      does not list it for role=radio, but applying it here is correct.
-    -->
-    <!-- svelte-ignore a11y_role_supports_aria_props_implicit -->
-    <input
-      {id}
-      type="radio"
-      name={group.name}
-      {value}
-      {checked}
-      disabled={effectiveDisabled}
-      required={group.required || undefined}
-      aria-invalid={ariaInvalid(group.invalid)}
-      onchange={handleChange}
-      class={classNames('cinder-radio', className)}
-      {...rest}
-      aria-describedby={describedBy}
-    />
-    <span class="cinder-radio-row__indicator" aria-hidden="true"></span>
-  </span>
-  <label for={id} class="cinder-radio-row__label" data-disabled={effectiveDisabled || undefined}>
-    {label}
-  </label>
-  {#if description}
-    <p
-      id="{id}-description"
-      class="cinder-radio-row__description"
-      data-disabled={effectiveDisabled || undefined}
-    >
-      {description}
-    </p>
-  {/if}
-</div>

package/src/components/_radio/radio.types.ts

@@ -1,27 +0,0 @@
-import type { HTMLInputAttributes } from 'svelte/elements';
-/**
- * Props for the Radio component.
- *
- * Must be used inside a RadioGroup. The group owns `name`, `disabled`, and
- * the bound value; this component contributes `value`, the visible label,
- * and a unique `id` for label association.
- *
- * Per the WAI-ARIA radiogroup pattern, only the currently-checked radio
- * sits in the tab order (`tabindex=0`); all others are reachable only via
- * arrow keys (`tabindex=-1`). Native radio inputs implement this
- * automatically when they share a `name`, so we let the platform handle it.
- */
-export type RadioProps = HTMLInputAttributes & {
-  /** Unique identifier — required for label association. */
-  id: string;
-  /** The value submitted when this radio is selected. */
-  value: string;
-  /** Visible label rendered in a `<label>` element associated via `for`. */
-  label: string;
-  /** Helper text rendered as `<p id="{id}-description">`, wired via aria-describedby. */
-  description?: string;
-  /** Override the group's `disabled` for this single radio. */
-  disabled?: boolean;
-  /** Extra class names merged with `.cinder-radio`. */
-  class?: string;
-};