@proyecto-viviana/solidaria-components 0.2.5 → 0.3.0

package/src/DragAndDrop.tsx

@@ -0,0 +1,340 @@
+/**
+ * Drag and drop composition helpers for solidaria-components.
+ *
+ * Compatibility target: react-aria-components DragAndDrop exports.
+ */
+
+import { type JSX, type Accessor, createContext, createMemo, useContext } from "solid-js";
+import type {
+  DragTypes,
+  DropOperation,
+  DropTarget,
+  ItemDropTarget,
+  Key,
+} from "@proyecto-viviana/solid-stately";
+import type { DragAndDropHooks } from "./useDragAndDrop";
+import {
+  type ClassNameOrFunction,
+  type StyleOrFunction,
+  type SlotProps,
+  useRenderProps,
+  dataAttr,
+} from "./utils";
+
+export interface DragAndDropContextValue {
+  dragAndDropHooks?: DragAndDropHooks<unknown>;
+  dragState?: unknown;
+  dropState?: {
+    target?: DropTarget | null;
+    isDropTarget?: (target: DropTarget) => boolean;
+  };
+}
+
+export const DragAndDropContext = createContext<DragAndDropContextValue>({});
+
+export interface DropIndicatorRenderProps {
+  isDropTarget: boolean;
+}
+
+export interface DropIndicatorProps extends SlotProps {
+  target: ItemDropTarget;
+  children?: JSX.Element | ((props: DropIndicatorRenderProps) => JSX.Element);
+  class?: ClassNameOrFunction<DropIndicatorRenderProps>;
+  style?: StyleOrFunction<DropIndicatorRenderProps>;
+}
+
+interface DropIndicatorContextValue {
+  render: (props: DropIndicatorProps) => JSX.Element;
+}
+
+export const DropIndicatorContext = createContext<DropIndicatorContextValue | null>(null);
+
+function DefaultDropIndicator(props: DropIndicatorProps): JSX.Element {
+  const dnd = useContext(DragAndDropContext);
+  const isDropTarget = createMemo(() => {
+    const target = props.target;
+    return dnd.dropState?.isDropTarget?.(target) ?? false;
+  });
+
+  const renderProps = useRenderProps(
+    {
+      children: props.children,
+      class: props.class,
+      style: props.style,
+      defaultClassName: "solidaria-DropIndicator",
+    },
+    () => ({
+      isDropTarget: isDropTarget(),
+    }),
+  );
+
+  return (
+    <div
+      role="option"
+      aria-disabled={true}
+      class={renderProps.class()}
+      style={renderProps.style()}
+      data-drop-target={dataAttr(isDropTarget())}
+    >
+      {renderProps.renderChildren()}
+    </div>
+  );
+}
+
+export function DropIndicator(props: DropIndicatorProps): JSX.Element {
+  const context = useContext(DropIndicatorContext);
+  if (context) return context.render(props);
+  return <DefaultDropIndicator {...props} />;
+}
+
+export function useRenderDropIndicator(
+  hooksOrDropState?:
+    | Pick<
+        DragAndDropHooks<unknown>,
+        "renderDropIndicator" | "isVirtualDragging" | "useDropIndicator"
+      >
+    | {
+        target?: DropTarget | null;
+        isDropTarget?: ((target: DropTarget) => boolean) | boolean;
+      },
+  maybeDropState?: {
+    target?: DropTarget | null;
+    isDropTarget?: ((target: DropTarget) => boolean) | boolean;
+  },
+): ((target: ItemDropTarget) => JSX.Element | undefined) | undefined {
+  const looksLikeDropState = (
+    value: unknown,
+  ): value is {
+    target?: DropTarget | null;
+    isDropTarget?: ((target: DropTarget) => boolean) | boolean;
+  } => {
+    return Boolean(
+      value &&
+      typeof value === "object" &&
+      ("isDropTarget" in (value as Record<string, unknown>) ||
+        "target" in (value as Record<string, unknown>)),
+    );
+  };
+
+  const dragAndDropHooks = looksLikeDropState(hooksOrDropState) ? undefined : hooksOrDropState;
+  const dropState = looksLikeDropState(hooksOrDropState) ? hooksOrDropState : maybeDropState;
+
+  // RAC only renders collection indicators when drop hooks are present.
+  if (dragAndDropHooks && !dragAndDropHooks.useDropIndicator) return undefined;
+  if (!dropState && !dragAndDropHooks?.renderDropIndicator) return undefined;
+
+  const targetsEqual = (a: DropTarget | null | undefined, b: DropTarget): boolean => {
+    if (!a) return false;
+    if (a.type !== b.type) return false;
+    if (a.type === "root" && b.type === "root") return true;
+    if (a.type !== "item" || b.type !== "item") return false;
+    return a.key === b.key && a.dropPosition === b.dropPosition;
+  };
+
+  return (target: ItemDropTarget) => {
+    const stateIsDropTarget = dropState?.isDropTarget;
+    const isTarget =
+      typeof stateIsDropTarget === "function"
+        ? stateIsDropTarget(target)
+        : stateIsDropTarget === true
+          ? targetsEqual(dropState?.target, target)
+          : false;
+    const isVirtualDragging = dragAndDropHooks?.isVirtualDragging?.() ?? false;
+    if (!isTarget && !isVirtualDragging) return undefined;
+    return dragAndDropHooks?.renderDropIndicator ? (
+      dragAndDropHooks.renderDropIndicator(target)
+    ) : (
+      <DropIndicator target={target} />
+    );
+  };
+}
+
+type KeyAccessor = Key | null | undefined | Accessor<Key | null | undefined>;
+
+interface SelectionManagerLike {
+  focusedKey?: KeyAccessor;
+}
+
+interface CollectionLike {
+  getKeyAfter: (key: Key) => Key | null;
+  getItem: (key: Key) => { level?: number; type?: string } | null | undefined;
+}
+
+interface DroppableCollectionStateLike {
+  target?: DropTarget | null;
+}
+
+export interface VirtualRangeLike {
+  start: number;
+  end: number;
+  offsetTop: number;
+  offsetBottom: number;
+}
+
+export interface LayoutInfoProviderLike {
+  getLayoutInfo: (index: number) => { rect: { y: number; height: number } };
+}
+
+function resolveKey(value: KeyAccessor): Key | null | undefined {
+  if (typeof value === "function") {
+    return (value as Accessor<Key | null | undefined>)();
+  }
+  return value;
+}
+
+function getAfterDropNormalizedKey(target: ItemDropTarget, collection?: CollectionLike): Key {
+  if (target.dropPosition !== "after" || !collection) return target.key;
+
+  let nextKey = collection.getKeyAfter(target.key);
+  let lastDescendantKey: Key | null = null;
+
+  if (nextKey != null) {
+    const targetLevel = collection.getItem(target.key)?.level ?? 0;
+    while (nextKey != null) {
+      const node = collection.getItem(nextKey);
+      if (!node) break;
+      if (node.type && node.type !== "item") {
+        nextKey = collection.getKeyAfter(nextKey);
+        continue;
+      }
+      if ((node.level ?? 0) <= targetLevel) break;
+      lastDescendantKey = nextKey;
+      nextKey = collection.getKeyAfter(nextKey);
+    }
+  }
+
+  return nextKey ?? lastDescendantKey ?? target.key;
+}
+
+export function getNormalizedDropTargetKey(
+  target: DropTarget | null | undefined,
+  collection?: CollectionLike,
+): Key | null {
+  if (!target || target.type !== "item") return null;
+  return getAfterDropNormalizedKey(target, collection);
+}
+
+export function useDndPersistedKeys(
+  selectionManager: SelectionManagerLike | null | undefined,
+  dragAndDropHooks?: Pick<DragAndDropHooks<unknown>, "isVirtualDragging">,
+  dropState?: DroppableCollectionStateLike,
+  collection?: CollectionLike,
+): Accessor<Set<Key>> {
+  return createMemo(() => {
+    const focusedKey = resolveKey(selectionManager?.focusedKey);
+    let dropTargetKey: Key | null | undefined;
+
+    if (dragAndDropHooks?.isVirtualDragging?.() && dropState?.target?.type === "item") {
+      dropTargetKey = getNormalizedDropTargetKey(dropState.target, collection) ?? undefined;
+    }
+
+    const keys = new Set<Key>();
+    if (focusedKey != null) keys.add(focusedKey);
+    if (dropTargetKey != null) keys.add(dropTargetKey);
+    return keys;
+  });
+}
+
+export function mergePersistedKeysIntoVirtualRange(
+  baseRange: VirtualRangeLike,
+  persistedIndexes: number[],
+  itemCount: number,
+  layoutInfoProvider: LayoutInfoProviderLike,
+  maxExtraItems = 60,
+  options?: {
+    forceIncludeIndexes?: number[];
+    forceIncludeMaxSpan?: number;
+    fallbackToForcedWindow?: boolean;
+  },
+): VirtualRangeLike {
+  const validPersistedIndexes = Array.from(
+    new Set(persistedIndexes.filter((index) => index >= 0 && index < itemCount)),
+  ).sort((a, b) => a - b);
+  const forceIndexes = Array.from(
+    new Set(
+      (options?.forceIncludeIndexes ?? []).filter((index) => index >= 0 && index < itemCount),
+    ),
+  );
+
+  if (itemCount <= 0) return baseRange;
+  if (validPersistedIndexes.length === 0 && forceIndexes.length === 0) return baseRange;
+
+  const baseSpan = Math.max(1, baseRange.end - baseRange.start);
+  const maxSpan = Math.max(baseSpan, baseSpan + maxExtraItems);
+
+  let start = baseRange.start;
+  let end = baseRange.end;
+
+  const distanceToBaseRange = (index: number): number => {
+    if (index < baseRange.start) return baseRange.start - index;
+    if (index >= baseRange.end) return index - (baseRange.end - 1);
+    return 0;
+  };
+
+  for (const index of validPersistedIndexes.sort(
+    (a, b) => distanceToBaseRange(a) - distanceToBaseRange(b),
+  )) {
+    const nextStart = Math.min(start, index);
+    const nextEnd = Math.max(end, index + 1);
+    if (nextEnd - nextStart <= maxSpan) {
+      start = nextStart;
+      end = nextEnd;
+    }
+  }
+
+  if (forceIndexes.length > 0) {
+    const forceMaxSpan = Math.max(maxSpan, options?.forceIncludeMaxSpan ?? Math.max(maxSpan, 300));
+    for (const index of forceIndexes) {
+      const nextStart = Math.min(start, index);
+      const nextEnd = Math.max(end, index + 1);
+      if (nextEnd - nextStart <= forceMaxSpan) {
+        start = nextStart;
+        end = nextEnd;
+      }
+    }
+
+    if (options?.fallbackToForcedWindow !== false) {
+      const missingForced = forceIndexes.filter((index) => index < start || index >= end);
+      if (missingForced.length > 0) {
+        const nearestForced = missingForced[0];
+        const forceMaxSpan = Math.max(
+          maxSpan,
+          options?.forceIncludeMaxSpan ?? Math.max(maxSpan, 300),
+        );
+        const windowSpan = Math.min(itemCount, Math.max(baseSpan, forceMaxSpan));
+        const centeredStart = Math.max(
+          0,
+          Math.min(itemCount - windowSpan, nearestForced - Math.floor(windowSpan / 2)),
+        );
+        start = centeredStart;
+        end = Math.min(itemCount, centeredStart + windowSpan);
+      }
+    }
+  }
+
+  if (start === baseRange.start && end === baseRange.end) return baseRange;
+
+  const startRect = start > 0 ? layoutInfoProvider.getLayoutInfo(start).rect : { y: 0, height: 0 };
+  const lastRect = layoutInfoProvider.getLayoutInfo(itemCount - 1).rect;
+  const endRect = end > 0 ? layoutInfoProvider.getLayoutInfo(end - 1).rect : { y: 0, height: 0 };
+
+  return {
+    start,
+    end,
+    offsetTop: Math.max(0, startRect.y),
+    offsetBottom: Math.max(0, lastRect.y + lastRect.height - (endRect.y + endRect.height)),
+  };
+}
+
+export type DropTargetDelegate = {
+  getDropTargetFromPoint: (
+    x: number,
+    y: number,
+    isValidDropTarget: (target: DropTarget) => boolean,
+  ) => DropTarget | null;
+  getDropOperation: (
+    target: DropTarget,
+    types: DragTypes,
+    allowedOperations: DropOperation[],
+  ) => DropOperation;
+};

