@lostgradient/cinder 0.3.0 → 0.4.0

package/src/components/json-viewer/_json-viewer-node.svelte

@@ -9,6 +9,9 @@
     depth: number;
     initialDepth: number;
     maxDepth: number;
+    position: number;
+    setSize: number;
+    root?: boolean;
   };
 </script>
 
@@ -17,7 +20,16 @@
   import Self from './_json-viewer-node.svelte';
   import { classNames } from '../../utilities/class-names.ts';
 
-  let { value, keyName, depth, initialDepth, maxDepth }: JsonViewerNodeProps = $props();
+  let {
+    value,
+    keyName,
+    depth,
+    initialDepth,
+    maxDepth,
+    position,
+    setSize,
+    root = false,
+  }: JsonViewerNodeProps = $props();
 
   const isObject = $derived(value !== null && typeof value === 'object');
   const isArray = $derived(Array.isArray(value));
@@ -56,12 +68,22 @@
 </script>
 
 {#if isObject && !tooDeep}
-  <span class={classNames('cinder-json-viewer__node')}>
+  <!-- svelte-ignore a11y_role_has_required_aria_props -->
+  <span
+    class={classNames('cinder-json-viewer__node')}
+    role="treeitem"
+    aria-expanded={!collapsed}
+    aria-label={toggleLabel}
+    aria-level={depth + 1}
+    aria-posinset={position}
+    aria-setsize={setSize}
+    tabindex={root ? 0 : -1}
+  >
     <button
       type="button"
       class="cinder-json-viewer__toggle"
-      aria-expanded={!collapsed}
       aria-label={toggleLabel}
+      tabindex="-1"
       onclick={() => (collapsed = !collapsed)}
     >
       {#if keyName !== undefined}
@@ -79,7 +101,7 @@
       {/if}
     </button>
     {#if !collapsed}
-      <ul class="cinder-json-viewer__children">
+      <ul class="cinder-json-viewer__children" role="group">
         <!--
           For objects `k` is the property name — a stable, correct key. For arrays
           `k` is the index: JSON array elements carry no intrinsic identity, so if
@@ -87,9 +109,17 @@
           stays associated with its position rather than its value. This is an
           accepted tradeoff given arrays have no stable per-item key.
         -->
-        {#each entries as [k, v] (k)}
-          <li>
-            <Self value={v} keyName={k} depth={depth + 1} {initialDepth} {maxDepth} />
+        {#each entries as [k, v], index (k)}
+          <li role="none">
+            <Self
+              value={v}
+              keyName={k}
+              depth={depth + 1}
+              {initialDepth}
+              {maxDepth}
+              position={index + 1}
+              setSize={entries.length}
+            />
           </li>
         {/each}
       </ul>
@@ -97,14 +127,30 @@
     {/if}
   </span>
 {:else if isObject && tooDeep}
-  <span class="cinder-json-viewer__node">
+  <!-- svelte-ignore a11y_role_has_required_aria_props -->
+  <span
+    class="cinder-json-viewer__node"
+    role="treeitem"
+    tabindex={root ? 0 : -1}
+    aria-level={depth + 1}
+    aria-posinset={position}
+    aria-setsize={setSize}
+  >
     {#if keyName !== undefined}
       <span class="cinder-json-viewer__key">{keyName}:</span>
     {/if}
     <span class="cinder-json-viewer__too-deep">…</span>
   </span>
 {:else}
-  <span class="cinder-json-viewer__node">
+  <!-- svelte-ignore a11y_role_has_required_aria_props -->
+  <span
+    class="cinder-json-viewer__node"
+    role="treeitem"
+    tabindex={root ? 0 : -1}
+    aria-level={depth + 1}
+    aria-posinset={position}
+    aria-setsize={setSize}
+  >
     {#if keyName !== undefined}
       <span class="cinder-json-viewer__key">{keyName}:</span>
     {/if}

package/src/components/json-viewer/json-viewer.css

@@ -61,11 +61,22 @@
     box-shadow: var(--_cinder-focus-ring-shadow);
   }
 
+  .cinder-json-viewer__node[role='treeitem']:focus-visible {
+    outline: var(--cinder-ring-width) solid transparent;
+    border-radius: var(--cinder-radius-sm);
+    box-shadow: var(--_cinder-focus-ring-shadow);
+  }
+
   @media (forced-colors: active) {
     .cinder-json-viewer__toggle:focus-visible {
       outline: var(--cinder-ring-width) solid ButtonText;
       outline-offset: 3px;
     }
+
+    .cinder-json-viewer__node[role='treeitem']:focus-visible {
+      outline: var(--cinder-ring-width) solid ButtonText;
+      outline-offset: 3px;
+    }
   }
 
   .cinder-json-viewer__caret {

package/src/components/json-viewer/json-viewer.svelte

@@ -48,6 +48,66 @@
 
   const unserializable = $derived(!serialized.ok);
   const tooLarge = $derived(serialized.ok && serialized.size > maxBytes);
+
+  function handleTreeKeydown(event: KeyboardEvent): void {
+    const tree = event.currentTarget as HTMLElement;
+    const items = Array.from(tree.querySelectorAll<HTMLElement>('[role="treeitem"]'));
+    const eventTarget = event.target instanceof HTMLElement ? event.target : null;
+    const current = eventTarget?.closest<HTMLElement>('[role="treeitem"]') ?? null;
+    const targetIsToggle = eventTarget?.closest('.cinder-json-viewer__toggle') !== null;
+    const currentIndex = current ? items.indexOf(current) : -1;
+
+    function focusItem(index: number): void {
+      const item = items[index];
+      item?.focus();
+    }
+
+    if (event.key === 'ArrowDown') {
+      event.preventDefault();
+      focusItem(Math.min(currentIndex + 1, items.length - 1));
+    } else if (event.key === 'ArrowUp') {
+      event.preventDefault();
+      focusItem(Math.max(currentIndex - 1, 0));
+    } else if (event.key === 'Home') {
+      event.preventDefault();
+      focusItem(0);
+    } else if (event.key === 'End') {
+      event.preventDefault();
+      focusItem(items.length - 1);
+    } else if (event.key === 'ArrowRight' && current && !targetIsToggle) {
+      if (current.getAttribute('aria-expanded') === 'false') {
+        event.preventDefault();
+        current.querySelector<HTMLButtonElement>('.cinder-json-viewer__toggle')?.click();
+      } else if (current.getAttribute('aria-expanded') === 'true') {
+        const firstChild = current.querySelector<HTMLElement>(
+          '.cinder-json-viewer__children [role="treeitem"]',
+        );
+        if (firstChild) {
+          event.preventDefault();
+          firstChild.focus();
+        }
+      }
+    } else if (event.key === 'ArrowLeft' && current && !targetIsToggle) {
+      if (current.getAttribute('aria-expanded') === 'true') {
+        event.preventDefault();
+        current.querySelector<HTMLButtonElement>('.cinder-json-viewer__toggle')?.click();
+      } else {
+        const parent = current.parentElement?.closest<HTMLElement>('[role="treeitem"]');
+        if (parent) {
+          event.preventDefault();
+          parent.focus();
+        }
+      }
+    } else if (
+      (event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar') &&
+      current &&
+      !targetIsToggle
+    ) {
+      event.preventDefault();
+      const toggle = current.querySelector<HTMLButtonElement>('.cinder-json-viewer__toggle');
+      toggle?.click();
+    }
+  }
 </script>
 
 <div class={classNames('cinder-json-viewer', className)}>
@@ -67,6 +127,8 @@
       <p>Use the consumer's download or copy action to inspect the raw JSON.</p>
     </div>
   {:else}
-    <JsonViewerNode {value} depth={0} {initialDepth} {maxDepth} />
+    <div role="tree" aria-label="JSON tree" tabindex="-1" onkeydown={handleTreeKeydown}>
+      <JsonViewerNode {value} depth={0} {initialDepth} {maxDepth} position={1} setSize={1} root />
+    </div>
   {/if}
 </div>

package/src/components/kanban-board/kanban-board.css

@@ -9,6 +9,29 @@
     display: block;
     overflow-x: auto;
     padding-block-end: var(--cinder-space-2);
+    background:
+      linear-gradient(90deg, var(--cinder-surface) 30%, transparent) left center / 2rem 100%
+        no-repeat local,
+      linear-gradient(270deg, var(--cinder-surface) 30%, transparent) right center / 2rem 100%
+        no-repeat local,
+      /* cinder-allow-raw-color: structural-pattern — neutral scroll-edge shadow, not a themeable surface */
+        linear-gradient(90deg, oklch(0% 0 0 / 12%), transparent) left center / 1rem 100% no-repeat
+        scroll,
+      /* cinder-allow-raw-color: structural-pattern — neutral scroll-edge shadow, not a themeable surface */
+        linear-gradient(270deg, oklch(0% 0 0 / 12%), transparent) right center / 1rem 100% no-repeat
+        scroll;
+  }
+
+  .cinder-kanban-board__keyboard-hint {
+    margin: 0 0 var(--cinder-space-2);
+    color: var(--cinder-text-muted);
+    font-size: var(--cinder-text-xs);
+    opacity: 0;
+    transition: opacity var(--cinder-duration-fast) var(--cinder-ease-standard);
+  }
+
+  .cinder-kanban-board:focus-within .cinder-kanban-board__keyboard-hint {
+    opacity: 1;
   }
 
   .cinder-kanban-board__columns {
@@ -48,10 +71,24 @@
     min-inline-size: 0;
     overflow-wrap: anywhere;
     font-size: var(--cinder-text-sm);
-    font-weight: 600;
+    font-weight: var(--cinder-font-semibold);
     color: var(--cinder-text);
   }
 
+  .cinder-kanban-board__card-count {
+    display: inline-flex;
+    align-items: center;
+    margin-inline-start: var(--cinder-space-2);
+    min-block-size: 1.25rem;
+    padding-inline: var(--cinder-space-1-5);
+    border: 1px solid var(--cinder-border-muted);
+    border-radius: var(--cinder-radius-sm);
+    color: var(--cinder-text-muted);
+    font-size: var(--cinder-text-xs);
+    font-weight: var(--cinder-font-medium);
+    white-space: nowrap;
+  }
+
   .cinder-kanban-board__column-actions {
     display: inline-flex;
     gap: var(--cinder-space-1);
@@ -63,8 +100,8 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    inline-size: 1.75rem;
-    block-size: 1.75rem;
+    inline-size: 2rem;
+    block-size: 2rem;
     padding: 0;
     border: 1px solid var(--cinder-border-muted);
     border-radius: var(--cinder-radius-sm);
@@ -73,6 +110,10 @@
     cursor: pointer;
   }
 
+  .cinder-kanban-board__column-handle svg {
+    fill: currentcolor;
+  }
+
   .cinder-kanban-board__column-handle:focus-visible,
   .cinder-kanban-board__collapse:focus-visible {
     outline: var(--cinder-ring-width) solid transparent;
@@ -81,6 +122,18 @@
       0 0 0 calc(var(--cinder-ring-offset) + var(--cinder-ring-width)) var(--cinder-ring-color);
   }
 
+  @media (forced-colors: active) {
+    .cinder-kanban-board__column-handle:focus-visible,
+    .cinder-kanban-board__collapse:focus-visible {
+      outline: var(--cinder-ring-width) solid ButtonText;
+      /* 3px separates the outline from ButtonBorder (which renders in forced-colors
+         on all bordered controls and shares the ButtonText color family in HCM);
+         at 2px the ring and border can visually merge. */
+      outline-offset: 3px;
+      box-shadow: none;
+    }
+  }
+
   @media (hover: hover) {
     .cinder-kanban-board__column-handle:hover,
     .cinder-kanban-board__collapse:hover {

package/src/components/kanban-board/kanban-board.svelte

@@ -423,13 +423,13 @@
     },
   });
 
-  function cancelCardLift(itemLabel?: string): void {
+  function cancelCardLift(itemLabel: string | undefined = undefined): void {
     cardController.cancel(itemLabel);
     cardTarget = null;
     pointerColumnIndex = null;
   }
 
-  function cancelColumnLift(columnTitle?: string): void {
+  function cancelColumnLift(columnTitle: string | undefined = undefined): void {
     columnLiftedKey = null;
     columnTargetIndex = null;
     if (columnTitle) announcer.announce(`${columnTitle} column move cancelled.`);
@@ -554,6 +554,9 @@
     Press Space to lift a column, Left and Right arrows to move it, Space to drop, and Escape to
     cancel.
   </p>
+  <p class="cinder-kanban-board__keyboard-hint">
+    Space lifts. Arrow keys move. Space drops. Escape cancels.
+  </p>
 
   <div bind:this={columnsElement} class="cinder-kanban-board__columns" role="list">
     {#each visualColumns as column, columnIndex (invalidKeys ? `${column.id}-${columnIndex}` : column.id)}
@@ -587,6 +590,10 @@
             {:else}
               {column.title}
             {/if}
+            <span class="cinder-kanban-board__card-count">
+              {column.cards.length}{' '}
+              {column.cards.length === 1 ? 'card' : 'cards'}
+            </span>
           </div>
           {#if columnActions}
             <div class="cinder-kanban-board__column-actions">
@@ -597,7 +604,7 @@
             <button
               type="button"
               class="cinder-kanban-board__collapse"
-              aria-label={`${column.collapsed ? 'Expand' : 'Collapse'} ${column.title}`}
+              aria-label={`${column.collapsed ? 'Expand' : 'Collapse'} ${column.title} (${column.cards.length} ${column.cards.length === 1 ? 'card' : 'cards'})`}
               aria-expanded={!column.collapsed}
               onclick={() => toggleColumn(column)}
             >

package/src/components/keyboard-shortcuts/keyboard-shortcuts.css

@@ -8,7 +8,7 @@
 
   .cinder-keyboard-shortcuts__heading {
     font-size: var(--cinder-text-lg);
-    font-weight: 600;
+    font-weight: var(--cinder-font-semibold);
     color: var(--cinder-text);
     margin: 0;
   }
@@ -26,7 +26,7 @@
 
   .cinder-keyboard-shortcuts__group-label {
     font-size: var(--cinder-text-xs);
-    font-weight: 600;
+    font-weight: var(--cinder-font-semibold);
     text-transform: uppercase;
     letter-spacing: 0.05em;
     color: var(--cinder-text-muted);

package/src/components/keyboard-shortcuts/keyboard-shortcuts.svelte

@@ -41,7 +41,7 @@
    * Build a screen-reader–friendly label for a key combo.
    * Falls back to joining keys with " plus " when no keysLabel is provided.
    */
-  function resolveKeysLabel(keys: string[], keysLabel?: string): string {
+  function resolveKeysLabel(keys: string[], keysLabel: string | undefined = undefined): string {
     if (keysLabel) return keysLabel;
     return keys.join(' plus ');
   }

package/src/components/label/README.md

@@ -9,7 +9,7 @@ Accessible form label that associates descriptive text with its input element.
   import Label from '@lostgradient/cinder/label';
 </script>
 
-<Label />
+<Label for="my-input">Email address</Label>
 ```
 
 ## Props

package/src/components/label/label.css

@@ -21,13 +21,6 @@
     cursor: not-allowed;
   }
 
-  .cinder-label__required {
-    display: inline-block;
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    background-color: var(--cinder-danger);
-    flex-shrink: 0;
-    align-self: center;
-  }
+  /* The required marker is the shared `.cinder-_required-marker` partial
+     (styles/components/_field-label.css). */
 }

package/src/components/label/label.svelte

@@ -36,7 +36,9 @@
 >
   {@render children()}
   {#if required}
-    <!-- Decorative — accessible name comes from the field's `required` attribute. -->
-    <span class="cinder-label__required" aria-hidden="true"></span>
+    <!-- Visible asterisk conveys "required" by shape, not color alone (WCAG
+         1.4.1). aria-hidden so the accessible name stays clean — the field's
+         own `required`/`aria-required` attribute is the single AT signal. -->
+    <span class="cinder-_required-marker" aria-hidden="true">*</span>
   {/if}
 </label>

package/src/components/load-more/README.md

@@ -2,7 +2,7 @@
 
 Sentinel-based infinite-scroll trigger with an always-visible button fallback and accessible status states.
 
-`onLoadMore` should be provided in real usage. When omitted, the component falls back to a no-op handler.
+`onloadmore` should be provided in real usage. When omitted, the component falls back to a no-op handler.
 
 ## Usage
 
@@ -21,7 +21,7 @@ Sentinel-based infinite-scroll trigger with an always-visible button fallback an
   }
 </script>
 
-<LoadMore onLoadMore={fetchNext} bind:loading bind:hasMore />
+<LoadMore onloadmore={fetchNext} bind:loading bind:hasMore />
 ```
 
 ## Props
@@ -38,8 +38,8 @@ Sentinel-based infinite-scroll trigger with an always-visible button fallback an
 | `maxRetries`       | `number`   | no       | —       | Maximum consecutive sentinel-triggered requests before auto-loading pauses.                                                                                                                                                                                                                                     |
 | `retryLabel`       | `string`   | no       | —       | Visible label for the retry button after a load error.                                                                                                                                                                                                                                                          |
 | `rootMargin`       | `string`   | no       | —       | rootMargin passed to IntersectionObserver. Captured at attachment time.                                                                                                                                                                                                                                         |
-| `onError`          | `(opaque)` | no       | —       | Notified when onLoadMore throws or rejects. Not expressible in JSON Schema; see the component types for the signature.                                                                                                                                                                                          |
-| `onLoadMore`       | `(opaque)` | no       | —       | Called when the next page should be loaded. Caller flips `loading` and `hasMore`. Not expressible in JSON Schema; see the component types for the signature.                                                                                                                                                    |
+| `onerror`          | `(opaque)` | no       | —       | Notified when onloadmore throws or rejects. Not expressible in JSON Schema; see the component types for the signature.                                                                                                                                                                                          |
+| `onloadmore`       | `(opaque)` | no       | —       | Called when the next page should be loaded. Caller flips `loading` and `hasMore`. Not expressible in JSON Schema; see the component types for the signature.                                                                                                                                                    |
 | `root`             | `(opaque)` | no       | —       | Scroll container the sentinel is observed within. Pass the scrollable ancestor element when the list scrolls inside a container rather than the viewport. `null`/omitted observes against the viewport. Captured at attachment time. Not expressible in JSON Schema; see the component types for the signature. |
 
 <!-- generated:props:end -->

package/src/components/load-more/load-more.css

@@ -43,11 +43,19 @@
   }
 
   .cinder-load-more__button:focus-visible {
-    outline: 2px solid transparent;
-    outline-offset: 2px;
+    outline: var(--cinder-ring-width) solid transparent;
+    outline-offset: var(--cinder-ring-offset);
     box-shadow:
-      0 0 0 2px var(--cinder-ring-offset-color),
-      0 0 0 4px var(--cinder-ring-color);
+      0 0 0 var(--cinder-ring-offset) var(--cinder-ring-offset-color),
+      0 0 0 calc(var(--cinder-ring-offset) + var(--cinder-ring-width)) var(--cinder-ring-color);
+  }
+
+  @media (forced-colors: active) {
+    .cinder-load-more__button:focus-visible {
+      outline: 2px solid ButtonText;
+      outline-offset: 3px;
+      box-shadow: none;
+    }
   }
 
   .cinder-load-more__button:disabled {
@@ -65,7 +73,7 @@
 
   @media (prefers-reduced-motion: no-preference) {
     .cinder-load-more__spinner {
-      animation: cinder-load-more-spin 0.8s linear infinite;
+      animation: cinder-load-more-spin var(--cinder-duration-spin) linear infinite;
     }
   }
 

package/src/components/load-more/load-more.examples.json

@@ -7,13 +7,13 @@
       "id": "basic",
       "title": "Basic infinite scroll",
       "description": "The sentinel auto-loads near the end of the list, and the button remains available as the manual fallback.",
-      "code": "<script lang=\"ts\">\n  import { LoadMore } from '@lostgradient/cinder/load-more';\n\n  let items = $state(Array.from({ length: 20 }, (_, index) => `Item ${index + 1}`));\n  let loading = $state(false);\n  let hasMore = $state(true);\n\n  async function fetchNext() {\n    loading = true;\n    await new Promise((resolve) => setTimeout(resolve, 400));\n    const start = items.length;\n    items = [...items, ...Array.from({ length: 20 }, (_, index) => `Item ${start + index + 1}`)];\n    loading = false;\n    if (items.length >= 100) hasMore = false;\n  }\n</script>\n\n<ul aria-busy={loading}>\n  {#each items as item}\n    <li>{item}</li>\n  {/each}\n</ul>\n\n<LoadMore onLoadMore={fetchNext} bind:loading bind:hasMore />\n"
+      "code": "<script lang=\"ts\">\n  import { LoadMore } from '@lostgradient/cinder/load-more';\n\n  let items = $state(Array.from({ length: 20 }, (_, index) => `Item ${index + 1}`));\n  let loading = $state(false);\n  let hasMore = $state(true);\n\n  async function fetchNext() {\n    loading = true;\n    await new Promise((resolve) => setTimeout(resolve, 400));\n    const start = items.length;\n    items = [...items, ...Array.from({ length: 20 }, (_, index) => `Item ${start + index + 1}`)];\n    loading = false;\n    if (items.length >= 100) hasMore = false;\n  }\n</script>\n\n<ul aria-busy={loading}>\n  {#each items as item}\n    <li>{item}</li>\n  {/each}\n</ul>\n\n<LoadMore onloadmore={fetchNext} bind:loading bind:hasMore />\n"
     },
     {
       "id": "retry",
       "title": "Retry after a failed request",
       "description": "Rejected requests switch the button into retry mode so the user can recover explicitly.",
-      "code": "<script lang=\"ts\">\n  import { LoadMore } from '@lostgradient/cinder/load-more';\n\n  let items = $state(['Alpha', 'Bravo', 'Charlie']);\n  let loading = $state(false);\n  let hasMore = $state(true);\n  let attempts = $state(0);\n\n  async function fetchNext() {\n    loading = true;\n    await new Promise((resolve) => setTimeout(resolve, 300));\n    attempts += 1;\n    loading = false;\n    if (attempts === 1) {\n      throw new Error('Temporary network failure');\n    }\n    items = [...items, 'Delta', 'Echo'];\n    hasMore = false;\n  }\n</script>\n\n<ul aria-busy={loading}>\n  {#each items as item}\n    <li>{item}</li>\n  {/each}\n</ul>\n\n<LoadMore onLoadMore={fetchNext} bind:loading bind:hasMore retryLabel=\"Try again\" />\n"
+      "code": "<script lang=\"ts\">\n  import { LoadMore } from '@lostgradient/cinder/load-more';\n\n  let items = $state(['Alpha', 'Bravo', 'Charlie']);\n  let loading = $state(false);\n  let hasMore = $state(true);\n  let attempts = $state(0);\n\n  async function fetchNext() {\n    loading = true;\n    await new Promise((resolve) => setTimeout(resolve, 300));\n    attempts += 1;\n    loading = false;\n    if (attempts === 1) {\n      throw new Error('Temporary network failure');\n    }\n    items = [...items, 'Delta', 'Echo'];\n    hasMore = false;\n  }\n</script>\n\n<ul aria-busy={loading}>\n  {#each items as item}\n    <li>{item}</li>\n  {/each}\n</ul>\n\n<LoadMore onloadmore={fetchNext} bind:loading bind:hasMore retryLabel=\"Try again\" />\n"
     }
   ]
 }

package/src/components/load-more/load-more.svelte

@@ -21,8 +21,8 @@
   import VisuallyHiddenLiveRegion from '../_visually-hidden-live-region.svelte';
 
   let {
-    onLoadMore = async () => {},
-    onError,
+    onloadmore = async () => {},
+    onerror,
     hasMore = $bindable(true),
     loading = $bindable(false),
     root = null,
@@ -91,13 +91,13 @@
     errorState = false;
 
     try {
-      await onLoadMore();
+      await onloadmore();
       if (source === 'button') {
         retryCount = 0;
       }
     } catch (error) {
       errorState = true;
-      onError?.(error);
+      onerror?.(error);
     } finally {
       // Always clear the in-flight guard once the request settles, regardless of
       // whether the parent has flipped its own `loading` prop yet.

package/src/components/load-more/load-more.types.ts

@@ -1,6 +1,6 @@
 export type LoadMoreProps = {
   /** Called when the next page should be loaded. Caller flips `loading` and `hasMore`. */
-  onLoadMore?: () => void | Promise<void>;
+  onloadmore?: () => void | Promise<void>;
   /** Whether more items are available. Bindable. */
   hasMore?: boolean;
   /** Whether a load is in progress. Bindable. */
@@ -22,8 +22,8 @@ export type LoadMoreProps = {
   endOfListMessage?: string;
   /** Maximum consecutive sentinel-triggered requests before auto-loading pauses. */
   maxRetries?: number;
-  /** Notified when onLoadMore throws or rejects. */
-  onError?: (error: unknown) => void;
+  /** Notified when onloadmore throws or rejects. */
+  onerror?: (error: unknown) => void;
   /** Custom class merged with `.cinder-load-more`. */
   class?: string;
 };

package/src/components/locale-provider/README.md

@@ -0,0 +1,43 @@
+# LocaleProvider
+
+Shared locale and text-direction context for locale-aware descendants.
+
+## Usage
+
+```svelte
+<script lang="ts">
+  import LocaleProvider from '@lostgradient/cinder/locale-provider';
+</script>
+
+<LocaleProvider locale="de-DE">
+  <!-- locale-aware cinder components -->
+</LocaleProvider>
+```
+
+## Props
+
+<!-- generated:props:start -->
+
+| Prop        | Type               | Required | Default | Description                                                                                                                           |
+| ----------- | ------------------ | -------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| `direction` | `"ltr"` \| `"rtl"` | no       | —       | Text direction exposed to direction-aware descendants.                                                                                |
+| `locale`    | `string`           | no       | —       | BCP 47 locale tag used as the default for locale-aware descendants.                                                                   |
+| `children`  | `(opaque)`         | no       | —       | Descendant content that should inherit the locale context. Not expressible in JSON Schema; see the component types for the signature. |
+
+<!-- generated:props:end -->
+
+## CSS Variables
+
+<!-- generated:variables:start -->
+
+This component does not declare any local CSS variables.
+
+<!-- generated:variables:end -->
+
+## Subcomponents
+
+<!-- generated:subcomponents:start -->
+
+None.
+
+<!-- generated:subcomponents:end -->

package/src/components/locale-provider/index.ts

@@ -0,0 +1,5 @@
+import LocaleProvider from './locale-provider.svelte';
+
+export default LocaleProvider;
+export type { LocaleProviderProps, TextDirection } from './locale-provider.types.ts';
+export { LocaleProvider };

package/src/components/locale-provider/locale-provider.svelte

@@ -0,0 +1,40 @@
+<script lang="ts" module>
+  /**
+   * @cinder
+   * @category layout
+   * @status stable
+   * @purpose Context provider that supplies a shared locale and text direction default to locale-aware descendant components.
+   * @tag locale
+   * @tag internationalization
+   * @useWhen Setting one application or subtree locale for number, region, date, or time formatting.
+   * @useWhen Providing text direction once for direction-aware descendants while still allowing local overrides.
+   * @avoidWhen Only one component needs a non-default locale — pass that component's locale prop directly instead.
+   * @related number-input, phone-input, stat
+   */
+  export type { LocaleProviderProps, TextDirection } from './locale-provider.types.ts';
+</script>
+
+<script lang="ts">
+  import {
+    getLocaleContext,
+    setLocaleContext,
+    type LocaleContext,
+  } from '../../_internal/locale-context.ts';
+  import type { LocaleProviderProps } from './locale-provider.types.ts';
+
+  let { locale, direction, children }: LocaleProviderProps = $props();
+  const parentContext = getLocaleContext();
+
+  const context: LocaleContext = {
+    get locale() {
+      return locale ?? parentContext?.locale;
+    },
+    get direction() {
+      return direction ?? parentContext?.direction;
+    },
+  };
+
+  setLocaleContext(context);
+</script>
+
+{@render children?.()}