@lostgradient/cinder 0.3.0 → 0.4.1

package/src/components/chat/input/chat-input.svelte

@@ -14,12 +14,14 @@
     value?: string;
     /** Placeholder text */
     placeholder?: string;
+    /** Accessible label passed to the inner message editor */
+    composerLabel?: string;
     /** Whether the input is disabled */
     disabled?: boolean;
     /** Whether a submission is in progress */
     sending?: boolean;
     /** Error message to display */
-    error?: string | undefined;
+    error?: string;
     /** Additional CSS class */
     class?: string;
 
@@ -105,6 +107,7 @@
     id,
     value = $bindable(''),
     placeholder = 'Type a message...',
+    composerLabel = 'Message',
     disabled = false,
     sending = false,
     error,
@@ -497,6 +500,7 @@
       bind:value
       bind:this={editorRef}
       {placeholder}
+      label={composerLabel}
       readonly={disabled || sending}
       showToolbar={false}
       showModeToggle={false}
@@ -533,12 +537,18 @@
       {/if}
 
       <!-- Visually hidden shortcut description: always in the accessibility tree even when hint is container-queried away -->
-      <span id={shortcutDescriptionId} class="sr-only"
-        >Press Enter to send, Shift+Enter for newline</span
-      >
-      <span id={hintId} class="chat-input-hint" aria-hidden="true">
-        <kbd>Enter</kbd> to send, <kbd>Shift</kbd>+<kbd>Enter</kbd> for newline
+      <span id={shortcutDescriptionId} class="sr-only">
+        {#if showStopButton}
+          Response is streaming. Use the stop button to stop generation.
+        {:else}
+          Press Enter to send, Shift+Enter for newline
+        {/if}
       </span>
+      {#if !showStopButton}
+        <span id={hintId} class="chat-input-hint" aria-hidden="true">
+          <kbd>Enter</kbd> to send, <kbd>Shift</kbd>+<kbd>Enter</kbd> for newline
+        </span>
+      {/if}
     </div>
 
     <div class="chat-input-footer-right">
@@ -554,6 +564,7 @@
           data-stop
           onclick={onstop}
           aria-label="Stop generating"
+          aria-describedby={shortcutDescriptionId}
         >
           <Square class="icon-sm" />
         </button>
@@ -706,12 +717,10 @@
   }
 
   /* The button is a 44px touch target but the visible chip is the centered
-     1.25rem `::before` circle. Reserve a transparent outline placeholder for
-     forced-colors, and paint the ring on the visible circle (Strategy B-inset)
-     so it hugs the chip rather than the oversized hit area. */
+     1.25rem `::before` circle. Paint the ring on the visible circle so it hugs
+     the chip rather than the oversized hit area. */
   .chat-input-attachment-remove:focus-visible {
     opacity: 1;
-    outline: var(--cinder-ring-width) solid transparent;
   }
 
   .chat-input-attachment-remove:focus-visible::before {
@@ -720,9 +729,14 @@
   }
 
   @media (forced-colors: active) {
-    .chat-input-attachment-remove:focus-visible {
+    /* Forced-colors strips the box-shadow ring, so repaint a system-color
+       outline directly on the visible `::before` circle (which is round via
+       border-radius: full, so the outline follows the chip). Painting on the
+       circle itself avoids depending on fragile parent-to-pseudo offset math. */
+    .chat-input-attachment-remove:focus-visible::before {
+      box-shadow: none;
       outline: var(--cinder-ring-width) solid ButtonText;
-      outline-offset: -12px;
+      outline-offset: var(--cinder-ring-offset);
     }
   }
 
@@ -753,6 +767,13 @@
     border-radius: 0;
   }
 
+  .chat-input-editor-container :global(textarea.markdown-editor),
+  .chat-input-editor-container :global(.ProseMirror) {
+    field-sizing: content;
+    max-height: 12rem;
+    overflow-y: auto;
+  }
+
   .chat-input-editor-container :global(.markdown-editor:focus-within) {
     border-color: transparent;
     box-shadow: none;
@@ -855,6 +876,7 @@
 
   .chat-input-send:focus-visible {
     outline: var(--cinder-ring-width) solid transparent;
+    outline-offset: 3px;
     box-shadow: var(--_cinder-focus-ring-shadow);
   }
 
@@ -874,7 +896,7 @@
 
   @media (forced-colors: active) {
     .chat-input-send:focus-visible {
-      outline: var(--cinder-ring-width) solid ButtonText;
+      outline: var(--cinder-ring-width) solid Highlight;
       outline-offset: 3px;
     }
   }

package/src/components/chat/message/image-lightbox.svelte

@@ -23,37 +23,60 @@
   import X from 'lucide-svelte/icons/x';
   import { createFocusTrap } from '../../focus-trap/index.ts';
   import { createBodyScrollLock } from '../../../utilities/attachments.ts';
+  import { useReducedMotion } from '../../../utilities/use-reduced-motion.svelte.ts';
 
   let { images, initialIndex = 0, open = $bindable(false), onclose }: ImageLightboxProps = $props();
 
-  // currentIndex tracks navigation within the session; resets to initialIndex when lightbox opens
-  let currentIndex = $state(0);
+  // Respect prefers-reduced-motion: collapse the fade to an instant show/hide so
+  // the lightbox does not animate for users who have opted out of motion.
+  // CSS @media (prefers-reduced-motion) overrides do not cover JS-driven Svelte
+  // transitions, so we must derive the duration imperatively here.
+  const reducedMotion = useReducedMotion();
+  const LIGHTBOX_FADE_MS = 150;
+  const fadeDuration = $derived(reducedMotion.current ? 0 : LIGHTBOX_FADE_MS);
 
-  // Reset currentIndex to initialIndex whenever the lightbox opens or initialIndex changes
-  let previousOpen = $state(false);
+  // clampedInitialIndex is the clamped version of the `initialIndex` prop.
+  const clampedInitialIndex = $derived(
+    images.length > 0 ? Math.max(0, Math.min(initialIndex, images.length - 1)) : 0,
+  );
+
+  // navigationIndex is null when no user navigation has occurred in the current
+  // open session. effectiveIndex falls back to clampedInitialIndex.
+  //
+  // Reset semantics WITHOUT a write-back loop: when the lightbox is closed
+  // (`open === false`) effectiveIndex ignores navigationIndex entirely, so the
+  // displayed index is always clampedInitialIndex while closed — regardless of
+  // how it was closed (the close() button OR a parent setting `bind:open`
+  // false). On the next open, a single guarded $effect clears the stale
+  // navigationIndex so navigation starts fresh from initialIndex. This effect
+  // only writes navigationIndex in response to `open` (two distinct values), so
+  // it is not the read-and-write-back-the-same-bindable pattern #464 removes.
+  let navigationIndex = $state<number | null>(null);
+  const effectiveIndex = $derived(
+    open ? (navigationIndex ?? clampedInitialIndex) : clampedInitialIndex,
+  );
   $effect(() => {
-    const isOpening = open && !previousOpen;
-    previousOpen = open;
-    if (isOpening) {
-      currentIndex = images.length > 0 ? Math.max(0, Math.min(initialIndex, images.length - 1)) : 0;
+    if (!open && navigationIndex !== null) {
+      navigationIndex = null;
     }
   });
 
   const hasMultiple = $derived(images.length > 1);
-  const currentImage = $derived(images[currentIndex]);
-  const counterText = $derived(`${currentIndex + 1} of ${images.length}`);
+  const currentImage = $derived(images[effectiveIndex]);
+  const counterText = $derived(`${effectiveIndex + 1} of ${images.length}`);
 
   function close() {
+    navigationIndex = null;
     open = false;
     onclose?.();
   }
 
   function previous() {
-    currentIndex = (currentIndex - 1 + images.length) % images.length;
+    navigationIndex = (effectiveIndex - 1 + images.length) % images.length;
   }
 
   function next() {
-    currentIndex = (currentIndex + 1) % images.length;
+    navigationIndex = (effectiveIndex + 1) % images.length;
   }
 
   function handleOverlayClick(event: MouseEvent) {
@@ -93,7 +116,7 @@
     onclick={handleOverlayClick}
     onkeydown={handleKeyDown}
     tabindex="-1"
-    transition:fade={{ duration: 150 }}
+    transition:fade={{ duration: fadeDuration }}
     {@attach createBodyScrollLock()}
     {@attach createFocusTrap()}
   >
@@ -174,7 +197,7 @@
     border-radius: var(--cinder-radius-sm);
     color: white;
     cursor: pointer;
-    transition: background 150ms ease;
+    transition: background var(--cinder-duration-fast) var(--cinder-ease-standard);
     z-index: 1;
   }
 
@@ -210,7 +233,7 @@
     border-radius: var(--cinder-radius-sm);
     color: white;
     cursor: pointer;
-    transition: background 150ms ease;
+    transition: background var(--cinder-duration-fast) var(--cinder-ease-standard);
     z-index: 1;
   }
 

package/src/components/chat/message/message-attachments.svelte

@@ -187,7 +187,7 @@
     border-radius: var(--cinder-radius-md);
     /* Use contain to preserve full image content and avoid cropping */
     object-fit: contain;
-    transition: opacity 150ms ease;
+    transition: opacity var(--cinder-duration-fast) var(--cinder-ease-standard);
   }
 
   .message-attachment-button:hover .message-attachment-image {

package/src/components/chat/message/parts/reasoning-part.svelte

@@ -165,6 +165,14 @@
       outline-offset: -2px;
       box-shadow: var(--_cinder-focus-ring-shadow);
     }
+
+    @media (forced-colors: active) {
+      &:focus-visible {
+        outline: var(--cinder-ring-width) solid ButtonText;
+        outline-offset: 2px;
+        box-shadow: none;
+      }
+    }
   }
 
   .chat-reasoning-label {

package/src/components/chat/message/parts/tool-approval-part.svelte

@@ -248,21 +248,34 @@
       outline-offset: 2px;
       box-shadow: var(--_cinder-focus-ring-shadow);
     }
