@lostgradient/cinder 0.5.0 → 0.6.0

package/src/components/button/button.types.ts

@@ -1,120 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
-
-/**
- * Visual style of the button.
- *
- * `secondary` is an outline-style button (filled surface + border). It is kept as `secondary`
- * rather than `outline` because: (a) today's `secondary` is already outline-flavored, (b) `ghost`
- * covers the transparent-background case, and (c) 27+ call sites depend on `secondary` today.
- *
- * `soft` / `soft-danger` use a tinted fill with no border — mid-emphasis between `ghost` and
- * `primary`/`danger`. Background is `color-mix(in oklch, accent, transparent 88%)` so it
- * resolves against the current theme's accent/danger color in both light and dark modes.
- *
- * @default `"secondary"`
- */
-export type ButtonVariant =
-  | 'primary'
-  | 'secondary'
-  | 'soft'
-  | 'danger'
-  | 'soft-danger'
-  | 'ghost'
-  | 'ghost-danger';
-
-/**
- * Size of the button. All sizes use compact visual heights; see button.a11y.md for touch-target guidance.
- *
- * @default `"md"`
- */
-export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-
-type SharedBase = {
-  /** Visual style. */
-  variant?: ButtonVariant;
-  /** Size of the button. */
-  size?: ButtonSize;
-  /** Expand to container width. */
-  fullWidth?: boolean;
-  /** Disable the button and show a spinner. */
-  loading?: boolean;
-  /** DECORATIVE icon rendered before the label/children. Always wrapped in aria-hidden.
-   *  If the icon conveys meaning, supply accessible text via `label`/`aria-label` instead. */
-  leadingIcon?: Snippet;
-  /** DECORATIVE icon rendered after the label/children. Always wrapped in aria-hidden.
-   *  Same accessible-name guidance as `leadingIcon`. */
-  trailingIcon?: Snippet;
-  /** Custom class merged with `.cinder-button`. */
-  class?: string;
-};
-
-// At least one of `label` or `children` must be provided so the button has an accessible name.
-//
-// The union shape (rather than `label?: string; children?: Snippet`) gives TypeScript a
-// compile-time guarantee that a consumer can't write `<Button />` with neither. The Phase 4
-// analyzer reads this two-variant shape to generate correct prop-control UI for each branch.
-// Runtime limitation: `string` includes `""`, so a literal empty label still satisfies
-// `WithLabel`. The dev-mode guard in the instance script catches that case.
-//
-// `iconOnly` lives only in the union branches (not SharedBase) so the discriminant is real:
-// `WithChildren` genuinely forbids `iconOnly={true}`, and `WithIconOnly` requires it.
-type WithLabel = { label: string; children?: Snippet; iconOnly?: false };
-type WithChildren = { label?: string; children: Snippet; iconOnly?: false };
-type IconOnlyAccessibleName =
-  | { label: string; 'aria-label'?: string; 'aria-labelledby'?: string }
-  | { label?: string; 'aria-label': string; 'aria-labelledby'?: string }
-  | { label?: string; 'aria-label'?: string; 'aria-labelledby': string };
-type IconOnlyVisual =
-  | { children: Snippet; leadingIcon?: Snippet; trailingIcon?: Snippet }
-  | { children?: Snippet; leadingIcon: Snippet; trailingIcon?: Snippet }
-  | { children?: Snippet; leadingIcon?: Snippet; trailingIcon: Snippet };
-// Icon-only buttons require a name source and a visual icon source at compile time.
-// `children` is accepted as the visual icon only; it is not a name source in this mode.
-type WithIconOnly = { iconOnly: true } & IconOnlyAccessibleName & IconOnlyVisual;
-type SharedProps = SharedBase & (WithLabel | WithChildren | WithIconOnly);
-
-type ButtonOnlyProps = SharedProps & Omit<HTMLButtonAttributes, 'class'> & { href?: undefined };
-type LinkButtonProps = SharedProps & Omit<HTMLAnchorAttributes, 'class'> & { href: string };
-
-/** Props for the Button component. */
-export type ButtonProps = ButtonOnlyProps | LinkButtonProps;
-
-/**
- * Cinder-specific props for the Button component, used by the schema generator.
- * Excludes the inherited HTML attribute surface that consumers can spread via
- * `...rest` — those are documented in the underlying element's MDN reference.
- */
-export interface ButtonSchemaProps {
-  /**
-   * Visual style.
-   * @default "secondary"
-   */
-  variant?: ButtonVariant;
-  /**
-   * Size of the button.
-   * @default "md"
-   */
-  size?: ButtonSize;
-  /**
-   * Expand to container width.
-   * @default false
-   */
-  fullWidth?: boolean;
-  /**
-   * Disable the button and show a spinner.
-   * @default false
-   */
-  loading?: boolean;
-  /**
-   * Render the button with only an icon. Requires an accessible name source.
-   * @default false
-   */
-  iconOnly?: boolean;
-  /** Render as an anchor `<a>` element with this href. */
-  href?: string;
-  /** Visible text label. Must be non-empty if provided. */
-  label?: string;
-  /** Custom class merged with `.cinder-button`. */
-  class?: string;
-}

