@lostgradient/cinder 0.4.0 → 0.4.1

package/src/components/dropdown-item/README.md

@@ -14,18 +14,18 @@ snippet. The flat `@lostgradient/cinder/dropdown-item` subpath remains exported
 
 <!-- generated:props:start -->
 
-| Prop            | Type                                  | Required | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
-| --------------- | ------------------------------------- | -------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `checked`       | `boolean`                             | no       | —       | Checked state for `itemRole="menuitemradio"`. Omitted for normal menu items.                                                                                                                                                                                                                                                                                                                                                                                                                              |
-| `class`         | `string`                              | no       | —       | Additional class names merged with the component's root class.                                                                                                                                                                                                                                                                                                                                                                                                                                            |
-| `closeOnSelect` | `boolean`                             | no       | —       | When true, the parent dropdown closes after this item is activated. Default `true`.                                                                                                                                                                                                                                                                                                                                                                                                                       |
-| `disabled`      | `boolean`                             | no       | —       | When true the item is inert: click is blocked and aria-disabled is set.                                                                                                                                                                                                                                                                                                                                                                                                                                   |
-| `href`          | `string`                              | no       | —       | Destination URL. Any defined value — including an empty string — selects the anchor branch and renders an `<a>`. Omit `href` entirely to render a `<button>`.                                                                                                                                                                                                                                                                                                                                             |
-| `inset`         | `boolean`                             | no       | —       | When true, adds leading padding to align the item with items that have a leading icon or indicator. Default `false`.                                                                                                                                                                                                                                                                                                                                                                                      |
-| `itemRole`      | `"menuitem"` \| `"menuitemradio"`     | no       | —       | ARIA role for the row. Use `menuitemradio` for mutually exclusive menu selections.                                                                                                                                                                                                                                                                                                                                                                                                                        |
-| `type`          | `"button"` \| `"submit"` \| `"reset"` | no       | —       | Button type forwarded to the `<button>` element. Defaults to `"button"`. NOTE: `type="submit"` only submits a surrounding `<form>` when the menu stays inside that form's DOM subtree. DropdownMenu portals its panel to `document.body` on the non-popover fallback path, so a submit item is then NOT a form descendant and native submission is skipped. To submit a form from a portaled menu, set `form="<form-id>"` to associate the button with the form by id, or handle submission in `onclick`. |
-| `variant`       | `"default"` \| `"danger"`             | no       | —       | Visual style of the item. Use `danger` to signal a destructive action. Default `default`.                                                                                                                                                                                                                                                                                                                                                                                                                 |
-| `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.                                                                                                                                                                                                                                                                                                                                                                                |
+| Prop            | Type                                                      | Required | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| --------------- | --------------------------------------------------------- | -------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `checked`       | `boolean`                                                 | no       | —       | Checked state for checkbox and radio menu items. Omitted for normal menu items.                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| `class`         | `string`                                                  | no       | —       | Additional class names merged with the component's root class.                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| `closeOnSelect` | `boolean`                                                 | no       | —       | When true, the parent dropdown closes after this item is activated. Default `true`.                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| `disabled`      | `boolean`                                                 | no       | —       | When true the item is inert: click is blocked and aria-disabled is set.                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| `href`          | `string`                                                  | no       | —       | Destination URL. Any defined value — including an empty string — selects the anchor branch and renders an `<a>`. Omit `href` entirely to render a `<button>`.                                                                                                                                                                                                                                                                                                                                             |
+| `inset`         | `boolean`                                                 | no       | —       | When true, adds leading padding to align the item with items that have a leading icon or indicator. Default `false`.                                                                                                                                                                                                                                                                                                                                                                                      |
+| `itemRole`      | `"menuitem"` \| `"menuitemcheckbox"` \| `"menuitemradio"` | no       | —       | ARIA role for the row. Use `menuitemcheckbox` or `menuitemradio` for selectable menu items.                                                                                                                                                                                                                                                                                                                                                                                                               |
+| `type`          | `"button"` \| `"submit"` \| `"reset"`                     | no       | —       | Button type forwarded to the `<button>` element. Defaults to `"button"`. NOTE: `type="submit"` only submits a surrounding `<form>` when the menu stays inside that form's DOM subtree. DropdownMenu portals its panel to `document.body` on the non-popover fallback path, so a submit item is then NOT a form descendant and native submission is skipped. To submit a form from a portaled menu, set `form="<form-id>"` to associate the button with the form by id, or handle submission in `onclick`. |
+| `variant`       | `"default"` \| `"danger"`                                 | no       | —       | Visual style of the item. Use `danger` to signal a destructive action. Default `default`.                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| `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.                                                                                                                                                                                                                                                                                                                                                                                |
 
 <!-- generated:props:end -->
 