+
+    @media (forced-colors: active) {
+      &:focus-visible {
+        outline: var(--cinder-ring-width) solid ButtonText;
+        outline-offset: 3px;
+        box-shadow: none;
+      }
+    }
   }
 
   .chat-tool-approval-btn-approve {
-    background: var(--cinder-color-success-bg, var(--cinder-surface-raised));
-    color: var(--cinder-chat-tool-approval-approve-color);
-    border-color: var(--cinder-color-success-border, var(--cinder-chat-tool-approval-border));
+    background: var(--cinder-success);
+    color: var(--cinder-success-contrast, var(--cinder-text));
+    border-color: var(--cinder-success);
 
-    /* Background darkening, not opacity, so foreground text contrast is
-       preserved (opacity would dim text + bg together, risking WCAG 1.4.11). */
     @media (hover: hover) {
       &:not(:disabled):hover {
-        background: color-mix(
-          in oklch,
-          var(--cinder-color-success-bg, var(--cinder-surface-raised)),
-          currentColor 8%
+        /* cinder-allow-raw-color: structural-pattern — neutral hover overlay tint, not a themeable surface */
+        --_cinder-chat-tool-approval-hover-overlay: light-dark(
+          /* cinder-allow-raw-color: structural-pattern — neutral hover overlay tint, not a themeable surface */
+            oklch(0% 0 0 / 0.08),
+          /* cinder-allow-raw-color: structural-pattern — neutral hover overlay tint, not a themeable surface */
+            oklch(100% 0 0 / 0.1)
+        );
+
+        background-image: linear-gradient(
+          var(--_cinder-chat-tool-approval-hover-overlay),
+          var(--_cinder-chat-tool-approval-hover-overlay)
         );
       }
     }

package/src/components/chat-conversation-list/chat-conversation-list.css

@@ -53,6 +53,19 @@
     box-shadow: var(--_cinder-focus-ring-shadow);
   }
 
+  @media (forced-colors: active) {
+    .cinder-chat-conversation-list__button[data-cinder-conversation-interactive]:focus-visible {
+      outline: var(--cinder-ring-width) solid ButtonText;
+      /* ButtonText is correct here: this is a button/navigation control using
+         aria-current="page" (page-nav semantics, not aria-selected list-selection).
+         Highlight/HighlightText would be wrong — those are for selected listbox items.
+         3px separates the ring from ButtonBorder, which renders in forced-colors
+         mode on all button elements regardless of their standard-mode border color. */
+      outline-offset: 3px;
+      box-shadow: none;
+    }
+  }
+
   .cinder-chat-conversation-list__title {
     grid-column: 1;
     grid-row: 1;

package/src/components/checkbox/README.md

@@ -26,6 +26,7 @@ Single boolean toggle for opt-in selections within forms or settings.
 | `indeterminate` | `boolean`  | no       | —       | Bound indeterminate state. Mutually exclusive with `checked` visually.                                                                                                                                                                              |
 | `label`         | `string`   | no       | —       | Visible label rendered in a `<label>` element associated via `for`.                                                                                                                                                                                 |
 | `class`         | `(opaque)` | no       | —       | Extra class names merged with `.cinder-checkbox`. Not expressible in JSON Schema; see the component types for the signature.                                                                                                                        |
+| `onValueChange` | `(opaque)` | no       | —       | Intercept a proposed checked state before the bindable value is written. Return a replacement value to transform it. Not expressible in JSON Schema; see the component types for the signature.                                                     |
 
 <!-- generated:props:end -->
 

package/src/components/checkbox/checkbox.css

@@ -165,6 +165,9 @@
 
   /* Label */
   .cinder-checkbox-field__label {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--cinder-space-1);
     font-size: var(--cinder-text-sm);
     line-height: var(--cinder-leading-normal);
     color: var(--cinder-text);

package/src/components/checkbox/checkbox.svelte

@@ -21,10 +21,12 @@
   import { getFormFieldContext } from '../../_internal/form-field-context.ts';
   import { classNames } from '../../utilities/class-names.ts';
   import { devWarn } from '../../utilities/dev-warn.ts';
+  import { commitValue } from '../../utilities/value-change.ts';
 
   let {
     id,
     checked = $bindable(false),
+    onValueChange,
     indeterminate = $bindable(false),
     label,
     description,
@@ -34,6 +36,7 @@
     class: className,
     'aria-describedby': consumerDescribedBy,
     'aria-invalid': consumerInvalid,
+    onchange: consumerOnchange,
     ...rest
   }: CheckboxProps = $props();
 
@@ -82,6 +85,41 @@
       inputElement.indeterminate = indeterminate && !checked;
     }
   });
