@sekiui/elements 0.0.61 → 0.0.64

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

@@ -0,0 +1,96 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/** Rect type for trigger positioning */
+type TriggerRect = {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+    right: number;
+    bottom: number;
+};
+/**
+ * Navigation menu context shared with child components
+ */
+export interface NavigationMenuContext {
+    activeItem: string | null;
+    hoveredTrigger: string | null;
+    isMobile: boolean;
+    registerItem: (id: string) => void;
+    unregisterItem: (id: string) => void;
+    openItem: (id: string) => void;
+    closeItem: () => void;
+    setHoveredTrigger: (id: string | null) => void;
+    getTriggerRect: (id: string) => TriggerRect | null;
+}
+export declare class SekiNavigationMenu {
+    el: HTMLElement;
+    /** Breakpoint in pixels for mobile hamburger mode */
+    mobileBreakpoint: number;
+    /** Side from which mobile sheet opens */
+    mobileSide: 'left' | 'right';
+    /** Accessible label for the navigation */
+    ariaLabel: string;
+    /** Currently open menu item ID */
+    activeItem: string | null;
+    /** Currently hovered trigger ID (for indicator positioning) */
+    hoveredTrigger: string | null;
+    /** Whether mobile mode is active */
+    isMobile: boolean;
+    /** Whether mobile sheet is open */
+    mobileSheetOpen: boolean;
+    /** Emitted when a menu item opens */
+    menuOpen: EventEmitter<{
+        triggerId: string;
+    }>;
+    /** Emitted when a menu item closes */
+    menuClose: EventEmitter<{
+        triggerId: string;
+    }>;
+    /** Emitted when mobile sheet toggles */
+    mobileToggle: EventEmitter<{
+        open: boolean;
+    }>;
+    private resizeObserver?;
+    private registeredItems;
+    private triggerRects;
+    private closeTimeout?;
+    private openTimeout?;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    /** Get the navigation menu context for child components */
+    getContext(): Promise<NavigationMenuContext>;
+    /** Open a specific menu item */
+    open(itemId: string): Promise<void>;
+    /** Close the currently open menu item */
+    close(): Promise<void>;
+    /** Toggle mobile sheet */
+    toggleMobileSheet(): Promise<void>;
+    private setupResizeObserver;
+    private cleanupResizeObserver;
+    private checkMobileBreakpoint;
+    private clickOutsideHandler;
+    private setupClickOutside;
+    private cleanupClickOutside;
+    private registerItem;
+    private unregisterItem;
+    private openItem;
+    private closeItem;
+    setHoveredTrigger(id: string | null): void;
+    private getTriggerRect;
+    /** Called by trigger components to update their rect */
+    updateTriggerRect(id: string, rect: TriggerRect): void;
+    /** Schedule opening with delay (for hover) */
+    scheduleOpen(id: string, delay?: number): void;
+    /** Schedule closing with delay (for hover) */
+    scheduleClose(delay?: number): void;
+    /** Cancel scheduled close (when entering content) */
+    cancelClose(): void;
+    private handleHamburgerClick;
+    private handleSheetClose;
+    private handleBackdropClick;
+    render(): any;
+    private renderDesktopNav;
+    private renderMobileNav;
+}
+export {};

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

@@ -0,0 +1,13 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Popover close button
+ *
+ * @slot - Custom close button content
+ *
+ * @part close - The close button
+ */
+export declare class SekiPopoverClose {
+    closePopover: EventEmitter<void>;
+    handleClick(): void;
+    render(): any;
+}

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

