le-kit 0.0.2 → 0.1.0

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

@@ -0,0 +1,122 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Popup type determines the buttons shown
+ */
+export type PopupType = 'alert' | 'confirm' | 'prompt' | 'custom';
+/**
+ * Popup position on the screen
+ */
+export type PopupPosition = 'center' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+/**
+ * Result returned by the popup when closed
+ */
+export interface PopupResult {
+    confirmed: boolean;
+    value?: string;
+}
+/**
+ * A flexible popup/dialog component for alerts, confirms, prompts, and custom content.
+ *
+ * Uses the native HTML <dialog> element for proper modal behavior, accessibility,
+ * and focus management. Can be used declaratively in HTML or programmatically
+ * via leAlert(), leConfirm(), lePrompt().
+ *
+ * @slot - Default slot for custom body content
+ * @slot header - Custom header content (replaces title)
+ * @slot footer - Custom footer content (replaces default buttons)
+ *
+ * @cmsInternal true
+ * @cmsCategory System
+ */
+export declare class LePopup {
+    el: HTMLElement;
+    /**
+     * Whether the popup is currently visible
+     */
+    open: boolean;
+    /**
+     * Type of popup: alert (OK only), confirm (OK/Cancel), prompt (input + OK/Cancel), custom
+     */
+    type: PopupType;
+    /**
+     * Optional title for the popup header
+     */
+    popupTitle?: string;
+    /**
+     * Message text to display (for alert/confirm/prompt types)
+     */
+    message?: string;
+    /**
+     * Whether the popup is modal (blocks interaction with page behind)
+     */
+    modal: boolean;
+    /**
+     * Position of the popup on screen
+     */
+    position: PopupPosition;
+    /**
+     * Text for the confirm/OK button
+     */
+    confirmText: string;
+    /**
+     * Text for the cancel button
+     */
+    cancelText: string;
+    /**
+     * Placeholder text for prompt input
+     */
+    placeholder: string;
+    /**
+     * Default value for prompt input
+     */
+    defaultValue: string;
+    /**
+     * Whether clicking the backdrop closes the popup (modal only)
+     */
+    closeOnBackdrop: boolean;
+    /**
+     * Internal state for prompt input value
+     */
+    inputValue: string;
+    /**
+     * Emitted when the popup is confirmed (OK clicked)
+     */
+    leConfirm: EventEmitter<PopupResult>;
+    /**
+     * Emitted when the popup is cancelled (Cancel clicked or dismissed)
+     */
+    leCancel: EventEmitter<PopupResult>;
+    /**
+     * Emitted when the popup opens
+     */
+    leOpen: EventEmitter<void>;
+    /**
+     * Emitted when the popup closes
+     */
+    leClose: EventEmitter<PopupResult>;
+    private dialogEl?;
+    private inputEl?;
+    private resolvePromise?;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private handleDialogCancel;
+    /**
+     * Opens the popup and returns a promise that resolves when closed
+     */
+    show(): Promise<PopupResult>;
+    /**
+     * Closes the popup with a result
+     */
+    hide(confirmed?: boolean): Promise<void>;
+    private handleConfirm;
+    private handleCancel;
+    private handleBackdropClick;
+    private handleInputChange;
+    private handleKeyDown;
+    private hasSlot;
+    private renderHeader;
+    private renderBody;
+    private renderFooter;
+    render(): any;
+}

package/dist/types/components/le-round-progress/le-round-progress.d.ts