package/src/components/dropdown-item/dropdown-item.svelte

@@ -117,7 +117,9 @@
     rest as Omit<HTMLButtonAttributes, 'class' | 'type' | 'disabled' | 'onclick'>,
   );
   const buttonType = $derived((rest as { type?: HTMLButtonAttributes['type'] }).type ?? 'button');
-  const ariaChecked = $derived(itemRole === 'menuitemradio' ? checked : undefined);
+  const ariaChecked = $derived(
+    itemRole === 'menuitemcheckbox' || itemRole === 'menuitemradio' ? checked : undefined,
+  );
 </script>
 
 <!--

package/src/components/dropdown-item/dropdown-item.types.ts

@@ -2,7 +2,7 @@ import type { Snippet } from 'svelte';
 import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
 
 export type DropdownItemVariant = 'default' | 'danger';
-export type DropdownItemRole = 'menuitem' | 'menuitemradio';
+export type DropdownItemRole = 'menuitem' | 'menuitemcheckbox' | 'menuitemradio';
 
 // The shared base carries the common HTML attribute surface — crucially the
 // event handlers (onclick/onkeydown/onfocus/…) — typed against the generic
@@ -13,9 +13,9 @@ export type DropdownItemRole = 'menuitem' | 'menuitemradio';
 type DropdownItemBase = Omit<HTMLAttributes<HTMLElement>, 'class'> & {
   /** Visual style of the item. Use `danger` to signal a destructive action. Default `default`. */
   variant?: DropdownItemVariant;
-  /** ARIA role for the row. Use `menuitemradio` for mutually exclusive menu selections. */
+  /** ARIA role for the row. Use `menuitemcheckbox` or `menuitemradio` for selectable menu items. */
   itemRole?: DropdownItemRole;
-  /** Checked state for `itemRole="menuitemradio"`. Omitted for normal menu items. */
+  /** Checked state for checkbox and radio menu items. Omitted for normal menu items. */
   checked?: boolean;
   /** When true, adds leading padding to align the item with items that have a leading icon or indicator. Default `false`. */
   inset?: boolean;

package/src/components/dropdown-menu/dropdown-menu.svelte

@@ -23,6 +23,11 @@
   import { getLocaleContext } from '../../_internal/locale-context.ts';
   import { observeTextDirection, resolveTextDirection } from '../../_internal/text-direction.ts';
   import { classNames } from '../../utilities/class-names.ts';
+  import {
+    findTypeaheadMatch,
+    isTypeaheadKey,
+    TypeaheadBuffer,
+  } from '../../utilities/typeahead.ts';
   import {
     getDropdownContext,
     getDropdownRegister,
@@ -52,6 +57,7 @@
 
   let menuElement = $state<HTMLDivElement | null>(null);
   let focusedFallbackOpen = false;
+  const typeaheadBuffer = new TypeaheadBuffer();
   const anchoredFallback = createAnchoredOverlay({
     open: () => context.isOpen && !context.supportsPopover && Boolean(fallbackAnchorElement),
     anchor: () => fallbackAnchorElement,
@@ -80,6 +86,14 @@
     return () => registerMenu(null);
   });
 
+  $effect(() => {
+    return () => typeaheadBuffer.reset();
+  });
+
+  $effect(() => {
+    if (!context.isOpen) typeaheadBuffer.reset();
+  });
+
   $effect(() => {
     if (direction && direction !== 'auto') return;
     return observeTextDirection(context.anchorElement, () => {
@@ -103,7 +117,11 @@
 
     return Array.from(
       menuElement.querySelectorAll<HTMLElement>(
-        '[role="menuitem"]:not([data-disabled]), [role="menuitemradio"]:not([data-disabled])',
+        [
+          '[role="menuitem"]:not([data-disabled])',
+          '[role="menuitemcheckbox"]:not([data-disabled])',
+          '[role="menuitemradio"]:not([data-disabled])',
+        ].join(', '),
       ),
     ).filter((item) => item.closest('[role="menu"]') === menuElement);
   }
@@ -152,6 +170,19 @@
       event.preventDefault();
       event.stopPropagation();
       focusMenuItem(itemsArray.length - 1);
+    } else if (isTypeaheadKey(event)) {
+      event.preventDefault();
+      event.stopPropagation();
+      const match = findTypeaheadMatch(
+        itemsArray.map((item, index) => ({
+          value: index,
+          label: item.textContent?.trim() ?? '',
+          disabled: item.hasAttribute('data-disabled'),
+        })),
+        typeaheadBuffer.push(event.key),
+        currentIndex,
+      );
+      if (match !== undefined) focusMenuItem(match);
     }
   }
 

package/src/components/experimental/json-viewer/index.ts

@@ -7,11 +7,13 @@
 // next major. Generated/managed by scripts/generate-exports.ts.
 
 import { devWarn } from '../../../utilities/dev-warn.ts';
+import JsonViewer from '../../json-viewer/index.ts';
 
 devWarn(
   "[cinder] '@lostgradient/cinder/experimental/json-viewer' is deprecated and will be removed in the next major. " +
     "Import from '@lostgradient/cinder/json-viewer' instead.",
 );
 
-export { default, JsonViewer } from '../../json-viewer/index.ts';
+export default JsonViewer;
 export type { JsonViewerProps } from '../../json-viewer/index.ts';
+export { JsonViewer };

package/src/components/experimental/message/index.ts

@@ -7,11 +7,13 @@
 // Generated/managed by scripts/generate-exports.ts.
 
 import { devWarn } from '../../../utilities/dev-warn.ts';
+import Message from '../../message/index.ts';
 
 devWarn(
   "[cinder] '@lostgradient/cinder/experimental/message' is deprecated and will be removed in the next major. " +
     "Import from '@lostgradient/cinder/message' instead.",
 );
 
-export { default, Message } from '../../message/index.ts';
+export default Message;
 export type { MessageProps, MessageRole } from '../../message/index.ts';
+export { Message };

package/src/components/hover-card/hover-card.svelte

@@ -21,6 +21,7 @@
   import { devWarn } from '../../utilities/dev-warn.ts';
   import type { Placement } from '@floating-ui/dom';
   import { createAnchoredOverlay } from '../../_internal/anchored-overlay.svelte.ts';
+  import { pushEscapeHandler } from '../../_internal/overlay.ts';
   import { classNames } from '../../utilities/class-names.ts';
   import { createPortalAttachment } from '../portal/index.ts';
 
@@ -180,11 +181,10 @@
     if (!focusInsideCard) scheduleClose();
   }
 
-  function handleKeydown(event: KeyboardEvent) {
-    if (event.key === 'Escape' && open) {
-      event.preventDefault();
-      setOpen(false);
-    }
+  function handleEscape(event: KeyboardEvent | undefined = undefined) {
+    if (!open) return;
+    event?.preventDefault();
+    setOpen(false);
   }
 
   onDestroy(clearTimers);
@@ -195,8 +195,7 @@
 
   $effect(() => {
     if (!open) return;
-    document.addEventListener('keydown', handleKeydown);
-    return () => document.removeEventListener('keydown', handleKeydown);
+    return pushEscapeHandler(handleEscape);
   });
 
   $effect(() => {

package/src/components/json-schema-editor/diff-view.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-  import type { EditorState } from './json-schema-editor-state.svelte.ts';
+  import type { EditorState } from './json-schema-editor-state.types.ts';
 
   export type DiffViewProps = {
     state: EditorState;

package/src/components/json-schema-editor/form-view.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-  import type { EditorState } from './json-schema-editor-state.svelte.ts';
+  import type { EditorState } from './json-schema-editor-state.types.ts';
 
   export type FormViewProps = {
     state: EditorState;

package/src/components/json-schema-editor/json-schema-editor-state.svelte.ts

@@ -13,16 +13,12 @@
  * schema (meta-schema) and compile (debounced).
  */
 
-import {
-  stableSerialise,
-  useHistory,
-  type UseHistory,
-} from '../../utilities/use-history.svelte.ts';
+import { stableSerialise, useHistory } from '../../utilities/use-history.svelte.ts';
+import type { UseHistory } from '../../utilities/use-history.types.ts';
 
+import type { CreateEditorStateOptions } from './json-schema-editor-state.types.ts';
 import type {
   JsonSchemaDraft,
-  JsonSchemaEditorChangeEvent,
-  JsonSchemaEditorRevertEvent,
   JsonSchemaEditorView,
   JsonSchemaKnownDraft,
   JsonSchemaValidationError,
@@ -51,17 +47,6 @@ const COMPILE_DEBOUNCE_MS = 500;
  */
 const COMPILE_DEFER_BYTES = 100_000;
 
-export interface CreateEditorStateOptions {
-  schema: JsonSchemaValue | string;
-  original?: JsonSchemaValue | string;
-  draftOverride?: JsonSchemaKnownDraft;
-  readonly?: boolean;
-  maxHistory?: number;
-  onchange?: (event: JsonSchemaEditorChangeEvent) => void;
-  onrevert?: (event: JsonSchemaEditorRevertEvent) => void;
-  onvalidate?: (result: JsonSchemaValidationResult) => void;
-}
-
 function serialise(value: JsonSchemaValue): string {
   return JSON.stringify(value, null, PRETTY_INDENT);
 }
@@ -508,5 +493,3 @@ export function createEditorState(options: CreateEditorStateOptions) {
     },
   };
 }
-
-export type EditorState = ReturnType<typeof createEditorState>;

package/src/components/json-schema-editor/json-schema-editor-state.types.ts

@@ -0,0 +1,21 @@
+import type { createEditorState } from './json-schema-editor-state.svelte.ts';
+import type {
+  JsonSchemaEditorChangeEvent,
+  JsonSchemaEditorRevertEvent,
+  JsonSchemaKnownDraft,
+  JsonSchemaValidationResult,
+  JsonSchemaValue,
+} from './json-schema-editor-types.ts';
+
+export interface CreateEditorStateOptions {
+  schema: JsonSchemaValue | string;
+  original?: JsonSchemaValue | string;
+  draftOverride?: JsonSchemaKnownDraft;
+  readonly?: boolean;
+  maxHistory?: number;
+  onchange?: (event: JsonSchemaEditorChangeEvent) => void;
+  onrevert?: (event: JsonSchemaEditorRevertEvent) => void;
+  onvalidate?: (result: JsonSchemaValidationResult) => void;
+}
+
+export type EditorState = ReturnType<typeof createEditorState>;

package/src/components/json-schema-editor/json-schema-toolbar.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-  import type { EditorState } from './json-schema-editor-state.svelte.ts';
+  import type { EditorState } from './json-schema-editor-state.types.ts';
 
   export type JsonSchemaToolbarProps = {
     state: EditorState;

package/src/components/json-schema-editor/json-view.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-  import type { EditorState } from './json-schema-editor-state.svelte.ts';
+  import type { EditorState } from './json-schema-editor-state.types.ts';
 
   export type JsonViewProps = {
     state: EditorState;

package/src/components/menu-bar/index.ts

@@ -1,5 +1,7 @@
 import './menu-bar.css';
-export { default as MenuBar, default } from './menu-bar.svelte';
+import MenuBar from './menu-bar.svelte';
+
+export default MenuBar;
 export type {
   MenuBarEntry,
   MenuBarItem,
@@ -11,3 +13,4 @@ export type {
   MenuBarSubmenu,
   MenuBarSubmenuEntry,
 } from './menu-bar.types.ts';
+export { MenuBar };