+  let resetSyncTimeout: ReturnType<typeof setTimeout> | undefined;
+
+  function syncCheckedAfterFormReset(): void {
+    if (resetSyncTimeout !== undefined) clearTimeout(resetSyncTimeout);
+    resetSyncTimeout = setTimeout(() => {
+      resetSyncTimeout = undefined;
+      if (!inputElement) return;
+      checked = inputElement.checked;
+      inputElement.indeterminate = indeterminate && !inputElement.checked;
+    }, 0);
+  }
+
+  $effect(() => {
+    const form = inputElement?.form;
+    if (!form) return;
+
+    form.addEventListener('reset', syncCheckedAfterFormReset);
+    return () => {
+      form.removeEventListener('reset', syncCheckedAfterFormReset);
+      if (resetSyncTimeout !== undefined) {
+        clearTimeout(resetSyncTimeout);
+        resetSyncTimeout = undefined;
+      }
+    };
+  });
+
+  function handleChange(event: Event): void {
+    const target = event.currentTarget as HTMLInputElement;
+    const committed = commitValue(target.checked, onValueChange, (next) => {
+      checked = next;
+    });
+    target.checked = committed;
+    target.indeterminate = indeterminate && !committed;
+    consumerOnchange?.(event as Parameters<NonNullable<CheckboxProps['onchange']>>[0]);
+  }
 </script>
 
 <div class="cinder-checkbox-field">
