@sekiui/elements 0.0.65 → 0.0.70

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

@@ -0,0 +1,41 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Alert Dialog Action Button Component
+ *
+ * A button that confirms and closes the alert dialog. Supports default and destructive variants
+ * for different action types. Emits a sekiAction event before closing.
+ *
+ * @slot - The action button text (defaults to "Continue")
+ *
+ * @part action - The action button element
+ */
+export declare class SekiAlertDialogAction {
+    el: HTMLElement;
+    /**
+     * The visual variant of the action button
+     * - 'default': Primary button style for standard confirmations
+     * - 'destructive': Red/danger style for destructive actions
+     */
+    variant: 'default' | 'destructive';
+    /**
+     * Emitted when the action button is clicked
+     */
+    actionEvent: EventEmitter<void>;
+    /**
+     * Emitted to request closing the alert dialog (fallback when context is unavailable)
+     */
+    requestClose: EventEmitter<void>;
+    /**
+     * Get context from parent alert dialog
+     */
+    private getContext;
+    /**
+     * Handle click event - emit action and close dialog
+     */
+    private handleClick;
+    /**
+     * Handle keyboard events for accessibility
+     */
+    private handleKeyDown;
+    render(): any;
+}

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

@@ -0,0 +1,35 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Alert Dialog Cancel Button Component
+ *
+ * A button that cancels and closes the alert dialog without confirming the action.
+ * Emits a sekiCancel event before closing.
+ *
+ * @slot - The cancel button text (defaults to "Cancel")
+ *
+ * @part cancel - The cancel button element
+ */
+export declare class SekiAlertDialogCancel {
+    el: HTMLElement;
+    /**
+     * Emitted when the cancel button is clicked
+     */
+    cancelEvent: EventEmitter<void>;
+    /**
+     * Emitted to request closing the alert dialog (fallback when context is unavailable)
+     */
+    requestClose: EventEmitter<void>;
+    /**
+     * Get context from parent alert dialog
+     */
+    private getContext;
+    /**
+     * Handle click event - emit cancel and close dialog
+     */
+    private handleClick;
+    /**
+     * Handle keyboard events for accessibility
+     */
+    private handleKeyDown;
+    render(): any;
+}

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

@@ -0,0 +1,54 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Alert Dialog Content Component
+ *
+ * The content panel for the alert dialog with role="alertdialog".
+ * This is a modal dialog that interrupts the user with important content
+ * and expects a response. Unlike regular dialogs, it does NOT close on
+ * overlay click - users must explicitly confirm or cancel.
+ *
+ * @slot - The alert dialog content (header, description, footer with actions)
+ *
+ * @part content - The content container element
+ */
+export declare class SekiAlertDialogContent {
+    el: HTMLElement;
+    private contentRef?;
+    private previousActiveElement?;
+    private static instanceCount;
+    private instanceId;
+    /**
+     * Whether pressing Escape closes the alert dialog
+     */
+    closeOnEscape: boolean;
+    /**
+     * Internal open state tracked from parent
+     */
+    _isOpen: boolean;
+    /**
+     * Emitted when the alert dialog requests to close
+     */
+    requestClose: EventEmitter<void>;
+    /**
+     * Emitted when the alert dialog is cancelled (Escape key)
+     */
+    cancelEvent: EventEmitter<void>;
+    constructor();
+    /**
+     * Get the title ID for aria-labelledby
+     */
+    private get titleId();
+    /**
+     * Get the description ID for aria-describedby
+     */
+    private get descriptionId();
+    /**
+     * Get context from parent alert dialog
+     */
+    private getContext;
+    componentWillRender(): void;
+    componentDidRender(): void;
+    componentDidLoad(): void;
+    handleKeyDown(event: KeyboardEvent): void;
+    render(): any;
+}

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

@@ -0,0 +1,17 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Alert Dialog Trigger Component
+ *
+ * The element that opens the alert dialog when clicked.
+ *
+ * @slot - The trigger content (typically a button)
+ *
+ * @part trigger - The trigger wrapper element
+ */
+export declare class SekiAlertDialogTrigger {
+    el: HTMLElement;
+    triggerClick: EventEmitter<void>;
+    private handleClick;
+    private handleKeyDown;
+    render(): any;
+}

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

