@diniz/webcomponents 1.1.9 → 1.2.0

package/dist/app.d.ts

@@ -0,0 +1,3 @@
+import './styles/theme.css';
+import './styles/theme-shadcn.css';
+import './core/router';

package/dist/core/base-component.d.ts

@@ -0,0 +1,34 @@
+export type Signal<T> = {
+    get: () => T;
+    set: (value: T) => void;
+    subscribe: (listener: (value: T) => void) => () => void;
+};
+export declare function createSignal<T>(initial: T): Signal<T>;
+export declare class BaseComponent<TState extends Record<string, unknown> = Record<string, unknown>> extends HTMLElement {
+    state: TState;
+    private signalUnsubs;
+    constructor();
+    useSignal<T>(initial: T): Signal<T>;
+    /**
+     * Create a signal bound to a specific HTML element
+     * Automatically updates the element's textContent when the signal value changes
+     * @param elementId - The ID of the HTML element to bind to
+     * @param initial - The initial value
+     * @returns A signal that auto-updates the element
+     *
+     * @example
+     * ```typescript
+     * private count = this.useSignalHtml('countValue', 0);
+     *
+     * private increment() {
+     *   this.count.set(this.count.get() + 1);
+     *   // Element with id="countValue" automatically updates
+     * }
+     * ```
+     */
+    useSignalHtml<T>(elementId: string, initial: T): Signal<T>;
+    setState(partial: Partial<TState>): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): void;
+}

package/dist/core/dom-helpers.d.ts

@@ -0,0 +1,104 @@
+/**
+ * DOM Helper utilities for working with custom elements
+ */
+/**
+ * Query and cast a custom element with specific properties
+ * @param root - The root element to query from (Document, ShadowRoot, or Element)
+ * @param selector - CSS selector for the element
+ * @returns The element cast to the specified type, or null if not found
+ *
+ * @example
+ * ```typescript
+ * import { queryElement } from './core/dom-helpers';
+ *
+ * // Query a table element
+ * const table = queryElement<{ data: { columns: TableColumn[]; rows: TableRow[] } }>(
+ *   this.shadowRoot,
+ *   '#demo-table'
+ * );
+ *
+ * if (table) {
+ *   table.data = { columns, rows };
+ * }
+ * ```
+ */
+export declare function queryElement<T extends Record<string, any>>(root: Document | ShadowRoot | Element | null, selector: string): (HTMLElement & T) | null;
+/**
+ * Query and cast multiple custom elements with specific properties
+ * @param root - The root element to query from (Document, ShadowRoot, or Element)
+ * @param selector - CSS selector for the elements
+ * @returns NodeList of elements cast to the specified type
+ */
+export declare function queryElements<T extends Record<string, any>>(root: Document | ShadowRoot | Element | null, selector: string): NodeListOf<HTMLElement & T>;
+/**
+ * Get an element by id
+ * @param root - The root element to query from (Document, ShadowRoot, or Element)
+ * @param id - Element id without '#'
+ * @returns The element if found, otherwise null
+ */
+export declare function getElementById(root: Document | ShadowRoot | Element | null, id: string): HTMLElement | null;
+/**
+ * Add an event listener by element id
+ * @param root - The root element to query from (Document, ShadowRoot, or Element)
+ * @param id - Element id without '#'
+ * @param eventName - DOM event name (e.g., 'click')
+ * @param handler - Event handler function
+ * @param options - Optional listener options
+ * @returns The element if found, otherwise null
+ */
+export declare function addEventListenerById(root: Document | ShadowRoot | Element | null, id: string, eventName: string, handler: EventListenerOrEventListenerObject, options?: AddEventListenerOptions | boolean): HTMLElement | null;
+/**
+ * Type-safe helper specifically for ui-table elements
+ */
+export type UITableElement = HTMLElement & {
+    data: {
+        columns: Array<any>;
+        rows: Array<any>;
+    };
+};
+/**
+ * Type-safe helper specifically for ui-pagination elements
+ */
+export type UIPaginationElement = HTMLElement & {
+    total: number;
+    currentPage: number;
+    pageSize: number;
+};
+/**
+ * Type-safe helper specifically for ui-modal elements
+ */
+export type UIModalElement = HTMLElement & {
+    open(): void;
+    close(): void;
+};
+/**
+ * Query a ui-table element
+ */
+export declare function queryTable(root: Document | ShadowRoot | Element | null, selector: string): UITableElement | null;
+/**
+ * Query a ui-pagination element
+ */
+export declare function queryPagination(root: Document | ShadowRoot | Element | null, selector: string): UIPaginationElement | null;
+/**
+ * Query a ui-modal element
+ */
+export declare function queryModal(root: Document | ShadowRoot | Element | null, selector: string): UIModalElement | null;
+export type FormValue = string | string[] | boolean | File[];
+export type ValidationResult = {
+    isValid: boolean;
+    errors: Record<string, string>;
+};
+export type GetFormValuesOptions = {
+    includeDisabled?: boolean;
+    includeEmpty?: boolean;
+};
+/**
+ * Collect values for all inputs inside a form.
+ * Supports native inputs plus ui-input, ui-select, and ui-date-picker.
+ */
+export declare function getFormValues(form: HTMLFormElement, options?: GetFormValuesOptions): Record<string, FormValue>;
+/**
+ * Validate a form and return validation errors
+ * Supports native inputs plus ui-input, ui-select, and ui-checkbox
+ */
+export declare function validateForm(form: HTMLFormElement): ValidationResult;

package/dist/core/guards.d.ts

@@ -0,0 +1,2 @@
+export declare function redirectToLogin(): void;
+export declare function requireUser(): boolean;

package/dist/core/http.d.ts

@@ -0,0 +1,89 @@
+/**
+ * Simple HTTP Client with Interceptor Support
+ * Lightweight fetch wrapper for common HTTP operations
+ */
+export interface RequestConfig {
+    method?: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' | 'HEAD' | 'OPTIONS';
+    headers?: Record<string, string>;
+    body?: string | FormData | null;
+    timeout?: number;
+    [key: string]: any;
+}
+export interface ResponseConfig {
+    status: number;
+    statusText: string;
+    headers: Headers;
+    data: any;
+    [key: string]: any;
+}
+export type RequestInterceptor = (config: RequestConfig) => RequestConfig | Promise<RequestConfig>;
+export type ResponseInterceptor = (response: ResponseConfig) => ResponseConfig | Promise<ResponseConfig>;
+export type ErrorInterceptor = (error: any) => any | Promise<any>;
+interface InterceptorHandlers {
+    request: {
+        handlers: Array<{
+            onFulfilled: RequestInterceptor;
+            onRejected?: ErrorInterceptor;
+        }>;
+        use: (onFulfilled: RequestInterceptor, onRejected?: ErrorInterceptor) => void;
+    };
+    response: {
+        handlers: Array<{
+            onFulfilled: ResponseInterceptor;
+            onRejected?: ErrorInterceptor;
+        }>;
+        use: (onFulfilled: ResponseInterceptor, onRejected?: ErrorInterceptor) => void;
+    };
+}
+declare class HTTPClient {
+    private baseURL;
+    private defaultHeaders;
+    private defaultTimeout;
+    interceptors: InterceptorHandlers;
+    /**
+     * Set base URL for all requests
+     */
+    setBaseURL(url: string): void;
+    /**
+     * Get currently set base URL
+     */
+    getBaseURL(): string;
+    /**
+     * Set default headers for all requests
+     */
+    setDefaultHeaders(headers: Record<string, string>): void;
+    /**
+     * Set default timeout for all requests (in ms)
+     */
+    setDefaultTimeout(timeout: number): void;
+    /**
+     * Execute request with interceptors
+     */
+    private executeRequest;
+    /**
+     * GET request
+     */
+    get<T = any>(url: string, config?: RequestConfig): Promise<T>;
+    /**
+     * POST request
+     */
+    post<T = any>(url: string, data?: any, config?: RequestConfig): Promise<T>;
+    /**
+     * PUT request
+     */
+    put<T = any>(url: string, data?: any, config?: RequestConfig): Promise<T>;
+    /**
+     * PATCH request
+     */
+    patch<T = any>(url: string, data?: any, config?: RequestConfig): Promise<T>;
+    /**
+     * DELETE request
+     */
+    delete<T = any>(url: string, config?: RequestConfig): Promise<T>;
+    /**
+     * HEAD request
+     */
+    head<T = any>(url: string, config?: RequestConfig): Promise<T>;
+}
+export declare const http: HTTPClient;
+export { HTTPClient };

package/dist/core/navigation.d.ts

@@ -0,0 +1,2 @@
+export declare function getRoutePath(fullPath: string): string;
+export declare function buildPath(routePath: string): string;

package/dist/core/router.d.ts

@@ -0,0 +1,14 @@
+export type Route = {
+    path: string;
+    load: () => Promise<unknown>;
+    component: string;
+    guard?: () => boolean | Promise<boolean>;
+};
+export declare function createRouter(routes: Route[], appSelector?: string): () => Promise<void>;
+export type RouteOld = {
+    path: string;
+    layout: string;
+    load: () => Promise<unknown>;
+    component: string;
+    guard?: () => boolean | Promise<boolean>;
+};