@@ -91,13 +129,14 @@
         bind:this={inputElement}
         id={field.id}
         type="checkbox"
+        {...rest}
         disabled={field.disabled}
         required={field.required}
-        bind:checked
+        {checked}
+        onchange={handleChange}
         class={classNames('cinder-checkbox', className)}
         aria-invalid={field.ariaInvalid}
         aria-describedby={field.describedBy}
-        {...rest}
       />
       <span class="cinder-checkbox-field__indicator" aria-hidden="true"></span>
     </span>
@@ -108,6 +147,9 @@
         data-disabled={field.disabled || undefined}
       >
         {label}
+        {#if field.required}
+          <span class="cinder-_required-marker" aria-hidden="true">*</span>
+        {/if}
       </label>
     {/if}
   </div>

package/src/components/checkbox/checkbox.types.ts

@@ -20,6 +20,8 @@ export type CheckboxProps = HTMLInputAttributes & {
   id?: string;
   /** Bound checked state. */
   checked?: boolean;
+  /** Intercept a proposed checked state before the bindable value is written. Return a replacement value to transform it. */
+  onValueChange?: (next: boolean) => boolean | void;
   /** Bound indeterminate state. Mutually exclusive with `checked` visually. */
   indeterminate?: boolean;
   /** Visible label rendered in a `<label>` element associated via `for`. */

package/src/components/checkbox-group/README.md

@@ -22,8 +22,8 @@ Wraps multiple checkboxes under a shared label and validation context.
 | `description` | `string`                | no       | —       | Helper text below the group; wired via `aria-describedby` on the fieldset.                                                                                                                                                                                                                                                                                                                                                                                       |
 | `disabled`    | `boolean`               | no       | —       | Disables every native form control inside via the fieldset's built-in cascade. Renders as the native `disabled` attribute on `<fieldset>`.                                                                                                                                                                                                                                                                                                                       |
 | `error`       | `string`                | no       | —       | Group-level validation message. Rendered as a polite live region and referenced by the fieldset's `aria-describedby`. Also sets `aria-invalid="true"` on the fieldset itself as a supplementary signal. Note: fieldset-level `aria-describedby` is not reliably re-announced as focus moves between descendants. This is best-effort supplemental context — if a specific control must announce as invalid on focus, pass `error` to that `<Checkbox>` directly. |
-| `legend`      | `string`                | no       | —       | Optional legend rendered as a `<legend>` inside the `<fieldset>`.                                                                                                                                                                                                                                                                                                                                                                                                |
-| `required`    | `boolean`               | no       | —       | Marks the group as visually required. Sets `data-cinder-required` on the fieldset so consumers can target it (e.g. legend asterisk). This is a visual/data-attribute hint. It does NOT set `required` on any child `<input>` and does NOT enforce constraint validation. Per-control `required` must be set on the individual `<Checkbox>`.                                                                                                                      |
+| `label`       | `string`                | no       | —       | Visible group caption. Rendered as a `<legend>` inside the `<fieldset>`. Named `label` for consistency with every other form control — the element is a `<legend>` because the group is a fieldset.                                                                                                                                                                                                                                                              |
+| `required`    | `boolean`               | no       | —       | Marks the group required: sets `aria-required="true"` and `data-cinder-required` on the fieldset and renders the required asterisk in the legend. It does NOT set `required` on any child `<input>` and does NOT enforce native constraint validation. Per-control `required` must be set on the individual `<Checkbox>`.                                                                                                                                        |
 | `variant`     | `"default"` \| `"card"` | no       | —       | Layout variant. `'default'` is a stacked column. `'card'` styles each direct child `.cinder-checkbox-field` as a bordered card row. Always emitted as `data-variant` on the fieldset. Card variant assumes each direct child of the items container is a single `<Checkbox>`.                                                                                                                                                                                    |
 | `children`    | `(opaque)`              | yes      | —       | Checkbox children. Not expressible in JSON Schema; see the component types for the signature.                                                                                                                                                                                                                                                                                                                                                                    |
 

package/src/components/checkbox-group/checkbox-group.css

@@ -15,6 +15,9 @@
   }
 
   .cinder-checkbox-group__legend {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--cinder-space-1);
     font-size: var(--cinder-text-xs);
     font-weight: var(--cinder-font-medium);
     color: var(--cinder-text);

package/src/components/checkbox-group/checkbox-group.examples.json

@@ -0,0 +1,13 @@
+{
+  "$schema": "../../schemas/examples.schema.json",
+  "component": "checkbox-group",
+  "import": "@lostgradient/cinder/checkbox-group",
+  "examples": [
+    {
+      "id": "basic",
+      "title": "Basic checkbox group",
+      "description": "Grouped checkboxes under a shared legend with independent checked states.",
+      "code": "<script lang=\"ts\">\n  import { Checkbox } from '@lostgradient/cinder/checkbox';\n  import { CheckboxGroup } from '@lostgradient/cinder/checkbox-group';\n\n  let email = $state(true);\n  let sms = $state(false);\n  let push = $state(false);\n</script>\n\n<CheckboxGroup label=\"Notification channels\">\n  <Checkbox id=\"email\" label=\"Email\" bind:checked={email} />\n  <Checkbox id=\"sms\" label=\"SMS\" bind:checked={sms} />\n  <Checkbox id=\"push\" label=\"Push notifications\" bind:checked={push} />\n</CheckboxGroup>\n"
+    }
+  ]
+}

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

@@ -23,11 +23,12 @@
     errorId as buildErrorId,
   } from '../../_internal/field-control.ts';
   import { classNames } from '../../utilities/class-names.ts';
