@rcarls/rc-webcomponents 0.1.0

package/README.md

@@ -0,0 +1,65 @@
+# `@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.
+
+## Installation
+
+PowerShell:
+
+```powershell
+yarn.cmd add @rcarls/rc-webcomponents
+```
+
+Bash/zsh:
+
+```bash
+yarn add @rcarls/rc-webcomponents
+```
+
+## Import All Definitions
+
+```ts
+import '@rcarls/rc-webcomponents/define';
+```
+
+## Import Classes
+
+```ts
+import {
+  RCCombobox,
+  RCDialog,
+  RCListbox,
+  RCMenu,
+  RCMenuButton,
+  RCMenubar,
+  RCSelect,
+  RCSplitter,
+  RCTextarea,
+  RCToolbar,
+} from '@rcarls/rc-webcomponents';
+```
+
+## 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. |
+
+## Notes
+
+- Use individual packages when bundle size matters and the app only needs one or
+  two components.
+- Use this aggregate package for app-level convenience, framework integration,
+  and demo/documentation surfaces.

package/dist/rc-webcomponents-define.js

@@ -0,0 +1,39 @@
+import "@rcarls/rc-app-bar/define";
+import "@rcarls/rc-combobox/define";
+import "@rcarls/rc-dialog/define";
+import "@rcarls/rc-disclosure/define";
+import "@rcarls/rc-fab/define";
+import "@rcarls/rc-accordion/define";
+import "@rcarls/rc-listbox/define";
+import "@rcarls/rc-menubar/define";
+import "@rcarls/rc-menu-button/define";
+import "@rcarls/rc-menu/define";
+import "@rcarls/rc-range-slider/define";
+import "@rcarls/rc-search-bar/define";
+import "@rcarls/rc-select/define";
+import "@rcarls/rc-slider/define";
+import "@rcarls/rc-splitter/define";
+import "@rcarls/rc-markdown-editor/define";
+import "@rcarls/rc-textarea/define";
+import "@rcarls/rc-toolbar/define";
+import "@rcarls/rc-transfer-list/define";
+export * from "@rcarls/rc-accordion";
+export * from "@rcarls/rc-app-bar";
+export * from "@rcarls/rc-combobox";
+export * from "@rcarls/rc-dialog";
+export * from "@rcarls/rc-disclosure";
+export * from "@rcarls/rc-fab";
+export * from "@rcarls/rc-listbox";
+export * from "@rcarls/rc-markdown-editor";
+export * from "@rcarls/rc-menu";
+export * from "@rcarls/rc-menu-button";
+export * from "@rcarls/rc-menubar";
+export * from "@rcarls/rc-range-slider";
+export * from "@rcarls/rc-search-bar";
+export * from "@rcarls/rc-select";
+export * from "@rcarls/rc-slider";
+export * from "@rcarls/rc-splitter";
+export * from "@rcarls/rc-textarea";
+export * from "@rcarls/rc-toolbar";
+export * from "@rcarls/rc-transfer-list";
+//# sourceMappingURL=rc-webcomponents-define.js.map

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

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

package/dist/rc-webcomponents.js

@@ -0,0 +1,20 @@
+export * from "@rcarls/rc-accordion";
+export * from "@rcarls/rc-app-bar";
+export * from "@rcarls/rc-combobox";
+export * from "@rcarls/rc-dialog";
+export * from "@rcarls/rc-disclosure";
+export * from "@rcarls/rc-fab";
+export * from "@rcarls/rc-listbox";
+export * from "@rcarls/rc-markdown-editor";
+export * from "@rcarls/rc-menu";
+export * from "@rcarls/rc-menu-button";
+export * from "@rcarls/rc-menubar";
+export * from "@rcarls/rc-range-slider";
+export * from "@rcarls/rc-search-bar";
+export * from "@rcarls/rc-select";
+export * from "@rcarls/rc-slider";
+export * from "@rcarls/rc-splitter";
+export * from "@rcarls/rc-textarea";
+export * from "@rcarls/rc-toolbar";
+export * from "@rcarls/rc-transfer-list";
+//# sourceMappingURL=rc-webcomponents.js.map

