aeico-components 0.1.1

package/dist/types/alert/alert.d.ts

@@ -0,0 +1,49 @@
+import type { InferProps, Props } from 'aeico';
+import AeicoComponent from '../aeico-component';
+import type { AlertColor, AlertSize, AlertVariant } from './defines';
+/**
+ * Alert Component
+ *
+ * A customizable alert/notification component with multiple variants and sizes.
+ * Supports dismissible alerts and icon display.
+ *
+ * @example
+ * ```typescript
+ * // Using the static create method
+ * const alert = Alert.create({
+ *   variant: 'info',
+ *   dismissible: true
+ * })
+ * alert.textContent = 'This is an informational message'
+ * document.body.appendChild(alert)
+ * ```
+ *
+ * @example
+ * ```html
+ * <!-- Using as Web Component -->
+ * <ae-alert variant="info">Information message</ae-alert>
+ * <ae-alert variant="success" dismissible>Operation successful!</ae-alert>
+ * <ae-alert variant="warning" size="sm">Small warning</ae-alert>
+ * ```
+ */
+declare class Alert extends AeicoComponent {
+    static props: Props;
+    protected static useStyles: string[];
+    protected static styles: string[];
+    color?: AlertColor;
+    variant?: AlertVariant;
+    size?: AlertSize;
+    dismissible?: boolean;
+    invisible?: boolean;
+    protected render(): import("aeico-view").RenderResult;
+    show(): void;
+    hide(): void;
+    private _handleClose;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ae-alert': Alert;
+    }
+}
+export default Alert;
+export type AlertProps = InferProps<typeof Alert>;

package/dist/types/alert/defines.d.ts

@@ -0,0 +1,3 @@
+export type AlertVariant = 'subtle' | 'faint' | 'filled' | 'outlined';
+export type AlertSize = 'sm' | 'md' | 'lg';
+export type AlertColor = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark';

package/dist/types/alert/index.d.ts

@@ -0,0 +1,3 @@
+export { default, default as Alert } from './alert';
+export type { AlertProps } from './alert';
+export type { AlertColor, AlertSize, AlertVariant } from './defines';

package/dist/types/badge/badge.d.ts

@@ -0,0 +1,34 @@
+import type { InferProps } from 'aeico';
+import AeicoComponent from '../aeico-component';
+import type { BadgeColor, BadgeSize, BadgeVariant } from './defines';
+/**
+ * Badge Component
+ *
+ * A small inline label for status, category, or count indicators.
+ * Supports color, variant, size, and an optional leading/trailing ae-icon slot.
+ *
+ * @example
+ * ```html
+ * <ae-badge color="primary">New</ae-badge>
+ * <ae-badge variant="outlined" color="success">Active</ae-badge>
+ * <ae-badge variant="subtle" color="danger" size="sm">
+ *   <ae-icon slot="start" name="warning"></ae-icon>
+ *   Error
+ * </ae-badge>
+ * ```
+ */
+declare class Badge extends AeicoComponent {
+    protected static styles: string[];
+    accessor color: BadgeColor;
+    accessor variant: BadgeVariant;
+    accessor size: BadgeSize;
+    accessor pill: boolean;
+    protected render(): import("aeico-view").RenderResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ae-badge': Badge;
+    }
+}
+export default Badge;
+export type BadgeProps = InferProps<typeof Badge>;

package/dist/types/badge/defines.d.ts

@@ -0,0 +1,3 @@
+export type BadgeColor = 'default' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark';
+export type BadgeVariant = 'filled' | 'outlined' | 'faint' | 'subtle' | 'text';
+export type BadgeSize = '3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg';

package/dist/types/badge/index.d.ts

@@ -0,0 +1,3 @@
+export { default, default as Badge } from './badge';
+export type { BadgeProps } from './badge';
+export type { BadgeColor, BadgeSize, BadgeVariant } from './defines';

package/dist/types/breadcrumb/breadcrumb-item.d.ts

