@lostgradient/cinder 0.3.0 → 0.4.0

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

@@ -0,0 +1,21 @@
+import type { Snippet } from 'svelte';
+
+import type { TextDirection } from '../../_internal/locale-context.ts';
+
+export type { TextDirection } from '../../_internal/locale-context.ts';
+
+export type LocaleProviderProps = {
+  /** BCP 47 locale tag used as the default for locale-aware descendants. */
+  locale?: string;
+  /** Text direction exposed to direction-aware descendants. */
+  direction?: TextDirection | undefined;
+  /** Descendant content that should inherit the locale context. */
+  children?: Snippet;
+};
+
+export interface LocaleProviderSchemaProps {
+  /** BCP 47 locale tag used as the default for locale-aware descendants. */
+  locale?: string;
+  /** Text direction exposed to direction-aware descendants. */
+  direction?: TextDirection | undefined;
+}

package/src/components/markdown-editor/README.md

@@ -40,10 +40,10 @@ Rich Markdown editing surface bundling a Milkdown-powered ProseMirror editor, to
 | `snapshotMode`          | `boolean`                 | no       | —       | Snapshot mode for visual regression testing. When `true`: - Applies `caret-color: transparent` and `user-select: none` to the editor root via a `data-snapshot-mode` attribute, producing a stable visual state (no blinking cursor, no selection highlights). - Blurs any focused element inside the component on mount so the initial screenshot does not capture a focused ring or active caret. This is a purely visual / CSS concern. It does NOT affect editability, ProseMirror state, or any prop controlled by `readonly` / `mode`. |
 | `value`                 | `string`                  | no       | —       | Current markdown content (two-way bindable)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
 | `onchange`              | `(opaque)`                | no       | —       | Called when content changes Not expressible in JSON Schema; see the component types for the signature.                                                                                                                                                                                                                                                                                                                                                                                                                                       |
-| `onCommentShortcut`     | `(opaque)`                | no       | —       | Called when comment shortcut (Ctrl-Alt-c) is pressed (DEP-47) Not expressible in JSON Schema; see the component types for the signature.                                                                                                                                                                                                                                                                                                                                                                                                     |
+| `oncommentshortcut`     | `(opaque)`                | no       | —       | Called when comment shortcut (Ctrl-Alt-c) is pressed (DEP-47) Not expressible in JSON Schema; see the component types for the signature.                                                                                                                                                                                                                                                                                                                                                                                                     |
 | `onmodechange`          | `(opaque)`                | no       | —       | Called when editor mode changes Not expressible in JSON Schema; see the component types for the signature.                                                                                                                                                                                                                                                                                                                                                                                                                                   |
-| `onReady`               | `(opaque)`                | no       | —       | Called when the editor is ready (Milkdown initialized) Not expressible in JSON Schema; see the component types for the signature.                                                                                                                                                                                                                                                                                                                                                                                                            |
-| `onSelectionChange`     | `(opaque)`                | no       | —       | Called when selection changes (stub for DEP-39) Not expressible in JSON Schema; see the component types for the signature.                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| `onready`               | `(opaque)`                | no       | —       | Called when the editor is ready (Milkdown initialized) Not expressible in JSON Schema; see the component types for the signature.                                                                                                                                                                                                                                                                                                                                                                                                            |
+| `onselectionchange`     | `(opaque)`                | no       | —       | Called when selection changes (stub for DEP-39) Not expressible in JSON Schema; see the component types for the signature.                                                                                                                                                                                                                                                                                                                                                                                                                   |
 | `placeholderCompletion` | `(opaque)`                | no       | —       | Placeholder completion configuration (DEP-583). When provided, enables inline suggestion menu for {{…}} tokens in WYSIWYG mode. Not expressible in JSON Schema; see the component types for the signature.                                                                                                                                                                                                                                                                                                                                   |
 | `placeholderDecoration` | `(opaque)`                | no       | —       | Placeholder decoration configuration (DEP-583). When provided, decorates invalid {{…}} tokens with CSS class and data attributes. Not expressible in JSON Schema; see the component types for the signature.                                                                                                                                                                                                                                                                                                                                 |
 | `plugins`               | `(opaque)`                | no       | —       | Additional Milkdown plugins to load. Used for comment anchoring (DEP-39), decorations, and other extensions. Not expressible in JSON Schema; see the component types for the signature.                                                                                                                                                                                                                                                                                                                                                      |