package/dist/rc-webcomponents.js.map

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

package/dist/types/define.d.ts

@@ -0,0 +1 @@
+export * from './index.js';

package/dist/types/index.d.ts

@@ -0,0 +1,19 @@
+export * from '@rcarls/rc-accordion';
+export * from '@rcarls/rc-app-bar';
+export * from '@rcarls/rc-combobox';
+export * from '@rcarls/rc-dialog';
+export * from '@rcarls/rc-disclosure';
+export * from '@rcarls/rc-fab';
+export * from '@rcarls/rc-listbox';
+export * from '@rcarls/rc-markdown-editor';
+export * from '@rcarls/rc-menu';
+export * from '@rcarls/rc-menu-button';
+export * from '@rcarls/rc-menubar';
+export * from '@rcarls/rc-range-slider';
+export * from '@rcarls/rc-search-bar';
+export * from '@rcarls/rc-select';
+export * from '@rcarls/rc-slider';
+export * from '@rcarls/rc-splitter';
+export * from '@rcarls/rc-textarea';
+export * from '@rcarls/rc-toolbar';
+export * from '@rcarls/rc-transfer-list';

package/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "@rcarls/rc-webcomponents",
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "0.1.0",
+  "description": "Aggregate package — all @rcarls WAI-ARIA compliant headless web components",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/richardcarls/rc-webcomponents.git",
+    "directory": "packages/rc-webcomponents"
+  },
+  "homepage": "https://github.com/richardcarls/rc-webcomponents#readme",
+  "license": "MIT",
+  "type": "module",
+  "files": [
+    "dist",
+    "src/solid.d.ts"
+  ],
+  "module": "./dist/rc-webcomponents.js",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/types/index.d.ts",
+        "default": "./dist/rc-webcomponents.js"
+      }
+    },
+    "./define": {
+      "import": {
+        "types": "./dist/types/define.d.ts",
+        "default": "./dist/rc-webcomponents-define.js"
+      }
+    },
+    "./solid": {
+      "types": "./src/solid.d.ts"
+    },
+    "./themes/base.css": "../../themes/base.css"
+  },
+  "types": "./dist/types/index.d.ts",
+  "sideEffects": [
+    "./dist/rc-webcomponents-define.js"
+  ],
+  "scripts": {
+    "build": "tsc && vite build",
+    "yalc:publish": "yalc publish --push"
+  },
+  "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:^"
+  },
+  "peerDependencies": {
+    "lit": "^3.0.0"
+  },
+  "devDependencies": {
+    "lit": "^3.0.0",
+    "typescript": "~5.9.3",
+    "vite": "^7.1.7",
+    "vite-plugin-dts": "^4.5.4"
+  }
+}

package/src/solid.d.ts

