@rippling/rippling-sdk 0.2.0-alpha.49 → 0.2.0-alpha.50

package/src/lib/sdui/components.ts

@@ -1,6 +1,6 @@
 /**
  * AUTO-GENERATED from catalog-schema.json
- * Components: 154
+ * Components: 134
  *
  * Do not edit manually. Run: node tools/sdui/builder/build.js
  */
@@ -41,6 +41,7 @@ import type {
   CountDownCatalogProps,
   CountryCatalogProps,
   CurrencyCatalogProps,
+  CustomObjectGridCatalogProps,
   DateCatalogProps,
   DateInlineMultiCatalogProps,
   DateRangeCatalogProps,
@@ -81,6 +82,7 @@ import type {
   ModalFooterCatalogProps,
   NestedListCatalogProps,
   NumberCatalogProps,
+  ObjectListViewCatalogProps,
   ObjectUICatalogProps,
   ObjectUIContentCatalogProps,
   ObjectUIHeaderCatalogProps,
@@ -102,6 +104,7 @@ import type {
   ReportLoaderCatalogProps,
   ReportShareLoaderCatalogProps,
   ReportViewerLoaderCatalogProps,
+  ResizableBoardCatalogProps,
   ResponsiveCatalogProps,
   SegmentedControlCatalogProps,
   SelectCatalogProps,
@@ -141,29 +144,6 @@ import type {
   VStackCatalogProps,
   VideoCatalogProps,
   WorkEmailCatalogProps,
-  AnalyticsCardCatalogProps,
-  ResizableBoardCatalogProps,
-  EChartCatalogProps,
-  RichTextCatalogProps,
-  DashboardRichTextCatalogProps,
-  CustomObjectGridCatalogProps,
-  ObjectListViewCatalogProps,
-  BarChartCatalogProps,
-  LineChartCatalogProps,
-  HorizontalBarChartCatalogProps,
-  CombinationChartCatalogProps,
-  PieChartCatalogProps,
-  ScatterChartCatalogProps,
-  FunnelChartCatalogProps,
-  GaugeChartCatalogProps,
-  SunburstChartCatalogProps,
-  WithSpinnerCatalogProps,
-  RadarChartCatalogProps,
-  RadarFilledChartCatalogProps,
-  HeatmapCalendarChartCatalogProps,
-  HeatmapChartCatalogProps,
-  TreemapChartCatalogProps,
-  SqlHighlightCatalogProps,
 } from './propTypes';
 
 export interface SpecNode {
@@ -251,17 +231,17 @@ export type AiIconProps = Bindable<AiIconCatalogProps> & ComponentDirectives;
 export const AiIcon = createComponent<AiIconProps>('AiIcon');
 
 export type AlertProps = Bindable<AlertCatalogProps> & {
+  onDismiss?: ActionBinding | ActionBinding[];
   onPressPrimary?: ActionBinding | ActionBinding[];
   onPressSecondary?: ActionBinding | ActionBinding[];
-  onDismiss?: ActionBinding | ActionBinding[];
 } & ComponentDirectives;
 /**
  * A persistent, high-priority notice that conveys critical information (errors, warnings, success confirmations, or informational messages) and guides users to proceed or resolve issues. Appears with page content and remains visible until dismissed or resolved. Use for system-level or page-level messaging, not for ephemeral feedback (use SnackBar instead) or for interruptions requiring immediate input (use Modal instead).
  */
 export const Alert = createComponent<AlertProps>('Alert', {
+  onDismiss: 'dismiss',
   onPressPrimary: 'pressPrimary',
   onPressSecondary: 'pressSecondary',
-  onDismiss: 'dismiss',
 });
 
 export type AnimationProps = Bindable<AnimationCatalogProps> & ComponentDirectives;
@@ -283,33 +263,33 @@ export type AppGroupLoaderProps = Bindable<AppGroupLoaderCatalogProps> & Compone
 export const AppGroupLoader = createComponent<AppGroupLoaderProps>('AppGroupLoader');
 
 export type AppGroupSelectProps = Bindable<AppGroupSelectCatalogProps> & {
-  onChange?: ActionBinding | ActionBinding[];
   onBlur?: ActionBinding | ActionBinding[];
+  onChange?: ActionBinding | ActionBinding[];
   onFocus?: ActionBinding | ActionBinding[];
-  onPaste?: ActionBinding | ActionBinding[];
   onMenuToggle?: ActionBinding | ActionBinding[];
+  onPaste?: ActionBinding | ActionBinding[];
 } & ComponentDirectives;
 /**
  * A multi-select dropdown for choosing multiple options from grouped categories, with app-group styling. Use when users need to pick several items organized into labeled groups (e.g. apps by category). For single selection or ungrouped options, use Select instead.
  */
 export const AppGroupSelect = createComponent<AppGroupSelectProps>('AppGroupSelect', {
-  onChange: 'change',
   onBlur: 'blur',
+  onChange: 'change',
   onFocus: 'focus',
-  onPaste: 'paste',
   onMenuToggle: 'menuToggle',
+  onPaste: 'paste',
 });
 
 export type AppNavBarProps = Bindable<AppNavBarCatalogProps> & {
-  onNavigate?: ActionBinding | ActionBinding[];
   onAction?: ActionBinding | ActionBinding[];
+  onNavigate?: ActionBinding | ActionBinding[];
 } & ComponentDirectives & { children?: SpecNode | SpecNode[] };
 /**
  * Application navigation bar with routing support. Displays a horizontal tab bar or vertical sidebar with links, icons, badges, and optional nested sub-navigation. Use for top-level page navigation.
  */
 export const AppNavBar = createComponent<AppNavBarProps>('AppNavBar', {
-  onNavigate: 'navigate',
   onAction: 'action',
+  onNavigate: 'navigate',
 });
 
 export type AtomsSeparatorProps = Bindable<AtomsSeparatorCatalogProps> & ComponentDirectives;
@@ -357,19 +337,19 @@ export const Breadcrumb = createComponent<BreadcrumbProps>('Breadcrumb', {
 });
 
 export type ButtonProps = Bindable<ButtonCatalogProps> & {
-  onPress?: ActionBinding | ActionBinding[];
-  onPressWhileDisabled?: ActionBinding | ActionBinding[];
   onMouseEnter?: ActionBinding | ActionBinding[];
   onMouseLeave?: ActionBinding | ActionBinding[];
+  onPress?: ActionBinding | ActionBinding[];
+  onPressWhileDisabled?: ActionBinding | ActionBinding[];
 } & ComponentDirectives;
 /**
  * An interactive element that allows users to trigger actions or events with a single click. Use for actions, not navigation — use links for navigation. Use IconButton when space is limited and the action is not critical.
  */
 export const Button = createComponent<ButtonProps>('Button', {
-  onPress: 'press',
-  onPressWhileDisabled: 'pressWhileDisabled',
   onMouseEnter: 'mouseEnter',
   onMouseLeave: 'mouseLeave',
+  onPress: 'press',
+  onPressWhileDisabled: 'pressWhileDisabled',
 });
 
 export type ButtonGroupProps = Bindable<ButtonGroupCatalogProps> &
@@ -380,21 +360,21 @@ export type ButtonGroupProps = Bindable<ButtonGroupCatalogProps> &
 export const ButtonGroup = createComponent<ButtonGroupProps>('ButtonGroup');
 
 export type CardProps = Bindable<CardCatalogProps> & {
-  onEdit?: ActionBinding | ActionBinding[];
-  onDelete?: ActionBinding | ActionBinding[];
+  onAction?: ActionBinding | ActionBinding[];
   onAdd?: ActionBinding | ActionBinding[];
   onClick?: ActionBinding | ActionBinding[];
-  onAction?: ActionBinding | ActionBinding[];
+  onDelete?: ActionBinding | ActionBinding[];
+  onEdit?: ActionBinding | ActionBinding[];
 } & ComponentDirectives & { children?: SpecNode | SpecNode[] };
 /**
  * Visually groups related information and components into a contained, interactive card. Use for summarizing content, facilitating comparisons, or guiding users toward specific actions. Renders as a simple layout container when used with children only (no title/content).
  */
 export const Card = createComponent<CardProps>('Card', {
-  onEdit: 'edit',
-  onDelete: 'delete',
+  onAction: 'action',
   onAdd: 'add',
   onClick: 'click',
-  onAction: 'action',
+  onDelete: 'delete',
+  onEdit: 'edit',
 });
 
 export type CardGroupProps = Bindable<CardGroupCatalogProps> &
@@ -414,15 +394,11 @@ export const Carousel = createComponent<CarouselProps>('Carousel', {
   onDone: 'done',
 });
 
-export type ChartLoaderProps = Bindable<ChartLoaderCatalogProps> & {
-  onLoad?: ActionBinding | ActionBinding[];
-} & ComponentDirectives & { children?: SpecNode | SpecNode[] };
+export type ChartLoaderProps = Bindable<ChartLoaderCatalogProps> & ComponentDirectives;
 /**
- * Chart-specific replacement for `WithSpinner`. While `isLoading` is true and `error` is empty, renders a chart-shaped stencil (the same `ChartVisualizationStencil` bar-chart animation the Analytics Report uses) instead of a generic Pebble spinner. When `error` is non-null/non-false, renders a status-aware `ChartError` fallback that picks an animation + copy variant from the HTTP status (403 forbidden, 404 not found, 400 bad request, 500-or-default), mirroring the Analytics Report `VisualizationErrorFallback`. Otherwise renders children. Emits `load` once on mount so a handler can kick off the data fetch.
+ * A skeleton placeholder shown while chart or graph content is loading. Use when the content area will contain a chart and you want to reduce perceived loading time and prevent layout shift.
  */
-export const ChartLoader = createComponent<ChartLoaderProps>('ChartLoader', {
-  onLoad: 'load',
-});
+export const ChartLoader = createComponent<ChartLoaderProps>('ChartLoader');
 
 export type CheckListProps = Bindable<CheckListCatalogProps> & {
   onChange?: ActionBinding | ActionBinding[];
@@ -435,27 +411,27 @@ export const CheckList = createComponent<CheckListProps>('CheckList', {
 });
 
 export type CheckboxProps = Bindable<CheckboxCatalogProps> & {
-  onChange?: ActionBinding | ActionBinding[];
   onBlur?: ActionBinding | ActionBinding[];
+  onChange?: ActionBinding | ActionBinding[];
 } & ComponentDirectives;
 /**
  * A checkbox that lets users select or unselect an option. Use for toggling a single boolean (e.g. "I agree") or selecting multiple items from a list. Use Radio for mutually exclusive choices; use Toggle when the change takes effect immediately.
  */
 export const Checkbox = createComponent<CheckboxProps>('Checkbox', {
-  onChange: 'change',
   onBlur: 'blur',
+  onChange: 'change',
 });
 
 export type CheckboxGroupProps = Bindable<CheckboxGroupCatalogProps> & {
-  onChange?: ActionBinding | ActionBinding[];
   onBlur?: ActionBinding | ActionBinding[];
+  onChange?: ActionBinding | ActionBinding[];
 } & ComponentDirectives;
 /**
  * A group of checkboxes that lets users select multiple options from a predefined list. Use when users can choose all, some, or none of the options. Use Radio instead for mutually exclusive single selection, or Toggle for immediate on/off activation.
  */
 export const CheckboxGroup = createComponent<CheckboxGroupProps>('CheckboxGroup', {
-  onChange: 'change',
   onBlur: 'blur',
+  onChange: 'change',
 });
 
 export type ChipProps = Bindable<ChipCatalogProps> & {
@@ -487,15 +463,15 @@ export type CircleProps = Bindable<CircleCatalogProps> & ComponentDirectives;
 export const Circle = createComponent<CircleProps>('Circle');
 
 export type ColorPickerProps = Bindable<ColorPickerCatalogProps> & {
-  onChange?: ActionBinding | ActionBinding[];
   onBlur?: ActionBinding | ActionBinding[];
+  onChange?: ActionBinding | ActionBinding[];
 } & ComponentDirectives;
 /**
  * A form input for selecting a color from a predefined palette or entering a custom hex value. Use for brand color selection, theme customization, or any setting where users choose a specific color.
  */
 export const ColorPicker = createComponent<ColorPickerProps>('ColorPicker', {
-  onChange: 'change',
   onBlur: 'blur',
+  onChange: 'change',
 });
 
 export type ContentLoaderProps = Bindable<ContentLoaderCatalogProps> & ComponentDirectives;
@@ -517,51 +493,57 @@ export type CountryProps = Bindable<CountryCatalogProps> & ComponentDirectives;
 export const Country = createComponent<CountryProps>('Country');
 
 export type CurrencyProps = Bindable<CurrencyCatalogProps> & {
-  onChange?: ActionBinding | ActionBinding[];
   onBlur?: ActionBinding | ActionBinding[];
+  onChange?: ActionBinding | ActionBinding[];
 } & ComponentDirectives;
 /**
  * Specialized input for entering monetary amounts with currency symbol/code prefix and locale-aware number formatting. Supports arithmetic expression evaluation, currency type selection via dropdown, and decimal precision control.
  */
 export const Currency = createComponent<CurrencyProps>('Currency', {
-  onChange: 'change',
   onBlur: 'blur',
+  onChange: 'change',
 });
 
+export type CustomObjectGridProps = Bindable<CustomObjectGridCatalogProps> & ComponentDirectives;
+/**
+ * Auto-fetching grid for Rippling Custom Objects. Provide objectApiName and fieldApiNames to display records with auto-generated columns, pagination, sorting, and field-type formatting. Increment refreshKey to force a data refresh after mutations.
+ */
+export const CustomObjectGrid = createComponent<CustomObjectGridProps>('CustomObjectGrid');
+
 export type DateProps = Bindable<DateCatalogProps> & {
-  onChange?: ActionBinding | ActionBinding[];
   onBlur?: ActionBinding | ActionBinding[];
+  onChange?: ActionBinding | ActionBinding[];
 } & ComponentDirectives;
 /**
  * A date input that lets users select a single date via calendar or keyboard entry. Use for collecting exact, approximate, or memorable dates (e.g. birth date, start date) and for scheduling. Optionally includes time selection with timezone support. Use DateRange for start/end date pairs; use DateInlineMulti for selecting multiple individual dates without an input field.
  */
 export const Date = createComponent<DateProps>('Date', {
-  onChange: 'change',
   onBlur: 'blur',
+  onChange: 'change',
 });
 
 export type DateInlineMultiProps = Bindable<DateInlineMultiCatalogProps> & {
-  onChange?: ActionBinding | ActionBinding[];
   onBlur?: ActionBinding | ActionBinding[];
+  onChange?: ActionBinding | ActionBinding[];
 } & ComponentDirectives;
 /**
  * An always-visible inline calendar for selecting multiple individual dates without an input field. Use when users need to pick several non-contiguous dates (e.g. holidays, blocked days). Use Date for single-date entry with an input field, or DateRange for start/end date pairs.
  */
 export const DateInlineMulti = createComponent<DateInlineMultiProps>('DateInlineMulti', {
-  onChange: 'change',
   onBlur: 'blur',
+  onChange: 'change',
 });
 
 export type DateRangeProps = Bindable<DateRangeCatalogProps> & {
-  onChange?: ActionBinding | ActionBinding[];
   onBlur?: ActionBinding | ActionBinding[];
+  onChange?: ActionBinding | ActionBinding[];
 } & ComponentDirectives;
 /**
  * A date range picker for selecting a start date and end date pair, such as travel dates, leave periods, or reporting intervals. Use Date instead when only a single date is needed.
  */
 export const DateRange = createComponent<DateRangeProps>('DateRange', {
-  onChange: 'change',
   onBlur: 'blur',
+  onChange: 'change',
 });
 
 export type DaySelectorProps = Bindable<DaySelectorCatalogProps> & {
@@ -587,19 +569,19 @@ export type DividerProps = Bindable<DividerCatalogProps> & ComponentDirectives;
 export const Divider = createComponent<DividerProps>('Divider');
 
 export type DraggableListProps = Bindable<DraggableListCatalogProps> & {
-  onUpdate?: ActionBinding | ActionBinding[];
-  onRemove?: ActionBinding | ActionBinding[];
-  onDragStart?: ActionBinding | ActionBinding[];
   onDragEnd?: ActionBinding | ActionBinding[];
+  onDragStart?: ActionBinding | ActionBinding[];
+  onRemove?: ActionBinding | ActionBinding[];
+  onUpdate?: ActionBinding | ActionBinding[];
 } & ComponentDirectives;
 /**
  * A reorderable drag-and-drop list for dynamically rearranging items. Supports vertical and horizontal layouts; use when item order flexibility is crucial to the user experience.
  */
 export const DraggableList = createComponent<DraggableListProps>('DraggableList', {
-  onUpdate: 'update',
-  onRemove: 'remove',
-  onDragStart: 'dragStart',
   onDragEnd: 'dragEnd',
+  onDragStart: 'dragStart',
+  onRemove: 'remove',
+  onUpdate: 'update',
 });
 
 export type DrawerProps = Bindable<DrawerCatalogProps> & {
@@ -623,29 +605,29 @@ export const Dropdown = createComponent<DropdownProps>('Dropdown', {
 });
 
 export type EmailProps = Bindable<EmailCatalogProps> & {
-  onChange?: ActionBinding | ActionBinding[];
   onBlur?: ActionBinding | ActionBinding[];
-  onFocus?: ActionBinding | ActionBinding[];
+  onChange?: ActionBinding | ActionBinding[];
   onClick?: ActionBinding | ActionBinding[];
+  onFocus?: ActionBinding | ActionBinding[];
   onKeydown?: ActionBinding | ActionBinding[];
   onKeyup?: ActionBinding | ActionBinding[];
-  onPaste?: ActionBinding | ActionBinding[];
   onMouseenter?: ActionBinding | ActionBinding[];
   onMouseleave?: ActionBinding | ActionBinding[];
+  onPaste?: ActionBinding | ActionBinding[];
 } & ComponentDirectives;
 /**
  * A form input field for collecting email addresses with built-in format validation. Use for registration, login, subscriptions, and any context requiring a valid email. Do not use for non-email text like phone numbers or usernames — use Text instead.
  */
 export const Email = createComponent<EmailProps>('Email', {
-  onChange: 'change',
   onBlur: 'blur',
-  onFocus: 'focus',
+  onChange: 'change',
   onClick: 'click',
+  onFocus: 'focus',
   onKeydown: 'keydown',
   onKeyup: 'keyup',
-  onPaste: 'paste',
   onMouseenter: 'mouseenter',
   onMouseleave: 'mouseleave',
+  onPaste: 'paste',
 });
 
 export type ExpansionPanelProps = Bindable<ExpansionPanelCatalogProps> & {
@@ -683,45 +665,45 @@ export const File = createComponent<FileProps>('File', {
 });
 
 export type FileDropProps = Bindable<FileDropCatalogProps> & {
-  onChange?: ActionBinding | ActionBinding[];
   onBlur?: ActionBinding | ActionBinding[];
+  onChange?: ActionBinding | ActionBinding[];
 } & ComponentDirectives;
 /**
  * A file upload input that allows users to drag and drop files into a drop zone or click to browse. Supports single or multiple file uploads with configurable file type restrictions, size limits, and optional image cropping.
  */
 export const FileDrop = createComponent<FileDropProps>('FileDrop', {
-  onChange: 'change',
   onBlur: 'blur',
+  onChange: 'change',
 });
 
 export type FloatingButtonProps = Bindable<FloatingButtonCatalogProps> & {
-  onPress?: ActionBinding | ActionBinding[];
-  onPressWhileDisabled?: ActionBinding | ActionBinding[];
   onMouseEnter?: ActionBinding | ActionBinding[];
   onMouseLeave?: ActionBinding | ActionBinding[];
+  onPress?: ActionBinding | ActionBinding[];
+  onPressWhileDisabled?: ActionBinding | ActionBinding[];
 } & ComponentDirectives;
 /**
  * A floating action button (FAB) that highlights the primary action on a screen, staying visible above other content. Uses an icon only (no text label) and typically appears once per screen for key tasks like creating, favoriting, or sharing.
  */
 export const FloatingButton = createComponent<FloatingButtonProps>('FloatingButton', {
-  onPress: 'press',
-  onPressWhileDisabled: 'pressWhileDisabled',
   onMouseEnter: 'mouseEnter',
   onMouseLeave: 'mouseLeave',
+  onPress: 'press',
+  onPressWhileDisabled: 'pressWhileDisabled',
 });
 
 export type GridProps = Bindable<GridCatalogProps> & {
-  onRowClick?: ActionBinding | ActionBinding[];
-  onRowAction?: ActionBinding | ActionBinding[];
   onHeaderAction?: ActionBinding | ActionBinding[];
+  onRowAction?: ActionBinding | ActionBinding[];
+  onRowClick?: ActionBinding | ActionBinding[];
 } & ComponentDirectives;
 /**
  * Data grid for displaying tabular data. Each column defines a header, data key path, and cell type. Use $bindState on selectedRow to capture clicked row data. Data is an array of row objects with _key as unique identifier.
  */
 export const Grid = createComponent<GridProps>('Grid', {
-  onRowClick: 'rowClick',
-  onRowAction: 'rowAction',
   onHeaderAction: 'headerAction',
+  onRowAction: 'rowAction',
+  onRowClick: 'rowClick',
 });
 
 export type HStackProps = Bindable<HStackCatalogProps> &
@@ -746,33 +728,33 @@ export type IconProps = Bindable<IconCatalogProps> & {
 export const Icon = createComponent<IconProps>('Icon', { onPress: 'press' });
 
 export type IconButtonProps = Bindable<IconButtonCatalogProps> & {
-  onPress?: ActionBinding | ActionBinding[];
-  onPressWhileDisabled?: ActionBinding | ActionBinding[];
   onMouseEnter?: ActionBinding | ActionBinding[];
   onMouseLeave?: ActionBinding | ActionBinding[];
+  onPress?: ActionBinding | ActionBinding[];
+  onPressWhileDisabled?: ActionBinding | ActionBinding[];
 } & ComponentDirectives;
 /**
  * An icon-only button for repeated, common, or persistent actions when screen real estate is limited. Use for well-known actions like search, refresh, edit, or navigation — use a regular Button with text when the action is critical or requires more context.
  */
 export const IconButton = createComponent<IconButtonProps>('IconButton', {
-  onPress: 'press',
-  onPressWhileDisabled: 'pressWhileDisabled',
   onMouseEnter: 'mouseEnter',
   onMouseLeave: 'mouseLeave',
+  onPress: 'press',
+  onPressWhileDisabled: 'pressWhileDisabled',
 });
 
 export type ImageProps = Bindable<ImageCatalogProps> & {
-  onPress?: ActionBinding | ActionBinding[];
-  onLoad?: ActionBinding | ActionBinding[];
   onError?: ActionBinding | ActionBinding[];
+  onLoad?: ActionBinding | ActionBinding[];
+  onPress?: ActionBinding | ActionBinding[];
 } & ComponentDirectives;
 /**
  * Displays an image with optional theme-aware light/dark sources, lazy loading, and click interaction. Use for static or decorative images — use Avatar for user profile pictures, Icon for symbolic glyphs, or ImageViewer for zoomable image galleries.
  */
 export const Image = createComponent<ImageProps>('Image', {
-  onPress: 'press',
-  onLoad: 'load',
   onError: 'error',
+  onLoad: 'load',
+  onPress: 'press',
 });
 
 export type ImageViewerProps = Bindable<ImageViewerCatalogProps> & ComponentDirectives;
@@ -854,31 +836,31 @@ export type LoaderCardProps = Bindable<LoaderCardCatalogProps> & ComponentDirect
 export const LoaderCard = createComponent<LoaderCardProps>('LoaderCard');
 
 export type LocationCardProps = Bindable<LocationCardCatalogProps> & {
-  onEdit?: ActionBinding | ActionBinding[];
-  onDelete?: ActionBinding | ActionBinding[];
-  onClick?: ActionBinding | ActionBinding[];
   onAction?: ActionBinding | ActionBinding[];
+  onClick?: ActionBinding | ActionBinding[];
+  onDelete?: ActionBinding | ActionBinding[];
+  onEdit?: ActionBinding | ActionBinding[];
 } & ComponentDirectives;
 /**
  * A specialized card for displaying a physical location with its nickname and formatted address. Supports edit/delete actions, custom dropdown actions, and navigation links to location details.
  */
 export const LocationCard = createComponent<LocationCardProps>('LocationCard', {
-  onEdit: 'edit',
-  onDelete: 'delete',
-  onClick: 'click',
   onAction: 'action',
+  onClick: 'click',
+  onDelete: 'delete',
+  onEdit: 'edit',
 });
 
 export type MaskerProps = Bindable<MaskerCatalogProps> & {
-  onChange?: ActionBinding | ActionBinding[];
   onBlur?: ActionBinding | ActionBinding[];
+  onChange?: ActionBinding | ActionBinding[];
 } & ComponentDirectives;
 /**
  * A text input that enforces a specific format pattern using mask characters (e.g. phone numbers, SSNs, postal codes). Use when the input value must conform to a known fixed-length pattern with digit, letter, or mixed character slots.
  */
 export const Masker = createComponent<MaskerProps>('Masker', {
-  onChange: 'change',
   onBlur: 'blur',
+  onChange: 'change',
 });
 
 export type MenuListProps = Bindable<MenuListCatalogProps> & {
@@ -913,33 +895,39 @@ export type ModalFooterProps = Bindable<ModalFooterCatalogProps> &
 export const ModalFooter = createComponent<ModalFooterProps>('ModalFooter');
 
 export type NestedListProps = Bindable<NestedListCatalogProps> & {
-  onToggle?: ActionBinding | ActionBinding[];
   onSelect?: ActionBinding | ActionBinding[];
+  onToggle?: ActionBinding | ActionBinding[];
 } & ComponentDirectives;
 /**
  * A hierarchical nested list for displaying complex data structures like categories and subcategories, supporting up to four levels of expandable/collapsible nesting. Use for organizing large amounts of nested information such as organizational structures or department lists.
  */
 export const NestedList = createComponent<NestedListProps>('NestedList', {
-  onToggle: 'toggle',
   onSelect: 'select',
+  onToggle: 'toggle',
 });
 
 export type NumberProps = Bindable<NumberCatalogProps> & {
-  onChange?: ActionBinding | ActionBinding[];
   onBlur?: ActionBinding | ActionBinding[];
-  onChangeRaw?: ActionBinding | ActionBinding[];
+  onChange?: ActionBinding | ActionBinding[];
   onChangeCalculationState?: ActionBinding | ActionBinding[];
+  onChangeRaw?: ActionBinding | ActionBinding[];
 } & ComponentDirectives;
 /**
  * A general-purpose numeric input for entering whole or decimal numbers. Supports min/max range constraints, step increments, locale-aware formatting, and inline arithmetic evaluation. Use for quantities, counts, measurements, or any plain number entry — use Currency for monetary amounts, Percentage for percent values, or Slider/RangeSlider for visual range selection.
  */
 export const Number = createComponent<NumberProps>('Number', {
-  onChange: 'change',
   onBlur: 'blur',
-  onChangeRaw: 'changeRaw',
+  onChange: 'change',
   onChangeCalculationState: 'changeCalculationState',
+  onChangeRaw: 'changeRaw',
 });
 
+export type ObjectListViewProps = Bindable<ObjectListViewCatalogProps> & ComponentDirectives;
+/**
+ * Full-featured object list page with list view management. Supports multiple list views, view switching, inline editing, bulk actions, and record management. Use objectApiName to specify the object. Optionally set defaultListViewId to pre-select a specific list view.
+ */
+export const ObjectListView = createComponent<ObjectListViewProps>('ObjectListView');
+
 export type ObjectUIProps = Bindable<ObjectUICatalogProps> &
   ComponentDirectives & { children?: SpecNode | SpecNode[] };
 /**
@@ -1031,71 +1019,71 @@ export const Pane = createComponent<PaneProps>('Pane', {
 });
 
 export type PasswordProps = Bindable<PasswordCatalogProps> & {
-  onChange?: ActionBinding | ActionBinding[];
   onBlur?: ActionBinding | ActionBinding[];
-  onFocus?: ActionBinding | ActionBinding[];
+  onChange?: ActionBinding | ActionBinding[];
   onClick?: ActionBinding | ActionBinding[];
+  onFocus?: ActionBinding | ActionBinding[];
   onKeydown?: ActionBinding | ActionBinding[];
   onKeyup?: ActionBinding | ActionBinding[];
-  onPaste?: ActionBinding | ActionBinding[];
   onMouseenter?: ActionBinding | ActionBinding[];
   onMouseleave?: ActionBinding | ActionBinding[];
+  onPaste?: ActionBinding | ActionBinding[];
   onReveal?: ActionBinding | ActionBinding[];
 } & ComponentDirectives;
 /**
  * A secure input field for entering or creating passwords, with automatic character masking and an optional visibility toggle. Use in login, signup, or verification flows.
  */
 export const Password = createComponent<PasswordProps>('Password', {
-  onChange: 'change',
   onBlur: 'blur',
-  onFocus: 'focus',
+  onChange: 'change',
   onClick: 'click',
+  onFocus: 'focus',
   onKeydown: 'keydown',
   onKeyup: 'keyup',
-  onPaste: 'paste',
   onMouseenter: 'mouseenter',
   onMouseleave: 'mouseleave',
+  onPaste: 'paste',
   onReveal: 'reveal',
 });
 
 export type PercentageProps = Bindable<PercentageCatalogProps> & {
-  onChange?: ActionBinding | ActionBinding[];
   onBlur?: ActionBinding | ActionBinding[];
+  onChange?: ActionBinding | ActionBinding[];
 } & ComponentDirectives;
 /**
  * A numeric input for entering and editing percentage values. Automatically appends a % suffix, supports decimal precision, negative values, and upper/lower bounds. Use for financial calculations, progress indicators, or statistical entries requiring percentage values.
  */
 export const Percentage = createComponent<PercentageProps>('Percentage', {
-  onChange: 'change',
   onBlur: 'blur',
+  onChange: 'change',
 });
 
 export type PhoneProps = Bindable<PhoneCatalogProps> & {
-  onChange?: ActionBinding | ActionBinding[];
   onBlur?: ActionBinding | ActionBinding[];
-  onFocus?: ActionBinding | ActionBinding[];
+  onChange?: ActionBinding | ActionBinding[];
   onClick?: ActionBinding | ActionBinding[];
+  onCountryCodeChange?: ActionBinding | ActionBinding[];
+  onFocus?: ActionBinding | ActionBinding[];
   onKeydown?: ActionBinding | ActionBinding[];
   onKeyup?: ActionBinding | ActionBinding[];
-  onPaste?: ActionBinding | ActionBinding[];
   onMouseenter?: ActionBinding | ActionBinding[];
   onMouseleave?: ActionBinding | ActionBinding[];
-  onCountryCodeChange?: ActionBinding | ActionBinding[];
+  onPaste?: ActionBinding | ActionBinding[];
 } & ComponentDirectives;
 /**
  * A specialized input for entering and editing phone numbers with automatic region-based formatting, international support, and an optional country code dropdown selector.
  */
 export const Phone = createComponent<PhoneProps>('Phone', {
-  onChange: 'change',
   onBlur: 'blur',
-  onFocus: 'focus',
+  onChange: 'change',
   onClick: 'click',
+  onCountryCodeChange: 'countryCodeChange',
+  onFocus: 'focus',
   onKeydown: 'keydown',
   onKeyup: 'keyup',
-  onPaste: 'paste',
   onMouseenter: 'mouseenter',
   onMouseleave: 'mouseleave',
-  onCountryCodeChange: 'countryCodeChange',
+  onPaste: 'paste',
 });
 
 export type ProgressBarProps = Bindable<ProgressBarCatalogProps> & ComponentDirectives;
@@ -1111,8 +1099,8 @@ export type ProgressStepsProps = Bindable<ProgressStepsCatalogProps> & Component
 export const ProgressSteps = createComponent<ProgressStepsProps>('ProgressSteps');
 
 export type RadioProps = Bindable<RadioCatalogProps> & {
-  onChange?: ActionBinding | ActionBinding[];
   onBlur?: ActionBinding | ActionBinding[];
+  onChange?: ActionBinding | ActionBinding[];
   onMouseenter?: ActionBinding | ActionBinding[];
   onMouseleave?: ActionBinding | ActionBinding[];
 } & ComponentDirectives;
@@ -1120,26 +1108,26 @@ export type RadioProps = Bindable<RadioCatalogProps> & {
  * Radio buttons let users choose a single option from two or more mutually exclusive options. Prefer over Select when showing 5 or fewer options that need to be immediately visible. Use Checkbox instead when multiple selections are allowed.
  */
 export const Radio = createComponent<RadioProps>('Radio', {
-  onChange: 'change',
   onBlur: 'blur',
+  onChange: 'change',
   onMouseenter: 'mouseenter',
   onMouseleave: 'mouseleave',
 });
 
 export type RangeSliderProps = Bindable<RangeSliderCatalogProps> & {
-  onChange?: ActionBinding | ActionBinding[];
-  onBeforeChange?: ActionBinding | ActionBinding[];
   onAfterChange?: ActionBinding | ActionBinding[];
+  onBeforeChange?: ActionBinding | ActionBinding[];
   onBlur?: ActionBinding | ActionBinding[];
+  onChange?: ActionBinding | ActionBinding[];
 } & ComponentDirectives;
 /**
  * A two-handle slider for selecting a numeric range within a track. Use for defining min/max boundaries such as price filters or value ranges.
  */
 export const RangeSlider = createComponent<RangeSliderProps>('RangeSlider', {
-  onChange: 'change',
-  onBeforeChange: 'beforeChange',
   onAfterChange: 'afterChange',
+  onBeforeChange: 'beforeChange',
   onBlur: 'blur',
+  onChange: 'change',
 });
 
 export type ReportLoaderProps = Bindable<ReportLoaderCatalogProps> & ComponentDirectives;
@@ -1160,6 +1148,26 @@ export type ReportViewerLoaderProps = Bindable<ReportViewerLoaderCatalogProps> &
  */
 export const ReportViewerLoader = createComponent<ReportViewerLoaderProps>('ReportViewerLoader');
 
+export type ResizableBoardProps = Bindable<ResizableBoardCatalogProps> & {
+  onBreakpointChange?: ActionBinding | ActionBinding[];
+  onDragStart?: ActionBinding | ActionBinding[];
+  onDragStop?: ActionBinding | ActionBinding[];
+  onLayoutChange?: ActionBinding | ActionBinding[];
+  onResizeStart?: ActionBinding | ActionBinding[];
+  onResizeStop?: ActionBinding | ActionBinding[];
+} & ComponentDirectives & { children?: SpecNode | SpecNode[] };
+/**
+ * A responsive 12-column grid for dashboard widgets that supports drag-to-rearrange and resize-from-any-corner. Use for user-curated dashboards where end-users decide which tiles appear where and how large they are. Each direct child element's spec id must match a `layouts[].identifier`; that layout entry controls the child's size and per-block styling.
+ */
+export const ResizableBoard = createComponent<ResizableBoardProps>('ResizableBoard', {
+  onBreakpointChange: 'breakpointChange',
+  onDragStart: 'dragStart',
+  onDragStop: 'dragStop',
+  onLayoutChange: 'layoutChange',
+  onResizeStart: 'resizeStart',
+  onResizeStop: 'resizeStop',
+});
+
 export type ResponsiveProps = Bindable<ResponsiveCatalogProps> &
   ComponentDirectives & { children?: SpecNode | SpecNode[] };
 /**
@@ -1168,33 +1176,33 @@ export type ResponsiveProps = Bindable<ResponsiveCatalogProps> &
 export const Responsive = createComponent<ResponsiveProps>('Responsive');
 
 export type SegmentedControlProps = Bindable<SegmentedControlCatalogProps> & {
-  onChange?: ActionBinding | ActionBinding[];
   onBlur?: ActionBinding | ActionBinding[];
+  onChange?: ActionBinding | ActionBinding[];
 } & ComponentDirectives;
 /**
  * A linear set of buttons for toggling between closely related choices (2-5 short-label options) and instantly applying a selection. Supports single, multi, and range selection modes. NOT suitable for binary (2-option) choices — use Toggle or ToggleButton instead. Prefer over Radio when options are short labels needing a compact inline layout; use Radio for longer phrases, Tabs for content navigation.
  */
 export const SegmentedControl = createComponent<SegmentedControlProps>('SegmentedControl', {
-  onChange: 'change',
   onBlur: 'blur',
+  onChange: 'change',
 });
 
 export type SelectProps = Bindable<SelectCatalogProps> & {
-  onChange?: ActionBinding | ActionBinding[];
   onBlur?: ActionBinding | ActionBinding[];
+  onChange?: ActionBinding | ActionBinding[];
   onFocus?: ActionBinding | ActionBinding[];
-  onPaste?: ActionBinding | ActionBinding[];
   onMenuToggle?: ActionBinding | ActionBinding[];
+  onPaste?: ActionBinding | ActionBinding[];
 } & ComponentDirectives;
 /**
  * A dropdown input that lets users choose one or more options from a predefined list. Use for long lists, searchable lists, or constrained spaces. Use Radio or Checkbox cards instead when there are few options and the selection is a key part of the flow.
  */
 export const Select = createComponent<SelectProps>('Select', {
-  onChange: 'change',
   onBlur: 'blur',
+  onChange: 'change',
   onFocus: 'focus',
-  onPaste: 'paste',
   onMenuToggle: 'menuToggle',
+  onPaste: 'paste',
 });
 
 export type SelectableGroupProps = Bindable<SelectableGroupCatalogProps> & {
@@ -1239,15 +1247,15 @@ export const Signature = createComponent<SignatureProps>('Signature', {
 });
 
 export type SinProps = Bindable<SinCatalogProps> & {
-  onChange?: ActionBinding | ActionBinding[];
   onBlur?: ActionBinding | ActionBinding[];
+  onChange?: ActionBinding | ActionBinding[];
 } & ComponentDirectives;
 /**
  * A specialized masked input for entering Canadian Social Insurance Numbers (SIN). Automatically formats the 9-digit value as "XXX XXX XXX" while storing the unmasked digits. Use for Canadian employee or tax forms requiring a SIN — use Ssn for US Social Security Numbers, or Masker for other custom-format masked inputs.
  */
 export const Sin = createComponent<SinProps>('Sin', {
-  onChange: 'change',
   onBlur: 'blur',
+  onChange: 'change',
 });
 
 export type SkeletonProps = Bindable<SkeletonCatalogProps> & ComponentDirectives;
@@ -1257,19 +1265,19 @@ export type SkeletonProps = Bindable<SkeletonCatalogProps> & ComponentDirectives
 export const Skeleton = createComponent<SkeletonProps>('Skeleton');
 
 export type SliderProps = Bindable<SliderCatalogProps> & {
-  onChange?: ActionBinding | ActionBinding[];
-  onBlur?: ActionBinding | ActionBinding[];
-  onBeforeChange?: ActionBinding | ActionBinding[];
   onAfterChange?: ActionBinding | ActionBinding[];
+  onBeforeChange?: ActionBinding | ActionBinding[];
+  onBlur?: ActionBinding | ActionBinding[];
+  onChange?: ActionBinding | ActionBinding[];
 } & ComponentDirectives;
 /**
  * An interactive control for selecting a single numeric value within a defined range by dragging a handle along a horizontal track. Use for numeric ranges like 0–100; do not use for extremely large ranges (e.g. 1–1000) or non-numeric values.
  */
 export const Slider = createComponent<SliderProps>('Slider', {
-  onChange: 'change',
-  onBlur: 'blur',
-  onBeforeChange: 'beforeChange',
   onAfterChange: 'afterChange',
+  onBeforeChange: 'beforeChange',
+  onBlur: 'blur',
+  onChange: 'change',
 });
 
 export type SnackBarProps = Bindable<SnackBarCatalogProps> & {
@@ -1289,15 +1297,15 @@ export type SpinnerProps = Bindable<SpinnerCatalogProps> & ComponentDirectives;
 export const Spinner = createComponent<SpinnerProps>('Spinner');
 
 export type SplitButtonProps = Bindable<SplitButtonCatalogProps> & {
-  onPress?: ActionBinding | ActionBinding[];
   onDropdownChange?: ActionBinding | ActionBinding[];
+  onPress?: ActionBinding | ActionBinding[];
 } & ComponentDirectives;
 /**
  * A compound button that combines a primary action with a secondary trailing button, typically opening a dropdown of alternative actions. Use when the user has a main action with related alternatives (e.g. "Save" with "Save as draft", "Save and publish").
  */
 export const SplitButton = createComponent<SplitButtonProps>('SplitButton', {
-  onPress: 'press',
   onDropdownChange: 'dropdownChange',
+  onPress: 'press',
 });
 
 export type SplitPaneProps = Bindable<SplitPaneCatalogProps> &
@@ -1308,15 +1316,15 @@ export type SplitPaneProps = Bindable<SplitPaneCatalogProps> &
 export const SplitPane = createComponent<SplitPaneProps>('SplitPane');
 
 export type SsnProps = Bindable<SsnCatalogProps> & {
-  onChange?: ActionBinding | ActionBinding[];
   onBlur?: ActionBinding | ActionBinding[];
+  onChange?: ActionBinding | ActionBinding[];
 } & ComponentDirectives;
 /**
  * A specialized masked input for collecting US Social Security Numbers (SSN). Automatically formats display as XXX-XX-XXXX while storing the raw 9-digit value. Use for any form field that requires an SSN; use Text for general text or Password for secret credentials.
  */
 export const Ssn = createComponent<SsnProps>('Ssn', {
-  onChange: 'change',
   onBlur: 'blur',
+  onChange: 'change',
 });
 
 export type StatusProps = Bindable<StatusCatalogProps> & ComponentDirectives;
@@ -1346,15 +1354,15 @@ export const Survey = createComponent<SurveyProps>('Survey', {
 });
 
 export type SwitchProps = Bindable<SwitchCatalogProps> & {
-  onChange?: ActionBinding | ActionBinding[];
   onBlur?: ActionBinding | ActionBinding[];
+  onChange?: ActionBinding | ActionBinding[];
 } & ComponentDirectives;
 /**
  * A toggle that lets users switch instantly between on and off states. Use for activation settings that take effect immediately; use Checkbox instead for selection or agreement scenarios that require submission.
  */
 export const Switch = createComponent<SwitchProps>('Switch', {
-  onChange: 'change',
   onBlur: 'blur',
+  onChange: 'change',
 });
 
 export type TabProps = Bindable<TabCatalogProps> & {
@@ -1378,19 +1386,19 @@ export type TextProps = Bindable<TextCatalogProps> & ComponentDirectives;
 export const Text = createComponent<TextProps>('Text');
 
 export type TextAutoSuggestProps = Bindable<TextAutoSuggestCatalogProps> & {
-  onChange?: ActionBinding | ActionBinding[];
   onBlur?: ActionBinding | ActionBinding[];
-  onFocus?: ActionBinding | ActionBinding[];
+  onChange?: ActionBinding | ActionBinding[];
   onClick?: ActionBinding | ActionBinding[];
+  onFocus?: ActionBinding | ActionBinding[];
 } & ComponentDirectives;
 /**
  * An autocomplete input that offers text suggestions in a dropdown menu as the user types. Unlike Select, users can either manually type free-form text or pick from the suggestions list.
  */
 export const TextAutoSuggest = createComponent<TextAutoSuggestProps>('TextAutoSuggest', {
-  onChange: 'change',
   onBlur: 'blur',
-  onFocus: 'focus',
+  onChange: 'change',
   onClick: 'click',
+  onFocus: 'focus',
 });
 
 export type TextClipProps = Bindable<TextClipCatalogProps> &
@@ -1401,29 +1409,29 @@ export type TextClipProps = Bindable<TextClipCatalogProps> &
 export const TextClip = createComponent<TextClipProps>('TextClip');
 
 export type TextInputProps = Bindable<TextInputCatalogProps> & {
-  onChange?: ActionBinding | ActionBinding[];
   onBlur?: ActionBinding | ActionBinding[];
-  onFocus?: ActionBinding | ActionBinding[];
+  onChange?: ActionBinding | ActionBinding[];
   onClick?: ActionBinding | ActionBinding[];
+  onFocus?: ActionBinding | ActionBinding[];
   onKeydown?: ActionBinding | ActionBinding[];
   onKeyup?: ActionBinding | ActionBinding[];
-  onPaste?: ActionBinding | ActionBinding[];
   onMouseenter?: ActionBinding | ActionBinding[];
   onMouseleave?: ActionBinding | ActionBinding[];
+  onPaste?: ActionBinding | ActionBinding[];
 } & ComponentDirectives;
 /**
  * A single-line text input for collecting short-form text data such as names, emails, URLs, or search queries. Use TextArea for multi-line content or Number for numeric-only values.
  */
 export const TextInput = createComponent<TextInputProps>('TextInput', {
-  onChange: 'change',
   onBlur: 'blur',
-  onFocus: 'focus',
+  onChange: 'change',
   onClick: 'click',
+  onFocus: 'focus',
   onKeydown: 'keydown',
   onKeyup: 'keyup',
-  onPaste: 'paste',
   onMouseenter: 'mouseenter',
   onMouseleave: 'mouseleave',
+  onPaste: 'paste',
 });
 
 export type TextSnippetProps = Bindable<TextSnippetCatalogProps> & ComponentDirectives;
@@ -1433,54 +1441,54 @@ export type TextSnippetProps = Bindable<TextSnippetCatalogProps> & ComponentDire
 export const TextSnippet = createComponent<TextSnippetProps>('TextSnippet');
 
 export type TextareaProps = Bindable<TextareaCatalogProps> & {
-  onChange?: ActionBinding | ActionBinding[];
   onBlur?: ActionBinding | ActionBinding[];
+  onChange?: ActionBinding | ActionBinding[];
   onFocus?: ActionBinding | ActionBinding[];
 } & ComponentDirectives;
 /**
  * A multi-line text input for entering longer free-form text such as comments, descriptions, or paragraphs. Use TextInput instead for short single-line entries.
  */
 export const Textarea = createComponent<TextareaProps>('Textarea', {
-  onChange: 'change',
   onBlur: 'blur',
+  onChange: 'change',
   onFocus: 'focus',
 });
 
 export type TimeProps = Bindable<TimeCatalogProps> & {
-  onChange?: ActionBinding | ActionBinding[];
   onBlur?: ActionBinding | ActionBinding[];
+  onChange?: ActionBinding | ActionBinding[];
 } & ComponentDirectives;
 /**
  * A form input for entering or selecting a specific time of day. Supports typed entry, optional dropdown time selection, timezone display, and locale-aware formatting.
  */
 export const Time = createComponent<TimeProps>('Time', {
-  onChange: 'change',
   onBlur: 'blur',
+  onChange: 'change',
 });
 
 export type TimeRangeProps = Bindable<TimeRangeCatalogProps> & {
-  onChange?: ActionBinding | ActionBinding[];
   onBlur?: ActionBinding | ActionBinding[];
+  onChange?: ActionBinding | ActionBinding[];
 } & ComponentDirectives;
 /**
  * A time range input for selecting a start and end time pair, such as work schedules, shifts, or availability windows. Stores a [startTime, endTime] tuple of ISO 8601 strings. Supports timezone display and next-day span detection.
  */
 export const TimeRange = createComponent<TimeRangeProps>('TimeRange', {
-  onChange: 'change',
   onBlur: 'blur',
+  onChange: 'change',
 });
 
 export type TimezoneProps = Bindable<TimezoneCatalogProps> & {
-  onChange?: ActionBinding | ActionBinding[];
   onBlur?: ActionBinding | ActionBinding[];
+  onChange?: ActionBinding | ActionBinding[];
   onFocus?: ActionBinding | ActionBinding[];
 } & ComponentDirectives;
 /**
  * A specialized select component for choosing a timezone. Lists all IANA timezones with search filtering. Use this when the user needs to pick a standalone timezone; use Time with timezone instead when selecting a time together with a timezone.
  */
 export const Timezone = createComponent<TimezoneProps>('Timezone', {
-  onChange: 'change',
   onBlur: 'blur',
+  onChange: 'change',
   onFocus: 'focus',
 });
 
@@ -1538,186 +1546,27 @@ export type VideoProps = Bindable<VideoCatalogProps> & ComponentDirectives;
 export const Video = createComponent<VideoProps>('Video');
 
 export type WorkEmailProps = Bindable<WorkEmailCatalogProps> & {
-  onChange?: ActionBinding | ActionBinding[];
   onBlur?: ActionBinding | ActionBinding[];
-  onFocus?: ActionBinding | ActionBinding[];
+  onChange?: ActionBinding | ActionBinding[];
   onClick?: ActionBinding | ActionBinding[];
+  onFocus?: ActionBinding | ActionBinding[];
   onKeydown?: ActionBinding | ActionBinding[];
   onKeyup?: ActionBinding | ActionBinding[];
-  onPaste?: ActionBinding | ActionBinding[];
   onMouseenter?: ActionBinding | ActionBinding[];
   onMouseleave?: ActionBinding | ActionBinding[];
+  onPaste?: ActionBinding | ActionBinding[];
 } & ComponentDirectives;
 /**
  * A specialized email input for entering work email addresses, featuring a domain suffix dropdown selector so users type only the username while choosing from a predefined list of company domains
  */
 export const WorkEmail = createComponent<WorkEmailProps>('WorkEmail', {
-  onChange: 'change',
   onBlur: 'blur',
-  onFocus: 'focus',
+  onChange: 'change',
   onClick: 'click',
+  onFocus: 'focus',
   onKeydown: 'keydown',
   onKeyup: 'keyup',
-  onPaste: 'paste',
   onMouseenter: 'mouseenter',
   onMouseleave: 'mouseleave',
+  onPaste: 'paste',
 });
-
-export type AnalyticsCardProps = Bindable<AnalyticsCardCatalogProps> & {
-  onConfigure?: ActionBinding | ActionBinding[];
-} & ComponentDirectives & { children?: SpecNode | SpecNode[] };
-/**
- * Dashboard tile chrome with a fixed header (start: heading + sub-heading; end: optional configure button) and a children body. The header renders immediately when the spec lands so the chrome is visible while the body subtree resolves its run_query data through a WithSpinner. Use this instead of the legacy Card for every dashboard tile (KPI, visual chart, grid).
- */
-export const AnalyticsCard = createComponent<AnalyticsCardProps>('AnalyticsCard', {
-  onConfigure: 'configure',
-});
-
-export type ResizableBoardProps = Bindable<ResizableBoardCatalogProps> &
-  ComponentDirectives & { children?: SpecNode | SpecNode[] };
-/**
- * Resizable dashboard board for AI widget layouts. Wraps each child in a Pebble ResizableBoard block.
- */
-export const ResizableBoard = createComponent<ResizableBoardProps>('ResizableBoard');
-
-export type EChartProps = Bindable<EChartCatalogProps> & {
-  onClick?: ActionBinding | ActionBinding[];
-  onLegendChange?: ActionBinding | ActionBinding[];
-  onDataZoomChange?: ActionBinding | ActionBinding[];
-} & ComponentDirectives;
-/**
- * Raw ECharts renderer for SDUI. Provide a JSON-safe ECharts option object. It fills its parent card by default and keeps a usable minimum height when no fixed parent height exists; optional height/width can override sizing.
- */
-export const EChart = createComponent<EChartProps>('EChart', {
-  onClick: 'click',
-  onLegendChange: 'legendChange',
-  onDataZoomChange: 'dataZoomChange',
-});
-
-export type RichTextProps = Bindable<RichTextCatalogProps> & ComponentDirectives;
-/**
- * Read-only HTML content rendered with the shared RichTextEditor (non-editable). Generic SDUI building block for narrative or explanatory copy in any product layout.
- */
-export const RichText = createComponent<RichTextProps>('RichText');
-
-export type DashboardRichTextProps = Bindable<DashboardRichTextCatalogProps> & ComponentDirectives;
-/**
- * Deprecated alias for RichText. Same props; prefer type `RichText` in new specs.
- */
-export const DashboardRichText = createComponent<DashboardRichTextProps>('DashboardRichText');
-
-export type CustomObjectGridProps = Bindable<CustomObjectGridCatalogProps> & ComponentDirectives;
-/**
- * Auto-fetching grid for Rippling Custom Objects. Provide objectApiName and fieldApiNames to display records with auto-generated columns, pagination, sorting, and field-type formatting. Increment refreshKey to force a data refresh after mutations.
- */
-export const CustomObjectGrid = createComponent<CustomObjectGridProps>('CustomObjectGrid');
-
-export type ObjectListViewProps = Bindable<ObjectListViewCatalogProps> & ComponentDirectives;
-/**
- * Full-featured object list page with list view management. Supports multiple list views, view switching, inline editing, bulk actions, and record management. Use objectApiName to specify the object. Optionally set defaultListViewId to pre-select a specific list view.
- */
-export const ObjectListView = createComponent<ObjectListViewProps>('ObjectListView');
-
-export type BarChartProps = Bindable<BarChartCatalogProps> & {
-  onBarClick?: ActionBinding | ActionBinding[];
-} & ComponentDirectives;
-/**
- * Vertical bar chart powered by ECharts. Provide series (name + data array) and optional categories for the x-axis. Use showStackedPercent for 100%-stacked bars, showBarLabel to render values on bars, and showLegend to display a series legend. Use $bindState on selected to capture the clicked bar.
- */
-export const BarChart = createComponent<BarChartProps>('BarChart', {
-  onBarClick: 'barClick',
-});
-
-export type LineChartProps = Bindable<LineChartCatalogProps> & ComponentDirectives;
-/**
- * Line chart powered by ECharts. Provide series (name + data array) and optional categories for the x-axis. Use connectNulls to bridge null gaps, showAreaPercent for 100%-stacked area, and showLegend to display a series legend.
- */
-export const LineChart = createComponent<LineChartProps>('LineChart');
-
-export type HorizontalBarChartProps = Bindable<HorizontalBarChartCatalogProps> & ComponentDirectives;
-/**
- * Horizontal bar chart powered by ECharts. Same data shape as BarChart but renders bars horizontally. Categories appear on the y-axis and values on the x-axis.
- */
-export const HorizontalBarChart = createComponent<HorizontalBarChartProps>('HorizontalBarChart');
-
-export type CombinationChartProps = Bindable<CombinationChartCatalogProps> & ComponentDirectives;
-/**
- * Combination chart with bars and lines on dual Y-axes. Bars use the left Y-axis by default; lines can use the right Y-axis via yAxisIndex: 1.
- */
-export const CombinationChart = createComponent<CombinationChartProps>('CombinationChart');
-
-export type PieChartProps = Bindable<PieChartCatalogProps> & ComponentDirectives;
-/**
- * Pie / donut chart. Each series entry has a data array of {name, value} pairs. Use radius: ["50%", "70%"] for a donut hole.
- */
-export const PieChart = createComponent<PieChartProps>('PieChart');
-
-export type ScatterChartProps = Bindable<ScatterChartCatalogProps> & ComponentDirectives;
-/**
- * Scatter plot. Each series contains [x, y] data pairs plotted as individual points.
- */
-export const ScatterChart = createComponent<ScatterChartProps>('ScatterChart');
-
-export type FunnelChartProps = Bindable<FunnelChartCatalogProps> & ComponentDirectives;
-/**
- * Funnel chart for conversion or stage-based data. Data items are ordered by value (largest at top).
- */
-export const FunnelChart = createComponent<FunnelChartProps>('FunnelChart');
-
-export type GaugeChartProps = Bindable<GaugeChartCatalogProps> & ComponentDirectives;
-/**
- * Gauge (speedometer) chart. Displays a single numeric value against colored segments. Segments define the scale breakpoints and their colors.
- */
-export const GaugeChart = createComponent<GaugeChartProps>('GaugeChart');
-
-export type SunburstChartProps = Bindable<SunburstChartCatalogProps> & ComponentDirectives;
-/**
- * Sunburst (multi-level pie) chart for hierarchical data. Each node has a name, optional value, and optional children array.
- */
-export const SunburstChart = createComponent<SunburstChartProps>('SunburstChart');
-
-export type WithSpinnerProps = Bindable<WithSpinnerCatalogProps> & {
-  onLoad?: ActionBinding | ActionBinding[];
-} & ComponentDirectives & { children?: SpecNode | SpecNode[] };
-/**
- * Wrapper that shows a spinner while loading. Emits `load` once on mount so a handler can start fetching data. Renders children only when `isLoading` is false.
- */
-export const WithSpinner = createComponent<WithSpinnerProps>('WithSpinner', {
-  onLoad: 'load',
-});
-
-export type RadarChartProps = Bindable<RadarChartCatalogProps> & ComponentDirectives;
-/**
- * Radar (spider) chart for comparing multiple variables across categories. Each indicator defines a spoke axis. Provide radarIndicators (axis definitions) and radarOptions (series data).
- */
-export const RadarChart = createComponent<RadarChartProps>('RadarChart');
-
-export type RadarFilledChartProps = Bindable<RadarFilledChartCatalogProps> & ComponentDirectives;
-/**
- * Radar chart with filled area between data points and the center. Same data shape as RadarChart but renders with semi-transparent area fill for each series.
- */
-export const RadarFilledChart = createComponent<RadarFilledChartProps>('RadarFilledChart');
-
-export type HeatmapCalendarChartProps = Bindable<HeatmapCalendarChartCatalogProps> & ComponentDirectives;
-/**
- * Calendar heatmap chart that renders data points on a calendar grid. Each cell represents a day, colored by value intensity. Provide heatmapOptions with [date, value] data and calendarOptions with a date range.
- */
-export const HeatmapCalendarChart = createComponent<HeatmapCalendarChartProps>('HeatmapCalendarChart');
-
-export type HeatmapChartProps = Bindable<HeatmapChartCatalogProps> & ComponentDirectives;
-/**
- * Grid-based heatmap chart for showing magnitude across two dimensions. Data format: [[xIndex, yIndex, value], …]. Provide category labels for both axes.
- */
-export const HeatmapChart = createComponent<HeatmapChartProps>('HeatmapChart');
-
-export type TreemapChartProps = Bindable<TreemapChartCatalogProps> & ComponentDirectives;
-/**
- * Treemap chart for visualizing hierarchical data as nested rectangles. Each node has a name and either a numeric value (leaf) or children (branch). Rectangle size represents the value.
- */
-export const TreemapChart = createComponent<TreemapChartProps>('TreemapChart');
-
-export type SqlHighlightProps = Bindable<SqlHighlightCatalogProps> & ComponentDirectives;
-/**
- * Read-only SQL syntax highlighter powered by Monaco Editor. Renders a formatted, non-editable SQL block with auto-height based on line count and a max height cap.
- */
-export const SqlHighlight = createComponent<SqlHighlightProps>('SqlHighlight');