package/dist/core/store.d.ts

@@ -0,0 +1,12 @@
+type Theme = 'light' | 'shadcn';
+type AppState = {
+    user: unknown | null;
+    theme: Theme;
+};
+type Listener = (state: AppState) => void;
+export declare const store: {
+    getState: () => AppState;
+    setState(partial: Partial<AppState>): void;
+    subscribe(listener: Listener): () => void;
+};
+export {};

package/dist/features/button-demo/button-demo.css.d.ts

@@ -0,0 +1 @@
+export declare const buttonDemoCSS = "\n  :host {\n    display: block;\n    color: var(--color-ink);\n  }\n\n  h1 {\n    font-size: 2.2rem;\n    margin-bottom: 0.5rem;\n    font-weight: 700;\n  }\n\n  h2 {\n    font-size: 1.4rem;\n    margin: 2rem 0 1.5rem;\n    font-weight: 600;\n    border-bottom: 2px solid var(--color-primary);\n    padding-bottom: 0.5rem;\n  }\n\n  p {\n    line-height: 1.6;\n    color: rgba(15, 23, 42, 0.75);\n    margin: 0 0 1rem;\n  }\n\n  .demo-intro {\n    background: linear-gradient(135deg, rgba(36, 236, 113, 0.08) 0%, rgba(52, 168, 235, 0.05) 100%);\n    padding: 1.5rem;\n    border-radius: 12px;\n    border-left: 4px solid var(--color-primary);\n    margin-bottom: 2rem;\n  }\n\n  .demo-section {\n    margin-bottom: 3rem;\n  }\n\n  .button-group {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n    gap: 1.5rem;\n    margin-top: 1rem;\n  }\n\n  .button-item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 0.75rem;\n    padding: 1.5rem;\n    background: var(--color-surface);\n    border: 1px solid var(--color-border);\n    border-radius: 12px;\n    text-align: center;\n    transition: all 0.2s ease;\n  }\n\n  .button-item:hover {\n    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);\n    border-color: var(--color-border-strong);\n  }\n\n  .label {\n    font-size: 0.8rem;\n    color: rgba(15, 23, 42, 0.6);\n    font-weight: 500;\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n  }\n\n  @media (max-width: 768px) {\n    .button-group {\n      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n      gap: 1rem;\n    }\n\n    .button-item {\n      padding: 1rem;\n    }\n\n    h1 {\n      font-size: 1.8rem;\n    }\n\n    h2 {\n      font-size: 1.2rem;\n    }\n  }\n";

package/dist/features/button-demo/button-demo.d.ts

@@ -0,0 +1,8 @@
+import { BaseComponent } from '../../core/base-component';
+import '../../shared/components/button';
+import '../../layouts/app-layout';
+declare class ButtonDemo extends BaseComponent {
+    connectedCallback(): void;
+    render(): void;
+}
+export { ButtonDemo };

package/dist/features/card-demo/card-demo.d.ts

@@ -0,0 +1 @@
+import '../../shared/components/card';

package/dist/features/checkbox-demo/checkbox-demo-page.css.d.ts

@@ -0,0 +1 @@
+export declare const checkboxDemoCSS = "\n\t.demo-container {\n\t\tpadding: 2rem;\n\t\tmax-width: 1200px;\n\t\tmargin: 0 auto;\n\t}\n\n\t.demo-container h1 {\n\t\tfont-size: 2rem;\n\t\tmargin-bottom: 0.5rem;\n\t\tcolor: var(--color-ink);\n\t}\n\n\t.demo-container > p {\n\t\tcolor: var(--color-text-muted);\n\t\tmargin-bottom: 2rem;\n\t}\n\n\t.demo-section {\n\t\tmargin-bottom: 3rem;\n\t\tpadding-bottom: 2rem;\n\t\tborder-bottom: 1px solid var(--color-border);\n\t}\n\n\t.demo-section:last-child {\n\t\tborder-bottom: none;\n\t}\n\n\t.demo-section h2 {\n\t\tfont-size: 1.5rem;\n\t\tmargin-bottom: 1rem;\n\t\tcolor: var(--color-ink);\n\t}\n\n\t.checkbox-group {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 1rem;\n\t}\n\n\t.result-display {\n\t\tpadding: 1rem;\n\t\tbackground: var(--color-muted);\n\t\tborder-radius: var(--radius-md);\n\t\tborder-left: 4px solid var(--color-primary);\n\t}\n\n\tfieldset {\n\t\tmargin: 0;\n\t}\n\n\tlegend {\n\t\tcolor: var(--color-ink);\n\t}\n";

package/dist/features/checkbox-demo/checkbox-demo-page.d.ts

@@ -0,0 +1,3 @@
+import '../../shared/components/button';
+import '../../shared/components/checkbox';
+import '../../layouts/app-layout';

package/dist/features/checkbox-demo/checkbox-demo-page.html.d.ts

@@ -0,0 +1 @@
+export declare const checkboxDemoHTML = "\n\t<div class=\"demo-container\">\n\t\t<h1>Checkbox Component Demo</h1>\n\t\t<p>Flexible checkbox with sizes, states, and indeterminate support.</p>\n\n\t\t<div class=\"demo-section\">\n\t\t\t<h2>Basic Checkboxes</h2>\n\t\t\t<div class=\"checkbox-group\">\n\t\t\t\t<ui-checkbox id=\"basic1\" label=\"Accept terms and conditions\"></ui-checkbox>\n\t\t\t\t<ui-checkbox id=\"basic2\" label=\"Subscribe to newsletter\" checked></ui-checkbox>\n\t\t\t\t<ui-checkbox id=\"basic3\" label=\"Disabled checkbox\" disabled></ui-checkbox>\n\t\t\t\t<ui-checkbox id=\"basic4\" label=\"Disabled & checked\" disabled checked></ui-checkbox>\n\t\t\t</div>\n\t\t</div>\n\n\t\t<div class=\"demo-section\">\n\t\t\t<h2>Checkbox Sizes</h2>\n\t\t\t<div class=\"checkbox-group\">\n\t\t\t\t<ui-checkbox id=\"size1\" label=\"Small checkbox\" size=\"sm\"></ui-checkbox>\n\t\t\t\t<ui-checkbox id=\"size2\" label=\"Medium checkbox (default)\" size=\"md\"></ui-checkbox>\n\t\t\t\t<ui-checkbox id=\"size3\" label=\"Large checkbox\" size=\"lg\"></ui-checkbox>\n\t\t\t</div>\n\t\t</div>\n\n\t\t<div class=\"demo-section\">\n\t\t\t<h2>Indeterminate State</h2>\n\t\t\t<p style=\"color: var(--color-text-muted); font-size: 0.875rem; margin-bottom: 1rem;\">\n\t\t\t\tUseful for \"select all\" scenarios where some items are selected.\n\t\t\t</p>\n\t\t\t<div style=\"background: white; padding: 1.5rem; border-radius: var(--radius-lg); border: 1px solid var(--color-border);\">\n\t\t\t\t<ui-checkbox id=\"selectAll\" label=\"Select All\" size=\"md\"></ui-checkbox>\n\t\t\t\t<div style=\"margin-left: 2rem; margin-top: 1rem;\" class=\"checkbox-group\">\n\t\t\t\t\t<ui-checkbox class=\"item-checkbox\" label=\"Item 1\" size=\"sm\"></ui-checkbox>\n\t\t\t\t\t<ui-checkbox class=\"item-checkbox\" label=\"Item 2\" size=\"sm\"></ui-checkbox>\n\t\t\t\t\t<ui-checkbox class=\"item-checkbox\" label=\"Item 3\" size=\"sm\"></ui-checkbox>\n\t\t\t\t\t<ui-checkbox class=\"item-checkbox\" label=\"Item 4\" size=\"sm\"></ui-checkbox>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\n\t\t<div class=\"demo-section\">\n\t\t\t<h2>Checkbox Group (Form)</h2>\n\t\t\t<form id=\"preferencesForm\" style=\"max-width: 600px;\">\n\t\t\t\t<fieldset style=\"border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.5rem;\">\n\t\t\t\t\t<legend style=\"font-weight: 600; padding: 0 0.5rem;\">Notification Preferences</legend>\n\t\t\t\t\t<div class=\"checkbox-group\">\n\t\t\t\t\t\t<ui-checkbox id=\"emailNotif\" label=\"Email notifications\" checked></ui-checkbox>\n\t\t\t\t\t\t<ui-checkbox id=\"smsNotif\" label=\"SMS notifications\"></ui-checkbox>\n\t\t\t\t\t\t<ui-checkbox id=\"pushNotif\" label=\"Push notifications\" checked></ui-checkbox>\n\t\t\t\t\t\t<ui-checkbox id=\"weeklyDigest\" label=\"Weekly digest\"></ui-checkbox>\n\t\t\t\t\t</div>\n\t\t\t\t</fieldset>\n\n\t\t\t\t<div style=\"margin-top: 1.5rem; display: flex; gap: 1rem;\">\n\t\t\t\t\t<ui-button type=\"submit\" variant=\"primary\" icon=\"save\">Save Preferences</ui-button>\n\t\t\t\t\t<ui-button type=\"button\" id=\"resetPreferences\" variant=\"ghost\">Reset</ui-button>\n\t\t\t\t</div>\n\t\t\t</form>\n\t\t\t<div id=\"formResult\" class=\"result-display\" style=\"display: none; margin-top: 1rem;\">\n\t\t\t\t<strong>Saved Preferences:</strong><br>\n\t\t\t\t<span id=\"formValue\"></span>\n\t\t\t</div>\n\t\t</div>\n\n\t\t<div class=\"demo-section\">\n\t\t\t<h2>Event Handling</h2>\n\t\t\t<div style=\"background: white; padding: 1.5rem; border-radius: var(--radius-lg); border: 1px solid var(--color-border);\">\n\t\t\t\t<ui-checkbox id=\"eventCheckbox\" label=\"Click me to trigger event\"></ui-checkbox>\n\t\t\t</div>\n\t\t\t<div id=\"eventResult\" class=\"result-display\" style=\"display: none; margin-top: 1rem;\">\n\t\t\t\t<strong>Event Log:</strong><br>\n\t\t\t\t<div id=\"eventLog\" style=\"font-family: monospace; font-size: 0.875rem; margin-top: 0.5rem;\"></div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n";

