@lostgradient/cinder 0.1.1 → 0.2.0

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

@@ -0,0 +1,91 @@
+<script lang="ts" module>
+  /**
+   * @cinder
+   * @category typography
+   * @status alpha
+   * @purpose Grouped keyboard-shortcut reference that renders key combos via Kbd with accessible labels not reliant only on visual keycaps.
+   * @tag shortcut
+   * @tag keyboard
+   * @useWhen Displaying a reference panel of keyboard shortcuts grouped by feature area.
+   * @useWhen Embedding a shortcut table inside a modal, sheet, popover, or help page.
+   * @avoidWhen Showing a single inline shortcut hint — use shortcut-hint instead.
+   * @related kbd, shortcut-hint, modal, sheet, popover
+   */
+  export type {
+    KeyboardShortcutEntry,
+    KeyboardShortcutGroup,
+    KeyboardShortcutsProps,
+  } from './keyboard-shortcuts.types.ts';
+</script>
+
+<script lang="ts">
+  import { classNames } from '../../utilities/class-names.ts';
+  import Kbd from '../kbd/kbd.svelte';
+  import type { KeyboardShortcutsProps } from './keyboard-shortcuts.types.ts';
+
+  let {
+    groups,
+    heading,
+    children,
+    class: customClassName,
+    ...rest
+  }: KeyboardShortcutsProps = $props();
+
+  // A stable, unique, SSR-safe id base. Group heading ids are derived from this
+  // plus the group's INDEX — never from group.label, which can repeat (duplicate
+  // ids break aria-labelledby).
+  const baseId = $props.id();
+  const groupHeadingId = (index: number) => `${baseId}-group-${index}`;
+
+  /**
+   * 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 {
+    if (keysLabel) return keysLabel;
+    return keys.join(' plus ');
+  }
+</script>
+
+<div {...rest} class={classNames('cinder-keyboard-shortcuts', customClassName)}>
+  {#if heading}
+    <h2 class="cinder-keyboard-shortcuts__heading">{heading}</h2>
+  {/if}
+
+  {#if children}
+    <div class="cinder-keyboard-shortcuts__intro">
+      {@render children()}
+    </div>
+  {/if}
+
+  {#each groups as group, groupIndex (groupIndex)}
+    <section class="cinder-keyboard-shortcuts__group" aria-labelledby={groupHeadingId(groupIndex)}>
+      <h3 id={groupHeadingId(groupIndex)} class="cinder-keyboard-shortcuts__group-label">
+        {group.label}
+      </h3>
+
+      <dl class="cinder-keyboard-shortcuts__list">
+        {#each group.shortcuts as shortcut, shortcutIndex (shortcutIndex)}
+          <div class="cinder-keyboard-shortcuts__row">
+            <dt class="cinder-keyboard-shortcuts__action">{shortcut.action}</dt>
+            <dd class="cinder-keyboard-shortcuts__keys">
+              <!-- Screen-reader label for the whole key combo. -->
+              <span class="cinder-sr-only"
+                >{resolveKeysLabel(shortcut.keys, shortcut.keysLabel)}</span
+              >
+              <!-- Visual presentation via Kbd. aria-hidden so the sr-only span is the announced text. -->
+              <span aria-hidden="true" class="cinder-keyboard-shortcuts__keys-visual">
+                {#each shortcut.keys as key, index (key + index)}
+                  <Kbd label={key} size="sm" />
+                  {#if index < shortcut.keys.length - 1}
+                    <span class="cinder-keyboard-shortcuts__separator">+</span>
+                  {/if}
+                {/each}
+              </span>
+            </dd>
+          </div>
+        {/each}
+      </dl>
+    </section>
+  {/each}
+</div>

package/src/components/keyboard-shortcuts/keyboard-shortcuts.types.ts

@@ -0,0 +1,46 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+
+/** A single keyboard shortcut entry. */
+export type KeyboardShortcutEntry = {
+  /** Human-readable action description (e.g. "Save document"). */
+  action: string;
+  /** The key sequence, rendered via Kbd (e.g. ["Ctrl", "S"] or ["Space"]). */
+  keys: string[];
+  /** Optional accessible label for the key combo, e.g. "Control plus S". Defaults to joining keys with plus. */
+  keysLabel?: string;
+};
+
+/** A group of related shortcuts under a heading. */
+export type KeyboardShortcutGroup = {
+  /** Group heading label. */
+  label: string;
+  /** Shortcuts in this group. */
+  shortcuts: KeyboardShortcutEntry[];
+};
+
+/** Props for the KeyboardShortcuts component. */
+export type KeyboardShortcutsProps = Omit<HTMLAttributes<HTMLDivElement>, 'class' | 'children'> & {
+  /** Groups of shortcuts to display. */
+  groups: KeyboardShortcutGroup[];
+  /** Optional heading for the entire shortcuts panel. */
+  heading?: string;
+  /** Snippet rendered above all groups. */
+  children?: Snippet;
+  /** Additional class names merged with `.cinder-keyboard-shortcuts`. */
+  class?: string;
+};
+
+/**
+ * Cinder-specific props for KeyboardShortcuts, used by the schema generator.
+ */
+export interface KeyboardShortcutsSchemaProps {
+  /** Groups of shortcuts to display. */
+  groups: KeyboardShortcutGroup[];
+  /** Optional heading for the entire shortcuts panel. */
+  heading?: string;
+  /** Additional class names merged with `.cinder-keyboard-shortcuts`. */
+  class?: string;
+  /** Intro content rendered above the groups. */
+  children?: Snippet;
+}