@@ -0,0 +1,31 @@
+import type { InferProps } from 'aeico';
+import AeicoComponent from '../aeico-component';
+/**
+ * BreadcrumbItem Component
+ *
+ * A single item in the `ae-breadcrumb` navigation trail.
+ * Renders as a link (`<a>`) when `href` is provided, otherwise as plain text.
+ * The separator is injected by the parent `ae-breadcrumb`.
+ *
+ * @example
+ * ```html
+ * <ae-breadcrumb>
+ *   <ae-breadcrumb-item href="/">Home</ae-breadcrumb-item>
+ *   <ae-breadcrumb-item href="/docs">Docs</ae-breadcrumb-item>
+ *   <ae-breadcrumb-item>Current Page</ae-breadcrumb-item>
+ * </ae-breadcrumb>
+ * ```
+ */
+declare class BreadcrumbItem extends AeicoComponent {
+    static tagName: string;
+    protected static styles: string[];
+    accessor href: string | undefined;
+    protected render(): import("aeico-view").RenderResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ae-breadcrumb-item': BreadcrumbItem;
+    }
+}
+export default BreadcrumbItem;
+export type BreadcrumbItemProps = InferProps<typeof BreadcrumbItem>;

package/dist/types/breadcrumb/breadcrumb.d.ts

@@ -0,0 +1,60 @@
+import type { InferProps } from 'aeico';
+import AeicoComponent from '../aeico-component';
+/**
+ * Breadcrumb Component
+ *
+ * A navigation trail that shows the user's location in a hierarchy.
+ * Automatically injects separators between items and marks the last item
+ * as `aria-current="page"`.
+ *
+ * The separator is configurable via:
+ * - `separator` attribute (text, default `/`) — simple and concise
+ * - `slot="separator"` (any element, e.g. `ae-icon`) — takes priority over the attribute
+ *
+ * Supports `color` for theming item link colors. The separator intentionally
+ * uses a fixed muted color and does NOT respond to the `color` prop.
+ *
+ * @example
+ * ```html
+ * <!-- Default separator "/" -->
+ * <ae-breadcrumb>
+ *   <ae-breadcrumb-item href="/">Home</ae-breadcrumb-item>
+ *   <ae-breadcrumb-item href="/docs">Docs</ae-breadcrumb-item>
+ *   <ae-breadcrumb-item>Getting Started</ae-breadcrumb-item>
+ * </ae-breadcrumb>
+ *
+ * <!-- Custom text separator -->
+ * <ae-breadcrumb separator=">">
+ *   <ae-breadcrumb-item href="/">Home</ae-breadcrumb-item>
+ *   <ae-breadcrumb-item>Current</ae-breadcrumb-item>
+ * </ae-breadcrumb>
+ *
+ * <!-- Icon separator (slot takes priority over separator attribute) -->
+ * <ae-breadcrumb>
+ *   <ae-icon slot="separator" name="chevron-right" size="xs"></ae-icon>
+ *   <ae-breadcrumb-item href="/">Home</ae-breadcrumb-item>
+ *   <ae-breadcrumb-item>Current</ae-breadcrumb-item>
+ * </ae-breadcrumb>
+ * ```
+ */
+declare class Breadcrumb extends AeicoComponent {
+    static tagName: string;
+    protected static styles: string[];
+    /** Text separator shown between items. Ignored when `slot="separator"` is provided. */
+    accessor separator: string;
+    accessor color: string | undefined;
+    private _itemsSlot;
+    private _sepSlot;
+    protected render(): import("aeico-view").RenderResult;
+    protected onUpdated(): void;
+    private _getItems;
+    private _getSepElement;
+    private _syncSeparators;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ae-breadcrumb': Breadcrumb;
+    }
+}
+export default Breadcrumb;
+export type BreadcrumbProps = InferProps<typeof Breadcrumb>;

package/dist/types/breadcrumb/defines.d.ts

@@ -0,0 +1 @@
+export type BreadcrumbColor = 'default' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark';

package/dist/types/breadcrumb/index.d.ts

@@ -0,0 +1,5 @@
+export { default, default as Breadcrumb } from './breadcrumb';
+export { default as BreadcrumbItem } from './breadcrumb-item';
+export type { BreadcrumbProps } from './breadcrumb';
+export type { BreadcrumbItemProps } from './breadcrumb-item';
+export type { BreadcrumbColor } from './defines';

