@lostgradient/cinder 0.5.0 → 0.6.0

package/src/components/radio-group/index.ts

@@ -1,22 +0,0 @@
-import Radio from '../_radio/radio.svelte';
-import './radio-group.css';
-import RadioGroupRoot from './radio-group.svelte';
-
-/**
- * `RadioGroup` is the parent compound component and a namespace exposing
- * `RadioGroup.Option` — a single radio choice. Option reads RadioGroup's
- * context and throws if rendered outside a group, so it is namespace-only:
- * there is no standalone `@lostgradient/cinder/radio` import, because a lone radio is
- * semantically meaningless and would throw at runtime. (Checkbox, by contrast,
- * is a legitimate standalone control and keeps its own export.)
- */
-const RadioGroup = Object.assign(RadioGroupRoot, {
-  Option: Radio,
-});
-
-export default RadioGroup;
-export type { RadioGroupContext, RadioGroupProps } from './radio-group.types.ts';
-// RadioGroup.Option is namespace-only; re-export its prop type so consumers can
-// type an Option wrapper without reaching into the internal _radio directory.
-export type { RadioProps } from '../_radio/radio.types.ts';
-export { RadioGroup };

package/src/components/radio-group/radio-group-context.ts

@@ -1,33 +0,0 @@
-import { createContext } from 'svelte';
-
-// The canonical type definition lives in radio-group.types.ts (the public
-// barrel re-exports it from there). Import rather than redefine to keep a
-// single source of truth — field additions only need to go in one place.
-import type { RadioGroupContext } from './radio-group.types.ts';
-
-export type { RadioGroupContext };
-
-/**
- * Context published by `<RadioGroup>` for descendant `<Radio>` children.
- *
- * All members are getter properties on the context object so reads stay
- * reactive — when a consumer reads `context.value` inside a `$derived`,
- * the read flows through the getter, which returns a value recomputed from
- * RadioGroup's `$derived` internals. Destructuring breaks reactivity;
- * getter reads preserve it.
- *
- * The context is *required* — a `<Radio>` outside a `<RadioGroup>` is a
- * programmer error. The `getRadioGroupContext` getter therefore throws
- * (via Svelte 5's `createContext`) when no provider exists.
- */
-
-const [getRadioGroupContextStrict, setRadioGroupContext] = createContext<RadioGroupContext>();
-
-export { setRadioGroupContext };
-
-/**
- * Read the enclosing `<RadioGroup>` context. Throws via Svelte 5's
- * `createContext` when no provider exists — a `<Radio>` rendered outside
- * a `<RadioGroup>` is a programmer error.
- */
-export const getRadioGroupContext = getRadioGroupContextStrict;

package/src/components/radio-group/radio-group.svelte