@@ -0,0 +1,40 @@
+import type { PopoverSide, PopoverAlign } from './seki-popover';
+/**
+ * Popover content panel with positioning
+ *
+ * @slot - The popover content
+ *
+ * @part content - The content container
+ */
+export declare class SekiPopoverContent {
+    el: HTMLElement;
+    private contentRef?;
+    /**
+     * Override side from parent
+     */
+    side?: PopoverSide;
+    /**
+     * Override align from parent
+     */
+    align?: PopoverAlign;
+    /**
+     * Offset from trigger
+     */
+    sideOffset: number;
+    /**
+     * Align offset
+     */
+    alignOffset: number;
+    _isOpen: boolean;
+    _position: {
+        top: string;
+        left: string;
+    };
+    _actualSide: PopoverSide;
+    private getContext;
+    componentWillRender(): void;
+    componentDidLoad(): void;
+    componentDidRender(): void;
+    private updatePosition;
+    render(): any;
+}

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

@@ -0,0 +1,14 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Popover trigger - click to toggle popover
+ *
+ * @slot - The trigger content
+ *
+ * @part trigger - The trigger wrapper
+ */
+export declare class SekiPopoverTrigger {
+    el: HTMLElement;
+    triggerClick: EventEmitter<void>;
+    handleClick(event: MouseEvent): void;
+    render(): any;
+}

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

@@ -0,0 +1,85 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type PopoverSide = 'top' | 'right' | 'bottom' | 'left';
+export type PopoverAlign = 'start' | 'center' | 'end';
+/**
+ * Context interface for Popover component
+ */
+export interface PopoverContext {
+    isOpen: boolean;
+    side: PopoverSide;
+    align: PopoverAlign;
+    open: () => Promise<void>;
+    close: () => Promise<void>;
+    toggle: () => Promise<void>;
+}
+/**
+ * Popover component - floating content triggered by click
+ *
+ * @slot - Popover trigger and content
+ *
+ * @part popover - The main container
+ */
+export declare class SekiPopover {
+    el: HTMLElement;
+    /**
+     * Controlled open state
+     */
+    open: boolean;
+    /**
+     * Default open state
+     */
+    defaultOpen: boolean;
+    /**
+     * Preferred side for popover placement
+     */
+    side: PopoverSide;
+    /**
+     * Alignment along the side
+     */
+    align: PopoverAlign;
+    /**
+     * Offset from the trigger element
+     */
+    sideOffset: number;
+    /**
+     * Whether to close on outside click
+     */
+    closeOnOutsideClick: boolean;
+    /**
+     * Whether to close on escape key
+     */
+    closeOnEscape: boolean;
+    /**
+     * Internal open state
+     */
+    _isOpen: boolean;
+    /**
+     * Emitted when open state changes
+     */
+    sekiOpenChange: EventEmitter<boolean>;
+    private clickOutsideHandler?;
+    componentWillLoad(): void;
+    openChanged(newValue: boolean): void;
+    /**
+     * Open the popover
+     */
+    openPopover(): Promise<void>;
+    /**
+     * Close the popover
+     */
+    closePopover(): Promise<void>;
+    /**
+     * Toggle the popover
+     */
+    togglePopover(): Promise<void>;
+    handleTriggerClick(): void;
+    handleCloseRequest(): void;
+    handleKeyDown(event: KeyboardEvent): void;
+    private setupClickOutside;
+    private removeClickOutside;
+    private getContext;
+    componentDidLoad(): void;
+    componentDidUpdate(): void;
+    disconnectedCallback(): void;
+    render(): any;
+}

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

@@ -0,0 +1,37 @@
+/**
+ * Progress component for displaying completion progress of a task.
+ * Supports determinate and indeterminate states with smooth animations.
+ *
+ * @example
+ * <seki-progress value="33"></seki-progress>
+ *
+ * @example
+ * <seki-progress value="66" max="100"></seki-progress>
+ *
+ * @example
+ * <!-- Indeterminate state -->
+ * <seki-progress></seki-progress>
+ */
+export declare class SekiProgress {
+    /**
+     * Current progress value (0 to max).
+     * When null or undefined, displays indeterminate state.
+     */
+    value?: number | null;
+    /**
+     * Maximum progress value.
+     * @default 100
+     */
+    max: number;
+    /**
+     * Custom aria-label for accessibility.
+     * If not provided, uses percentage value.
+     */
+    ariaLabel?: string;
+    componentWillLoad(): void;
+    validateProps(): void;
+    private getState;
+    private getPercentage;
+    private getValueLabel;
+    render(): any;
+}

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