package/dist/features/dashboard/dashboard-page.d.ts

@@ -0,0 +1,3 @@
+import '../../layouts/app-layout';
+import '../../shared/components/button';
+import '../../shared/components/table';

package/dist/features/date-picker-demo/date-picker-demo.d.ts

@@ -0,0 +1,10 @@
+import { BaseComponent } from '../../core/base-component';
+import '../../layouts/app-layout';
+import '../../shared/components/date-picker';
+import '../../shared/components/button';
+declare class DatePickerDemo extends BaseComponent {
+    connectedCallback(): void;
+    private attachEventListeners;
+    render(): void;
+}
+export { DatePickerDemo };

package/dist/features/form-demo/form-demo-page.css.d.ts

@@ -0,0 +1 @@
+export declare const formDemoCSS = "\n\t:host {\n\t\tdisplay: block;\n\t\tcolor: var(--color-ink);\n\t}\n\n\t.form-hero {\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t\talign-items: center;\n\t\tgap: 1.5rem;\n\t\tpadding: 2rem;\n\t\tborder-radius: 20px;\n\t\tbackground: radial-gradient(circle at top left, rgba(36, 236, 113, 0.2), transparent 45%),\n\t\t\tlinear-gradient(135deg, rgba(52, 168, 235, 0.12), rgba(255, 255, 255, 0.95));\n\t\tborder: 1px solid rgba(52, 168, 235, 0.2);\n\t\tmargin-bottom: 2rem;\n\t\tflex-wrap: wrap;\n\t}\n\n\t.eyebrow {\n\t\ttext-transform: uppercase;\n\t\tletter-spacing: 0.2em;\n\t\tfont-size: 0.7rem;\n\t\tcolor: rgba(15, 23, 42, 0.55);\n\t\tmargin: 0 0 0.75rem;\n\t\tfont-weight: 700;\n\t}\n\n\th1 {\n\t\tfont-size: 2.4rem;\n\t\tmargin: 0 0 0.5rem;\n\t}\n\n\t.hero-subtitle {\n\t\tmax-width: 520px;\n\t\tmargin: 0;\n\t\tcolor: rgba(15, 23, 42, 0.65);\n\t\tfont-size: 1rem;\n\t\tline-height: 1.6;\n\t}\n\n\t.hero-chip {\n\t\tpadding: 0.4rem 0.9rem;\n\t\tborder-radius: 999px;\n\t\tfont-size: 0.75rem;\n\t\tfont-weight: 700;\n\t\ttext-transform: uppercase;\n\t\tletter-spacing: 0.14em;\n\t\tbackground: #0f172a;\n\t\tcolor: #ffffff;\n\t\tbox-shadow: 0 12px 24px rgba(15, 23, 42, 0.15);\n\t}\n\n\t.form-shell {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: minmax(0, 1fr) 320px;\n\t\tgap: 2rem;\n\t}\n\n\t.form-grid {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: repeat(2, minmax(0, 1fr));\n\t\tgap: 1.5rem;\n\t\talign-items: start;\n\t}\n\n\t.form-panel {\n\t\tpadding: 1.5rem;\n\t\tborder-radius: 16px;\n\t\tborder: 1px solid rgba(148, 163, 184, 0.3);\n\t\tbackground: #ffffff;\n\t\tbox-shadow: 0 18px 35px rgba(15, 23, 42, 0.08);\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 1rem;\n\t}\n\n\t.form-panel h2 {\n\t\tmargin: 0;\n\t\tfont-size: 1.35rem;\n\t}\n\n\t.form-panel p {\n\t\tmargin: 0;\n\t\tcolor: rgba(15, 23, 42, 0.6);\n\t\tfont-size: 0.95rem;\n\t}\n\n\t.split {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: repeat(2, minmax(0, 1fr));\n\t\tgap: 1rem;\n\t}\n\n\ttextarea {\n\t\tmin-height: 120px;\n\t\tpadding: 0.75rem 0.85rem;\n\t\tfont-size: 0.95rem;\n\t\tfont-family: inherit;\n\t\tborder: 1.5px solid var(--color-border);\n\t\tborder-radius: 8px;\n\t\tbackground: #ffffff;\n\t\tcolor: var(--color-ink);\n\t\ttransition: border-color 0.2s ease, box-shadow 0.2s ease;\n\t}\n\n\ttextarea:focus {\n\t\toutline: none;\n\t\tborder-color: var(--color-primary);\n\t\tbox-shadow: 0 0 0 3px rgba(36, 236, 113, 0.15);\n\t}\n\n\t.native-group {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 0.4rem;\n\t\tfont-size: 0.9rem;\n\t\tcolor: var(--color-ink);\n\t}\n\n\t.native-group select {\n\t\tpadding: 0.65rem 0.85rem;\n\t\tborder: 1.5px solid var(--color-border);\n\t\tborder-radius: 8px;\n\t\tfont-size: 0.95rem;\n\t\tfont-family: inherit;\n\t\tbackground: #ffffff;\n\t\tcolor: var(--color-ink);\n\t}\n\n\t.checkbox-stack {\n\t\tdisplay: grid;\n\t\tgap: 0.75rem;\n\t}\n\n\t.checkbox-inline {\n\t\tdisplay: grid;\n\t\tgap: 0.5rem;\n\t\tfont-size: 0.9rem;\n\t\tcolor: var(--color-ink);\n\t}\n\n\t.inline-options {\n\t\tdisplay: flex;\n\t\tgap: 1rem;\n\t\tflex-wrap: wrap;\n\t}\n\n\t.inline-options label {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 0.4rem;\n\t}\n\n\t.form-actions {\n\t\tgrid-column: 1 / -1;\n\t\tdisplay: flex;\n\t\tgap: 0.75rem;\n\t\talign-items: center;\n\t}\n\n\t.form-output {\n\t\tbackground: #0f172a;\n\t\tcolor: #f8fafc;\n\t\tborder-radius: 16px;\n\t\tpadding: 1.5rem;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 1rem;\n\t\tbox-shadow: 0 16px 30px rgba(15, 23, 42, 0.2);\n\t\theight: fit-content;\n\t\tposition: sticky;\n\t\ttop: 1.5rem;\n\t}\n\n\t.output-head {\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t\talign-items: center;\n\t\tfont-size: 0.85rem;\n\t\ttext-transform: uppercase;\n\t\tletter-spacing: 0.14em;\n\t\tcolor: rgba(248, 250, 252, 0.7);\n\t}\n\n\t.output-head h3 {\n\t\tmargin: 0;\n\t\tfont-size: 0.95rem;\n\t\tcolor: #ffffff;\n\t}\n\n\tpre {\n\t\tmargin: 0;\n\t\twhite-space: pre-wrap;\n\t\tfont-family: \"Cascadia Mono\", \"Fira Code\", monospace;\n\t\tfont-size: 0.82rem;\n\t\tline-height: 1.5;\n\t\tbackground: rgba(15, 23, 42, 0.45);\n\t\tpadding: 1rem;\n\t\tborder-radius: 12px;\n\t\tborder: 1px solid rgba(255, 255, 255, 0.1);\n\t}\n\n\t@media (max-width: 1024px) {\n\t\t.form-shell {\n\t\t\tgrid-template-columns: 1fr;\n\t\t}\n\n\t\t.form-output {\n\t\t\tposition: static;\n\t\t}\n\t}\n\n\t@media (max-width: 720px) {\n\t\t.form-grid {\n\t\t\tgrid-template-columns: 1fr;\n\t\t}\n\n\t\t.split {\n\t\t\tgrid-template-columns: 1fr;\n\t\t}\n\n\t\th1 {\n\t\t\tfont-size: 2rem;\n\t\t}\n\t}\n";

