@lostgradient/cinder 0.5.0 → 0.6.0

package/src/components/_timeline-item/timeline-item.types.ts

@@ -1,51 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-
-import type { TimelineHeadingLevel, TimelineTone } from '../timeline/timeline.types.ts';
-
-/**
- * One entry in a Timeline. Renders a marker (dot or icon) on the rail
- * with the item content beside it.
- */
-export type TimelineItemProps = Omit<HTMLAttributes<HTMLLIElement>, 'class' | 'children'> & {
-  /** Machine-readable ISO datetime rendered into `<time datetime>`. */
-  datetime: string;
-  /** Visible timestamp label rendered inside `<time>`. */
-  timestamp: string;
-  /** Visible event title. */
-  title: string;
-  /** Semantic marker tone. @default "info" */
-  tone?: TimelineTone | undefined;
-  /** Whether to draw the connector to the following event. @default "visible" */
-  connectorAfter?: 'visible' | 'hidden' | undefined;
-  /** Optional adjacent group heading rendered inside this list item before the event body. */
-  groupHeader?: string | undefined;
-  /** Heading level applied when `groupHeader` is rendered. @default 3 */
-  groupHeaderLevel?: TimelineHeadingLevel | undefined;
-  /** Additional class names merged with `.cinder-timeline-item`. */
-  class?: string | undefined;
-  /** Item body content. */
-  children?: Snippet | undefined;
-  /** Decorative custom marker glyph. Must not contain interactive descendants. */
-  marker?: Snippet | undefined;
-};
-
-/** Schema generator surface for TimelineItem — excludes snippet props. */
-export interface TimelineItemSchemaProps {
-  /** Machine-readable ISO datetime rendered into `<time datetime>`. */
-  datetime: string;
-  /** Visible timestamp label rendered inside `<time>`. */
-  timestamp: string;
-  /** Visible event title. */
-  title: string;
-  /** Semantic marker tone. @default "info" */
-  tone?: TimelineTone | undefined;
-  /** Whether to draw the connector to the following event. @default "visible" */
-  connectorAfter?: 'visible' | 'hidden' | undefined;
-  /** Optional adjacent group heading rendered inside this list item before the event body. */
-  groupHeader?: string | undefined;
-  /** Heading level applied when `groupHeader` is rendered. @default 3 */
-  groupHeaderLevel?: TimelineHeadingLevel | undefined;
-  /** Additional class names merged with `.cinder-timeline-item`. */
-  class?: string | undefined;
-}

package/src/components/_tree-expand-all/index.ts

@@ -1,5 +0,0 @@
-import TreeExpandAll from './tree-expand-all.svelte';
-
-export default TreeExpandAll;
-export type { TreeExpandAllProps } from './tree-expand-all.types.ts';
-export { TreeExpandAll };

package/src/components/_tree-expand-all/tree-expand-all.svelte