@@ -1,8 +1,12 @@
-import '../../stencil.core';
 export declare class LeRoundProgress {
     el: HTMLElement;
     value: number;
     updateValue(newValue: string): void;
+    padding: number;
+    updatePadding(newValue: string): void;
+    paths: string;
+    updateProgressBackgrounds(newValue: string): void;
+    progressPaths: any[];
     params: {
         width: number;
         diameter: number;
@@ -16,18 +20,7 @@ export declare class LeRoundProgress {
      * and progress width (max of )
      */
     componentWillLoad(): void;
-    /**
-     * Returns the value of the css variable if it exists
-     *
-     * @param {string} valName  name of the css variable (with double dash in front)
-     */
-    getCSSVar(valName: string): string;
-    /**
-     * Converts different css value units to pixels
-     *
-     * @param {string} val  css value
-     */
-    valToPx(val: string): number;
+    calcParams(): void;
     /**
      * Returns the viewPath attribute value for the SVG
      * based on the width of the parent element
@@ -39,6 +32,6 @@ export declare class LeRoundProgress {
      */
     getPath(): string;
     getStrokeDashArray(): string;
-    getPaths(): JSX.Element;
-    render(): JSX.Element;
+    getPaths(): any;
+    render(): any;
 }

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

@@ -0,0 +1,149 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Slot placeholder component for admin/CMS mode.
+ *
+ * This component renders a visual placeholder for slots when in admin mode,
+ * allowing CMS systems to show available drop zones for content or inline editing.
+ *
+ * In non-admin mode, this component renders nothing and acts as a passthrough.
+ *
+ * @slot - Default slot for placeholder content or drop zone UI
+ *
+ * @cmsInternal true
+ * @cmsCategory System
+ */
+export declare class LeSlot {
+    el: HTMLElement;
+    /**
+     * The type of slot content.
+     * - `slot`: Default, shows a dropzone for components (default)
+     * - `text`: Shows a single-line text input
+     * - `textarea`: Shows a multi-line text area
+     */
+    type: 'slot' | 'text' | 'textarea';
+    /**
+     * The name of the slot this placeholder represents.
+     * Should match the slot name in the parent component.
+     */
+    name: string;
+    /**
+     * Label to display in admin mode.
+     * If not provided, the slot name will be used.
+     */
+    label?: string;
+    /**
+     * Description of what content this slot accepts.
+     * Shown in admin mode to guide content editors.
+     */
+    description?: string;
+    /**
+     * Comma-separated list of allowed component tags for this slot.
+     * Used by CMS to filter available components.
+     *
+     * @example "le-card,le-button,le-text"
+     */
+    allowedComponents?: string;
+    /**
+     * Whether multiple components can be dropped in this slot.
+     */
+    multiple: boolean;
+    /**
+     * Whether this slot is required to have content.
+     */
+    required: boolean;
+    /**
+     * Placeholder text for text/textarea inputs in admin mode.
+     */
+    placeholder?: string;
+    /**
+     * The HTML tag to create when there's no slotted element.
+     * Used with type="text" or type="textarea" to auto-create elements.
+     *
+     * @example "h3" - creates <h3 slot="header">content</h3>
+     * @example "p" - creates <p slot="content">content</p>
+     */
+    tag?: string;
+    /**
+     * CSS styles for the slot dropzone container.
+     * Useful for layouts - e.g., "flex-direction: row" for horizontal stacks.
+     * Only applies in admin mode for type="slot".
+     */
+    slotStyle?: string;
+    /**
+     * Internal state to track admin mode
+     */
+    private adminMode;
+    /**
+     * Internal state for text input value (synced from slot content)
+     */
+    private textValue;
+    /**
+     * Whether the current textValue contains valid HTML
+     */
+    private isValidHtml;
+    /**
+     * Available components loaded from Custom Elements Manifest
+     */
+    private availableComponents;
+    /**
+     * Whether the component picker popover is open
+     */
+    private pickerOpen;
+    /**
+     * Reference to the slot element to access assignedNodes
+     */
+    private slotRef?;
+    /**
+     * The original slotted element (e.g., <h3 slot="header">)
+     */
+    private slottedElement?;
+    /**
+     * Emitted when text content changes in admin mode.
+     * The event detail contains the new text value and validity.
+     */
+    leSlotChange: EventEmitter<{
+        name: string;
+        value: string;
+        isValid: boolean;
+    }>;
+    private disconnectModeObserver?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Flag to prevent re-reading content right after we updated it
+     */
+    private isUpdating;
+    /**
+     * Read content from slotted elements via assignedNodes()
+     */
+    private readSlottedContent;
+    /**
+     * Validates if a string contains valid HTML
+     */
+    private validateHtml;
+    private handleTextInput;
+    /**
+     * Create a new slotted element when none exists.
+     * The element is appended to the host component's light DOM.
+     */
+    private createSlottedElement;
+    /**
+     * Load available components from Custom Elements Manifest
+     */
+    private loadAvailableComponents;
+    /**
+     * Format a tag name into a display name
+     * e.g., 'le-card' -> 'Card'
+     */
+    private formatComponentName;
+    /**
+     * Add a new component to the slot
+     */
+    private addComponent;
+    /**
+     * Handle slot change event to re-read content when nodes are assigned
+     */
+    private handleSlotChange;
+    render(): any;
+    private renderContent;
+}

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

@@ -0,0 +1,73 @@
+/**
+ * A flexible stack layout component using CSS flexbox.
+ *
+ * `le-stack` arranges its children in a row (horizontal) or column (vertical)
+ * with configurable spacing, alignment, and wrapping behavior. Perfect for
+ * creating responsive layouts.
+ *
+ * @slot - Default slot for stack items (le-box components recommended)
+ *
+ * @cssprop --le-stack-gap - Gap between items (defaults to var(--le-space-md))
+ *
+ * @csspart stack - The main stack container
+ *
+ * @cmsEditable true
+ * @cmsCategory Layout
+ */
+export declare class LeStack {
+    el: HTMLElement;
+    /**
+     * Direction of the stack layout
+     * @allowedValues horizontal | vertical
+     */
+    direction: 'horizontal' | 'vertical';
+    /**
+     * Gap between items (CSS value like '8px', '1rem', 'var(--le-space-md)')
+     */
+    gap?: string;
+    /**
+     * Alignment of items on the cross axis
+     * @allowedValues start | center | end | stretch | baseline
+     */
+    align: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+    /**
+     * Distribution of items on the main axis
+     * @allowedValues start | center | end | space-between | space-around | space-evenly
+     */
+    justify: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
+    /**
+     * Whether items should wrap to multiple lines
+     */
+    wrap: boolean;
+    /**
+     * Alignment of wrapped lines (only applies when wrap is true)
+     * @allowedValues start | center | end | stretch | space-between | space-around
+     */
+    alignContent: 'start' | 'center' | 'end' | 'stretch' | 'space-between' | 'space-around';
+    /**
+     * Whether to reverse the order of items
+     */
+    reverse: boolean;
+    /**
+     * Maximum number of items allowed in the stack (for CMS validation)
+     * @min 1
+     */
+    maxItems?: number;
+    /**
+     * Whether the stack should take full width of its container
+     */
+    fullWidth: boolean;
+    /**
+     * Whether the stack should take full height of its container
+     */
+    fullHeight: boolean;
+    /**
+     * Padding inside the stack container (CSS value)
+     */
+    padding?: string;
+    private getFlexDirection;
+    private getAlignItems;
+    private getJustifyContent;
+    private getAlignContent;
+    render(): any;
+}

package/dist/types/components/le-string-input/le-string-input.d.ts

@@ -0,0 +1,83 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * A text input component with support for labels, descriptions, icons, and external IDs.
+ *
+ * @slot - The label text for the input
+ * @slot description - Additional description text displayed below the input
+ * @slot icon-start - Icon to display at the start of the input
+ * @slot icon-end - Icon to display at the end of the input
+ *
+ * @cssprop --le-input-bg - Input background color
+ * @cssprop --le-input-color - Input text color
+ * @cssprop --le-input-border - Input border style
+ * @cssprop --le-input-border-focus - Input border style when focused
+ * @cssprop --le-input-radius - Input border radius
+ * @cssprop --le-input-padding - Input padding
+ */
+export declare class LeStringInput {
+    el: HTMLElement;
+    /**
+     * Mode of the popover should be 'default' for internal use
+     */
+    mode: 'default' | 'admin';
+    /**
+     * The value of the input
+     */
+    value: string;
+    /**
+     * The name of the input
+     */
+    name: string;
+    /**
+     * The type of the input (text, email, password, etc.)
+     */
+    type: 'text' | 'email' | 'password' | 'tel' | 'url';
+    /**
+     * Label for the input
+     */
+    label: string;
+    /**
+     * Icon for the start icon
+     */
+    iconStart: string;
+    /**
+     * Icon for the end icon
+     */
+    iconEnd: string;
+    /**
+     * Placeholder text
+     */
+    placeholder: string;
+    /**
+     * Whether the input is disabled
+     */
+    disabled: boolean;
+    /**
+     * Whether the input is read-only
+     */
+    readonly: boolean;
+    /**
+     * External ID for linking with external systems
+     */
+    externalId: string;
+    /**
+     * Emitted when the value changes (on blur or Enter)
+     */
+    leChange: EventEmitter<{
+        value: string;
+        name: string;
+        externalId: string;
+    }>;
+    /**
+     * Emitted when the input value changes (on keystroke)
+     */
+    leInput: EventEmitter<{
+        value: string;
+        name: string;
+        externalId: string;
+    }>;
+    private handleInput;
+    private handleChange;
+    private handleClick;
+    render(): any;
+}

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

@@ -0,0 +1,141 @@
+/**
+ * A text component with rich text editing capabilities in admin mode.
+ *
+ * `le-text` renders semantic text elements (headings, paragraphs, code, quotes)
+ * and provides a Notion-like rich text editor in admin mode with formatting
+ * toolbar for bold, italic, links, and paragraph type selection.
+ *
+ * @slot - Default slot for text content
+ *
+ * @cssprop --le-text-color - Text color
+ * @cssprop --le-text-font-size - Font size
+ * @cssprop --le-text-line-height - Line height
+ * @cssprop --le-text-font-weight - Font weight
+ *
+ * @csspart text - The text container element
+ *
+ * @cmsEditable true
+ * @cmsCategory Content
+ */
+export declare class LeText {
+    el: HTMLElement;
+    /**
+     * The semantic variant/type of text element
+     * @allowedValues p | h1 | h2 | h3 | h4 | h5 | h6 | code | quote | label | small
+     */
+    variant: 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'code' | 'quote' | 'label' | 'small';
+    /**
+     * Text alignment
+     * @allowedValues left | center | right | justify
+     */
+    align: 'left' | 'center' | 'right' | 'justify';
+    /**
+     * Text color (CSS value or theme token)
+     */
+    color?: string;
+    /**
+     * Whether the text should truncate with ellipsis
+     */
+    truncate: boolean;
+    /**
+     * Maximum number of lines before truncating (requires truncate=true)
+     */
+    maxLines?: number;
+    /**
+     * Internal state to track admin mode
+     */
+    private adminMode;
+    /**
+     * The HTML content being edited
+     */
+    private content;
+    /**
+     * Whether the editor is focused (shows toolbar)
+     */
+    private isFocused;
+    /**
+     * Current selection state for toolbar button highlighting
+     */
+    private selectionState;
+    /**
+     * Reference to the contenteditable element
+     */
+    private editorRef?;
+    /**
+     * Reference to the slot element
+     */
+    private slotRef?;
+    private disconnectModeObserver?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    onVariantChange(): void;
+    /**
+     * Read content from slotted elements
+     */
+    private readSlottedContent;
+    /**
+     * Sync edited content back to the slot
+     */
+    private syncContentToSlot;
+    /**
+     * Handle input in the contenteditable
+     */
+    private handleInput;
+    /**
+     * Handle focus on the editor
+     */
+    private handleFocus;
+    /**
+     * Handle blur on the editor
+     */
+    private handleBlur;
+    /**
+     * Handle selection change to update toolbar state
+     */
+    private handleSelectionChange;
+    /**
+     * Update the selection state for toolbar highlighting
+     */
+    private updateSelectionState;
+    /**
+     * Check if current selection is within a link
+     */
+    private isSelectionInLink;
+    /**
+     * Execute a formatting command
+     */
+    private execCommand;
+    /**
+     * Toggle bold formatting
+     */
+    private toggleBold;
+    /**
+     * Toggle italic formatting
+     */
+    private toggleItalic;
+    /**
+     * Toggle underline formatting
+     */
+    private toggleUnderline;
+    /**
+     * Toggle strikethrough formatting
+     */
+    private toggleStrikethrough;
+    /**
+     * Add or edit a link
+     */
+    private toggleLink;
+    /**
+     * Change the block type/variant
+     */
+    private changeVariant;
+    /**
+     * Render the formatting toolbar
+     */
+    private renderToolbar;
+    /**
+     * Get the semantic tag for the current variant
+     */
+    private getTag;
+    render(): any;
+}

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

@@ -1,4 +1,3 @@
-import '../../stencil.core';
 export declare class LeTurntable {
     el: HTMLElement;
     center: string;
@@ -52,5 +51,5 @@ export declare class LeTurntable {
      */
     getAngle(posX: number, posY: number): number;
     setAngle(angle: any): void;
-    render(): JSX.Element;
+    render(): any;
 }