@@ -1,123 +0,0 @@
-<script lang="ts" module>
-  /**
-   * @cinder
-   * @category form
-   * @status stable
-   * @purpose Fieldset that owns the bound value, shared name, and validation state for a set of mutually exclusive radio children.
-   * @tag form
-   * @tag selection
-   * @useWhen Picking exactly one option from a small fixed set where every choice should stay visible.
-   * @useWhen Sharing a single error and description across a set of related radios.
-   * @avoidWhen Selecting zero or more independent options — use checkbox-group instead.
-   * @related checkbox-group
-   */
-  export type { RadioGroupContext, RadioGroupProps } from './radio-group.types.ts';
-</script>
-
-<script lang="ts">
-  import type { RadioGroupProps } from './radio-group.types.ts';
-  import { setRadioGroupContext } from './radio-group-context.ts';
-
-  import {
-    ariaInvalid,
-    composeDescribedBy,
-    describeId,
-    errorId as buildErrorId,
-  } from '../../_internal/field-control.ts';
-  import { classNames } from '../../utilities/class-names.ts';
-  import { devWarn } from '../../utilities/dev-warn.ts';
-
-  let {
-    value = $bindable(''),
-    name,
-    label: legend,
-    description,
-    error,
-    disabled = false,
-    required = false,
-    variant = 'default',
-    class: className,
-    children,
-  }: RadioGroupProps = $props();
-
-  // Group ID is needed to scope the description/error ids; consumers don't
-  // pass an id because the group itself is a fieldset, not a labelled input.
-  const groupId = $props.id();
-  const descriptionId = $derived(describeId(groupId, !!description));
-  const errId = $derived(buildErrorId(groupId, !!error));
-  const describedBy = $derived(composeDescribedBy(descriptionId, errId));
-
-  setRadioGroupContext({
-    get name() {
-      return name;
-    },
-    get value() {
-      return value;
-    },
-    get disabled() {
-      return disabled;
-    },
-    get invalid() {
-      return !!error;
-    },
-    get required() {
-      return required;
-    },
-    select(next) {
-      value = next;
-    },
-  });
-
-  // Warn once when no accessible group name is provided. The `hasWarned` flag
-  // stops the effect re-firing on every `legend` change — matching the
-  // tree.svelte convention and dev-warn.ts's guidance against a warn-only
-  // effect that re-subscribes on each update.
-  let hasWarnedNoLegend = false;
-  $effect(() => {
-    if (!legend && !hasWarnedNoLegend) {
-      hasWarnedNoLegend = true;
-      devWarn(
-        '[cinder/RadioGroup] A <fieldset> was rendered without a label prop. The fieldset will have no <legend>, which makes it inaccessible. Provide a label prop to describe the group.',
-      );
-    }
-  });
-</script>
-
-<!--
-  `aria-invalid` on the <fieldset> (implicit role=group) is a deliberate
-  best-effort supplemental signal; per-radio invalidity is also set on each
-  <input type="radio"> via context, and the visible error is referenced through
-  aria-describedby. ARIA does not formally list aria-invalid for role=group, so
-  the lint rule is a false positive for this documented, tested tradeoff.
--->
-<!-- svelte-ignore a11y_role_supports_aria_props_implicit -->
-<fieldset
-  class={classNames('cinder-radio-group', className)}
-  aria-invalid={ariaInvalid(!!error)}
-  aria-required={required || undefined}
-  aria-describedby={describedBy}
-  data-cinder-disabled={disabled || undefined}
-  data-cinder-required={required || undefined}
-  data-variant={variant === 'card' ? 'card' : undefined}
->
-  {#if legend}
-    <legend class="cinder-radio-group__legend">
-      {legend}
-      {#if required}
-        <span class="cinder-_required-marker" aria-hidden="true">*</span>
-      {/if}
-    </legend>
-  {/if}
-
-  <div class="cinder-radio-group__items">
-    {@render children()}
-  </div>
-
-  {#if description}
-    <p id={descriptionId} class="cinder-radio-group__description">{description}</p>
-  {/if}
-
-  {#if error}
-    <p id={errId} class="cinder-radio-group__error" aria-live="polite">{error}</p>
-  {/if}
-</fieldset>

package/src/components/radio-group/radio-group.types.ts

@@ -1,47 +0,0 @@
-import type { Snippet } from 'svelte';
-/**
- * Shape of the context object provided to Radio children. Children read
- * the current group `value`, the shared `name`, and `disabled` / `invalid`
- * state, and call `select(value)` when the user activates a radio.
- */
-export type RadioGroupContext = {
-  readonly name: string;
-  readonly value: string;
-  readonly disabled: boolean;
-  readonly invalid: boolean;
-  readonly required: boolean;
-  select: (next: string) => void;
-};
-/**
- * Props for the RadioGroup component.
- *
- * The group owns the bound `value`, the shared `name`, the disabled/invalid
- * states, and the description/error/legend wrapper. Each child Radio
- * derives its own `checked` state from the group value.
- */
-export type RadioGroupProps = {
-  /** Bound selected value. */
-  value?: string;
-  /** Shared `name` for all radios in the group; required for native form submission. */
-  name: string;
-  /**
-   * Visible group caption. Rendered as a `<legend>` inside the `<fieldset>`.
-   * Named `label` for consistency with every other form control — the element
-   * is a `<legend>` because the group is a fieldset.
-   */
-  label?: string;
-  /** Helper text displayed below the group; wired via `aria-describedby` on the fieldset. */
-  description?: string;
-  /** Validation error message; sets `aria-invalid="true"` on the group's children. */
-  error?: string;
-  /** Disables the entire group. */
-  disabled?: boolean;
-  /** When true, marks the group's radios as required for form submission. */
-  required?: boolean;
-  /** Visual layout. 'card' wraps each radio row in a bordered surface. */
-  variant?: 'default' | 'card';
-  /** Additional class names merged with `.cinder-radio-group`. */
-  class?: string;
-  /** Radio children. */
-  children: Snippet;
-};

package/src/components/rating/index.ts

@@ -1,6 +0,0 @@
-import './rating.css';
-import Rating from './rating.svelte';
-
-export default Rating;
-export type { RatingPrecision, RatingProps } from './rating.types.ts';
-export { Rating };

package/src/components/rating/rating.svelte

@@ -1,380 +0,0 @@
-<script lang="ts" module>
-  /**
-   * @cinder
-   * @category form
-   * @status stable
-   * @purpose Star rating control with bindable numeric value, optional half-star precision, and a non-interactive readonly display mode.
-   * @tag form
-   * @tag selection
-   * @useWhen Letting the user score something on a small ordinal scale such as 1-5 stars.
-   * @useWhen Displaying an existing rating in readonly mode alongside a count or average.
-   * @avoidWhen Picking a value from a numeric continuum — use slider instead.
-   * @avoidWhen Capturing a binary preference — use toggle or checkbox.
-   * @related slider, segmented-control, radio-group, form-field
-   */
-  export type { RatingPrecision, RatingProps } from './rating.types.ts';
-</script>
-
-<script lang="ts">
-  import type { RatingProps } from './rating.types.ts';
-
-  import {
-    ariaInvalid,
-    composeDescribedBy,
-    describeId,
-    errorId as buildErrorId,
-  } from '../../_internal/field-control.ts';
-  import { getFormFieldContext } from '../../_internal/form-field-context.ts';
-  import { classNames } from '../../utilities/class-names.ts';
-  import { devWarn } from '../../utilities/dev-warn.ts';
-
-  let {
-    id,
-    value = $bindable(0),
-    count = 5,
-    precision = 'whole',
-    label,
-    hideLabel = false,
-    'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledBy,
-    description,
-    error,
-    disabled,
-    readonly = false,
-    required,
-    name,
-    class: className,
-    onchange,
-  }: RatingProps = $props();
-
-  const context = getFormFieldContext();
-
-  /** Normalize `count` to an integer in `[1, 10]`, defaulting to 5 on bad input. */
-  const normalizedCount = $derived.by(() => {
-    if (!Number.isFinite(count)) return 5;
-    const truncated = Math.trunc(count);
-    if (truncated < 1) return 1;
-    if (truncated > 10) return 10;
-    return truncated;
-  });
-
-  const stepSize = $derived(precision === 'half' ? 0.5 : 1);
-
-  /** Build the sorted list of valid commit values for the current precision. */
-  const valueOptions = $derived.by(() => {
-    const out: number[] = [];
-    for (let step = stepSize; step <= normalizedCount + stepSize / 2; step += stepSize) {
-      out.push(Number(step.toFixed(2)));
-    }
-    return out;
-  });
-
-  function snapToOption(raw: number): number {
-    if (!Number.isFinite(raw) || raw <= 0) return 0;
-    if (raw >= normalizedCount) return normalizedCount;
-    const stepped = Math.round(raw / stepSize) * stepSize;
-    const rounded = Number(stepped.toFixed(2));
-    return Math.max(0, Math.min(normalizedCount, rounded));
-  }
-
-  const resolvedValue = $derived(snapToOption(value ?? 0));
-
-  let hoverValue = $state<number | null>(null);
-  const displayValue = $derived(hoverValue ?? resolvedValue);
-
-  const groupLabelId = $derived(label ? `${id}-label` : undefined);
-  const defaultDescriptionId = $derived(describeId(id, !!description));
-  const defaultErrorId = $derived(buildErrorId(id, !!error));
-  const ownDescriptionId = $derived(
-    description && defaultDescriptionId === context?.descriptionId
-      ? `${id}-rating-description`
-      : defaultDescriptionId,
-  );
-  const ownErrorId = $derived(
-    error && defaultErrorId === context?.errorId ? `${id}-rating-error` : defaultErrorId,
-  );
-  const resolvedDescriptionId = $derived(ownDescriptionId ?? context?.descriptionId);
-  const resolvedErrorId = $derived(ownErrorId ?? context?.errorId);
-  const describedBy = $derived(composeDescribedBy(resolvedDescriptionId, resolvedErrorId));
-  const resolvedAriaInvalid = $derived(error ? ariaInvalid(true) : context?.invalid);
-  const resolvedRequired = $derived(required ?? context?.required ?? false);
-  const resolvedDisabled = $derived(disabled ?? context?.disabled ?? false);
-
-  const resolvedGroupLabelledBy = $derived.by(() => {
-    if (groupLabelId) return groupLabelId;
-    if (context?.labelId) return context.labelId;
-    if (ariaLabelledBy) return ariaLabelledBy;
-    return undefined;
-  });
-
-  const groupAriaLabel = $derived(
-    !resolvedGroupLabelledBy && !ariaLabelledBy ? ariaLabel : undefined,
-  );
-
-  const hasGroupAccessibleName = $derived(
-    !!label || !!context?.labelId || !!ariaLabelledBy || !!ariaLabel,
-  );
-
-  $effect(() => {
-    if (!hasGroupAccessibleName) {
-      devWarn(
-        `[cinder/Rating] No accessible name source for id="${id}". Provide a label, aria-label, aria-labelledby, or wrap in a FormField.`,
-      );
-    }
-  });
-
-  function optionId(option: number): string {
-    return `${id}-option-${String(option).replace('.', '_')}`;
-  }
-
-  function describeOption(option: number): string {
-    const noun = option === 1 ? 'star' : 'stars';
-    return `${option} ${noun} of ${normalizedCount}`;
-  }
-
-  function readableValueText(): string {
-    if (resolvedValue === 0) return `Unrated, out of ${normalizedCount}`;
-    const noun = resolvedValue === 1 ? 'star' : 'stars';
-    return `${resolvedValue} ${noun} out of ${normalizedCount}`;
-  }
-
-  const readonlyValueTextId = $derived(`${id}-rating-value`);
-
-  /**
-   * Compose the readonly container's accessible-name reference. The value
-   * text MUST appear in the name — otherwise screen readers announce only
-   * the consumer's field label and lose the actual rating. When there is no
-   * DOM-backed label, fall back to `aria-label` so the value text still
-   * surfaces (the visually-hidden span exists as redundant context for AT
-   * stacks that ignore the role=img label).
-   */
-  const readonlyLabelledBy = $derived(
-    resolvedGroupLabelledBy
-      ? `${resolvedGroupLabelledBy} ${readonlyValueTextId}`
-      : ariaLabelledBy
-        ? `${ariaLabelledBy} ${readonlyValueTextId}`
-        : undefined,
-  );
-
-  const readonlyAriaLabel = $derived.by(() => {
-    if (readonlyLabelledBy) return undefined;
-    const consumerLabel = ariaLabel;
-    if (consumerLabel) return `${consumerLabel}: ${readableValueText()}`;
-    return readableValueText();
-  });
-
-  function commit(next: number): void {
-    const snapped = snapToOption(next);
-    if (snapped !== resolvedValue) {
-      value = snapped;
-      onchange?.(snapped);
-    } else {
-      // Re-emit when the user re-selects the same value? No — keep
-      // onchange aligned with React's <input> semantics: same value = no fire.
-    }
-  }
-
-  function focusOption(option: number): void {
-    if (typeof document === 'undefined') return;
-    const element = document.getElementById(optionId(option));
-    if (element instanceof HTMLElement) element.focus();
-  }
-
-  function activeFocusTarget(): number {
-    if (resolvedValue > 0) return resolvedValue;
-    const first = valueOptions[0];
-    return first ?? stepSize;
-  }
-
-  function handleClick(option: number): void {
-    if (resolvedDisabled || readonly) return;
-    commit(option);
-  }
-
-  function handleKeyDown(event: KeyboardEvent, option: number): void {
-    if (resolvedDisabled || readonly) return;
-    const index = valueOptions.indexOf(option);
-    if (index === -1) return;
-    let nextIndex = index;
-    switch (event.key) {
-      case 'ArrowRight':
-      case 'ArrowUp': {
-        nextIndex = (index + 1) % valueOptions.length;
-        if (resolvedValue === 0) {
-          // unrated: commit the first option without wrapping past it
-          event.preventDefault();
-          const first = valueOptions[0]!;
-          commit(first);
-          focusOption(first);
-          return;
-        }
-        break;
-      }
-      case 'ArrowLeft':
-      case 'ArrowDown': {
-        if (resolvedValue === 0) {
-          event.preventDefault();
-          const last = valueOptions.at(-1)!;
-          commit(last);
-          focusOption(last);
-          return;
-        }
-        nextIndex = (index - 1 + valueOptions.length) % valueOptions.length;
-        break;
-      }
-      case 'Home': {
-        nextIndex = 0;
-        break;
-      }
-      case 'End': {
-        nextIndex = valueOptions.length - 1;
-        break;
-      }
-      case ' ':
-      case 'Enter':
-      case 'Spacebar': {
-        if (resolvedValue === 0) {
-          event.preventDefault();
-          const first = valueOptions[0]!;
-          commit(first);
-          focusOption(first);
-          return;
-        }
-        event.preventDefault();
-        commit(option);
-        return;
-      }
-      default:
-        return;
-    }
-    event.preventDefault();
-    const next = valueOptions[nextIndex]!;
-    commit(next);
-    focusOption(next);
-  }
-
-  function handlePointerEnter(option: number): void {
-    if (resolvedDisabled || readonly) return;
-    hoverValue = option;
-  }
-
-  function handlePointerLeave(): void {
-    hoverValue = null;
-  }
-
-  function fillPercentForSlot(slot: number): number {
-    // slot is 1..normalizedCount. Return fill percentage 0..100 for that star
-    // based on displayValue.
-    const diff = displayValue - (slot - 1);
-    if (diff <= 0) return 0;
-    if (diff >= 1) return 100;
-    return diff * 100;
-  }
-
-  function isOptionChecked(option: number): boolean {
-    return resolvedValue === option;
-  }
-
-  function tabIndexFor(option: number): 0 | -1 {
-    if (resolvedDisabled) return -1;
-    const focusTarget = activeFocusTarget();
-    return option === focusTarget ? 0 : -1;
-  }
-</script>
-
-<div
-  class={classNames('cinder-rating-field', readonly && 'cinder-rating-field--readonly', className)}
-  data-cinder-disabled={resolvedDisabled || undefined}
->
-  {#if label}
-    <span
-      id={groupLabelId}
-      class={classNames('cinder-rating-field__label', hideLabel && 'cinder-sr-only')}
-      data-disabled={resolvedDisabled || undefined}
-    >
-      {label}
-    </span>
-  {/if}
-
-  {#if readonly}
-    <div
-      class="cinder-rating cinder-rating--readonly"
-      role="img"
-      aria-labelledby={readonlyLabelledBy}
-      aria-label={readonlyAriaLabel}
-      aria-describedby={describedBy}
-    >
-      {#each Array.from({ length: normalizedCount }, (_, i) => i + 1) as slot (slot)}
-        <span class="cinder-rating__star" aria-hidden="true">
-          <span
-            class="cinder-rating__star-fill"
-            style:--_cinder-rating-fill="{fillPercentForSlot(slot)}%"
-          ></span>
-        </span>
-      {/each}
-      <span id={readonlyValueTextId} class="cinder-sr-only">{readableValueText()}</span>
-    </div>
-  {:else}
-    <div
-      class="cinder-rating"
-      role="radiogroup"
-      tabindex="-1"
-      aria-labelledby={resolvedGroupLabelledBy}
-      aria-label={groupAriaLabel}
-      aria-describedby={describedBy}
-      aria-invalid={resolvedAriaInvalid}
-      aria-required={resolvedRequired || undefined}
-      aria-disabled={resolvedDisabled || undefined}
-      onpointerleave={handlePointerLeave}
-    >
-      {#each Array.from({ length: normalizedCount }, (_, i) => i + 1) as slot (slot)}
-        <span class="cinder-rating__star" aria-hidden="true">
-          <span
-            class="cinder-rating__star-fill"
-            style:--_cinder-rating-fill="{fillPercentForSlot(slot)}%"
-          ></span>
-        </span>
-      {/each}
-
-      <div class="cinder-rating__hit-area">
-        {#each valueOptions as option (option)}
-          <button
-            id={optionId(option)}
-            class="cinder-rating__option"
-            type="button"
-            role="radio"
-            aria-checked={isOptionChecked(option)}
-            aria-label={describeOption(option)}
-            tabindex={tabIndexFor(option)}
-            disabled={resolvedDisabled || undefined}
-            data-cinder-rating-option={option}
-            onclick={() => handleClick(option)}
-            onkeydown={(event) => handleKeyDown(event, option)}
-            onpointerenter={() => handlePointerEnter(option)}
-            onblur={handlePointerLeave}
-          ></button>
-        {/each}
-      </div>
-    </div>
-  {/if}
-
-  {#if name}
-    <input
-      type="hidden"
-      {name}
-      value={resolvedValue}
-      required={resolvedRequired}
-      disabled={resolvedDisabled}
-    />
-  {/if}
-
-  {#if description}
-    <p id={ownDescriptionId} class="cinder-rating-field__description">{description}</p>
-  {/if}
-
-  {#if error}
-    <p id={ownErrorId} class="cinder-rating-field__error" aria-live="polite" aria-atomic="true">
-      {error}
-    </p>
-  {/if}
-</div>

package/src/components/rating/rating.types.ts

@@ -1,59 +0,0 @@
-/**
- * Precision of selectable values in `<Rating>`. `'whole'` allows the values
- * `1, 2, …, count`; `'half'` allows the half-step values `0.5, 1, 1.5, …, count`.
- */
-export type RatingPrecision = 'whole' | 'half';
-
-/**
- * Props for `<Rating>`. Renders a star rating that combines a radio-group
- * interactive mode with a non-interactive readonly display mode.
- */
-export type RatingProps = {
-  /** Stable id used as the radio-group id prefix and as the hidden input id. */
-  id: string;
-  /**
-   * Bindable rating value. `0` represents an unrated state. External values
-   * are clamped into `[0, count]` and snapped to the nearest precision step.
-   *
-   * **No write-back normalization.** The bound prop reflects exactly what the
-   * consumer set — it is NOT mutated back to the clamped/snapped value. The
-   * displayed and submitted value is normalized via `$derived`, but the binding
-   * itself is left untouched. This is intentional: the consumer owns the source
-   * of truth, and silent mutation of a bound prop is a surprising side-effect.
-   */
-  value?: number;
-  /**
-   * Number of rating slots. Normalized to an integer in `[1, 10]`; non-finite
-   * or out-of-range values fall back to `5`.
-   */
-  count?: number;
-  /** Precision of each step. Defaults to `'whole'`. */
-  precision?: RatingPrecision;
-  /** Visible group label rendered above the rating. */
-  label?: string;
-  /** Visually hide the rendered `label` while keeping it programmatically associated. */
-  hideLabel?: boolean;
-  /** Group accessible name when no visible `label` is supplied. */
-  'aria-label'?: string;
-  /** Space-separated list of ids that label the group when no `label` is supplied. */
-  'aria-labelledby'?: string;
-  /** Optional description text rendered below the rating. */
-  description?: string;
-  /** Optional error message; sets `aria-invalid="true"` on the rating group. */
-  error?: string;
-  /** Disable every rating control and the hidden input. */
-  disabled?: boolean;
-  /** Render a non-interactive display with an accessible text equivalent. */
-  readonly?: boolean;
-  /** Mark the group as required for assistive technology. */
-  required?: boolean;
-  /** Form-control name applied to the hidden `<input>` that submits with the form. */
-  name?: string;
-  /** Extra class names appended to the root group element. */
-  class?: string;
-  /**
-   * Fires only for user-initiated committed value changes (click, arrow keys,
-   * Space/Enter). Never fires for hover preview or external prop synchronization.
-   */
-  onchange?: (value: number) => void;
-};

package/src/components/resizable-panels/index.ts

@@ -1,16 +0,0 @@
-import './resizable-panels.css';
-import ResizablePanels from './resizable-panels.svelte';
-
-export default ResizablePanels;
-export type {
-  ResizablePanelDefinition,
-  ResizablePanelRenderContext,
-  ResizablePanelSize,
-  ResizablePanelSizeState,
-  ResizablePanelsCollapseTarget,
-  ResizablePanelsOrientation,
-  ResizablePanelsProps,
-  ResizablePanelsResizeEvent,
-  ResizablePanelsResizeReason,
-} from './resizable-panels.types.ts';
-export { ResizablePanels };