@@ -1,83 +0,0 @@
-<script lang="ts" module>
-  /**
-   * @cinder
-   * @category data-display
-   * @status stable
-   * @purpose Context control for expanding or collapsing all registered static Tree branches.
-   * @tag tree
-   * @tag expansion
-   * @useWhen Adding expand-all and collapse-all controls to a Tree selectionControls snippet.
-   * @useWhen Expanding registered static Tree branches without placing controls inside role="tree".
-   * @avoidWhen Rendering outside a Tree component — it requires Tree selectionControls context.
-   * @avoidWhen Triggering async lazy loading for every branch; bulk expansion skips loadChildren branches.
-   * @related tree, tree-item
-   */
-  export type { TreeExpandAllProps } from './tree-expand-all.types.ts';
-</script>
-
-<script lang="ts">
-  import type { TreeContext } from '../../_internal/tree-context.ts';
-  import { getTreeContext } from '../../_internal/tree-context.ts';
-  import { classNames } from '../../utilities/class-names.ts';
-  import type { TreeExpandAllProps } from './tree-expand-all.types.ts';
-
-  let {
-    label = 'Tree expansion',
-    expandAllLabel = 'Expand all',
-    expandOneLevelLabel = 'Expand one level',
-    collapseAllLabel = 'Collapse all',
-    safetyThreshold = 500,
-    class: className,
-  }: TreeExpandAllProps = $props();
-
-  const context: TreeContext = getTreeContext();
-
-  const expandDisabled = $derived(context.expandableBranchCount === 0);
-  const collapseDisabled = $derived(!context.hasExpandedItems);
-  const showSafetyValve = $derived(context.expandableBranchCount > safetyThreshold);
-
-  function expandAll(): void {
-    if (!expandDisabled) void context.expandAll();
-  }
-
-  function expandOneLevel(): void {
-    if (!expandDisabled) context.expandOneLevel();
-  }
-
-  function collapseAll(): void {
-    if (!collapseDisabled) context.collapseAll();
-  }
-</script>
-
-<div class={classNames('cinder-tree-expand-all', className)}>
-  <span class="cinder-tree-expand-all__label">{label}</span>
-  {#if showSafetyValve}
-    <button
-      type="button"
-      class="cinder-tree-expand-all__button"
-      aria-label={`${expandOneLevelLabel}: ${label}`}
-      disabled={expandDisabled}
-      onclick={expandOneLevel}
-    >
-      {expandOneLevelLabel}
-    </button>
-  {/if}
-  <button
-    type="button"
-    class="cinder-tree-expand-all__button"
-    aria-label={`${expandAllLabel}: ${label}`}
-    disabled={expandDisabled}
-    onclick={expandAll}
-  >
-    {expandAllLabel}
-  </button>
-  <button
-    type="button"
-    class="cinder-tree-expand-all__button"
-    aria-label={`${collapseAllLabel}: ${label}`}
-    disabled={collapseDisabled}
-    onclick={collapseAll}
-  >
-    {collapseAllLabel}
-  </button>
-</div>

package/src/components/_tree-expand-all/tree-expand-all.types.ts

@@ -1,15 +0,0 @@
-/** Props for the TreeExpandAll component. */
-export type TreeExpandAllProps = {
-  /** Text label shown before the action buttons. */
-  label?: string;
-  /** Label for the full expand action. */
-  expandAllLabel?: string;
-  /** Label for the one-level expand action shown on large trees. */
-  expandOneLevelLabel?: string;
-  /** Label for the collapse-all action. */
-  collapseAllLabel?: string;
-  /** Branch count above which a one-level expand safety action is shown. */
-  safetyThreshold?: number;
-  /** Additional class merged with `.cinder-tree-expand-all`. */
-  class?: string;
-};

package/src/components/_tree-select-all/index.ts

@@ -1,5 +0,0 @@
-import TreeSelectAll from './tree-select-all.svelte';
-
-export default TreeSelectAll;
-export type { TreeSelectAllProps } from './tree-select-all.types.ts';
-export { TreeSelectAll };

package/src/components/_tree-select-all/tree-select-all.svelte

@@ -1,68 +0,0 @@
-<script lang="ts" module>
-  /**
-   * @cinder
-   * @category data-display
-   * @status stable
-   * @purpose Context control for selecting or clearing a Tree level in checkbox multi-selection mode.
-   * @tag tree
-   * @tag selection
-   * @useWhen Adding select-all and select-none controls to a Tree selectionControls snippet.
-   * @useWhen Selecting a registered tree level without placing non-treeitem controls inside role="tree".
-   * @avoidWhen Rendering outside a Tree component — it requires Tree selectionControls context.
-   * @avoidWhen Selecting arbitrary data that is not represented by registered tree items or selectionScopeIds.
-   * @related tree, tree-item
-   */
-  export type { TreeSelectAllProps } from './tree-select-all.types.ts';
-</script>
-
-<script lang="ts">
-  import type { TreeContext } from '../../_internal/tree-context.ts';
-  import { getTreeContext } from '../../_internal/tree-context.ts';
-  import { classNames } from '../../utilities/class-names.ts';
-  import type { TreeSelectAllProps } from './tree-select-all.types.ts';
-
-  let {
-    parentId = null,
-    includeDescendants = false,
-    label = 'Tree selection',
-    selectAllLabel = 'Select all',
-    selectNoneLabel = 'Select none',
-    class: className,
-  }: TreeSelectAllProps = $props();
-
-  const context: TreeContext = getTreeContext();
-
-  const disabled = $derived(
-    !context.multiselectable || !context.hasSelectableSelectionScope(parentId, includeDescendants),
-  );
-
-  function selectAll(): void {
-    if (!disabled) context.selectSelectionScope(parentId, true, includeDescendants);
-  }
-
-  function selectNone(): void {
-    if (!disabled) context.selectSelectionScope(parentId, false, includeDescendants);
-  }
-</script>
-
-<div class={classNames('cinder-tree-select-all', className)}>
-  <span class="cinder-tree-select-all__label">{label}</span>
-  <button
-    type="button"
-    class="cinder-tree-select-all__button"
-    aria-label={`${selectAllLabel}: ${label}`}
-    {disabled}
-    onclick={selectAll}
-  >
-    {selectAllLabel}
-  </button>
-  <button
-    type="button"
-    class="cinder-tree-select-all__button"
-    aria-label={`${selectNoneLabel}: ${label}`}
-    {disabled}
-    onclick={selectNone}
-  >
-    {selectNoneLabel}
-  </button>
-</div>

package/src/components/_tree-select-all/tree-select-all.types.ts

@@ -1,15 +0,0 @@
-/** Props for the TreeSelectAll component. */
-export type TreeSelectAllProps = {
-  /** Parent whose direct registered children are targeted. null targets root-level items. */
-  parentId?: string | null;
-  /** Include each target child's selection scope as well as the direct child id. */
-  includeDescendants?: boolean;
-  /** Text label shown before the action buttons. */
-  label?: string;
-  /** Label for the select-all action. */
-  selectAllLabel?: string;
-  /** Label for the select-none action. */
-  selectNoneLabel?: string;
-  /** Additional class merged with `.cinder-tree-select-all`. */
-  class?: string;
-};

package/src/components/_visually-hidden-live-region.svelte

@@ -1,120 +0,0 @@
-<script lang="ts" module>
-  /**
-   * Internal shared visually-hidden ARIA live region.
-   *
-   * The single canonical way for a Cinder component to announce a transient
-   * status string to screen readers. It renders a visually-hidden `role="status"`
-   * (polite) or `role="alert"` (assertive) region — both `aria-atomic="true"` so
-   * the full message is read on every change — and owns the blank-then-set timing
-   * that makes a *repeated* identical message re-announce.
-   *
-   * Not a public component (no `@cinder` block, not in the manifest): it is an
-   * implementation detail consumed by components that need announcements
-   * (autocomplete, load-more, copy-button, …). See `_internal/PLATFORM-POLICY.md`
-   * § Live regions.
-   *
-   * Usage — feed it a reactive `message` and an optional `priority`; it handles the
-   * announce timing. The **consumer owns the lifecycle**: keep the message in
-   * `$state`, pass it as a prop, and set it back to `''` when the status is no
-   * longer relevant (copy-button clears it when the confirmation window ends;
-   * autocomplete clears it when loading finishes). The region does NOT auto-clear a
-   * still-active message — clearing a sustained "Loading…" out from under the
-   * consumer would drop a status that is still true.
-   *
-   * The blank-then-set dance: a screen reader only announces a live region when its
-   * text content *changes*. Setting the same string twice (e.g. "Copied" after a
-   * previous "Copied") is a no-op to the AT. So on every `message` change we blank
-   * the region, then set the new text on the next task (`setTimeout(0)`),
-   * guaranteeing a content change the AT will pick up. `setTimeout(0)` rather than
-   * `queueMicrotask` because some ATs batch accessibility-tree updates and would see
-   * a microtask blank+set as a single no-op. A version counter discards a stale
-   * deferred-set when a newer message supersedes it.
-   */
-  export type LiveRegionPriority = 'polite' | 'assertive';
-</script>
-
-<script lang="ts">
-  import { classNames } from '../utilities/class-names.ts';
-
-  let {
-    message = '',
-    announcementSequence = 0,
-    priority = 'polite',
-    class: className,
-  }: {
-    message?: string;
-    /**
-     * Bump this (monotonically) to force a re-announcement of an identical
-     * `message`. In Svelte 5, assigning the same string to a `$state` is a no-op,
-     * so a consumer that announces the same text twice in a row (e.g. adding the
-     * same tag again) would not re-run this component's effect. Reading the
-     * sequence inside the effect registers it as a dependency, so incrementing it
-     * — even with `message` unchanged — re-fires the blank-then-set dance.
-     */
-    announcementSequence?: number;
-    priority?: LiveRegionPriority;
-    class?: string;
-  } = $props();
-
-  // The text actually rendered into the region. Decoupled from the `message` prop
-  // so we can blank-then-set to force re-announcement of a repeated message.
-  let rendered = $state('');
-  let setTimeoutId: ReturnType<typeof setTimeout> | null = null;
-  // Bumped per message change; the deferred-set callback captures it and bails if superseded.
-  let version = 0;
-  let isDestroyed = false;
-
-  $effect(() => {
-    return () => {
-      isDestroyed = true;
-      if (setTimeoutId) {
-        clearTimeout(setTimeoutId);
-        setTimeoutId = null;
-      }
-    };
-  });
-
-  // React to `message` changes: blank the region, then set the new text on the next
-  // task so a repeated identical string still triggers an announcement. The message
-  // then PERSISTS until the consumer changes it (no auto-clear of an active status).
-  $effect(() => {
-    const next = message;
-    // Read the sequence so it is tracked as a dependency: bumping it re-runs this
-    // effect even when `message` is byte-identical to the previous announcement.
-    void announcementSequence;
-    const current = ++version;
-
-    if (setTimeoutId) {
-      clearTimeout(setTimeoutId);
-      setTimeoutId = null;
-    }
-
-    // Blank first so the upcoming set is always a DOM content change. ATs only
-    // announce when the text content changes; setting the same string twice is a
-    // no-op. setTimeout(0) (not queueMicrotask) so the blank commit reaches the AT
-    // before the replacement — some ATs batch a-tree updates and would otherwise see
-    // blank+set as a single no-op.
-    rendered = '';
-
-    if (next === '') return;
-
-    setTimeoutId = setTimeout(() => {
-      if (isDestroyed || version !== current) return;
-      rendered = next;
-      setTimeoutId = null;
-    }, 0);
-  });
-</script>
-
-<!-- Single element with computed role/aria-live to avoid duplicated markup. Note:
-     changing `priority` after mount is generally unreliable (ATs cache live-region
-     type at registration), but `priority` is expected to be a static configuration
-     prop, not reactive data. -->
-<div
-  role={priority === 'assertive' ? 'alert' : 'status'}
-  aria-live={priority === 'assertive' ? 'assertive' : 'polite'}
-  aria-atomic="true"
-  class={classNames('cinder-sr-only', className)}
->
-  {rendered}
-</div>