package/dist/types/button/button.d.ts

@@ -0,0 +1,60 @@
+import type { InferProps } from 'aeico';
+import AeicoComponent from '../aeico-component';
+import { ButtonColor, ButtonSize, ButtonVariant } from './defines';
+/**
+ * Button Component
+ *
+ * A customizable button component with multiple variants and sizes.
+ * Supports theme and internationalization through mixins.
+ *
+ * @example
+ * ```typescript
+ * // Using the static create method
+ * const button = Button.create({
+ *   variant: 'primary',
+ *   size: 'md'
+ * })
+ * ```
+ *
+ * @example
+ * ```html
+ * <!-- Using as Web Component -->
+ * <ae-button variant="primary" size="md">Save</ae-button>
+ * <ae-button variant="danger" size="sm">Delete</ae-button>
+ * <ae-button variant="subtle">Cancel</ae-button>
+ * ```
+ */
+declare class Button extends AeicoComponent {
+    protected static styles: string[];
+    color?: ButtonColor;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    disabled?: boolean;
+    type?: 'button' | 'submit' | 'reset';
+    active?: boolean;
+    block?: boolean;
+    private buttonElement;
+    private _autoAriaLabel;
+    protected onMounted(): void;
+    private _handleSlotChange;
+    protected render(): import("aeico-view").RenderResult;
+    /**
+     * Programmatically click the button
+     */
+    click(): void;
+    /**
+     * Focus the button
+     */
+    focus(): void;
+    /**
+     * Blur the button
+     */
+    blur(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ae-button': Button;
+    }
+}
+export default Button;
+export type ButtonProps = InferProps<typeof Button>;

package/dist/types/button/defines.d.ts

@@ -0,0 +1,3 @@
+export type ButtonColor = 'default' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark';
+export type ButtonVariant = 'filled' | 'outlined' | 'faint' | 'subtle' | 'text';
+export type ButtonSize = '3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg';

package/dist/types/button/index.d.ts

@@ -0,0 +1,3 @@
+export { default, default as Button } from './button';
+export type { ButtonProps } from './button';
+export type { ButtonColor, ButtonSize, ButtonVariant } from './defines';

package/dist/types/button-group/button-group.d.ts

@@ -0,0 +1,56 @@
+import type { InferProps, Props } from 'aeico';
+import AeicoComponent from '../aeico-component';
+import type { ButtonColor, ButtonVariant, ButtonSize } from '../button';
+/**
+ * ButtonGroup Component
+ *
+ * Groups multiple `ae-button` elements, propagating shared `variant`, `color`,
+ * `size`, and `disabled` props to each child. Supports a `compact` mode that
+ * joins buttons into a seamless connected strip (like Bootstrap's button group).
+ *
+ * @example
+ * ```html
+ * <!-- Loose group (gap between buttons) -->
+ * <ae-button-group variant="outlined" color="primary">
+ *   <ae-button>One</ae-button>
+ *   <ae-button>Two</ae-button>
+ *   <ae-button>Three</ae-button>
+ * </ae-button-group>
+ *
+ * <!-- Compact — joined strip -->
+ * <ae-button-group compact color="primary">
+ *   <ae-button>Left</ae-button>
+ *   <ae-button>Middle</ae-button>
+ *   <ae-button>Right</ae-button>
+ * </ae-button-group>
+ *
+ * <!-- Full-width -->
+ * <ae-button-group block color="danger" variant="outlined">
+ *   <ae-button>Delete</ae-button>
+ *   <ae-button>Archive</ae-button>
+ * </ae-button-group>
+ * ```
+ */
+declare class ButtonGroup extends AeicoComponent {
+    static props: Props;
+    protected static styles: string[];
+    variant?: ButtonVariant;
+    color?: ButtonColor;
+    size?: ButtonSize;
+    compact?: boolean;
+    block?: boolean;
+    disabled?: boolean;
+    private slotEl;
+    connectedCallback(): void;
+    protected render(): import("aeico-view").RenderResult;
+    private _getButtons;
+    private _syncChildren;
+    private _clearRadius;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ae-button-group': ButtonGroup;
+    }
+}
+export default ButtonGroup;
+export type ButtonGroupProps = InferProps<typeof ButtonGroup>;