package/dist/features/form-demo/form-demo-page.d.ts

@@ -0,0 +1,7 @@
+import '../../shared/components/button';
+import '../../shared/components/input';
+import '../../shared/components/select';
+import '../../shared/components/checkbox';
+import '../../shared/components/date-picker';
+import '../../shared/components/upload';
+import '../../layouts/app-layout';

package/dist/features/home/home-page.css.d.ts

@@ -0,0 +1 @@
+export declare const homePageCSS = "\n  :host {\n    display: block;\n    color: var(--color-ink);\n  }\n\n  h1, h2, h3 {\n    margin: 0;\n  }\n\n  h2 {\n    font-size: 2rem;\n    font-weight: 700;\n    margin-bottom: 2rem;\n    position: relative;\n    display: inline-block;\n  }\n\n  h2::after {\n    content: '';\n    position: absolute;\n    bottom: -8px;\n    left: 0;\n    width: 60px;\n    height: 4px;\n    background: var(--color-primary);\n    border-radius: 2px;\n  }\n\n  p {\n    line-height: 1.6;\n    color: rgba(15, 23, 42, 0.75);\n  }\n\n  /* Hero Section */\n  .hero {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 4rem;\n    align-items: center;\n    margin-bottom: 6rem;\n    padding: 3rem 0;\n  }\n\n  .hero-content {\n    display: flex;\n    flex-direction: column;\n    gap: 1.5rem;\n  }\n\n  .hero-title {\n    font-size: 3.5rem;\n    font-weight: 800;\n    line-height: 1.1;\n    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-ink) 100%);\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n    background-clip: text;\n  }\n\n  .hero-subtitle {\n    font-size: 1.25rem;\n    line-height: 1.7;\n    color: rgba(15, 23, 42, 0.7);\n  }\n\n  .hero-actions {\n    display: flex;\n    gap: 1rem;\n    margin-top: 0.5rem;\n  }\n\n  .hero-visual {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .feature-icons {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    gap: 2rem;\n  }\n\n  .icon-item {\n    font-size: 4rem;\n    animation: float 3s ease-in-out infinite;\n  }\n\n  .icon-item:nth-child(2) { animation-delay: 0.3s; }\n  .icon-item:nth-child(3) { animation-delay: 0.6s; }\n  .icon-item:nth-child(4) { animation-delay: 0.9s; }\n\n  @keyframes float {\n    0%, 100% { transform: translateY(0px); }\n    50% { transform: translateY(-10px); }\n  }\n\n  /* Features Section */\n  .features {\n    margin-bottom: 6rem;\n  }\n\n  .features-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n    gap: 2rem;\n    margin-top: 2rem;\n  }\n\n  .feature-card {\n    padding: 2rem;\n    background: var(--color-surface);\n    border: 1px solid var(--color-border);\n    border-radius: 16px;\n    transition: all 0.3s ease;\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n  }\n\n  .feature-card:hover {\n    transform: translateY(-4px);\n    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);\n    border-color: var(--color-primary);\n  }\n\n  .feature-icon {\n    font-size: 2.5rem;\n    line-height: 1;\n  }\n\n  .feature-card h3 {\n    font-size: 1.2rem;\n    font-weight: 600;\n  }\n\n  .feature-card p {\n    font-size: 0.95rem;\n    margin: 0;\n  }\n\n  /* Components Section */\n  .components {\n    margin-bottom: 6rem;\n  }\n\n  .components-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n    gap: 1rem;\n    margin-top: 2rem;\n  }\n\n  .component-item {\n    padding: 1.5rem;\n    background: var(--color-surface);\n    border: 1px solid var(--color-border);\n    border-radius: 12px;\n    transition: all 0.2s ease;\n    cursor: pointer;\n    display: flex;\n    flex-direction: column;\n    gap: 0.5rem;\n  }\n\n  .component-item:hover {\n    border-color: var(--color-primary);\n    background: linear-gradient(135deg, rgba(36, 236, 113, 0.05), transparent);\n    transform: translateX(4px);\n  }\n\n  .component-name {\n    font-weight: 600;\n    color: var(--color-primary);\n    font-family: \"Cascadia Mono\", \"Fira Code\", monospace;\n    font-size: 0.9rem;\n  }\n\n  .component-desc {\n    font-size: 0.85rem;\n    color: rgba(15, 23, 42, 0.6);\n  }\n\n  /* Quick Start Section */\n  .quick-start {\n    margin-bottom: 6rem;\n  }\n\n  .code-blocks {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 2rem;\n    margin-top: 2rem;\n  }\n\n  .code-block {\n    background: #0f172a;\n    padding: 2rem;\n    border-radius: 12px;\n    border: 1px solid rgba(255, 255, 255, 0.1);\n  }\n\n  .code-block h3 {\n    color: #f8fafc;\n    font-size: 1.1rem;\n    margin-bottom: 1rem;\n    font-weight: 600;\n  }\n\n  .code-block pre {\n    margin: 0;\n    overflow-x: auto;\n  }\n\n  .code-block code {\n    font-family: \"Cascadia Mono\", \"Fira Code\", monospace;\n    font-size: 0.9rem;\n    color: #e0e7ff;\n    line-height: 1.5;\n  }\n\n  /* CTA Section */\n  .cta {\n    text-align: center;\n    padding: 4rem 2rem;\n    background: linear-gradient(135deg, rgba(36, 236, 113, 0.1) 0%, rgba(52, 168, 235, 0.05) 100%);\n    border-radius: 16px;\n    border: 1px solid var(--color-border);\n    margin-bottom: 2rem;\n  }\n\n  .cta h2 {\n    margin-bottom: 1rem;\n    font-size: 2rem;\n  }\n\n  .cta h2::after {\n    display: none;\n  }\n\n  .cta p {\n    font-size: 1.1rem;\n    margin-bottom: 2rem;\n  }\n\n  /* Responsive */\n  @media (max-width: 768px) {\n    .hero {\n      grid-template-columns: 1fr;\n      gap: 2rem;\n      margin-bottom: 4rem;\n    }\n\n    .hero-title {\n      font-size: 2.5rem;\n    }\n\n    .hero-subtitle {\n      font-size: 1rem;\n    }\n\n    .hero-actions {\n      flex-wrap: wrap;\n    }\n\n    .feature-icons {\n      grid-template-columns: 1fr;\n      gap: 1rem;\n    }\n\n    .icon-item {\n      font-size: 3rem;\n    }\n\n    h2 {\n      font-size: 1.5rem;\n    }\n\n    .features-grid,\n    .components-grid {\n      grid-template-columns: 1fr;\n    }\n\n    .code-blocks {\n      grid-template-columns: 1fr;\n    }\n\n    .cta {\n      padding: 2rem 1.5rem;\n    }\n\n    .cta h2 {\n      font-size: 1.5rem;\n    }\n  }\n";

package/dist/features/home/home-page.d.ts

@@ -0,0 +1,9 @@
+import { BaseComponent } from '../../core/base-component';
+import '../../shared/components/button';
+import '../../layouts/app-layout';
+declare class HomePage extends BaseComponent {
+    connectedCallback(): void;
+    private attachEventListeners;
+    render(): void;
+}
+export { HomePage };

package/dist/features/input-demo/input-demo.d.ts

@@ -0,0 +1,12 @@
+import { BaseComponent } from '../../core/base-component';
+import '../../shared/components/input';
+import '../../shared/components/button';
+import '../../layouts/app-layout';
+declare class InputDemo extends BaseComponent {
+    private formResult;
+    private statusSpan;
+    render(): void;
+    private handleSubmit;
+    private handleReset;
+}
+export { InputDemo };

package/dist/features/layout-demo/layout-demo.css.d.ts

