@ecopages/radiant-ui 0.1.0-beta.3 → 0.1.0-beta.6

package/dist/components/ui/select/select.css

@@ -0,0 +1,216 @@
+/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
+@layer properties;
+@layer components {
+  .rui-floating {
+    position: fixed;
+    visibility: hidden;
+  }
+  .rui-popover {
+    z-index: var(--z-index-popover, var(--z-popover));
+    overflow: auto;
+    border-radius: var(--radius-container, var(--radius-container));
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--color-border, var(--border));
+    background-color: var(--color-background, var(--background));
+    --tw-shadow: var(--shadow-overlay);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .rui-popover--listbox {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    overflow: hidden;
+    padding: 0px;
+  }
+  .rui-popover[hidden] {
+    display: none;
+  }
+  .rui-popover-trigger {
+    display: inline-flex;
+  }
+}
+rui-select {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+}
+@layer components {
+  .rui-select {
+    position: relative;
+    width: calc(var(--spacing, 0.25rem) * 64);
+    font-size: var(--text-sm, var(--text-sm));
+    line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
+  }
+  .rui-select__control {
+    display: flex;
+    width: 100%;
+    min-width: 0px;
+    align-items: center;
+    gap: var(--spacing-1, var(--space-1));
+    border-radius: var(--radius-control, var(--radius-control));
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--color-border, var(--border));
+    background-color: var(--color-background, var(--background));
+    padding-inline: var(--spacing-1, var(--space-1));
+  }
+  .rui-select__control:focus-within {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    --tw-ring-color: var(--color-focus-ring, var(--focus-ring));
+  }
+  .rui-select__trigger {
+    display: inline-flex;
+    min-width: 0px;
+    flex: 1;
+    cursor: pointer;
+    align-items: center;
+    gap: var(--spacing-2, var(--space-2));
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+    background-color: transparent;
+    padding-inline: var(--spacing-3, var(--space-3));
+    padding-block: var(--spacing-2, var(--space-2));
+    text-align: start;
+    color: var(--color-on-background, var(--on-background));
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+  .rui-select__trigger:disabled {
+    cursor: not-allowed;
+    opacity: var(--opacity-muted, var(--opacity-muted));
+  }
+  .rui-select__value {
+    min-width: 0px;
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .rui-select__value[data-placeholder] {
+    color: var(--color-on-surface, var(--on-surface));
+  }
+  .rui-select__value [data-select-placeholder] {
+    color: var(--color-on-surface, var(--on-surface));
+  }
+  .rui-select__listbox {
+    min-width: 0px;
+  }
+  .rui-select__listbox[hidden] {
+    display: none;
+  }
+  .rui-select__listbox > rui-listbox {
+    min-width: 0px;
+  }
+  .rui-select__search {
+    margin: var(--spacing-1, var(--space-1));
+    min-width: 0px;
+    border-radius: var(--radius-control, var(--radius-control));
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--color-border, var(--border));
+    background-color: var(--color-background, var(--background));
+    padding-inline: var(--spacing-3, var(--space-3));
+    padding-block: var(--spacing-2, var(--space-2));
+    color: var(--color-on-background, var(--on-background));
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+  .rui-select__search:focus-visible {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    --tw-ring-color: var(--color-focus-ring, var(--focus-ring));
+  }
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-inset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-ring-inset {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-offset-width {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --tw-ring-offset-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: #fff;
+}
+@property --tw-ring-offset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-border-style: solid;
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-color: initial;
+      --tw-shadow-alpha: 100%;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
+      --tw-inset-shadow-alpha: 100%;
+      --tw-ring-color: initial;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: initial;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: initial;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
+    }
+  }
+}

package/dist/components/ui/select/select.d.ts