package/src/components/keyboard-shortcuts/keyboard-shortcuts.variables.json

@@ -0,0 +1 @@
+[]

package/src/components/keyboard-shortcuts/keyboard-shortcuts.variables.ts

@@ -0,0 +1,3 @@
+const variables: readonly string[] = [];
+
+export default variables;

package/src/components/line-chart/README.md

@@ -0,0 +1,61 @@
+# LineChart
+
+Responsive SVG line chart for comparing one or more numeric series over an ordered x domain.
+
+## Usage
+
+```svelte
+<script lang="ts">
+  import { LineChart } from '@lostgradient/cinder/line-chart';
+</script>
+```
+
+## Guidance
+
+### Use When
+
+- Showing trends over time or another ordered domain.
+- Comparing several metric series on the same numeric axis.
+
+### Avoid When
+
+- Comparing discrete category totals — use bar-chart instead.
+- Showing cumulative filled trends — use area-chart instead.
+
+## Props
+
+<!-- generated:props:start -->
+
+| Prop                       | Type                                                                                                                   | Required | Default | Description |
+| -------------------------- | ---------------------------------------------------------------------------------------------------------------------- | -------- | ------- | ----------- |
+| `class`                    | `string`                                                                                                               | no       | —       |             |
+| `dataTableCaption`         | `string`                                                                                                               | no       | —       |             |
+| `dataTableVisibility`      | `"screen-reader-only"` \| `"visible"` \| `"hidden"`                                                                    | no       | —       |             |
+| `description`              | `string`                                                                                                               | no       | —       |             |
+| `height`                   | `number`                                                                                                               | no       | —       |             |
+| `hiddenSeriesIds`          | `string`[]                                                                                                             | no       | —       |             |
+| `label`                    | `string`                                                                                                               | yes      | —       |             |
+| `legendPosition`           | `"top"` \| `"bottom"` \| `"none"`                                                                                      | no       | —       |             |
+| `loading`                  | `boolean`                                                                                                              | no       | —       |             |
+| `maximumInteractivePoints` | `number`                                                                                                               | no       | —       |             |
+| `series`                   | ({ color?: `string`; data: ({ x: `string` \| `number`; y?: `number` \| `null` })[]; id: `string`; label: `string` })[] | yes      | —       |             |
+| `xAxis`                    | { label?: `string`; tickCount?: `number` }                                                                             | no       | —       |             |
+| `yAxis`                    | { label?: `string`; tickCount?: `number` }                                                                             | no       | —       |             |
+
+<!-- generated:props:end -->
+
+## CSS Variables
+
+<!-- generated:variables:start -->
+
+This component does not declare any local CSS variables.
+
+<!-- generated:variables:end -->
+
+## Subcomponents
+
+<!-- generated:subcomponents:start -->
+
+None.
+
+<!-- generated:subcomponents:end -->

package/src/components/line-chart/line-chart.css

@@ -81,15 +81,64 @@
     pointer-events: none;
   }
 