@@ -0,0 +1 @@
+export declare const layoutDemoCSS = "\n  :host {\n    display: block;\n    color: var(--color-ink);\n  }\n\n  h1 {\n    font-size: 2.2rem;\n    margin-bottom: 0.5rem;\n    font-weight: 700;\n  }\n\n  h2 {\n    font-size: 1.4rem;\n    margin: 2rem 0 1rem;\n    font-weight: 600;\n    border-bottom: 2px solid var(--color-primary);\n    padding-bottom: 0.5rem;\n  }\n\n  h3 {\n    font-size: 1.2rem;\n    margin: 0 0 0.75rem;\n    font-weight: 600;\n  }\n\n  p {\n    line-height: 1.6;\n    color: rgba(15, 23, 42, 0.75);\n    margin: 0 0 1rem;\n  }\n\n  code {\n    background: var(--color-muted);\n    padding: 0.2rem 0.5rem;\n    border-radius: 4px;\n    font-family: \"Cascadia Mono\", \"Fira Code\", monospace;\n    font-size: 0.9rem;\n    color: var(--color-primary);\n  }\n\n  .demo-intro {\n    background: linear-gradient(135deg, rgba(36, 236, 113, 0.08) 0%, rgba(52, 168, 235, 0.05) 100%);\n    padding: 1.5rem;\n    border-radius: 12px;\n    border-left: 4px solid var(--color-primary);\n    margin-bottom: 2rem;\n  }\n\n  .demo-section {\n    margin-bottom: 3rem;\n  }\n\n  .layout-example {\n    background: var(--color-surface);\n    border: 1px solid var(--color-border);\n    border-radius: 12px;\n    overflow: hidden;\n    height: 400px;\n    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);\n    margin-top: 1rem;\n  }\n\n  .layout-example.full-height {\n    height: 550px;\n  }\n\n  .content-placeholder {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--color-bg);\n    font-size: 1.1rem;\n    font-weight: 500;\n    color: rgba(15, 23, 42, 0.5);\n  }\n\n  .sidebar-label {\n    font-size: 0.75rem;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.1em;\n    color: rgba(15, 23, 42, 0.5);\n    padding: 0.75rem 1rem 0.5rem;\n    margin-top: 0.5rem;\n  }\n\n  .sidebar-item {\n    padding: 0.75rem 1rem;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    font-size: 0.95rem;\n    color: var(--color-ink);\n    user-select: none;\n  }\n\n  .sidebar-item:hover {\n    background: var(--color-muted);\n    color: var(--color-primary);\n  }\n\n  .sidebar-section {\n    padding: 0.5rem 0;\n  }\n\n  .demo-info {\n    background: var(--color-muted);\n    padding: 1.5rem;\n    border-radius: 8px;\n    margin-bottom: 1rem;\n  }\n\n  .event-output {\n    background: #0f172a;\n    color: #f8fafc;\n    padding: 1rem;\n    border-radius: 6px;\n    font-family: \"Cascadia Mono\", \"Fira Code\", monospace;\n    font-size: 0.85rem;\n    margin-top: 0.5rem;\n    line-height: 1.5;\n    max-height: 150px;\n    overflow-y: auto;\n  }\n\n  .event-output.empty {\n    opacity: 0.6;\n  }\n\n  /* Custom scrollbar */\n  .event-output::-webkit-scrollbar {\n    width: 6px;\n  }\n\n  .event-output::-webkit-scrollbar-track {\n    background: rgba(248, 250, 252, 0.1);\n    border-radius: 3px;\n  }\n\n  .event-output::-webkit-scrollbar-thumb {\n    background: rgba(248, 250, 252, 0.3);\n    border-radius: 3px;\n  }\n\n  .event-output::-webkit-scrollbar-thumb:hover {\n    background: rgba(248, 250, 252, 0.5);\n  }\n";

package/dist/features/layout-demo/layout-demo.d.ts

@@ -0,0 +1,9 @@
+import { BaseComponent } from '../../core/base-component';
+import '../../shared/components/layout';
+import '../../layouts/app-layout';
+declare class LayoutDemo extends BaseComponent {
+    connectedCallback(): Promise<void>;
+    private setupEventListeners;
+    render(): void;
+}
+export { LayoutDemo };

package/dist/features/modal-demo/modal-demo-page.css.d.ts

@@ -0,0 +1 @@
+export declare const modalDemoCSS = "\n\t.demo-container {\n\t\tpadding: 2rem;\n\t\tmax-width: 1200px;\n\t\tmargin: 0 auto;\n\t}\n\n\t.demo-container h1 {\n\t\tfont-size: 2rem;\n\t\tmargin-bottom: 0.5rem;\n\t\tcolor: var(--color-ink);\n\t}\n\n\t.demo-container > p {\n\t\tcolor: var(--color-text-muted);\n\t\tmargin-bottom: 2rem;\n\t}\n\n\t.demo-section {\n\t\tmargin-bottom: 3rem;\n\t\tpadding-bottom: 2rem;\n\t\tborder-bottom: 1px solid var(--color-border);\n\t}\n\n\t.demo-section:last-child {\n\t\tborder-bottom: none;\n\t}\n\n\t.demo-section h2 {\n\t\tfont-size: 1.5rem;\n\t\tmargin-bottom: 1rem;\n\t\tcolor: var(--color-ink);\n\t}\n\n\t.demo-controls {\n\t\tdisplay: flex;\n\t\tgap: 1rem;\n\t\tflex-wrap: wrap;\n\t\tmargin-top: 1rem;\n\t}\n\n\t.result-display {\n\t\tmargin-top: 1rem;\n\t\tpadding: 1rem;\n\t\tbackground: var(--color-muted);\n\t\tborder-radius: var(--radius-md);\n\t\tborder-left: 4px solid var(--color-primary);\n\t}\n\n\tul {\n\t\tmargin: 1rem 0;\n\t\tpadding-left: 1.5rem;\n\t}\n\n\tli {\n\t\tmargin: 0.5rem 0;\n\t}\n";

package/dist/features/modal-demo/modal-demo-page.d.ts

@@ -0,0 +1,3 @@
+import '../../shared/components/button';
+import '../../shared/components/modal';
+import '../../layouts/app-layout';

package/dist/features/modal-demo/modal-demo-page.html.d.ts

@@ -0,0 +1 @@
+export declare const modalDemoHTML: string;

package/dist/features/select-demo/select-demo-page.css.d.ts

@@ -0,0 +1 @@
+export declare const selectDemoCSS = "\n\t.demo-container {\n\t\tpadding: 2rem;\n\t\tmax-width: 1200px;\n\t\tmargin: 0 auto;\n\t}\n\n\t.demo-container h1 {\n\t\tfont-size: 2rem;\n\t\tmargin-bottom: 0.5rem;\n\t\tcolor: var(--color-ink);\n\t}\n\n\t.demo-container > p {\n\t\tcolor: var(--color-text-muted);\n\t\tmargin-bottom: 2rem;\n\t}\n\n\t.demo-section {\n\t\tmargin-bottom: 3rem;\n\t\tpadding-bottom: 2rem;\n\t\tborder-bottom: 1px solid var(--color-border);\n\t}\n\n\t.demo-section:last-child {\n\t\tborder-bottom: none;\n\t}\n\n\t.demo-section h2 {\n\t\tfont-size: 1.5rem;\n\t\tmargin-bottom: 1rem;\n\t\tcolor: var(--color-ink);\n\t}\n\n\t.demo-grid {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n\t\tgap: 1.5rem;\n\t\tmargin-top: 1rem;\n\t}\n\n\t.demo-grid > * {\n\t\tmin-width: 0;\n\t}\n\n\t.result-display {\n\t\tmargin-top: 1rem;\n\t\tpadding: 1rem;\n\t\tbackground: var(--color-muted);\n\t\tborder-radius: var(--radius-md);\n\t\tborder-left: 4px solid var(--color-primary);\n\t}\n\n\tform {\n\t\tbackground: white;\n\t\tpadding: 1.5rem;\n\t\tborder-radius: var(--radius-lg);\n\t\tborder: 1px solid var(--color-border);\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 1rem;\n\t}\n";

package/dist/features/select-demo/select-demo-page.d.ts

@@ -0,0 +1,3 @@
+import '../../shared/components/button';
+import '../../shared/components/select';
+import '../../layouts/app-layout';

package/dist/features/select-demo/select-demo-page.html.d.ts