package/dist/types/button-group/index.d.ts

@@ -0,0 +1,2 @@
+export { default, default as ButtonGroup } from './button-group';
+export type { ButtonGroupProps } from './button-group';

package/dist/types/card/card.d.ts

@@ -0,0 +1,19 @@
+import type { InferProps } from 'aeico';
+import AeicoComponent from '../aeico-component';
+import type { CardVariant, CardColor } from './defines';
+declare class Card extends AeicoComponent {
+    static tagName: string;
+    protected static styles: string[];
+    accessor color: CardColor;
+    accessor variant: CardVariant;
+    protected render(): import("aeico-view").RenderResult;
+    private _onHeaderSlotChange;
+    private _onFooterSlotChange;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ae-card': Card;
+    }
+}
+export default Card;
+export type CardProps = InferProps<typeof Card>;

package/dist/types/card/defines.d.ts

@@ -0,0 +1,2 @@
+export type CardVariant = 'subtle' | 'faint' | 'filled' | 'outlined';
+export type CardColor = 'default' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark';

package/dist/types/card/index.d.ts

@@ -0,0 +1,3 @@
+export { default, default as Card } from './card';
+export type { CardProps } from './card';
+export type { CardVariant, CardColor } from './defines';

package/dist/types/checkbox/checkbox.d.ts

@@ -0,0 +1,37 @@
+import AeicoField from '../aeico-field';
+import type { InferProps, Props } from 'aeico';
+import { CheckboxVariant } from './defines';
+declare class Checkbox extends AeicoField {
+    protected fieldElement: HTMLInputElement | null;
+    static tagName: string;
+    static props: Props;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    variant?: CheckboxVariant;
+    protected static styles: string[];
+    protected getValue(): boolean;
+    protected writeValue(checked: boolean): void;
+    protected getEventPayload(checked: boolean, oldChecked: boolean, action: any): {
+        checked: boolean;
+        oldChecked: boolean;
+        action: any;
+    };
+    protected setValue(checked: boolean, options?: {
+        silent?: boolean;
+        action?: any;
+    }): void;
+    reset(checked?: boolean, options?: {
+        silent?: boolean;
+    }): void;
+    clear(options?: {
+        silent?: boolean;
+    }): void;
+    render(): import("aeico-view").RenderResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ae-checkbox': Checkbox;
+    }
+}
+export default Checkbox;
+export type CheckboxProps = InferProps<typeof Checkbox>;

package/dist/types/checkbox/defines.d.ts

@@ -0,0 +1 @@
+export type CheckboxVariant = 'checkbox';

package/dist/types/checkbox/index.d.ts

@@ -0,0 +1,3 @@
+export { default, default as Checkbox } from './checkbox';
+export type { CheckboxVariant } from './defines';
+export type { CheckboxProps } from './checkbox';

package/dist/types/detail/defines.d.ts

@@ -0,0 +1,2 @@
+export type DetailVariant = 'subtle' | 'faint' | 'filled' | 'outlined';
+export type DetailColor = 'default' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark';

package/dist/types/detail/detail.d.ts

@@ -0,0 +1,40 @@
+import type { InferProps } from 'aeico';
+import AeicoComponent from '../aeico-component';
+import type { DetailColor, DetailVariant } from './defines';
+/**
+ * Detail component that can be used to show/hide additional content.
+ *
+ * @example
+ * ```html
+ * <ae-detail summary="Click Me">
+ *  <ae-icon name="plus" slot="expand"></ae-icon>
+ *  <ae-icon name="minus" slot="collapse"></ae-icon>
+ *  Detail.....
+ * </ae-detail>
+ */
+declare class Detail extends AeicoComponent {
+    static tagName: string;
+    protected static styles: string[];
+    accessor summary: string;
+    accessor variant: DetailVariant;
+    accessor color: DetailColor;
+    accessor disabled: boolean;
+    private _open;
+    /** Opens the detail panel. */
+    open(): void;
+    /** Closes the detail panel. */
+    close(): void;
+    /** Toggles the detail panel open/closed. */
+    toggle(): void;
+    /** Returns whether the detail panel is currently open. */
+    isOpen(): boolean;
+    private _handleSummaryClick;
+    protected render(): import("aeico-view").RenderResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ae-detail': Detail;
+    }
+}
+export default Detail;
+export type DetailProps = InferProps<typeof Detail>;

