@latty-ds/web 0.2.0

package/dist/components/select/select.d.ts

@@ -0,0 +1,129 @@
+import { ThemeableElement } from '../../base';
+import { SelectOption, SelectSize, SelectVariant } from './select.types';
+import '@latty-ds/icons';
+import '../surface/';
+import '../text/text';
+/**
+ * A customizable select dropdown component with support for multiple variants and sizes.
+ *
+ * @element lt-select
+ *
+ * @fires {CustomEvent<{value: string}>} change - Dispatched when the selected value changes
+ *
+ * @example
+ * ```html
+ * <lt-select
+ *   label="Country"
+ *   placeholder="Select a country"
+ *   .options=${[
+ *     { value: 'us', label: 'United States' },
+ *     { value: 'ca', label: 'Canada' },
+ *     { value: 'mx', label: 'Mexico' }
+ *   ]}
+ * ></lt-select>
+ * ```
+ *
+ * @example
+ * ```html
+ * <lt-select
+ *   variant="error"
+ *   label="Language"
+ *   helper-text="Please select a language"
+ *   required
+ *   .options=${languages}
+ * ></lt-select>
+ * ```
+ */
+export declare class Select extends ThemeableElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Visual variant that determines styling.
+     * @default 'default'
+     */
+    variant: SelectVariant;
+    /**
+     * Size of the select (affects height, font size, and padding).
+     * @default 'md'
+     */
+    size: SelectSize;
+    /**
+     * Current selected value.
+     * @default ''
+     */
+    value: string;
+    /**
+     * Placeholder text shown when no option is selected.
+     * @default 'Select an option'
+     */
+    placeholder: string;
+    /**
+     * Label text displayed above the select.
+     * @default ''
+     */
+    label: string;
+    /**
+     * Helper text displayed below the select. Color changes based on variant.
+     * @default ''
+     */
+    helperText: string;
+    /**
+     * Whether the select is disabled.
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Whether the select is required. Shows asterisk in label when true.
+     * @default false
+     */
+    required: boolean;
+    /**
+     * Array of options to display in the dropdown.
+     * @default []
+     */
+    options: SelectOption[];
+    /**
+     * Internal state tracking whether the dropdown is open.
+     * @private
+     */
+    private isOpen;
+    private _cleanupClickOutside;
+    private _floatingCleanup;
+    /**
+     * Toggles the dropdown open/closed state.
+     * @private
+     */
+    private toggleDropdown;
+    /**
+     * Closes the dropdown.
+     * @private
+     */
+    private closeDropdown;
+    /**
+     * Handles option selection.
+     * Updates the value, dispatches change event, and closes dropdown.
+     *
+     * @param option - The selected option
+     * @private
+     */
+    private selectOption;
+    /**
+     * Handles keyboard navigation in the dropdown.
+     * Supports Arrow Up/Down for navigation, Enter/Space for selection, and Escape to close.
+     *
+     * @param e - The keyboard event
+     * @private
+     */
+    private handleKeydown;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Gets the display label for the currently selected value.
+     * @private
+     */
+    private getSelectedLabel;
+    /**
+     * Reflects the open state as an attribute for CSS styling.
+     */
+    updated(changedProperties: Map<string, unknown>): void;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/select/select.styles.d.ts

@@ -0,0 +1 @@
+export declare const selectStyles: import("lit").CSSResult[];

package/dist/components/select/select.types.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Size variant of the select component.
+ * Affects height, font size, and padding.
+ *
+ * - `sm`: 32px height, 0.875rem font size
+ * - `md`: 40px height, 1rem font size (default)
+ * - `lg`: 48px height, 1.0625rem font size
+ */
+export type SelectSize = 'sm' | 'md' | 'lg';
+/**
+ * Visual variant of the select component.
+ * Determines the styling and indicates the select's state.
+ *
+ * - `default`: Standard appearance
+ * - `success`: Green styling for successful state
+ * - `warning`: Yellow/orange styling for warning state
+ * - `error`: Red styling for error state
+ */
+export type SelectVariant = 'default' | 'success' | 'warning' | 'error';
+/**
+ * Represents a single option in the select dropdown.
+ */
+export interface SelectOption {
+    /**
+     * The unique value for this option (used in form submission)
+     */
+    value: string;
+    /**
+     * The display text shown to the user
+     */
+    label: string;
+    /**
+     * Whether this option is disabled and cannot be selected
+     * @default false
+     */
+    disabled?: boolean;
+}

package/dist/components/shared/backdrop.styles.d.ts

@@ -0,0 +1 @@
+export declare const backdropFeatureStyles: import("lit").CSSResult;

package/dist/components/shared/floating.d.ts

@@ -0,0 +1,10 @@
+import { type Placement } from '@floating-ui/dom';
+import { type CSSResult } from 'lit';
+export interface FloatingOptions {
+    placement?: Placement;
+    offsetPx?: number;
+    matchWidth?: boolean;
+}
+export declare function openFloating(reference: Element, floating: HTMLElement, opts?: FloatingOptions): Promise<() => void>;
+export declare function closeFloating(floating: HTMLElement, cleanup: (() => void) | null): void;
+export declare const floatingPanelReset: CSSResult;

package/dist/components/sidepanel/index.d.ts

@@ -0,0 +1 @@
+export { SidePanel } from './sidepanel';