@@ -0,0 +1,54 @@
+import type { JsxHtmlProps, JsxHtmlPropsWithChildren } from '@ecopages/jsx';
+import { RuiListboxOption, type RuiListboxOptionData } from '../listbox';
+import type { RuiSelectProps } from './select.script';
+export type RuiSelectControlProps = JsxHtmlPropsWithChildren<{
+    slot?: string;
+}>;
+/** Trigger row wrapper for the value button and toggle icon. */
+export declare function RuiSelectControl({ children, slot, class: className, ...props }: RuiSelectControlProps): import("@ecopages/jsx").JsxRenderable;
+export type RuiSelectTriggerProps = JsxHtmlPropsWithChildren<{
+    disabled?: boolean;
+    'aria-label'?: string;
+}>;
+/** Value button with `role="combobox"`. Place `RuiSelectValue` inside. */
+export declare function RuiSelectTrigger({ children, class: className, disabled, ...props }: RuiSelectTriggerProps): import("@ecopages/jsx").JsxRenderable;
+export type RuiSelectToggleProps = JsxHtmlPropsWithChildren<{
+    'aria-label'?: string;
+    disabled?: boolean;
+}>;
+/** Toggle button for opening the listbox popup. */
+export declare function RuiSelectToggle({ children, class: className, 'aria-label': ariaLabel, disabled, ...props }: RuiSelectToggleProps): import("@ecopages/jsx").JsxRenderable;
+export type RuiSelectValueProps = JsxHtmlPropsWithChildren<{
+    slot?: string;
+}>;
+/**
+ * Selected value display inside `RuiSelectTrigger`.
+ *
+ * @remarks When empty, shows the select `placeholder`. For multi-select chip UI,
+ * provide `RuiTagGroup` as children instead of relying on the default text.
+ */
+export declare function RuiSelectValue({ children, slot, class: className, ...props }: RuiSelectValueProps): import("@ecopages/jsx").JsxRenderable;
+export type RuiSelectListboxProps = JsxHtmlPropsWithChildren<{
+    slot?: string;
+}>;
+/** Popup shell slotted into `listbox`. Place an embedded `RuiListbox` inside. */
+export declare function RuiSelectListbox({ children, slot, class: className, ...props }: RuiSelectListboxProps): import("@ecopages/jsx").JsxRenderable;
+export type RuiSelectSearchProps = JsxHtmlProps<{
+    slot?: string;
+    placeholder?: string;
+    'aria-label'?: string;
+    disabled?: boolean;
+}>;
+/** Search input for filtering inside `RuiAutocomplete` within a select listbox. */
+export declare function RuiSelectSearch({ placeholder, slot, class: className, disabled, ...props }: RuiSelectSearchProps): import("@ecopages/jsx").JsxRenderable;
+export type RuiSelectOptionData = RuiListboxOptionData;
+/** @deprecated Use `RuiListboxOption` */
+export declare const RuiSelectOption: typeof RuiListboxOption;
+/**
+ * Select view. Pair with `RuiLabel` (sibling or via `RuiField`) for the visible name —
+ * do not nest a select-specific label.
+ */
+export declare const RuiSelect: import("@/lib/radiant-view").RadiantViewComponent<JsxHtmlPropsWithChildren<RuiSelectProps & {
+    slot?: string;
+    options?: RuiSelectOptionData[];
+}>>;

package/dist/components/ui/select/select.script.d.ts