+  import { devWarn } from '../../utilities/dev-warn.ts';
 
   const groupId = $props.id();
 
   let {
-    legend,
+    label: legend,
     description,
     error,
     disabled = false,
@@ -39,6 +40,20 @@
   const descriptionId = $derived(describeId(groupId, !!description));
   const errId = $derived(buildErrorId(groupId, !!error));
   const describedBy = $derived(composeDescribedBy(descriptionId, errId));
+
+  // Warn once when no accessible group name is provided. The `hasWarned` flag
+  // stops the effect re-firing on every `legend` change — matching the
+  // tree.svelte convention and dev-warn.ts's guidance against a warn-only
+  // effect that re-subscribes on each update.
+  let hasWarnedNoLegend = false;
+  $effect(() => {
+    if (!legend && !hasWarnedNoLegend) {
+      hasWarnedNoLegend = true;
+      devWarn(
+        '[cinder/CheckboxGroup] A <fieldset> was rendered without a label prop. The fieldset will have no <legend>, which makes it inaccessible. Provide a label prop to describe the group.',
+      );
+    }
+  });
 </script>
 
 <!--
@@ -58,12 +73,18 @@
   {disabled}
   aria-invalid={ariaInvalid(!!error)}
   aria-describedby={describedBy}
+  aria-required={required || undefined}
   data-cinder-disabled={disabled || undefined}
   data-cinder-required={required || undefined}
   data-variant={variant}
 >
   {#if legend}
-    <legend class="cinder-checkbox-group__legend">{legend}</legend>
+    <legend class="cinder-checkbox-group__legend">
+      {legend}
+      {#if required}
+        <span class="cinder-_required-marker" aria-hidden="true">*</span>
+      {/if}
+    </legend>
   {/if}
 
   <div class="cinder-checkbox-group__items">

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

@@ -9,8 +9,12 @@ import type { Snippet } from 'svelte';
  * handles the disabled cascade without any Svelte context.
  */
 export type CheckboxGroupProps = {
-  /** Optional legend rendered as a `<legend>` inside the `<fieldset>`. */
-  legend?: string;
+  /**
+   * Visible group caption. Rendered as a `<legend>` inside the `<fieldset>`.
+   * Named `label` for consistency with every other form control — the element
+   * is a `<legend>` because the group is a fieldset.
+   */
+  label?: string;
   /** Helper text below the group; wired via `aria-describedby` on the fieldset. */
   description?: string;
   /**
@@ -30,12 +34,13 @@ export type CheckboxGroupProps = {
    */
   disabled?: boolean;
   /**
-   * Marks the group as visually required. Sets `data-cinder-required` on the
-   * fieldset so consumers can target it (e.g. legend asterisk).
+   * Marks the group required: sets `aria-required="true"` and
+   * `data-cinder-required` on the fieldset and renders the required asterisk in
+   * the legend.
    *
-   * This is a visual/data-attribute hint. It does NOT set `required` on any
-   * child `<input>` and does NOT enforce constraint validation. Per-control
-   * `required` must be set on the individual `<Checkbox>`.
+   * It does NOT set `required` on any child `<input>` and does NOT enforce
+   * native constraint validation. Per-control `required` must be set on the
+   * individual `<Checkbox>`.
    */
   required?: boolean;
   /**

package/src/components/choice-grid-item/choice-grid-item.svelte

@@ -127,7 +127,7 @@
   aria-disabled={isDisabled || undefined}
   tabindex={tabIndex}
   class={classNames('cinder-choice-grid-item', className)}
-  data-cinder-selected={isSelected || undefined}
+  data-cinder-selected={isSelected ? '' : undefined}
   data-cinder-disabled={isDisabled || undefined}
   data-cinder-state={feedbackState !== 'neutral' ? feedbackState : undefined}
   onclick={handleClick}

package/src/components/click-away-listener/README.md

@@ -27,9 +27,9 @@ Headless utility that calls a function when the user clicks or taps outside a su
 | Prop          | Type       | Required | Default | Description                                                                                                                                                                                                                                                           |
 | ------------- | ---------- | -------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `class`       | `string`   | no       | —       | Additional class names merged with the root element.                                                                                                                                                                                                                  |
-| `enabled`     | `boolean`  | no       | —       | When false the document listener is detached and `onClickAway` is never called. Defaults to `true`.                                                                                                                                                                   |
+| `enabled`     | `boolean`  | no       | —       | When false the document listener is detached and `onclickaway` is never called. Defaults to `true`.                                                                                                                                                                   |
 | `children`    | `(opaque)` | yes      | —       | Content rendered inside the root element. Required. Not expressible in JSON Schema; see the component types for the signature.                                                                                                                                        |
-| `onClickAway` | `(opaque)` | yes      | —       | Called with the triggering PointerEvent (or MouseEvent/TouchEvent on browsers that do not support the Pointer Events API) when the user presses a pointer device outside the root element. Not expressible in JSON Schema; see the component types for the signature. |
+| `onclickaway` | `(opaque)` | yes      | —       | Called with the triggering PointerEvent (or MouseEvent/TouchEvent on browsers that do not support the Pointer Events API) when the user presses a pointer device outside the root element. Not expressible in JSON Schema; see the component types for the signature. |
 
 <!-- generated:props:end -->
 

package/src/components/click-away-listener/click-away-listener.examples.json

@@ -7,7 +7,7 @@
       "id": "basic",
       "title": "Basic click-away listener",
       "description": "Calls a function when the user presses a pointer outside the wrapped subtree.",
-      "code": "<script lang=\"ts\">\n  import { Button, ClickAwayListener } from '@lostgradient/cinder';\n\n  let open = $state(false);\n</script>\n\n<Button onclick={() => (open = true)}>Open inline editor</Button>\n\n{#if open}\n  <ClickAwayListener\n    onClickAway={() => (open = false)}\n    style=\"\n      display: inline-flex;\n      flex-direction: column;\n      gap: var(--cinder-space-3);\n      margin-block-start: var(--cinder-space-4);\n      padding: var(--cinder-space-4);\n      border: 1px solid var(--cinder-border);\n      border-radius: var(--cinder-radius-lg);\n      background: var(--cinder-surface-raised);\n    \"\n  >\n    <p style=\"margin: 0;\">Click outside this box to dismiss it.</p>\n    <Button variant=\"secondary\" onclick={() => (open = false)}>Close</Button>\n  </ClickAwayListener>\n{/if}\n"
+      "code": "<script lang=\"ts\">\n  import { Button, ClickAwayListener } from '@lostgradient/cinder';\n\n  let open = $state(false);\n</script>\n\n<Button onclick={() => (open = true)}>Open inline editor</Button>\n\n{#if open}\n  <ClickAwayListener\n    onclickaway={() => (open = false)}\n    style=\"\n      display: inline-flex;\n      flex-direction: column;\n      gap: var(--cinder-space-3);\n      margin-block-start: var(--cinder-space-4);\n      padding: var(--cinder-space-4);\n      border: 1px solid var(--cinder-border);\n      border-radius: var(--cinder-radius-lg);\n      background: var(--cinder-surface-raised);\n    \"\n  >\n    <p style=\"margin: 0;\">Click outside this box to dismiss it.</p>\n    <Button variant=\"secondary\" onclick={() => (open = false)}>Close</Button>\n  </ClickAwayListener>\n{/if}\n"
     }
   ]
 }

package/src/components/click-away-listener/click-away-listener.svelte

@@ -19,7 +19,7 @@
   import type { ClickAwayListenerProps } from './click-away-listener.types.ts';
 
   let {
-    onClickAway,
+    onclickaway,
     enabled = true,
     class: className,
     children,
@@ -50,7 +50,7 @@
 
       const isInside = target instanceof Node && rootElement.contains(target);
       if (!isInside) {
-        onClickAway(event);
+        onclickaway(event);
       }
     }
 

package/src/components/click-away-listener/click-away-listener.types.ts

@@ -4,7 +4,7 @@ import type { HTMLAttributes } from 'svelte/elements';
 /**
  * Props for the ClickAwayListener component.
  *
- * A headless utility that fires `onClickAway` when the user presses a pointer
+ * A headless utility that fires `onclickaway` when the user presses a pointer
  * (mouse or touch) outside the component's root element. Useful for closing
  * inline-edit fields, custom dropdowns, or any overlay that should dismiss on
  * outside interaction without requiring a full Popover or Modal.
@@ -15,9 +15,9 @@ export type ClickAwayListenerProps = Omit<HTMLAttributes<HTMLDivElement>, 'class
    * browsers that do not support the Pointer Events API) when the user presses
    * a pointer device outside the root element.
    */
-  onClickAway: (event: PointerEvent | MouseEvent | TouchEvent) => void;
+  onclickaway: (event: PointerEvent | MouseEvent | TouchEvent) => void;
   /**
-   * When false the document listener is detached and `onClickAway` is never
+   * When false the document listener is detached and `onclickaway` is never
    * called. Defaults to `true`.
    */
   enabled?: boolean;