@sekiui/elements 0.0.60 → 0.0.63

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

@@ -0,0 +1,49 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * seki-sheet: Root sheet component (slide-out panel)
+ *
+ * @component Sheet
+ * @example
+ * <seki-sheet>
+ *   <seki-sheet-trigger>
+ *     <seki-button>Open Sheet</seki-button>
+ *   </seki-sheet-trigger>
+ *   <seki-sheet-content>
+ *     <seki-sheet-header>
+ *       <seki-sheet-title>Title</seki-sheet-title>
+ *       <seki-sheet-description>Description</seki-sheet-description>
+ *     </seki-sheet-header>
+ *     Content here
+ *   </seki-sheet-content>
+ * </seki-sheet>
+ */
+export declare class SekiSheet {
+    /**
+     * Internal state for sheet open/closed
+     */
+    isOpen: boolean;
+    /**
+     * Emitted when the sheet opens
+     */
+    sheetOpen: EventEmitter<void>;
+    /**
+     * Emitted when the sheet closes
+     */
+    sheetClose: EventEmitter<void>;
+    /**
+     * Opens the sheet
+     */
+    open(): Promise<void>;
+    /**
+     * Closes the sheet
+     */
+    close(): Promise<void>;
+    /**
+     * Toggles the sheet
+     */
+    toggle(): Promise<void>;
+    handleTriggerClick(): void;
+    handleCloseSheet(): void;
+    handleKeydown(ev: KeyboardEvent): void;
+    render(): any;
+}

package/dist/types/components/sidebar/seki-sidebar-menu-sub.d.ts