@@ -0,0 +1,54 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Context interface for Alert Dialog component
+ */
+export interface AlertDialogContext {
+    isOpen: boolean;
+    close: () => Promise<void>;
+}
+/**
+ * Alert Dialog root component for confirmation dialogs
+ *
+ * A modal dialog that interrupts the user with important content and expects a response.
+ * Wraps seki-dialog internally with Alert Dialog-specific behavior.
+ *
+ * @slot - Alert Dialog trigger, overlay, and content
+ */
+export declare class SekiAlertDialog {
+    el: HTMLElement;
+    private dialogRef?;
+    /**
+     * Controlled open state
+     */
+    open: boolean;
+    /**
+     * Default open state (uncontrolled)
+     */
+    defaultOpen: boolean;
+    /**
+     * Internal open state
+     */
+    _isOpen: boolean;
+    /**
+     * Emitted when open state changes
+     */
+    sekiOpenChange: EventEmitter<boolean>;
+    componentWillLoad(): void;
+    openChanged(newValue: boolean): void;
+    /**
+     * Opens the alert dialog
+     */
+    openDialog(): Promise<void>;
+    /**
+     * Closes the alert dialog
+     */
+    closeDialog(): Promise<void>;
+    handleTriggerClick(): void;
+    handleCloseRequest(): void;
+    private handleOpenChange;
+    private getContext;
+    private updateContext;
+    componentDidLoad(): void;
+    componentDidUpdate(): void;
+    render(): any;
+}

package/dist/types/components/chart/chart-config.d.ts

@@ -0,0 +1,4 @@
+import type { ChartOptions } from 'chart.js';
+import type { ChartType } from './chart-types';
+export declare function getDefaultOptions(type: ChartType, gridColor: string, textColor: string, backgroundColor: string): ChartOptions;
+export declare function deepMerge<T>(target: T, source: Partial<T>): T;

package/dist/types/components/chart/chart-theme.d.ts

@@ -0,0 +1,5 @@
+export declare function getChartColors(element: HTMLElement): string[];
+export declare function getGridColor(element: HTMLElement): string;
+export declare function getTextColor(element: HTMLElement): string;
+export declare function getBackgroundColor(element: HTMLElement): string;
+export declare function hexToRgba(hex: string, alpha: number): string;

package/dist/types/components/chart/chart-types.d.ts

@@ -0,0 +1,15 @@
+import type { ChartData, ChartOptions } from 'chart.js';
+export type ChartType = 'line' | 'bar' | 'area' | 'doughnut';
+export type { ChartData, ChartOptions };
+export interface ChartDataset {
+    label?: string;
+    data: number[];
+    backgroundColor?: string | string[];
+    borderColor?: string | string[];
+    fill?: boolean;
+    [key: string]: unknown;
+}
+export interface ChartConfig {
+    labels?: string[];
+    datasets: ChartDataset[];
+}

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

@@ -0,0 +1,25 @@
+import type { ChartData, ChartOptions, ChartType } from './chart-types';
+export declare class SekiChart {
+    el: HTMLElement;
+    type: ChartType;
+    data?: ChartData;
+    options?: ChartOptions;
+    colors?: string[];
+    height: string;
+    dataJson?: string;
+    optionsJson?: string;
+    private chartInstance?;
+    private canvasRef?;
+    private updateTimeout?;
+    render(): any;
+    private getAriaLabel;
+    private renderErrorState;
+    private parseDataJson;
+    private parseOptionsJson;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    handlePropsChange(): void;
+    private renderChart;
+    private getColors;
+    private applyThemeColors;
+}

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