@@ -0,0 +1,50 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @component seki-radio-group-item
+ * @description An individual radio button item within a seki-radio-group.
+ * @example
+ * <seki-radio-group-item value="option1">Option 1</seki-radio-group-item>
+ */
+export declare class SekiRadioGroupItem {
+    el: HTMLElement;
+    private buttonEl?;
+    /**
+     * Value of this radio item.
+     */
+    value: string;
+    /**
+     * Whether this item is checked. Managed by parent radio group.
+     */
+    checked: boolean;
+    /**
+     * Disables this radio item.
+     */
+    disabled: boolean;
+    /**
+     * Accessible label for screen readers.
+     */
+    ariaLabel?: string;
+    /**
+     * ID of element describing this radio item.
+     */
+    ariaDescribedby?: string;
+    /**
+     * Internal event to notify parent group of selection.
+     */
+    sekiRadioSelect: EventEmitter<{
+        value: string;
+    }>;
+    /**
+     * Focus this radio item.
+     */
+    setFocus(): Promise<void>;
+    /**
+     * Handle click on radio item
+     */
+    private handleClick;
+    /**
+     * Handle Space/Enter key
+     */
+    private handleKeyDown;
+    render(): any;
+}

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

@@ -0,0 +1,86 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @component seki-radio-group
+ * @description A set of radio buttons where only one can be selected at a time.
+ * Contains seki-radio-group-item children for individual options.
+ * @example
+ * <seki-radio-group value="option1">
+ *   <seki-radio-group-item value="option1">Option 1</seki-radio-group-item>
+ *   <seki-radio-group-item value="option2">Option 2</seki-radio-group-item>
+ * </seki-radio-group>
+ */
+export declare class SekiRadioGroup {
+    el: HTMLElement;
+    /**
+     * Controlled value. When provided, component operates in controlled mode.
+     */
+    value?: string;
+    /**
+     * Initial value for uncontrolled mode. Ignored if value prop is provided.
+     */
+    defaultValue?: string;
+    /**
+     * Form field name for form integration.
+     */
+    name?: string;
+    /**
+     * Disables all radio items in the group.
+     */
+    disabled: boolean;
+    /**
+     * Marks the group as required for form validation.
+     */
+    required: boolean;
+    /**
+     * Orientation of the radio group (affects keyboard navigation).
+     */
+    orientation: 'horizontal' | 'vertical';
+    /**
+     * Accessible label for the radio group.
+     */
+    ariaLabel?: string;
+    /**
+     * Internal value for uncontrolled mode.
+     */
+    internalValue?: string;
+    /**
+     * Emitted when the selected value changes.
+     */
+    sekiChange: EventEmitter<{
+        value: string;
+    }>;
+    componentWillLoad(): void;
+    /**
+     * Get current selected value (controlled vs uncontrolled)
+     */
+    private get selectedValue();
+    /**
+     * Handle radio item selection
+     */
+    handleRadioSelect(event: CustomEvent<{
+        value: string;
+    }>): void;
+    /**
+     * Handle keyboard navigation
+     */
+    handleKeyDown(event: KeyboardEvent): void;
+    /**
+     * Get all radio item children
+     */
+    private getRadioItems;
+    /**
+     * Update child items with current selection state
+     */
+    private updateChildItems;
+    componentDidLoad(): void;
+    componentDidUpdate(): void;
+    render(): any;
+}
+declare global {
+    interface HTMLSekiRadioGroupItemElement extends HTMLElement {
+        value: string;
+        checked: boolean;
+        disabled: boolean;
+        setFocus(): Promise<void>;
+    }
+}

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;
+}