@@ -1,7 +1,6 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 export declare class SekiSidebarMenuSub {
     el: HTMLElement;
-    private contentRef?;
     /**
      * Whether the submenu is open
      */
@@ -11,8 +10,6 @@ export declare class SekiSidebarMenuSub {
      */
     openChange: EventEmitter<boolean>;
     _open: boolean;
-    _isAnimating: boolean;
-    _contentHeight: number;
     componentWillLoad(): void;
     openChanged(newValue: boolean): void;
     private handleTriggerClick;

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

@@ -0,0 +1,130 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @component seki-slider
+ * @description An input where the user selects a value from within a given range.
+ * Features a track, range indicator, and draggable thumb with full keyboard and mouse support.
+ * @example
+ * <seki-slider></seki-slider>
+ * <seki-slider min="0" max="100" value="50"></seki-slider>
+ * <seki-slider step="10" default-value="30"></seki-slider>
+ */
+export declare class SekiSlider {
+    el: HTMLElement;
+    private trackEl?;
+    private thumbEl?;
+    private isDragging;
+    /**
+     * Minimum value of the slider.
+     */
+    min: number;
+    /**
+     * Maximum value of the slider.
+     */
+    max: number;
+    /**
+     * Step increment for the slider.
+     */
+    step: number;
+    /**
+     * Controlled value. When provided, component operates in controlled mode.
+     */
+    value?: number;
+    /**
+     * Initial value for uncontrolled mode. Ignored if value prop is provided.
+     */
+    defaultValue?: number;
+    /**
+     * Disables all interactions when true.
+     */
+    disabled: boolean;
+    /**
+     * Orientation of the slider.
+     */
+    orientation: 'horizontal' | 'vertical';
+    /**
+     * Form field name for form integration.
+     */
+    name?: string;
+    /**
+     * Accessible label for screen readers.
+     */
+    ariaLabel?: string;
+    /**
+     * ID of element describing this slider.
+     */
+    ariaDescribedby?: string;
+    /**
+     * Internal value for uncontrolled mode.
+     */
+    internalValue: number;
+    /**
+     * Emitted when value changes during interaction.
+     */
+    sekiInput: EventEmitter<{
+        value: number;
+    }>;
+    /**
+     * Emitted when value changes after interaction ends.
+     */
+    sekiChange: EventEmitter<{
+        value: number;
+    }>;
+    componentWillLoad(): void;
+    /**
+     * Get current value (controlled vs uncontrolled), clamped to valid range
+     */
+    private get currentValue();
+    /**
+     * Clamp value to min/max range and round to step
+     */
+    private clampValue;
+    /**
+     * Calculate percentage of value within range
+     */
+    private get percentage();
+    /**
+     * Update value from a position (mouse/touch)
+     */
+    private updateValueFromPosition;
+    /**
+     * Set value and emit events
+     */
+    private setValue;
+    /**
+     * Emit change event (called when interaction ends)
+     */
+    private emitChange;
+    /**
+     * Handle mouse down on track or thumb
+     */
+    private handleMouseDown;
+    /**
+     * Handle mouse move during drag
+     */
+    private handleMouseMove;
+    /**
+     * Handle mouse up to end drag
+     */
+    private handleMouseUp;
+    /**
+     * Handle touch start
+     */
+    private handleTouchStart;
+    /**
+     * Handle touch move during drag
+     */
+    private handleTouchMove;
+    /**
+     * Handle touch end
+     */
+    private handleTouchEnd;
+    /**
+     * Handle keyboard navigation
+     */
+    handleKeyDown(event: KeyboardEvent): void;
+    /**
+     * Clean up event listeners on disconnect
+     */
+    disconnectedCallback(): void;
+    render(): any;
+}

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

@@ -0,0 +1,24 @@
+import type { SpinnerSize, SpinnerColor } from './seki-spinner.interface';
+/**
+ * Spinner component for loading states
+ *
+ * @part spinner - The spinner SVG element
+ */
+export declare class SekiSpinner {
+    /**
+     * Size of the spinner
+     */
+    size: SpinnerSize;
+    /**
+     * Color variant of the spinner
+     */
+    color: SpinnerColor;
+    /**
+     * Accessible label for screen readers
+     */
+    ariaLabel: string;
+    private readonly validSizes;
+    private readonly validColors;
+    componentWillLoad(): void;
+    render(): any;
+}

package/dist/types/components/spinner/seki-spinner.interface.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Size variants for the Spinner component
+ */
+export type SpinnerSize = 'sm' | 'md' | 'lg';
+/**
+ * Color variants for the Spinner component
+ */
+export type SpinnerColor = 'default' | 'primary' | 'secondary' | 'muted';
+/**
+ * Props interface for the Spinner component
+ */
+export interface SpinnerProps {
+    /**
+     * Size of the spinner
+     * @default 'md'
+     */
+    size?: SpinnerSize;
+    /**
+     * Color variant of the spinner
+     * @default 'default'
+     */
+    color?: SpinnerColor;
+    /**
+     * Accessible label for screen readers
+     * @default 'Loading'
+     */
+    ariaLabel?: string;
+}

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

@@ -0,0 +1,8 @@
+/**
+ * seki-table-body: Table body wrapper (tbody)
+ *
+ * @component TableBody
+ */
+export declare class SekiTableBody {
+    render(): any;
+}

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

@@ -0,0 +1,8 @@
+/**
+ * seki-table-caption: Table caption element
+ *
+ * @component TableCaption
+ */
+export declare class SekiTableCaption {
+    render(): any;
+}

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

@@ -0,0 +1,17 @@
+export type TableCellAlign = 'left' | 'center' | 'right';
+/**
+ * seki-table-cell: Table data cell (td)
+ *
+ * @component TableCell
+ */
+export declare class SekiTableCell {
+    /**
+     * Text alignment
+     */
+    align: TableCellAlign;
+    /**
+     * Column width
+     */
+    width?: string;
+    render(): any;
+}

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

@@ -0,0 +1,8 @@
+/**
+ * seki-table-footer: Table footer wrapper (tfoot)
+ *
+ * @component TableFooter
+ */
+export declare class SekiTableFooter {
+    render(): any;
+}

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

@@ -0,0 +1,25 @@
+export type TableHeadAlign = 'left' | 'center' | 'right';
+/**
+ * seki-table-head: Table header cell (th)
+ *
+ * @component TableHead
+ */
+export declare class SekiTableHead {
+    /**
+     * Text alignment
+     */
+    align: TableHeadAlign;
+    /**
+     * Column width
+     */
+    width?: string;
+    /**
+     * Whether this column is sortable
+     */
+    sortable: boolean;
+    /**
+     * Current sort direction
+     */
+    sortDirection?: 'asc' | 'desc';
+    render(): any;
+}

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

@@ -0,0 +1,8 @@
+/**
+ * seki-table-header: Table header wrapper (thead)
+ *
+ * @component TableHeader
+ */
+export declare class SekiTableHeader {
+    render(): any;
+}

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

@@ -0,0 +1,12 @@
+/**
+ * seki-table-row: Table row wrapper (tr)
+ *
+ * @component TableRow
+ */
+export declare class SekiTableRow {
+    /**
+     * Whether this row is selected
+     */
+    selected: boolean;
+    render(): any;
+}

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

@@ -0,0 +1,25 @@
+/**
+ * seki-table: A semantic table wrapper component
+ *
+ * @component Table
+ * @example
+ * <seki-table>
+ *   <seki-table-header>
+ *     <seki-table-row>
+ *       <seki-table-head>Name</seki-table-head>
+ *     </seki-table-row>
+ *   </seki-table-header>
+ *   <seki-table-body>
+ *     <seki-table-row>
+ *       <seki-table-cell>John</seki-table-cell>
+ *     </seki-table-row>
+ *   </seki-table-body>
+ * </seki-table>
+ */
+export declare class SekiTable {
+    /**
+     * ARIA label for the table
+     */
+    ariaLabel?: string;
+    render(): any;
+}

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

@@ -0,0 +1,24 @@
+/**
+ * Tab content panel
+ *
+ * @slot - The content
+ *
+ * @part content - The content container
+ */
+export declare class SekiTabsContent {
+    el: HTMLElement;
+    private static instanceCount;
+    private instanceId;
+    /**
+     * Value that matches a trigger
+     */
+    value: string;
+    _isSelected: boolean;
+    constructor();
+    private getContext;
+    private get panelId();
+    private get triggerId();
+    componentWillRender(): void;
+    componentDidLoad(): void;
+    render(): any;
+}

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

@@ -0,0 +1,12 @@
+/**
+ * Container for tab triggers
+ *
+ * @slot - Tab triggers
+ *
+ * @part list - The list container
+ */
+export declare class SekiTabsList {
+    el: HTMLElement;
+    private getContext;
+    render(): any;
+}

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

@@ -0,0 +1,35 @@
+/**
+ * Tab trigger button
+ *
+ * @slot - The trigger content
+ *
+ * @part trigger - The trigger button
+ */
+export declare class SekiTabsTrigger {
+    el: HTMLElement;
+    private static instanceCount;
+    private instanceId;
+    /**
+     * Unique value for this tab
+     */
+    value: string;
+    /**
+     * Disable this specific trigger
+     */
+    disabled: boolean;
+    _isSelected: boolean;
+    constructor();
+    private getContext;
+    private get panelId();
+    private get triggerId();
+    componentWillRender(): void;
+    componentDidLoad(): void;
+    handleClick(): void;
+    handleKeyDown(event: KeyboardEvent): void;
+    private getAllTriggers;
+    private focusPreviousTrigger;
+    private focusNextTrigger;
+    private focusFirstTrigger;
+    private focusLastTrigger;
+    render(): any;
+}

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

@@ -0,0 +1,51 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Context interface for Tabs component
+ */
+export interface TabsContext {
+    value: string;
+    orientation: 'horizontal' | 'vertical';
+    selectTab: (value: string) => void;
+    isSelected: (value: string) => boolean;
+}
+/**
+ * Tabs root component that manages selected tab state
+ *
+ * @slot - Tab list and content panels
+ *
+ * @part tabs - The main container
+ */
+export declare class SekiTabs {
+    el: HTMLElement;
+    /**
+     * Controlled value - which tab is selected
+     */
+    value?: string;
+    /**
+     * Default value for uncontrolled usage
+     */
+    defaultValue?: string;
+    /**
+     * Orientation of the tabs
+     */
+    orientation: 'horizontal' | 'vertical';
+    /**
+     * Internal state for selected tab
+     */
+    _selectedValue: string;
+    /**
+     * Emitted when value changes
+     */
+    sekiValueChange: EventEmitter<string>;
+    componentWillLoad(): void;
+    valueChanged(newValue: string | undefined): void;
+    /**
+     * Select a tab by value
+     */
+    selectTab(tabValue: string): Promise<void>;
+    private isSelected;
+    private getContext;
+    componentDidLoad(): void;
+    componentDidUpdate(): void;
+    render(): any;
+}

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

@@ -0,0 +1,107 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @component seki-textarea
+ * @description A multi-line text input field with full form integration, accessibility support,
+ * and consistent styling matching shadcn/ui patterns.
+ * @example
+ * <seki-textarea placeholder="Type your message here."></seki-textarea>
+ * <seki-textarea rows="6" disabled></seki-textarea>
+ */
+export declare class SekiTextarea {
+    internals: ElementInternals;
+    /**
+     * Current value of the textarea
+     */
+    value?: string;
+    /**
+     * Placeholder text displayed when empty
+     */
+    placeholder?: string;
+    /**
+     * Whether the textarea is disabled
+     */
+    disabled: boolean;
+    /**
+     * Whether the textarea is readonly
+     */
+    readonly: boolean;
+    /**
+     * Whether the textarea is required
+     */
+    required: boolean;
+    /**
+     * Name attribute for form submission
+     */
+    name?: string;
+    /**
+     * Number of visible text rows
+     */
+    rows?: number;
+    /**
+     * Number of visible text columns
+     */
+    cols?: number;
+    /**
+     * Minimum length of content
+     */
+    minlength?: number;
+    /**
+     * Maximum length of content
+     */
+    maxlength?: number;
+    /**
+     * Resize behavior of the textarea
+     */
+    resize: 'none' | 'both' | 'horizontal' | 'vertical';
+    /**
+     * Whether the textarea is in an invalid/error state
+     */
+    invalid: boolean;
+    /**
+     * Accessible label for screen readers
+     */
+    ariaLabel?: string;
+    /**
+     * ID of element describing this textarea
+     */
+    ariaDescribedby?: string;
+    /**
+     * Autocomplete attribute
+     */
+    autocomplete?: string;
+    /**
+     * Emitted on every keystroke
+     */
+    sekiInput: EventEmitter<{
+        value: string;
+        nativeEvent: Event;
+    }>;
+    /**
+     * Emitted on blur or when content changes
+     */
+    sekiChange: EventEmitter<{
+        value: string;
+        nativeEvent: Event;
+    }>;
+    /**
+     * Emitted on focus
+     */
+    sekiFocus: EventEmitter<{
+        nativeEvent: FocusEvent;
+    }>;
+    /**
+     * Emitted on blur
+     */
+    sekiBlur: EventEmitter<{
+        value: string;
+        nativeEvent: FocusEvent;
+    }>;
+    private handleInput;
+    private handleChange;
+    private handleFocus;
+    private handleBlur;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string): void;
+    componentWillLoad(): void;
+    render(): any;
+}

package/dist/types/components/toast/seki-toaster.d.ts

@@ -0,0 +1,58 @@
+export type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+export type ToastType = 'default' | 'success' | 'error' | 'warning' | 'info';
+export interface ToastData {
+    id: string;
+    message: string;
+    type: ToastType;
+    duration: number;
+    description?: string;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+}
+/**
+ * Toaster component that manages and displays toast notifications.
+ * Place this component once in your app layout.
+ *
+ * @example
+ * <seki-toaster position="bottom-right"></seki-toaster>
+ *
+ * // Trigger toasts via custom events:
+ * document.dispatchEvent(new CustomEvent('seki-toast', {
+ *   detail: { message: 'Hello!', type: 'success' }
+ * }));
+ */
+export declare class SekiToaster {
+    el: HTMLElement;
+    /**
+     * Position of the toast container
+     * @default 'bottom-right'
+     */
+    position: ToastPosition;
+    /**
+     * Default duration in milliseconds before auto-dismiss
+     * @default 4000
+     */
+    duration: number;
+    /**
+     * Maximum number of visible toasts
+     * @default 5
+     */
+    maxToasts: number;
+    toasts: ToastData[];
+    private timers;
+    handleToastEvent(event: CustomEvent<Partial<ToastData> & {
+        message: string;
+    }>): void;
+    private generateId;
+    private addToast;
+    private removeToast;
+    private handleMouseEnter;
+    private handleMouseLeave;
+    private handleDismiss;
+    private handleActionClick;
+    disconnectedCallback(): void;
+    render(): any;
+    private renderIcon;
+}