@@ -0,0 +1,106 @@
+import { RadiantElement } from '@ecopages/radiant';
+import type { EventEmitter } from '@ecopages/radiant/tools/event-emitter';
+export type RuiSelectSelectionMode = 'single' | 'multiple';
+export type RuiSelectProps = {
+    value?: string;
+    /** Accessible name when there is no visible `RuiLabel` associated with the trigger. */
+    label?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    selectionMode?: RuiSelectSelectionMode;
+    /**
+     * When `selectionMode` is `multiple`, whether selecting an option closes the popup.
+     * Defaults to false for multiple and true for single.
+     */
+    shouldCloseOnSelect?: boolean;
+};
+export type RuiSelectChangeDetail = {
+    value: string;
+};
+/**
+ * `<rui-select>` — a select-only combobox with a button trigger and listbox popup.
+ *
+ * Implements the APG Combobox pattern (select-only variant). DOM focus stays on the
+ * trigger button; visual focus moves into the popup via `aria-activedescendant`.
+ *
+ * Pair with `RuiLabel` (sibling, or via `RuiField`) for the visible name.
+ * Compose with `data-select-trigger`, `data-select-toggle`, `data-select-value`, `data-select-listbox`
+ * (popup shell), and `RuiListbox` with `embedded` for options.
+ *
+ * Wrap the listbox in `RuiAutocomplete` to add search filtering.
+ * Use `RuiTagGroup` inside `RuiSelectValue` for multi-select chip display.
+ *
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
+ * @element rui-select
+ * @slot trigger - Control row (`RuiSelectControl` with value button and toggle).
+ * @slot listbox - Popup shell (`RuiSelectListbox`) containing an embedded `RuiListbox`.
+ * @fires rui-change
+ */
+export declare class RuiSelect extends RadiantElement {
+    value: string;
+    label: string;
+    placeholder: string;
+    disabled: boolean;
+    selectionMode: RuiSelectSelectionMode;
+    shouldCloseOnSelect: boolean | undefined;
+    changeEvent: EventEmitter<RuiSelectChangeDetail>;
+    private open;
+    private readonly uid;
+    private readonly listboxBehavior;
+    rootTarget: HTMLElement;
+    private get listboxId();
+    private get triggerId();
+    private isMultiple;
+    private closesOnSelect;
+    private getSelectedValues;
+    private setSelectedValues;
+    private getSearchInput;
+    private hasSearchInput;
+    /** Element that receives `aria-activedescendant` while the popup is open. */
+    private getActiveDescendantHost;
+    private resetSearchFilter;
+    private syncSearchInput;
+    private focusPopupInput;
+    private getTagGroup;
+    private hasTagGroup;
+    private syncTagGroup;
+    private syncTagGroupPlaceholder;
+    private removeSelectedValue;
+    private getTrigger;
+    private getToggle;
+    private getValueElement;
+    private getListboxPopup;
+    private getListbox;
+    private getListboxHost;
+    private getOptions;
+    private getOptionLabel;
+    private getOptionValue;
+    private ensureOptionIds;
+    private getAccessibleName;
+    private syncLabel;
+    private syncTrigger;
+    private syncToggle;
+    private syncListboxHost;
+    private syncValueDisplay;
+    private syncOptionSelection;
+    private setOpen;
+    private selectOption;
+    private handleListboxKeydown;
+    private handleTriggerKeydown;
+    private initialize;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    onPropsUpdated(): void;
+    onTriggerClick(event: Event): void;
+    onTriggerKeydown(event: KeyboardEvent): void;
+    onSearchKeydown(event: KeyboardEvent): void;
+    onSearchInput(): void;
+    onTagRemove(event: Event): void;
+    onTagClick(event: Event): void;
+    onOptionPointerOver(event: Event): void;
+    onOptionMouseDown(event: Event): void;
+    onOptionClick(event: Event): void;
+    onFocusOut(event: FocusEvent): void;
+    onDocumentPointerDown(event: PointerEvent): void;
+    render(): import("@ecopages/jsx").JsxRenderable;
+}

package/dist/components/ui/shared/collection-navigation.d.ts

@@ -0,0 +1,8 @@
+/** Returns enabled, visible options in their current DOM order. */
+export declare function getVisibleCollectionOptions(options: HTMLElement[]): HTMLElement[];
+/** Wraps an active option index in the collection bounds. */
+export declare function wrapCollectionIndex(index: number, direction: 1 | -1, length: number): number;
+/** Clears active styling and the active descendant relationship for a collection. */
+export declare function clearCollectionActive(options: HTMLElement[], activeHost: HTMLElement | null): void;
+/** Applies active styling and the active descendant relationship to one option. */
+export declare function setCollectionActive(options: HTMLElement[], visibleOptions: HTMLElement[], index: number, activeHost: HTMLElement | null, idPrefix: string): HTMLElement | null;

package/dist/components/ui/shared/collection-navigation.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/ui/shared/control-toggle.css

