@arclux/arc-ui-preact 1.9.2 → 1.10.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arclux/arc-ui-preact",
-  "version": "1.9.2",
+  "version": "1.10.1",
   "description": "Preact wrappers for ARC UI Web Components.",
   "type": "module",
   "main": "src/index.ts",
@@ -44,7 +44,7 @@
     "preact": ">=10.19.0"
   },
   "dependencies": {
-    "@arclux/arc-ui": "1.9.2"
+    "@arclux/arc-ui": "1.10.1"
   },
   "license": "MIT",
   "keywords": [

package/src/content/Avatar.tsx

@@ -9,12 +9,13 @@ export interface AvatarProps {
   size?: 'sm' | 'md' | 'lg';
   shape?: 'square' | 'rounded';
   status?: 'online' | 'offline' | 'busy' | 'away';
+  _imgState?: string;
   children?: preact.ComponentChildren;
   [key: string]: unknown;
 }
 
-export const Avatar: FunctionComponent<AvatarProps> = ({ src, name, size, shape, status, children, ...rest }) => (
-  <arc-avatar src={src} name={name} size={size} shape={shape} status={status} {...rest}>
+export const Avatar: FunctionComponent<AvatarProps> = ({ src, name, size, shape, status, _imgState, children, ...rest }) => (
+  <arc-avatar src={src} name={name} size={size} shape={shape} status={status} _imgState={_imgState} {...rest}>
     {children}
   </arc-avatar>
 );

package/src/content/DataTable.tsx

@@ -9,14 +9,18 @@ export interface DataTableProps {
   selectable?: boolean;
   sortColumn?: string;
   sortDirection?: string;
+  virtual?: boolean;
+  rowHeight?: number;
   _columns?: string;
   _selectedRows?: string;
+  _startIndex?: string;
+  _visibleCount?: string;
   children?: preact.ComponentChildren;
   [key: string]: unknown;
 }
 
-export const DataTable: FunctionComponent<DataTableProps> = ({ rows, sortable, selectable, sortColumn, sortDirection, _columns, _selectedRows, children, ...rest }) => (
-  <arc-data-table rows={rows} sortable={sortable} selectable={selectable} sortColumn={sortColumn} sortDirection={sortDirection} _columns={_columns} _selectedRows={_selectedRows} {...rest}>
+export const DataTable: FunctionComponent<DataTableProps> = ({ rows, sortable, selectable, sortColumn, sortDirection, virtual, rowHeight, _columns, _selectedRows, _startIndex, _visibleCount, children, ...rest }) => (
+  <arc-data-table rows={rows} sortable={sortable} selectable={selectable} sortColumn={sortColumn} sortDirection={sortDirection} virtual={virtual} rowHeight={rowHeight} _columns={_columns} _selectedRows={_selectedRows} _startIndex={_startIndex} _visibleCount={_visibleCount} {...rest}>
     {children}
   </arc-data-table>
 );

package/src/content/Image.tsx

@@ -0,0 +1,22 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface ImageProps {
+  src?: string;
+  alt?: string;
+  aspect?: '1/1' | '4/3' | '16/9' | '21/9' | '3/4' | '9/16';
+  fit?: 'contain' | 'fill' | 'none' | 'scale-down';
+  loading?: string;
+  fallback?: string;
+  _state?: string;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const Image: FunctionComponent<ImageProps> = ({ src, alt, aspect, fit, loading, fallback, _state, children, ...rest }) => (
+  <arc-image src={src} alt={alt} aspect={aspect} fit={fit} loading={loading} fallback={fallback} _state={_state} {...rest}>
+    {children}
+  </arc-image>
+);

package/src/content/List.tsx

@@ -0,0 +1,21 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface ListProps {
+  variant?: 'bordered' | 'separated';
+  size?: 'sm' | 'lg';
+  selectable?: boolean;
+  multiple?: boolean;
+  value?: string;
+  _items?: string;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const List: FunctionComponent<ListProps> = ({ variant, size, selectable, multiple, value, _items, children, ...rest }) => (
+  <arc-list variant={variant} size={size} selectable={selectable} multiple={multiple} value={value} _items={_items} {...rest}>
+    {children}
+  </arc-list>
+);

package/src/content/ListItem.tsx

@@ -0,0 +1,22 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface ListItemProps {
+  value?: string;
+  selected?: boolean;
+  disabled?: boolean;
+  href?: string;
+  _hasPrefix?: string;
+  _hasSuffix?: string;
+  _hasDescription?: string;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const ListItem: FunctionComponent<ListItemProps> = ({ value, selected, disabled, href, _hasPrefix, _hasSuffix, _hasDescription, children, ...rest }) => (
+  <arc-list-item value={value} selected={selected} disabled={disabled} href={href} _hasPrefix={_hasPrefix} _hasSuffix={_hasSuffix} _hasDescription={_hasDescription} {...rest}>
+    {children}
+  </arc-list-item>
+);

package/src/content/ScrollIndicator.tsx

@@ -0,0 +1,20 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface ScrollIndicatorProps {
+  target?: string;
+  position?: 'bottom';
+  size?: 'sm' | 'md' | 'lg';
+  color?: 'gradient';
+  _progress?: string;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const ScrollIndicator: FunctionComponent<ScrollIndicatorProps> = ({ target, position, size, color, _progress, children, ...rest }) => (
+  <arc-scroll-indicator target={target} position={position} size={size} color={color} _progress={_progress} {...rest}>
+    {children}
+  </arc-scroll-indicator>
+);

package/src/content/Separator.tsx

@@ -0,0 +1,18 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface SeparatorProps {
+  orientation?: 'vertical';
+  label?: string;
+  variant?: 'dashed' | 'dotted' | 'fade';
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const Separator: FunctionComponent<SeparatorProps> = ({ orientation, label, variant, children, ...rest }) => (
+  <arc-separator orientation={orientation} label={label} variant={variant} {...rest}>
+    {children}
+  </arc-separator>
+);

package/src/content/VirtualList.tsx

@@ -0,0 +1,20 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface VirtualListProps {
+  items?: unknown[];
+  itemHeight?: number;
+  overscan?: number;
+  _startIndex?: string;
+  _visibleCount?: string;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const VirtualList: FunctionComponent<VirtualListProps> = ({ items, itemHeight, overscan, _startIndex, _visibleCount, children, ...rest }) => (
+  <arc-virtual-list items={items} itemHeight={itemHeight} overscan={overscan} _startIndex={_startIndex} _visibleCount={_visibleCount} {...rest}>
+    {children}
+  </arc-virtual-list>
+);

package/src/content/index.ts

@@ -93,3 +93,18 @@ export type { CtaBannerProps } from './CtaBanner.js';
 
 export { IconLibrary } from './IconLibrary.js';
 export type { IconLibraryProps } from './IconLibrary.js';
+
+export { Image } from './Image.js';
+export type { ImageProps } from './Image.js';
+
+export { ListItem } from './ListItem.js';
+export type { ListItemProps } from './ListItem.js';
+
+export { ScrollIndicator } from './ScrollIndicator.js';
+export type { ScrollIndicatorProps } from './ScrollIndicator.js';
+
+export { Separator } from './Separator.js';
+export type { SeparatorProps } from './Separator.js';
+
+export { VirtualList } from './VirtualList.js';
+export type { VirtualListProps } from './VirtualList.js';

package/src/data/AnimatedNumber.tsx

@@ -0,0 +1,22 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface AnimatedNumberProps {
+  value?: number;
+  duration?: number;
+  format?: string;
+  prefix?: string;
+  suffix?: string;
+  decimals?: number;
+  locale?: string;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const AnimatedNumber: FunctionComponent<AnimatedNumberProps> = ({ value, duration, format, prefix, suffix, decimals, locale, children, ...rest }) => (
+  <arc-animated-number value={value} duration={duration} format={format} prefix={prefix} suffix={suffix} decimals={decimals} locale={locale} {...rest}>
+    {children}
+  </arc-animated-number>
+);

package/src/data/Badge.tsx

@@ -0,0 +1,18 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface BadgeProps {
+  variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
+  size?: 'sm' | 'lg';
+  color?: string;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const Badge: FunctionComponent<BadgeProps> = ({ variant, size, color, children, ...rest }) => (
+  <arc-badge variant={variant} size={size} color={color} {...rest}>
+    {children}
+  </arc-badge>
+);

package/src/data/DataTable.tsx

@@ -0,0 +1,26 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface DataTableProps {
+  rows?: unknown[];
+  sortable?: boolean;
+  selectable?: boolean;
+  sortColumn?: string;
+  sortDirection?: string;
+  virtual?: boolean;
+  rowHeight?: number;
+  _columns?: string;
+  _selectedRows?: string;
+  _startIndex?: string;
+  _visibleCount?: string;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const DataTable: FunctionComponent<DataTableProps> = ({ rows, sortable, selectable, sortColumn, sortDirection, virtual, rowHeight, _columns, _selectedRows, _startIndex, _visibleCount, children, ...rest }) => (
+  <arc-data-table rows={rows} sortable={sortable} selectable={selectable} sortColumn={sortColumn} sortDirection={sortDirection} virtual={virtual} rowHeight={rowHeight} _columns={_columns} _selectedRows={_selectedRows} _startIndex={_startIndex} _visibleCount={_visibleCount} {...rest}>
+    {children}
+  </arc-data-table>
+);

package/src/data/List.tsx

@@ -0,0 +1,21 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface ListProps {
+  variant?: 'bordered' | 'separated';
+  size?: 'sm' | 'lg';
+  selectable?: boolean;
+  multiple?: boolean;
+  value?: string;
+  _items?: string;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const List: FunctionComponent<ListProps> = ({ variant, size, selectable, multiple, value, _items, children, ...rest }) => (
+  <arc-list variant={variant} size={size} selectable={selectable} multiple={multiple} value={value} _items={_items} {...rest}>
+    {children}
+  </arc-list>
+);

package/src/data/ListItem.tsx

@@ -0,0 +1,22 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface ListItemProps {
+  value?: string;
+  selected?: boolean;
+  disabled?: boolean;
+  href?: string;
+  _hasPrefix?: string;
+  _hasSuffix?: string;
+  _hasDescription?: string;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const ListItem: FunctionComponent<ListItemProps> = ({ value, selected, disabled, href, _hasPrefix, _hasSuffix, _hasDescription, children, ...rest }) => (
+  <arc-list-item value={value} selected={selected} disabled={disabled} href={href} _hasPrefix={_hasPrefix} _hasSuffix={_hasSuffix} _hasDescription={_hasDescription} {...rest}>
+    {children}
+  </arc-list-item>
+);

package/src/data/Meter.tsx

@@ -0,0 +1,22 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface MeterProps {
+  value?: number;
+  min?: number;
+  max?: number;
+  low?: number;
+  high?: number;
+  optimum?: number;
+  label?: string;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const Meter: FunctionComponent<MeterProps> = ({ value, min, max, low, high, optimum, label, children, ...rest }) => (
+  <arc-meter value={value} min={min} max={max} low={low} high={high} optimum={optimum} label={label} {...rest}>
+    {children}
+  </arc-meter>
+);

package/src/data/Stat.tsx

@@ -0,0 +1,19 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface StatProps {
+  value?: string;
+  label?: string;
+  trend?: 'up' | 'down' | 'neutral';
+  change?: string;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const Stat: FunctionComponent<StatProps> = ({ value, label, trend, change, children, ...rest }) => (
+  <arc-stat value={value} label={label} trend={trend} change={change} {...rest}>
+    {children}
+  </arc-stat>
+);

package/src/data/Step.tsx

@@ -0,0 +1,16 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface StepProps {
+  label?: string;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const Step: FunctionComponent<StepProps> = ({ label, children, ...rest }) => (
+  <arc-step label={label} {...rest}>
+    {children}
+  </arc-step>
+);

package/src/data/Stepper.tsx

@@ -0,0 +1,17 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface StepperProps {
+  active?: number;
+  _steps?: string;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const Stepper: FunctionComponent<StepperProps> = ({ active, _steps, children, ...rest }) => (
+  <arc-stepper active={active} _steps={_steps} {...rest}>
+    {children}
+  </arc-stepper>
+);

package/src/data/Table.tsx

@@ -0,0 +1,19 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface TableProps {
+  columns?: unknown[];
+  rows?: unknown[];
+  striped?: boolean;
+  compact?: boolean;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const Table: FunctionComponent<TableProps> = ({ columns, rows, striped, compact, children, ...rest }) => (
+  <arc-table columns={columns} rows={rows} striped={striped} compact={compact} {...rest}>
+    {children}
+  </arc-table>
+);

package/src/data/Tag.tsx

@@ -0,0 +1,20 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface TagProps {
+  variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger';
+  size?: 'sm' | 'lg';
+  removable?: boolean;
+  disabled?: boolean;
+  color?: string;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const Tag: FunctionComponent<TagProps> = ({ variant, size, removable, disabled, color, children, ...rest }) => (
+  <arc-tag variant={variant} size={size} removable={removable} disabled={disabled} color={color} {...rest}>
+    {children}
+  </arc-tag>
+);

package/src/data/Timeline.tsx

@@ -0,0 +1,16 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface TimelineProps {
+  _items?: string;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const Timeline: FunctionComponent<TimelineProps> = ({ _items, children, ...rest }) => (
+  <arc-timeline _items={_items} {...rest}>
+    {children}
+  </arc-timeline>
+);

package/src/data/TimelineItem.tsx

@@ -0,0 +1,17 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface TimelineItemProps {
+  heading?: string;
+  date?: string;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const TimelineItem: FunctionComponent<TimelineItemProps> = ({ heading, date, children, ...rest }) => (
+  <arc-timeline-item heading={heading} date={date} {...rest}>
+    {children}
+  </arc-timeline-item>
+);

package/src/data/ValueCard.tsx

@@ -0,0 +1,18 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface ValueCardProps {
+  icon?: string;
+  heading?: string;
+  description?: string;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const ValueCard: FunctionComponent<ValueCardProps> = ({ icon, heading, description, children, ...rest }) => (
+  <arc-value-card icon={icon} heading={heading} description={description} {...rest}>
+    {children}
+  </arc-value-card>
+);

package/src/feedback/Announcement.tsx

@@ -0,0 +1,17 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface AnnouncementProps {
+  politeness?: string;
+  message?: string;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const Announcement: FunctionComponent<AnnouncementProps> = ({ politeness, message, children, ...rest }) => (
+  <arc-announcement politeness={politeness} message={message} {...rest}>
+    {children}
+  </arc-announcement>
+);

package/src/feedback/Banner.tsx

@@ -0,0 +1,18 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface BannerProps {
+  variant?: string;
+  dismissible?: boolean;
+  sticky?: boolean;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const Banner: FunctionComponent<BannerProps> = ({ variant, dismissible, sticky, children, ...rest }) => (
+  <arc-banner variant={variant} dismissible={dismissible} sticky={sticky} {...rest}>
+    {children}
+  </arc-banner>
+);

package/src/feedback/CommandPalette.tsx

@@ -7,14 +7,13 @@ export interface CommandPaletteProps {
   open?: boolean;
   placeholder?: string;
   _query?: string;
-  _focusedIndex?: string;
   _items?: string;
   children?: preact.ComponentChildren;
   [key: string]: unknown;
 }
 
-export const CommandPalette: FunctionComponent<CommandPaletteProps> = ({ open, placeholder, _query, _focusedIndex, _items, children, ...rest }) => (
-  <arc-command-palette open={open} placeholder={placeholder} _query={_query} _focusedIndex={_focusedIndex} _items={_items} {...rest}>
+export const CommandPalette: FunctionComponent<CommandPaletteProps> = ({ open, placeholder, _query, _items, children, ...rest }) => (
+  <arc-command-palette open={open} placeholder={placeholder} _query={_query} _items={_items} {...rest}>
     {children}
   </arc-command-palette>
 );

package/src/feedback/Confirm.tsx

@@ -0,0 +1,19 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface ConfirmProps {
+  open?: boolean;
+  heading?: string;
+  message?: string;
+  variant?: string;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const Confirm: FunctionComponent<ConfirmProps> = ({ open, heading, message, variant, children, ...rest }) => (
+  <arc-confirm open={open} heading={heading} message={message} variant={variant} {...rest}>
+    {children}
+  </arc-confirm>
+);

package/src/feedback/ConnectionStatus.tsx

@@ -0,0 +1,17 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface ConnectionStatusProps {
+  online?: string;
+  _visible?: string;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const ConnectionStatus: FunctionComponent<ConnectionStatusProps> = ({ online, _visible, children, ...rest }) => (
+  <arc-connection-status online={online} _visible={_visible} {...rest}>
+    {children}
+  </arc-connection-status>
+);

package/src/feedback/Dialog.tsx

@@ -7,7 +7,7 @@ export interface DialogProps {
   open?: boolean;
   heading?: string;
   message?: string;
-  variant?: 'danger';
+  variant?: string;
   children?: preact.ComponentChildren;
   [key: string]: unknown;
 }

package/src/feedback/DropdownMenu.tsx

@@ -5,14 +5,13 @@ import '@arclux/arc-ui';
 
 export interface DropdownMenuProps {
   open?: boolean;
-  _focusedIndex?: string;
   _children?: string;
   children?: preact.ComponentChildren;
   [key: string]: unknown;
 }
 
-export const DropdownMenu: FunctionComponent<DropdownMenuProps> = ({ open, _focusedIndex, _children, children, ...rest }) => (
-  <arc-dropdown-menu open={open} _focusedIndex={_focusedIndex} _children={_children} {...rest}>
+export const DropdownMenu: FunctionComponent<DropdownMenuProps> = ({ open, _children, children, ...rest }) => (
+  <arc-dropdown-menu open={open} _children={_children} {...rest}>
     {children}
   </arc-dropdown-menu>
 );

package/src/feedback/GuidedTour.tsx

@@ -0,0 +1,18 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { type FunctionComponent } from 'preact';
+import '@arclux/arc-ui';
+
+export interface GuidedTourProps {
+  steps?: string;
+  active?: string;
+  open?: boolean;
+  children?: preact.ComponentChildren;
+  [key: string]: unknown;
+}
+
+export const GuidedTour: FunctionComponent<GuidedTourProps> = ({ steps, active, open, children, ...rest }) => (
+  <arc-guided-tour steps={steps} active={active} open={open} {...rest}>
+    {children}
+  </arc-guided-tour>
+);

package/src/feedback/HoverCard.tsx

@@ -4,7 +4,7 @@ import { type FunctionComponent } from 'preact';
 import '@arclux/arc-ui';
 
 export interface HoverCardProps {
-  position?: 'bottom' | 'top' | 'left' | 'right';
+  position?: string;
   openDelay?: number;
   closeDelay?: number;
   _visible?: string;