package/src/components/button/index.ts

@@ -1,6 +0,0 @@
-import './button.css';
-import Button from './button.svelte';
-
-export default Button;
-export type { ButtonProps, ButtonSize, ButtonVariant } from './button.types.ts';
-export { Button };

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

@@ -1,127 +0,0 @@
-<script lang="ts" module>
-  /**
-   * @cinder
-   * @category action
-   * @status stable
-   * @purpose Visual and semantic grouping of related buttons that share a single accessible label and present as one connected control.
-   * @tag action
-   * @tag grouping
-   * @useWhen Clustering related actions such as align-left/center/right that read as a single toolset.
-   * @useWhen Visually joining multiple buttons into a single segmented bar without implying selection.
-   * @avoidWhen Selecting exactly one option from a fixed set — use segmented-control instead.
-   * @avoidWhen Rendering a single button — use button on its own.
-   * @related button, segmented-control
-   */
-  let groupIdCounter = 0;
-
-  export type { ButtonGroupOrientation, ButtonGroupProps } from './button-group.types.ts';
-</script>
-
-<script lang="ts">
-  import type { ButtonGroupProps } from './button-group.types.ts';
-  import type { Attachment } from 'svelte/attachments';
-
-  import { classNames } from '../../utilities/class-names.ts';
-  import { devWarn } from '../../utilities/dev-warn.ts';
-  import { useMutationObserver } from '../../utilities/use-mutation-observer.svelte.ts';
-
-  let {
-    label,
-    labelledBy,
-    orientation = 'horizontal',
-    class: customClassName,
-    children,
-    ...rest
-  }: ButtonGroupProps = $props();
-
-  const mergedClassName = $derived(classNames('cinder-button-group', customClassName));
-  const ariaLabelAttribute = $derived(typeof label === 'string' ? label : undefined);
-  const ariaLabelledByAttribute = $derived(typeof labelledBy === 'string' ? labelledBy : undefined);
-
-  // Each group instance gets a unique ID so the styling-contract attribute
-  // carries ownership. When a child moves from one group to another, the new
-  // group overwrites the value and the old group's cleanup only removes it if
-  // the value still matches this instance's ID.
-  const groupId = String(++groupIdCounter);
-
-  const tagDirectChildren: Attachment = (element) => {
-    const ATTR = 'data-cinder-button-group-item';
-    // Track previously tagged children by element reference so cleanup is
-    // O(n) and ownership-specific: we only remove our group's tag value.
-    const tagged = new Set<Element>();
-
-    const sync = () => {
-      const currentChildren = new Set(Array.from(element.children));
-
-      // Stamp current direct children with this group's ID. Overwriting
-      // another group's ID claims ownership — the other group's cleanup will
-      // see a mismatched value and skip removal, so no double-remove race.
-      for (const child of currentChildren) {
-        child.setAttribute(ATTR, groupId);
-        tagged.add(child);
-      }
-
-      // Remove ownership from children that are no longer direct children.
-      // Only remove if the value still matches this group's ID — prevents
-      // clobbering a new group that already claimed the child.
-      for (const previouslyTagged of Array.from(tagged)) {
-        if (!currentChildren.has(previouslyTagged)) {
-          if (previouslyTagged.getAttribute(ATTR) === groupId) {
-            previouslyTagged.removeAttribute(ATTR);
-          }
-          tagged.delete(previouslyTagged);
-        }
-      }
-    };
-
-    sync();
-
-    const detachObserver = useMutationObserver(sync, { childList: true })(element as HTMLElement);
-
-    return () => {
-      detachObserver?.();
-      // Release ownership on unmount for any remaining tagged children.
-      for (const child of Array.from(tagged)) {
-        if (child.getAttribute(ATTR) === groupId) {
-          child.removeAttribute(ATTR);
-        }
-      }
-    };
-  };
-
-  $effect(() => {
-    const hasLabel = typeof label === 'string';
-    const hasLabelledBy = typeof labelledBy === 'string';
-
-    if (!hasLabel && !hasLabelledBy) {
-      devWarn(
-        "[cinder/ButtonGroup] rendered without a non-empty accessible name — pass a non-empty 'label' or 'labelledBy'.",
-      );
-      return;
-    }
-
-    if (hasLabel && label.trim().length === 0) {
-      devWarn(
-        "[cinder/ButtonGroup] rendered without a non-empty accessible name — pass a non-empty 'label' or 'labelledBy'.",
-      );
-    }
-
-    if (hasLabelledBy && labelledBy.trim().length === 0) {
-      devWarn(
-        "[cinder/ButtonGroup] rendered without a non-empty accessible name — pass a non-empty 'label' or 'labelledBy'.",
-      );
-    }
-  });
-</script>
-
-<div
-  {...rest}
-  role="group"
-  aria-label={ariaLabelAttribute}
-  aria-labelledby={ariaLabelledByAttribute}
-  class={mergedClassName}
-  data-cinder-orientation={orientation}
-  {@attach tagDirectChildren}
->
-  {@render children()}
-</div>

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