package/dist/types/detail/index.d.ts

@@ -0,0 +1,3 @@
+export { default, default as Detail } from './detail';
+export type { DetailProps } from './detail';
+export type { DetailVariant, DetailColor } from './defines';

package/dist/types/dialog/dialog.d.ts

@@ -0,0 +1,29 @@
+import type { InferProps, Props } from 'aeico';
+import AeicoComponent from '../aeico-component';
+declare class Dialog extends AeicoComponent {
+    static props: Props;
+    label?: string;
+    width?: string;
+    height?: string;
+    modal?: boolean;
+    closable?: boolean;
+    header?: boolean;
+    closeOnOverlayClick?: boolean;
+    protected static styles: string[];
+    private _dialogEl;
+    private _hasFooter;
+    protected render(): import("aeico-view").RenderResult;
+    private _handleDialogClick;
+    private _handleNativeClose;
+    private _handleFooterSlotChange;
+    open(): void;
+    close(): void;
+    isOpen(): boolean;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ae-dialog': Dialog;
+    }
+}
+export default Dialog;
+export type DialogProps = InferProps<typeof Dialog>;

package/dist/types/dialog/index.d.ts

@@ -0,0 +1,2 @@
+export { default, default as Dialog } from './dialog';
+export type { DialogProps } from './dialog';

package/dist/types/divider/divider.d.ts

@@ -0,0 +1,34 @@
+import AeicoComponent from '../aeico-component';
+import type { InferProps } from 'aeico';
+/**
+ * A simple divider component that can be used to separate content. It supports both horizontal and vertical orientations, as well as customizable thickness and color.
+ * @example
+ * ```html
+ * <ae-divider></ae-divider>
+ * <ae-divider vertical></ae-divider>
+ * <ae-divider thickness="4px" color="primary"></ae-divider>
+ * ```
+ * @props
+ * - `vertical` (boolean): If true, the divider will be vertical. Default is false (horizontal).
+ * - `thickness` (string): Custom thickness for the divider (e.g., "2px", "0.5rem"). If not provided, it will use the default thickness defined in CSS.
+ * - `color` (string): Color variant for the divider (e.g., "primary", "secondary"). If not provided, it will use the default color defined in CSS.
+ *
+ * @csspart divider - The main divider element that can be styled.
+ *
+ * @cssproperty --thickness - Custom property to set the thickness of the divider when the `thickness` prop is used.
+ */
+declare class Divider extends AeicoComponent {
+    static tagName: string;
+    accessor vertical: boolean;
+    accessor thickness: string | undefined;
+    accessor color: string | undefined;
+    protected static styles: string[];
+    protected render(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ae-divider': Divider;
+    }
+}
+export default Divider;
+export type DividerProps = InferProps<typeof Divider>;

package/dist/types/divider/index.d.ts

@@ -0,0 +1,2 @@
+export { default, default as Divider } from './divider';
+export type { DividerProps } from './divider';

package/dist/types/dropdown/defines.d.ts

@@ -0,0 +1 @@
+export type DropdownPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';

package/dist/types/dropdown/dropdown-button.d.ts