@@ -0,0 +1,132 @@
+/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
+@layer properties;
+@layer components {
+  .rui-icon {
+    width: var(--size-icon-sm);
+    height: var(--size-icon-sm);
+    flex-shrink: 0;
+  }
+  .rui-icon--md {
+    width: var(--size-icon-md);
+    height: var(--size-icon-md);
+  }
+  .rui-control-toggle {
+    display: inline-flex;
+    height: var(--spacing-8, var(--space-8));
+    width: var(--spacing-8, var(--space-8));
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-control, var(--radius-control));
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+    background-color: transparent;
+    color: var(--color-on-surface, var(--on-surface));
+    cursor: pointer;
+  }
+  .rui-control-toggle:hover:not(:disabled) {
+    background-color: var(--color-surface-container-low, var(--surface-container-low));
+  }
+  .rui-control-toggle:focus-visible {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    --tw-ring-color: var(--color-focus-ring, var(--focus-ring));
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+  .rui-control-toggle:disabled {
+    cursor: not-allowed;
+    opacity: var(--opacity-muted, var(--opacity-muted));
+  }
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-inset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-ring-inset {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-offset-width {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --tw-ring-offset-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: #fff;
+}
+@property --tw-ring-offset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-border-style: solid;
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-color: initial;
+      --tw-shadow-alpha: 100%;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
+      --tw-inset-shadow-alpha: 100%;
+      --tw-ring-color: initial;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: initial;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: initial;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
+    }
+  }
+}

package/dist/components/ui/shared/field-label.d.ts

@@ -0,0 +1,9 @@
+export type FieldLabelSyncOptions = {
+    controlId: string;
+    label: string;
+    labelId: string;
+};
+/** Finds the visible label associated with a composed field control. */
+export declare function findAssociatedLabel(owner: HTMLElement): HTMLLabelElement | null;
+/** Applies the shared label-to-control ARIA contract for an unmanaged control. */
+export declare function syncFieldLabel(owner: HTMLElement, control: HTMLElement | null, options: FieldLabelSyncOptions): void;

package/dist/components/ui/shared/floating-position.d.ts

@@ -12,6 +12,10 @@ export type FloatingViewport = {
     height: number;
     padding: number;
 };
+export type FloatingPositionResult = {
+    coords: FloatingCoords;
+    placement: RuiPlacement;
+};
 /**
  * Computes fixed-position coords for a floating surface.
  *
@@ -21,17 +25,24 @@ export type FloatingViewport = {
  * never slides onto its anchor.
  */
 export declare function computeFloatingCoords(anchor: DOMRect, size: FloatingSize, placement: RuiPlacement, gap: number, viewport?: FloatingViewport): FloatingCoords;
+/**
+ * Computes fixed-position coords and the resolved placement (after flip).
+ */
+export declare function computeFloatingPosition(anchor: DOMRect, size: FloatingSize, placement: RuiPlacement, gap: number, viewport?: FloatingViewport): FloatingPositionResult;
 /** Applies fixed coords to a floating element. */
-export declare function applyFloatingPosition(anchor: HTMLElement, floating: HTMLElement, placement: RuiPlacement, gap: number): void;
+export declare function applyFloatingPosition(anchor: HTMLElement, floating: HTMLElement, placement: RuiPlacement, gap: number, options?: {
+    matchAnchorWidth?: boolean;
+}): RuiPlacement;
 export type AttachFloatingOptions = {
     anchor: HTMLElement;
     floating: HTMLElement;
     getPlacement: () => RuiPlacement;
     gap: number;
+    matchAnchorWidth?: boolean;
 };
 /**
  * Positions on attach and keeps the floating element updated on scroll/resize.
  *
  * @returns Cleanup that removes listeners and observers.
  */
-export declare function attachFloating({ anchor, floating, getPlacement, gap }: AttachFloatingOptions): () => void;
+export declare function attachFloating({ anchor, floating, getPlacement, gap, matchAnchorWidth, }: AttachFloatingOptions): () => void;

package/dist/components/ui/shared/listbox-popover-behavior.d.ts