package/src/DragPreview.tsx

@@ -0,0 +1,47 @@
+import { onCleanup, type JSX } from "solid-js";
+import type { DragItem, DragPreviewRenderer } from "@proyecto-viviana/solid-stately";
+
+export interface DragPreviewProps {
+  ref?: { current: DragPreviewRenderer | null };
+  children: (
+    items: DragItem[],
+  ) => JSX.Element | { element: JSX.Element; x?: number; y?: number } | null | undefined;
+}
+
+export function DragPreview(props: DragPreviewProps): JSX.Element {
+  const hasDom = typeof HTMLElement !== "undefined";
+  const isElementNode = (value: unknown): value is HTMLElement => {
+    if (!value) return false;
+    if (hasDom && value instanceof HTMLElement) return true;
+    return typeof value === "object" && (value as { nodeType?: number }).nodeType === 1;
+  };
+
+  if (props.ref) {
+    const renderer: DragPreviewRenderer = (items, callback) => {
+      const rendered = props.children(items);
+      if (!rendered) {
+        callback(null);
+        return;
+      }
+      if (typeof rendered === "object" && rendered !== null && "element" in rendered) {
+        const previewValue = rendered as { element: unknown; x?: number; y?: number };
+        callback(
+          isElementNode(previewValue.element) ? previewValue.element : null,
+          previewValue.x,
+          previewValue.y,
+        );
+        return;
+      }
+      callback(isElementNode(rendered) ? rendered : null);
+    };
+
+    props.ref.current = renderer;
+    onCleanup(() => {
+      if (props.ref?.current === renderer) {
+        props.ref.current = null;
+      }
+    });
+  }
+
+  return null as unknown as JSX.Element;
+}