@@ -0,0 +1,60 @@
+import AeicoComponent from '../aeico-component';
+import type { InferProps } from 'aeico';
+import type { ButtonColor, ButtonSize, ButtonVariant } from '../button/defines';
+import type { DropdownPlacement } from './defines';
+import './dropdown';
+import '../button/button';
+/**
+ * DropdownButton — a pre-composed trigger + dropdown panel.
+ *
+ * Renders an `ae-button`-styled trigger with a built-in chevron,
+ * and a floating panel for `<ae-dropdown-item>` children.
+ * Accepts the same `variant`, `color`, `size`, and `disabled` props
+ * as `ae-button`, making it a drop-in inside `ae-button-group`.
+ *
+ * @example
+ * ```html
+ * <ae-dropdown-button variant="outlined" color="primary">
+ *   Actions
+ *   <ae-dropdown-item value="edit">Edit</ae-dropdown-item>
+ *   <ae-dropdown-item value="delete">Delete</ae-dropdown-item>
+ * </ae-dropdown-button>
+ *
+ * <!-- Inside ae-button-group -->
+ * <ae-button-group compact color="primary">
+ *   <ae-button>Save</ae-button>
+ *   <ae-dropdown-button placement="bottom-end">
+ *     <ae-dropdown-item value="draft">Save as draft</ae-dropdown-item>
+ *     <ae-dropdown-item value="template">Save as template</ae-dropdown-item>
+ *   </ae-dropdown-button>
+ * </ae-button-group>
+ * ```
+ *
+ * Emits:
+ * - `open`   — when the panel opens
+ * - `close`  — when the panel closes
+ * - `select` — `{ detail: { value, label } }` when a menu item is selected
+ */
+declare class DropdownButton extends AeicoComponent {
+    static tagName: string;
+    protected static styles: string[];
+    accessor variant: ButtonVariant;
+    accessor color: ButtonColor;
+    accessor size: ButtonSize;
+    accessor disabled: boolean;
+    accessor placement: DropdownPlacement;
+    accessor closeOnSelect: boolean;
+    private _dropdownEl;
+    show(): void;
+    hide(): void;
+    toggle(): void;
+    get open(): boolean;
+    protected render(): import("aeico-view").RenderResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ae-dropdown-button': DropdownButton;
+    }
+}
+export default DropdownButton;
+export type DropdownButtonProps = InferProps<typeof DropdownButton>;

package/dist/types/dropdown/dropdown-item.d.ts

@@ -0,0 +1,56 @@
+import AeicoComponent from '../aeico-component';
+import type { InferProps } from 'aeico';
+import '../icon/icon';
+/**
+ * Dropdown menu item — used as a direct child of `<ae-dropdown>`.
+ *
+ * Renders as a `<button>` by default, or as an `<a>` anchor when `href` is set.
+ * Use `<ae-icon>` inside to add icons, and CSS `color` / `--dropdown-item-color`
+ * to apply danger or custom colours.
+ *
+ * @example
+ * ```html
+ * <ae-dropdown-item value="edit"><ae-icon name="edit"></ae-icon>Edit</ae-dropdown-item>
+ * <ae-dropdown-item value="delete" style="--dropdown-item-color:var(--color-danger)">Delete</ae-dropdown-item>
+ * <ae-dropdown-item href="/profile">Profile</ae-dropdown-item>
+ * ```
+ */
+declare class DropdownItem extends AeicoComponent {
+    static tagName: string;
+    /** Value emitted in the `select` event detail on the parent dropdown. */
+    accessor value: string | undefined;
+    /** Disables the item — it becomes non-interactive and visually dimmed. */
+    accessor disabled: boolean;
+    /**
+     * When set, the item renders as an `<a>` anchor element instead of a
+     * `<button>`. Useful for navigation items.
+     */
+    accessor href: string | undefined;
+    /**
+     * When `type="checkbox"`, the item behaves as a toggle: each click flips
+     * `checked` and includes the new state in the `select` event detail.
+     */
+    accessor type: 'checkbox' | undefined;
+    /**
+     * Whether the item is checked. Only meaningful when `type="checkbox"`.
+     * Reflects as the `checked` attribute.
+     */
+    accessor checked: boolean;
+    /**
+     * Marks the item as the currently active/selected option (e.g. current route,
+     * current sort order). Purely visual — applies a highlighted background and
+     * accent colour.
+     */
+    accessor active: boolean;
+    protected static styles: string[];
+    connectedCallback(): void;
+    private _handleClick;
+    protected render(): import("aeico-view").RenderResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ae-dropdown-item': DropdownItem;
+    }
+}
+export default DropdownItem;
+export type DropdownItemProps = InferProps<typeof DropdownItem>;