@@ -0,0 +1,97 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { ComboboxValue, ComboboxItem, ComboboxChangeEventDetail, ComboboxSearchEventDetail, ComboboxCustomValueEventDetail, ComboboxMultiSelectDisplay, ComboboxContext } from '../../utils/combobox';
+/**
+ * @slot - Content containing seki-combobox-input and seki-combobox-content
+ */
+export declare class SekiCombobox {
+    el: HTMLElement;
+    /** Current selected value (controlled mode) */
+    value?: ComboboxValue;
+    /** Initial selected value (uncontrolled mode) */
+    defaultValue?: ComboboxValue;
+    /** Static items for client-side filtering */
+    items?: ComboboxItem[];
+    /** Enable multi-select mode */
+    multiple: boolean;
+    /** Multi-select display mode */
+    multiSelectDisplay: ComboboxMultiSelectDisplay;
+    /** Allow values not in the list */
+    allowCustomValue: boolean;
+    /** Debounce delay for search (ms) */
+    debounce: number;
+    /** Placeholder text */
+    placeholder: string;
+    /** Disable component */
+    disabled: boolean;
+    /** Mark as required */
+    required: boolean;
+    /** Control dropdown open state (controlled mode) */
+    open?: boolean;
+    /** Initial dropdown open state (uncontrolled mode) */
+    defaultOpen: boolean;
+    /** Set loading state externally (for async) */
+    loading: boolean;
+    /** Accessible label for screen readers */
+    ariaLabel?: string;
+    /** ID of element that labels this combobox */
+    ariaLabelledby?: string;
+    /** ID of element that describes this combobox */
+    ariaDescribedby?: string;
+    /** Emitted when selected value changes */
+    sekiChange: EventEmitter<ComboboxChangeEventDetail>;
+    /** Emitted when search query changes (after debounce) */
+    sekiSearch: EventEmitter<ComboboxSearchEventDetail>;
+    /** Emitted when a custom value is submitted */
+    sekiCustomValue: EventEmitter<ComboboxCustomValueEventDetail>;
+    internalValue: ComboboxValue;
+    isOpen: boolean;
+    searchQuery: string;
+    focusedItemValue: string | null;
+    registeredItems: ComboboxItem[];
+    filteredItems: ComboboxItem[];
+    private listboxId;
+    private inputId;
+    private triggerId;
+    private debounceTimeoutId;
+    private clickOutsideListener?;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    componentDidRender(): void;
+    disconnectedCallback(): void;
+    handleValuePropChange(newValue: ComboboxValue): void;
+    handleOpenPropChange(newOpen: boolean): void;
+    handleItemsPropChange(newItems: ComboboxItem[]): void;
+    handleStateChange(): void;
+    handleKeyboardEvent(event: CustomEvent<{
+        key: string;
+    }>): void;
+    private updateContextOnElement;
+    private handleClickOutside;
+    /** Programmatically open the dropdown */
+    openDropdown(): Promise<void>;
+    /** Programmatically close the dropdown */
+    closeDropdown(): Promise<void>;
+    /** Clear all selections */
+    clearSelection(): Promise<void>;
+    /** Set the search query programmatically */
+    setQuery(query: string): Promise<void>;
+    /** Handle keyboard navigation */
+    private handleKeyboard;
+    private focusNextItem;
+    private focusPreviousItem;
+    private filterItems;
+    handleSearchChange: (query: string) => void;
+    handleValueChange: (newValue: ComboboxValue) => void;
+    handleOpenChange: (open: boolean) => void;
+    handleItemFocus: (value: string) => void;
+    handleItemSelect: (value: string) => void;
+    handleRemoveValue: (value: string) => void;
+    handleCustomValueCreate: (value: string) => void;
+    isValueSelected: (value: string) => boolean;
+    getSelectedItems: () => ComboboxItem[];
+    getFilteredItems: () => ComboboxItem[];
+    registerItem: (item: ComboboxItem) => void;
+    unregisterItem: (value: string) => void;
+    get comboboxContext(): ComboboxContext;
+    render(): any;
+}

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

@@ -0,0 +1,15 @@
+/**
+ * @slot - Combobox items
+ */
+export declare class SekiComboboxContent {
+    el: HTMLElement;
+    /** Maximum height of the dropdown */
+    maxHeight: string;
+    isOpen: boolean;
+    listboxId: string;
+    private getContext;
+    componentDidLoad(): void;
+    private observeParent;
+    private updateState;
+    render(): any;
+}

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

@@ -0,0 +1,33 @@
+import { ComboboxEmptyReason } from '../../utils/combobox';
+/**
+ * seki-combobox-empty: Display empty/loading/error states for combobox dropdown
+ *
+ * @component ComboboxEmpty
+ * @slot - Default slot for generic content
+ * @slot loading - Content to show when loading
+ * @slot no-results - Content to show when no results match
+ * @slot no-input - Content to show when no search input provided
+ * @slot error - Content to show when an error occurred
+ *
+ * @example
+ * <seki-combobox-empty reason="no-results">
+ *   No results found.
+ * </seki-combobox-empty>
+ *
+ * @example
+ * <seki-combobox-empty reason="loading">
+ *   <span slot="loading">Loading...</span>
+ * </seki-combobox-empty>
+ */
+export declare class SekiComboboxEmpty {
+    /**
+     * The reason why the combobox is showing an empty state
+     * @default 'no-results'
+     */
+    reason: ComboboxEmptyReason;
+    render(): any;
+    /**
+     * Renders the appropriate named slot based on the current reason
+     */
+    private renderSlotForReason;
+}

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

@@ -0,0 +1,9 @@
+/**
+ * @slot - Group items
+ */
+export declare class SekiComboboxGroup {
+    /** Group label */
+    label: string;
+    private groupId;
+    render(): any;
+}

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

@@ -0,0 +1,27 @@
+import type { ComboboxItem } from '../../utils/combobox';
+export declare class SekiComboboxInput {
+    el: HTMLElement;
+    searchQuery: string;
+    isOpen: boolean;
+    selectedItems: ComboboxItem[];
+    multiple: boolean;
+    multiSelectDisplay: 'chips' | 'count' | 'text';
+    placeholder: string;
+    disabled: boolean;
+    listboxId: string;
+    inputId: string;
+    focusedItemValue: string | null;
+    private getContext;
+    componentDidLoad(): void;
+    private updateState;
+    private handleInput;
+    private handleFocus;
+    private handleKeyDown;
+    private dispatchKeyboardEvent;
+    private handleChipRemove;
+    private renderChips;
+    private renderCount;
+    private renderText;
+    private renderSelectedDisplay;
+    render(): any;
+}

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