package/src/components/markdown-editor/editor-toolbar/editor-toolbar.svelte

@@ -23,6 +23,8 @@
     disabled?: boolean;
     /** Callback to open link popover, receives the triggering button element */
     onLinkClick?: (triggerElement: HTMLElement) => void;
+    /** Whether the link dialog is currently open */
+    linkPopoverOpen?: boolean;
     /** Callback for undo button click */
     onUndo?: () => void;
     /** Callback for redo button click */
@@ -78,6 +80,7 @@
     canUndo = false,
     canRedo = false,
     disabled = false,
+    linkPopoverOpen = false,
     onLinkClick,
     onUndo,
     onRedo,
@@ -285,8 +288,8 @@
       icon={Link}
       label="Insert Link"
       shortcut={getShortcutDisplay('Mod-k')}
-      toggle
-      pressed={activeMarks.link}
+      aria-haspopup="dialog"
+      aria-expanded={linkPopoverOpen}
       {disabled}
       onclick={handleLink}
       data-testid="toolbar-link"

package/src/components/markdown-editor/editor-toolbar/link-popover.svelte

@@ -30,6 +30,7 @@
 </script>
 
 <script lang="ts">
+  import { tick } from 'svelte';
   import type { Placement, VirtualElement } from '@floating-ui/dom';
   import { createAnchoredOverlay } from '../../../_internal/anchored-overlay.svelte.ts';
   import { classNames } from '../../../utilities/class-names.ts';
@@ -71,6 +72,18 @@
   // in-progress edits if `initialUrl` / `initialText` recomputed mid-open.
   let url = $state(initialUrl);
   let text = $state(initialText);
+  let initialFocusApplied = false;
+
+  $effect(() => {
+    if (initialFocusApplied) return;
+    if (!popoverElement) return;
+    if (anchorElement && !anchoredOverlay.positionReady) return;
+    tick().then(() => {
+      if (initialFocusApplied) return;
+      document.getElementById(`${id}-url`)?.focus();
+      initialFocusApplied = true;
+    });
+  });
 
   // Allowed URL protocols (safe for links)
   const ALLOWED_PROTOCOLS = [

package/src/components/markdown-editor/editor-toolbar/toolbar-dropdown.svelte

@@ -66,6 +66,8 @@
       <DropdownItem
         onclick={() => handleSelect(option.type)}
         data-active={isActive ? '' : undefined}
+        itemRole="menuitemradio"
+        checked={isActive}
       >
         <option.icon class="icon-sm" />
         <span class="dropdown-item-label">{option.label}</span>

package/src/components/markdown-editor/markdown-editor.svelte

@@ -82,10 +82,10 @@
     showToolbar = true,
     class: className,
     onchange,
-    onReady,
+    onready,
     onmodechange,
-    onSelectionChange,
-    onCommentShortcut,
+    onselectionchange,
+    oncommentshortcut,
     plugins = [],
     placeholderCompletion,
     placeholderDecoration,
@@ -385,7 +385,7 @@
     editorState?.focus();
   }
 