@@ -0,0 +1,497 @@
+/**
+ * SolidJS JSX type augmentation for rc-webcomponents.
+ *
+ * Import this file once in your SolidJS project (e.g. in vite.config.ts or
+ * a global types file):
+ *
+ *   /// <reference types="@rcarls/rc-webcomponents/solid" />
+ *
+ * Ref types use HTMLElement intersections — not LitElement — so TypeScript
+ * resolves correctly without requiring `lit` in your tsconfig paths.
+ *
+ * Boolean attributes are typed as `boolean | string` because SolidJS passes
+ * `""` (empty string) for a boolean `true`.
+ */
+
+import type { RCTextareaPlugin } from '@rcarls/rc-textarea';
+
+// ---- Ref types --------------------------------------------------------------
+
+/** Public API surface of `<rc-disclosure>`. */
+export type RCDisclosureRef = HTMLElement & {
+  open: boolean;
+  fragment: boolean;
+};
+
+export type RCDisclosureToggleDetail = {
+  open: boolean;
+};
+
+/** Public API surface of `<rc-accordion>`. */
+export type RCAccordionRef = HTMLElement;
+
+/** Public API surface of `<rc-listbox>`. */
+export type RCListboxRef = HTMLElement & {
+  multiple: 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 }>;
+  readonly selectedValues: string[];
+  readonly navigableItems: Element[];
+  toggleOption(value: string): void;
+  clearSelection(): void;
+  filterOptions(text: string): void;
+  clearFilter(): void;
+  setCreateOption(label: string | null): void;
+};
+
+/** Public API surface of `<rc-select>`. */
+export type RCSelectOption = {
+  value: string;
+  label: string;
+  disabled?: boolean;
+};
+
+export type RCSelectValue = string | string[];
+
+export type RCSelectChangeDetail = {
+  value: RCSelectValue;
+  selectedValues: string[];
+  selectedOptions: RCSelectOption[];
+};
+
+export type RCListboxChangeDetail = RCSelectChangeDetail & {
+  selected: boolean;
+  optionValue: string;
+  option: RCSelectOption | null;
+};
+
+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;
+};
+
+export type RCDialogToggleDetail = {
+  open: boolean;
+  returnValue: string;
+};
+
+/** Public API surface of `<rc-menu>`. */
+export type RCMenuRef = HTMLElement & {
+  label: string;
+};
+
+export type RCMenuActivateDetail = {
+  item: HTMLElement;
+  value: string;
+  text: string;
+};
+
+/** Public API surface of `<rc-menu-button>`. */
+export type RCMenuButtonRef = HTMLElement & {
+  open: boolean | undefined;
+  defaultOpen: boolean;
+  orientation: 'horizontal' | 'vertical' | undefined;
+};
+
+/** Public API surface of `<rc-menubar>`. */
+export type RCMenubarRef = HTMLElement;
+
+/** 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;
+};
+
+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;
+};
+
+export type RCTextEditorRef = RCTextareaRef & {
+  toolbar: boolean;
+  markdown: boolean;
+  preview: boolean;
+  defaultPreview: boolean;
+};
+
+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';
+};
+
+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';
+};
+
+export type RCTransferListOption = {
+  value: string;
+  label: string;
+  disabled?: boolean;
+};
+
+export type RCTransferListRef = HTMLElement & {
+  multiple: 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-app-bar>`. */
+export type RCAppBarRef = HTMLElement & {
+  variant: 'compact' | 'expanded';
+  scrollBehavior: 'pinned' | 'collapse' | 'hide';
+  scrolled: boolean | undefined;
+  scrollTarget: Element | Document | Window | string | null;
+  scrollThreshold: number;
+};
+
+export type RCAppBarScrollDetail = {
+  scrolled: boolean;
+};
+
+/** Public API surface of `<rc-search-bar>`. */
+export type RCSearchBarRef = HTMLElement & {
+  value: string;
+  defaultValue: string | undefined;
+  debounce: number;
+  clearLabel: string;
+  placeholder: string | undefined;
+};
+
+export type RCSearchBarInputDetail = {
+  value: string;
+};
+
+// ---- JSX augmentation -------------------------------------------------------
+
+declare module 'solid-js' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'rc-disclosure': JSX.HTMLAttributes<RCDisclosureRef> & {
+        open?: boolean | string;
+        fragment?: boolean | string;
+        'on:rc-disclosure-toggle'?: (e: CustomEvent<RCDisclosureToggleDetail>) => void;
+      };
+
+      'rc-accordion': JSX.HTMLAttributes<RCAccordionRef> & {
+        name?: string;
+        'on:rc-disclosure-toggle'?: (e: CustomEvent<RCDisclosureToggleDetail>) => void;
+      };
+
+      'rc-listbox': JSX.HTMLAttributes<RCListboxRef> & {
+        multiple?: boolean | string;
+        'filter-strategy'?: 'prefix' | 'contains';
+        value?: RCSelectValue;
+        defaultValue?: RCSelectValue;
+        options?: RCSelectOption[];
+        'prop:value'?: RCSelectValue | undefined;
+        'prop:defaultValue'?: RCSelectValue | undefined;
+        'prop:options'?: RCSelectOption[] | undefined;
+        'on:rc-listbox-change'?: (e: CustomEvent<RCListboxChangeDetail>) => void;
+      };
+
+      'rc-select': JSX.HTMLAttributes<RCSelectRef> & {
+        open?: boolean | string;
+        multiple?: boolean | string;
+        disabled?: boolean | string;
+        placeholder?: string;
+        display?: 'auto' | 'chips' | 'compact';
+        value?: RCSelectValue;
+        defaultValue?: RCSelectValue;
+        options?: RCSelectOption[];
+        'prop:value'?: RCSelectValue | undefined;
+        'prop:defaultValue'?: RCSelectValue | undefined;
+        'prop:options'?: RCSelectOption[] | undefined;
+        'on:rc-select-change'?: (e: CustomEvent<RCSelectChangeDetail>) => void;
+        'on:rc-select-open'?: (e: CustomEvent) => void;
+        'on:rc-select-close'?: (e: CustomEvent) => void;
+      };
+
+      'rc-combobox': JSX.HTMLAttributes<RCComboboxRef> & {
+        open?: boolean | string;
+        multiple?: boolean | string;
+        disabled?: boolean | string;
+        placeholder?: string;
+        display?: 'auto' | 'chips' | 'compact';
+        allowcreate?: boolean | string;
+        'filter-strategy'?: 'prefix' | 'contains';
+        value?: RCSelectValue;
+        defaultValue?: RCSelectValue;
+        options?: RCSelectOption[];
+        'prop:value'?: RCSelectValue | undefined;
+        'prop:defaultValue'?: RCSelectValue | undefined;
+        'prop:options'?: RCSelectOption[] | undefined;
+        '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;
+      };
+
+      'rc-dialog': JSX.HTMLAttributes<RCDialogRef> & {
+        open?: boolean | string;
+        defaultOpen?: boolean | string;
+        'prop:open'?: boolean | undefined;
+        'prop:defaultOpen'?: boolean | undefined;
+        movable?: boolean | string;
+        '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 | 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-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;
+      };
+
+      'rc-menu-button': JSX.HTMLAttributes<RCMenuButtonRef> & {
+        open?: boolean | string;
+        defaultOpen?: boolean | string;
+        'prop:open'?: boolean | undefined;
+        'prop:defaultOpen'?: boolean | undefined;
+        orientation?: 'horizontal' | 'vertical';
+        'on:rc-menu-button-toggle'?: (e: CustomEvent<{ open: boolean }>) => void;
+      };
+
+      'rc-menubar': JSX.HTMLAttributes<RCMenubarRef>;
+
+      'rc-toolbar': JSX.HTMLAttributes<RCToolbarRef> & {
+        label?: string;
+        orientation?: string;
+      };
+
+      'rc-slider': JSX.HTMLAttributes<RCSliderRef> & {
+        min?: number | string;
+        max?: number | string;
+        step?: number | string;
+        value?: number | string;
+        defaultValue?: number | string;
+        'default-value'?: number | string;
+        'prop:value'?: number | undefined;
+        'prop:defaultValue'?: number | undefined;
+        disabled?: boolean | string;
+        readonly?: boolean | string;
+        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;
+      };
+
+      'rc-range-slider': JSX.HTMLAttributes<RCRangeSliderRef> & {
+        min?: number | string;
+        max?: number | string;
+        step?: number | string;
+        'prop:value'?: [number, number] | undefined;
+        'prop:defaultValue'?: [number, number] | undefined;
+        disabled?: boolean | string;
+        'low-label'?: string;
+        'high-label'?: string;
+        'low-value-text'?: string;
+        '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;
+      };
+
+      'rc-transfer-list': JSX.HTMLAttributes<RCTransferListRef> & {
+        multiple?: boolean | string;
+        'available-label'?: string;
+        'selected-label'?: string;
+        'prop:available'?: RCTransferListOption[] | undefined;
+        'prop:selected'?: RCTransferListOption[] | undefined;
+        'prop:defaultSelected'?: RCTransferListOption[] | undefined;
+        'on:rc-transfer-list-change'?: (e: CustomEvent<{ selected: RCTransferListOption[] }>) => void;
+      };
+
+      'rc-splitter': JSX.HTMLAttributes<RCSplitterRef> & {
+        label?: string;
+        orientation?: 'horizontal' | 'vertical';
+        mode?: 'length' | 'percent';
+        step?: number | string;
+        value?: number | string;
+        defaultValue?: number | string;
+        'default-value'?: number | string;
+        'prop:value'?: number | undefined;
+        'prop:defaultValue'?: number | undefined;
+        fixed?: boolean | string;
+        'on:rc-splitter-change'?: (e: CustomEvent<{ value: number; valueText: string }>) => void;
+      };
+
+      'rc-editor-toolbar': JSX.HTMLAttributes<HTMLElement> & {
+        label?: string;
+        'on:rc-toolbar-action'?: (e: CustomEvent<{ action: string }>) => void;
+      };
+
+      'rc-text-editor': JSX.HTMLAttributes<RCTextEditorRef> & {
+        value?: string;
+        defaultValue?: string;
+        plugin?: RCTextareaPlugin | null;
+        '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;
+        'read-only'?: boolean | string;
+        label?: string;
+        'on:rc-textarea-change'?: (e: CustomEvent<{ value: string }>) => void;
+        'on:rc-preview-change'?: (e: CustomEvent<{ preview: boolean }>) => void;
+      };
+
+      'rc-fab': JSX.HTMLAttributes<HTMLElement> & {
+        variant?: 'regular' | 'extended';
+        label?: string;
+        disabled?: boolean | string;
+      };
+
+      'rc-app-bar': JSX.HTMLAttributes<RCAppBarRef> & {
+        variant?: 'compact' | 'expanded';
+        'scroll-behavior'?: 'pinned' | 'collapse' | 'hide';
+        'scroll-target'?: string;
+        'scroll-threshold'?: number | string;
+        'prop:scrolled'?: boolean | undefined;
+        'prop:scrollTarget'?: Element | Document | Window | string | null;
+        'on:rc-app-bar-scroll'?: (e: CustomEvent<RCAppBarScrollDetail>) => void;
+      };
+
+      'rc-search-bar': JSX.HTMLAttributes<RCSearchBarRef> & {
+        debounce?: number | string;
+        'clear-label'?: string;
+        placeholder?: string;
+        'default-value'?: string;
+        'prop:value'?: string | undefined;
+        'prop:defaultValue'?: string | undefined;
+        'on:rc-search-bar-input'?: (e: CustomEvent<RCSearchBarInputDetail>) => void;
+        'on:rc-search-bar-clear'?: (e: CustomEvent) => void;
+      };
+
+      'rc-textarea': JSX.HTMLAttributes<RCTextareaRef> & {
+        value?: string;
+        defaultValue?: string;
+        plugin?: RCTextareaPlugin | null;
+        'prop:value'?: string | undefined;
+        'prop:defaultValue'?: string | undefined;
+        'prop:plugin'?: RCTextareaPlugin | null;
+        'line-numbers'?: boolean | string;
+        'list-numbers'?: boolean | string;
+        gutter?: boolean | string;
+        'word-wrap'?: boolean | string;
+        'auto-grow'?: boolean | string;
+        'read-only'?: boolean | string;
+        label?: string;
+        'on:rc-textarea-change'?: (e: CustomEvent<{ value: string }>) => 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;
+      };
+    }
+  }
+}