@sekiui/elements 0.1.2 → 0.1.4

package/dist/types/components/command/seki-command.d.ts

@@ -32,7 +32,18 @@ export declare class SekiCommand {
      * Emitted when an item is selected
      */
     sekiSelect: EventEmitter<string>;
+    /**
+     * Internal: notifies command parts (input, items, groups, empty state) that
+     * `_commandContext` changed. Not part of the public API; listen to
+     * `sekiValueChange` instead.
+     */
+    commandContextChange: EventEmitter<void>;
+    /** Republishes when items are added, removed or relabelled after mount. */
+    private itemObserver?;
     valueChanged(newValue: string): void;
+    filterChanged(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     componentWillLoad(): void;
     componentDidLoad(): void;
     handleInputChange(event: CustomEvent<string>): void;
@@ -44,8 +55,15 @@ export declare class SekiCommand {
     handleItemHighlight(event: CustomEvent<void>): void;
     handleKeyDown(event: KeyboardEvent): void;
     private getAllItems;
+    /**
+     * Whether an item matches the current search. Computed from the item's host
+     * (text + `keywords`) rather than by calling methods on it: the item's plain
+     * class methods do not exist on the host element in the lazy-loaded build,
+     * which is why filtering never happened there before #323.
+     */
+    private matchesItem;
+    private isItemDisabled;
     private getVisibleItems;
-    private applyFilter;
     private resetHighlight;
     private updateHighlight;
     private getContext;

package/dist/types/components/command/types.d.ts

@@ -18,7 +18,15 @@ export interface CommandContext {
      */
     highlightedId: string | null;
     /**
-     * Whether no results match the current filter
+     * The highlighted item's host element, or null when nothing is highlighted
+     */
+    highlightedItem: HTMLElement | null;
+    /**
+     * Whether an item (host element) matches the current search
+     */
+    isItemMatch: (item: Element) => boolean;
+    /**
+     * Whether no item matches the current filter
      */
     isEmpty: boolean;
     /**

package/dist/types/components/context-menu/seki-context-menu-content.d.ts

@@ -8,6 +8,7 @@
 export declare class SekiContextMenuContent {
     el: HTMLElement;
     private contentRef?;
+    private typeahead;
     private menuEl?;
     private onMenuOpenChange;
     /**
@@ -25,17 +26,11 @@ export declare class SekiContextMenuContent {
         top: string;
         left: string;
     };
-    /**
-     * Currently focused item index
-     */
-    _focusedIndex: number;
     private getContext;
-    private getMenuItems;
     componentWillRender(): void;
     componentDidLoad(): void;
     componentDidRender(): void;
     handleKeyDown(event: KeyboardEvent): void;
-    private focusItem;
     private updatePosition;
     disconnectedCallback(): void;
     render(): any;

package/dist/types/components/context-menu/seki-context-menu.d.ts

@@ -43,6 +43,8 @@ export declare class SekiContextMenu {
      * Emitted when an item is selected
      */
     sekiSelect: EventEmitter<string>;
+    /** Element focused when the menu opened, restored on close. */
+    private returnFocusTo?;
     private clickOutsideHandler?;
     private clickOutsideTimeout?;
     componentWillLoad(): void;
@@ -72,6 +74,12 @@ export declare class SekiContextMenu {
      * Handle Escape key to close menu
      */
     handleKeyDown(event: KeyboardEvent): void;
+    /**
+     * Return focus to the element that had it before the menu opened (Radix
+     * context menu does not focus the trigger). Skipped when focus already moved
+     * somewhere outside the menu.
+     */
+    private restoreFocus;
     private setupClickOutside;
     private removeClickOutside;
     private getContext;

package/dist/types/components/data-table/seki-data-table.d.ts

@@ -60,9 +60,13 @@ export declare class SekiDataTable {
     filterChange: EventEmitter<FilterChangeDetail>;
     /** Emitted when page/page size changes */
     pageChange: EventEmitter<PageChangeDetail>;
-    /** Callback to fetch data */
+    /**
+     * Callback to fetch data. Set it as a JS property. Assigning or replacing it
+     * (re)loads the table. Must be a @Prop: in the lazy-loader build only
+     * decorated members are proxied from the host element to the instance.
+     */
     fetchData?: FetchDataCallback;
-    /** Callback to render expanded row content */
+    /** Callback to render expanded row content (must be a @Prop, see fetchData) */
     renderExpandedRow?: RenderExpandedRowCallback;
     private searchTimeout?;
     private scrollContainerRef?;
@@ -70,6 +74,7 @@ export declare class SekiDataTable {
     componentWillLoad(): void;
     componentDidLoad(): void;
     disconnectedCallback(): void;
+    fetchDataChanged(): void;
     columnsChanged(): void;
     pageSizeChanged(newValue: number): void;
     /** Get currently selected row objects */

package/dist/types/components/date-picker/seki-date-picker.d.ts

@@ -1,4 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+import { FormControlState } from '../../utils/form-control';
 export type DatePickerMode = 'single' | 'range';
 export interface DateRange {
     from: Date | null;
@@ -97,7 +98,11 @@ export declare class SekiDatePicker {
     private triggerRef?;
     private popoverRef?;
     private internals?;
+    private formControl?;
     componentWillLoad(): void;
+    formResetCallback(): void;
+    formDisabledCallback(disabled: boolean): void;
+    formStateRestoreCallback(state: FormControlState): void;
     componentDidLoad(): void;
     handleOpenPropChange(newValue: boolean): void;
     updateFormValue(): void;

package/dist/types/components/dialog/seki-dialog-content.d.ts

@@ -10,7 +10,11 @@ export declare class SekiDialogContent {
     el: HTMLElement;
     private contentRef?;
     private previousActiveElement?;
-    private dialogEl?;
+    private dialogConsumer;
+    /**
+     * Re-read the parent's context. Runs once on connect (picking up a dialog
+     * that is already open, e.g. `<seki-dialog open>`) and on every publish.
+     */
     private onDialogOpenChange;
     /**
      * Whether pressing Escape closes the dialog
@@ -19,9 +23,8 @@ export declare class SekiDialogContent {
     _isOpen: boolean;
     closeDialog: EventEmitter<void>;
     private getContext;
-    componentWillRender(): void;
+    connectedCallback(): void;
     componentDidRender(): void;
-    componentDidLoad(): void;
     handleKeyDown(event: KeyboardEvent): void;
     disconnectedCallback(): void;
     render(): any;

package/dist/types/components/dialog/seki-dialog-description.d.ts

@@ -7,6 +7,10 @@
  */
 export declare class SekiDialogDescription {
     el: HTMLElement;
-    private getContext;
+    /** Id assigned by the parent dialog (read from its context). */
+    _id?: string;
+    private dialogConsumer;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components/dialog/seki-dialog-overlay.d.ts

@@ -11,12 +11,11 @@ export declare class SekiDialogOverlay {
      */
     closeOnClick: boolean;
     _isOpen: boolean;
-    private dialogEl?;
+    private dialogConsumer;
     private onDialogOpenChange;
     closeDialog: EventEmitter<void>;
     private getContext;
-    componentWillRender(): void;
-    componentDidLoad(): void;
+    connectedCallback(): void;
     private handleClick;
     disconnectedCallback(): void;
     render(): any;

package/dist/types/components/dialog/seki-dialog-title.d.ts

@@ -7,6 +7,10 @@
  */
 export declare class SekiDialogTitle {
     el: HTMLElement;
-    private getContext;
+    /** Id assigned by the parent dialog (read from its context). */
+    _id?: string;
+    private dialogConsumer;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components/dialog/seki-dialog.d.ts

@@ -41,8 +41,16 @@ export declare class SekiDialog {
      * Emitted when open state changes
      */
     sekiOpenChange: EventEmitter<boolean>;
+    /**
+     * Internal: notifies dialog parts (content, overlay, title, description)
+     * that `_dialogContext` changed. Not part of the public API; listen to
+     * `sekiOpenChange` instead.
+     */
+    dialogContextChange: EventEmitter<void>;
     constructor();
     componentWillLoad(): void;
+    componentDidLoad(): void;
+    handleModalChange(): void;
     handleOpenPropChange(newValue: boolean): void;
     private get titleId();
     private get descriptionId();
@@ -57,8 +65,7 @@ export declare class SekiDialog {
     handleTriggerClick(): void;
     handleCloseRequest(): void;
     private getContext;
-    componentDidLoad(): void;
-    componentDidUpdate(): void;
+    private publish;
     disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components/drawer/seki-drawer-content.d.ts

@@ -71,7 +71,7 @@ export declare class SekiDrawerContent {
     private startX;
     private contentEl;
     private positions;
-    private drawerEl?;
+    private drawerConsumer;
     /**
      * Computed: should show handle based on prop or direction default
      */
@@ -80,9 +80,14 @@ export declare class SekiDrawerContent {
      * Computed: is horizontal direction
      */
     private get isHorizontal();
+    connectedCallback(): void;
     componentWillLoad(): void;
-    componentDidLoad(): void;
-    private onDrawerOpenChange;
+    /** Propagate the direction to the parent for styling. */
+    propagateDirection(): void;
+    /**
+     * Re-read the parent's open state. Runs once on connect (picking up a drawer
+     * that is already open, e.g. `<seki-drawer open>`) and on every publish.
+     */
     private syncOpenState;
     parseSnapPoints(): void;
     private handleCloseClick;

package/dist/types/components/drawer/seki-drawer.d.ts

@@ -54,8 +54,12 @@ export declare class SekiDrawer {
      * event shape so a consumer can listen to one event name across every overlay.
      */
     sekiOpenChange: EventEmitter<boolean>;
+    /**
+     * Internal: notifies seki-drawer-content that `_drawerContext` changed. Not
+     * part of the public API; listen to `sekiOpenChange` instead.
+     */
+    drawerContextChange: EventEmitter<void>;
     componentWillLoad(): void;
-    componentDidLoad(): void;
     handleOpenPropChange(newValue: boolean): void;
     /**
      * Opens the drawer

package/dist/types/components/dropdown-menu/seki-dropdown-menu-content.d.ts

@@ -9,6 +9,7 @@ import type { DropdownMenuSide, DropdownMenuAlign } from './seki-dropdown-menu';
 export declare class SekiDropdownMenuContent {
     el: HTMLElement;
     private contentRef?;
+    private typeahead;
     private menuEl?;
     private onMenuOpenChange;
     /**
@@ -28,14 +29,11 @@ export declare class SekiDropdownMenuContent {
         top: string;
         left: string;
     };
-    _focusedIndex: number;
     private getContext;
-    private getMenuItems;
     componentWillRender(): void;
     componentDidLoad(): void;
     componentDidRender(): void;
     handleKeyDown(event: KeyboardEvent): void;
-    private focusItem;
     private updatePosition;
     disconnectedCallback(): void;
     render(): any;

package/dist/types/components/dropdown-menu/seki-dropdown-menu.d.ts

@@ -53,6 +53,8 @@ export declare class SekiDropdownMenu {
      * Emitted when an item is selected
      */
     sekiSelect: EventEmitter<string>;
+    /** Element focused when the menu opened, restored on close. */
+    private returnFocusTo?;
     private clickOutsideHandler?;
     private clickOutsideTimeout?;
     componentWillLoad(): void;
@@ -68,6 +70,12 @@ export declare class SekiDropdownMenu {
     handleTriggerClick(): void;
     handleItemSelect(event: CustomEvent<string>): void;
     handleKeyDown(event: KeyboardEvent): void;
+    /**
+     * Return focus to the trigger (or whatever had focus when the menu opened)
+     * after the menu closes. Skipped when focus already moved somewhere outside
+     * the menu, e.g. the user clicked another focusable element.
+     */
+    private restoreFocus;
     private setupClickOutside;
     private removeClickOutside;
     private getContext;

package/dist/types/components/field-label/seki-field-label.d.ts

@@ -2,7 +2,8 @@ export declare class SekiFieldLabel {
     el: HTMLElement;
     /**
      * ID of the form control this label is for
-     * Sets the `for` attribute on the label element
+     * Resolved in the label's own root node (not this component's shadow root), so it
+     * reaches light-DOM controls. Falls back to the control nested in the label.
      */
     htmlFor?: string;
     /**
@@ -10,5 +11,12 @@ export declare class SekiFieldLabel {
      * Displays a required indicator (*) after the label text
      */
     required: boolean;
+    private binding?;
+    onForChange(): void;
+    /** Forward clicks to the labelled control (see utils/label-association.ts). */
+    onClick(event: MouseEvent): void;
+    connectedCallback(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components/input/seki-input.d.ts

@@ -1,7 +1,10 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+import { FormControlState } from '../../utils/form-control';
 export declare class SekiInput {
     el: HTMLElement;
     internals: ElementInternals;
+    private inputEl?;
+    private formControl?;
     /**
      * Input type (text, email, password, number, tel, url, date, file, etc.)
      */
@@ -106,7 +109,15 @@ export declare class SekiInput {
     private handleFocus;
     private handleBlur;
     formResetCallback(): void;
-    formStateRestoreCallback(state: string): void;
+    formDisabledCallback(disabled: boolean): void;
+    formStateRestoreCallback(state: FormControlState): void;
+    /**
+     * Keep the inner inputEl and the form in step with a programmatic `el.value = x`
+     * without waiting for the next render, so `form.checkValidity()` and FormData
+     * read the new value immediately.
+     */
+    handleFormStateChange(): void;
     componentWillLoad(): void;
+    componentDidRender(): void;
     render(): any;
 }

package/dist/types/components/input-otp/seki-input-otp.d.ts

@@ -1,8 +1,10 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+import { FormControlState } from '../../utils/form-control';
 export declare class SekiInputOtp {
     el: HTMLElement;
     internals: ElementInternals;
     private inputRef?;
+    private formControl?;
     /**
      * Total number of characters allowed
      */
@@ -78,13 +80,13 @@ export declare class SekiInputOtp {
      */
     sekiOtpStateChange: EventEmitter<void>;
     handleValueChange(newValue: string): void;
+    handleFormStateChange(): void;
     handleStateChange(): void;
     componentWillLoad(): void;
+    componentDidRender(): void;
     formResetCallback(): void;
-    formStateRestoreCallback(state: string): void;
-    /**
-     * Focus the input at a specific index (called by slots)
-     */
+    formDisabledCallback(disabled: boolean): void;
+    formStateRestoreCallback(state: FormControlState): void;
     focusAtIndex(index: number): void;
     private getPatternRegex;
     private isValidChar;

package/dist/types/components/label/seki-label.d.ts

@@ -10,8 +10,10 @@
 export declare class SekiLabel {
     el: HTMLElement;
     /**
-     * The ID of the form element this label is associated with.
-     * Maps to the `htmlFor` attribute on the inner `<label>` element.
+     * The ID of the form element this label is associated with. Resolved in the
+     * label's own root node (document or shadow root), not in this component's
+     * shadow root, so it reaches light-DOM controls. Without it, the first control
+     * nested inside the label is used.
      */
     for?: string;
     /**
@@ -24,5 +26,12 @@ export declare class SekiLabel {
      * @default false
      */
     disabled?: boolean;
+    private binding?;
+    onForChange(): void;
+    /** Forward clicks to the labelled control (see utils/label-association.ts). */
+    onClick(event: MouseEvent): void;
+    connectedCallback(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components/menubar/seki-menubar-content.d.ts

@@ -9,6 +9,7 @@ import type { MenubarContentSide, MenubarContentAlign } from './types';
 export declare class SekiMenubarContent {
     el: HTMLElement;
     private contentRef?;
+    private typeahead;
     /**
      * Preferred side for placement
      */
@@ -26,20 +27,13 @@ export declare class SekiMenubarContent {
         top: string;
         left: string;
     };
-    _focusedIndex: number;
-    private typeaheadBuffer;
-    private typeaheadTimer?;
     private menubarEl?;
     private onMenubarOpenChange;
     private getMenubarContext;
     private getMenuId;
-    private getMenuItems;
     componentDidLoad(): void;
     componentDidRender(): void;
     handleKeyDown(event: KeyboardEvent): void;
-    private getNextEnabledIndex;
-    private handleTypeahead;
-    private focusItem;
     private updatePosition;
     disconnectedCallback(): void;
     render(): any;

package/dist/types/components/popover/seki-popover-content.d.ts

@@ -9,7 +9,11 @@ import type { PopoverSide, PopoverAlign } from './seki-popover';
 export declare class SekiPopoverContent {
     el: HTMLElement;
     private contentRef?;
-    private popoverEl?;
+    private popoverConsumer;
+    /**
+     * Re-read the parent's context. Runs once on connect (picking up a popover
+     * that is already open) and on every publish.
+     */
     private onPopoverOpenChange;
     /**
      * Override side from parent
@@ -34,8 +38,7 @@ export declare class SekiPopoverContent {
     };
     _actualSide: PopoverSide;
     private getContext;
-    componentWillRender(): void;
-    componentDidLoad(): void;
+    connectedCallback(): void;
     componentDidRender(): void;
     private updatePosition;
     disconnectedCallback(): void;

package/dist/types/components/popover/seki-popover.d.ts

@@ -57,10 +57,16 @@ export declare class SekiPopover {
      * Emitted when open state changes
      */
     sekiOpenChange: EventEmitter<boolean>;
+    /**
+     * Internal: notifies popover parts that `_popoverContext` changed. Not part
+     * of the public API; listen to `sekiOpenChange` instead.
+     */
+    popoverContextChange: EventEmitter<void>;
     private clickOutsideHandler?;
     private clickOutsideTimeout?;
     componentWillLoad(): void;
     openChanged(newValue: boolean): void;
+    placementChanged(): void;
     /**
      * Open the popover
      */
@@ -79,8 +85,8 @@ export declare class SekiPopover {
     private setupClickOutside;
     private removeClickOutside;
     private getContext;
+    private publish;
     componentDidLoad(): void;
-    componentDidUpdate(): void;
     disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components/radio-group/seki-radio-group.d.ts

@@ -1,4 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+import { FormControlState } from '../../utils/form-control';
 /**
  * @component seki-radio-group
  * @description A set of radio buttons where only one can be selected at a time.
@@ -11,6 +12,8 @@ import { EventEmitter } from '../../stencil-public-runtime';
  */
 export declare class SekiRadioGroup {
     el: HTMLElement;
+    internals: ElementInternals;
+    private formControl?;
     /**
      * Controlled value. When provided, component operates in controlled mode.
      */
@@ -50,6 +53,10 @@ export declare class SekiRadioGroup {
         value: string;
     }>;
     componentWillLoad(): void;
+    handleFormStateChange(): void;
+    formResetCallback(): void;
+    formDisabledCallback(disabled: boolean): void;
+    formStateRestoreCallback(state: FormControlState): void;
     /**
      * Mirror an externally-assigned `value` onto the rendered selection. This is
      * what keeps controlled usage working: a consumer writing `el.value = x` (or

package/dist/types/components/select/seki-select.d.ts

@@ -1,11 +1,13 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import type { SelectValue, SelectChangeEventDetail, SelectValidateEventDetail, SelectOption, SelectPlacement } from '../../utils/select';
+import { FormControlState } from '../../utils/form-control';
 /**
  * @slot - Content containing seki-select-trigger and seki-select-content
  */
 export declare class SekiSelect {
     el: HTMLElement;
     internals: ElementInternals;
+    private formControl?;
     /** Current selected value (controlled mode) */
     value?: SelectValue;
     /** Initial selected value (uncontrolled mode) */
@@ -72,6 +74,21 @@ export declare class SekiSelect {
     handleIsOpenChange(): void;
     handleInternalValueChange(): void;
     handleDisabledChange(): void;
+    /**
+     * The trigger's label comes from the registered options, so registering an
+     * option must notify the parts. Before #323 this was only a silent property
+     * write in componentDidRender, and a trigger that rendered before the
+     * selected option registered stayed on the placeholder.
+     */
+    handleRegisteredOptionsChange(): void;
+    private registrationPublishQueued;
+    formResetCallback(): void;
+    formDisabledCallback(disabled: boolean): void;
+    formStateRestoreCallback(state: FormControlState): void;
+    /** Put the selection back to `next` without emitting `sekiChange` (reset is not a user edit). */
+    private setValueFromForm;
+    private isValueEmpty;
+    private getFormValue;
     handleFocusedOptionValueChange(): void;
     private updateContextOnElement;
     /**

package/dist/types/components/select-content/seki-select-content.d.ts

@@ -5,9 +5,10 @@ export declare class SekiSelectContent {
     el: HTMLElement;
     forceUpdate: number;
     private scrollContainerRef?;
-    componentDidLoad(): void;
+    private selectConsumer;
+    connectedCallback(): void;
     disconnectedCallback(): void;
-    private handleParentOpenChange;
+    private handleParentContextChange;
     /** Scroll to make an option visible */
     scrollToOption(optionId: string): Promise<void>;
     private getSelectContext;

package/dist/types/components/select-option/seki-select-option.d.ts

@@ -20,10 +20,16 @@ export declare class SekiSelectOption {
         value: string | number;
     }>;
     private get optionId();
-    private hasRegistered;
-    private contextSubscription;
-    componentDidLoad(): void;
+    /**
+     * The registerOption function this option last registered through. It is a
+     * stable per-select-instance function, so comparing it tells "already
+     * registered with this select" apart from "the select published its context
+     * for the first time" or "moved to a different select".
+     */
+    private registeredVia?;
+    private selectConsumer;
     connectedCallback(): void;
+    componentDidLoad(): void;
     disconnectedCallback(): void;
     /**
      * Refresh aria-selected/data-selected/data-focused directly on the

package/dist/types/components/select-trigger/seki-select-trigger.d.ts

@@ -6,11 +6,17 @@ export declare class SekiSelectTrigger {
     el: HTMLElement;
     forceUpdate: number;
     private buttonRef?;
-    private contextSubscription;
-    componentDidLoad(): void;
+    private selectConsumer;
+    connectedCallback(): void;
     disconnectedCallback(): void;
-    private handleParentOpenChange;
-    private handleParentValueChange;
+    /**
+     * Listeners follow the button element itself: the button only exists once a
+     * context is available (the first render may be the "Loading..." fallback
+     * when this trigger upgrades before its seki-select), so binding once in
+     * componentDidLoad could miss it entirely.
+     */
+    private setButtonRef;
+    private handleParentContextChange;
     private handleButtonClick;
     private handleButtonKeyDown;
     private getSelectContext;

package/dist/types/components/sheet/seki-sheet-content.d.ts

@@ -21,12 +21,16 @@ export declare class SekiSheetContent {
      * seki-sheet parent (e.g. mounted standalone).
      */
     _isOpen: boolean;
-    private sheetEl?;
+    private sheetConsumer;
     private handleCloseClick;
-    private onSheetOpenChange;
+    /**
+     * Re-read the parent's open state. Runs once on connect (picking up a sheet
+     * that is already open, e.g. `<seki-sheet open>`) and on every publish.
+     */
     private syncOpenState;
-    componentWillLoad(): void;
-    componentDidLoad(): void;
+    connectedCallback(): void;
     disconnectedCallback(): void;
+    /** Propagate the side attribute to the parent for CSS targeting. */
+    propagateSide(): void;
     render(): any;
 }