@@ -0,0 +1,23 @@
+/**
+ * @slot - Item label content
+ */
+export declare class SekiComboboxItem {
+    el: HTMLElement;
+    /** Item value */
+    value: string;
+    /** Disable this item */
+    disabled: boolean;
+    isSelected: boolean;
+    isFocused: boolean;
+    private itemId;
+    private getContext;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    handlePropsChange(): void;
+    private registerWithContext;
+    private updateState;
+    private handleClick;
+    private handleMouseEnter;
+    render(): any;
+}

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

@@ -0,0 +1,17 @@
+/**
+ * Command empty state - shown when no results match
+ *
+ * @slot - Empty state content
+ *
+ * @part empty - The empty state container
+ */
+export declare class SekiCommandEmpty {
+    el: HTMLElement;
+    _visible: boolean;
+    private handleValueChange;
+    private getContext;
+    componentWillRender(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    render(): any;
+}

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

@@ -0,0 +1,36 @@
+/**
+ * Command group - groups related items with a heading
+ *
+ * @slot - Group items (seki-command-item elements)
+ *
+ * @part group - The group container
+ * @part heading - The group heading
+ */
+export declare class SekiCommandGroup {
+    el: HTMLElement;
+    private static instanceCount;
+    private headingId;
+    /**
+     * Group header text
+     */
+    heading: string;
+    /**
+     * Show even when all items are filtered out
+     */
+    forceMount: boolean;
+    /**
+     * Whether this group has visible items
+     */
+    _hasVisibleItems: boolean;
+    constructor();
+    /**
+     * Get all items in this group
+     */
+    getItems(): HTMLElement[];
+    /**
+     * Update visibility based on child items
+     */
+    updateVisibility(): void;
+    componentDidLoad(): void;
+    render(): any;
+}

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

@@ -0,0 +1,29 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Command input - search field for filtering items
+ *
+ * @part input-wrapper - The input wrapper
+ * @part input - The input element
+ * @part icon - The search icon
+ */
+export declare class SekiCommandInput {
+    el: HTMLElement;
+    private inputRef?;
+    /**
+     * Placeholder text
+     */
+    placeholder: string;
+    /**
+     * Emitted on input change (internal use)
+     */
+    sekiCommandInputChange: EventEmitter<string>;
+    private getContext;
+    /**
+     * Focus the input
+     */
+    focusInput(): Promise<void>;
+    componentDidLoad(): void;
+    private handleInput;
+    private handleKeyDown;
+    render(): any;
+}

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

@@ -0,0 +1,65 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Command item - selectable option in the command list
+ *
+ * @slot - Item content (label)
+ *
+ * @part item - The item container
+ * @part shortcut - The keyboard shortcut display
+ */
+export declare class SekiCommandItem {
+    el: HTMLElement;
+    private static instanceCount;
+    private instanceId;
+    /**
+     * Unique value emitted on select
+     */
+    value: string;
+    /**
+     * Whether the item is disabled
+     */
+    disabled: boolean;
+    /**
+     * Additional search terms (space-separated)
+     */
+    keywords?: string;
+    /**
+     * Keyboard shortcut hint (e.g., "⌘K")
+     */
+    shortcut?: string;
+    /**
+     * Whether this item is currently highlighted
+     */
+    _highlighted: boolean;
+    /**
+     * Whether this item matches the current filter
+     */
+    _visible: boolean;
+    /**
+     * Emitted when this item is selected
+     */
+    sekiCommandSelect: EventEmitter<string>;
+    constructor();
+    /**
+     * Get the searchable text for this item
+     */
+    getSearchText(): string;
+    /**
+     * Get the item's unique ID for ARIA
+     */
+    getId(): string;
+    /**
+     * Set highlighted state (called by parent)
+     */
+    setHighlighted(highlighted: boolean): void;
+    /**
+     * Set visibility based on filter (called by parent)
+     */
+    setVisible(visible: boolean): void;
+    /**
+     * Check if item is visible
+     */
+    isVisible(): boolean;
+    private handleClick;
+    render(): any;
+}

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

@@ -0,0 +1,10 @@
+/**
+ * Command list - scrollable container for items and groups
+ *
+ * @slot - Items, groups, and empty state
+ *
+ * @part list - The list container
+ */
+export declare class SekiCommandList {
+    render(): any;
+}

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

@@ -0,0 +1,8 @@
+/**
+ * Command separator/divider
+ *
+ * @part separator - The separator line
+ */
+export declare class SekiCommandSeparator {
+    render(): any;
+}