@@ -0,0 +1 @@
+export declare const selectDemoHTML = "\n\t<div class=\"demo-container\">\n\t\t<h1>Select Component Demo</h1>\n\t\t<p>Customizable dropdown select with search and multi-configuration options.</p>\n\n\t\t<div class=\"demo-section\">\n\t\t\t<h2>Basic Select</h2>\n\t\t\t<div class=\"demo-grid\">\n\t\t\t\t<ui-select \n\t\t\t\t\tid=\"basicSelect\"\n\t\t\t\t\tlabel=\"Choose a Fruit\"\n\t\t\t\t\tplaceholder=\"Select a fruit...\"\n\t\t\t\t></ui-select>\n\t\t\t\t\n\t\t\t\t<ui-select \n\t\t\t\t\tid=\"disabledSelect\"\n\t\t\t\t\tlabel=\"Disabled Select\"\n\t\t\t\t\tplaceholder=\"Not available\"\n\t\t\t\t\tdisabled\n\t\t\t\t></ui-select>\n\t\t\t</div>\n\t\t\t<div id=\"basicResult\" class=\"result-display\" style=\"display: none;\">\n\t\t\t\t<strong>Selected:</strong> <span id=\"basicValue\"></span>\n\t\t\t</div>\n\t\t</div>\n\n\t\t<div class=\"demo-section\">\n\t\t\t<h2>Searchable Select</h2>\n\t\t\t<div class=\"demo-grid\">\n\t\t\t\t<ui-select \n\t\t\t\t\tid=\"searchableSelect\"\n\t\t\t\t\tlabel=\"Choose a Country\"\n\t\t\t\t\tplaceholder=\"Search countries...\"\n\t\t\t\t\tsearchable\n\t\t\t\t></ui-select>\n\t\t\t</div>\n\t\t\t<div id=\"searchResult\" class=\"result-display\" style=\"display: none;\">\n\t\t\t\t<strong>Selected Country:</strong> <span id=\"searchValue\"></span>\n\t\t\t</div>\n\t\t</div>\n\n\t\t<div class=\"demo-section\">\n\t\t\t<h2>Select Sizes & Preselected</h2>\n\t\t\t<div class=\"demo-grid\">\n\t\t\t\t<ui-select \n\t\t\t\t\tid=\"preselectedSelect\"\n\t\t\t\t\tlabel=\"Choose a Programming Language\"\n\t\t\t\t\tplaceholder=\"Select language...\"\n\t\t\t\t\tvalue=\"javascript\"\n\t\t\t\t></ui-select>\n\t\t\t</div>\n\t\t\t<div id=\"preselectedResult\" class=\"result-display\" style=\"display: none;\">\n\t\t\t\t<strong>Selected:</strong> <span id=\"preselectedValue\"></span>\n\t\t\t</div>\n\t\t</div>\n\n\t\t<div class=\"demo-section\">\n\t\t\t<h2>Form Example</h2>\n\t\t\t<form id=\"userForm\" style=\"max-width: 600px;\">\n\t\t\t\t<ui-select \n\t\t\t\t\tid=\"roleSelect\"\n\t\t\t\t\tlabel=\"User Role\"\n\t\t\t\t\tplaceholder=\"Select role...\"\n\t\t\t\t></ui-select>\n\n\t\t\t\t<ui-select \n\t\t\t\t\tid=\"departmentSelect\"\n\t\t\t\t\tlabel=\"Department\"\n\t\t\t\t\tplaceholder=\"Select department...\"\n\t\t\t\t></ui-select>\n\n\t\t\t\t<div style=\"margin-top: 0.5rem; display: flex; gap: 1rem;\">\n\t\t\t\t\t<ui-button type=\"submit\" variant=\"primary\" icon=\"check\">Submit</ui-button>\n\t\t\t\t\t<ui-button type=\"button\" id=\"resetForm\" variant=\"ghost\">Reset</ui-button>\n\t\t\t\t</div>\n\t\t\t</form>\n\t\t\t<div id=\"formResult\" class=\"result-display\" style=\"display: none; margin-top: 1rem;\">\n\t\t\t\t<strong>Form Data:</strong><br>\n\t\t\t\t<span id=\"formValue\"></span>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n";

package/dist/features/stepper-demo/stepper-demo-page.css.d.ts

@@ -0,0 +1 @@
+export declare const stepperDemoCSS = "\n\t:host {\n\t\tdisplay: block;\n\t\tcolor: var(--color-ink);\n\t}\n\n\t.stepper-hero {\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t\talign-items: center;\n\t\tpadding: 2rem;\n\t\tborder-radius: 20px;\n\t\tbackground: radial-gradient(circle at top left, rgba(36, 236, 113, 0.2), transparent 45%),\n\t\t\tlinear-gradient(135deg, rgba(52, 168, 235, 0.12), rgba(255, 255, 255, 0.9));\n\t\tborder: 1px solid rgba(52, 168, 235, 0.2);\n\t\tmargin-bottom: 2rem;\n\t\tgap: 1.5rem;\n\t\tflex-wrap: wrap;\n\t}\n\n\t.eyebrow {\n\t\ttext-transform: uppercase;\n\t\tletter-spacing: 0.2em;\n\t\tfont-size: 0.7rem;\n\t\tcolor: rgba(15, 23, 42, 0.55);\n\t\tmargin: 0 0 0.75rem;\n\t\tfont-weight: 700;\n\t}\n\n\th1 {\n\t\tfont-size: 2.4rem;\n\t\tmargin: 0 0 0.5rem;\n\t}\n\n\t.hero-subtitle {\n\t\tmax-width: 520px;\n\t\tmargin: 0;\n\t\tcolor: rgba(15, 23, 42, 0.65);\n\t\tfont-size: 1rem;\n\t\tline-height: 1.6;\n\t}\n\n\t.hero-badge {\n\t\tpadding: 0.4rem 0.9rem;\n\t\tborder-radius: 999px;\n\t\tfont-size: 0.75rem;\n\t\tfont-weight: 700;\n\t\ttext-transform: uppercase;\n\t\tletter-spacing: 0.14em;\n\t\tbackground: #0f172a;\n\t\tcolor: #ffffff;\n\t\tbox-shadow: 0 12px 24px rgba(15, 23, 42, 0.15);\n\t}\n\n\t.stepper-section {\n\t\tmargin-bottom: 2rem;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 1.5rem;\n\t}\n\n\t.stepper-section.grid {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n\t\tgap: 1.5rem;\n\t}\n\n\t.section-head h2 {\n\t\tmargin: 0 0 0.35rem;\n\t\tfont-size: 1.4rem;\n\t}\n\n\t.section-head p {\n\t\tmargin: 0;\n\t\tcolor: rgba(15, 23, 42, 0.6);\n\t\tfont-size: 0.95rem;\n\t}\n\n\t.stepper-card {\n\t\tpadding: 1.5rem;\n\t\tborder-radius: 16px;\n\t\tborder: 1px solid rgba(148, 163, 184, 0.3);\n\t\tbackground: #ffffff;\n\t\tbox-shadow: 0 16px 32px rgba(15, 23, 42, 0.08);\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 1.5rem;\n\t}\n\n\t.stepper-controls {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t\tgap: 1rem;\n\t\tflex-wrap: wrap;\n\t}\n\n\t.stepper-preview {\n\t\tborder-radius: 14px;\n\t\tpadding: 1.25rem;\n\t\tbackground: linear-gradient(135deg, rgba(36, 236, 113, 0.12), rgba(255, 255, 255, 0.9));\n\t\tborder: 1px solid rgba(36, 236, 113, 0.25);\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 0.65rem;\n\t\tmin-height: 140px;\n\t\tanimation: fadeSlide 0.25s ease;\n\t}\n\n\t.stepper-preview h3 {\n\t\tmargin: 0;\n\t\tfont-size: 1.1rem;\n\t}\n\n\t.stepper-preview p {\n\t\tmargin: 0;\n\t\tcolor: rgba(15, 23, 42, 0.65);\n\t\tfont-size: 0.95rem;\n\t\tline-height: 1.5;\n\t}\n\n\t.stepper-preview ul {\n\t\tmargin: 0;\n\t\tpadding-left: 1.2rem;\n\t\tcolor: rgba(15, 23, 42, 0.65);\n\t\tfont-size: 0.9rem;\n\t\tdisplay: grid;\n\t\tgap: 0.35rem;\n\t}\n\n\t.actions {\n\t\tdisplay: flex;\n\t\tgap: 0.75rem;\n\t\talign-items: center;\n\t}\n\n\t.status-pill {\n\t\tpadding: 0.35rem 0.9rem;\n\t\tbackground: rgba(36, 236, 113, 0.15);\n\t\tborder-radius: 999px;\n\t\tfont-size: 0.85rem;\n\t\tfont-weight: 600;\n\t\tcolor: #166534;\n\t}\n\n\t@keyframes fadeSlide {\n\t\tfrom {\n\t\t\topacity: 0;\n\t\t\ttransform: translateY(6px);\n\t\t}\n\t\tto {\n\t\t\topacity: 1;\n\t\t\ttransform: translateY(0);\n\t\t}\n\t}\n\n\t@media (max-width: 720px) {\n\t\t.stepper-hero {\n\t\t\tpadding: 1.5rem;\n\t\t}\n\n\t\th1 {\n\t\t\tfont-size: 2rem;\n\t\t}\n\t}\n";

package/dist/features/stepper-demo/stepper-demo-page.d.ts

@@ -0,0 +1,3 @@
+import '../../shared/components/button';
+import '../../shared/components/stepper';
+import '../../layouts/app-layout';

package/dist/features/stepper-demo/stepper-demo-page.html.d.ts