package/src/DropZone.tsx

@@ -0,0 +1,233 @@
+/**
+ * DropZone primitive for solidaria-components.
+ *
+ * A drop target area for drag and drop operations.
+ * Parity target: react-aria-components/src/DropZone.tsx
+ */
+
+import {
+  type JSX,
+  createContext,
+  createMemo,
+  createSignal,
+  mergeProps,
+  splitProps,
+  useContext,
+} from "solid-js";
+import {
+  createDrop,
+  createFocusRing,
+  createHover,
+  readFromDataTransfer,
+  type HoverEvents,
+  type AriaDropOptions,
+} from "@proyecto-viviana/solidaria";
+import {
+  type ClassNameOrFunction,
+  type StyleOrFunction,
+  type RenderChildren,
+  type SlotProps,
+  useRenderProps,
+  filterDOMProps,
+} from "./utils";
+import { VisuallyHidden } from "./VisuallyHidden";
+
+export interface DropZoneRenderProps {
+  isHovered: boolean;
+  isFocused: boolean;
+  isFocusVisible: boolean;
+  isDropTarget: boolean;
+  isDisabled: boolean;
+}
+
+export interface DropZoneProps
+  extends
+    Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "class" | "style" | "onDrop">,
+    Omit<AriaDropOptions, "hasDropButton">,
+    HoverEvents,
+    SlotProps {
+  children?: RenderChildren<DropZoneRenderProps>;
+  class?: ClassNameOrFunction<DropZoneRenderProps>;
+  style?: StyleOrFunction<DropZoneRenderProps>;
+}
+
+export const DropZoneContext = createContext<DropZoneProps | null>(null);
+const DEFAULT_DROPZONE_LABEL = "Drop files";
+const FOCUSABLE_SELECTOR = [
+  "a[href]",
+  "button:not([disabled])",
+  'input:not([disabled]):not([type="hidden"])',
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])',
+  '[contenteditable="true"]',
+].join(",");
+
+function isFocusableElement(target: Element): boolean {
+  return target instanceof HTMLElement && target.matches(FOCUSABLE_SELECTOR);
+}
+
+/**
+ * A drop zone is an area into which one or multiple objects can be dropped.
+ */
+export function DropZone(props: DropZoneProps): JSX.Element {
+  const contextProps = useContext(DropZoneContext);
+  const mergedProps = mergeProps(contextProps ?? {}, props);
+  const [local, dropProps, hoverEventProps, domProps] = splitProps(
+    mergedProps,
+    ["children", "class", "style", "slot", "aria-label", "aria-labelledby"],
+    [
+      "getDropOperation",
+      "getDropOperationForPoint",
+      "onDropEnter",
+      "onDropMove",
+      "onDropActivate",
+      "onDropExit",
+      "onDrop",
+      "isDisabled",
+    ],
+    ["onHoverStart", "onHoverEnd", "onHoverChange"],
+  );
+
+  const [dropZoneRef, setDropZoneRef] = createSignal<HTMLDivElement | null>(null);
+  const [dropButtonRef, setDropButtonRef] = createSignal<HTMLButtonElement | null>(null);
+
+  const dropAria = createDrop(() => ({
+    getDropOperation: dropProps.getDropOperation,
+    getDropOperationForPoint: dropProps.getDropOperationForPoint,
+    onDropEnter: dropProps.onDropEnter,
+    onDropMove: dropProps.onDropMove,
+    onDropActivate: dropProps.onDropActivate,
+    onDropExit: dropProps.onDropExit,
+    onDrop: dropProps.onDrop,
+    hasDropButton: true,
+    isDisabled: dropProps.isDisabled,
+  }));
+
+  const { isHovered, hoverProps } = createHover(() => ({
+    isDisabled: dropProps.isDisabled,
+    onHoverStart: hoverEventProps.onHoverStart,
+    onHoverEnd: hoverEventProps.onHoverEnd,
+    onHoverChange: hoverEventProps.onHoverChange,
+  }));
+  const { isFocused, isFocusVisible, focusProps } = createFocusRing();
+
+  const renderValues = createMemo<DropZoneRenderProps>(() => ({
+    isHovered: isHovered(),
+    isFocused: isFocused(),
+    isFocusVisible: isFocusVisible(),
+    isDropTarget: dropAria.isDropTarget,
+    isDisabled: !!dropProps.isDisabled,
+  }));
+
+  const renderProps = useRenderProps(
+    {
+      children: local.children,
+      class: local.class,
+      style: local.style,
+      defaultClassName: "solidaria-DropZone",
+    },
+    renderValues,
+  );
+
+  const filteredDomProps = createMemo(() => filterDOMProps(domProps, { global: true }));
+
+  const cleanDropProps = () => {
+    const { ref: _ref, ...rest } = dropAria.dropProps as Record<string, unknown>;
+    return rest;
+  };
+  const cleanHoverProps = () => {
+    const { ref: _ref, ...rest } = hoverProps as Record<string, unknown>;
+    return rest;
+  };
+  const cleanFocusProps = () => {
+    const { ref: _ref, ...rest } = focusProps as Record<string, unknown>;
+    return rest;
+  };
+  const cleanDropButtonProps = () => {
+    const { ref: _ref, ...rest } = dropAria.dropButtonProps as Record<string, unknown>;
+    return rest;
+  };
+
+  const onRootClick: JSX.EventHandler<HTMLDivElement, MouseEvent> = (e) => {
+    const onClick = (filteredDomProps() as JSX.HTMLAttributes<HTMLDivElement>).onClick as
+      | JSX.EventHandler<HTMLDivElement, MouseEvent>
+      | undefined;
+    onClick?.(e);
+    if (e.defaultPrevented || dropProps.isDisabled) {
+      return;
+    }
+
+    const root = dropZoneRef();
+    const hiddenButton = dropButtonRef();
+    if (!root || !hiddenButton) {
+      return;
+    }
+
+    let target: Element | null = e.target instanceof Element ? e.target : root;
+    while (target && root.contains(target)) {
+      if (isFocusableElement(target)) {
+        return;
+      }
+      if (target === root) {
+        hiddenButton.focus();
+        return;
+      }
+      target = target.parentElement;
+    }
+  };
+
+  const onHiddenButtonPaste: JSX.EventHandler<HTMLButtonElement, ClipboardEvent> = (e) => {
+    if (dropProps.isDisabled || !e.clipboardData) {
+      return;
+    }
+
+    const items = readFromDataTransfer(e.clipboardData);
+    if (items.length === 0) {
+      return;
+    }
+
+    e.preventDefault();
+    dropProps.onDrop?.({
+      type: "drop",
+      x: 0,
+      y: 0,
+      items,
+      dropOperation: "copy",
+    });
+  };
+
+  const dropButtonAriaLabel = createMemo(
+    () => local["aria-label"] ?? (!local["aria-labelledby"] ? DEFAULT_DROPZONE_LABEL : undefined),
+  );
+
+  return (
+    <div
+      ref={setDropZoneRef}
+      {...filteredDomProps()}
+      {...cleanDropProps()}
+      {...cleanHoverProps()}
+      onClick={onRootClick}
+      class={renderProps.class()}
+      style={renderProps.style()}
+      slot={local.slot}
+      data-hovered={isHovered() || undefined}
+      data-focused={isFocused() || undefined}
+      data-focus-visible={isFocusVisible() || undefined}
+      data-drop-target={dropAria.isDropTarget || undefined}
+      data-disabled={dropProps.isDisabled || undefined}
+    >
+      <VisuallyHidden>
+        <button
+          ref={setDropButtonRef}
+          {...cleanDropButtonProps()}
+          {...cleanFocusProps()}
+          aria-label={dropButtonAriaLabel()}
+          aria-labelledby={local["aria-labelledby"]}
+          onPaste={onHiddenButtonPaste}
+        />
+      </VisuallyHidden>
+      {renderProps.renderChildren()}
+    </div>
+  );
+}