-  /*
- * SVG focus indicator: drop-shadow filter renders an outline-equivalent ring
- * around the focused circle that stays visible on any background. Stroke alone
- * was invisible against transparent fills.
- */
-  .cinder-line-chart__focus-target:focus-visible {
-    stroke: var(--cinder-accent);
+  .cinder-line-chart__focus-target:focus-visible:not([data-cinder-focus-ring-active='true']) {
+    fill: transparent;
+    stroke: var(--cinder-ring-color);
+    stroke-width: var(--cinder-ring-width);
+    vector-effect: non-scaling-stroke;
+    filter: none;
+  }
+
+  .cinder-line-chart__focus-ring-layer {
+    pointer-events: none;
+  }
+
+  .cinder-line-chart__focus-ring,
+  .cinder-line-chart__focus-ring-halo,
+  .cinder-line-chart__focus-ring-connector,
+  .cinder-line-chart__focus-ring-dot {
+    fill: none;
+    pointer-events: none;
+    vector-effect: non-scaling-stroke;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  .cinder-line-chart__focus-ring {
+    stroke: var(--cinder-ring-color);
     stroke-width: var(--cinder-ring-width);
-    filter: drop-shadow(0 0 var(--cinder-ring-width) var(--cinder-ring-color));
+    filter: none;
+  }
+
+  .cinder-line-chart__focus-ring-halo {
+    stroke: var(--cinder-ring-offset-color);
+    stroke-width: calc(
+      var(--cinder-ring-width) + var(--cinder-ring-offset) + var(--cinder-ring-offset)
+    );
+    filter: none;
+  }
+
+  @media (forced-colors: active) {
+    .cinder-line-chart__focus-ring-halo {
+      display: none;
+    }
+
+    .cinder-line-chart__focus-ring,
+    .cinder-line-chart__focus-ring-connector,
+    .cinder-line-chart__focus-ring-dot {
+      fill: none;
+      stroke: ButtonText;
+      stroke-width: var(--cinder-ring-width);
+      filter: none;
+    }
+
+    .cinder-line-chart__focus-target:focus-visible:not([data-cinder-focus-ring-active='true']) {
+      fill: transparent;
+      stroke: ButtonText;
+      stroke-width: var(--cinder-ring-width);
+      vector-effect: non-scaling-stroke;
+      filter: none;
+    }
   }
 
   .cinder-line-chart__tick-label {

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

@@ -24,7 +24,12 @@
     dataTableClass,
     formatNumericValue,
     legendVisible,
+    type ChartTarget,
   } from '../../_internal/chart/chart-utilities.ts';
+  import {
+    DEFAULT_CHART_FOCUS_RING_STROKE_PADDING,
+    createPointFocusRingGeometry,
+  } from '../../_internal/chart/chart-focus-ring.ts';
   import { ChartInteraction } from '../../_internal/chart/chart-interaction.svelte.ts';
   import { classNames } from '../../utilities/class-names.ts';
   import type { LineChartProps } from './line-chart.types.ts';
@@ -84,6 +89,28 @@
       ? `${rootId}-table-guidance`
       : undefined,
   );
+  const focusedTarget = $derived.by(() => {
+    const currentTarget = interaction.focusedTarget;
+    if (!currentTarget) return undefined;
+    return model.targets.find((target) => target.id === currentTarget.id);
+  });
+  let keyboardFocusModality = $state(false);
+  let focusVisibleTargetId = $state<string>();
+  const focusRingTarget = $derived(
+    keyboardFocusModality && focusedTarget && focusVisibleTargetId === focusedTarget.id
+      ? focusedTarget
+      : undefined,
+  );
+  const pointFocusRing = $derived(
+    focusRingTarget
+      ? createPointFocusRingGeometry({
+          target: focusRingTarget,
+          plotWidth: model.geometry.plotWidth,
+          plotHeight: model.geometry.plotHeight,
+          strokePadding: DEFAULT_CHART_FOCUS_RING_STROKE_PADDING,
+        })
+      : null,
+  );
 
   $effect(() => {
     assertValidNonNegativeInteger(
@@ -97,8 +124,44 @@
   $effect(() => {
     interaction.clearStaleTargets(loading, model.empty, model.targets);
   });
+
+  function rememberKeyboardFocusModality(event: KeyboardEvent): void {
+    if (
+      event.key === 'Tab' ||
+      event.key === 'Home' ||
+      event.key === 'End' ||
+      event.key.startsWith('Arrow')
+    ) {
+      keyboardFocusModality = true;
+    }
+  }
+
+  function clearKeyboardFocusModality(): void {
+    keyboardFocusModality = false;
+    focusVisibleTargetId = undefined;
+  }
+
+  function handleTargetFocus(target: ChartTarget): void {
+    interaction.focusedTarget = target;
+    focusVisibleTargetId = keyboardFocusModality ? target.id : undefined;
+  }
+
+  function handleTargetBlur(): void {
+    interaction.focusedTarget = undefined;
+    focusVisibleTargetId = undefined;
+  }
+
+  function handleTargetKeydown(event: KeyboardEvent): void {
+    rememberKeyboardFocusModality(event);
+    interaction.activateByKeyboard(event, rootElement!, model.targets, keyboardEnabled);
+  }
 </script>
 
+<svelte:window
+  onkeydown={rememberKeyboardFocusModality}
+  onpointerdown={clearKeyboardFocusModality}
+/>
+
 <figure
   {...rest}
   bind:this={rootElement}
@@ -148,7 +211,7 @@
         <title id="{rootId}-svg-title">{label}</title>
       {/if}
       <g transform={`translate(${model.geometry.marginLeft}, ${model.geometry.marginTop})`}>
-        {#each model.yTicks as tick, index}
+        {#each model.yTicks as tick, index (tick)}
           {@const tickY =
             model.geometry.plotHeight -
             ((tick - model.yDomain[0]) / (model.yDomain[1] - model.yDomain[0])) *
@@ -233,23 +296,78 @@
                 tabindex="0"
                 role="button"
                 data-cinder-target-id={target.id}
+                data-cinder-series-id={target.seriesId}
+                data-cinder-focus-ring-active={pointFocusRing && focusRingTarget?.id === target.id
+                  ? 'true'
+                  : undefined}
                 aria-label={`${target.seriesLabel}, ${target.xLabel}, ${target.valueLabel}`}
                 aria-describedby={interaction.activeTarget?.id === target.id
                   ? `${rootId}-tooltip`
                   : undefined}
-                onfocus={() => (interaction.focusedTarget = target)}
-                onblur={() => (interaction.focusedTarget = undefined)}
-                onkeydown={(event) =>
-                  interaction.activateByKeyboard(
-                    event,
-                    rootElement!,
-                    model.targets,
-                    keyboardEnabled,
-                  )}
+                onfocus={() => handleTargetFocus(target)}
+                onblur={handleTargetBlur}
+                onkeydown={handleTargetKeydown}
               />
             {/each}
           {/if}
         {/if}
+        {#if pointFocusRing}
+          <g class="cinder-line-chart__focus-ring-layer" aria-hidden="true">
+            {#if pointFocusRing.kind === 'point'}
+              <circle
+                class="cinder-line-chart__focus-ring-halo"
+                cx={pointFocusRing.cx}
+                cy={pointFocusRing.cy}
+                r={pointFocusRing.radius}
+              />
+              <circle
+                class="cinder-line-chart__focus-ring"
+                cx={pointFocusRing.cx}
+                cy={pointFocusRing.cy}
+                r={pointFocusRing.radius}
+              />
+              {#if pointFocusRing.connector && pointFocusRing.dot}
+                <path
+                  class="cinder-line-chart__focus-ring-connector cinder-line-chart__focus-ring-halo"
+                  d={`M ${pointFocusRing.connector.x1} ${pointFocusRing.connector.y1} L ${pointFocusRing.connector.x2} ${pointFocusRing.connector.y2}`}
+                />
+                <path
+                  class="cinder-line-chart__focus-ring-connector cinder-line-chart__focus-ring"
+                  d={`M ${pointFocusRing.connector.x1} ${pointFocusRing.connector.y1} L ${pointFocusRing.connector.x2} ${pointFocusRing.connector.y2}`}
+                />
+                <circle
+                  class="cinder-line-chart__focus-ring-dot cinder-line-chart__focus-ring-halo"
+                  cx={pointFocusRing.dot.cx}
+                  cy={pointFocusRing.dot.cy}
+                  r={pointFocusRing.dot.radius}
+                />
+                <circle
+                  class="cinder-line-chart__focus-ring-dot cinder-line-chart__focus-ring"
+                  cx={pointFocusRing.dot.cx}
+                  cy={pointFocusRing.dot.cy}
+                  r={pointFocusRing.dot.radius}
+                />
+              {/if}
+            {:else}
+              <rect
+                class="cinder-line-chart__focus-ring-halo"
+                x={pointFocusRing.x}
+                y={pointFocusRing.y}
+                width={pointFocusRing.width}
+                height={pointFocusRing.height}
+                rx={pointFocusRing.radius}
+              />
+              <rect
+                class="cinder-line-chart__focus-ring"
+                x={pointFocusRing.x}
+                y={pointFocusRing.y}
+                width={pointFocusRing.width}
+                height={pointFocusRing.height}
+                rx={pointFocusRing.radius}
+              />
+            {/if}
+          </g>
+        {/if}
       </g>
     </svg>
     {#if interaction.activeTarget}

package/src/components/link/README.md

@@ -0,0 +1,55 @@
+# Link
+
+Inline text link with consistent focus ring and underline behavior.
+
+## Usage
+
+```svelte
+<script lang="ts">
+  import { Link } from '@lostgradient/cinder/link';
+</script>
+```
+
+## Guidance
+
+### Use When
+
+- Embedding a navigable link inside body text or prose content.
+
+### Avoid When
+
+- Navigating between pages in a sidebar or nav bar — use NavigationItem.
+
+## Props
+
+<!-- generated:props:start -->
+
+| Prop        | Type                                | Required | Default     | Description                                                                                                                                                                                                                                                                                                                       |
+| ----------- | ----------------------------------- | -------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `class`     | `string`                            | no       | —           | Additional class names merged with `.cinder-link`.                                                                                                                                                                                                                                                                                |
+| `color`     | `"primary"` \| `"inherit"`          | no       | `"primary"` | Controls the link color. - `'primary'` — uses the accent/primary color token. - `'inherit'` — inherits the surrounding text color.                                                                                                                                                                                                |
+| `disabled`  | `boolean`                           | no       | `false`     | When true, renders a `<span aria-disabled="true">` instead of `<a>`. The href is not emitted and pointer-events are disabled. Use to show a link that is contextually unavailable without removing it from the visual layout.                                                                                                     |
+| `external`  | `boolean`                           | no       | `false`     | When true, automatically adds `target="_blank"` and merges `rel="noopener noreferrer"` with any consumer-supplied `rel`. Consumer-supplied `target` is preserved if provided.                                                                                                                                                     |
+| `href`      | `string`                            | no       | —           | The URL the link points to. Optional ONLY because a `disabled` link renders a `<span>` with no href. For any enabled (non-disabled) link you must provide it — an `<a>` without `href` is not keyboard-focusable and is not exposed as a link to assistive technology, so an enabled Link without `href` is a bug, not a feature. |
+| `rel`       | `string` \| `null`                  | no       | —           | Forwarded to the rendered `<a>`. `"noopener noreferrer"` is merged in whenever the link opens in a new tab — `external` is true OR the resolved target is `"_blank"` (case-insensitive) — and the whole value is de-duplicated case-insensitively.                                                                                |
+| `underline` | `"always"` \| `"hover"` \| `"none"` | no       | `"hover"`   | Controls text-decoration behavior. - `'always'` — underline is always visible. - `'hover'` — underline appears on hover and focus (default). - `'none'` — underline is never shown.                                                                                                                                               |
+| `children`  | `(opaque)`                          | no       | —           | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature.                                                                                                                                                                                                        |
+| `target`    | `(opaque)`                          | no       | —           | A prop whose shape is not captured by the JSON schema; see the component types for the exact signature.                                                                                                                                                                                                                           |
+
+<!-- generated:props:end -->
+
+## CSS Variables
+
+<!-- generated:variables:start -->
+
+This component does not declare any local CSS variables.
+
+<!-- generated:variables:end -->
+
+## Subcomponents
+
+<!-- generated:subcomponents:start -->
+
+None.
+
+<!-- generated:subcomponents:end -->

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

@@ -0,0 +1,70 @@
+# MarkdownEditor
+
+Rich Markdown editing surface bundling a Milkdown-powered ProseMirror editor, toolbar, and mark or block introspection helpers.
+
+## Usage
+
+```svelte
+<script lang="ts">
+  import { MarkdownEditor } from '@lostgradient/cinder/markdown-editor';
+</script>
+```
+
+## Guidance
+
+### Use When
+
+- Composing or editing Markdown documents and wanting the bundled toolbar, link-aware selection, and source or WYSIWYG mode toggle.
+- Building writing surfaces that need an editor handle for programmatic mark or block manipulation as part of the heavyweight suite.
+
+### Avoid When
+
+- Authoring a simple plain-text note — a textarea is dramatically lighter than the Milkdown bundle.
+- The surface needs inline review threads on top of the editor — use review-editor for that composition.
+
+## Props
+
+<!-- generated:props:start -->
+
+| Prop                    | Type                      | Required | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| ----------------------- | ------------------------- | -------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `class`                 | `string`                  | no       | —       | Additional CSS classes                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| `id`                    | `string`                  | yes      | —       | Unique identifier for accessibility (required)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| `label`                 | `string`                  | no       | —       | Accessible label for the editor (required for screen readers)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| `mode`                  | `"wysiwyg"` \| `"source"` | no       | —       | Editor display mode (two-way bindable)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| `modeLabel`             | `string`                  | no       | —       | Accessible label for the mode toggle (visually hidden)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| `placeholder`           | `string`                  | no       | —       | Placeholder text when empty                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| `readonly`              | `boolean`                 | no       | —       | Read-only mode                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| `showModeToggle`        | `boolean`                 | no       | —       | Show an inline toggle for switching between WYSIWYG and raw Markdown                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| `showToolbar`           | `boolean`                 | no       | —       | Show formatting toolbar (DEP-37)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| `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       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature.                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| `onCommentShortcut`     | `(opaque)`                | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature.                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| `onmodechange`          | `(opaque)`                | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature.                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| `onReady`               | `(opaque)`                | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature.                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| `onSelectionChange`     | `(opaque)`                | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature.                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| `placeholderCompletion` | `(opaque)`                | no       | —       | A prop whose shape is not captured by the JSON schema; see the component types for the exact signature.                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| `placeholderDecoration` | `(opaque)`                | no       | —       | A prop whose shape is not captured by the JSON schema; see the component types for the exact signature.                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| `plugins`               | `(opaque)`                | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature.                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| `toolbar`               | `(opaque)`                | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature.                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| `toolbarActions`        | `(opaque)`                | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature.                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| `toolbarLeading`        | `(opaque)`                | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature.                                                                                                                                                                                                                                                                                                                                                                                                                   |
+
+<!-- generated:props:end -->
+
+## CSS Variables
+
+<!-- generated:variables:start -->
+
+This component does not declare any local CSS variables.
+
+<!-- generated:variables:end -->
+
+## Subcomponents
+
+<!-- generated:subcomponents:start -->
+
+None.
+
+<!-- generated:subcomponents:end -->

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

@@ -94,10 +94,15 @@
   }
 
   .toolbar-button:focus-visible {
-    outline: 2px solid transparent;
-    box-shadow:
-      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);
+    outline: var(--cinder-ring-width) solid transparent;
+    box-shadow: var(--_cinder-focus-ring-shadow);
+  }
+
+  @media (forced-colors: active) {
+    .toolbar-button:focus-visible {
+      outline: var(--cinder-ring-width) solid ButtonText;
+      outline-offset: 3px;
+    }
   }
 
   .toolbar-button:disabled {

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

@@ -104,10 +104,15 @@
   }
 
   :global(.toolbar-dropdown-trigger:focus-visible) {
-    outline: 2px solid transparent;
-    box-shadow:
-      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);
+    outline: var(--cinder-ring-width) solid transparent;
+    box-shadow: var(--_cinder-focus-ring-shadow);
+  }
+
+  @media (forced-colors: active) {
+    :global(.toolbar-dropdown-trigger:focus-visible) {
+      outline: var(--cinder-ring-width) solid ButtonText;
+      outline-offset: 3px;
+    }
   }
 
   :global(.toolbar-dropdown-trigger:disabled) {