@@ -0,0 +1 @@
+export declare const stepperDemoHTML = "\n\t<section class=\"stepper-hero\">\n\t\t<div>\n\t\t\t<p class=\"eyebrow\">Flow control</p>\n\t\t\t<h1>Stepper</h1>\n\t\t\t<p class=\"hero-subtitle\">\n\t\t\t\tGuide users across multi-step journeys with clear progress, states, and actions.\n\t\t\t</p>\n\t\t</div>\t\t\n\t</section>\n\n\t<section class=\"stepper-section\">\n\t\t<div class=\"section-head\">\n\t\t\t<h2>Interactive progress</h2>\n\t\t\t<p>Move between steps to preview states and content density.</p>\n\t\t</div>\n\t\t<div class=\"stepper-card\">\n\t\t\t<ui-stepper id=\"interactiveStepper\" size=\"md\"></ui-stepper>\n\t\t\t<div class=\"stepper-preview\" id=\"interactiveContent\"></div>\n\t\t\t<div class=\"stepper-controls\">\n\t\t\t\t<div class=\"status-pill\" id=\"interactiveStatus\">Step 2 of 5</div>\n\t\t\t\t<div class=\"actions\">\n\t\t\t\t\t<ui-button id=\"prevStep\" variant=\"secondary\" size=\"sm\">Previous</ui-button>\n\t\t\t\t\t<ui-button id=\"nextStep\" variant=\"primary\" size=\"sm\">Next</ui-button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</section>\n\n\t<section class=\"stepper-section grid\">\n\t\t<div class=\"stepper-card\">\n\t\t\t<div class=\"section-head\">\n\t\t\t\t<h2>Compact workflow</h2>\n\t\t\t\t<p>Small size for tight layouts or onboarding drawers.</p>\n\t\t\t</div>\n\t\t\t<ui-stepper id=\"compactStepper\" size=\"sm\"></ui-stepper>\n\t\t</div>\n\t\t<div class=\"stepper-card\">\n\t\t\t<div class=\"section-head\">\n\t\t\t\t<h2>Vertical journey</h2>\n\t\t\t\t<p>Perfect for forms, checklists, and long content.</p>\n\t\t\t</div>\n\t\t\t<ui-stepper id=\"verticalStepper\" orientation=\"vertical\" size=\"lg\"></ui-stepper>\n\t\t</div>\n\t</section>\n\n\t<section class=\"stepper-section\">\n\t\t<div class=\"section-head\">\n\t\t\t<h2>Status flavors</h2>\n\t\t\t<p>Explicit states like warning and error bring clarity to complex flows.</p>\n\t\t</div>\n\t\t<div class=\"stepper-card\">\n\t\t\t<ui-stepper id=\"statusStepper\" size=\"md\"></ui-stepper>\n\t\t</div>\n\t</section>\n";

package/dist/features/table-demo/table-demo.d.ts

@@ -0,0 +1,18 @@
+import { BaseComponent } from '../../core/base-component';
+import '../../shared/components/table';
+import '../../shared/components/pagination';
+import '../../layouts/app-layout';
+import '../../shared/components/modal';
+declare class TableDemo extends BaseComponent {
+    private hasLoaded;
+    private loading;
+    private error;
+    private data;
+    private currentPage;
+    private pageSize;
+    connectedCallback(): void;
+    private loadData;
+    private showActionMessage;
+    render(): void;
+}
+export { TableDemo };

package/dist/features/tabs-demo/tabs-demo.d.ts

@@ -0,0 +1,7 @@
+import { BaseComponent } from '../../core/base-component';
+import '../../shared/components/tabs';
+import '../../layouts/app-layout';
+declare class TabsDemo extends BaseComponent {
+    render(): void;
+}
+export { TabsDemo };

package/dist/features/toast-demo/toast-demo-page.d.ts

@@ -0,0 +1,3 @@
+import '../../shared/components/button';
+import '../../shared/components/toast';
+import '../../layouts/app-layout';

package/dist/layouts/app-layout.d.ts

@@ -0,0 +1,16 @@
+import { BaseComponent } from '../core/base-component';
+import '../shared/components/sidebar';
+import '../shared/components/top-bar';
+import '../shared/components/button';
+import type { RouteOld } from '../core/router';
+export declare const routes: RouteOld[];
+declare class AppLayout extends BaseComponent {
+    private pageTitle;
+    private pageSubtitle;
+    private navItems;
+    private footerItems;
+    connectedCallback(): void;
+    private updateTitle;
+    render(): void;
+}
+export { AppLayout };

package/dist/lib/index.d.ts

@@ -0,0 +1,29 @@
+export { UIButton } from '../shared/components/button';
+export { UIInput } from '../shared/components/input';
+export { UITable } from '../shared/components/table';
+export { UIDatePicker } from '../shared/components/date-picker';
+export { UIPagination } from '../shared/components/pagination';
+export { UIModal } from '../shared/components/modal';
+export { UISelect } from '../shared/components/select';
+export { UICheckbox } from '../shared/components/checkbox';
+export { UITabs } from '../shared/components/tabs';
+export { UICard } from '../shared/components/card';
+export { UIToast } from '../shared/components/toast';
+export { UIStepper } from '../shared/components/stepper';
+export { UIUpload } from '../shared/components/upload';
+export { UILayout, UILayoutHeader, UILayoutFooter, UILayoutContent, UILayoutSidebar } from '../shared/components/layout';
+export { BaseComponent } from '../core/base-component';
+export type { Signal } from '../core/base-component';
+export type { ButtonVariant, ButtonSize } from '../shared/components/button';
+export type { InputType, ValidationResult, CustomValidator, ValidationRule } from '../shared/components/input';
+export type { TableColumn, TableRow } from '../shared/components/table';
+export type { SelectOption } from '../shared/components/select';
+export type { TabChangeDetail } from '../shared/components/tabs';
+export type { ToastType, ToastPosition, ToastConfig } from '../shared/components/toast';
+export type { StepperOrientation, StepperSize, StepperStep, StepChangeDetail, StepState } from '../shared/components/stepper';
+export { http, HTTPClient } from '../core/http';
+export type { RequestConfig, ResponseConfig, RequestInterceptor, ResponseInterceptor, ErrorInterceptor } from '../core/http';
+export { queryElement, queryElements, queryTable, queryPagination, queryModal, addEventListenerById, getElementById, getFormValues } from '../core/dom-helpers';
+export type { UITableElement, UIPaginationElement, UIModalElement, FormValue, GetFormValuesOptions } from '../core/dom-helpers';
+export { createRouter } from '../core/router';
+export type { Route } from '../core/router';

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

@@ -0,0 +1,17 @@
+import { BaseComponent } from '../../core/base-component';
+type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';
+type ButtonSize = 'sm' | 'md' | 'lg';
+declare class UIButton extends BaseComponent {
+    connectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(): void;
+    private attachClickHandler;
+    private getVariant;
+    private getSize;
+    private getType;
+    private getIcon;
+    private getIconPosition;
+    render(): void;
+}
+export { UIButton };
+export type { ButtonVariant, ButtonSize };

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

@@ -0,0 +1,13 @@
+import { BaseComponent } from '../../core/base-component';
+declare class UICard extends BaseComponent {
+    connectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(): void;
+    private getShadow;
+    private getShadowColor;
+    private getRounded;
+    private getVariant;
+    private getElevation;
+    render(): void;
+}
+export { UICard };

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

@@ -0,0 +1,13 @@
+import { BaseComponent } from '../../core/base-component';
+declare class UICheckbox extends BaseComponent {
+    private checked;
+    private indeterminate;
+    connectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    private handleChange;
+    setChecked(checked: boolean): void;
+    setIndeterminate(indeterminate: boolean): void;
+    render(): void;
+}
+export { UICheckbox };

package/dist/shared/components/date-picker.d.ts

@@ -0,0 +1,47 @@
+import { BaseComponent } from '../../core/base-component';
+declare class UIDatePicker extends BaseComponent {
+    private inputElement;
+    private isComponentConnected;
+    private isInternalUpdate;
+    private hasRendered;
+    connectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    private updateInputValues;
+    private getFormat;
+    private getValue;
+    private getMin;
+    private getMax;
+    private getPlaceholder;
+    private getLabel;
+    private isDisabled;
+    /**
+     * Convert date from ISO format (YYYY-MM-DD) to specified format
+     */
+    private formatDate;
+    /**
+     * Convert date from specified format to ISO format (YYYY-MM-DD)
+     */
+    private parseDate;
+    private attachEventListeners;
+    private isValidDate;
+    private dispatchDateChange;
+    /**
+     * Get the current value in ISO format (YYYY-MM-DD)
+     */
+    getISOValue(): string;
+    /**
+     * Get the current value in the specified format
+     */
+    getFormattedValue(): string;
+    /**
+     * Set the date value (accepts ISO format)
+     */
+    setValue(isoDate: string): void;
+    /**
+     * Clear the date value
+     */
+    clear(): void;
+    render(): void;
+}
+export { UIDatePicker };

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

@@ -0,0 +1,59 @@
+import { BaseComponent } from '../../core/base-component';
+type InputType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url';
+interface ValidationResult {
+    valid: boolean;
+    message?: string;
+}
+type CustomValidator = (value: string, input: HTMLInputElement) => ValidationResult;
+type ValidationRule = {
+    type: 'emailDomain';
+    domain: string;
+} | {
+    type: 'match';
+    selector: string;
+} | {
+    type: 'minLength';
+    length: number;
+} | {
+    type: 'maxLength';
+    length: number;
+} | {
+    type: 'regex';
+    pattern: string;
+};
+declare class UIInput extends BaseComponent<{
+    value: string;
+    valid: boolean;
+    touched: boolean;
+    error: string;
+}> {
+    private inputEl;
+    private customValidator;
+    private validationRule;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    setCustomValidator(validator: CustomValidator): void;
+    get value(): string;
+    set value(val: string);
+    get isValid(): boolean;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    private getType;
+    private getLabel;
+    private getPlaceholder;
+    private getName;
+    private getErrorMessage;
+    private getCustomError;
+    private parseValidationRule;
+    private applyValidationRule;
+    private validate;
+    private handleInput;
+    private handleBlur;
+    private updateErrorDisplay;
+    private needsRender;
+    render(): void;
+}
+export { UIInput };
+export type { InputType, ValidationResult, CustomValidator, ValidationRule };

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

