le-kit 0.1.14 → 0.1.16

package/dist/types/components/le-tab-panel/le-tab-panel.d.ts

@@ -0,0 +1,75 @@
+/**
+ * A tab panel component used as a child of le-tabs.
+ *
+ * Each le-tab-panel defines both the tab button label and the panel content.
+ * The parent le-tabs component automatically reads these panels and creates
+ * the tab interface.
+ *
+ * @slot - Default slot for panel content
+ *
+ * @cmsEditable true
+ * @cmsCategory Navigation
+ */
+export declare class LeTabPanel {
+    el: HTMLLeTabPanelElement;
+    /**
+     * The label displayed in the tab button.
+     */
+    label: string;
+    /**
+     * The value used to identify this tab.
+     * Defaults to the label if not provided.
+     */
+    value?: string;
+    /**
+     * Icon displayed at the start of the tab button.
+     * Can be an emoji, URL, or icon class.
+     */
+    iconStart?: string;
+    /**
+     * Icon displayed at the end of the tab button.
+     */
+    iconEnd?: string;
+    /**
+     * Whether this tab is disabled.
+     */
+    disabled: boolean;
+    /**
+     * Whether to render the panel content only when active (lazy loading).
+     * When true, content is not rendered until the tab is first selected.
+     * When false (default), content is always in DOM but hidden when inactive.
+     */
+    lazy: boolean;
+    /**
+     * Internal: Whether this panel is currently active (set by parent le-tabs)
+     */
+    active: boolean;
+    /**
+     * Internal: Track if panel has ever been activated (for lazy rendering)
+     */
+    hasBeenActive: boolean;
+    activeChanged(isActive: boolean): void;
+    /**
+     * Get the effective value (value or label as fallback)
+     */
+    getValue(): Promise<string>;
+    /**
+     * Get tab configuration for parent component
+     */
+    getTabConfig(): Promise<{
+        label: string;
+        value: string;
+        iconStart?: string;
+        iconEnd?: string;
+        disabled: boolean;
+    }>;
+    /**
+     * Set the active state (called by parent le-tabs)
+     */
+    setActive(isActive: boolean): Promise<void>;
+    /**
+     * Check if panel should render content
+     */
+    private shouldRenderContent;
+    render(): any;
+}

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