@@ -1,34 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-/** Visual/layout orientation of the group. */
-export type ButtonGroupOrientation = 'horizontal' | 'vertical';
-type ButtonGroupBase = Omit<
-  HTMLAttributes<HTMLDivElement>,
-  'class' | 'role' | 'aria-label' | 'aria-labelledby'
-> & {
-  /** Orientation of the visual collapse. Default: 'horizontal'. */
-  orientation?: ButtonGroupOrientation;
-  /** Additional class merged with `.cinder-button-group`. */
-  class?: string;
-  /** Buttons (or split-button compositions) to render inside the group. */
-  children: Snippet;
-};
-/**
- * Layout-only grouping container for related action buttons.
- * Requires an accessible name via either `label` (for inline labelling)
- * or `labelledBy` (when a visible heading already names the group).
- * Exactly one must be provided.
- */
-export type ButtonGroupProps = ButtonGroupBase &
-  (
-    | {
-        /** Inline accessible name for the group, applied as `aria-label`. Provide exactly one of `label` or `labelledBy`. */
-        label: string;
-        labelledBy?: never;
-      }
-    | {
-        label?: never;
-        /** The `id` of a visible heading element that already names the group, applied as `aria-labelledby`. Provide exactly one of `label` or `labelledBy`. */
-        labelledBy: string;
-      }
-  );

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

@@ -1,6 +0,0 @@
-import './button-group.css';
-import ButtonGroup from './button-group.svelte';
-
-export default ButtonGroup;
-export type { ButtonGroupOrientation, ButtonGroupProps } from './button-group.types.ts';
-export { ButtonGroup };

package/src/components/calendar/calendar.svelte