@@ -0,0 +1,57 @@
+import { BaseComponent } from '../../core/base-component';
+/**
+ * ui-layout: Main layout container that manages flex direction
+ * Supports: horizontal (header-footer with content), vertical, auto (detects based on children)
+ */
+declare class UILayout extends BaseComponent {
+    connectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(): void;
+    private getDirection;
+    private detectDirection;
+    render(): void;
+}
+/**
+ * ui-layout-header: Header section with optional height
+ */
+declare class UILayoutHeader extends BaseComponent {
+    connectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(): void;
+    private getHeight;
+    render(): void;
+}
+/**
+ * ui-layout-footer: Footer section with optional height
+ */
+declare class UILayoutFooter extends BaseComponent {
+    connectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(): void;
+    private getHeight;
+    render(): void;
+}
+/**
+ * ui-layout-content: Main content area (grows to fill available space)
+ */
+declare class UILayoutContent extends BaseComponent {
+    connectedCallback(): void;
+    render(): void;
+}
+/**
+ * ui-layout-sidebar: Sidebar with collapse functionality
+ */
+declare class UILayoutSidebar extends BaseComponent {
+    private isCollapsed;
+    private animating;
+    connectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string): void;
+    private getWidth;
+    private getCollapsedWidth;
+    private isCollapsible;
+    private attachEventListeners;
+    private toggleCollapse;
+    render(): void;
+}
+export { UILayout, UILayoutHeader, UILayoutFooter, UILayoutContent, UILayoutSidebar };

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

@@ -0,0 +1,13 @@
+import { BaseComponent } from '../../core/base-component';
+declare class UIModal extends BaseComponent {
+    private isOpen;
+    connectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    private setupEventListeners;
+    open(): void;
+    close(): void;
+    private handleBackdropClick;
+    render(): void;
+}
+export { UIModal };

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

@@ -0,0 +1,21 @@
+import { BaseComponent } from '../../core/base-component';
+declare class UIPagination extends BaseComponent {
+    private _total;
+    private _currentPage;
+    private _pageSize;
+    connectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, _oldValue: string, newValue: string): void;
+    get total(): number;
+    set total(value: number);
+    get currentPage(): number;
+    set currentPage(value: number);
+    get pageSize(): number;
+    set pageSize(value: number);
+    get totalPages(): number;
+    private handlePageChange;
+    private getPageNumbers;
+    render(): void;
+    private attachEventListeners;
+}
+export { UIPagination };

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

@@ -0,0 +1,25 @@
+import { BaseComponent } from '../../core/base-component';
+interface SelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+declare class UISelect extends BaseComponent {
+    private isOpen;
+    private selectedValue;
+    private searchTerm;
+    private options;
+    connectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    private parseOptions;
+    private setupClickOutside;
+    private toggleDropdown;
+    private selectOption;
+    private handleSearch;
+    private getFilteredOptions;
+    private getSelectedLabel;
+    render(): void;
+}
+export { UISelect };
+export type { SelectOption };

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

@@ -0,0 +1,30 @@
+import { BaseComponent } from '../../core/base-component';
+declare class AppSidebar extends BaseComponent {
+    private navItems;
+    private footerItems;
+    connectedCallback(): void;
+    set items(items: Array<{
+        icon: string;
+        label: string;
+        href: string;
+    }>);
+    get items(): Array<{
+        icon: string;
+        label: string;
+        href: string;
+    }>;
+    set footer(items: Array<{
+        icon: string;
+        label: string;
+        href: string;
+    }>);
+    get footer(): Array<{
+        icon: string;
+        label: string;
+        href: string;
+    }>;
+    private updateActiveState;
+    private renderIcon;
+    render(): void;
+}
+export { AppSidebar };

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

@@ -0,0 +1,31 @@
+import { BaseComponent } from '../../core/base-component';
+type StepperOrientation = 'horizontal' | 'vertical';
+type StepperSize = 'sm' | 'md' | 'lg';
+type StepState = 'complete' | 'active' | 'upcoming' | 'error' | 'warning';
+type StepperStep = {
+    title: string;
+    description?: string;
+    disabled?: boolean;
+    state?: StepState;
+};
+type StepChangeDetail = {
+    index: number;
+    step: StepperStep;
+    state: StepState;
+};
+declare class UIStepper extends BaseComponent {
+    private steps;
+    connectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    private parseSteps;
+    private getOrientation;
+    private getSize;
+    private getActiveIndex;
+    private resolveState;
+    private setActive;
+    private escapeHtml;
+    render(): void;
+}
+export { UIStepper };
+export type { StepperOrientation, StepperSize, StepperStep, StepChangeDetail, StepState };

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

@@ -0,0 +1,33 @@
+import { BaseComponent } from '../../core/base-component';
+import './button';
+export type TableColumn = {
+    key: string;
+    label: string;
+    align?: 'left' | 'center' | 'right';
+    visible?: boolean;
+    actions?: {
+        edit?: boolean;
+        delete?: boolean;
+    };
+};
+export type TableRow = Record<string, unknown>;
+type ActionEventDetail = {
+    row: TableRow;
+    rowIndex: number;
+};
+declare class UITable extends BaseComponent {
+    connectedCallback(): void;
+    private columns;
+    private rows;
+    set data(value: {
+        columns: TableColumn[];
+        rows: TableRow[];
+    });
+    get data(): {
+        columns: TableColumn[];
+        rows: TableRow[];
+    };
+    render(): void;
+}
+export { UITable };
+export type { ActionEventDetail };

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

@@ -0,0 +1,22 @@
+import { BaseComponent } from '../../core/base-component';
+type TabChangeDetail = {
+    id: string;
+};
+declare class UITabs extends BaseComponent {
+    private activeId;
+    private indicator;
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    private handleTabClick;
+    private setActive;
+    private getTabs;
+    private getPanels;
+    private getActiveId;
+    private syncTabs;
+    private updateIndicator;
+    render(): void;
+}
+export { UITabs };
+export type { TabChangeDetail };

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

@@ -0,0 +1,44 @@
+import { BaseComponent } from '../../core/base-component';
+type ToastType = 'success' | 'error' | 'warning' | 'info';
+type ToastPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';
+interface ToastConfig {
+    title: string;
+    description?: string;
+    type?: ToastType;
+    duration?: number;
+    closable?: boolean;
+}
+declare class UIToast extends BaseComponent {
+    private toasts;
+    private toastCounter;
+    connectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(): void;
+    private getPosition;
+    private getIcon;
+    /**
+     * Show a toast notification
+     * @param config Toast configuration
+     * @returns Toast ID for manual dismissal
+     */
+    show(config: ToastConfig): string;
+    /**
+     * Dismiss a specific toast
+     */
+    dismiss(toastId: string): void;
+    /**
+     * Dismiss all toasts
+     */
+    dismissAll(): void;
+    /**
+     * Convenience methods for different toast types
+     */
+    success(title: string, description?: string, duration?: number): string;
+    error(title: string, description?: string, duration?: number): string;
+    warning(title: string, description?: string, duration?: number): string;
+    info(title: string, description?: string, duration?: number): string;
+    private escapeHtml;
+    render(): void;
+}
+export { UIToast };
+export type { ToastType, ToastPosition, ToastConfig };

package/dist/shared/components/top-bar.d.ts

@@ -0,0 +1,11 @@
+import { BaseComponent } from '../../core/base-component';
+declare class UITopBar extends BaseComponent {
+    connectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(): void;
+    private getTitle;
+    private getSubtitle;
+    private getBgColor;
+    render(): void;
+}
+export { UITopBar };

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

@@ -0,0 +1,22 @@
+import { BaseComponent } from '../../core/base-component';
+declare class UIUpload extends BaseComponent {
+    private files;
+    private isDragging;
+    connectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(): void;
+    get value(): string;
+    get filesValue(): File[];
+    set filesValue(files: File[]);
+    clear(): void;
+    private isDisabled;
+    private isMultiple;
+    private getAccept;
+    private getLabel;
+    private getHelper;
+    private setFiles;
+    private formatSize;
+    private syncInputFiles;
+    render(): void;
+}
+export { UIUpload };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@diniz/webcomponents",
-  "version": "1.1.9",
+  "version": "1.2.0",
   "description": "Lightweight web components library",
   "type": "module",
   "main": "./dist/webcomponents.umd.js",
@@ -21,7 +21,7 @@
     "dev": "vite",
     "build": "vite build",
     "build:prod": "vite build --mode production",
-    "build:lib": "tsc -p tsconfig.build.json && vite build --config vite.lib.config.ts && node scripts/copy-lib-assets.mjs",
+    "build:lib": "vite build --config vite.lib.config.ts && tsc -p tsconfig.build.json && node scripts/copy-lib-assets.mjs",
     "preview": "vite preview",
     "preview:prod": "vite preview --port 4173"
   },