@@ -0,0 +1,47 @@
+export type ListboxActivation = 'first' | 'last' | 'none';
+export type ListboxPopoverBehaviorConfig = {
+    getAnchor: () => HTMLElement | null;
+    getFloating: () => HTMLElement | null;
+    getOpen: () => boolean;
+    getOptions: () => HTMLElement[];
+    getActiveDescendantHost: () => HTMLElement | null;
+    getOptionIdPrefix: () => string;
+};
+export type ListboxKeydownConfig = {
+    isOpen: boolean;
+    canUseSpace: boolean;
+    closesOnTab: boolean;
+    enterWhenClosed: 'open' | 'ignore';
+    enterWithoutActive: 'close' | 'ignore';
+    onOpen: (activation?: ListboxActivation) => void;
+    onClose: (reason: 'arrow' | 'escape' | 'enter' | 'tab') => void;
+    onSelectActive: () => void;
+    onEscapeWhenClosed?: () => void;
+};
+/**
+ * Shared state and interaction plumbing for listbox-backed popovers.
+ *
+ * @remarks Select and combobox intentionally keep their selection and filtering
+ * policies local. This behavior owns only the state machine both controls must
+ * agree on: active-descendant navigation, popover positioning, and dismissal.
+ */
+export declare class ListboxPopoverBehavior {
+    private readonly config;
+    private readonly popoverController;
+    private activeIndex;
+    private visualFocus;
+    constructor(config: ListboxPopoverBehaviorConfig);
+    get activeOptionIndex(): number;
+    get hasVisualFocus(): boolean;
+    ensureOptionIds(): void;
+    getVisibleOptions(): HTMLElement[];
+    clearActiveOption(): void;
+    setActiveOption(index: number): void;
+    moveActive(direction: 1 | -1, onOpen: (activation: ListboxActivation) => void): void;
+    /** Handles the APG keys shared by select-only and autocomplete listboxes. */
+    handleKeydown(event: KeyboardEvent, options: ListboxKeydownConfig): void;
+    syncPopoverPosition(): void;
+    shouldDismissFocus(relatedTarget: EventTarget | null): boolean;
+    shouldDismissPointer(target: Node | null): boolean;
+    destroy(): void;
+}

package/dist/components/ui/shared/listbox-popover-behavior.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/ui/shared/multi-value.d.ts

@@ -0,0 +1,4 @@
+/** Parses the comma-separated value protocol used by multi-select controls. */
+export declare function parseMultiValue(value: string): string[];
+/** Serializes multi-select values into the public custom-element value protocol. */
+export declare function serializeMultiValue(values: string[]): string;

package/dist/components/ui/shared/popover-controller.d.ts

@@ -0,0 +1,35 @@
+import type { RuiPlacement } from './placement';
+/** Whether `node` is inside the anchor or floating surface. */
+export declare function popoverContains(anchor: HTMLElement | null, floating: HTMLElement | null, node: Node | null): boolean;
+/** Whether focus left the popover interaction tree. */
+export declare function shouldDismissPopoverFocus(anchor: HTMLElement | null, floating: HTMLElement | null, relatedTarget: EventTarget | null): boolean;
+/** Whether a pointer event target is outside the popover interaction tree. */
+export declare function shouldDismissPopoverPointer(anchor: HTMLElement | null, floating: HTMLElement | null, target: Node | null): boolean;
+export type PopoverControllerConfig = {
+    getAnchor: () => HTMLElement | null;
+    getFloating: () => HTMLElement | null;
+    getOpen: () => boolean;
+    getPlacement: () => RuiPlacement;
+    gap?: number;
+    portal?: boolean;
+    matchAnchorWidth?: boolean;
+    portalContainer?: ParentNode;
+};
+/**
+ * Headless popover lifecycle: portal mount, floating position, and teardown.
+ */
+export declare class PopoverController {
+    private config;
+    private cleanupFloating;
+    private portalHandle;
+    private floatingElement;
+    constructor(config: PopoverControllerConfig);
+    updateConfig(patch: Partial<PopoverControllerConfig>): void;
+    sync(): void;
+    contains(node: Node | null): boolean;
+    getFloatingElement(): HTMLElement | null;
+    teardown(): void;
+    destroy(): void;
+    private resolveFloating;
+    private teardownFloating;
+}

package/dist/components/ui/shared/popover-controller.test.d.ts

@@ -0,0 +1 @@
+export {};