package/src/FieldError.tsx

@@ -0,0 +1,89 @@
+/**
+ * FieldError primitive for solidaria-components.
+ *
+ * Displays validation errors for a field from context or explicit validation prop.
+ * Port direction: react-aria-components/src/FieldError.tsx
+ */
+
+import { type JSX, Show, createContext, createMemo, splitProps, useContext } from "solid-js";
+import { DEFAULT_VALIDATION_RESULT, type ValidationResult } from "@proyecto-viviana/solid-stately";
+import {
+  type ClassNameOrFunction,
+  type StyleOrFunction,
+  type RenderChildren,
+  type SlotProps,
+  useRenderProps,
+  filterDOMProps,
+} from "./utils";
+
+export type FieldErrorRenderProps = ValidationResult;
+
+export interface FieldErrorContextValue {
+  validation: ValidationResult | null;
+  errorMessageProps?: JSX.HTMLAttributes<HTMLElement>;
+}
+
+export interface FieldErrorProps
+  extends Omit<JSX.HTMLAttributes<HTMLElement>, "children" | "class" | "style">, SlotProps {
+  /** Validation result. Falls back to context when omitted. */
+  validation?: ValidationResult | null;
+  /** The children of the component. */
+  children?: RenderChildren<FieldErrorRenderProps>;
+  /** The CSS className for the element. */
+  class?: ClassNameOrFunction<FieldErrorRenderProps>;
+  /** The inline style for the element. */
+  style?: StyleOrFunction<FieldErrorRenderProps>;
+}
+
+export const FieldErrorContext = createContext<ValidationResult | FieldErrorContextValue | null>(
+  null,
+);
+
+export function FieldError(props: FieldErrorProps): JSX.Element | null {
+  const contextValue = useContext(FieldErrorContext);
+  const contextValidation = () => {
+    if (contextValue && "validation" in contextValue) {
+      return contextValue.validation;
+    }
+    return contextValue;
+  };
+  const contextErrorMessageProps = () => {
+    if (contextValue && "validation" in contextValue) {
+      return contextValue.errorMessageProps ?? {};
+    }
+    return {};
+  };
+  const [local, domProps] = splitProps(props, ["validation", "children", "class", "style", "slot"]);
+
+  const validation = createMemo<ValidationResult | null>(
+    () => local.validation ?? contextValidation(),
+  );
+
+  const renderProps = useRenderProps(
+    {
+      children:
+        local.children ?? ((currentValidation) => currentValidation.validationErrors.join(" ")),
+      class: local.class,
+      style: local.style,
+      defaultClassName: "solidaria-FieldError",
+    },
+    () => validation() ?? DEFAULT_VALIDATION_RESULT,
+  );
+
+  const filteredDomProps = filterDOMProps(domProps, { global: true });
+  const children = () => renderProps.renderChildren();
+
+  return (
+    <Show when={validation()?.isInvalid && children()}>
+      <div
+        {...(contextErrorMessageProps() as unknown as JSX.HTMLAttributes<HTMLDivElement>)}
+        {...(filteredDomProps as JSX.HTMLAttributes<HTMLDivElement>)}
+        slot={local.slot ?? "errorMessage"}
+        class={renderProps.class()}
+        style={renderProps.style()}
+      >
+        {children()}
+      </div>
+    </Show>
+  );
+}