-  function handleLinkInsert(url: string, text?: string) {
+  function handleLinkInsert(url: string, text: string | undefined = undefined) {
     if (!editorContext) return;
 
     if (text) {
@@ -438,12 +438,12 @@
     getPlugins: () => plugins,
     getPlaceholderCompletion: () => placeholderCompletion,
     getPlaceholderDecoration: () => placeholderDecoration,
-    onReady: (state) => {
+    onready: (state) => {
       editorState = state;
       isInitializing = false;
-      onReady?.();
+      onready?.();
     },
-    onChange: (markdown) => {
+    onchange: (markdown) => {
       isInternalUpdate = true;
       value = markdown;
       onchange?.(markdown);
@@ -455,12 +455,12 @@
         isInternalUpdate = false;
       });
     },
-    onSelectionChange: (selection) => {
+    onselectionchange: (selection) => {
       // Increment version to trigger toolbar state re-derivation
       selectionVersion++;
-      onSelectionChange?.(selection);
+      onselectionchange?.(selection);
     },
-    onLinkShortcut: () => {
+    onlinkshortcut: () => {
       // Mod-k pressed - open link popover with a virtual element anchor
       // derived from the current ProseMirror selection position. Capture the
       // current link range (as handleLinkClick does) so a subsequent Remove
@@ -470,7 +470,7 @@
       linkPopoverOpen = true;
     },
     // DEP-47: Comment shortcut (Ctrl-Alt-c)
-    onCommentShortcut: () => onCommentShortcut?.(),
+    oncommentshortcut: () => oncommentshortcut?.(),
   });
 
   // Track mode transitions to normalize content on switch (DEP-45).
@@ -659,6 +659,7 @@
           {activeBlockType}
           {canUndo}
           {canRedo}
+          {linkPopoverOpen}
           disabled={!editorContext}
           onLinkClick={handleLinkClick}
           onUndo={handleUndo}
@@ -714,6 +715,7 @@
         readonly={readonly || undefined}
         aria-label={label}
         aria-describedby={ariaDescribedby}
+        aria-multiline="true"
       ></textarea>
     {/if}
   {:else}
@@ -952,7 +954,7 @@
 
   .markdown-editor :global(.template-completion-item-path) {
     font-family: var(--cinder-font-mono);
-    font-weight: 500;
+    font-weight: var(--cinder-font-medium);
     color: var(--cinder-text, #1a1a1a);
   }
 

package/src/components/markdown-editor/markdown-editor.types.ts

@@ -32,7 +32,7 @@ export interface ToolbarContext {
 
 export type MarkdownEditorProps = Omit<
   HTMLAttributes<HTMLDivElement>,
-  'id' | 'class' | 'onchange'
+  'id' | 'class' | 'onchange' | 'onselectionchange'
 > & {
   /** Unique identifier for accessibility (required) */
   id: string;
@@ -57,13 +57,13 @@ export type MarkdownEditorProps = Omit<
   /** Called when content changes */
   onchange?: (value: string) => void;
   /** Called when the editor is ready (Milkdown initialized) */
-  onReady?: () => void;
+  onready?: () => void;
   /** Called when editor mode changes */
   onmodechange?: (mode: EditorMode) => void;
   /** Called when selection changes (stub for DEP-39) */
-  onSelectionChange?: (selection: EditorSelection | null) => void;
+  onselectionchange?: (selection: EditorSelection | null) => void;
   /** Called when comment shortcut (Ctrl-Alt-c) is pressed (DEP-47) */
-  onCommentShortcut?: () => void;
+  oncommentshortcut?: () => void;
   /**
    * Additional Milkdown plugins to load.
    * Used for comment anchoring (DEP-39), decorations, and other extensions.

package/src/components/masonry/README.md

@@ -22,13 +22,13 @@ top-to-bottom through each column rather than left-to-right across visual rows.
 
 <!-- generated:props:start -->
 
-| Prop       | Type       | Required | Default | Description                                                                                  |
-| ---------- | ---------- | -------- | ------- | -------------------------------------------------------------------------------------------- |
-| `as`       | `string`   | no       | —       | Rendered HTML tag.                                                                           |
-| `class`    | `string`   | no       | —       | Custom class merged with `.cinder-masonry`.                                                  |
-| `columns`  | `string`   | no       | —       | CSS column count value.                                                                      |
-| `gap`      | `string`   | no       | —       | Gap between columns and between direct children.                                             |
-| `children` | `(opaque)` | yes      | —       | Masonry contents. Not expressible in JSON Schema; see the component types for the signature. |
+| Prop       | Type                                                                                                                      | Required | Default | Description                                                                                                                          |
+| ---------- | ------------------------------------------------------------------------------------------------------------------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------ |
+| `as`       | `"article"` \| `"aside"` \| `"div"` \| `"footer"` \| `"header"` \| `"main"` \| `"nav"` \| `"section"` \| `"ul"` \| `"ol"` | no       | `"div"` | Rendered HTML tag. Constrained to layout-safe container elements; void elements such as `img`, `input`, `br`, and `hr` are excluded. |
+| `class`    | `string`                                                                                                                  | no       | —       | Custom class merged with `.cinder-masonry`.                                                                                          |
+| `columns`  | `string`                                                                                                                  | no       | —       | CSS column count value.                                                                                                              |
+| `gap`      | `string`                                                                                                                  | no       | —       | Gap between columns and between direct children.                                                                                     |
+| `children` | `(opaque)`                                                                                                                | yes      | —       | Masonry contents. Not expressible in JSON Schema; see the component types for the signature.                                         |
 
 <!-- generated:props:end -->
 

package/src/components/masonry/masonry.types.ts

@@ -1,14 +1,36 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 
+/**
+ * Layout-safe HTML element names for use as the Masonry container tag.
+ * Void elements (`img`, `input`, `br`, `hr`, etc.) cannot contain children
+ * and are excluded; inline elements that do not accept block children are also
+ * excluded.
+ */
+export type MasonryElement =
+  | 'article'
+  | 'aside'
+  | 'div'
+  | 'footer'
+  | 'header'
+  | 'main'
+  | 'nav'
+  | 'section'
+  | 'ul'
+  | 'ol';
+
 /** Props for the Masonry component. */
 export type MasonryProps = Omit<HTMLAttributes<HTMLElement>, 'class'> & {
   /** CSS column count value. */
   columns?: string;
   /** Gap between columns and between direct children. */
   gap?: string;
-  /** Rendered HTML tag. */
-  as?: string;
+  /**
+   * Rendered HTML tag. Constrained to layout-safe container elements;
+   * void elements such as `img`, `input`, `br`, and `hr` are excluded.
+   * @default "div"
+   */
+  as?: MasonryElement;
   /** Custom class merged with `.cinder-masonry`. */
   class?: string;
   /** Masonry contents. */

package/src/components/matrix-chart/matrix-chart.svelte

@@ -26,6 +26,7 @@
     toFiniteOrNull,
   } from '../../_internal/chart/heatmap-utilities.ts';
   import { classNames } from '../../utilities/class-names.ts';
+  import { useResizeObserver } from '../../utilities/use-resize-observer.svelte.ts';
   import type { MatrixChartProps } from './matrix-chart.types.ts';
 
   let {
@@ -59,27 +60,12 @@
   const marginLeft = 80;
 
   let measuredWidth = $state(400);
-  let rootElement = $state<HTMLElement>();
 
-  $effect(() => {
-    const element = rootElement;
-    if (!element) return;
-    // Guard for SSR / test environments without ResizeObserver — fall back to a
-    // one-shot measurement so the chart still renders at a sensible width.
-    if (typeof ResizeObserver === 'undefined') {
-      const rect = element.getBoundingClientRect();
-      if (rect.width > 0) measuredWidth = rect.width;
-      return;
-    }
-    const observer = new ResizeObserver((entries) => {
-      const entry = entries[0];
-      // Ignore zero-width measurements (element hidden / display:none) so the
-      // last good width is kept instead of collapsing the chart geometry to a
-      // degenerate 1px viewport, matching the getBoundingClientRect fallback.
-      if (entry && entry.contentRect.width > 0) measuredWidth = entry.contentRect.width;
-    });
-    observer.observe(element);
-    return () => observer.disconnect();
+  const observeResize = useResizeObserver((entries) => {
+    const entry = entries[0];
+    // Ignore zero-width measurements (element hidden / display:none) so the
+    // last good width is kept instead of collapsing the chart geometry.
+    if (entry && entry.contentRect.width > 0) measuredWidth = entry.contentRect.width;
   });
 
   const plotWidth = $derived(Math.max(1, measuredWidth - marginLeft - marginRight));
@@ -224,7 +210,7 @@
 
 <figure
   {...rest}
-  bind:this={rootElement}
+  {@attach observeResize}
   id={rootId}
   class={classNames('cinder-matrix-chart', customClassName)}
   aria-label={label}

package/src/components/media-controls/README.md

@@ -37,9 +37,9 @@ Accessible playback controls for play, pause, and replay actions with optional p
 | `progressLabel` | `string`                    | no       | —           | Accessible label for the progress bar.                                                                                 |
 | `replay`        | `boolean`                   | no       | `false`     | Show a replay action when the track has ended.                                                                         |
 | `unavailable`   | `boolean`                   | no       | `false`     | Controls are unavailable.                                                                                              |
-| `onPause`       | `(opaque)`                  | no       | —           | Called when the pause action is triggered. Not expressible in JSON Schema; see the component types for the signature.  |
-| `onPlay`        | `(opaque)`                  | no       | —           | Called when the play action is triggered. Not expressible in JSON Schema; see the component types for the signature.   |
-| `onReplay`      | `(opaque)`                  | no       | —           | Called when the replay action is triggered. Not expressible in JSON Schema; see the component types for the signature. |
+| `onpause`       | `(opaque)`                  | no       | —           | Called when the pause action is triggered. Not expressible in JSON Schema; see the component types for the signature.  |
+| `onplay`        | `(opaque)`                  | no       | —           | Called when the play action is triggered. Not expressible in JSON Schema; see the component types for the signature.   |
+| `onreplay`      | `(opaque)`                  | no       | —           | Called when the replay action is triggered. Not expressible in JSON Schema; see the component types for the signature. |
 
 <!-- generated:props:end -->
 

package/src/components/media-controls/media-controls.css

@@ -18,11 +18,11 @@
     color: var(--cinder-text);
     cursor: pointer;
     font-size: var(--cinder-text-sm);
-    font-weight: 500;
+    font-weight: var(--cinder-font-medium);
     line-height: 1;
     transition:
-      background-color 0.15s ease,
-      border-color 0.15s ease;
+      background-color var(--cinder-duration-fast) var(--cinder-ease-standard),
+      border-color var(--cinder-duration-fast) var(--cinder-ease-standard);
     min-width: 2rem;
     min-height: 2rem;
   }
@@ -41,6 +41,17 @@
       0 0 0 calc(var(--cinder-ring-offset) + var(--cinder-ring-width)) var(--cinder-ring-color);
   }
 
+  @media (forced-colors: active) {
+    .cinder-media-controls__button: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;
+    }
+  }
+
   .cinder-media-controls__button:disabled {
     cursor: not-allowed;
     opacity: 0.5;
@@ -107,6 +118,6 @@
     height: 100%;
     border-radius: var(--cinder-radius-full, 9999px);
     background-color: var(--cinder-accent);
-    transition: width 0.1s ease;
+    transition: width var(--cinder-duration-fast) var(--cinder-ease-standard);
   }
 }

package/src/components/media-controls/media-controls.examples.json

@@ -7,7 +7,7 @@
       "id": "desktop",
       "title": "Desktop media controls",
       "description": "Play, pause, and replay actions with optional progress. Compact icon-only layout suitable for a toolbar.",
-      "code": "<script lang=\"ts\">\n  import { onDestroy } from 'svelte';\n\n  import { MediaControls } from '@lostgradient/cinder/media-controls';\n\n  let playing = $state(false);\n  let progress = $state<number | undefined>(undefined);\n\n  const isReplay = $derived(progress !== undefined && !playing && progress >= 1);\n\n  // The progress timer is hoisted so pause/replay can stop it. Keeping it local\n  // to handlePlay would leak the interval on pause and stack a new one on every\n  // Play click.\n  let interval: ReturnType<typeof setInterval> | undefined;\n  let replayTimer: ReturnType<typeof setTimeout> | undefined;\n\n  function stopTimer() {\n    if (interval !== undefined) {\n      clearInterval(interval);\n      interval = undefined;\n    }\n  }\n\n  function handlePlay() {\n    playing = true;\n    progress = 0;\n    // Simulate progress. Clear any prior interval first so repeated Play clicks\n    // don't stack timers.\n    stopTimer();\n    interval = setInterval(() => {\n      progress = (progress ?? 0) + 0.05;\n      if ((progress ?? 0) >= 1) {\n        stopTimer();\n        playing = false;\n        progress = 1;\n      }\n    }, 200);\n  }\n\n  function handlePause() {\n    playing = false;\n    stopTimer();\n  }\n\n  function handleReplay() {\n    stopTimer();\n    playing = false;\n    progress = 0;\n    if (replayTimer !== undefined) clearTimeout(replayTimer);\n    replayTimer = setTimeout(() => handlePlay(), 100);\n  }\n\n  onDestroy(() => {\n    stopTimer();\n    if (replayTimer !== undefined) clearTimeout(replayTimer);\n  });\n</script>\n\n<div style=\"display: flex; flex-direction: column; gap: 1rem;\">\n  {#if progress !== undefined}\n    <MediaControls\n      {playing}\n      replay={isReplay}\n      {progress}\n      onPlay={handlePlay}\n      onPause={handlePause}\n      onReplay={handleReplay}\n    />\n    <MediaControls\n      {playing}\n      replay={isReplay}\n      {progress}\n      layout=\"expanded\"\n      onPlay={handlePlay}\n      onPause={handlePause}\n      onReplay={handleReplay}\n    />\n  {:else}\n    <MediaControls\n      {playing}\n      replay={isReplay}\n      onPlay={handlePlay}\n      onPause={handlePause}\n      onReplay={handleReplay}\n    />\n    <MediaControls\n      {playing}\n      replay={isReplay}\n      layout=\"expanded\"\n      onPlay={handlePlay}\n      onPause={handlePause}\n      onReplay={handleReplay}\n    />\n  {/if}\n</div>\n"
+      "code": "<script lang=\"ts\">\n  import { onDestroy } from 'svelte';\n\n  import { MediaControls } from '@lostgradient/cinder/media-controls';\n\n  let playing = $state(false);\n  let progress = $state<number | undefined>(undefined);\n\n  const isReplay = $derived(progress !== undefined && !playing && progress >= 1);\n\n  // The progress timer is hoisted so pause/replay can stop it. Keeping it local\n  // to handlePlay would leak the interval on pause and stack a new one on every\n  // Play click.\n  let interval: ReturnType<typeof setInterval> | undefined;\n  let replayTimer: ReturnType<typeof setTimeout> | undefined;\n\n  function stopTimer() {\n    if (interval !== undefined) {\n      clearInterval(interval);\n      interval = undefined;\n    }\n  }\n\n  function handlePlay() {\n    playing = true;\n    progress = 0;\n    // Simulate progress. Clear any prior interval first so repeated Play clicks\n    // don't stack timers.\n    stopTimer();\n    interval = setInterval(() => {\n      progress = (progress ?? 0) + 0.05;\n      if ((progress ?? 0) >= 1) {\n        stopTimer();\n        playing = false;\n        progress = 1;\n      }\n    }, 200);\n  }\n\n  function handlePause() {\n    playing = false;\n    stopTimer();\n  }\n\n  function handleReplay() {\n    stopTimer();\n    playing = false;\n    progress = 0;\n    if (replayTimer !== undefined) clearTimeout(replayTimer);\n    replayTimer = setTimeout(() => handlePlay(), 100);\n  }\n\n  onDestroy(() => {\n    stopTimer();\n    if (replayTimer !== undefined) clearTimeout(replayTimer);\n  });\n</script>\n\n<div style=\"display: flex; flex-direction: column; gap: 1rem;\">\n  {#if progress !== undefined}\n    <MediaControls\n      {playing}\n      replay={isReplay}\n      {progress}\n      onplay={handlePlay}\n      onpause={handlePause}\n      onreplay={handleReplay}\n    />\n    <MediaControls\n      {playing}\n      replay={isReplay}\n      {progress}\n      layout=\"expanded\"\n      onplay={handlePlay}\n      onpause={handlePause}\n      onreplay={handleReplay}\n    />\n  {:else}\n    <MediaControls\n      {playing}\n      replay={isReplay}\n      onplay={handlePlay}\n      onpause={handlePause}\n      onreplay={handleReplay}\n    />\n    <MediaControls\n      {playing}\n      replay={isReplay}\n      layout=\"expanded\"\n      onplay={handlePlay}\n      onpause={handlePause}\n      onreplay={handleReplay}\n    />\n  {/if}\n</div>\n"
     },
     {
       "id": "states",

package/src/components/media-controls/media-controls.svelte

@@ -29,9 +29,9 @@
     progress,
     progressLabel = 'Playback progress',
     layout = 'compact',
-    onPlay,
-    onPause,
-    onReplay,
+    onplay,
+    onpause,
+    onreplay,
     class: customClassName,
     ...rest
   }: MediaControlsProps = $props();
@@ -52,19 +52,19 @@
   function handlePlay() {
     if (isDisabled) return;
     announcement = 'Playing';
-    onPlay?.();
+    onplay?.();
   }
 
   function handlePause() {
     if (isDisabled) return;
     announcement = 'Paused';
-    onPause?.();
+    onpause?.();
   }
 
   function handleReplay() {
     if (isDisabled) return;
     announcement = 'Replaying';
-    onReplay?.();
+    onreplay?.();
   }
 
   function handlePrimaryAction() {

package/src/components/media-controls/media-controls.types.ts

@@ -4,7 +4,10 @@ import type { HTMLAttributes } from 'svelte/elements';
 export type MediaControlsLayout = 'compact' | 'expanded';
 
 /** Props for the MediaControls component. */
-export type MediaControlsProps = Omit<HTMLAttributes<HTMLDivElement>, 'class' | 'children'> & {
+export type MediaControlsProps = Omit<
+  HTMLAttributes<HTMLDivElement>,
+  'class' | 'children' | 'onplay' | 'onpause'
+> & {
   /** Current playback state. @default "paused" */
   playing?: boolean;
   /** Show a replay action instead of play/pause when the track has ended. @default false */
@@ -22,11 +25,11 @@ export type MediaControlsProps = Omit<HTMLAttributes<HTMLDivElement>, 'class' |
   /** Layout mode: `compact` renders icon-only, `expanded` renders icon+label. @default "compact" */
   layout?: MediaControlsLayout;
   /** Called when the user triggers playback. */
-  onPlay?: () => void;
+  onplay?: () => void;
   /** Called when the user pauses playback. */
-  onPause?: () => void;
+  onpause?: () => void;
   /** Called when the user triggers replay. */
-  onReplay?: () => void;
+  onreplay?: () => void;
   /** Additional class names merged with `.cinder-media-controls`. */
   class?: string;
 };
@@ -72,9 +75,9 @@ export interface MediaControlsSchemaProps {
   /** Additional class names merged with `.cinder-media-controls`. */
   class?: string;
   /** Called when the play action is triggered. */
-  onPlay?: () => void;
+  onplay?: () => void;
   /** Called when the pause action is triggered. */
-  onPause?: () => void;
+  onpause?: () => void;
   /** Called when the replay action is triggered. */
-  onReplay?: () => void;
+  onreplay?: () => void;
 }

package/src/components/menu-bar/menu-bar.css

@@ -50,6 +50,17 @@
     box-shadow: var(--_cinder-focus-ring-shadow);
   }
 
+  @media (forced-colors: active) {
+    .cinder-menu-bar__trigger:focus-visible {
+      outline: var(--cinder-ring-width) solid ButtonText;
+      /* 3px separates the outline from ButtonBorder (which renders in forced-colors
+         on all button-like controls and shares the ButtonText color family in HCM);
+         at 2px the ring and border can visually merge. */
+      outline-offset: 3px;
+      box-shadow: none;
+    }
+  }
+
   .cinder-menu-bar__access-key {
     text-decoration: underline;
     text-underline-offset: 0.125em;