@@ -0,0 +1,108 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { LeOption, LeOptionValue, LeOptionSelectDetail } from '../../types/options';
+/**
+ * A flexible tabs component for organizing content into tabbed panels.
+ *
+ * Supports two modes:
+ * 1. **Declarative**: Use `<le-tab-panel>` children to define tabs and content
+ * 2. **Programmatic**: Use the `tabs` prop with named slots for content
+ *
+ * Full keyboard navigation and ARIA support included.
+ *
+ * @slot - Default slot for le-tab-panel children (declarative mode)
+ * @slot panel-{value} - Named slots for panel content (programmatic mode)
+ *
+ * @cssprop --le-tabs-border-color - Border color for tab list
+ * @cssprop --le-tabs-gap - Gap between tabs
+ * @cssprop --le-tabs-indicator-color - Active tab indicator color
+ * @cssprop --le-tabs-padding-x - Horizontal padding for tab buttons
+ * @cssprop --le-tabs-padding-y - Vertical padding for tab buttons
+ *
+ * @csspart tablist - The tab button container (role="tablist")
+ * @csspart tab - Individual tab buttons
+ * @csspart tab-active - The currently active tab
+ * @csspart panels - Container for panel content
+ * @csspart panel - Individual panel containers
+ *
+ * @cmsEditable true
+ * @cmsCategory Navigation
+ */
+export declare class LeTabs {
+    el: HTMLElement;
+    /**
+     * Array of tab options (programmatic mode).
+     * If le-tab-panel children exist, they take precedence.
+     */
+    tabs: LeOption[];
+    /**
+     * The value of the currently selected tab.
+     * If not provided, defaults to the first tab.
+     */
+    selected?: LeOptionValue;
+    /**
+     * Orientation of the tabs.
+     * @allowedValues horizontal | vertical
+     */
+    orientation: 'horizontal' | 'vertical';
+    /**
+     * Position of the tabs relative to the panels.
+     * @allowedValues start | end
+     */
+    position: 'start' | 'end';
+    /**
+     * Tab variant style.
+     * @allowedValues underlined | solid | pills | enclosed | icon-only
+     */
+    variant: 'underlined' | 'solid' | 'pills' | 'enclosed' | 'icon-only';
+    /**
+     * Whether tabs should stretch to fill available width.
+     */
+    fullWidth: boolean;
+    /**
+     * Size of the tabs.
+     * @allowedValues sm | md | lg
+     */
+    size: 'small' | 'medium' | 'large';
+    /**
+     * Wrap the tabs if they exceed container width.
+     */
+    wrap: boolean;
+    /**
+     * Scroll behavior for overflowing tabs.
+     * @allowedValues auto | hidden | visible | scroll
+     */
+    overflow: 'auto' | 'hidden' | 'visible' | 'scroll';
+    /**
+     * Internal tab configurations (built from children or tabs prop)
+     */
+    private tabConfigs;
+    /**
+     * Internal state for focused tab index (for keyboard navigation)
+     */
+    private focusedIndex;
+    /**
+     * Whether we're using declarative mode (le-tab-panel children)
+     */
+    private isDeclarativeMode;
+    /**
+     * Emitted when the selected tab changes.
+     */
+    leTabChange: EventEmitter<LeOptionSelectDetail>;
+    private mutationObserver?;
+    selectedChanged(newValue: LeOptionValue): void;
+    tabsChanged(): void;
+    handleSlotChange(): void;
+    componentWillLoad(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private buildTabConfigs;
+    private updatePanelStates;
+    private selectTab;
+    private handleTabClick;
+    private handleKeyDown;
+    private findNextEnabledTab;
+    private findFirstEnabledTab;
+    private findLastEnabledTab;
+    private focusTab;
+    render(): any;
+}

package/dist/types/components/le-tag/le-tag.d.ts

@@ -0,0 +1,78 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * A tag/chip component for displaying labels with optional dismiss functionality.
+ *
+ * @cmsEditable false
+ * @cmsCategory Form
+ *
+ * @slot - Default slot for custom content (overrides label prop)
+ *
+ * @example Basic tag
+ * ```html
+ * <le-tag label="JavaScript"></le-tag>
+ * ```
+ *
+ * @example Dismissible tag
+ * ```html
+ * <le-tag label="Remove me" dismissible></le-tag>
+ * ```
+ *
+ * @example With icon
+ * ```html
+ * <le-tag label="Settings" icon="⚙️"></le-tag>
+ * ```
+ *
+ * @example Different sizes
+ * ```html
+ * <le-tag label="Small" size="small"></le-tag>
+ * <le-tag label="Medium" size="medium"></le-tag>
+ * <le-tag label="Large" size="large"></le-tag>
+ * ```
+ *
+ * @example Different variants
+ * ```html
+ * <le-tag label="Default" variant="default"></le-tag>
+ * <le-tag label="Primary" variant="primary"></le-tag>
+ * <le-tag label="Success" variant="success"></le-tag>
+ * <le-tag label="Warning" variant="warning"></le-tag>
+ * <le-tag label="Danger" variant="danger"></le-tag>
+ * ```
+ */
+export declare class LeTag {
+    /**
+     * The text label to display in the tag.
+     */
+    label: string;
+    /**
+     * Mode of the popover should be 'default' for internal use
+     */
+    mode: 'default' | 'admin';
+    /**
+     * Icon to display before the label.
+     * Can be an emoji, URL, or icon name.
+     */
+    icon?: string;
+    /**
+     * Whether the tag can be dismissed (shows close button).
+     */
+    dismissible: boolean;
+    /**
+     * Whether the tag is disabled.
+     */
+    disabled: boolean;
+    /**
+     * The size of the tag.
+     */
+    size: 'small' | 'medium' | 'large';
+    /**
+     * The visual variant of the tag.
+     */
+    variant: 'default' | 'primary' | 'success' | 'warning' | 'danger';
+    /**
+     * Emitted when the dismiss button is clicked.
+     */
+    leDismiss: EventEmitter<void>;
+    private handleDismiss;
+    private renderIcon;
+    render(): any;
+}