@@ -1,373 +0,0 @@
-<script lang="ts" module>
-  /**
-   * @cinder
-   * @category form
-   * @status alpha
-   * @purpose Keyboard-navigable month grid for choosing a calendar date with full styling control and min/max constraints.
-   * @tag form
-   * @tag date
-   * @tag calendar
-   * @useWhen Rendering a custom date-grid picker inside an input popover.
-   * @useWhen Requiring consistent cross-browser calendar behavior that native date controls cannot provide.
-   * @avoidWhen A plain browser-managed date input is sufficient and custom keyboard semantics are not required.
-   * @related date-picker, date-range-field
-   */
-  export type { CalendarProps } from './calendar.types.ts';
-</script>
-
-<script lang="ts">
-  import { tick, untrack } from 'svelte';
-  import type { CalendarProps } from './calendar.types.ts';
-  import { classNames } from '../../utilities/class-names.ts';
-
-  type CalendarCell = {
-    iso: string;
-    day: number;
-    inMonth: boolean;
-    disabled: boolean;
-    focused: boolean;
-    selected: boolean;
-    ariaLabel: string;
-  };
-
-  const WEEKDAY_INDEXES = [0, 1, 2, 3, 4, 5, 6] as const;
-
-  let {
-    id,
-    value = $bindable<string | undefined>(undefined),
-    month,
-    min,
-    max,
-    firstDayOfWeek = 0,
-    locale = 'en-US',
-    label = 'Calendar',
-    disabled = false,
-    class: className,
-    onchange,
-    disabledDate,
-    ...rest
-  }: CalendarProps = $props();
-
-  const generatedId = $props.id();
-  const rootId = $derived(id ?? generatedId);
-  const titleId = $derived(`${rootId}-title`);
-  const monthGridId = $derived(`${rootId}-grid`);
-
-  function parseISODate(iso: string | undefined): Date | null {
-    if (!iso) return null;
-    const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(iso);
-    if (!match) return null;
-    const year = Number(match[1]);
-    const monthValue = Number(match[2]);
-    const day = Number(match[3]);
-    if (monthValue < 1 || monthValue > 12) return null;
-    const date = new Date(year, monthValue - 1, day);
-    if (
-      date.getFullYear() !== year ||
-      date.getMonth() !== monthValue - 1 ||
-      date.getDate() !== day
-    ) {
-      return null;
-    }
-    return date;
-  }
-
-  function toISODate(date: Date): string {
-    const year = date.getFullYear();
-    const monthValue = String(date.getMonth() + 1).padStart(2, '0');
-    const day = String(date.getDate()).padStart(2, '0');
-    return `${year}-${monthValue}-${day}`;
-  }
-
-  function startOfMonth(date: Date): Date {
-    return new Date(date.getFullYear(), date.getMonth(), 1);
-  }
-
-  function addDays(date: Date, days: number): Date {
-    const next = new Date(date);
-    next.setDate(next.getDate() + days);
-    return next;
-  }
-
-  function addMonths(date: Date, months: number): Date {
-    return new Date(date.getFullYear(), date.getMonth() + months, 1);
-  }
-
-  function startOfWeek(date: Date, weekStart: number): Date {
-    const offset = (date.getDay() - weekStart + 7) % 7;
-    return addDays(date, -offset);
-  }
-
-  function isISOWithinBounds(iso: string): boolean {
-    if (min && iso < min) return false;
-    if (max && iso > max) return false;
-    return true;
-  }
-
-  function isDateDisabled(iso: string): boolean {
-    if (!isISOWithinBounds(iso)) return true;
-    return disabledDate?.(iso) ?? false;
-  }
-
-  function resolveAnchorIso(
-    valueProp: string | undefined,
-    monthProp: string | undefined,
-    fallbackIso: string,
-  ): string {
-    if (valueProp && parseISODate(valueProp)) return valueProp;
-    if (monthProp && parseISODate(monthProp)) return monthProp;
-    return fallbackIso;
-  }
-
-  const initialTodayIso = toISODate(new Date());
-  const initialAnchorIso = untrack(() => resolveAnchorIso(value, month, initialTodayIso));
-  const initialFocusedIso = untrack(() =>
-    value && parseISODate(value) ? value : initialAnchorIso,
-  );
-  const todayIso = $derived(toISODate(new Date()));
-  const anchorIso = $derived(resolveAnchorIso(value, month, todayIso));
-  const anchorDate = $derived(parseISODate(anchorIso) ?? new Date());
-  let visibleMonthDate = $state(startOfMonth(parseISODate(initialAnchorIso) ?? new Date()));
-  let focusedIso = $state(initialFocusedIso);
-  let lastSyncedAnchorIso = $state<string | null>(initialAnchorIso);
-  const focusedDayId = $derived(`${monthGridId}-day-${focusedIso}`);
-
-  $effect(() => {
-    if (anchorIso === lastSyncedAnchorIso) return;
-    visibleMonthDate = startOfMonth(anchorDate);
-    if (value) focusedIso = value;
-    else focusedIso = anchorIso;
-    lastSyncedAnchorIso = anchorIso;
-  });
-
-  const monthLabel = $derived(
-    new Intl.DateTimeFormat(locale, { month: 'long', year: 'numeric' }).format(visibleMonthDate),
-  );
-
-  const weekdayLabels = $derived(
-    WEEKDAY_INDEXES.map((index) => {
-      const dayIndex = (index + firstDayOfWeek) % 7;
-      const base = new Date(2024, 0, 7 + dayIndex);
-      return new Intl.DateTimeFormat(locale, { weekday: 'short' }).format(base);
-    }),
-  );
-
-  const cells = $derived.by(() => {
-    const first = startOfMonth(visibleMonthDate);
-    const gridStart = startOfWeek(first, firstDayOfWeek);
-    const selectedIso = value;
-    const focused = focusedIso;
-    const dayLabelFmt = new Intl.DateTimeFormat(locale, {
-      weekday: 'long',
-      year: 'numeric',
-      month: 'long',
-      day: 'numeric',
-    });
-    const next: CalendarCell[] = [];
-    for (let index = 0; index < 42; index += 1) {
-      const date = addDays(gridStart, index);
-      const iso = toISODate(date);
-      next.push({
-        iso,
-        day: date.getDate(),
-        inMonth: date.getMonth() === visibleMonthDate.getMonth(),
-        disabled: disabled || isDateDisabled(iso),
-        focused: iso === focused,
-        selected: iso === selectedIso,
-        ariaLabel: dayLabelFmt.format(date),
-      });
-    }
-    return next;
-  });
-
-  const rows = $derived.by(() => {
-    const next: CalendarCell[][] = [];
-    for (let index = 0; index < cells.length; index += 7) {
-      next.push(cells.slice(index, index + 7));
-    }
-    return next;
-  });
-
-  async function focusDate(iso: string, moveDomFocus = false) {
-    focusedIso = iso;
-    const parsed = parseISODate(iso);
-    if (parsed) {
-      visibleMonthDate = startOfMonth(parsed);
-    }
-    if (!moveDomFocus) return;
-    await tick();
-    const target = document.getElementById(focusedDayId) as HTMLButtonElement | null;
-    target?.focus();
-  }
-
-  function commitDate(iso: string) {
-    if (disabled || isDateDisabled(iso)) return;
-    value = iso;
-    focusedIso = iso;
-    onchange?.(iso);
-  }
-
-  async function moveFocusedByDays(delta: number) {
-    const base = parseISODate(focusedIso) ?? visibleMonthDate;
-    const next = addDays(base, delta);
-    await focusDate(toISODate(next), true);
-  }
-
-  function clampDayToMonth(year: number, monthValue: number, day: number): Date {
-    const lastDay = new Date(year, monthValue + 1, 0).getDate();
-    return new Date(year, monthValue, Math.min(day, lastDay));
-  }
-
-  async function moveFocusedByMonths(delta: number, moveDomFocus = true) {
-    const base = parseISODate(focusedIso) ?? visibleMonthDate;
-    const monthStart = addMonths(startOfMonth(base), delta);
-    const candidate = clampDayToMonth(
-      monthStart.getFullYear(),
-      monthStart.getMonth(),
-      base.getDate(),
-    );
-    await focusDate(toISODate(candidate), moveDomFocus);
-  }
-
-  async function handleKeydown(event: KeyboardEvent) {
-    if (disabled) return;
-
-    switch (event.key) {
-      case 'ArrowLeft':
-        event.preventDefault();
-        await moveFocusedByDays(-1);
-        break;
-      case 'ArrowRight':
-        event.preventDefault();
-        await moveFocusedByDays(1);
-        break;
-      case 'ArrowUp':
-        event.preventDefault();
-        await moveFocusedByDays(-7);
-        break;
-      case 'ArrowDown':
-        event.preventDefault();
-        await moveFocusedByDays(7);
-        break;
-      case 'Home': {
-        event.preventDefault();
-        const focused = parseISODate(focusedIso) ?? visibleMonthDate;
-        const weekStart = startOfWeek(focused, firstDayOfWeek);
-        await focusDate(toISODate(weekStart), true);
-        break;
-      }
-      case 'End': {
-        event.preventDefault();
-        const focused = parseISODate(focusedIso) ?? visibleMonthDate;
-        const weekEnd = addDays(startOfWeek(focused, firstDayOfWeek), 6);
-        await focusDate(toISODate(weekEnd), true);
-        break;
-      }
-      case 'PageUp':
-        event.preventDefault();
-        await moveFocusedByMonths(-1);
-        break;
-      case 'PageDown':
-        event.preventDefault();
-        await moveFocusedByMonths(1);
-        break;
-      case 'Enter':
-      case ' ':
-        event.preventDefault();
-        commitDate(focusedIso);
-        break;
-      default:
-        break;
-    }
-  }
-
-  function canGoPrevMonth(): boolean {
-    if (!min) return true;
-    const prev = addMonths(visibleMonthDate, -1);
-    const monthEnd = new Date(prev.getFullYear(), prev.getMonth() + 1, 0);
-    return toISODate(monthEnd) >= min;
-  }
-
-  function canGoNextMonth(): boolean {
-    if (!max) return true;
-    const next = addMonths(visibleMonthDate, 1);
-    const monthStart = new Date(next.getFullYear(), next.getMonth(), 1);
-    return toISODate(monthStart) <= max;
-  }
-</script>
-
-<div {...rest} aria-label={label} class={classNames('cinder-calendar', className)}>
-  <div class="cinder-calendar__header">
-    <button
-      type="button"
-      class="cinder-calendar__nav"
-      aria-label="Previous month"
-      onclick={() => {
-        void moveFocusedByMonths(-1, false);
-      }}
-      disabled={disabled || !canGoPrevMonth()}
-    >
-      ‹
-    </button>
-    <p id={titleId} class="cinder-calendar__title">{monthLabel}</p>
-    <button
-      type="button"
-      class="cinder-calendar__nav"
-      aria-label="Next month"
-      onclick={() => {
-        void moveFocusedByMonths(1, false);
-      }}
-      disabled={disabled || !canGoNextMonth()}
-    >
-      ›
-    </button>
-  </div>
-
-  <div class="cinder-calendar__weekdays" aria-hidden="true">
-    {#each weekdayLabels as weekday (weekday)}
-      <span class="cinder-calendar__weekday">{weekday}</span>
-    {/each}
-  </div>
-
-  <div
-    id={monthGridId}
-    class="cinder-calendar__grid"
-    role="grid"
-    aria-labelledby={titleId}
-    tabindex="-1"
-    onkeydown={handleKeydown}
-  >
-    {#each rows as row, rowIndex (row[0]?.iso ?? rowIndex)}
-      <div role="row" class="cinder-calendar__grid-row">
-        {#each row as cell (cell.iso)}
-          <div
-            role="gridcell"
-            aria-selected={cell.selected || undefined}
-            class="cinder-calendar__gridcell"
-          >
-            <button
-              type="button"
-              id={`${monthGridId}-day-${cell.iso}`}
-              class="cinder-calendar__day"
-              data-outside={cell.inMonth ? undefined : ''}
-              data-selected={cell.selected ? '' : undefined}
-              data-focused={cell.focused ? '' : undefined}
-              aria-current={cell.iso === todayIso ? 'date' : undefined}
-              aria-label={cell.ariaLabel}
-              aria-disabled={cell.disabled ? 'true' : undefined}
-              tabindex={cell.focused ? 0 : -1}
-              onclick={() => {
-                commitDate(cell.iso);
-              }}
-              onfocus={() => {
-                focusedIso = cell.iso;
-              }}
-            >
-              {cell.day}
-            </button>
-          </div>
-        {/each}
-      </div>
-    {/each}
-  </div>
-</div>