@rcarls/rc-webcomponents 0.2.0 → 0.3.0

package/README.md

@@ -1,8 +1,8 @@
 # `@rcarls/rc-webcomponents`
 
-Aggregate package for the `@rcarls` web component collection. Import this package
-when an application wants one dependency that re-exports the component classes
-and can define every custom element at once.
+Aggregate package that re-exports and defines the `rc-webcomponents` collection.
+
+Docs: [https://richardcarls.github.io/rc-webcomponents/](https://richardcarls.github.io/rc-webcomponents/).
 
 ## Installation
 
@@ -31,6 +31,7 @@ import {
   RCCombobox,
   RCDialog,
   RCListbox,
+  RcMarkdownEditor,
   RCMenu,
   RCMenuButton,
   RCMenubar,
@@ -38,24 +39,43 @@ import {
   RCSplitter,
   RCTextarea,
   RCToolbar,
+  RCVirtualCanvas,
 } from '@rcarls/rc-webcomponents';
 ```
 
+## Base Theme Tokens
+
+The optional base theme defines shared semantic tokens with CSS System Color
+fallbacks:
+
+```css
+@import '@rcarls/rc-webcomponents/themes/base.css';
+```
+
 ## Included Packages
 
 | Package | Purpose |
 | --- | --- |
-| `rc-app-bar` | Headless app bar with exact-center composition and scroll behaviors. |
-| `rc-combobox` | Editable ARIA combobox. |
-| `rc-dialog` | Native `<dialog>` enhancement wrapper. |
-| `rc-listbox` | Light-DOM ARIA listbox. |
-| `rc-menu` | ARIA menu popup. |
-| `rc-menu-button` | Trigger button for ARIA menus. |
-| `rc-menubar` | ARIA menubar controller. |
-| `rc-select` | Select-only ARIA combobox. |
-| `rc-splitter` | Resizable splitter panes. |
-| `rc-textarea` | Enhanced plain-text editor. |
-| `rc-toolbar` | ARIA toolbar with roving tabindex. |
+| `rc-app-bar` | App bar modeled after Material 3 Top app bar. |
+| `rc-accordion` | Accordion coordinator for native `<details>` panels. |
+| `rc-combobox` | Editable combobox with filtering and optional allow-create behavior. |
+| `rc-dialog` | Draggable, resizable wrapper for a native `<dialog>`. |
+| `rc-disclosure` | Disclosure wrapper for native `<details>`/`<summary>`. |
+| `rc-fab` | Sticky floating action button modeled after Material 3 FAB. |
+| `rc-listbox` | Listbox that keeps option DOM in light DOM. |
+| `rc-markdown-editor` | Rich/source Markdown editor backed by `rc-textarea`. |
+| `rc-menu` | Menu popup for command surfaces. |
+| `rc-menu-button` | Trigger button that opens an `rc-menu` popup. |
+| `rc-menubar` | Menubar coordinator for `rc-menu-button` children. |
+| `rc-range-slider` | Two-thumb range slider backed by native range inputs. |
+| `rc-search-bar` | Search field wrapper for native `<input type="search">`. |
+| `rc-select` | Select-only combobox backed by a native `<select>`. |
+| `rc-slider` | Single-thumb slider backed by native `<input type="range">`. |
+| `rc-splitter` | Resizable pane splitter with pointer and keyboard controls. |
+| `rc-textarea` | Textarea wrapper with line decorations and plugin hooks. |
+| `rc-toolbar` | Toolbar that groups controls into one tab stop. |
+| `rc-transfer-list` | Transfer list enhancing native `<select multiple>`. |
+| `rc-virtual-canvas` | Scrollable virtual canvas for large coordinate-space content. |
 
 ## Notes
 

package/dist/rc-webcomponents-define.js

@@ -17,6 +17,7 @@ import "@rcarls/rc-markdown-editor/define";
 import "@rcarls/rc-textarea/define";
 import "@rcarls/rc-toolbar/define";
 import "@rcarls/rc-transfer-list/define";
+import "@rcarls/rc-virtual-canvas/define";
 export * from "@rcarls/rc-accordion";
 export * from "@rcarls/rc-app-bar";
 export * from "@rcarls/rc-combobox";
@@ -36,4 +37,5 @@ export * from "@rcarls/rc-splitter";
 export * from "@rcarls/rc-textarea";
 export * from "@rcarls/rc-toolbar";
 export * from "@rcarls/rc-transfer-list";
+export * from "@rcarls/rc-virtual-canvas";
 //# sourceMappingURL=rc-webcomponents-define.js.map

package/dist/rc-webcomponents-define.js.map

@@ -1 +1 @@
-{"version":3,"file":"rc-webcomponents-define.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"rc-webcomponents-define.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/rc-webcomponents.js

@@ -17,4 +17,5 @@ export * from "@rcarls/rc-splitter";
 export * from "@rcarls/rc-textarea";
 export * from "@rcarls/rc-toolbar";
 export * from "@rcarls/rc-transfer-list";
+export * from "@rcarls/rc-virtual-canvas";
 //# sourceMappingURL=rc-webcomponents.js.map

package/dist/rc-webcomponents.js.map

@@ -1 +1 @@
-{"version":3,"file":"rc-webcomponents.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"rc-webcomponents.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}

package/dist/types/index.d.ts

@@ -17,3 +17,4 @@ export * from '@rcarls/rc-splitter';
 export * from '@rcarls/rc-textarea';
 export * from '@rcarls/rc-toolbar';
 export * from '@rcarls/rc-transfer-list';
+export * from '@rcarls/rc-virtual-canvas';

package/package.json

@@ -3,19 +3,21 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.2.0",
-  "description": "Aggregate package — all @rcarls WAI-ARIA compliant headless web components",
+  "version": "0.3.0",
+  "description": "Aggregate package that re-exports and defines the rc-webcomponents collection.",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/richardcarls/rc-webcomponents.git",
     "directory": "packages/rc-webcomponents"
   },
-  "homepage": "https://github.com/richardcarls/rc-webcomponents#readme",
+  "homepage": "https://richardcarls.github.io/rc-webcomponents/",
   "license": "MIT",
   "type": "module",
   "files": [
     "dist",
-    "src/solid.d.ts"
+    "src/solid.d.ts",
+    "src/react.d.ts",
+    "themes"
   ],
   "module": "./dist/rc-webcomponents.js",
   "exports": {
@@ -34,36 +36,40 @@
     "./solid": {
       "types": "./src/solid.d.ts"
     },
-    "./themes/base.css": "../../themes/base.css"
+    "./react": {
+      "types": "./src/react.d.ts"
+    },
+    "./themes/base.css": "./themes/base.css"
   },
   "types": "./dist/types/index.d.ts",
   "sideEffects": [
-    "./dist/rc-webcomponents-define.js"
+    "./dist/rc-webcomponents-define.js",
+    "./themes/*.css"
   ],
   "scripts": {
-    "build": "tsc && vite build",
-    "yalc:publish": "yalc publish --push"
+    "build": "tsc && vite build"
   },
   "dependencies": {
-    "@rcarls/rc-accordion": "workspace:^",
-    "@rcarls/rc-app-bar": "workspace:^",
-    "@rcarls/rc-combobox": "workspace:^",
-    "@rcarls/rc-dialog": "workspace:^",
-    "@rcarls/rc-disclosure": "workspace:^",
-    "@rcarls/rc-fab": "workspace:^",
-    "@rcarls/rc-listbox": "workspace:^",
-    "@rcarls/rc-markdown-editor": "workspace:^",
-    "@rcarls/rc-menu": "workspace:^",
-    "@rcarls/rc-menu-button": "workspace:^",
-    "@rcarls/rc-menubar": "workspace:^",
-    "@rcarls/rc-range-slider": "workspace:^",
-    "@rcarls/rc-search-bar": "workspace:^",
-    "@rcarls/rc-select": "workspace:^",
-    "@rcarls/rc-slider": "workspace:^",
-    "@rcarls/rc-splitter": "workspace:^",
-    "@rcarls/rc-textarea": "workspace:^",
-    "@rcarls/rc-toolbar": "workspace:^",
-    "@rcarls/rc-transfer-list": "workspace:^"
+    "@rcarls/rc-accordion": "workspace:*",
+    "@rcarls/rc-app-bar": "workspace:*",
+    "@rcarls/rc-combobox": "workspace:*",
+    "@rcarls/rc-dialog": "workspace:*",
+    "@rcarls/rc-disclosure": "workspace:*",
+    "@rcarls/rc-fab": "workspace:*",
+    "@rcarls/rc-listbox": "workspace:*",
+    "@rcarls/rc-markdown-editor": "workspace:*",
+    "@rcarls/rc-menu": "workspace:*",
+    "@rcarls/rc-menu-button": "workspace:*",
+    "@rcarls/rc-menubar": "workspace:*",
+    "@rcarls/rc-range-slider": "workspace:*",
+    "@rcarls/rc-search-bar": "workspace:*",
+    "@rcarls/rc-select": "workspace:*",
+    "@rcarls/rc-slider": "workspace:*",
+    "@rcarls/rc-splitter": "workspace:*",
+    "@rcarls/rc-textarea": "workspace:*",
+    "@rcarls/rc-toolbar": "workspace:*",
+    "@rcarls/rc-transfer-list": "workspace:*",
+    "@rcarls/rc-virtual-canvas": "workspace:*"
   },
   "peerDependencies": {
     "lit": "^3.0.0"

package/src/react.d.ts

@@ -0,0 +1,618 @@
+/**
+ * React JSX type augmentation for rc-webcomponents.
+ *
+ * Add a triple-slash reference once in your React project (e.g. vite-env.d.ts):
+ *
+ *   /// <reference types="@rcarls/rc-webcomponents/react" />
+ *
+ * Ref types use HTMLElement intersections — not LitElement — so TypeScript
+ * resolves correctly without requiring `lit` in your tsconfig paths.
+ *
+ * Import ref and event detail types directly for use with useRef and
+ * addEventListener:
+ *
+ *   import type { RCComboboxRef, RCComboboxCreateDetail } from '@rcarls/rc-webcomponents/react';
+ *
+ *   const ref = useRef<RCComboboxRef>(null);
+ *   el.addEventListener('rc-combobox-create', (e: CustomEvent<RCComboboxCreateDetail>) => { ... });
+ */
+
+import type { RCTextareaPlugin } from '@rcarls/rc-textarea';
+
+// ── Shared value types ───────────────────────────────────────────────────────
+
+export type RCSelectOption = {
+  kind?: 'option';
+  value: string;
+  label: string;
+  disabled?: boolean;
+  data?: unknown;
+};
+
+export type RCListboxActionOption<Action extends string = string> = {
+  kind: 'action';
+  action: Action;
+  value: string;
+  label: string;
+  disabled?: boolean;
+  data?: unknown;
+};
+
+export type RCListboxOption = RCSelectOption | RCListboxActionOption;
+
+export type RCSelectValue = string | string[];
+
+// ── Event detail types ───────────────────────────────────────────────────────
+
+export type RCDisclosureToggleDetail = {
+  open: boolean;
+};
+
+export type RCSelectChangeDetail = {
+  value: RCSelectValue;
+  selectedValues: string[];
+  selectedOptions: RCSelectOption[];
+};
+
+export type RCListboxSelectChangeDetail = RCSelectChangeDetail & {
+  reason: 'select';
+  selected: boolean;
+  optionValue: string;
+  option: RCSelectOption;
+};
+
+export type RCListboxActionChangeDetail<Action extends string = string> = RCSelectChangeDetail & {
+  reason: 'action';
+  selected: false;
+  optionValue: string;
+  option: RCListboxActionOption<Action>;
+  action: Action;
+};
+
+export type RCListboxChangeDetail =
+  | RCListboxSelectChangeDetail
+  | RCListboxActionChangeDetail;
+
+export type RCComboboxCreateDetail = {
+  text: string;
+};
+
+export type RCDialogToggleDetail = {
+  open: boolean;
+  returnValue: string;
+};
+
+export type RCDialogCloseDetail = {
+  returnValue: string;
+};
+
+export type RCMenuActivateDetail = {
+  item: HTMLElement;
+  value: string;
+  text: string;
+};
+
+export type RCMenuCloseDetail = {
+  reason: 'escape';
+};
+
+export type RCMenuButtonToggleDetail = {
+  open: boolean;
+};
+
+export type RCSliderChangeDetail = {
+  value: number;
+};
+
+export type RCRangeSliderChangeDetail = {
+  value: [number, number];
+};
+
+export type RCTransferListOption = {
+  value: string;
+  label: string;
+  disabled?: boolean;
+};
+
+export type RCTransferListChangeDetail = {
+  selected: RCTransferListOption[];
+};
+
+export type RCSplitterChangeDetail = {
+  value: number;
+  valueText: string;
+};
+
+export type RCMarkdownEditorFormats = {
+  bold?: boolean;
+  italic?: boolean;
+  underline?: boolean;
+  strikethrough?: boolean;
+  code?: boolean;
+  link?: boolean;
+  heading?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | null;
+  blockquote?: boolean;
+  bulletList?: boolean;
+  orderedList?: boolean;
+  codeBlock?: boolean;
+  codeLanguage?: string | null;
+};
+
+export type RCMarkdownEditorChangeDetail = {
+  value: string;
+};
+
+export type RCMarkdownEditorModeChangeDetail = {
+  mode: 'rich' | 'source';
+};
+
+export type RCVirtualCanvasViewRect = Readonly<{
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}>;
+
+export type RCVirtualCanvasRenderDetail = {
+  time: DOMHighResTimeStamp;
+  reason: 'animation-frame' | 'viewport-change' | 'manual';
+  viewRect: RCVirtualCanvasViewRect;
+  contentRect: RCVirtualCanvasViewRect;
+};
+
+export type RCVirtualCanvasPointerDetail = {
+  type: string;
+  clientX: number;
+  clientY: number;
+  contentX: number;
+  contentY: number;
+  viewRect: RCVirtualCanvasViewRect;
+  button: number;
+  buttons: number;
+  altKey: boolean;
+  ctrlKey: boolean;
+  shiftKey: boolean;
+  metaKey: boolean;
+  sourceEvent: PointerEvent | MouseEvent;
+};
+
+export type RCAppBarScrollDetail = {
+  scrolled: boolean;
+};
+
+export type RCSearchBarInputDetail = {
+  value: string;
+};
+
+export type RCTextareaChangeDetail = {
+  value: string;
+};
+
+export type RCTextareaSelectDetail = {
+  selectionStart: number;
+  selectionEnd: number;
+};
+
+// ── Ref types ────────────────────────────────────────────────────────────────
+
+/** Public API surface of `<rc-disclosure>`. */
+export type RCDisclosureRef = HTMLElement & {
+  open: boolean;
+  fragment: boolean;
+};
+
+/** Public API surface of `<rc-accordion>`. */
+export type RCAccordionRef = HTMLElement & {
+  multiple: boolean;
+};
+
+/** Public API surface of `<rc-listbox>`. */
+export type RCListboxRef = HTMLElement & {
+  multiple: boolean;
+  checkmark: boolean;
+  filterStrategy: 'prefix' | 'contains' | ((label: string, query: string) => boolean);
+  value: RCSelectValue;
+  defaultValue: RCSelectValue | undefined;
+  options: RCListboxOption[];
+  readonly allOptions: ReadonlyArray<RCListboxOption>;
+  readonly filteredOptions: ReadonlyArray<RCListboxOption>;
+  readonly selectedValues: string[];
+  readonly navigableItems: Element[];
+  toggleOption(value: string): void;
+  clearSelection(): void;
+  filterOptions(text: string): void;
+  clearFilter(): void;
+  setCreateOption(label: string | null): void;
+  setSelectedValues(values: string[]): void;
+  appendOption(opt: RCListboxOption): void;
+};
+
+/** Public API surface of `<rc-select>`. */
+export type RCSelectRef = HTMLElement & {
+  open: boolean;
+  multiple: boolean;
+  disabled: boolean;
+  placeholder: string;
+  display: 'auto' | 'chips' | 'compact';
+  value: RCSelectValue;
+  defaultValue: RCSelectValue | undefined;
+  options: RCSelectOption[] | undefined;
+  readonly selectedValues: string[];
+  openPopup(): void;
+  closePopup(returnFocus?: boolean): void;
+};
+
+/** Public API surface of `<rc-combobox>`. */
+export type RCComboboxRef = RCSelectRef & {
+  allowCreate: boolean;
+  filterStrategy: 'prefix' | 'contains' | ((label: string, query: string) => boolean);
+};
+
+/** Public API surface of `<rc-dialog>`. */
+export type RCDialogRef = HTMLElement & {
+  open: boolean | undefined;
+  defaultOpen: boolean;
+  movable: boolean;
+  moveHandle: string;
+  moveBounds: 'viewport' | 'parent';
+  moveStep: number;
+  resize: 'none' | 'both' | 'horizontal' | 'vertical';
+  resizeThreshold: number;
+  resizeStep: number;
+  closedBy: 'any' | 'closerequest' | 'none' | '';
+  lightDismiss: boolean;
+  readonly returnValue: string;
+  showModal(): void;
+  show(): void;
+  close(returnValue?: string): void;
+  requestClose(returnValue?: string): void;
+};
+
+/** Public API surface of `<rc-menu>`. */
+export type RCMenuRef = HTMLElement & {
+  label: string;
+};
+
+/** Public API surface of `<rc-menu-button>`. */
+export type RCMenuButtonPlacement =
+  | 'top'
+  | 'top-start'
+  | 'top-end'
+  | 'bottom'
+  | 'bottom-start'
+  | 'bottom-end'
+  | 'left'
+  | 'left-start'
+  | 'left-end'
+  | 'right'
+  | 'right-start'
+  | 'right-end';
+
+export type RCMenuButtonRef = HTMLElement & {
+  open: boolean | undefined;
+  defaultOpen: boolean;
+  orientation: 'horizontal' | 'vertical' | undefined;
+  placement: RCMenuButtonPlacement;
+};
+
+/** Public API surface of `<rc-menubar>`. */
+export type RCMenubarRef = HTMLElement & {
+  label: string;
+  orientation: 'horizontal' | 'vertical';
+};
+
+/** Public API surface of `<rc-toolbar>`. */
+export type RCToolbarRef = HTMLElement & {
+  label: string;
+  orientation: string;
+};
+
+/** Public API surface of `<rc-splitter>`. */
+export type RCSplitterRef = HTMLElement & {
+  label: string;
+  orientation: 'horizontal' | 'vertical';
+  mode: 'length' | 'percent';
+  step: number;
+  value: number;
+  defaultValue: number | undefined;
+  fixed: boolean;
+};
+
+/** Public API surface of `<rc-slider>`. */
+export type RCSliderRef = HTMLElement & {
+  min: number;
+  max: number;
+  step: number;
+  value: number;
+  defaultValue: number | undefined;
+  disabled: boolean;
+  readonly: boolean;
+  display: 'float' | 'inline-start' | 'inline-end' | null;
+  valueText: string;
+  orientation: 'horizontal' | 'vertical';
+};
+
+/** Public API surface of `<rc-range-slider>`. */
+export type RCRangeSliderRef = HTMLElement & {
+  min: number;
+  max: number;
+  step: number;
+  value: [number, number];
+  defaultValue: [number, number] | undefined;
+  disabled: boolean;
+  lowLabel: string;
+  highLabel: string;
+  lowValueText: string;
+  highValueText: string;
+  display: 'float' | 'inline-start' | 'inline-end' | null;
+  orientation: 'horizontal' | 'vertical';
+};
+
+/** Public API surface of `<rc-transfer-list>`. */
+export type RCTransferListRef = HTMLElement & {
+  multiple: boolean;
+  compact: boolean;
+  availableLabel: string;
+  selectedLabel: string;
+  available: RCTransferListOption[];
+  selected: RCTransferListOption[];
+  defaultSelected: RCTransferListOption[] | undefined;
+  addSelected(): void;
+  addAll(): void;
+  removeSelected(): void;
+  clearSelected(): void;
+  moveSelected(delta: number): void;
+};
+
+/** Public API surface of `<rc-textarea>`. */
+export type RCTextareaRef = HTMLElement & {
+  value: string;
+  defaultValue: string | undefined;
+  plugin: RCTextareaPlugin | null;
+  lineNumbers: boolean;
+  listNumbers: boolean;
+  gutter: boolean;
+  wordWrap: boolean;
+  autoGrow: boolean;
+  readOnly: boolean;
+  label: string | null;
+  usePlugin(plugin: RCTextareaPlugin): void;
+  removePlugin(): void;
+  wrapSelection(prefix: string, suffix: string): void;
+  replaceSelection(text: string): void;
+};
+
+/** Public API surface of `<rc-markdown-editor>`. */
+export type RCMarkdownEditorRef = HTMLElement & {
+  value: string;
+  defaultValue: string;
+  toolbar: boolean;
+  sourceMode: boolean;
+  defaultSourceMode: boolean;
+  readOnly: boolean;
+};
+
+/** Public API surface of `<rc-virtual-canvas>`. */
+export type RCVirtualCanvasRef = HTMLElement & {
+  contentWidth: number;
+  contentHeight: number;
+  autoResizeCanvas: boolean;
+  renderMode: 'continuous' | 'viewport-change' | 'manual';
+  imageRendering: 'auto' | 'crisp-edges' | 'pixelated';
+  readonly canvasScaleX: number;
+  readonly canvasScaleY: number;
+  getViewRect(): RCVirtualCanvasViewRect;
+  scrollToContent(x: number, y: number, options?: ScrollToOptions): void;
+  centerOnContent(x: number, y: number, options?: ScrollToOptions): void;
+  clientToContent(clientX: number, clientY: number): Readonly<{ x: number; y: number }>;
+  contentToClient(x: number, y: number): Readonly<{ x: number; y: number }>;
+  requestRender(reason?: 'animation-frame' | 'viewport-change' | 'manual'): void;
+};
+
+/** Public API surface of `<rc-app-bar>`. */
+export type RCAppBarRef = HTMLElement & {
+  variant: 'compact' | 'expanded';
+  scrollBehavior: 'pinned' | 'collapse' | 'hide';
+  scrolled: boolean | undefined;
+  scrollTarget: Element | Document | Window | string | null;
+  scrollThreshold: number;
+};
+
+/** Public API surface of `<rc-search-bar>`. */
+export type RCSearchBarRef = HTMLElement & {
+  value: string;
+  defaultValue: string | undefined;
+  debounce: number;
+  clearLabel: string;
+  placeholder: string | undefined;
+};
+
+// ── React JSX declarations ───────────────────────────────────────────────────
+
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'rc-disclosure': React.DetailedHTMLProps<React.HTMLAttributes<RCDisclosureRef>, RCDisclosureRef> & {
+        open?: boolean;
+        fragment?: boolean;
+      };
+
+      'rc-accordion': React.DetailedHTMLProps<React.HTMLAttributes<RCAccordionRef>, RCAccordionRef> & {
+        name?: string;
+        multiple?: boolean;
+      };
+
+      'rc-listbox': React.DetailedHTMLProps<React.HTMLAttributes<RCListboxRef>, RCListboxRef> & {
+        multiple?: boolean;
+        checkmark?: boolean;
+        'filter-strategy'?: 'prefix' | 'contains';
+        value?: RCSelectValue;
+        'default-value'?: RCSelectValue;
+        options?: RCListboxOption[];
+      };
+
+      'rc-select': React.DetailedHTMLProps<React.HTMLAttributes<RCSelectRef>, RCSelectRef> & {
+        open?: boolean;
+        multiple?: boolean;
+        disabled?: boolean;
+        placeholder?: string;
+        display?: 'auto' | 'chips' | 'compact';
+        value?: RCSelectValue;
+        'default-value'?: RCSelectValue;
+        options?: RCSelectOption[];
+      };
+
+      'rc-combobox': React.DetailedHTMLProps<React.HTMLAttributes<RCComboboxRef>, RCComboboxRef> & {
+        open?: boolean;
+        multiple?: boolean;
+        disabled?: boolean;
+        placeholder?: string;
+        display?: 'auto' | 'chips' | 'compact';
+        'allow-create'?: boolean;
+        'filter-strategy'?: 'prefix' | 'contains';
+        value?: RCSelectValue;
+        'default-value'?: RCSelectValue;
+        options?: RCSelectOption[];
+      };
+
+      'rc-dialog': React.DetailedHTMLProps<React.HTMLAttributes<RCDialogRef>, RCDialogRef> & {
+        open?: boolean;
+        'default-open'?: boolean;
+        movable?: boolean;
+        'move-handle'?: string;
+        'move-bounds'?: 'viewport' | 'parent';
+        'move-step'?: number | string;
+        resize?: 'none' | 'both' | 'horizontal' | 'vertical';
+        'resize-threshold'?: number | string;
+        'resize-step'?: number | string;
+        'closed-by'?: 'any' | 'closerequest' | 'none';
+        'light-dismiss'?: boolean;
+      };
+
+      'rc-menu': React.DetailedHTMLProps<React.HTMLAttributes<RCMenuRef>, RCMenuRef> & {
+        label?: string;
+      };
+
+      'rc-menu-button': React.DetailedHTMLProps<React.HTMLAttributes<RCMenuButtonRef>, RCMenuButtonRef> & {
+        open?: boolean;
+        'default-open'?: boolean;
+        orientation?: 'horizontal' | 'vertical';
+        placement?: RCMenuButtonPlacement;
+      };
+
+      'rc-menubar': React.DetailedHTMLProps<React.HTMLAttributes<RCMenubarRef>, RCMenubarRef> & {
+        label?: string;
+        orientation?: 'horizontal' | 'vertical';
+      };
+
+      'rc-toolbar': React.DetailedHTMLProps<React.HTMLAttributes<RCToolbarRef>, RCToolbarRef> & {
+        label?: string;
+        orientation?: string;
+      };
+
+      'rc-slider': React.DetailedHTMLProps<React.HTMLAttributes<RCSliderRef>, RCSliderRef> & {
+        min?: number | string;
+        max?: number | string;
+        step?: number | string;
+        value?: number | string;
+        'default-value'?: number | string;
+        disabled?: boolean;
+        readonly?: boolean;
+        display?: 'float' | 'inline-start' | 'inline-end';
+        'value-text'?: string;
+        orientation?: 'horizontal' | 'vertical';
+      };
+
+      'rc-range-slider': React.DetailedHTMLProps<React.HTMLAttributes<RCRangeSliderRef>, RCRangeSliderRef> & {
+        min?: number | string;
+        max?: number | string;
+        step?: number | string;
+        value?: [number, number];
+        'default-value'?: [number, number];
+        disabled?: boolean;
+        'low-label'?: string;
+        'high-label'?: string;
+        'low-value-text'?: string;
+        'high-value-text'?: string;
+        display?: 'float' | 'inline-start' | 'inline-end';
+        orientation?: 'horizontal' | 'vertical';
+      };
+
+      'rc-transfer-list': React.DetailedHTMLProps<React.HTMLAttributes<RCTransferListRef>, RCTransferListRef> & {
+        multiple?: boolean;
+        compact?: boolean;
+        'available-label'?: string;
+        'selected-label'?: string;
+        available?: RCTransferListOption[];
+        selected?: RCTransferListOption[];
+        'default-selected'?: RCTransferListOption[];
+      };
+
+      'rc-splitter': React.DetailedHTMLProps<React.HTMLAttributes<RCSplitterRef>, RCSplitterRef> & {
+        label?: string;
+        orientation?: 'horizontal' | 'vertical';
+        mode?: 'length' | 'percent';
+        step?: number | string;
+        value?: number | string;
+        'default-value'?: number | string;
+        fixed?: boolean;
+      };
+
+      'rc-editor-toolbar': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
+        label?: string;
+      };
+
+      'rc-markdown-editor': React.DetailedHTMLProps<React.HTMLAttributes<RCMarkdownEditorRef>, RCMarkdownEditorRef> & {
+        value?: string;
+        'default-value'?: string;
+        toolbar?: boolean;
+        'source-mode'?: boolean;
+        'default-source-mode'?: boolean;
+        'read-only'?: boolean;
+      };
+
+      'rc-fab': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
+        position?: 'bottom-end' | 'bottom-start' | 'top-end' | 'top-start';
+        'scroll-reveal'?: boolean;
+      };
+
+      'rc-app-bar': React.DetailedHTMLProps<React.HTMLAttributes<RCAppBarRef>, RCAppBarRef> & {
+        variant?: 'compact' | 'expanded';
+        'scroll-behavior'?: 'pinned' | 'collapse' | 'hide';
+        'scroll-target'?: string;
+        'scroll-threshold'?: number | string;
+        scrollTarget?: Element | Document | Window | string | null;
+      };
+
+      'rc-search-bar': React.DetailedHTMLProps<React.HTMLAttributes<RCSearchBarRef>, RCSearchBarRef> & {
+        debounce?: number | string;
+        'clear-label'?: string;
+        placeholder?: string;
+        'default-value'?: string;
+        value?: string;
+      };
+
+      'rc-virtual-canvas': React.DetailedHTMLProps<React.HTMLAttributes<RCVirtualCanvasRef>, RCVirtualCanvasRef> & {
+        'content-width'?: number | string;
+        'content-height'?: number | string;
+        'auto-resize-canvas'?: boolean;
+        'render-mode'?: 'continuous' | 'viewport-change' | 'manual';
+        'image-rendering'?: 'auto' | 'crisp-edges' | 'pixelated';
+      };
+
+      'rc-textarea': React.DetailedHTMLProps<React.HTMLAttributes<RCTextareaRef>, RCTextareaRef> & {
+        value?: string;
+        'default-value'?: string;
+        plugin?: RCTextareaPlugin | null;
+        'line-numbers'?: boolean;
+        'list-numbers'?: boolean;
+        gutter?: boolean;
+        'word-wrap'?: boolean;
+        'auto-grow'?: boolean;
+        'read-only'?: boolean;
+        /** @deprecated Set `aria-label` on the slotted `<textarea>` or use a `<label for>` pair instead. */
+        label?: string;
+      };
+    }
+  }
+}

package/src/solid.d.ts

@@ -15,8 +15,6 @@
 
 import type { RCTextareaPlugin } from '@rcarls/rc-textarea';
 
-// ---- Ref types --------------------------------------------------------------
-
 /** Public API surface of `<rc-disclosure>`. */
 export type RCDisclosureRef = HTMLElement & {
   open: boolean;
@@ -28,17 +26,20 @@ export type RCDisclosureToggleDetail = {
 };
 
 /** Public API surface of `<rc-accordion>`. */
-export type RCAccordionRef = HTMLElement;
+export type RCAccordionRef = HTMLElement & {
+  multiple: boolean;
+};
 
 /** Public API surface of `<rc-listbox>`. */
 export type RCListboxRef = HTMLElement & {
   multiple: boolean;
+  checkmark: boolean;
   filterStrategy: 'prefix' | 'contains' | ((label: string, query: string) => boolean);
   value: RCSelectValue;
   defaultValue: RCSelectValue | undefined;
-  options: RCSelectOption[];
-  readonly allOptions: ReadonlyArray<{ value: string; label: string; disabled?: boolean }>;
-  readonly filteredOptions: ReadonlyArray<{ value: string; label: string; disabled?: boolean }>;
+  options: RCListboxOption[];
+  readonly allOptions: ReadonlyArray<RCListboxOption>;
+  readonly filteredOptions: ReadonlyArray<RCListboxOption>;
   readonly selectedValues: string[];
   readonly navigableItems: Element[];
   toggleOption(value: string): void;
@@ -50,11 +51,24 @@ export type RCListboxRef = HTMLElement & {
 
 /** Public API surface of `<rc-select>`. */
 export type RCSelectOption = {
+  kind?: 'option';
+  value: string;
+  label: string;
+  disabled?: boolean;
+  data?: unknown;
+};
+
+export type RCListboxActionOption<Action extends string = string> = {
+  kind: 'action';
+  action: Action;
   value: string;
   label: string;
   disabled?: boolean;
+  data?: unknown;
 };
 
+export type RCListboxOption = RCSelectOption | RCListboxActionOption;
+
 export type RCSelectValue = string | string[];
 
 export type RCSelectChangeDetail = {
@@ -63,12 +77,25 @@ export type RCSelectChangeDetail = {
   selectedOptions: RCSelectOption[];
 };
 
-export type RCListboxChangeDetail = RCSelectChangeDetail & {
+export type RCListboxSelectChangeDetail = RCSelectChangeDetail & {
+  reason: 'select';
   selected: boolean;
   optionValue: string;
-  option: RCSelectOption | null;
+  option: RCSelectOption;
+};
+
+export type RCListboxActionChangeDetail<Action extends string = string> = RCSelectChangeDetail & {
+  reason: 'action';
+  selected: false;
+  optionValue: string;
+  option: RCListboxActionOption<Action>;
+  action: Action;
 };
 
+export type RCListboxChangeDetail =
+  | RCListboxSelectChangeDetail
+  | RCListboxActionChangeDetail;
+
 export type RCSelectRef = HTMLElement & {
   open: boolean;
   multiple: boolean;
@@ -89,6 +116,10 @@ export type RCComboboxRef = RCSelectRef & {
   filterStrategy: 'prefix' | 'contains' | ((label: string, query: string) => boolean);
 };
 
+export type RCComboboxCreateDetail = {
+  text: string;
+};
+
 /** Public API surface of `<rc-dialog>`. */
 export type RCDialogRef = HTMLElement & {
   open: boolean | undefined;
@@ -114,6 +145,10 @@ export type RCDialogToggleDetail = {
   returnValue: string;
 };
 
+export type RCDialogCloseDetail = {
+  returnValue: string;
+};
+
 /** Public API surface of `<rc-menu>`. */
 export type RCMenuRef = HTMLElement & {
   label: string;
@@ -125,15 +160,41 @@ export type RCMenuActivateDetail = {
   text: string;
 };
 
+export type RCMenuCloseDetail = {
+  reason: 'escape';
+};
+
 /** Public API surface of `<rc-menu-button>`. */
+export type RCMenuButtonPlacement =
+  | 'top'
+  | 'top-start'
+  | 'top-end'
+  | 'bottom'
+  | 'bottom-start'
+  | 'bottom-end'
+  | 'left'
+  | 'left-start'
+  | 'left-end'
+  | 'right'
+  | 'right-start'
+  | 'right-end';
+
 export type RCMenuButtonRef = HTMLElement & {
   open: boolean | undefined;
   defaultOpen: boolean;
   orientation: 'horizontal' | 'vertical' | undefined;
+  placement: RCMenuButtonPlacement;
+};
+
+export type RCMenuButtonToggleDetail = {
+  open: boolean;
 };
 
 /** Public API surface of `<rc-menubar>`. */
-export type RCMenubarRef = HTMLElement;
+export type RCMenubarRef = HTMLElement & {
+  label: string;
+  orientation: 'horizontal' | 'vertical';
+};
 
 /** Public API surface of `<rc-toolbar>`. */
 export type RCToolbarRef = HTMLElement & {
@@ -169,11 +230,82 @@ export type RCTextareaRef = HTMLElement & {
   replaceSelection(text: string): void;
 };
 
-export type RCTextEditorRef = RCTextareaRef & {
+export type RCMarkdownEditorRef = HTMLElement & {
+  value: string;
+  defaultValue: string;
   toolbar: boolean;
-  markdown: boolean;
-  preview: boolean;
-  defaultPreview: boolean;
+  sourceMode: boolean;
+  defaultSourceMode: boolean;
+  readOnly: boolean;
+};
+
+export type RCMarkdownEditorFormats = {
+  bold?: boolean;
+  italic?: boolean;
+  underline?: boolean;
+  strikethrough?: boolean;
+  code?: boolean;
+  link?: boolean;
+  heading?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | null;
+  blockquote?: boolean;
+  bulletList?: boolean;
+  orderedList?: boolean;
+  codeBlock?: boolean;
+  codeLanguage?: string | null;
+};
+
+export type RCMarkdownEditorChangeDetail = {
+  value: string;
+};
+
+export type RCMarkdownEditorModeChangeDetail = {
+  mode: 'rich' | 'source';
+};
+
+export type RCVirtualCanvasViewRect = Readonly<{
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}>;
+
+export type RCVirtualCanvasRenderDetail = {
+  time: DOMHighResTimeStamp;
+  reason: 'animation-frame' | 'viewport-change' | 'manual';
+  viewRect: RCVirtualCanvasViewRect;
+  contentRect: RCVirtualCanvasViewRect;
+};
+
+export type RCVirtualCanvasPointerDetail = {
+  type: string;
+  clientX: number;
+  clientY: number;
+  contentX: number;
+  contentY: number;
+  viewRect: RCVirtualCanvasViewRect;
+  button: number;
+  buttons: number;
+  altKey: boolean;
+  ctrlKey: boolean;
+  shiftKey: boolean;
+  metaKey: boolean;
+  sourceEvent: PointerEvent | MouseEvent;
+};
+
+export type RCVirtualCanvasRef = HTMLElement & {
+  contentWidth: number;
+  contentHeight: number;
+  autoResizeCanvas: boolean;
+  renderMode: 'continuous' | 'viewport-change' | 'manual';
+  imageRendering: 'auto' | 'crisp-edges' | 'pixelated';
+  readonly canvasScaleX: number;
+  readonly canvasScaleY: number;
+  getViewRect(): RCVirtualCanvasViewRect;
+  scrollToContent(x: number, y: number, options?: ScrollToOptions): void;
+  centerOnContent(x: number, y: number, options?: ScrollToOptions): void;
+  clientToContent(clientX: number, clientY: number): Readonly<{ x: number; y: number }>;
+  contentToClient(x: number, y: number): Readonly<{ x: number; y: number }>;
+  requestRender(reason?: 'animation-frame' | 'viewport-change' | 'manual'): void;
 };
 
 export type RCSliderRef = HTMLElement & {
@@ -189,6 +321,10 @@ export type RCSliderRef = HTMLElement & {
   orientation: 'horizontal' | 'vertical';
 };
 
+export type RCSliderChangeDetail = {
+  value: number;
+};
+
 export type RCRangeSliderRef = HTMLElement & {
   min: number;
   max: number;
@@ -204,6 +340,10 @@ export type RCRangeSliderRef = HTMLElement & {
   orientation: 'horizontal' | 'vertical';
 };
 
+export type RCRangeSliderChangeDetail = {
+  value: [number, number];
+};
+
 export type RCTransferListOption = {
   value: string;
   label: string;
@@ -212,6 +352,7 @@ export type RCTransferListOption = {
 
 export type RCTransferListRef = HTMLElement & {
   multiple: boolean;
+  compact: boolean;
   availableLabel: string;
   selectedLabel: string;
   available: RCTransferListOption[];
@@ -224,6 +365,10 @@ export type RCTransferListRef = HTMLElement & {
   moveSelected(delta: number): void;
 };
 
+export type RCTransferListChangeDetail = {
+  selected: RCTransferListOption[];
+};
+
 /** Public API surface of `<rc-app-bar>`. */
 export type RCAppBarRef = HTMLElement & {
   variant: 'compact' | 'expanded';
@@ -250,7 +395,21 @@ export type RCSearchBarInputDetail = {
   value: string;
 };
 
-// ---- JSX augmentation -------------------------------------------------------
+export type RCSplitterChangeDetail = {
+  value: number;
+  valueText: string;
+};
+
+export type RCTextareaChangeDetail = {
+  value: string;
+};
+
+export type RCTextareaSelectDetail = {
+  selectionStart: number;
+  selectionEnd: number;
+};
+
+/** SolidJS JSX declarations for rc-webcomponents elements. */
 
 declare module 'solid-js' {
   namespace JSX {
@@ -263,18 +422,20 @@ declare module 'solid-js' {
 
       'rc-accordion': JSX.HTMLAttributes<RCAccordionRef> & {
         name?: string;
+        multiple?: boolean | string;
         'on:rc-disclosure-toggle'?: (e: CustomEvent<RCDisclosureToggleDetail>) => void;
       };
 
       'rc-listbox': JSX.HTMLAttributes<RCListboxRef> & {
         multiple?: boolean | string;
+        checkmark?: boolean | string;
         'filter-strategy'?: 'prefix' | 'contains';
         value?: RCSelectValue;
         defaultValue?: RCSelectValue;
-        options?: RCSelectOption[];
+        options?: RCListboxOption[];
         'prop:value'?: RCSelectValue | undefined;
         'prop:defaultValue'?: RCSelectValue | undefined;
-        'prop:options'?: RCSelectOption[] | undefined;
+        'prop:options'?: RCListboxOption[] | undefined;
         'on:rc-listbox-change'?: (e: CustomEvent<RCListboxChangeDetail>) => void;
       };
 
@@ -312,7 +473,7 @@ declare module 'solid-js' {
         'on:rc-select-change'?: (e: CustomEvent<RCSelectChangeDetail>) => void;
         'on:rc-select-open'?: (e: CustomEvent) => void;
         'on:rc-select-close'?: (e: CustomEvent) => void;
-        'on:rc-combobox-create'?: (e: CustomEvent<{ text: string }>) => void;
+        'on:rc-combobox-create'?: (e: CustomEvent<RCComboboxCreateDetail>) => void;
       };
 
       'rc-dialog': JSX.HTMLAttributes<RCDialogRef> & {
@@ -331,15 +492,15 @@ declare module 'solid-js' {
         'light-dismiss'?: boolean | string;
         'on:rc-dialog-open'?: (e: CustomEvent) => void;
         'on:rc-dialog-toggle'?: (e: CustomEvent<RCDialogToggleDetail>) => void;
-        'on:rc-dialog-close'?: (e: CustomEvent<{ returnValue: string }>) => void;
-        'on:rc-dialog-request-close'?: (e: CustomEvent<{ returnValue: string }>) => void;
+        'on:rc-dialog-close'?: (e: CustomEvent<RCDialogCloseDetail>) => void;
+        'on:rc-dialog-request-close'?: (e: CustomEvent<RCDialogCloseDetail>) => void;
         'on:rc-dialog-cancel'?: (e: CustomEvent) => void;
       };
 
       'rc-menu': JSX.HTMLAttributes<RCMenuRef> & {
         label?: string;
         'on:rc-menu-activate'?: (e: CustomEvent<RCMenuActivateDetail>) => void;
-        'on:rc-menu-close'?: (e: CustomEvent<{ reason: 'escape' }>) => void;
+        'on:rc-menu-close'?: (e: CustomEvent<RCMenuCloseDetail>) => void;
       };
 
       'rc-menu-button': JSX.HTMLAttributes<RCMenuButtonRef> & {
@@ -348,10 +509,14 @@ declare module 'solid-js' {
         'prop:open'?: boolean | undefined;
         'prop:defaultOpen'?: boolean | undefined;
         orientation?: 'horizontal' | 'vertical';
-        'on:rc-menu-button-toggle'?: (e: CustomEvent<{ open: boolean }>) => void;
+        placement?: RCMenuButtonPlacement;
+        'on:rc-menu-button-toggle'?: (e: CustomEvent<RCMenuButtonToggleDetail>) => void;
       };
 
-      'rc-menubar': JSX.HTMLAttributes<RCMenubarRef>;
+      'rc-menubar': JSX.HTMLAttributes<RCMenubarRef> & {
+        label?: string;
+        orientation?: 'horizontal' | 'vertical';
+      };
 
       'rc-toolbar': JSX.HTMLAttributes<RCToolbarRef> & {
         label?: string;
@@ -372,8 +537,8 @@ declare module 'solid-js' {
         display?: 'float' | 'inline-start' | 'inline-end';
         'value-text'?: string;
         orientation?: 'horizontal' | 'vertical';
-        'on:rc-slider-input'?: (e: CustomEvent<{ value: number }>) => void;
-        'on:rc-slider-change'?: (e: CustomEvent<{ value: number }>) => void;
+        'on:rc-slider-input'?: (e: CustomEvent<RCSliderChangeDetail>) => void;
+        'on:rc-slider-change'?: (e: CustomEvent<RCSliderChangeDetail>) => void;
       };
 
       'rc-range-slider': JSX.HTMLAttributes<RCRangeSliderRef> & {
@@ -389,18 +554,20 @@ declare module 'solid-js' {
         'high-value-text'?: string;
         display?: 'float' | 'inline-start' | 'inline-end';
         orientation?: 'horizontal' | 'vertical';
-        'on:rc-range-slider-input'?: (e: CustomEvent<{ value: [number, number] }>) => void;
-        'on:rc-range-slider-change'?: (e: CustomEvent<{ value: [number, number] }>) => void;
+        'on:rc-range-slider-input'?: (e: CustomEvent<RCRangeSliderChangeDetail>) => void;
+        'on:rc-range-slider-change'?: (e: CustomEvent<RCRangeSliderChangeDetail>) => void;
       };
 
       'rc-transfer-list': JSX.HTMLAttributes<RCTransferListRef> & {
         multiple?: boolean | string;
+        compact?: boolean | string;
         'available-label'?: string;
         'selected-label'?: string;
+        'prop:compact'?: boolean | undefined;
         'prop:available'?: RCTransferListOption[] | undefined;
         'prop:selected'?: RCTransferListOption[] | undefined;
         'prop:defaultSelected'?: RCTransferListOption[] | undefined;
-        'on:rc-transfer-list-change'?: (e: CustomEvent<{ selected: RCTransferListOption[] }>) => void;
+        'on:rc-transfer-list-change'?: (e: CustomEvent<RCTransferListChangeDetail>) => void;
       };
 
       'rc-splitter': JSX.HTMLAttributes<RCSplitterRef> & {
@@ -414,7 +581,7 @@ declare module 'solid-js' {
         'prop:value'?: number | undefined;
         'prop:defaultValue'?: number | undefined;
         fixed?: boolean | string;
-        'on:rc-splitter-change'?: (e: CustomEvent<{ value: number; valueText: string }>) => void;
+        'on:rc-splitter-change'?: (e: CustomEvent<RCSplitterChangeDetail>) => void;
       };
 
       'rc-editor-toolbar': JSX.HTMLAttributes<HTMLElement> & {
@@ -422,34 +589,26 @@ declare module 'solid-js' {
         'on:rc-toolbar-action'?: (e: CustomEvent<{ action: string }>) => void;
       };
 
-      'rc-text-editor': JSX.HTMLAttributes<RCTextEditorRef> & {
+      'rc-markdown-editor': JSX.HTMLAttributes<RCMarkdownEditorRef> & {
         value?: string;
         defaultValue?: string;
-        plugin?: RCTextareaPlugin | null;
+        'default-value'?: string;
         'prop:value'?: string | undefined;
         'prop:defaultValue'?: string | undefined;
-        'prop:plugin'?: RCTextareaPlugin | null;
         toolbar?: boolean | string;
-        markdown?: boolean | string;
-        preview?: boolean | string;
-        'default-preview'?: boolean | string;
-        'prop:preview'?: boolean | undefined;
-        'prop:defaultPreview'?: boolean | undefined;
-        'line-numbers'?: boolean | string;
-        'list-numbers'?: boolean | string;
-        gutter?: boolean | string;
-        'word-wrap'?: boolean | string;
-        'auto-grow'?: boolean | string;
+        'source-mode'?: boolean | string;
+        'default-source-mode'?: boolean | string;
+        'prop:sourceMode'?: boolean | undefined;
+        'prop:defaultSourceMode'?: boolean | undefined;
         'read-only'?: boolean | string;
-        label?: string;
-        'on:rc-textarea-change'?: (e: CustomEvent<{ value: string }>) => void;
-        'on:rc-preview-change'?: (e: CustomEvent<{ preview: boolean }>) => void;
+        'on:rc-change'?: (e: CustomEvent<RCMarkdownEditorChangeDetail>) => void;
+        'on:rc-mode-change'?: (e: CustomEvent<RCMarkdownEditorModeChangeDetail>) => void;
+        'on:rc-formatting-change'?: (e: CustomEvent<RCMarkdownEditorFormats>) => void;
       };
 
       'rc-fab': JSX.HTMLAttributes<HTMLElement> & {
-        variant?: 'regular' | 'extended';
-        label?: string;
-        disabled?: boolean | string;
+        position?: 'bottom-end' | 'bottom-start' | 'top-end' | 'top-start' | string;
+        'scroll-reveal'?: boolean | string;
       };
 
       'rc-app-bar': JSX.HTMLAttributes<RCAppBarRef> & {
@@ -473,6 +632,16 @@ declare module 'solid-js' {
         'on:rc-search-bar-clear'?: (e: CustomEvent) => void;
       };
 
+      'rc-virtual-canvas': JSX.HTMLAttributes<RCVirtualCanvasRef> & {
+        contentWidth?: number | string;
+        contentHeight?: number | string;
+        'auto-resize-canvas'?: boolean | string;
+        'render-mode'?: 'continuous' | 'viewport-change' | 'manual';
+        'image-rendering'?: 'auto' | 'crisp-edges' | 'pixelated';
+        'on:rc-virtual-canvas-render'?: (e: CustomEvent<RCVirtualCanvasRenderDetail>) => void;
+        'on:rc-virtual-canvas-pointer'?: (e: CustomEvent<RCVirtualCanvasPointerDetail>) => void;
+      };
+
       'rc-textarea': JSX.HTMLAttributes<RCTextareaRef> & {
         value?: string;
         defaultValue?: string;
@@ -487,10 +656,10 @@ declare module 'solid-js' {
         'auto-grow'?: boolean | string;
         'read-only'?: boolean | string;
         label?: string;
-        'on:rc-textarea-change'?: (e: CustomEvent<{ value: string }>) => void;
+        'on:rc-textarea-change'?: (e: CustomEvent<RCTextareaChangeDetail>) => void;
         'on:rc-textarea-focus'?: (e: CustomEvent) => void;
         'on:rc-textarea-blur'?: (e: CustomEvent) => void;
-        'on:rc-textarea-select'?: (e: CustomEvent<{ selectionStart: number; selectionEnd: number }>) => void;
+        'on:rc-textarea-select'?: (e: CustomEvent<RCTextareaSelectDetail>) => void;
       };
     }
   }

package/themes/base.css

@@ -0,0 +1,54 @@
+/**
+ * Defines the rc-webcomponents semantic token set. All tokens fall back to
+ * CSS System Colors, so this file is optional. Import it or override these
+ * tokens at the application theme boundary.
+ */
+:root {
+  --rc-surface: Canvas;
+  --rc-field: Field;
+  --rc-button-bg: ButtonFace;
+
+  --rc-field-text: FieldText;
+  --rc-button-text: ButtonText;
+  --rc-highlight-text: HighlightText;
+  --rc-text-disabled: GrayText;
+
+  --rc-highlight: Highlight;
+  --rc-accent: Highlight;
+
+  --rc-border-color: ButtonBorder;
+  --rc-border-width: 1px;
+  --rc-border-style: solid;
+  --rc-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+
+  --rc-font-family: inherit;
+  --rc-font-size: 1em;
+  --rc-font-weight: 400;
+  --rc-line-height: normal;
+
+  --rc-control-block-size: 2.25em;
+  --rc-control-padding-block: 0.25em;
+  --rc-control-padding-inline: 0.5em;
+  --rc-control-gap: 0.25em;
+
+  --rc-item-padding-block: 0.3em;
+  --rc-item-padding-inline: 0.75em;
+  --rc-item-gap: 0.4em;
+
+  --rc-radius-sm: 0.125em;
+  --rc-radius-md: 0.25em;
+  --rc-control-radius: var(--rc-radius-sm);
+
+  --rc-focus-ring: auto;
+  --rc-focus-ring-offset: 0;
+  --rc-disabled-opacity: 0.5;
+  --rc-motion-duration: 120ms;
+
+  --rc-border: var(--rc-border-width) var(--rc-border-style) var(--rc-border-color);
+}
+
+@supports (color: AccentColor) {
+  :root {
+    --rc-accent: AccentColor;
+  }
+}