@arvea/components 0.0.1 → 0.0.3

package/dist/arvea-sidebar-DWEHmLOH.d.ts

@@ -0,0 +1,2956 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement, PropertyValues, TemplateResult, nothing } from 'lit';
+
+/**
+ * @file icon.types.ts
+ * @description All available icon names, sizes and variants.
+ */
+type IconName = 'user' | 'layout-bottom' | 'wifi-02' | 'setting-02' | 'lock' | 'globe' | 'chevron-down' | 'fingerprint' | 'flag' | 'map-pin' | 'mail' | 'id-card' | 'check' | 'eye' | 'eye-slash' | 'plus' | 'shopping-bag' | 'gift' | 'ticket' | 'shopping-cart' | 'map' | 'file-text' | 'truck' | 'refresh-cw' | 'archive' | 'tag' | 'package' | 'layers' | 'grid' | 'zap' | 'file' | 'shield' | 'chevron-right' | 'bell' | 'settings' | 'arrow-right' | 'google' | 'log-out' | 'home' | 'clipboard';
+type IconSize = 'sm' | 'md' | 'lg' | 'xl';
+
+/**
+ * @element arvea-icon
+ *
+ * @prop {IconName}  name    - Icon name e.g. 'user', 'view'
+ * @prop {IconSize}  size    - 'sm' | 'md' | 'lg' | 'xl'
+ * @prop {boolean}   outline - true = outline, false = filled
+ * @prop {string}    color   - any CSS color value
+ *
+ * @example
+ * <arvea-icon name="user" size="md" outline></arvea-icon>
+ * <arvea-icon name="user" size="lg"></arvea-icon>
+ */
+declare class ArveaIcon extends LitElement {
+    static styles: lit.CSSResult;
+    name: IconName;
+    size: IconSize;
+    outline: boolean;
+    color?: string;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'arvea-icon': ArveaIcon;
+    }
+}
+
+type ButtonVariant = 'default' | 'outline' | 'secondary' | 'danger' | 'link';
+type ArveaButtonSize = 'sm' | 'default' | 'lg' | 'icon';
+type ArveaButtonShape = 'default' | 'pill';
+interface ArveaButtonProps {
+    variant?: ButtonVariant;
+    size?: ArveaButtonSize;
+    shape?: ArveaButtonShape;
+    disabled?: boolean;
+    loading?: boolean;
+    type?: 'button' | 'submit' | 'reset';
+}
+
+/**
+ * @element arvea-button
+ *
+ * @prop {ButtonVariant}   variant  - 'default' | 'outline' | 'secondary' | 'danger' | 'link'
+ * @prop {ArveaButtonSize} size     - 'sm' | 'default' | 'lg' | 'icon'
+ * @prop {boolean}         disabled - disables the button
+ * @prop {boolean}         loading  - shows a spinner (ignored for link variant)
+ * @prop {string}          type     - 'button' | 'submit' | 'reset'
+ *
+ * @slot - Default slot for button content (text or icon)
+ *
+ * @example
+ * <arvea-button variant="default" size="default">Button</arvea-button>
+ * <arvea-button variant="danger" size="sm">Delete</arvea-button>
+ * <arvea-button variant="outline" disabled>Disabled</arvea-button>
+ * <arvea-button variant="default" loading>Loading...</arvea-button>
+ * <arvea-button variant="default" size="icon"><arvea-icon name="user"></arvea-icon></arvea-button>
+ */
+declare class ArveaButton extends LitElement {
+    static styles: lit.CSSResult[];
+    variant: ButtonVariant;
+    size: ArveaButtonSize;
+    shape: ArveaButtonShape;
+    disabled: boolean;
+    type: 'button' | 'submit' | 'reset';
+    loading: boolean;
+    fullWidth: boolean;
+    private get _isLoading();
+    private _handleClick;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'arvea-button': ArveaButton;
+    }
+}
+
+type BadgeVariant = 'success' | 'error' | 'warning' | 'info' | 'pending' | 'active' | 'inactive' | 'default' | 'destructive' | 'secondary' | 'outline';
+interface ArveaBadgeProps {
+    variant?: BadgeVariant;
+    label?: string;
+    color?: string;
+    textColor?: string;
+    icon?: string;
+    noBg?: boolean;
+    selected?: boolean;
+}
+
+/**
+ * @element arvea-badge
+ *
+ * @prop {BadgeVariant} variant   - 'success' | 'error' | 'warning' | 'info' | 'pending' | 'active' | 'inactive'
+ * @prop {string}       label     - Text label displayed in the badge
+ * @prop {string}       color     - Custom background color (overrides variant color)
+ * @prop {string}       textColor - Custom text/icon color (overrides variant color)
+ * @prop {string}       icon      - Icon name from arvea-icon (overrides the variant icon)
+ * @prop {boolean}      noBg      - Removes background and padding for a transparent look
+ *
+ * @example
+ * <arvea-badge variant="success" label="Vérifié"></arvea-badge>
+ * <arvea-badge icon="check-circle" label="Vérifié" no-bg text-color="#10b981"></arvea-badge>
+ * <arvea-badge label="Custom" color="#e0f2fe" text-color="#0369a1"></arvea-badge>
+ */
+declare class ArveaBadge extends LitElement {
+    static styles: lit.CSSResult[];
+    variant: BadgeVariant;
+    label: string;
+    color: string;
+    textColor: string;
+    icon: string;
+    noBg: boolean;
+    hideIcon: boolean;
+    selected: boolean;
+    private static STATUS_VARIANTS;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'arvea-badge': ArveaBadge;
+    }
+}
+
+/**
+ * @element arvea-toggle
+ *
+ * @prop {boolean} checked  - Whether the toggle is checked
+ * @prop {boolean} disabled - Whether the toggle is disabled
+ * @prop {string}  label    - Optional label next to the toggle
+ *
+ * @fires arvea-change - Fired when the toggle is clicked with detail: { checked: boolean }
+ *
+ * @example
+ * <arvea-toggle></arvea-toggle>
+ * <arvea-toggle checked></arvea-toggle>
+ * <arvea-toggle disabled></arvea-toggle>
+ * <arvea-toggle label="Dark mode"></arvea-toggle>
+ */
+declare class ArveaToggle extends LitElement {
+    static styles: lit.CSSResult[];
+    checked: boolean;
+    disabled: boolean;
+    label: string;
+    private _handleClick;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'arvea-toggle': ArveaToggle;
+    }
+}
+
+/**
+ * @element arvea-checkbox
+ *
+ * @prop {boolean} checked        - Whether the checkbox is checked
+ * @prop {boolean} indeterminate  - Tri-state mixed state (overrides check visual)
+ * @prop {boolean} disabled       - Whether the checkbox is disabled
+ * @prop {string}  label          - Optional label next to the checkbox
+ *
+ * @fires arvea-change - { detail: { checked, indeterminate } }
+ *
+ * @example
+ * <arvea-checkbox></arvea-checkbox>
+ * <arvea-checkbox checked></arvea-checkbox>
+ * <arvea-checkbox indeterminate></arvea-checkbox>
+ */
+declare class ArveaCheckbox extends LitElement {
+    static styles: lit.CSSResult[];
+    checked: boolean;
+    indeterminate: boolean;
+    disabled: boolean;
+    label: string;
+    private _ariaChecked;
+    private _toggle;
+    private _handleClick;
+    private _handleKey;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'arvea-checkbox': ArveaCheckbox;
+    }
+}
+
+/**
+ * @element arvea-radio
+ *
+ * @prop {boolean} checked  - Whether the radio is checked
+ * @prop {boolean} disabled - Whether the radio is disabled
+ * @prop {string}  label    - Optional label next to the radio
+ * @prop {string}  value    - Value of the radio button
+ * @prop {string}  name     - Name of the radio group
+ *
+ * @example
+ * <arvea-radio label="Option 1" name="group" value="1"></arvea-radio>
+ * <arvea-radio label="Option 2" name="group" value="2" checked></arvea-radio>
+ * <arvea-radio label="Option 3" name="group" value="3" disabled></arvea-radio>
+ */
+declare class ArveaRadio extends LitElement {
+    static styles: lit.CSSResult[];
+    checked: boolean;
+    disabled: boolean;
+    label: string;
+    private _handleClick;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'arvea-radio': ArveaRadio;
+    }
+}
+
+/**
+ * @element arvea-slider
+ *
+ * @prop {number}  value         - Current value of the slider
+ * @prop {number}  min           - Minimum value (default: 0)
+ * @prop {number}  max           - Maximum value (default: 100)
+ * @prop {number}  step          - Step increment (default: 1)
+ * @prop {boolean} disabled      - Disables the slider
+ * @prop {string}  label         - Visible label above the track
+ * @prop {boolean} showValue     - Shows the current value in the head row
+ * @prop {string}  valuePrefix   - Prepended to the displayed value (e.g. '$')
+ * @prop {string}  valueSuffix   - Appended to the displayed value (e.g. '%')
+ * @prop {number}  tickStep      - When >0, draws tick marks at every N units
+ * @prop {string}  name          - Form name
+ *
+ * @fires arvea-input  - Live updates while dragging (detail: { value })
+ * @fires arvea-change - When the value is committed (detail: { value })
+ * @fires change       - Back-compat: dispatched alongside arvea-input
+ *
+ * @example
+ *   <arvea-slider label="Volume" show-value value-suffix="%"></arvea-slider>
+ *   <arvea-slider min="-50" max="50" step="5" tick-step="10"></arvea-slider>
+ */
+declare class ArveaSlider extends LitElement {
+    static styles: lit.CSSResult[];
+    value: number;
+    min: number;
+    max: number;
+    step: number;
+    disabled: boolean;
+    label: string;
+    showValue: boolean;
+    valuePrefix: string;
+    valueSuffix: string;
+    tickStep: number;
+    name: string;
+    private _focused;
+    private get _percentage();
+    private _ticks;
+    private _tickPercent;
+    private _formatValue;
+    private _handleInput;
+    private _handleChange;
+    private _handleFocus;
+    private _handleBlur;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'arvea-slider': ArveaSlider;
+    }
+}
+
+type ArveaInputType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search';
+type ArveaInputTextAlign = 'left' | 'right';
+type ArveaInputVariant = 'default' | 'underline';
+interface CountryOption {
+    name: string;
+    flag: string;
+    dialCode: string;
+}
+interface ArveaInputProps {
+    label?: string;
+    hideLabel?: boolean;
+    type?: ArveaInputType;
+    variant?: ArveaInputVariant;
+    name?: string;
+    value?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    hasWarning?: boolean;
+    showValid?: boolean;
+    validationHint?: string;
+    optionalLabel?: string;
+    textAlign?: ArveaInputTextAlign;
+    flagSrc?: string;
+    dialCode?: string;
+    hintEnd?: string;
+}
+
+/**
+ * @element arvea-input
+ *
+ * @prop {string}  label         - Visible label for the input
+ * @prop {boolean} hideLabel     - Visually hides the label (still accessible)
+ * @prop {string}  type          - text | email | password | number | tel | url | search
+ * @prop {string}  name          - Form name
+ * @prop {string}  value         - Current value
+ * @prop {string}  placeholder   - Placeholder text
+ * @prop {boolean} disabled
+ * @prop {boolean} readonly
+ * @prop {boolean} required
+ * @prop {boolean} invalid       - Triggers error styles
+ * @prop {boolean} hasWarning    - Triggers warning styles
+ * @prop {boolean} showValid     - Triggers valid styles
+ * @prop {string}  validationHint - Helper / error message below the input
+ * @prop {string}  optionalLabel  - Text shown next to label when not required
+ * @prop {'left'|'right'} textAlign
+ * @prop {CountryOption[]} countries - List of country options for phone prefix dropdown
+ *
+ * @slot prefix - Left-aligned content (icon)
+ * @slot suffix - Right-aligned content (icon)
+ *
+ * @fires arvea-input          - When value changes (detail: { value })
+ * @fires arvea-change         - When the input is committed (detail: { value })
+ * @fires arvea-country-change - When a country is selected (detail: CountryOption)
+ */
+declare class ArveaInput extends LitElement {
+    static styles: lit.CSSResult[];
+    label: string;
+    hideLabel: boolean;
+    type: ArveaInputType;
+    variant: ArveaInputVariant;
+    name: string;
+    value: string;
+    placeholder: string;
+    disabled: boolean;
+    readonly: boolean;
+    required: boolean;
+    invalid: boolean;
+    hasWarning: boolean;
+    showValid: boolean;
+    validationHint: string;
+    optionalLabel: string;
+    textAlign: ArveaInputTextAlign;
+    flagSrc: string;
+    dialCode: string;
+    hintEnd: string;
+    digitsOnly: boolean;
+    countries: CountryOption[];
+    private _open;
+    private _input;
+    private _hasPrefix;
+    private _hasSuffix;
+    private _closeHandler;
+    private _onInput;
+    private _onChange;
+    private _onSlotChange;
+    /** Focuses the inner input. */
+    focus(): void;
+    private _clear;
+    private _toggleDropdown;
+    private _removeCloseHandler;
+    private _selectCountry;
+    disconnectedCallback(): void;
+    private _renderAutoIcon;
+    private _renderCountryDropdown;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'arvea-input': ArveaInput;
+    }
+}
+
+/**
+ * @file countries.ts
+ * @description Full country dataset for arvea-phone-number.
+ *
+ * - `iso2`     : lowercase ISO 3166-1 alpha-2 code (used for the flag image).
+ * - `name`     : English country name.
+ * - `dialCode` : international calling code (without the leading "+").
+ * - `maxLength`: maximum national significant number length (digits, excluding
+ *                the dial code) — based on intl-tel-input / libphonenumber
+ *                metadata. e.g. Tunisia = 8, Algeria = 9.
+ *
+ * Flags are served from https://flagcdn.com/w20/<iso2>.png (same source the
+ * rest of the kit already uses).
+ */
+interface PhoneCountry {
+    iso2: string;
+    name: string;
+    dialCode: string;
+    /** Maximum national number length (digits). Used as input cap and, when minLength is absent, as the exact valid length. */
+    maxLength: number;
+    /** Minimum national number length (digits). Only set for countries where valid numbers are shorter than maxLength. */
+    minLength?: number;
+}
+/** Supported display languages for country names. */
+type PhoneLanguage = 'en' | 'fr' | 'ar';
+declare const flagUrl: (iso2: string) => string;
+declare const COUNTRIES: PhoneCountry[];
+/** Look up a country by its ISO2 code (case-insensitive). */
+declare const findCountry: (iso2: string) => PhoneCountry | undefined;
+/**
+ * Resolve a country from a full name (e.g. "Tunisia", "tunisia") or, as a
+ * fallback, an ISO2 code (e.g. "tn"). Case-insensitive.
+ */
+declare const resolveCountry: (value: string) => PhoneCountry | undefined;
+
+/**
+ * @element arvea-phone-number
+ *
+ * International phone number input: selectable country flag + dial code with a
+ * searchable dropdown of all countries, and a number field whose length is
+ * capped to the selected country's national number length.
+ *
+ * @prop {string}  country            - Selected country: ISO2 code or full name (stored/reflected as ISO2; default 'tn')
+ * @prop {string}  language           - Country-name display language: 'en' | 'fr' | 'ar' (default 'en')
+ * @prop {string}  value              - National number digits (no dial code)
+ * @prop {string}  label              - Field label
+ * @prop {string}  placeholder        - Number input placeholder
+ * @prop {string}  search-placeholder - Dropdown search placeholder
+ * @prop {boolean} disabled
+ * @prop {boolean} required
+ * @prop {boolean} invalid            - Reflected; forces the error style
+ * @prop {string}  validation-hint    - Hint text shown under the field
+ *
+ * @fires arvea-input          { value }                          - on every keystroke
+ * @fires arvea-change         { iso2, dialCode, nationalNumber, e164, valid, country }
+ * @fires arvea-country-change { country }                        - when the country changes
+ */
+declare class ArveaPhoneNumber extends LitElement {
+    static styles: lit.CSSResult[];
+    country: string;
+    language: PhoneLanguage;
+    value: string;
+    label: string;
+    placeholder: string;
+    searchPlaceholder: string;
+    noResultsText: string;
+    disabled: boolean;
+    required: boolean;
+    invalid: boolean;
+    validationHint: string;
+    name: string;
+    /**
+     * Countries pinned to the top of the dropdown (by name or ISO2). Accepts a
+     * comma-separated attribute (`preferred-countries="tn,dz,..."`) or an array
+     * property. Defaults to a North/West-Africa suggestion set.
+     */
+    preferredCountries: string[];
+    private _open;
+    private _query;
+    private _activeIndex;
+    private _searchInput?;
+    private _prefixBtn?;
+    private _onDocPointer;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private get _country();
+    /** Country name in the active language (English fallback). */
+    private _label;
+    /** Is the active language right-to-left? */
+    private get _rtl();
+    private static readonly _i18n;
+    private get _searchPlaceholder();
+    private get _noResultsText();
+    /**
+     * Full list localized and re-sorted for the active language, cached so the
+     * (relatively expensive) localize + `Intl.Collator` sort runs once per
+     * language rather than on every render.
+     */
+    private _localizedCache?;
+    private get _localizedCountries();
+    private get _filtered();
+    /** Resolved, de-duplicated preferred countries. */
+    private get _preferred();
+    /** Flat list as rendered/navigated: preferred-first when not searching. */
+    private get _visibleList();
+    /** Digits-only view of `value` — guards against programmatic assignment of formatted strings. */
+    private get _digits();
+    /** True when the number length is within the country's valid range. */
+    get valid(): boolean;
+    get e164(): string;
+    /** Insert spaces into the national number per the country's group pattern. */
+    private _formatNational;
+    private _onNumberInput;
+    private _emitChange;
+    private _toggle;
+    private _openDropdown;
+    private _close;
+    private _onSearch;
+    private _selectCountry;
+    private _onSearchKey;
+    render(): lit_html.TemplateResult<1>;
+    private _renderPopup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'arvea-phone-number': ArveaPhoneNumber;
+    }
+}
+
+/**
+ * @element arvea-textarea
+ *
+ * Multi-line text input with label, validation, and optional auto-resize.
+ *
+ * @fires arvea-input  - On every keystroke (detail: { value })
+ * @fires arvea-change - On commit (detail: { value })
+ */
+declare class ArveaTextarea extends LitElement {
+    static styles: lit.CSSResult[];
+    label: string;
+    hideLabel: boolean;
+    name: string;
+    value: string;
+    placeholder: string;
+    disabled: boolean;
+    readonly: boolean;
+    required: boolean;
+    invalid: boolean;
+    hasWarning: boolean;
+    showValid: boolean;
+    validationHint: string;
+    optionalLabel: string;
+    rows: number;
+    maxLength?: number;
+    autoResize: boolean;
+    private _ta;
+    focus(): void;
+    private _resize;
+    private _onInput;
+    private _onChange;
+    updated(changed: PropertyValues): void;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'arvea-textarea': ArveaTextarea;
+    }
+}
+
+interface ArveaSelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    group?: string;
+    description?: string;
+    /** Optional flag/leading image URL shown before the label in the trigger and options. */
+    flagSrc?: string;
+    meta?: unknown;
+}
+type ArveaSelectFetchFn = (query: string) => Promise<ArveaSelectOption[]>;
+type ArveaSelectFilterFn = (query: string, option: ArveaSelectOption) => boolean;
+type ArveaSelectGroupBy = string | ((option: ArveaSelectOption) => string);
+interface ArveaSelectProps {
+    label?: string;
+    hideLabel?: boolean;
+    name?: string;
+    value?: string | string[];
+    placeholder?: string;
+    options?: ArveaSelectOption[];
+    disabled?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    validationHint?: string;
+    optionalLabel?: string;
+    searchable?: boolean;
+    multiple?: boolean;
+    clearable?: boolean;
+    loading?: boolean;
+    fetchOptions?: ArveaSelectFetchFn;
+    debounceMs?: number;
+    noResultsText?: string;
+    loadingText?: string;
+    maxTagCount?: number;
+    groupBy?: ArveaSelectGroupBy;
+    createable?: boolean;
+    filterFn?: ArveaSelectFilterFn;
+    open?: boolean;
+}
+
+interface OptionState {
+    selected: boolean;
+    active: boolean;
+}
+/**
+ * @element arvea-select
+ *
+ * Select2-style combobox: searchable, multi-select, async, grouped, createable,
+ * keyboard navigable, with custom item rendering.
+ *
+ * @fires arvea-change      { value, selectedOptions }
+ * @fires arvea-select-open
+ * @fires arvea-select-close
+ * @fires arvea-search      { query }
+ * @fires arvea-fetch-error { error, query }
+ * @fires arvea-create      { label, value }
+ * @fires arvea-clear
+ */
+declare class ArveaSelect extends LitElement {
+    static styles: lit.CSSResult[];
+    static formAssociated: boolean;
+    label: string;
+    hideLabel: boolean;
+    name: string;
+    value: string | string[];
+    placeholder: string;
+    options: ArveaSelectOption[];
+    disabled: boolean;
+    required: boolean;
+    invalid: boolean;
+    validationHint: string;
+    optionalLabel: string;
+    /** Leading flag/image shown in the trigger (e.g. default country flag for the placeholder state). */
+    flagSrc: string;
+    searchable: boolean;
+    multiple: boolean;
+    clearable: boolean;
+    loading: boolean;
+    fetchOptions?: ArveaSelectFetchFn;
+    debounceMs: number;
+    noResultsText: string;
+    loadingText: string;
+    maxTagCount: number;
+    groupBy?: ArveaSelectGroupBy;
+    createable: boolean;
+    filterFn?: ArveaSelectFilterFn;
+    open: boolean;
+    size: 'sm' | 'md' | 'lg';
+    renderOption?: (option: ArveaSelectOption, state: OptionState) => TemplateResult;
+    private _query;
+    private _activeIndex;
+    private _asyncResults;
+    private _fetchError;
+    private _popupEl?;
+    private _popupSearchInput?;
+    private _searchInput?;
+    private _internals?;
+    private _debounceTimer?;
+    private _abort?;
+    private _onDocPointer;
+    private _onWinReflow;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    get form(): HTMLFormElement | null;
+    get validity(): ValidityState | undefined;
+    get validationMessage(): string;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    private get _valueArray();
+    private get _allOptions();
+    private get _filtered();
+    private get _groups();
+    private get _flatVisible();
+    private readonly _knownOptions;
+    private get _selectedOptions();
+    private _onTriggerPointer;
+    private _focusSearchSoon;
+    private _onKeydown;
+    private _onSearchInput;
+    private _scheduleFetch;
+    private _runFetch;
+    private _firstSelectable;
+    private _lastSelectable;
+    private _moveActive;
+    private _toggleOption;
+    private _createTag;
+    private _setValue;
+    private _syncFormState;
+    private _clear;
+    private _open;
+    private _close;
+    private _afterOpen;
+    private _flatParent;
+    private _findScrollBounds;
+    private _positionPopup;
+    render(): TemplateResult<1>;
+    private _renderTrigger;
+    private _renderFlag;
+    private _renderPopup;
+    private _renderGroup;
+    private _iconChevron;
+    private _iconX;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'arvea-select': ArveaSelect;
+    }
+}
+
+/**
+ * @element arvea-tag
+ *
+ * @prop {boolean} selected   - Renders selected styles
+ * @prop {boolean} clickable  - Renders as a <button> and dispatches click
+ * @prop {boolean} removable  - Renders a close button on the right
+ * @prop {boolean} disabled
+ *
+ * @slot prefix  - Leading icon
+ * @slot         - Default slot for tag text
+ * @slot suffix  - Trailing icon
+ *
+ * @fires arvea-remove - When the remove button is clicked
+ */
+declare class ArveaTag extends LitElement {
+    static styles: lit.CSSResult[];
+    selected: boolean;
+    clickable: boolean;
+    removable: boolean;
+    disabled: boolean;
+    private _onRemove;
+    private _renderInner;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'arvea-tag': ArveaTag;
+    }
+}
+
+type ArveaSpinnerSize = 'sm' | 'md' | 'lg';
+interface ArveaSpinnerProps {
+    size?: ArveaSpinnerSize;
+    label?: string;
+}
+
+/**
+ * @element arvea-spinner
+ *
+ * @prop {'sm'|'md'|'lg'} size  - Spinner size (default: 'md')
+ * @prop {string}         label - Accessible loading label (default: 'Loading')
+ */
+declare class ArveaSpinner extends LitElement {
+    static styles: lit.CSSResult[];
+    size: ArveaSpinnerSize;
+    label: string;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'arvea-spinner': ArveaSpinner;
+    }
+}
+
+type ArveaTooltipPlacement = 'top' | 'right' | 'bottom' | 'left';
+interface ArveaTooltipProps {
+    content?: string;
+    placement?: ArveaTooltipPlacement;
+    open?: boolean;
+    disabled?: boolean;
+    delay?: number;
+}
+
+/**
+ * @element arvea-tooltip
+ *
+ * Wrap a trigger element with this component to display a tooltip on
+ * hover / focus.
+ *
+ * @prop {string}                 content    - Tooltip text
+ * @prop {'top'|'right'|'bottom'|'left'} placement - Default 'top'
+ * @prop {boolean}                open       - Force open
+ * @prop {boolean}                disabled   - Disables tooltip
+ * @prop {number}                 delay      - Show delay in ms (default 100)
+ *
+ * @slot - The trigger element
+ * @slot content - Rich content alternative to the `content` attribute
+ */
+declare class ArveaTooltip extends LitElement {
+    static styles: lit.CSSResult[];
+    content: string;
+    placement: ArveaTooltipPlacement;
+    open: boolean;
+    disabled: boolean;
+    delay: number;
+    private _showTimer?;
+    private _hideTimer?;
+    private _id;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _show;
+    private _hide;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'arvea-tooltip': ArveaTooltip;
+    }
+}
+
+type ArveaCardVariant = 'default' | 'elevated' | 'outline';
+interface ArveaCardProps {
+    variant?: ArveaCardVariant;
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+    interactive?: boolean;
+}
+
+/**
+ * @element arvea-card
+ *
+ * Generic container with three variants and four padding options.
+ *
+ * @prop {'default'|'elevated'|'outline'} variant
+ * @prop {'none'|'sm'|'md'|'lg'}          padding
+ * @prop {boolean}                        interactive  - hover/focus styles
+ *
+ * @slot header
+ * @slot - main content
+ * @slot footer
+ */
+declare class ArveaCard extends LitElement {
+    static styles: lit.CSSResult[];
+    variant: ArveaCardVariant;
+    padding: 'none' | 'sm' | 'md' | 'lg';
+    interactive: boolean;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'arvea-card': ArveaCard;
+    }
+}
+
+/**
+ * @element arvea-media-card
+ *
+ * Full-bleed image card with an uppercase label and a clickable arrow button.
+ *
+ * @prop {'sm'|'md'|'lg'|'xl'}              size           - Card height (default: md)
+ * @prop {'sm'|'md'|'lg'|'full'}            radius         - Border-radius (default: md)
+ * @prop {'none'|'light'|'medium'|'dark'}   overlay        - Gradient darkness (default: medium)
+ * @prop {'bottom'|'top'}                   label-position - Where the label & arrow sit (default: bottom)
+ * @prop {string}                           src            - Background image URL
+ * @prop {string}                           label          - Category / title text (displayed uppercase)
+ * @prop {string}                           href           - URL the arrow button navigates to
+ * @prop {string}                           target         - Link target (default: _blank)
+ *
+ * @fires arvea-media-card-click - { href } fired when the arrow button is clicked
+ */
+declare class ArveaMediaCard extends LitElement {
+    static styles: lit.CSSResult[];
+    src: string;
+    label: string;
+    href: string;
+    target: string;
+    size: 'sm' | 'md' | 'lg' | 'xl';
+    radius: 'sm' | 'md' | 'lg' | 'full';
+    overlay: 'none' | 'light' | 'medium' | 'dark';
+    labelPosition: 'bottom' | 'top';
+    private _navigate;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'arvea-media-card': ArveaMediaCard;
+    }
+}
+
+/**
+ * @element arvea-product-card
+ *
+ * E-commerce product card with image, add-to-cart button, name and price.
+ *
+ * @prop {string} src        - Product image URL
+ * @prop {string} name       - Product name (displayed uppercase)
+ * @prop {string} price      - Formatted price (e.g. "16,900")
+ * @prop {string} currency   - Currency label shown after the price (e.g. "TND")
+ * @prop {string} alt        - Alt text for the product image (defaults to name)
+ * @prop {string} badge      - Optional badge text (e.g. "BIENTÔT DISPONIBLE")
+ * @prop {string} badge-color - Badge background color (default: #e53935)
+ *
+ * @fires arvea-product-card-add - Fired when the cart button is clicked
+ *
+ * @csspart card          - The outer wrapper
+ * @csspart image-wrapper - The image container
+ * @csspart image         - The <img> element
+ * @csspart badge         - The badge label
+ * @csspart cart-btn      - The circular add-to-cart button
+ * @csspart info          - The text section below the image
+ * @csspart name          - The product name element
+ * @csspart price         - The price element
+ */
+declare class ArveaProductCard extends LitElement {
+    static styles: lit.CSSResult[];
+    src: string;
+    name: string;
+    price: string;
+    currency: string;
+    alt: string;
+    badge: string;
+    badgeColor: string;
+    private _onAdd;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'arvea-product-card': ArveaProductCard;
+    }
+}
+
+type ArveaActionButtonSize = 'default' | 'sm' | 'md' | 'lg';
+type ArveaActionButtonVariant = 'validate' | 'edit' | 'payment' | 'order' | 'price' | 'delete' | 'view' | 'pdf' | 'pause' | 'download' | 'upload' | 'copy' | 'print' | 'settings' | 'archive' | 'restore';
+
+/**
+ * @element arvea-action-button
+ *
+ * Icon action button with a configurable background color, icon color,
+ * and a tooltip label that appears on hover.
+ *
+ * @prop {ArveaActionButtonVariant} variant  - Preset that sets icon + colors automatically
+ * @prop {string}                   icon     - SVG markup (overrides variant icon)
+ * @prop {string}                   label    - Tooltip text shown on hover (also used as aria-label)
+ * @prop {string}                   bg-color - Background color (overrides variant color)
+ * @prop {string}                   color    - Icon/foreground color (overrides variant color)
+ * @prop {'sm'|'md'|'lg'}           size     - Button size (default: md)
+ * @prop {boolean}                  disabled - Disables the button
+ *
+ * @fires arvea-action-click - Fired on click — detail: { label }
+ *
+ * @csspart button  - The <button> element
+ * @csspart icon    - The icon wrapper
+ * @csspart tooltip - The tooltip label
+ */
+declare class ArveaActionButton extends LitElement {
+    static styles: lit.CSSResult[];
+    variant: ArveaActionButtonVariant | '';
+    icon: string;
+    label: string;
+    bgColor: string;
+    color: string;
+    size: ArveaActionButtonSize;
+    disabled: boolean;
+    private get _resolved();
+    private _onClick;
+    private get _buttonStyle();
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'arvea-action-button': ArveaActionButton;
+    }
+}
+
+type ArveaAvatarSize = 'sm' | 'md' | 'lg';
+type ArveaAvatarVariant = 'identity' | 'object';
+interface ArveaAvatarProps {
+    src?: string;
+    alt?: string;
+    initials?: string;
+    size?: ArveaAvatarSize;
+    variant?: ArveaAvatarVariant;
+}
+
+/**
+ * @element arvea-avatar
+ *
+ * @prop {string}                src      - Image URL
+ * @prop {string}                alt      - Image alt text
+ * @prop {string}                initials - Fallback initials (1-2 chars)
+ * @prop {'sm'|'md'|'lg'}        size     - default 'md'
+ * @prop {'identity'|'object'}   variant  - 'identity' = round, 'object' = square
+ */
+declare class ArveaAvatar extends LitElement {
+    static styles: lit.CSSResult[];
+    src: string;
+    alt: string;
+    initials: string;
+    size: ArveaAvatarSize;
+    variant: ArveaAvatarVariant;
+    private _imageFailed;
+    private _onError;
+    private _formatInitials;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'arvea-avatar': ArveaAvatar;
+    }
+}
+
+type ArveaProgressSize = 'sm' | 'md' | 'lg';
+interface ArveaProgressBarProps {
+    value?: number;
+    max?: number;
+    size?: ArveaProgressSize;
+    label?: string;
+    showValue?: boolean;
+    indeterminate?: boolean;
+}
+
+/**
+ * @element arvea-progress-bar
+ *
+ * @prop {number}  value         - current value (0..max)
+ * @prop {number}  max           - max value (default 100)
+ * @prop {'sm'|'md'|'lg'} size   - default 'md'
+ * @prop {string}  label         - label shown above the bar
+ * @prop {boolean} showValue     - show percentage on the right
+ * @prop {boolean} indeterminate - looping animation, ignores value
+ */
+declare class ArveaProgressBar extends LitElement {
+    static styles: lit.CSSResult[];
+    value: number;
+    max: number;
+    size: ArveaProgressSize;
+    label: string;
+    showValue: boolean;
+    indeterminate: boolean;
+    private get _percent();
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'arvea-progress-bar': ArveaProgressBar;
+    }
+}
+
+type ArveaSkeletonShape = 'rect' | 'circle' | 'text' | 'pill';
+interface ArveaSkeletonProps {
+    shape?: ArveaSkeletonShape;
+    width?: string;
+    height?: string;
+    radius?: string;
+    lines?: number;
+    loading?: boolean;
+}
+
+/**
+ * @element arvea-skeleton
+ *
+ * A shimmer placeholder used while content is loading.
+ *
+ * @prop {'rect'|'circle'|'text'|'pill'} shape   - default 'rect'
+ * @prop {string} width   - CSS width (e.g. '120px', '60%')
+ * @prop {string} height  - CSS height
+ * @prop {string} radius  - Custom border-radius
+ * @prop {number} lines   - When >0, renders a stack of text lines
+ * @prop {boolean} loading - When false, renders the default slot instead
+ *
+ * @slot - Real content rendered when loading=false
+ *
+ * @example
+ *  <arvea-skeleton width="200px" height="16px"></arvea-skeleton>
+ *  <arvea-skeleton shape="circle" width="40px" height="40px"></arvea-skeleton>
+ *  <arvea-skeleton lines="3"></arvea-skeleton>
+ */
+declare class ArveaSkeleton extends LitElement {
+    static styles: lit.CSSResult[];
+    shape: ArveaSkeletonShape;
+    width: string;
+    height: string;
+    radius: string;
+    lines: number;
+    loading: boolean;
+    private _hostStyle;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'arvea-skeleton': ArveaSkeleton;
+    }
+}
+
+type ArveaSkeletonCardPreset = 'article' | 'media' | 'profile' | 'product' | 'list';
+type ArveaSkeletonCardVariant = 'default' | 'elevated' | 'outline';
+interface ArveaSkeletonCardProps {
+    preset?: ArveaSkeletonCardPreset;
+    variant?: ArveaSkeletonCardVariant;
+    lines?: number;
+    loading?: boolean;
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+}
+
+/**
+ * @element arvea-skeleton-card
+ *
+ * A shimmering card placeholder with several common layout presets.
+ * Renders slotted real content once `loading` is false.
+ *
+ * @prop {'article'|'media'|'profile'|'product'|'list'} preset  - default 'article'
+ * @prop {'default'|'elevated'|'outline'}              variant - default 'default'
+ * @prop {'none'|'sm'|'md'|'lg'}                       padding - default 'md'
+ * @prop {number}  lines    - number of text lines (article preset)
+ * @prop {boolean} loading  - when false, renders slotted content
+ *
+ * @slot - Real content rendered when loading=false
+ *
+ * @example
+ *   <arvea-skeleton-card preset="media" ?loading=${isLoading}>
+ *     <h3>Loaded!</h3><p>Real content here.</p>
+ *   </arvea-skeleton-card>
+ */
+declare class ArveaSkeletonCard extends LitElement {
+    static styles: lit.CSSResult[];
+    preset: ArveaSkeletonCardPreset;
+    variant: ArveaSkeletonCardVariant;
+    padding: 'none' | 'sm' | 'md' | 'lg';
+    lines: number;
+    loading: boolean;
+    private _article;
+    private _media;
+    private _profile;
+    private _product;
+    private _list;
+    private _renderPreset;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'arvea-skeleton-card': ArveaSkeletonCard;
+    }
+}
+
+type ArveaCarouselArrowPosition = 'inside' | 'outside';
+interface ArveaCarouselProps {
+    index?: number;
+    slidesPerView?: number;
+    gap?: string;
+    loop?: boolean;
+    autoplay?: boolean;
+    interval?: number;
+    showArrows?: boolean;
+    showDots?: boolean;
+    arrowPosition?: ArveaCarouselArrowPosition;
+    ariaLabel?: string;
+}
+
+/**
+ * @element arvea-carousel
+ *
+ * Slot any number of child elements as slides. The carousel handles
+ * navigation (arrows, dots, keyboard), autoplay, looping, and pointer
+ * swipe gestures.
+ *
+ * @prop {number}  index           - Active slide index (default: 0)
+ * @prop {number}  slidesPerView   - Slides visible at once (default: 1)
+ * @prop {string}  gap             - CSS gap between slides (default: '12px')
+ * @prop {boolean} loop            - Loop from last to first and vice-versa
+ * @prop {boolean} autoplay        - Auto-advance slides
+ * @prop {number}  interval        - Autoplay interval in ms (default: 4000)
+ * @prop {boolean} showArrows      - Show prev/next arrows (default: true)
+ * @prop {boolean} showDots        - Show pagination dots (default: true)
+ * @prop {'inside'|'outside'} arrowPosition - Arrow placement (default: 'inside')
+ * @prop {string}  ariaLabel       - Accessible label for the carousel region
+ *
+ * @slot - Slides (any number of HTMLElement children)
+ *
+ * @fires arvea-change - When the active index changes (detail: { index })
+ */
+declare class ArveaCarousel extends LitElement {
+    static styles: lit.CSSResult[];
+    index: number;
+    slidesPerView: number;
+    gap: string;
+    loop: boolean;
+    autoplay: boolean;
+    interval: number;
+    showArrows: boolean;
+    showDots: boolean;
+    arrowPosition: ArveaCarouselArrowPosition;
+    ariaLabel: string;
+    private _slideCount;
+    private _dragOffsetPx;
+    private _viewport;
+    private _timer?;
+    private _pointerId?;
+    private _dragStartX;
+    private _dragStartY;
+    private _isDragging;
+    private _dragAxis;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    updated(changed: PropertyValues): void;
+    private get _maxIndex();
+    private _onSlotChange;
+    /** Navigate to a specific index, clamping or looping as configured. */
+    goTo(i: number): void;
+    next(): void;
+    prev(): void;
+    private _stopTimer;
+    private _maybeStartTimer;
+    private _onKeyDown;
+    private _onPointerDown;
+    private _onPointerMove;
+    private _endDrag;
+    private _trackTransform;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'arvea-carousel': ArveaCarousel;
+    }
+}
+
+type ArveaDialogSize = 'sm' | 'md' | 'lg' | 'fullscreen';
+interface ArveaDialogProps {
+    open?: boolean;
+    title?: string;
+    description?: string;
+    size?: ArveaDialogSize;
+    closeOnOverlayClick?: boolean;
+    closeOnEsc?: boolean;
+    hideClose?: boolean;
+    preventScroll?: boolean;
+}
+
+/**
+ * @element arvea-dialog
+ *
+ * Accessible modal dialog with overlay, focus trap, and Esc-to-close.
+ *
+ * @prop {boolean} open
+ * @prop {string}  title
+ * @prop {string}  description
+ * @prop {'sm'|'md'|'lg'|'fullscreen'} size
+ * @prop {boolean} closeOnOverlayClick - default true
+ * @prop {boolean} closeOnEsc          - default true
+ * @prop {boolean} hideClose           - hide the X button
+ * @prop {boolean} preventScroll       - lock body scroll while open (default true)
+ *
+ * @slot header  - Overrides the default header (title + close)
+ * @slot         - Main body content
+ * @slot footer  - Footer with action buttons
+ *
+ * @fires arvea-open
+ * @fires arvea-close
+ */
+declare class ArveaDialog extends LitElement {
+    static styles: lit.CSSResult[];
+    open: boolean;
+    title: string;
+    description: string;
+    size: ArveaDialogSize;
+    closeOnOverlayClick: boolean;
+    closeOnEsc: boolean;
+    hideClose: boolean;
+    preventScroll: boolean;
+    private _dialog;
+    private _previouslyFocused;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: PropertyValues): void;
+    /** Public API: show the dialog. */
+    show(): void;
+    /** Public API: hide the dialog. */
+    hide(): void;
+    private _handleOpen;
+    private _handleClose;
+    private _restoreScroll;
+    private _onDocKeyDown;
+    private _trapFocus;
+    private _onOverlayClick;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'arvea-dialog': ArveaDialog;
+    }
+}
+
+type ArveaToastVariant = 'default' | 'success' | 'error' | 'warning' | 'info';
+type ArveaToastPosition = 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center';
+interface ArveaToastProps {
+    open?: boolean;
+    variant?: ArveaToastVariant;
+    message?: string;
+    duration?: number;
+    closable?: boolean;
+}
+interface ArveaToastOptions {
+    message: string;
+    variant?: ArveaToastVariant;
+    duration?: number;
+    closable?: boolean;
+}
+
+/**
+ * @element arvea-toast
+ *
+ * Single toast notification. For multi-toast UX, use `arvea-toast-container`.
+ *
+ * @prop {boolean} open
+ * @prop {'default'|'success'|'error'|'warning'|'info'} variant
+ * @prop {string}  message
+ * @prop {number}  duration - auto-dismiss in ms (0 = no auto-dismiss)
+ * @prop {boolean} closable - shows the close button (default true)
+ *
+ * @slot - rich content alternative to `message`
+ *
+ * @fires arvea-open
+ * @fires arvea-close
+ */
+declare class ArveaToast extends LitElement {
+    static styles: lit.CSSResult[];
+    open: boolean;
+    variant: ArveaToastVariant;
+    message: string;
+    duration: number;
+    closable: boolean;
+    private _timer?;
+    show(): void;
+    hide(): void;
+    updated(changed: PropertyValues): void;
+    disconnectedCallback(): void;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'arvea-toast': ArveaToast;
+    }
+}
+
+/**
+ * @element arvea-toast-container
+ *
+ * Container that stacks toasts in a fixed corner of the viewport.
+ * Use the imperative `toast()` method (or static `ArveaToastContainer.notify()`)
+ * to push new toasts.
+ *
+ * @prop {ArveaToastPosition} position - default 'top-right'
+ * @prop {number}              max     - max simultaneous toasts (default 5)
+ *
+ * @example
+ *   <arvea-toast-container id="toasts"></arvea-toast-container>
+ *   document.getElementById('toasts').toast({ message: 'Saved!', variant: 'success' });
+ */
+declare class ArveaToastContainer extends LitElement {
+    static styles: lit.CSSResult[];
+    position: ArveaToastPosition;
+    max: number;
+    private _toasts;
+    /** Push a new toast. Returns the toast id. */
+    toast(opts: ArveaToastOptions): number;
+    /** Convenience helpers. */
+    success(message: string, duration?: number): number;
+    error(message: string, duration?: number): number;
+    warning(message: string, duration?: number): number;
+    info(message: string, duration?: number): number;
+    /** Remove a specific toast by id. */
+    dismiss(id: number): void;
+    /** Clear all toasts. */
+    clear(): void;
+    private _onClose;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'arvea-toast-container': ArveaToastContainer;
+    }
+}
+
+type ArveaTabsVariant = 'underline' | 'pill';
+interface ArveaTabItem {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+interface ArveaTabsProps {
+    value?: string;
+    items?: ArveaTabItem[];
+    variant?: ArveaTabsVariant;
+    fullWidth?: boolean;
+    ariaLabel?: string;
+}
+
+/**
+ * @element arvea-tabs
+ *
+ * Tabs with two display variants:
+ *   - 'underline' (default) — bottom border + animated indicator
+ *   - 'pill'                — segmented control style
+ *
+ * Tabs can be provided via the `items` array OR via slotted panels
+ * (`<div slot="panel" data-value="x" data-label="Label">…</div>`).
+ *
+ * @prop {string}           value      - Active tab value (controlled)
+ * @prop {ArveaTabItem[]}   items      - Tab definitions (optional)
+ * @prop {'underline'|'pill'} variant
+ * @prop {boolean}          fullWidth
+ * @prop {string}           ariaLabel
+ *
+ * @slot panel - One panel per tab; first matching data-value is shown
+ *
+ * @fires arvea-change - { value }
+ */
+declare class ArveaTabs extends LitElement {
+    static styles: lit.CSSResult[];
+    value: string;
+    items: ArveaTabItem[];
+    variant: ArveaTabsVariant;
+    fullWidth: boolean;
+    ariaLabel: string;
+    private _slotItems;
+    private _indicatorStyle;
+    private _tablist;
+    private get _items();
+    connectedCallback(): void;
+    firstUpdated(): void;
+    updated(changed: PropertyValues): void;
+    private _onPanelsSlotChange;
+    private _syncPanels;
+    private _onTabClick;
+    private _onKeyDown;
+    private _updateIndicator;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'arvea-tabs': ArveaTabs;
+    }
+}
+
+/**
+ * @element arvea-accordion-item
+ *
+ * Single collapsible row. Place inside `<arvea-accordion>` (optional).
+ *
+ * @prop {boolean} open
+ * @prop {string}  title
+ * @prop {boolean} disabled
+ *
+ * @slot title  - Custom title (overrides `title` attr)
+ * @slot        - Body content
+ *
+ * @fires arvea-toggle - { open }
+ */
+declare class ArveaAccordionItem extends LitElement {
+    static styles: lit.CSSResult[];
+    open: boolean;
+    title: string;
+    disabled: boolean;
+    toggle(): void;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'arvea-accordion-item': ArveaAccordionItem;
+    }
+}
+
+/**
+ * @element arvea-accordion
+ *
+ * Container for `<arvea-accordion-item>` elements. By default, opening
+ * one item closes the others. Set `multiple` to allow multiple open items.
+ *
+ * @prop {boolean} multiple - Allow multiple open items
+ * @prop {boolean} bordered - Render with a single rounded border
+ *
+ * @slot - One or more `<arvea-accordion-item>` elements
+ */
+declare class ArveaAccordion extends LitElement {
+    static styles: lit.CSSResult[];
+    multiple: boolean;
+    bordered: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _onItemToggle;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'arvea-accordion': ArveaAccordion;
+    }
+}
+
+type ArveaAlertVariant = 'info' | 'success' | 'warning' | 'danger';
+interface ArveaAlertProps {
+    variant?: ArveaAlertVariant;
+    title?: string;
+    closable?: boolean;
+    hideIcon?: boolean;
+}
+
+/**
+ * @element arvea-alert
+ *
+ * Inline notification with four variants. Use the default slot for body
+ * content; `title` for the bold heading.
+ *
+ * @prop {'info'|'success'|'warning'|'danger'} variant - default 'info'
+ * @prop {string}  title
+ * @prop {boolean} closable - shows a close button (dismisses the alert)
+ * @prop {boolean} hideIcon
+ *
+ * @slot - body content
+ * @slot icon - override the default icon
+ * @slot action - trailing action (button/link) placed before the close button
+ *
+ * @fires arvea-close
+ */
+declare class ArveaAlert extends LitElement {
+    static styles: lit.CSSResult[];
+    variant: ArveaAlertVariant;
+    title: string;
+    closable: boolean;
+    hideIcon: boolean;
+    private _dismissed;
+    private _close;
+    render(): lit_html.TemplateResult<1> | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'arvea-alert': ArveaAlert;
+    }
+}
+
+type ArveaDividerOrientation = 'horizontal' | 'vertical';
+type ArveaDividerVariant = 'solid' | 'dashed' | 'dotted';
+type ArveaDividerEmphasis = 'subtle' | 'strong';
+type ArveaDividerAlign = 'start' | 'center' | 'end';
+interface ArveaDividerProps {
+    orientation?: ArveaDividerOrientation;
+    variant?: ArveaDividerVariant;
+    emphasis?: ArveaDividerEmphasis;
+    align?: ArveaDividerAlign;
+    text?: string;
+    spacing?: string;
+}
+
+/**
+ * @element arvea-divider
+ *
+ * Visual separator. Use orientation="vertical" inside flex containers, or
+ * pass `text` (or slot content) for a labeled horizontal divider.
+ *
+ * @prop {'horizontal'|'vertical'}      orientation - default 'horizontal'
+ * @prop {'solid'|'dashed'|'dotted'}    variant
+ * @prop {'subtle'|'strong'}            emphasis
+ * @prop {'start'|'center'|'end'}       align       - text alignment
+ * @prop {string}                       text        - optional label
+ * @prop {string}                       spacing     - CSS margin override
+ *
+ * @slot - Alternative to the `text` attribute
+ */
+declare class ArveaDivider extends LitElement {
+    static styles: lit.CSSResult[];
+    orientation: ArveaDividerOrientation;
+    variant: ArveaDividerVariant;
+    emphasis: ArveaDividerEmphasis;
+    align: ArveaDividerAlign;
+    text: string;
+    spacing: string;
+    connectedCallback(): void;
+    render(): lit_html.TemplateResult<1> | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'arvea-divider': ArveaDivider;
+    }
+}
+
+type ArveaFormFieldStatus = 'default' | 'invalid' | 'warning' | 'valid';
+interface ArveaFormFieldProps {
+    label?: string;
+    hint?: string;
+    error?: string;
+    required?: boolean;
+    optional?: boolean;
+    status?: ArveaFormFieldStatus;
+    htmlFor?: string;
+}
+
+/**
+ * @element arvea-form-field
+ *
+ * Wraps a form control (input, textarea, select, etc.) with a label and hint/error message.
+ *
+ * @prop {string} label    - Label text shown above the control
+ * @prop {string} hint     - Helper text shown below the control
+ * @prop {string} error    - Error message (forces status='invalid' when present)
+ * @prop {boolean} required - Mark the field as required (renders an asterisk)
+ * @prop {boolean} optional - Render an "(optional)" suffix on the label
+ * @prop {ArveaFormFieldStatus} status - 'default' | 'invalid' | 'warning' | 'valid'
+ * @prop {string} htmlFor  - Associates the label with a control via id
+ *
+ * @slot default - Place a form control here (input, select, textarea, ...)
+ */
+declare class ArveaFormField extends LitElement {
+    static styles: lit.CSSResult[];
+    label: string;
+    hint: string;
+    error: string;
+    required: boolean;
+    optional: boolean;
+    status: ArveaFormFieldStatus;
+    htmlFor: string;
+    private get _resolvedStatus();
+    private get _message();
+    willUpdate(): void;
+    private _syncInputState;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'arvea-form-field': ArveaFormField;
+    }
+}
+
+interface ArveaBreadcrumbItem {
+    label: string;
+    href?: string;
+    current?: boolean;
+}
+type ArveaBreadcrumbSeparator = 'chevron' | 'slash' | 'dot';
+interface ArveaBreadcrumbProps {
+    items?: ArveaBreadcrumbItem[];
+    separator?: ArveaBreadcrumbSeparator;
+    maxItems?: number;
+}
+
+/**
+ * @element arvea-breadcrumb
+ *
+ * @prop {ArveaBreadcrumbItem[]} items - Crumbs to display
+ * @prop {'chevron'|'slash'|'dot'} separator - Visual separator (default 'chevron')
+ * @prop {number} maxItems - Collapse to ellipsis if items exceed this number (0 = never)
+ *
+ * @fires arvea-breadcrumb-navigate - { detail: { item, index } } when a non-current crumb is clicked
+ */
+declare class ArveaBreadcrumb extends LitElement {
+    static styles: lit.CSSResult[];
+    items: ArveaBreadcrumbItem[];
+    separator: ArveaBreadcrumbSeparator;
+    maxItems: number;
+    private _renderSeparator;
+    private _onClick;
+    private _renderCrumb;
+    private _visibleItems;
+    render(): TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'arvea-breadcrumb': ArveaBreadcrumb;
+    }
+}
+
+type ArveaPaginationSize = 'sm' | 'md' | 'lg';
+interface ArveaPaginationProps {
+    page?: number;
+    total?: number;
+    siblings?: number;
+    boundaries?: number;
+    size?: ArveaPaginationSize;
+    disabled?: boolean;
+    showFirstLast?: boolean;
+    pageSize?: number;
+    pageSizeOptions?: number[];
+    showJumpTo?: boolean;
+}
+
+/**
+ * @element arvea-pagination
+ *
+ * @prop {number} page          - current page (1-based)
+ * @prop {number} total         - total number of pages
+ * @prop {number} siblings      - pages shown around current (default 1)
+ * @prop {number} boundaries    - pages always shown at start/end (default 1)
+ * @prop {ArveaPaginationSize} size - 'sm' | 'md' | 'lg'
+ * @prop {boolean} disabled
+ * @prop {boolean} showFirstLast - render first/last buttons
+ * @prop {number} pageSize        - optional rows-per-page (renders a selector when pageSizeOptions provided)
+ * @prop {number[]} pageSizeOptions - choices for the page-size selector
+ * @prop {boolean} showJumpTo     - render a "Go to" input for direct page entry
+ *
+ * @fires arvea-page-change      - { detail: { page } }
+ * @fires arvea-page-size-change - { detail: { pageSize } }
+ */
+declare class ArveaPagination extends LitElement {
+    static styles: lit.CSSResult[];
+    page: number;
+    total: number;
+    siblings: number;
+    boundaries: number;
+    size: ArveaPaginationSize;
+    disabled: boolean;
+    showFirstLast: boolean;
+    pageSize?: number;
+    pageSizeOptions: number[];
+    showJumpTo: boolean;
+    private _go;
+    private _range;
+    private _onPageSizeChange;
+    private _onJumpKey;
+    private _arrow;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'arvea-pagination': ArveaPagination;
+    }
+}
+
+type ArveaDropdownPlacement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+interface ArveaDropdownItem {
+    id: string;
+    label: string;
+    value?: string;
+    flagSrc?: string;
+    icon?: string;
+    disabled?: boolean;
+    destructive?: boolean;
+    divider?: boolean;
+}
+interface ArveaDropdownMenuProps {
+    items?: ArveaDropdownItem[];
+    open?: boolean;
+    placement?: ArveaDropdownPlacement;
+    triggerLabel?: string;
+}
+
+/**
+ * @element arvea-dropdown-menu
+ *
+ * @prop {ArveaDropdownItem[]} items         - Menu items (support flagSrc, value, divider, icon)
+ * @prop {boolean}             open          - Controlled open state (reflected)
+ * @prop {string}              value         - Currently selected item value (shows checkmark)
+ * @prop {ArveaDropdownPlacement} placement  - 'bottom-start' (default), 'bottom-end', 'top-start', 'top-end'
+ * @prop {string}              triggerLabel  - Text for default trigger; ignored when slot[name=trigger] is used
+ * @prop {'click'|'hover'}     triggerMode   - How the dropdown opens (default 'click')
+ *
+ * @slot trigger - Custom trigger element (replaces default button)
+ * @slot         - Custom items (alternative to .items property)
+ *
+ * @fires arvea-dropdown-select - { detail: { item } } on item click
+ * @fires arvea-dropdown-open
+ * @fires arvea-dropdown-close
+ */
+declare class ArveaDropdownMenu extends LitElement {
+    static styles: lit.CSSResult[];
+    items: ArveaDropdownItem[];
+    open: boolean;
+    value: string;
+    placement: ArveaDropdownPlacement;
+    triggerLabel: string;
+    triggerMode: 'click' | 'hover';
+    searchable: boolean;
+    searchPlaceholder: string;
+    noResultsText: string;
+    private _hasTriggerSlot;
+    private _hasContentSlot;
+    private _query;
+    private _activeIndex;
+    private _searchInput?;
+    private _mouseLeaveTimer?;
+    private get _visibleItems();
+    private _focusableItems;
+    private _outsideHandler;
+    private _keyHandler;
+    private _onHostMouseEnter;
+    private _onHostMouseLeave;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _toggle;
+    private _openMenu;
+    private _close;
+    private _onSearchInput;
+    private _pick;
+    private _onTriggerSlotChange;
+    private _onContentSlotChange;
+    private _renderItems;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'arvea-dropdown-menu': ArveaDropdownMenu;
+    }
+}
+
+type ArveaSearchSize = 'sm' | 'md' | 'lg';
+interface ArveaSearchSuggestion {
+    id: string;
+    label: string;
+    hint?: string;
+}
+interface ArveaSearchBarProps {
+    value?: string;
+    placeholder?: string;
+    size?: ArveaSearchSize;
+    disabled?: boolean;
+    loading?: boolean;
+    clearable?: boolean;
+    suggestions?: ArveaSearchSuggestion[];
+    debounce?: number;
+}
+
+/**
+ * @element arvea-search-bar
+ *
+ * @prop {string}  value         - input value
+ * @prop {string}  placeholder
+ * @prop {ArveaSearchSize} size  - 'sm' | 'md' | 'lg'
+ * @prop {boolean} disabled
+ * @prop {boolean} loading       - show spinner instead of search icon
+ * @prop {boolean} clearable     - show a clear (×) button when value is non-empty
+ * @prop {ArveaSearchSuggestion[]} suggestions - autocomplete suggestions
+ * @prop {number}  debounce      - ms before firing arvea-search-input (default 200)
+ *
+ * @fires arvea-search-input   - debounced input event, { detail: { value } }
+ * @fires arvea-search-submit  - Enter pressed, { detail: { value } }
+ * @fires arvea-search-select  - suggestion selected, { detail: { suggestion } }
+ * @fires arvea-search-clear
+ */
+declare class ArveaSearchBar extends LitElement {
+    static styles: lit.CSSResult[];
+    value: string;
+    placeholder: string;
+    size: ArveaSearchSize;
+    disabled: boolean;
+    loading: boolean;
+    clearable: boolean;
+    suggestions: ArveaSearchSuggestion[];
+    debounce: number;
+    private _activeIndex;
+    private _showSuggestions;
+    private _debounceTimer;
+    private _emitInput;
+    private _onInput;
+    private _onKey;
+    private _clear;
+    private _pick;
+    private _onBlur;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'arvea-search-bar': ArveaSearchBar;
+    }
+}
+
+type ArveaRatingSize = 'sm' | 'md' | 'lg';
+interface ArveaRatingProps {
+    value?: number;
+    max?: number;
+    size?: ArveaRatingSize;
+    readonly?: boolean;
+    allowHalf?: boolean;
+    label?: string;
+}
+
+/**
+ * @element arvea-rating
+ *
+ * @prop {number}  value      - current value (0..max)
+ * @prop {number}  max        - max stars (default 5)
+ * @prop {ArveaRatingSize} size - 'sm' | 'md' | 'lg'
+ * @prop {boolean} readonly   - display-only mode
+ * @prop {boolean} allowHalf  - allow half-star values in display
+ * @prop {string}  label      - text shown next to the stars (e.g. "4.2/5")
+ *
+ * @fires arvea-rating-change - { detail: { value } }
+ */
+declare class ArveaRating extends LitElement {
+    static styles: lit.CSSResult[];
+    value: number;
+    max: number;
+    size: ArveaRatingSize;
+    readonly: boolean;
+    allowHalf: boolean;
+    label: string;
+    score: string;
+    private _set;
+    private _onKey;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'arvea-rating': ArveaRating;
+    }
+}
+
+type ArveaQuantitySize = 'sm' | 'md' | 'lg';
+interface ArveaQuantitySelectorProps {
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    size?: ArveaQuantitySize;
+    disabled?: boolean;
+}
+
+/**
+ * @element arvea-quantity-selector
+ *
+ * @prop {number}  value     - current value
+ * @prop {number}  min       - default 1
+ * @prop {number}  max       - default Infinity
+ * @prop {number}  step      - default 1
+ * @prop {ArveaQuantitySize} size - 'sm' | 'md' | 'lg'
+ * @prop {boolean} disabled
+ *
+ * @fires arvea-quantity-change - { detail: { value } }
+ */
+declare class ArveaQuantitySelector extends LitElement {
+    static styles: lit.CSSResult[];
+    value: number;
+    min: number;
+    max: number;
+    step: number;
+    size: ArveaQuantitySize;
+    disabled: boolean;
+    private _set;
+    private _onInput;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'arvea-quantity-selector': ArveaQuantitySelector;
+    }
+}
+
+type ArveaStepperOrientation = 'horizontal' | 'vertical';
+interface ArveaStepperStep {
+    id: string;
+    label: string;
+    description?: string;
+}
+interface ArveaStepperProps {
+    steps?: ArveaStepperStep[];
+    active?: number;
+    orientation?: ArveaStepperOrientation;
+    clickable?: boolean;
+}
+
+/**
+ * @element arvea-stepper
+ *
+ * @prop {ArveaStepperStep[]} steps - Step definitions
+ * @prop {number} active - 0-based index of the active step
+ * @prop {ArveaStepperOrientation} orientation - 'horizontal' (default) | 'vertical'
+ * @prop {boolean} clickable - allow clicking complete/active steps to navigate
+ *
+ * @fires arvea-stepper-change - { detail: { active, step } }
+ */
+declare class ArveaStepper extends LitElement {
+    static styles: lit.CSSResult[];
+    steps: ArveaStepperStep[];
+    active: number;
+    orientation: ArveaStepperOrientation;
+    clickable: boolean;
+    private _stateOf;
+    private _onStepClick;
+    private _renderCircle;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'arvea-stepper': ArveaStepper;
+    }
+}
+
+type ArveaEmptyStateSize = 'sm' | 'md' | 'lg';
+interface ArveaEmptyStateProps {
+    icon?: string;
+    title?: string;
+    description?: string;
+    size?: ArveaEmptyStateSize;
+}
+
+/**
+ * @element arvea-empty-state
+ *
+ * Placeholder block for empty lists, no-results, error pages, and the empty
+ * state inside data tables.
+ *
+ * @prop {string} icon        - SVG string. Falls back to a generic illustration.
+ * @prop {string} title       - Headline text
+ * @prop {string} description - Helper sentence under the title
+ * @prop {'sm'|'md'|'lg'} size
+ *
+ * @slot icon    - Custom icon element (overrides the `icon` prop)
+ * @slot         - Default slot for replacing title/description with rich content
+ * @slot actions - Buttons or links shown below the description
+ */
+declare class ArveaEmptyState extends LitElement {
+    static styles: lit.CSSResult[];
+    icon?: string;
+    title: string;
+    description: string;
+    size: ArveaEmptyStateSize;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'arvea-empty-state': ArveaEmptyState;
+    }
+}
+
+type ArveaDataTableAlign = 'left' | 'center' | 'right';
+type ArveaDataTableSortDirection = 'asc' | 'desc' | null;
+type ArveaDataTableRowSelection = 'none' | 'single' | 'multiple';
+type ArveaDataTableFilterType = 'text' | 'select' | 'date';
+interface ArveaDataTableColumnFilter {
+    type: ArveaDataTableFilterType;
+    options?: ArveaSelectOption[];
+    placeholder?: string;
+}
+interface ArveaDataTableBadge {
+    label: string;
+    variant?: BadgeVariant;
+    /** Custom background color (overrides variant color). */
+    color?: string;
+    /** Custom text/icon color (overrides variant color). */
+    textColor?: string;
+    /** Icon name from arvea-icon (overrides the variant icon). */
+    icon?: string;
+    /** Removes background and padding for a transparent look. */
+    noBg?: boolean;
+    /** Hides the leading icon (status variants show one by default). */
+    hideIcon?: boolean;
+}
+interface ArveaDataTableAction {
+    id: string;
+    label?: string;
+    variant?: ArveaActionButtonVariant;
+    icon?: string;
+    /** Overrides the variant's background color (mirrors arvea-action-button's bg-color prop). */
+    bgColor?: string;
+    /** Overrides the variant's icon/text color (mirrors arvea-action-button's color prop). */
+    color?: string;
+    disabled?: boolean;
+}
+interface ArveaDataTableColumn<T = Record<string, unknown>> {
+    key: string;
+    label: string;
+    sortable?: boolean;
+    align?: ArveaDataTableAlign;
+    width?: string;
+    minWidth?: number;
+    resizable?: boolean;
+    hideMobile?: boolean;
+    hideTablet?: boolean;
+    filter?: ArveaDataTableColumnFilter;
+    /** Renders `row[key]` as an image thumbnail, with a placeholder icon when empty. */
+    image?: boolean;
+    /** Renders the cell as an `arvea-badge`; return `null` to leave the cell empty. */
+    badge?: (row: T, index: number) => ArveaDataTableBadge | null;
+    /** Renders a row of `arvea-action-button`s; clicks fire `arvea-table-action`. */
+    actions?: (row: T, index: number) => ArveaDataTableAction[];
+    render?: (row: T, index: number) => string | number | null | TemplateResult;
+}
+interface ArveaDataTableSort {
+    key: string;
+    direction: ArveaDataTableSortDirection;
+}
+interface ArveaDataTablePagination {
+    page: number;
+    pageSize: number;
+    total?: number;
+}
+type ArveaDataTableSize = 'sm' | 'md' | 'lg';
+type ArveaDataTableResponsive = 'scroll' | 'hide' | 'cards';
+interface ArveaDataTableProps<T = Record<string, unknown>> {
+    columns?: ArveaDataTableColumn<T>[];
+    rows?: T[];
+    loading?: boolean;
+    emptyText?: string;
+    rowKey?: string;
+    sort?: ArveaDataTableSort;
+    density?: 'compact' | 'normal';
+    size?: ArveaDataTableSize;
+    rowSelection?: ArveaDataTableRowSelection;
+    selectedKeys?: string[];
+    filterValues?: Record<string, unknown>;
+    resizableColumns?: boolean;
+    virtualized?: boolean;
+    estimatedRowHeight?: number;
+    pagination?: ArveaDataTablePagination | null;
+    stickyHeader?: boolean;
+    manualSort?: boolean;
+    manualPagination?: boolean;
+    striped?: boolean;
+    bordered?: boolean;
+    hoverable?: boolean;
+    noWrap?: boolean;
+    responsive?: ArveaDataTableResponsive;
+    globalFilter?: string;
+    caption?: string;
+    expandable?: boolean;
+    expandedKeys?: string[];
+    renderExpanded?: (row: T, index: number) => unknown;
+}
+
+type Row = Record<string, unknown>;
+/**
+ * @element arvea-data-table
+ *
+ * @fires arvea-table-sort                - { key, direction }
+ * @fires arvea-table-row-click           - { row, index }
+ * @fires arvea-table-selection-change    - { selectedKeys, selectedRows }
+ * @fires arvea-table-filter-change       - { filterValues }
+ * @fires arvea-table-column-resize       - { key, width }
+ * @fires arvea-table-page-change         - { page, pageSize }
+ * @fires arvea-table-action              - { id, row, index }
+ */
+declare class ArveaDataTable extends LitElement {
+    static styles: lit.CSSResult[];
+    columns: ArveaDataTableColumn<any>[];
+    rows: Row[];
+    loading: boolean;
+    emptyText: string;
+    rowKey: string;
+    sort: ArveaDataTableSort | null;
+    density: 'compact' | 'normal';
+    rowSelection: ArveaDataTableRowSelection;
+    selectedKeys: string[];
+    filterValues: Record<string, unknown>;
+    resizableColumns: boolean;
+    virtualized: boolean;
+    estimatedRowHeight: number;
+    pagination: ArveaDataTablePagination | null;
+    pageSizeOptions: number[];
+    hideToolbar: boolean;
+    stickyHeader: boolean;
+    manualSort: boolean;
+    manualPagination: boolean;
+    size: ArveaDataTableSize;
+    striped: boolean;
+    bordered: boolean;
+    hoverable: boolean;
+    noWrap: boolean;
+    responsive: ArveaDataTableResponsive;
+    globalFilter: string;
+    caption: string;
+    expandable: boolean;
+    expandedKeys: string[];
+    renderExpanded?: (row: Row, index: number) => unknown;
+    private _columnWidths;
+    private _scrollTop;
+    private _viewportHeight;
+    private _scrollEl?;
+    private _resizeKey;
+    private _resizeStartX;
+    private _resizeStartW;
+    private get _activeFilters();
+    private _matchesFilters;
+    private _matchesGlobalFilter;
+    private get _filteredRows();
+    private _compare;
+    private get _sortedRows();
+    private get _paginatedRows();
+    private get _rowKeyValue();
+    private get _selectedSet();
+    private get _visibleKeys();
+    private get _headerSelectState();
+    private get _virtualizationActive();
+    connectedCallback(): void;
+    private _toggleSort;
+    private _onRowClick;
+    private _onAction;
+    private _toggleRow;
+    private _toggleAllVisible;
+    private _onFilterChange;
+    private _onPageChange;
+    private _onPageSizeChange;
+    private _onPageSizeSelectChange;
+    private _onResizeStart;
+    private _onResizeMove;
+    private _onResizeEnd;
+    private _alignClass;
+    private _colClass;
+    private _renderCell;
+    private _renderBadgeCell;
+    private _renderImageCell;
+    private _renderActionsCell;
+    private _sortIcon;
+    private _onScroll;
+    private _columnStyle;
+    render(): TemplateResult<1>;
+    private _renderHeaderCell;
+    private _renderFilterCell;
+    private _renderBody;
+    private _renderVirtualizedBody;
+    private _toggleExpand;
+    private _renderRow;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'arvea-data-table': ArveaDataTable;
+    }
+}
+
+interface ArveaLightboxItem {
+    src: string;
+    alt?: string;
+    caption?: string;
+}
+interface ArveaLightboxProps {
+    items?: ArveaLightboxItem[];
+    index?: number;
+    open?: boolean;
+    showThumbnails?: boolean;
+    showCounter?: boolean;
+}
+
+/**
+ * @element arvea-lightbox
+ *
+ * @prop {ArveaLightboxItem[]} items - Media items
+ * @prop {number}  index            - currently displayed item (0-based)
+ * @prop {boolean} open             - controls visibility
+ * @prop {boolean} showThumbnails   - show thumbnail strip
+ * @prop {boolean} showCounter      - show "1 / N" counter
+ *
+ * @fires arvea-lightbox-change - { detail: { index, item } }
+ * @fires arvea-lightbox-close
+ */
+declare class ArveaLightbox extends LitElement {
+    static styles: lit.CSSResult[];
+    items: ArveaLightboxItem[];
+    index: number;
+    open: boolean;
+    showThumbnails: boolean;
+    showCounter: boolean;
+    private _keyHandler;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _go;
+    private _close;
+    private _onOverlayClick;
+    render(): lit_html.TemplateResult<1> | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'arvea-lightbox': ArveaLightbox;
+    }
+}
+
+type TableResponsive = 'scroll' | 'hide' | 'cards';
+interface TableColumn {
+    key: string;
+    label: string;
+    visible?: boolean;
+    hideMobile?: boolean;
+    hideTablet?: boolean;
+}
+interface ArveaTableRow {
+    [key: string]: string;
+}
+interface ArveaTableProps {
+    columns?: TableColumn[];
+    rows?: ArveaTableRow[];
+    pageSize?: number;
+    responsive?: TableResponsive;
+}
+
+declare class ArveaTable extends LitElement {
+    static styles: lit.CSSResult[];
+    columns: TableColumn[];
+    rows: ArveaTableRow[];
+    pageSize: number;
+    responsive: TableResponsive;
+    emptyText: string;
+    private _page;
+    private get _pagedRows();
+    private _getColClass;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'arvea-table': ArveaTable;
+    }
+}
+
+type ArveaPopoverPlacement = 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end';
+type ArveaPopoverTrigger = 'click' | 'hover' | 'focus' | 'manual';
+interface ArveaPopoverProps {
+    open?: boolean;
+    placement?: ArveaPopoverPlacement;
+    offset?: number;
+    trigger?: ArveaPopoverTrigger;
+    disabled?: boolean;
+    matchTriggerWidth?: boolean;
+}
+
+/**
+ * @element arvea-popover
+ *
+ * Anchored popover primitive. Renders an absolutely-positioned popup next to
+ * a trigger element, with viewport-aware flipping and click-outside handling.
+ * Used as the positioning foundation for tooltips, dropdowns, popconfirms,
+ * date-pickers and selects.
+ *
+ * @prop {boolean} open
+ * @prop {ArveaPopoverPlacement} placement
+ * @prop {number} offset
+ * @prop {ArveaPopoverTrigger} trigger
+ * @prop {boolean} disabled
+ * @prop {boolean} matchTriggerWidth
+ *
+ * @slot trigger - The element that triggers the popover
+ * @slot         - Popover body content
+ *
+ * @fires arvea-popover-open
+ * @fires arvea-popover-close
+ */
+declare class ArveaPopover extends LitElement {
+    static styles: lit.CSSResult[];
+    open: boolean;
+    placement: ArveaPopoverPlacement;
+    offset: number;
+    trigger: ArveaPopoverTrigger;
+    disabled: boolean;
+    matchTriggerWidth: boolean;
+    private _triggerEl;
+    private _popupEl;
+    private _resolvedPlacement;
+    private _onScroll;
+    private _onResize;
+    private _onDocPointer;
+    private _onKey;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    show(): void;
+    hide(): void;
+    toggle(): void;
+    private _show;
+    private _hide;
+    private _position;
+    private _flipIfNeeded;
+    private _onTriggerClick;
+    private _onTriggerEnter;
+    private _onTriggerLeave;
+    private _onTriggerFocusIn;
+    private _onTriggerFocusOut;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'arvea-popover': ArveaPopover;
+    }
+}
+
+type ArveaPopconfirmVariant = 'default' | 'destructive';
+interface ArveaPopconfirmProps {
+    title?: string;
+    description?: string;
+    confirmText?: string;
+    cancelText?: string;
+    variant?: ArveaPopconfirmVariant;
+    disabled?: boolean;
+    open?: boolean;
+}
+
+/**
+ * @element arvea-popconfirm
+ *
+ * Inline "Are you sure?" popover for destructive or impactful actions. Uses
+ * <arvea-popover> for positioning.
+ *
+ * @slot trigger - The element that triggers the confirmation (button, icon, etc.)
+ *
+ * @fires arvea-confirm
+ * @fires arvea-cancel
+ */
+declare class ArveaPopconfirm extends LitElement {
+    static styles: lit.CSSResult[];
+    title: string;
+    description: string;
+    confirmText: string;
+    cancelText: string;
+    variant: ArveaPopconfirmVariant;
+    disabled: boolean;
+    open: boolean;
+    private _popover?;
+    private _onConfirm;
+    private _onCancel;
+    private _onPopoverChange;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'arvea-popconfirm': ArveaPopconfirm;
+    }
+}
+
+type ArveaDrawerPlacement = 'left' | 'right' | 'top' | 'bottom';
+type ArveaDrawerSize = 'sm' | 'md' | 'lg' | 'full' | string;
+interface ArveaDrawerProps {
+    open?: boolean;
+    placement?: ArveaDrawerPlacement;
+    size?: ArveaDrawerSize;
+    title?: string;
+    closeOnOverlayClick?: boolean;
+    closeOnEsc?: boolean;
+    preventScroll?: boolean;
+    hideOverlay?: boolean;
+}
+
+/**
+ * @element arvea-drawer
+ *
+ * Side-sliding panel for cart drawers, filter sidebars, settings, etc.
+ * Companion to <arvea-dialog> for non-centered overlays.
+ *
+ * @slot header
+ * @slot          - default body
+ * @slot footer
+ *
+ * @fires arvea-drawer-open
+ * @fires arvea-drawer-close
+ */
+declare class ArveaDrawer extends LitElement {
+    static styles: lit.CSSResult[];
+    open: boolean;
+    placement: ArveaDrawerPlacement;
+    size: ArveaDrawerSize;
+    title: string;
+    closeOnOverlayClick: boolean;
+    closeOnEsc: boolean;
+    preventScroll: boolean;
+    hideOverlay: boolean;
+    private _previouslyFocused;
+    private _onKey;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    show(): void;
+    close(): void;
+    toggle(): void;
+    private _focusableElements;
+    private _focusFirst;
+    private _trapFocus;
+    private _onOverlayClick;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'arvea-drawer': ArveaDrawer;
+    }
+}
+
+type ArveaSegmentedControlSize = 'sm' | 'md' | 'lg';
+interface ArveaSegmentedControlItem {
+    value: string;
+    label: string;
+    icon?: string;
+    disabled?: boolean;
+}
+interface ArveaSegmentedControlProps {
+    items?: ArveaSegmentedControlItem[];
+    value?: string;
+    size?: ArveaSegmentedControlSize;
+    disabled?: boolean;
+    fullWidth?: boolean;
+}
+
+/**
+ * @element arvea-segmented-control
+ *
+ * Pill-style segmented selector. Useful as a single-choice alternative to
+ * radio groups (view-mode toggles, sort selectors).
+ *
+ * @fires arvea-segmented-change - { value }
+ */
+declare class ArveaSegmentedControl extends LitElement {
+    static styles: lit.CSSResult[];
+    items: ArveaSegmentedControlItem[];
+    value: string;
+    size: ArveaSegmentedControlSize;
+    disabled: boolean;
+    fullWidth: boolean;
+    private _select;
+    private _onKey;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'arvea-segmented-control': ArveaSegmentedControl;
+    }
+}
+
+type ArveaTagValidator = (tag: string) => boolean | string;
+interface ArveaTagsInputProps {
+    value?: string[];
+    placeholder?: string;
+    maxTags?: number;
+    allowDuplicates?: boolean;
+    separator?: string | RegExp;
+    validateTag?: ArveaTagValidator;
+    disabled?: boolean;
+    label?: string;
+    suggestions?: string[];
+    invalid?: boolean;
+    validationHint?: string;
+}
+
+/**
+ * @element arvea-tags-input
+ *
+ * Multi-tag entry input. Typed values are committed as chips on Enter or on
+ * any of the configured separator characters. Supports optional autocomplete
+ * suggestions, max-tags limit, duplicate prevention and per-tag validation.
+ *
+ * @fires arvea-tags-change { value: string[] }
+ * @fires arvea-tag-add     { tag: string }
+ * @fires arvea-tag-remove  { tag: string }
+ */
+declare class ArveaTagsInput extends LitElement {
+    static styles: lit.CSSResult[];
+    value: string[];
+    placeholder: string;
+    maxTags?: number;
+    allowDuplicates: boolean;
+    separator: string | RegExp;
+    validateTag?: ArveaTagValidator;
+    disabled: boolean;
+    label: string;
+    suggestions: string[];
+    invalid: boolean;
+    validationHint: string;
+    private _query;
+    private _activeSuggestion;
+    private _errorMessage;
+    private _input?;
+    private get _suggestions();
+    private _commit;
+    private _remove;
+    private _emitChange;
+    private _onInput;
+    private _onKeydown;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'arvea-tags-input': ArveaTagsInput;
+    }
+}
+
+type ArveaOtpType = 'numeric' | 'alphanumeric';
+interface ArveaOtpInputProps {
+    length?: number;
+    value?: string;
+    type?: ArveaOtpType;
+    mask?: boolean;
+    autoFocus?: boolean;
+    disabled?: boolean;
+    invalid?: boolean;
+    label?: string;
+}
+
+/**
+ * @element arvea-otp-input
+ *
+ * Segmented one-time-code / PIN input. Auto-advances cells, supports paste,
+ * backspace navigation, arrow keys, masking, and a configurable character
+ * class (numeric / alphanumeric).
+ *
+ * @fires arvea-otp-input    { value }
+ * @fires arvea-otp-complete { value } (only when all cells filled)
+ */
+declare class ArveaOtpInput extends LitElement {
+    static styles: lit.CSSResult[];
+    length: number;
+    value: string;
+    type: ArveaOtpType;
+    mask: boolean;
+    autoFocus: boolean;
+    disabled: boolean;
+    invalid: boolean;
+    label: string;
+    private _cells;
+    private get _allowedRegex();
+    private get _digits();
+    firstUpdated(): void;
+    private _setChar;
+    private _onInput;
+    private _onKey;
+    private _onPaste;
+    private _cellChar;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'arvea-otp-input': ArveaOtpInput;
+    }
+}
+
+/**
+ * @element arvea-file-upload
+ *
+ * Drop-zone + click-to-browse file input. Supports type filtering, size and
+ * count limits, image previews, and externally-fed progress.
+ *
+ * @fires arvea-files-change     { files: File[] }
+ * @fires arvea-file-rejected    { file, reason }
+ * @fires arvea-existing-remove  fired when the existingImageUrl preview is removed
+ */
+declare class ArveaFileUpload extends LitElement {
+    static styles: lit.CSSResult[];
+    accept?: string;
+    multiple: boolean;
+    maxSize?: number;
+    maxFiles?: number;
+    disabled: boolean;
+    label: string;
+    description: string;
+    files: File[];
+    showPreview: boolean;
+    progress: Record<string, number>;
+    existingImageUrl?: string;
+    private _dragActive;
+    private _previews;
+    private _input?;
+    disconnectedCallback(): void;
+    private _accepts;
+    private _reject;
+    private _processFiles;
+    private _refreshPreviews;
+    private _onSelect;
+    private _onDrop;
+    private _onDragOver;
+    private _onDragLeave;
+    private _remove;
+    private _open;
+    private _zoomEl;
+    private _openZoom;
+    private _replaceFile;
+    private _closeZoom;
+    private _onZoomKey;
+    private _singleImagePreview;
+    private _removeExisting;
+    private _boxPreview;
+    render(): lit_html.TemplateResult<1>;
+    private _renderBoxImage;
+    private _renderFile;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'arvea-file-upload': ArveaFileUpload;
+    }
+}
+
+type ArveaImageFit = 'cover' | 'contain' | 'fill' | 'none';
+
+/**
+ * @element arvea-image
+ *
+ * Displays an image with an optional click-to-zoom lightbox.
+ *
+ * @prop {string}          src      - Image URL
+ * @prop {string}          alt      - Alt text
+ * @prop {string}          width    - CSS width of the image (e.g. "320px", "100%")
+ * @prop {string}          height   - CSS height of the image (e.g. "200px")
+ * @prop {ArveaImageFit}   fit      - object-fit value (cover | contain | fill | none)
+ * @prop {string}          radius   - Border radius (e.g. "8px", "50%")
+ * @prop {boolean}         zoomable - Enable click-to-zoom lightbox (default true)
+ * @prop {string}          caption  - Optional caption shown below the image
+ */
+declare class ArveaImage extends LitElement {
+    static styles: lit.CSSResult[];
+    src: string;
+    alt: string;
+    width: string;
+    height: string;
+    fit: ArveaImageFit;
+    radius: string;
+    zoomable: boolean;
+    caption: string;
+    private _lightboxEl;
+    disconnectedCallback(): void;
+    private _openLightbox;
+    private _closeLightbox;
+    private _onKey;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'arvea-image': ArveaImage;
+    }
+}
+
+type ArveaDatePickerMode = 'single' | 'range';
+interface ArveaDateRange {
+    from?: string;
+    to?: string;
+}
+type ArveaDatePickerValue = string | ArveaDateRange;
+interface ArveaDatePickerProps {
+    value?: ArveaDatePickerValue;
+    mode?: ArveaDatePickerMode;
+    min?: string;
+    max?: string;
+    disabled?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    locale?: string;
+    firstDayOfWeek?: number;
+    format?: string;
+    placeholder?: string;
+    label?: string;
+    hideLabel?: boolean;
+    validationHint?: string;
+    disabledDates?: (date: Date) => boolean;
+}
+
+/**
+ * @element arvea-date-picker
+ *
+ * Single-date or range date picker. ISO-8601 (YYYY-MM-DD) strings on the wire,
+ * localized labels in the calendar via Intl.
+ *
+ * @fires arvea-date-change { value }
+ */
+declare class ArveaDatePicker extends LitElement {
+    static styles: lit.CSSResult[];
+    label: string;
+    hideLabel: boolean;
+    value?: ArveaDatePickerValue;
+    mode: ArveaDatePickerMode;
+    min?: string;
+    max?: string;
+    disabled: boolean;
+    required: boolean;
+    invalid: boolean;
+    locale?: string;
+    firstDayOfWeek: number;
+    format?: string;
+    placeholder: string;
+    validationHint: string;
+    disabledDates?: (d: Date) => boolean;
+    open: boolean;
+    closeOnSelect: boolean;
+    private _viewMonth;
+    private _viewLevel;
+    private _rangeAnchor;
+    private _hoverDate;
+    private _popup?;
+    private _onDocPointer;
+    private _onWinResize;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    private _refDate;
+    private _open;
+    private _close;
+    private _positionPopup;
+    private get _localeFormatter();
+    private _formatValue;
+    private _isDisabled;
+    private _isMonthDisabled;
+    private _isYearDisabled;
+    private _selected;
+    private _pick;
+    private _emit;
+    private _headerLabel;
+    private _yearGridStart;
+    private _navPrev;
+    private _navNext;
+    private _headerLabelClick;
+    private _renderHeader;
+    private _renderDays;
+    private _renderMonths;
+    private _renderYears;
+    private _renderCalendar;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'arvea-date-picker': ArveaDatePicker;
+    }
+}
+
+/**
+ * @element arvea-time-select
+ *
+ * Time-of-day picker made of independent hour/minute/second selects — each
+ * segment opens and closes its own dropdown, rather than one shared popup or
+ * free typing. "HH:mm" (or "HH:mm:ss" with `show-seconds`) 24h strings on the wire.
+ *
+ * @fires arvea-time-change { value }
+ */
+declare class ArveaTimeSelect extends LitElement {
+    static styles: lit.CSSResult[];
+    label: string;
+    hideLabel: boolean;
+    value: string;
+    showSeconds: boolean;
+    hourStep: number;
+    minuteStep: number;
+    secondStep: number;
+    min?: string;
+    max?: string;
+    disabled: boolean;
+    required: boolean;
+    invalid: boolean;
+    validationHint: string;
+    private _openSegment;
+    private _flipUp;
+    private _onDocPointer;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _toggle;
+    private _positionAndScroll;
+    private _current;
+    private _bestCase;
+    private _isDisabled;
+    private _pick;
+    private _emit;
+    private _renderSegment;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'arvea-time-select': ArveaTimeSelect;
+    }
+}
+
+interface ArveaTreeNode {
+    key: string;
+    label: string;
+    children?: ArveaTreeNode[];
+    isLeaf?: boolean;
+    disabled?: boolean;
+    icon?: string;
+}
+type ArveaTreeSelection = 'none' | 'single' | 'multiple';
+interface ArveaTreeProps {
+    nodes?: ArveaTreeNode[];
+    expandedKeys?: string[];
+    selectedKeys?: string[];
+    selectable?: ArveaTreeSelection;
+    checkable?: boolean;
+    loadChildren?: (node: ArveaTreeNode) => Promise<ArveaTreeNode[]>;
+    disabled?: boolean;
+    showLine?: boolean;
+    checkedKeys?: string[];
+}
+
+/**
+ * @element arvea-tree
+ *
+ * Collapsible tree with optional checkboxes and async children loading.
+ *
+ * @fires arvea-tree-expand  { key, expanded }
+ * @fires arvea-tree-select  { selectedKeys, node }
+ * @fires arvea-tree-check   { checkedKeys, node }
+ */
+declare class ArveaTree extends LitElement {
+    static styles: lit.CSSResult[];
+    nodes: ArveaTreeNode[];
+    expandedKeys: string[];
+    selectedKeys: string[];
+    checkedKeys: string[];
+    selectable: ArveaTreeSelection;
+    checkable: boolean;
+    loadChildren?: (node: ArveaTreeNode) => Promise<ArveaTreeNode[]>;
+    disabled: boolean;
+    showLine: boolean;
+    private _loadingKeys;
+    private _loadedChildren;
+    private _expandedSet;
+    private _selectedSet;
+    private _checkedSet;
+    willUpdate(): void;
+    private _hasChildren;
+    private _childrenOf;
+    private _toggleExpand;
+    private _select;
+    private _flattenChildKeys;
+    private _checkState;
+    private _toggleCheck;
+    private _renderNode;
+    render(): TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'arvea-tree': ArveaTree;
+    }
+}
+
+interface ArveaSidebarItem {
+    id: string;
+    label: string;
+    icon?: string;
+    iconVariant?: 'outline' | 'filled';
+    badge?: string;
+    badgeVariant?: 'new' | 'warning' | 'default';
+    children?: ArveaSidebarItem[];
+    disabled?: boolean;
+}
+interface ArveaSidebarSection {
+    title?: string;
+    items: ArveaSidebarItem[];
+}
+interface ArveaSidebarProps {
+    logoSrc?: string;
+    title?: string;
+    items?: ArveaSidebarItem[];
+    sections?: ArveaSidebarSection[];
+}
+
+/**
+ * @element arvea-sidebar
+ *
+ * @prop {string}             logo-src - URL of the logo image shown in the teal header
+ * @prop {string}             title    - Section title shown above nav items (e.g. "ADMIN")
+ * @prop {ArveaSidebarItem[]} items    - Flat array of nav items (each may have children)
+ *
+ * @slot logo    - Custom logo content (overrides logo-src)
+ * @slot actions - Right side of the header (e.g. settings icon)
+ * @slot user    - User profile card shown below the header, above the nav items (hidden while collapsed)
+ *
+ * @prop {string}             active-id - Externally-controlled active item id (syncs highlight + auto-expands its group)
+ *
+ * @fires arvea-sidebar-select - { detail: { item: ArveaSidebarItem } }
+ * @fires arvea-sidebar-toggle - { detail: { collapsed: boolean } }
+ *
+ * @cssprop --sidebar-width           - Sidebar width when open (default 300px)
+ * @cssprop --sidebar-width-collapsed - Sidebar width when closed, icons only (default 72px)
+ * @cssprop --sidebar-logo-height     - Logo image height (default 28px)
+ * @cssprop --sidebar-logo-max-width  - Logo image max-width (default 120px)
+ */
+declare class ArveaSidebar extends LitElement {
+    static styles: lit.CSSResult[];
+    logoSrc: string;
+    title: string;
+    items: ArveaSidebarItem[];
+    sections: ArveaSidebarSection[];
+    collapsed: boolean;
+    activeId: string;
+    private _activeId;
+    private _expanded;
+    private _hasLogoSlot;
+    private _hasUserSlot;
+    willUpdate(changed: Map<string, unknown>): void;
+    private _expandGroupContaining;
+    private _toggle;
+    private _toggleCollapsed;
+    private _onNavItemClick;
+    private _select;
+    private _onLogoSlotChange;
+    private _onUserSlotChange;
+    private _renderBadge;
+    private _renderSubItem;
+    private _renderItem;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'arvea-sidebar': ArveaSidebar;
+    }
+}
+
+export { type ArveaDrawerPlacement as $, ArveaAccordion as A, type ArveaCarouselProps as B, ArveaCheckbox as C, ArveaDataTable as D, type ArveaDataTableAlign as E, type ArveaDataTableBadge as F, type ArveaDataTableColumn as G, type ArveaDataTableProps as H, type IconName as I, type ArveaDataTableSort as J, type ArveaDataTableSortDirection as K, ArveaDatePicker as L, type ArveaDatePickerMode as M, type ArveaDatePickerProps as N, type ArveaDatePickerValue as O, type PhoneCountry as P, type ArveaDateRange as Q, ArveaDialog as R, type ArveaDialogProps as S, type ArveaDialogSize as T, ArveaDivider as U, type ArveaDividerAlign as V, type ArveaDividerEmphasis as W, type ArveaDividerOrientation as X, type ArveaDividerProps as Y, type ArveaDividerVariant as Z, ArveaDrawer as _, type IconSize as a, type ArveaSidebarSection as a$, type ArveaDrawerProps as a0, type ArveaDrawerSize as a1, type ArveaDropdownItem as a2, ArveaDropdownMenu as a3, type ArveaDropdownMenuProps as a4, type ArveaDropdownPlacement as a5, ArveaEmptyState as a6, type ArveaEmptyStateProps as a7, type ArveaEmptyStateSize as a8, ArveaFileUpload as a9, type ArveaPopoverProps as aA, type ArveaPopoverTrigger as aB, ArveaProductCard as aC, ArveaProgressBar as aD, type ArveaProgressBarProps as aE, type ArveaProgressSize as aF, ArveaQuantitySelector as aG, type ArveaQuantitySelectorProps as aH, type ArveaQuantitySize as aI, ArveaRadio as aJ, ArveaRating as aK, type ArveaRatingProps as aL, type ArveaRatingSize as aM, ArveaSearchBar as aN, type ArveaSearchBarProps as aO, type ArveaSearchSize as aP, type ArveaSearchSuggestion as aQ, ArveaSegmentedControl as aR, type ArveaSegmentedControlItem as aS, type ArveaSegmentedControlProps as aT, type ArveaSegmentedControlSize as aU, ArveaSelect as aV, type ArveaSelectOption as aW, type ArveaSelectProps as aX, ArveaSidebar as aY, type ArveaSidebarItem as aZ, type ArveaSidebarProps as a_, ArveaFormField as aa, type ArveaFormFieldProps as ab, type ArveaFormFieldStatus as ac, ArveaIcon as ad, ArveaImage as ae, type ArveaImageFit as af, ArveaInput as ag, type ArveaInputProps as ah, type ArveaInputTextAlign as ai, type ArveaInputType as aj, ArveaLightbox as ak, type ArveaLightboxItem as al, type ArveaLightboxProps as am, ArveaMediaCard as an, ArveaOtpInput as ao, type ArveaOtpInputProps as ap, type ArveaOtpType as aq, ArveaPagination as ar, type ArveaPaginationProps as as, type ArveaPaginationSize as at, ArveaPhoneNumber as au, ArveaPopconfirm as av, type ArveaPopconfirmProps as aw, type ArveaPopconfirmVariant as ax, ArveaPopover as ay, type ArveaPopoverPlacement as az, type PhoneLanguage as b, ArveaSkeleton as b0, ArveaSkeletonCard as b1, type ArveaSkeletonCardPreset as b2, type ArveaSkeletonCardProps as b3, type ArveaSkeletonCardVariant as b4, type ArveaSkeletonProps as b5, type ArveaSkeletonShape as b6, ArveaSlider as b7, ArveaSpinner as b8, type ArveaSpinnerProps as b9, type ArveaTooltipPlacement as bA, type ArveaTooltipProps as bB, ArveaTree as bC, type ArveaTreeNode as bD, type ArveaTreeProps as bE, type ArveaTreeSelection as bF, type BadgeVariant as bG, type ButtonVariant as bH, COUNTRIES as bI, type TableColumn as bJ, findCountry as bK, flagUrl as bL, resolveCountry as bM, type ArveaSpinnerSize as ba, ArveaStepper as bb, type ArveaStepperOrientation as bc, type ArveaStepperProps as bd, type ArveaStepperStep as be, type ArveaTabItem as bf, ArveaTable as bg, type ArveaTableProps as bh, type ArveaTableRow as bi, ArveaTabs as bj, type ArveaTabsProps as bk, type ArveaTabsVariant as bl, ArveaTag as bm, type ArveaTagValidator as bn, ArveaTagsInput as bo, type ArveaTagsInputProps as bp, ArveaTextarea as bq, ArveaTimeSelect as br, ArveaToast as bs, ArveaToastContainer as bt, type ArveaToastOptions as bu, type ArveaToastPosition as bv, type ArveaToastProps as bw, type ArveaToastVariant as bx, ArveaToggle as by, ArveaTooltip as bz, ArveaAccordionItem as c, ArveaActionButton as d, type ArveaActionButtonSize as e, ArveaAlert as f, type ArveaAlertProps as g, type ArveaAlertVariant as h, ArveaAvatar as i, type ArveaAvatarProps as j, type ArveaAvatarSize as k, type ArveaAvatarVariant as l, ArveaBadge as m, type ArveaBadgeProps as n, ArveaBreadcrumb as o, type ArveaBreadcrumbItem as p, type ArveaBreadcrumbProps as q, type ArveaBreadcrumbSeparator as r, ArveaButton as s, type ArveaButtonProps as t, type ArveaButtonSize as u, ArveaCard as v, type ArveaCardProps as w, type ArveaCardVariant as x, ArveaCarousel as y, type ArveaCarouselArrowPosition as z };