@sekiui/elements 0.1.3 → 0.1.5

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

@@ -8,16 +8,15 @@
 export declare class SekiCollapsibleContent {
     el: HTMLElement;
     private contentRef?;
-    private observer?;
-    private collapsibleEl?;
-    private onCollapsibleOpenChange;
+    private collapsibleConsumer;
     _isOpen: boolean;
     _isAnimating: boolean;
     _contentHeight: number;
+    _contentId: string;
+    _triggerId: string;
     private getContext;
-    componentWillLoad(): void;
+    connectedCallback(): void;
     componentDidLoad(): void;
-    private setupObserver;
     private syncWithContext;
     disconnectedCallback(): void;
     render(): any;

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

@@ -1,3 +1,4 @@
+import type { CollapsibleContext } from './seki-collapsible';
 /**
  * Trigger button for Collapsible component
  *
@@ -11,6 +12,16 @@ export declare class SekiCollapsibleTrigger {
      * Render as child - wraps content in a button or uses slotted element
      */
     asChild: boolean;
+    /**
+     * Snapshot of the parent's context. Held in @State (rather than read during
+     * render) so that a parent change re-renders the trigger: before #323 the
+     * trigger read the context only while rendering and never re-rendered, so
+     * aria-expanded stayed "false" after the content opened.
+     */
+    _context: CollapsibleContext | null;
+    private collapsibleConsumer;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     private getContext;
     handleClick(): void;
     handleKeyDown(event: KeyboardEvent): void;

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

@@ -38,9 +38,15 @@ export declare class SekiCollapsible {
      * Emitted when open state changes
      */
     sekiOpenChange: EventEmitter<boolean>;
+    /**
+     * Internal: notifies collapsible parts that `_collapsibleContext` changed.
+     * Not part of the public API; listen to `sekiOpenChange` instead.
+     */
+    collapsibleContextChange: EventEmitter<void>;
     constructor();
     componentWillLoad(): void;
     openChanged(newValue: boolean): void;
+    disabledChanged(): void;
     /**
      * Toggle the collapsible open state
      */
@@ -55,8 +61,6 @@ export declare class SekiCollapsible {
     setClose(): Promise<void>;
     private get contentId();
     private get triggerId();
-    componentDidLoad(): void;
-    componentDidUpdate(): void;
     private updateContext;
     private getContext;
     render(): any;

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

@@ -65,6 +65,12 @@ export declare class SekiCombobox {
     componentWillLoad(): void;
     componentDidLoad(): void;
     componentDidRender(): void;
+    /**
+     * Place on the overlay stack (utils/overlay.ts). The input already closes
+     * the list on Escape; registering the open list as a layer keeps that key
+     * from also closing an enclosing dialog or sheet (#332).
+     */
+    private layer;
     disconnectedCallback(): void;
     handleValuePropChange(newValue: ComboboxValue): void;
     handleOpenPropChange(newOpen: boolean): void;

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

@@ -7,9 +7,8 @@ export declare class SekiComboboxContent {
     maxHeight: string;
     isOpen: boolean;
     listboxId: string;
-    private getContext;
-    componentDidLoad(): void;
-    private observeParent;
-    private updateState;
+    private comboboxConsumer;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components/combobox-empty/seki-combobox-empty.d.ts

@@ -1,4 +1,4 @@
-import { ComboboxEmptyReason } from '../../utils/combobox';
+import type { ComboboxEmptyReason } from '../../utils/combobox';
 /**
  * seki-combobox-empty: Display empty/loading/error states for combobox dropdown
  *
@@ -26,6 +26,12 @@ export declare class SekiComboboxEmpty {
      * @default 'no-results'
      */
     reason: ComboboxEmptyReason;
+    /** Whether the current combobox state calls for this message. */
+    shouldShow: boolean;
+    private comboboxConsumer;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private sync;
     render(): any;
     /**
      * Renders the appropriate named slot based on the current reason

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

@@ -5,6 +5,14 @@ export declare class SekiComboboxGroup {
     el: HTMLElement;
     /** Group label */
     label: string;
+    /** Show even when every item in the group is filtered out */
+    forceMount: boolean;
+    /** False once the search filters out every item in this group. */
+    hasVisibleItems: boolean;
+    private comboboxConsumer;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private updateVisibility;
     private groupId;
     render(): any;
 }

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

@@ -11,9 +11,18 @@ export declare class SekiComboboxInput {
     listboxId: string;
     inputId: string;
     focusedItemValue: string | null;
-    private contextSubscription;
+    /**
+     * True while the user is typing a query. In single-select mode the input
+     * shows the selected item's label otherwise, so clearing the text does not
+     * snap the label back mid-edit (shadcn/Radix comboboxes behave the same).
+     */
+    private editing;
+    private comboboxConsumer;
     private getContext;
+    connectedCallback(): void;
     componentDidLoad(): void;
+    /** What the text box shows: the typed query, else the selected label (single mode). */
+    private get displayValue();
     /**
      * Re-sync local state whenever the parent's context changes post-mount —
      * slotted children don't re-render with the parent, so without this the

package/dist/types/components/combobox-item/seki-combobox-item.d.ts

@@ -9,10 +9,12 @@ export declare class SekiComboboxItem {
     disabled: boolean;
     isSelected: boolean;
     isFocused: boolean;
+    /** False while the parent's search filters this item out. */
+    isVisible: boolean;
     private itemId;
     private getContext;
     private hasRegistered;
-    private contextSubscription;
+    private comboboxConsumer;
     componentWillLoad(): void;
     componentDidLoad(): void;
     connectedCallback(): void;
@@ -27,6 +29,7 @@ export declare class SekiComboboxItem {
      * toggled by the `selected` class in CSS for the same reason.
      */
     private handleParentContextChange;
+    private matchesFilter;
     handlePropsChange(): void;
     private registerWithContext;
     private updateState;

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

@@ -8,10 +8,8 @@
 export declare class SekiCommandEmpty {
     el: HTMLElement;
     _visible: boolean;
-    private handleValueChange;
-    private getContext;
-    componentWillRender(): void;
-    componentDidLoad(): void;
+    private commandConsumer;
+    connectedCallback(): void;
     disconnectedCallback(): void;
     render(): any;
 }

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

@@ -10,8 +10,7 @@ export declare class SekiCommandGroup {
     el: HTMLElement;
     private static instanceCount;
     private headingId;
-    private commandEl?;
-    private onCommandValueChange;
+    private commandConsumer;
     /**
      * Group header text
      */
@@ -33,7 +32,7 @@ export declare class SekiCommandGroup {
      * Update visibility based on child items
      */
     updateVisibility(): void;
-    componentDidLoad(): void;
+    connectedCallback(): void;
     disconnectedCallback(): void;
     render(): any;
 }

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

@@ -17,7 +17,11 @@ export declare class SekiCommandInput {
      * Emitted on input change (internal use)
      */
     sekiCommandInputChange: EventEmitter<string>;
-    private getContext;
+    /** The parent command's search value, mirrored from its context. */
+    _value: string;
+    private commandConsumer;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     /**
      * Focus the input
      */

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

@@ -46,7 +46,10 @@ export declare class SekiCommandItem {
      * its highlight here. seki-command identifies the item from the event target.
      */
     sekiCommandHighlight: EventEmitter<void>;
+    private commandConsumer;
     constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     /**
      * Get the searchable text for this item
      */

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.d.ts

@@ -71,9 +71,11 @@ export declare class SekiContextMenu {
      */
     handleItemSelect(event: CustomEvent<string>): void;
     /**
-     * Handle Escape key to close menu
+     * Place on the overlay stack (utils/overlay.ts): Escape reaches this
+     * component only when nothing is open on top of it, so one key press closes
+     * one layer (#332).
      */
-    handleKeyDown(event: KeyboardEvent): void;
+    private layer;
     /**
      * 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
@@ -85,6 +87,7 @@ export declare class SekiContextMenu {
     private getContext;
     componentDidLoad(): void;
     componentDidUpdate(): void;
+    componentDidRender(): void;
     disconnectedCallback(): void;
     render(): any;
 }

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

@@ -60,16 +60,23 @@ 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?;
+    /** Monotonic id of the latest loadData call; older responses are discarded. */
+    private loadSeq;
     private scrollContainerRef?;
     private resizeObserver?;
     componentWillLoad(): void;
     componentDidLoad(): void;
     disconnectedCallback(): void;
+    fetchDataChanged(): void;
     columnsChanged(): void;
     pageSizeChanged(newValue: number): void;
     /** Get currently selected row objects */
@@ -107,6 +114,7 @@ export declare class SekiDataTable {
     private handlePageChange;
     private handlePageSizeChange;
     private handleSearchInput;
+    private cancelPendingSearch;
     private handleClearSearch;
     private handleRowSelect;
     private handleSelectAll;

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

@@ -54,7 +54,9 @@ export declare class SekiDatePicker {
      */
     disabled: boolean;
     /**
-     * Form field name
+     * Form field name. In single mode the submitted value is `YYYY-MM-DD`. In
+     * range mode two entries are submitted: `<name>-from` and `<name>-to`
+     * (each `YYYY-MM-DD`; an unset end is omitted).
      */
     name?: string;
     /**
@@ -65,6 +67,14 @@ export declare class SekiDatePicker {
      * ARIA label for accessibility
      */
     ariaLabel?: string;
+    /**
+     * Text that describes this control. Set by `seki-field` from its description
+     * (and error) slot, because an `aria-describedby` id cannot cross the shadow
+     * boundary to the inner element (#358).
+     */
+    ariaDescription?: string;
+    /** Marks the control invalid for assistive technology. Set by `seki-field` (#358). */
+    ariaInvalid?: string;
     /**
      * Controlled open state of the popover. Also readable/writable as the `open`
      * attribute, so `<seki-date-picker open>` renders open with no script involved.
@@ -113,6 +123,15 @@ export declare class SekiDatePicker {
     private handleDateSelect;
     private handleRangeSelect;
     handleKeyDown(event: KeyboardEvent): void;
+    private handleEscape;
+    /**
+     * Place on the overlay stack (utils/overlay.ts): Escape reaches this
+     * component only when nothing is open on top of it, so one key press closes
+     * one layer (#332).
+     */
+    private layer;
+    componentDidRender(): void;
+    disconnectedCallback(): void;
     handleDocumentClick(event: MouseEvent): void;
     /**
      * Open the date picker popover

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

@@ -9,20 +9,31 @@ import { EventEmitter } from '../../stencil-public-runtime';
 export declare class SekiDialogContent {
     el: HTMLElement;
     private contentRef?;
-    private previousActiveElement?;
-    private dialogEl?;
+    private dialogConsumer;
+    /**
+     * Escape, focus trap, focus restore and scroll lock (utils/overlay.ts).
+     * Escape reaches this dialog only when nothing is open on top of it.
+     */
+    private layer;
+    private labels;
+    /**
+     * 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
      */
     closeOnEscape: boolean;
     _isOpen: boolean;
+    /** Title text mirrored for the accessible name (#357). */
+    _label: string;
+    /** Description text mirrored for the accessible description (#357). */
+    _description: string;
     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

@@ -2,21 +2,25 @@ import { EventEmitter } from '../../stencil-public-runtime';
 /**
  * Dialog overlay (backdrop)
  *
+ * Works inside `seki-dialog` and inside `seki-alert-dialog`. In an alert
+ * dialog a click on the overlay never closes it (shadcn/Radix: alert dialogs
+ * close only via Cancel, Action or Escape).
+ *
  * @part overlay - The overlay element
  */
 export declare class SekiDialogOverlay {
     el: HTMLElement;
     /**
-     * Whether clicking the overlay closes the dialog
+     * Whether clicking the overlay closes the dialog. Ignored inside
+     * `seki-alert-dialog`, which an overlay click never closes.
      */
     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

@@ -7,6 +7,12 @@ export interface DialogContext {
     modal: boolean;
     titleId: string;
     descriptionId: string;
+    /**
+     * Whether a click on seki-dialog-overlay closes the dialog. Absent means
+     * true; seki-alert-dialog publishes false (alert dialogs close only via
+     * Cancel, Action or Escape, as in shadcn/Radix).
+     */
+    dismissOnOverlayClick?: boolean;
     open: () => Promise<void>;
     close: () => Promise<void>;
 }
@@ -41,8 +47,15 @@ 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;
+    handleModalChange(): void;
     handleOpenPropChange(newValue: boolean): void;
     private get titleId();
     private get descriptionId();
@@ -57,8 +70,6 @@ export declare class SekiDialog {
     handleTriggerClick(): void;
     handleCloseRequest(): void;
     private getContext;
-    componentDidLoad(): void;
-    componentDidUpdate(): void;
-    disconnectedCallback(): void;
+    private publish;
     render(): any;
 }

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

@@ -57,6 +57,10 @@ export declare class SekiDrawerContent {
      * seki-drawer parent (e.g. mounted standalone).
      */
     _isOpen: boolean;
+    /** Title text mirrored for the accessible name (#357). */
+    _label: string;
+    /** Description text mirrored for the accessible description (#357). */
+    _description: string;
     /**
      * Emitted to request drawer close
      */
@@ -71,7 +75,14 @@ export declare class SekiDrawerContent {
     private startX;
     private contentEl;
     private positions;
-    private drawerEl?;
+    private drawerConsumer;
+    /**
+     * Modal behaviour (utils/overlay.ts): focus moved in and trapped, page
+     * scroll locked, focus restored on close, Escape closes this drawer only
+     * when nothing is open on top of it.
+     */
+    private layer;
+    private labels;
     /**
      * Computed: should show handle based on prop or direction default
      */
@@ -80,10 +91,16 @@ 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;
+    componentDidRender(): void;
     parseSnapPoints(): void;
     private handleCloseClick;
     private handlePointerDown;

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
@@ -79,6 +83,5 @@ export declare class SekiDrawer {
     handleRequestSnap(event: CustomEvent<{
         point: number;
     }>): void;
-    handleKeydown(ev: KeyboardEvent): void;
     render(): any;
 }

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

@@ -69,7 +69,12 @@ export declare class SekiDropdownMenu {
     closeMenu(): Promise<void>;
     handleTriggerClick(): void;
     handleItemSelect(event: CustomEvent<string>): void;
-    handleKeyDown(event: KeyboardEvent): void;
+    /**
+     * Place on the overlay stack (utils/overlay.ts): Escape reaches this
+     * component only when nothing is open on top of it, so one key press closes
+     * one layer (#332).
+     */
+    private layer;
     /**
      * Return focus to the trigger (or whatever had focus when the menu opened)
      * after the menu closes. Skipped when focus already moved somewhere outside
@@ -81,6 +86,7 @@ export declare class SekiDropdownMenu {
     private getContext;
     componentDidLoad(): void;
     componentDidUpdate(): void;
+    componentDidRender(): void;
     disconnectedCallback(): void;
     render(): any;
 }

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

@@ -12,6 +12,11 @@ export declare class SekiField {
      * Applies data-invalid attribute for styling
      */
     invalid: boolean;
+    private binding?;
+    onInvalidChange(): void;
+    connectedCallback(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
     /**
      * Check if multiple interactive controls are present in the default slot
      * If true, apply role="group" for accessibility

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/hover-card/seki-hover-card.d.ts

@@ -156,7 +156,13 @@ export declare class SekiHoverCard {
     handleRequestClose(): void;
     handleCancelOpen(): void;
     handleCancelClose(): void;
-    handleKeyDown(event: KeyboardEvent): void;
+    /**
+     * Place on the overlay stack (utils/overlay.ts): Escape reaches this
+     * component only when nothing is open on top of it, so one key press closes
+     * one layer (#332).
+     */
+    private layer;
+    componentDidRender(): void;
     componentDidLoad(): void;
     componentDidUpdate(): void;
     disconnectedCallback(): void;