@lostgradient/cinder 0.3.0 → 0.4.1

package/src/components/json-schema-editor/property-list.svelte

@@ -8,16 +8,19 @@
     path: string;
     depth?: number;
     readonly?: boolean;
+    onvalidationerrorcount?: ((count: number) => void) | undefined;
     onchange: (properties: Record<string, JsonSchemaValue>, required: string[]) => void;
   };
 </script>
 
 <script lang="ts">
+  import { onDestroy } from 'svelte';
   import Alert from '../alert/alert.svelte';
   import Button from '../button/button.svelte';
   import Chip from '../chip/chip.svelte';
   import Input from '../input/input.svelte';
   import PropertyEditor from './property-editor.svelte';
+  import { calculatePropertyValidationErrorCount } from './property-list-validation.ts';
 
   let {
     idPrefix,
@@ -26,6 +29,7 @@
     path,
     depth = 0,
     readonly = false,
+    onvalidationerrorcount,
     onchange,
   }: PropertyListProps = $props();
 
@@ -36,6 +40,23 @@
   let draftNames = $state<Record<string, string>>({});
   let renameError = $state<string | null>(null);
   let expanded = $state<Record<string, boolean>>({});
+  let childValidationCounts = $state<Record<string, number>>({});
+
+  const validationErrorCount = $derived(
+    calculatePropertyValidationErrorCount(
+      propertyNames,
+      childValidationCounts,
+      renameError !== null,
+    ),
+  );
+
+  $effect(() => {
+    onvalidationerrorcount?.(validationErrorCount);
+  });
+
+  onDestroy(() => {
+    onvalidationerrorcount?.(0);
+  });
 
   function getDraftName(key: string): string {
     return draftNames[key] ?? key;
@@ -79,6 +100,11 @@
       expanded[draft] = true;
       delete expanded[oldKey];
     }
+    const childCount = childValidationCounts[oldKey];
+    if (childCount !== undefined) {
+      const { [oldKey]: _removedChildCount, ...remainingChildCounts } = childValidationCounts;
+      childValidationCounts = { ...remainingChildCounts, [draft]: childCount };
+    }
     onchange(next, nextRequired);
   }
 
@@ -89,9 +115,26 @@
     const nextRequired = required.filter((name) => name !== key);
     delete draftNames[key];
     delete expanded[key];
+    const { [key]: _removedChildCount, ...remainingChildCounts } = childValidationCounts;
+    childValidationCounts = remainingChildCounts;
     onchange(next, nextRequired);
   }
 
+  function setChildValidationErrorCount(key: string, count: number): void {
+    if ((childValidationCounts[key] ?? 0) === count) return;
+    if (count === 0) {
+      const { [key]: _removedChildCount, ...remainingChildCounts } = childValidationCounts;
+      childValidationCounts = remainingChildCounts;
+      return;
+    }
+    childValidationCounts = { ...childValidationCounts, [key]: count };
+  }
+
+  function toggleExpanded(key: string, isOpen: boolean): void {
+    expanded[key] = !isOpen;
+    if (isOpen) setChildValidationErrorCount(key, 0);
+  }
+
   function moveProperty(key: string, direction: -1 | 1) {
     if (readonly) return;
     const index = propertyNames.indexOf(key);
@@ -162,7 +205,7 @@
 
 <div class="cinder-jse-property-list">
   {#if renameError}
-    <Alert variant="error">{renameError}</Alert>
+    <Alert variant="danger">{renameError}</Alert>
   {/if}
 
   {#if propertyNames.length === 0}
@@ -180,13 +223,14 @@
       interactive" violation.
     -->
     <div class="cinder-jse-property-row" data-cinder-required={isRequired ? '' : undefined}>
-      <div class="cinder-jse-property-row__summary">
+      <div class="cinder-jse-property-row__summary" style={`--cinder-jse-property-depth: ${depth}`}>
         <button
           type="button"
           class="cinder-jse-property-row__trigger"
+          aria-label={`${isOpen ? 'Collapse' : 'Expand'} ${key} property`}
           aria-expanded={isOpen}
           aria-controls={panelId}
-          onclick={() => (expanded[key] = !isOpen)}
+          onclick={() => toggleExpanded(key, isOpen)}
         >
           <span class="cinder-jse-property-row__chevron" aria-hidden="true">▸</span>
           <span class="cinder-jse-property-row__name">{key}</span>
@@ -248,6 +292,7 @@
             depth={depth + 1}
             {readonly}
             value={properties[key] ?? {}}
+            onvalidationerrorcount={(count) => setChildValidationErrorCount(key, count)}
             onchange={(next) => setPropertySchema(key, next)}
           />
         </div>

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.