@juligc99/loro-ui 0.0.15 → 0.0.17

package/types/juligc99-loro-ui.d.ts

@@ -1,5 +1,4 @@
 import * as _angular_core from '@angular/core';
-import { LoroIconName as LoroIconName$1, LoroIconSize as LoroIconSize$1, LoroIconRenderMode as LoroIconRenderMode$1, LoroIconColor as LoroIconColor$1 } from '@loro-ui/components/resources/loro-icon';
 import * as _juligc99_loro_ui from '@juligc99/loro-ui';
 import { FormValueControl, WithOptionalFieldTree, ValidationError, FormCheckboxControl } from '@angular/forms/signals';
 
@@ -8,249 +7,6 @@ declare class Footer {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<Footer, "loro-footer", never, {}, {}, never, never, true, never>;
 }
 
-declare class LoroAccordion {
-    title: _angular_core.InputSignal<string>;
-    icon: _angular_core.InputSignal<LoroIconName$1 | null>;
-    expanded: _angular_core.InputSignal<boolean>;
-    expandedChange: _angular_core.OutputEmitterRef<boolean>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroAccordion, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroAccordion, "loro-accordion", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; }, { "expandedChange": "expandedChange"; }, never, ["*"], true, never>;
-}
-
-interface LoroAppNavItem {
-    id: string;
-    label: string;
-    icon: LoroIconName$1;
-    active?: boolean;
-    badge?: string | number | null;
-    disabled?: boolean;
-}
-interface LoroAppNavClick {
-    item: LoroAppNavItem;
-    section: 'main' | 'utility';
-}
-declare class LoroAppNav {
-    private readonly haptics;
-    private readonly draggedMobileIndex;
-    private readonly mobilePointerActive;
-    private activePointerId;
-    private suppressNextMobileClick;
-    items: _angular_core.InputSignal<LoroAppNavItem[]>;
-    utilityItems: _angular_core.InputSignal<LoroAppNavItem[]>;
-    ariaLabel: _angular_core.InputSignal<string>;
-    showUtilityItems: _angular_core.InputSignal<boolean>;
-    compactDesktop: _angular_core.InputSignal<boolean>;
-    itemClick: _angular_core.OutputEmitterRef<LoroAppNavItem>;
-    utilityItemClick: _angular_core.OutputEmitterRef<LoroAppNavItem>;
-    navItemClick: _angular_core.OutputEmitterRef<LoroAppNavClick>;
-    protected readonly desktopItems: _angular_core.Signal<LoroAppNavItem[]>;
-    protected readonly mobileItems: _angular_core.Signal<LoroAppNavItem[]>;
-    protected readonly mobileVisualSlotCount: _angular_core.Signal<number>;
-    private readonly selectedMobileIndex;
-    protected readonly mobileSliderPosition: _angular_core.Signal<number>;
-    protected readonly isMobileDragging: _angular_core.Signal<boolean>;
-    protected readonly mobileItemCount: _angular_core.Signal<number>;
-    protected readonly selectedMobileItemId: _angular_core.Signal<string>;
-    protected isMobileItemVisualActive(index: number): boolean;
-    onMainItemClick(item: LoroAppNavItem): void;
-    protected onMobileItemClick(item: LoroAppNavItem): void;
-    protected onMobilePointerDown(event: PointerEvent): void;
-    protected onMobilePointerMove(event: PointerEvent): void;
-    protected onMobilePointerUp(event: PointerEvent): void;
-    protected onMobilePointerCancel(event: PointerEvent): void;
-    onUtilityItemClick(item: LoroAppNavItem): void;
-    private emitMainItem;
-    private getMobileVisualSlotPosition;
-    protected mobileItemGridColumn(index: number): number;
-    private mobileItemIndexToVisualSlot;
-    private getNearestEnabledMobileIndex;
-    private releaseMobilePointer;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroAppNav, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroAppNav, "loro-app-nav", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "utilityItems": { "alias": "utilityItems"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "showUtilityItems": { "alias": "showUtilityItems"; "required": false; "isSignal": true; }; "compactDesktop": { "alias": "compactDesktop"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; "utilityItemClick": "utilityItemClick"; "navItemClick": "navItemClick"; }, never, never, true, never>;
-}
-
-/**
- * LoroButton Type Definitions
- *
- * Centralized type definitions for the LoroButton component.
- * Use these types for consistency across the application.
- *
- * @example
- * const config: LoroButtonConfig = {
- *   variant: 'primary',
- *   size: 'md',
- *   disabled: false,
- * };
- */
-/**
- * Visual variant style of the button
- * @type {'primary' | 'outline' | 'ghost' | 'danger' | 'soft' | 'social' | 'action' | 'navigation'}
- */
-type LoroButtonVariant = 'primary' | 'outline' | 'ghost' | 'danger' | 'soft' | 'social' | 'action' | 'navigation';
-/**
- * Button visual type (semantic grouping)
- * @type {'primary' | 'secondary' | 'tertiary'}
- */
-type LoroButtonType = 'primary' | 'secondary' | 'tertiary';
-/**
- * Button color theme
- * @type {'primary' | 'secondary' | 'tertiary' | 'danger'}
- */
-type LoroButtonColor = 'primary' | 'secondary' | 'tertiary' | 'danger';
-/**
- * Button size preset
- * @type {'sm' | 'md' | 'lg'}
- */
-type LoroButtonSize = 'sm' | 'md' | 'lg';
-/**
- * Button width behavior
- * @type {'fit-content' | 'full'}
- */
-type LoroButtonWidth = 'fit-content' | 'full';
-/**
- * Icon display mode within the button
- * @type {'none' | 'with-icon' | 'only-icon'}
- */
-type LoroButtonIconMode = 'none' | 'with-icon' | 'only-icon';
-/**
- * Button HTML type
- * @type {'button' | 'submit' | 'reset'}
- */
-type LoroButtonHtmlType = 'button' | 'submit' | 'reset';
-
-/**
- * LoroButton Constants
- *
- * Default values, valid options, and configuration constants for the LoroButton component.
- * Update these to maintain consistency across all button usage.
- */
-
-/**
- * Default input values for LoroButton
- */
-declare const LORO_BUTTON_DEFAULTS: {
-    readonly text: "";
-    readonly label: "";
-    readonly variant: "primary";
-    readonly type: "primary";
-    readonly color: "primary";
-    readonly size: "md";
-    readonly fullWidth: false;
-    readonly buttonWidth: "fit-content";
-    readonly disabled: false;
-    readonly loading: false;
-    readonly selected: false;
-    readonly htmlType: "button";
-    readonly iconMode: "none";
-    readonly socialMobileCompact: true;
-    readonly iconSize: 23;
-    readonly iconButtonSize: null;
-    readonly iconColor: "";
-};
-/**
- * Valid options for button variants
- */
-declare const LORO_BUTTON_VARIANTS: readonly LoroButtonVariant[];
-/**
- * Valid options for button types
- */
-declare const LORO_BUTTON_TYPES: readonly LoroButtonType[];
-/**
- * Valid options for button colors
- */
-declare const LORO_BUTTON_COLORS: readonly LoroButtonColor[];
-/**
- * Valid options for button sizes
- */
-declare const LORO_BUTTON_SIZES: readonly LoroButtonSize[];
-/**
- * Valid options for icon modes
- */
-declare const LORO_BUTTON_ICON_MODES: readonly LoroButtonIconMode[];
-/**
- * CSS class names used by LoroButton (BEM notation)
- */
-declare const LORO_BUTTON_CLASSES: {
-    readonly container: "loro-button";
-    readonly variant: (variant: LoroButtonVariant) => string;
-    readonly size: (size: LoroButtonSize) => string;
-    readonly color: (color: LoroButtonColor) => string;
-    readonly width: (width: LoroButtonWidth) => "loro-button--full" | undefined;
-    readonly state: {
-        readonly disabled: "loro-button--disabled";
-        readonly loading: "loro-button--loading";
-        readonly selected: "loro-button--selected";
-    };
-    readonly elements: {
-        readonly label: "loro-button__label";
-        readonly spinner: "loro-button__spinner";
-        readonly srStatus: "loro-button__sr-status";
-    };
-};
-
-/**
- * LoroButton Component
- *
- * A versatile, accessible button component with multiple variants, sizes, and states.
- * Follows Angular 21 best practices with signals, OnPush change detection, and semantic HTML.
- *
- * @example
- * ```html
- * <loro-button
- *   [text]="'Click me'"
- *   variant="primary"
- *   size="md"
- *   (change)="onButtonClick()"
- * />
- * ```
- */
-declare class LoroButton {
-    label: _angular_core.InputSignal<string>;
-    text: _angular_core.InputSignal<string>;
-    icon: _angular_core.InputSignal<LoroIconName$1 | LoroButtonIconMode | null>;
-    iconContent: _angular_core.InputSignal<LoroIconName$1 | null>;
-    iconMode: _angular_core.InputSignal<LoroButtonIconMode>;
-    iconSize: _angular_core.InputSignal<LoroIconSize$1>;
-    iconButtonSize: _angular_core.InputSignal<LoroIconSize$1 | null>;
-    iconColor: _angular_core.InputSignal<string>;
-    socialMobileCompact: _angular_core.InputSignal<boolean>;
-    selected: _angular_core.InputSignal<boolean>;
-    variant: _angular_core.InputSignal<LoroButtonVariant>;
-    typeButton: _angular_core.InputSignal<LoroButtonType>;
-    color: _angular_core.InputSignal<LoroButtonColor>;
-    size: _angular_core.InputSignal<LoroButtonSize>;
-    fullWidth: _angular_core.InputSignal<boolean>;
-    buttonWidth: _angular_core.InputSignal<LoroButtonWidth>;
-    disabled: _angular_core.InputSignal<boolean>;
-    loading: _angular_core.InputSignal<boolean>;
-    type: _angular_core.InputSignal<"button" | "submit" | "reset">;
-    formId: _angular_core.InputSignal<string>;
-    ariaLabel: _angular_core.InputSignal<string>;
-    ariaDescription: _angular_core.InputSignal<string>;
-    buttonClick: _angular_core.OutputEmitterRef<void>;
-    change: _angular_core.OutputEmitterRef<void>;
-    sanChange: _angular_core.OutputEmitterRef<void>;
-    protected readonly resolvedText: _angular_core.Signal<string>;
-    protected readonly resolvedIcon: _angular_core.Signal<LoroIconName$1 | null>;
-    protected readonly resolvedIconMode: _angular_core.Signal<LoroButtonIconMode>;
-    protected readonly resolvedButtonWidth: _angular_core.Signal<LoroButtonWidth>;
-    protected readonly resolvedIconButtonSize: _angular_core.Signal<string>;
-    protected readonly resolvedTypeButton: _angular_core.Signal<LoroButtonType>;
-    protected readonly resolvedColor: _angular_core.Signal<LoroButtonColor>;
-    protected readonly showIcon: _angular_core.Signal<boolean>;
-    protected readonly resolvedAriaLabel: _angular_core.Signal<string | null>;
-    protected readonly resolvedIconColor: _angular_core.Signal<string>;
-    protected readonly resolvedIconRenderMode: _angular_core.Signal<LoroIconRenderMode$1>;
-    protected readonly isDisabled: _angular_core.Signal<boolean>;
-    protected readonly showSpinner: _angular_core.Signal<boolean>;
-    protected readonly loadingAriaLabel: _angular_core.Signal<string>;
-    protected emitChange(): void;
-    protected defaultIconColor(): LoroIconColor$1;
-    private isIconMode;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroButton, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroButton, "loro-button", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconContent": { "alias": "iconContent"; "required": false; "isSignal": true; }; "iconMode": { "alias": "iconMode"; "required": false; "isSignal": true; }; "iconSize": { "alias": "iconSize"; "required": false; "isSignal": true; }; "iconButtonSize": { "alias": "iconButtonSize"; "required": false; "isSignal": true; }; "iconColor": { "alias": "iconColor"; "required": false; "isSignal": true; }; "socialMobileCompact": { "alias": "socialMobileCompact"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "typeButton": { "alias": "typeButton"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "buttonWidth": { "alias": "buttonWidth"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "formId": { "alias": "formId"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaDescription": { "alias": "ariaDescription"; "required": false; "isSignal": true; }; }, { "buttonClick": "buttonClick"; "change": "change"; "sanChange": "sanChange"; }, never, never, true, never>;
-}
-
 type LoroAssetLayer = 'Action' | 'Brand' | 'Direction' | 'Home' | 'Illustrations' | 'Navigation' | 'Product' | 'Products' | 'Screens' | 'Social' | 'Status' | 'Stores';
 type LoroIconAsset = {
     readonly name: string;
@@ -1115,18 +871,281 @@ type LoroImageAssetName = keyof typeof LORO_IMAGE_PATHS;
 type LoroImageLegacyName = keyof typeof LORO_IMAGE_LEGACY_NAMES;
 type LoroImageName = LoroImageAssetName | LoroImageLegacyName;
 
-declare class LoroImage {
-    name: _angular_core.InputSignal<LoroImageName>;
+type LoroIconColorToken = 'default' | 'primary' | 'primary-strong' | 'primary-deep' | 'text' | 'muted' | 'success' | 'danger' | 'warning' | 'inverse';
+type LoroIconColor = LoroIconColorToken | string;
+type LoroIconRenderMode = 'mask' | 'origin';
+type LoroIconSize = number | string;
+declare class LoroIcon {
+    name: _angular_core.InputSignal<LoroIconName>;
+    size: _angular_core.InputSignal<LoroIconSize>;
     alt: _angular_core.InputSignal<string>;
-    size: _angular_core.InputSignal<string>;
-    width: _angular_core.InputSignal<string>;
-    height: _angular_core.InputSignal<string>;
-    fit: _angular_core.InputSignal<"contain" | "cover">;
-    protected readonly assetName: _angular_core.Signal<"image-al-loro-design-library-home-ai" | "image-favicon-apple-touch-icon" | "image-favicon-assets-xcassets-appicon-appiconset-appicon-any" | "image-favicon-assets-xcassets-appicon-appiconset-appicon-dark" | "image-favicon-assets-xcassets-splash-imageset-splash-2732x2732" | "image-favicon-assets-xcassets-splash-imageset-splash-2732x2732-1" | "image-favicon-assets-xcassets-splash-imageset-splash-2732x2732-2" | "image-favicon-assets-xcassets-splash-imageset-splash-dark-2732x2732" | "image-favicon-assets-xcassets-splash-imageset-splash-dark-2732x2732-1" | "image-favicon-assets-xcassets-splash-imageset-splash-dark-2732x2732-2" | "image-favicon-favicon" | "image-home-icon-ai" | "image-home-icon-basket" | "image-home-icon-compare" | "image-home-icon-expiry" | "image-home-icon-pantry" | "image-home-icon-scan" | "image-image-home" | "image-logo-despensa-buy" | "image-logo-list-buy" | "image-loro-apaisado" | "image-loro-apaisado-blanco" | "image-loro-card-buy" | "image-loro-card-caducidad" | "image-loro-card-comparativa" | "image-loro-card-ia" | "image-loro-card-qr" | "image-loro-despensa" | "image-loro-icon-default" | "image-loro-spinner-ring" | "image-loro-tittle-sub" | "image-pantry-cabinet" | "image-pantry-metric-chart" | "image-product-bananas" | "image-product-milk" | "image-product-pasta" | "image-product-rice" | "image-product-tomatoes" | "image-product-yogurt" | "image-store-ahorramas" | "image-store-alcampo" | "image-store-aldi" | "image-store-bonpreu" | "image-store-caprabo" | "image-store-carrefour" | "image-store-consum" | "image-store-coviran" | "image-store-dia" | "image-store-el-corte-ingles" | "image-store-eroski" | "image-store-froiz" | "image-store-gadis" | "image-store-lidl" | "image-store-mercadona">;
-    protected readonly src: _angular_core.Signal<"assets/loro-ui/images/al-loro-design-library-home-ai.png" | "assets/loro-ui/favicons/apple-touch-icon.png" | "assets/loro-ui/favicons/Assets.xcassets/AppIcon.appiconset/AppIcon-Any.png" | "assets/loro-ui/favicons/Assets.xcassets/AppIcon.appiconset/AppIcon-Dark.png" | "assets/loro-ui/favicons/Assets.xcassets/Splash.imageset/splash-2732x2732.png" | "assets/loro-ui/favicons/Assets.xcassets/Splash.imageset/splash-2732x2732-1.png" | "assets/loro-ui/favicons/Assets.xcassets/Splash.imageset/splash-2732x2732-2.png" | "assets/loro-ui/favicons/Assets.xcassets/Splash.imageset/splash-dark-2732x2732.png" | "assets/loro-ui/favicons/Assets.xcassets/Splash.imageset/splash-dark-2732x2732-1.png" | "assets/loro-ui/favicons/Assets.xcassets/Splash.imageset/splash-dark-2732x2732-2.png" | "assets/loro-ui/favicons/favicon.svg" | "assets/loro-ui/images/home-icon-ai.svg" | "assets/loro-ui/images/home-icon-basket.svg" | "assets/loro-ui/images/home-icon-compare.svg" | "assets/loro-ui/images/home-icon-expiry.svg" | "assets/loro-ui/images/home-icon-pantry.svg" | "assets/loro-ui/images/home-icon-scan.svg" | "assets/loro-ui/images/image-home.png" | "assets/loro-ui/images/logo-despensa-buy.png" | "assets/loro-ui/images/logo-list-buy.png" | "assets/loro-ui/images/loro-apaisado.png" | "assets/loro-ui/images/loro-apaisado-blanco.png" | "assets/loro-ui/images/loro-card-buy.png" | "assets/loro-ui/images/loro-card-caducidad.png" | "assets/loro-ui/images/loro-card-comparativa.png" | "assets/loro-ui/images/loro-card-ia.png" | "assets/loro-ui/images/loro-card-qr.png" | "assets/loro-ui/images/loro-despensa.png" | "assets/loro-ui/images/loro-icon-default.png" | "assets/loro-ui/images/loro-spinner-ring.svg" | "assets/loro-ui/images/loro-tittle-sub.png" | "assets/loro-ui/images/pantry-cabinet.svg" | "assets/loro-ui/images/pantry-metric-chart.svg" | "assets/loro-ui/images/product-bananas.svg" | "assets/loro-ui/images/product-milk.svg" | "assets/loro-ui/images/product-pasta.svg" | "assets/loro-ui/images/product-rice.svg" | "assets/loro-ui/images/product-tomatoes.svg" | "assets/loro-ui/images/product-yogurt.svg" | "assets/loro-ui/images/store-ahorramas.svg" | "assets/loro-ui/images/store-alcampo.png" | "assets/loro-ui/images/store-aldi.svg" | "assets/loro-ui/images/store-bonpreu.svg" | "assets/loro-ui/images/store-caprabo.svg" | "assets/loro-ui/images/store-carrefour.svg" | "assets/loro-ui/images/store-consum.png" | "assets/loro-ui/images/store-coviran.png" | "assets/loro-ui/images/store-dia.svg" | "assets/loro-ui/images/store-el-corte-ingles.svg" | "assets/loro-ui/images/store-eroski.png" | "assets/loro-ui/images/store-froiz.svg" | "assets/loro-ui/images/store-gadis.png" | "assets/loro-ui/images/store-lidl.svg" | "assets/loro-ui/images/store-mercadona.svg">;
+    decorative: _angular_core.InputSignal<boolean>;
+    color: _angular_core.InputSignal<string>;
+    renderMode: _angular_core.InputSignal<LoroIconRenderMode>;
+    protected readonly assetName: _angular_core.Signal<"icon-apple" | "icon-arrow-right" | "icon-auto" | "icon-back" | "icon-bag" | "icon-barcode" | "icon-bell" | "icon-bottle" | "icon-bulb" | "icon-calendar" | "icon-camera" | "icon-cart" | "icon-chart-bar" | "icon-chat" | "icon-check" | "icon-checkbox-empty" | "icon-chevron-down" | "icon-chevron-right" | "icon-chevron-up" | "icon-clock" | "icon-download" | "icon-email" | "icon-eye-off" | "icon-eye" | "icon-globe" | "icon-google" | "icon-headset" | "icon-help" | "icon-home" | "icon-info" | "icon-laptop" | "icon-leaf" | "icon-list" | "icon-location" | "icon-lock" | "icon-logout" | "icon-megaphone" | "icon-moon" | "icon-more-vertical" | "icon-nav-compare" | "icon-nav-home" | "icon-nav-list" | "icon-nav-pantry" | "icon-pantry-stock" | "icon-paperclip" | "icon-phone" | "icon-plus-user" | "icon-plus" | "icon-scanner" | "icon-search" | "icon-send" | "icon-settings" | "icon-shelf" | "icon-shield-alert" | "icon-shield" | "icon-star" | "icon-store" | "icon-sun" | "icon-tablet" | "icon-tag" | "icon-tick-circle" | "icon-trash-white" | "icon-trash" | "icon-trend" | "icon-user" | "icon-warning">;
+    protected readonly src: _angular_core.Signal<"assets/loro-ui/icons/apple.svg" | "assets/loro-ui/icons/arrow-right.svg" | "assets/loro-ui/icons/auto.svg" | "assets/loro-ui/icons/back.svg" | "assets/loro-ui/icons/bag.svg" | "assets/loro-ui/icons/barcode.svg" | "assets/loro-ui/icons/bell.svg" | "assets/loro-ui/icons/bottle.svg" | "assets/loro-ui/icons/bulb.svg" | "assets/loro-ui/icons/calendar.svg" | "assets/loro-ui/icons/camera.svg" | "assets/loro-ui/icons/cart.svg" | "assets/loro-ui/icons/chart-bar.svg" | "assets/loro-ui/icons/chat.svg" | "assets/loro-ui/icons/check.svg" | "assets/loro-ui/icons/checkbox-empty.svg" | "assets/loro-ui/icons/chevron-down.svg" | "assets/loro-ui/icons/chevron-right.svg" | "assets/loro-ui/icons/chevron-up.svg" | "assets/loro-ui/icons/clock.svg" | "assets/loro-ui/icons/download.svg" | "assets/loro-ui/icons/email.svg" | "assets/loro-ui/icons/eye-off.svg" | "assets/loro-ui/icons/eye.svg" | "assets/loro-ui/icons/globe.svg" | "assets/loro-ui/icons/google.svg" | "assets/loro-ui/icons/headset.svg" | "assets/loro-ui/icons/help.svg" | "assets/loro-ui/icons/home.svg" | "assets/loro-ui/icons/info.svg" | "assets/loro-ui/icons/laptop.svg" | "assets/loro-ui/icons/leaf.svg" | "assets/loro-ui/icons/list.svg" | "assets/loro-ui/icons/location.svg" | "assets/loro-ui/icons/lock.svg" | "assets/loro-ui/icons/logout.svg" | "assets/loro-ui/icons/megaphone.svg" | "assets/loro-ui/icons/moon.svg" | "assets/loro-ui/icons/more-vertical.svg" | "assets/loro-ui/icons/nav-compare.svg" | "assets/loro-ui/icons/nav-home.svg" | "assets/loro-ui/icons/nav-list.svg" | "assets/loro-ui/icons/nav-pantry.svg" | "assets/loro-ui/icons/pantry-stock.svg" | "assets/loro-ui/icons/paperclip.svg" | "assets/loro-ui/icons/phone.svg" | "assets/loro-ui/icons/plus-user.svg" | "assets/loro-ui/icons/plus.svg" | "assets/loro-ui/icons/scanner.svg" | "assets/loro-ui/icons/search.svg" | "assets/loro-ui/icons/send.svg" | "assets/loro-ui/icons/settings.svg" | "assets/loro-ui/icons/shelf.svg" | "assets/loro-ui/icons/shield-alert.svg" | "assets/loro-ui/icons/shield.svg" | "assets/loro-ui/icons/star.svg" | "assets/loro-ui/icons/store.svg" | "assets/loro-ui/icons/sun.svg" | "assets/loro-ui/icons/tablet.svg" | "assets/loro-ui/icons/tag.svg" | "assets/loro-ui/icons/tick-circle.svg" | "assets/loro-ui/icons/trash-white.svg" | "assets/loro-ui/icons/trash.svg" | "assets/loro-ui/icons/trend.svg" | "assets/loro-ui/icons/user.svg" | "assets/loro-ui/icons/warning.svg">;
     protected readonly altText: _angular_core.Signal<string>;
-    protected readonly resolvedWidth: _angular_core.Signal<string>;
-    protected readonly resolvedHeight: _angular_core.Signal<string>;
+    protected readonly resolvedSize: _angular_core.Signal<string>;
+    protected readonly resolvedColor: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroIcon, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroIcon, "loro-icon", never, { "name": { "alias": "name"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "alt": { "alias": "alt"; "required": false; "isSignal": true; }; "decorative": { "alias": "decorative"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "renderMode": { "alias": "renderMode"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class LoroAccordion {
+    title: _angular_core.InputSignal<string>;
+    icon: _angular_core.InputSignal<LoroIconName | null>;
+    expanded: _angular_core.InputSignal<boolean>;
+    expandedChange: _angular_core.OutputEmitterRef<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroAccordion, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroAccordion, "loro-accordion", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; }, { "expandedChange": "expandedChange"; }, never, ["*"], true, never>;
+}
+
+interface LoroAppNavItem {
+    id: string;
+    label: string;
+    icon: LoroIconName;
+    active?: boolean;
+    badge?: string | number | null;
+    disabled?: boolean;
+}
+interface LoroAppNavClick {
+    item: LoroAppNavItem;
+    section: 'main' | 'utility';
+}
+declare class LoroAppNav {
+    private readonly haptics;
+    private readonly draggedMobileIndex;
+    private readonly mobilePointerActive;
+    private activePointerId;
+    private suppressNextMobileClick;
+    items: _angular_core.InputSignal<LoroAppNavItem[]>;
+    utilityItems: _angular_core.InputSignal<LoroAppNavItem[]>;
+    ariaLabel: _angular_core.InputSignal<string>;
+    showUtilityItems: _angular_core.InputSignal<boolean>;
+    compactDesktop: _angular_core.InputSignal<boolean>;
+    itemClick: _angular_core.OutputEmitterRef<LoroAppNavItem>;
+    utilityItemClick: _angular_core.OutputEmitterRef<LoroAppNavItem>;
+    navItemClick: _angular_core.OutputEmitterRef<LoroAppNavClick>;
+    protected readonly desktopItems: _angular_core.Signal<LoroAppNavItem[]>;
+    protected readonly mobileItems: _angular_core.Signal<LoroAppNavItem[]>;
+    protected readonly mobileVisualSlotCount: _angular_core.Signal<number>;
+    private readonly selectedMobileIndex;
+    protected readonly mobileSliderPosition: _angular_core.Signal<number>;
+    protected readonly isMobileDragging: _angular_core.Signal<boolean>;
+    protected readonly mobileItemCount: _angular_core.Signal<number>;
+    protected readonly selectedMobileItemId: _angular_core.Signal<string>;
+    protected isMobileItemVisualActive(index: number): boolean;
+    onMainItemClick(item: LoroAppNavItem): void;
+    protected onMobileItemClick(item: LoroAppNavItem): void;
+    protected onMobilePointerDown(event: PointerEvent): void;
+    protected onMobilePointerMove(event: PointerEvent): void;
+    protected onMobilePointerUp(event: PointerEvent): void;
+    protected onMobilePointerCancel(event: PointerEvent): void;
+    onUtilityItemClick(item: LoroAppNavItem): void;
+    private emitMainItem;
+    private getMobileVisualSlotPosition;
+    protected mobileItemGridColumn(index: number): number;
+    private mobileItemIndexToVisualSlot;
+    private getNearestEnabledMobileIndex;
+    private releaseMobilePointer;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroAppNav, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroAppNav, "loro-app-nav", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "utilityItems": { "alias": "utilityItems"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "showUtilityItems": { "alias": "showUtilityItems"; "required": false; "isSignal": true; }; "compactDesktop": { "alias": "compactDesktop"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; "utilityItemClick": "utilityItemClick"; "navItemClick": "navItemClick"; }, never, never, true, never>;
+}
+
+/**
+ * LoroButton Type Definitions
+ *
+ * Centralized type definitions for the LoroButton component.
+ * Use these types for consistency across the application.
+ *
+ * @example
+ * const config: LoroButtonConfig = {
+ *   variant: 'primary',
+ *   size: 'md',
+ *   disabled: false,
+ * };
+ */
+/**
+ * Visual variant style of the button
+ * @type {'primary' | 'outline' | 'ghost' | 'danger' | 'soft' | 'social' | 'action' | 'navigation'}
+ */
+type LoroButtonVariant = 'primary' | 'outline' | 'ghost' | 'danger' | 'soft' | 'social' | 'action' | 'navigation';
+/**
+ * Button visual type (semantic grouping)
+ * @type {'primary' | 'secondary' | 'tertiary'}
+ */
+type LoroButtonType = 'primary' | 'secondary' | 'tertiary';
+/**
+ * Button color theme
+ * @type {'primary' | 'secondary' | 'tertiary' | 'danger'}
+ */
+type LoroButtonColor = 'primary' | 'secondary' | 'tertiary' | 'danger';
+/**
+ * Button size preset
+ * @type {'sm' | 'md' | 'lg'}
+ */
+type LoroButtonSize = 'sm' | 'md' | 'lg';
+/**
+ * Button width behavior
+ * @type {'fit-content' | 'full'}
+ */
+type LoroButtonWidth = 'fit-content' | 'full';
+/**
+ * Icon display mode within the button
+ * @type {'none' | 'with-icon' | 'only-icon'}
+ */
+type LoroButtonIconMode = 'none' | 'with-icon' | 'only-icon';
+/**
+ * Button HTML type
+ * @type {'button' | 'submit' | 'reset'}
+ */
+type LoroButtonHtmlType = 'button' | 'submit' | 'reset';
+
+/**
+ * LoroButton Constants
+ *
+ * Default values, valid options, and configuration constants for the LoroButton component.
+ * Update these to maintain consistency across all button usage.
+ */
+
+/**
+ * Default input values for LoroButton
+ */
+declare const LORO_BUTTON_DEFAULTS: {
+    readonly text: "";
+    readonly label: "";
+    readonly variant: "primary";
+    readonly type: "primary";
+    readonly color: "primary";
+    readonly size: "md";
+    readonly fullWidth: false;
+    readonly buttonWidth: "fit-content";
+    readonly disabled: false;
+    readonly loading: false;
+    readonly selected: false;
+    readonly htmlType: "button";
+    readonly iconMode: "none";
+    readonly socialMobileCompact: true;
+    readonly iconSize: 23;
+    readonly iconButtonSize: null;
+    readonly iconColor: "";
+};
+/**
+ * Valid options for button variants
+ */
+declare const LORO_BUTTON_VARIANTS: readonly LoroButtonVariant[];
+/**
+ * Valid options for button types
+ */
+declare const LORO_BUTTON_TYPES: readonly LoroButtonType[];
+/**
+ * Valid options for button colors
+ */
+declare const LORO_BUTTON_COLORS: readonly LoroButtonColor[];
+/**
+ * Valid options for button sizes
+ */
+declare const LORO_BUTTON_SIZES: readonly LoroButtonSize[];
+/**
+ * Valid options for icon modes
+ */
+declare const LORO_BUTTON_ICON_MODES: readonly LoroButtonIconMode[];
+/**
+ * CSS class names used by LoroButton (BEM notation)
+ */
+declare const LORO_BUTTON_CLASSES: {
+    readonly container: "loro-button";
+    readonly variant: (variant: LoroButtonVariant) => string;
+    readonly size: (size: LoroButtonSize) => string;
+    readonly color: (color: LoroButtonColor) => string;
+    readonly width: (width: LoroButtonWidth) => "loro-button--full" | undefined;
+    readonly state: {
+        readonly disabled: "loro-button--disabled";
+        readonly loading: "loro-button--loading";
+        readonly selected: "loro-button--selected";
+    };
+    readonly elements: {
+        readonly label: "loro-button__label";
+        readonly spinner: "loro-button__spinner";
+        readonly srStatus: "loro-button__sr-status";
+    };
+};
+
+/**
+ * LoroButton Component
+ *
+ * A versatile, accessible button component with multiple variants, sizes, and states.
+ * Follows Angular 21 best practices with signals, OnPush change detection, and semantic HTML.
+ *
+ * @example
+ * ```html
+ * <loro-button
+ *   [text]="'Click me'"
+ *   variant="primary"
+ *   size="md"
+ *   (change)="onButtonClick()"
+ * />
+ * ```
+ */
+declare class LoroButton {
+    label: _angular_core.InputSignal<string>;
+    text: _angular_core.InputSignal<string>;
+    icon: _angular_core.InputSignal<LoroIconName | LoroButtonIconMode | null>;
+    iconContent: _angular_core.InputSignal<LoroIconName | null>;
+    iconMode: _angular_core.InputSignal<LoroButtonIconMode>;
+    iconSize: _angular_core.InputSignal<LoroIconSize>;
+    iconButtonSize: _angular_core.InputSignal<LoroIconSize | null>;
+    iconColor: _angular_core.InputSignal<string>;
+    socialMobileCompact: _angular_core.InputSignal<boolean>;
+    selected: _angular_core.InputSignal<boolean>;
+    variant: _angular_core.InputSignal<LoroButtonVariant>;
+    typeButton: _angular_core.InputSignal<LoroButtonType>;
+    color: _angular_core.InputSignal<LoroButtonColor>;
+    size: _angular_core.InputSignal<LoroButtonSize>;
+    fullWidth: _angular_core.InputSignal<boolean>;
+    buttonWidth: _angular_core.InputSignal<LoroButtonWidth>;
+    disabled: _angular_core.InputSignal<boolean>;
+    loading: _angular_core.InputSignal<boolean>;
+    type: _angular_core.InputSignal<"button" | "submit" | "reset">;
+    formId: _angular_core.InputSignal<string>;
+    ariaLabel: _angular_core.InputSignal<string>;
+    ariaDescription: _angular_core.InputSignal<string>;
+    buttonClick: _angular_core.OutputEmitterRef<void>;
+    change: _angular_core.OutputEmitterRef<void>;
+    sanChange: _angular_core.OutputEmitterRef<void>;
+    protected readonly resolvedText: _angular_core.Signal<string>;
+    protected readonly resolvedIcon: _angular_core.Signal<LoroIconName | null>;
+    protected readonly resolvedIconMode: _angular_core.Signal<LoroButtonIconMode>;
+    protected readonly resolvedButtonWidth: _angular_core.Signal<LoroButtonWidth>;
+    protected readonly resolvedIconButtonSize: _angular_core.Signal<string>;
+    protected readonly resolvedTypeButton: _angular_core.Signal<LoroButtonType>;
+    protected readonly resolvedColor: _angular_core.Signal<LoroButtonColor>;
+    protected readonly showIcon: _angular_core.Signal<boolean>;
+    protected readonly resolvedAriaLabel: _angular_core.Signal<string | null>;
+    protected readonly resolvedIconColor: _angular_core.Signal<string>;
+    protected readonly resolvedIconRenderMode: _angular_core.Signal<LoroIconRenderMode>;
+    protected readonly isDisabled: _angular_core.Signal<boolean>;
+    protected readonly showSpinner: _angular_core.Signal<boolean>;
+    protected readonly loadingAriaLabel: _angular_core.Signal<string>;
+    protected emitChange(): void;
+    protected defaultIconColor(): LoroIconColor;
+    private isIconMode;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroButton, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroButton, "loro-button", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconContent": { "alias": "iconContent"; "required": false; "isSignal": true; }; "iconMode": { "alias": "iconMode"; "required": false; "isSignal": true; }; "iconSize": { "alias": "iconSize"; "required": false; "isSignal": true; }; "iconButtonSize": { "alias": "iconButtonSize"; "required": false; "isSignal": true; }; "iconColor": { "alias": "iconColor"; "required": false; "isSignal": true; }; "socialMobileCompact": { "alias": "socialMobileCompact"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "typeButton": { "alias": "typeButton"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "buttonWidth": { "alias": "buttonWidth"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "formId": { "alias": "formId"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaDescription": { "alias": "ariaDescription"; "required": false; "isSignal": true; }; }, { "buttonClick": "buttonClick"; "change": "change"; "sanChange": "sanChange"; }, never, never, true, never>;
+}
+
+declare class LoroImage {
+    name: _angular_core.InputSignal<LoroImageName>;
+    alt: _angular_core.InputSignal<string>;
+    size: _angular_core.InputSignal<string>;
+    width: _angular_core.InputSignal<string>;
+    height: _angular_core.InputSignal<string>;
+    fit: _angular_core.InputSignal<"contain" | "cover">;
+    protected readonly assetName: _angular_core.Signal<"image-al-loro-design-library-home-ai" | "image-favicon-apple-touch-icon" | "image-favicon-assets-xcassets-appicon-appiconset-appicon-any" | "image-favicon-assets-xcassets-appicon-appiconset-appicon-dark" | "image-favicon-assets-xcassets-splash-imageset-splash-2732x2732" | "image-favicon-assets-xcassets-splash-imageset-splash-2732x2732-1" | "image-favicon-assets-xcassets-splash-imageset-splash-2732x2732-2" | "image-favicon-assets-xcassets-splash-imageset-splash-dark-2732x2732" | "image-favicon-assets-xcassets-splash-imageset-splash-dark-2732x2732-1" | "image-favicon-assets-xcassets-splash-imageset-splash-dark-2732x2732-2" | "image-favicon-favicon" | "image-home-icon-ai" | "image-home-icon-basket" | "image-home-icon-compare" | "image-home-icon-expiry" | "image-home-icon-pantry" | "image-home-icon-scan" | "image-image-home" | "image-logo-despensa-buy" | "image-logo-list-buy" | "image-loro-apaisado" | "image-loro-apaisado-blanco" | "image-loro-card-buy" | "image-loro-card-caducidad" | "image-loro-card-comparativa" | "image-loro-card-ia" | "image-loro-card-qr" | "image-loro-despensa" | "image-loro-icon-default" | "image-loro-spinner-ring" | "image-loro-tittle-sub" | "image-pantry-cabinet" | "image-pantry-metric-chart" | "image-product-bananas" | "image-product-milk" | "image-product-pasta" | "image-product-rice" | "image-product-tomatoes" | "image-product-yogurt" | "image-store-ahorramas" | "image-store-alcampo" | "image-store-aldi" | "image-store-bonpreu" | "image-store-caprabo" | "image-store-carrefour" | "image-store-consum" | "image-store-coviran" | "image-store-dia" | "image-store-el-corte-ingles" | "image-store-eroski" | "image-store-froiz" | "image-store-gadis" | "image-store-lidl" | "image-store-mercadona">;
+    protected readonly src: _angular_core.Signal<"assets/loro-ui/images/al-loro-design-library-home-ai.png" | "assets/loro-ui/favicons/apple-touch-icon.png" | "assets/loro-ui/favicons/Assets.xcassets/AppIcon.appiconset/AppIcon-Any.png" | "assets/loro-ui/favicons/Assets.xcassets/AppIcon.appiconset/AppIcon-Dark.png" | "assets/loro-ui/favicons/Assets.xcassets/Splash.imageset/splash-2732x2732.png" | "assets/loro-ui/favicons/Assets.xcassets/Splash.imageset/splash-2732x2732-1.png" | "assets/loro-ui/favicons/Assets.xcassets/Splash.imageset/splash-2732x2732-2.png" | "assets/loro-ui/favicons/Assets.xcassets/Splash.imageset/splash-dark-2732x2732.png" | "assets/loro-ui/favicons/Assets.xcassets/Splash.imageset/splash-dark-2732x2732-1.png" | "assets/loro-ui/favicons/Assets.xcassets/Splash.imageset/splash-dark-2732x2732-2.png" | "assets/loro-ui/favicons/favicon.svg" | "assets/loro-ui/images/home-icon-ai.svg" | "assets/loro-ui/images/home-icon-basket.svg" | "assets/loro-ui/images/home-icon-compare.svg" | "assets/loro-ui/images/home-icon-expiry.svg" | "assets/loro-ui/images/home-icon-pantry.svg" | "assets/loro-ui/images/home-icon-scan.svg" | "assets/loro-ui/images/image-home.png" | "assets/loro-ui/images/logo-despensa-buy.png" | "assets/loro-ui/images/logo-list-buy.png" | "assets/loro-ui/images/loro-apaisado.png" | "assets/loro-ui/images/loro-apaisado-blanco.png" | "assets/loro-ui/images/loro-card-buy.png" | "assets/loro-ui/images/loro-card-caducidad.png" | "assets/loro-ui/images/loro-card-comparativa.png" | "assets/loro-ui/images/loro-card-ia.png" | "assets/loro-ui/images/loro-card-qr.png" | "assets/loro-ui/images/loro-despensa.png" | "assets/loro-ui/images/loro-icon-default.png" | "assets/loro-ui/images/loro-spinner-ring.svg" | "assets/loro-ui/images/loro-tittle-sub.png" | "assets/loro-ui/images/pantry-cabinet.svg" | "assets/loro-ui/images/pantry-metric-chart.svg" | "assets/loro-ui/images/product-bananas.svg" | "assets/loro-ui/images/product-milk.svg" | "assets/loro-ui/images/product-pasta.svg" | "assets/loro-ui/images/product-rice.svg" | "assets/loro-ui/images/product-tomatoes.svg" | "assets/loro-ui/images/product-yogurt.svg" | "assets/loro-ui/images/store-ahorramas.svg" | "assets/loro-ui/images/store-alcampo.png" | "assets/loro-ui/images/store-aldi.svg" | "assets/loro-ui/images/store-bonpreu.svg" | "assets/loro-ui/images/store-caprabo.svg" | "assets/loro-ui/images/store-carrefour.svg" | "assets/loro-ui/images/store-consum.png" | "assets/loro-ui/images/store-coviran.png" | "assets/loro-ui/images/store-dia.svg" | "assets/loro-ui/images/store-el-corte-ingles.svg" | "assets/loro-ui/images/store-eroski.png" | "assets/loro-ui/images/store-froiz.svg" | "assets/loro-ui/images/store-gadis.png" | "assets/loro-ui/images/store-lidl.svg" | "assets/loro-ui/images/store-mercadona.svg">;
+    protected readonly altText: _angular_core.Signal<string>;
+    protected readonly resolvedWidth: _angular_core.Signal<string>;
+    protected readonly resolvedHeight: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroImage, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroImage, "loro-image", never, { "name": { "alias": "name"; "required": true; "isSignal": true; }; "alt": { "alias": "alt"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "fit": { "alias": "fit"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
@@ -1135,9 +1154,9 @@ declare class LoroAssistantCard {
     title: _angular_core.InputSignal<string>;
     description: _angular_core.InputSignal<string>;
     imageName: _angular_core.InputSignal<LoroImageName | null>;
-    icon: _angular_core.InputSignal<LoroIconName$1>;
+    icon: _angular_core.InputSignal<LoroIconName>;
     actionLabel: _angular_core.InputSignal<string>;
-    actionIcon: _angular_core.InputSignal<LoroIconName$1 | null>;
+    actionIcon: _angular_core.InputSignal<LoroIconName | null>;
     actionVariant: _angular_core.InputSignal<LoroButtonVariant>;
     action: _angular_core.OutputEmitterRef<void>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroAssistantCard, never>;
@@ -1145,7 +1164,7 @@ declare class LoroAssistantCard {
 }
 
 declare class LoroAuthSocialButton {
-    icon: _angular_core.InputSignal<LoroIconName$1>;
+    icon: _angular_core.InputSignal<LoroIconName>;
     label: _angular_core.InputSignal<string>;
     outline: _angular_core.InputSignal<boolean>;
     selected: _angular_core.InputSignal<boolean>;
@@ -1164,41 +1183,68 @@ declare class LoroBadge {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroBadge, "loro-badge", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-type LoroCardVariant = 'default' | 'tinted' | 'danger' | 'selectable' | 'benefit' | 'benefit-showcase' | 'home-hero' | 'home-primary' | 'home-secondary';
+type LoroCardVariant = 'default' | 'tinted' | 'danger' | 'selectable';
+type LoroCardBenefitVariant = 'benefit' | 'benefit-showcase';
+type LoroCardLinkVariant = 'primary' | 'secondary' | 'hero';
 type LoroCardJustify = 'start' | 'center' | 'end';
-declare class LoroCard {
-    title: _angular_core.InputSignal<string>;
-    description: _angular_core.InputSignal<string>;
-    icon: _angular_core.InputSignal<LoroIconName$1 | null>;
-    iconSize: _angular_core.InputSignal<number>;
-    iconColor: _angular_core.InputSignal<string>;
-    link: _angular_core.InputSignal<string>;
-    variant: _angular_core.InputSignal<LoroCardVariant>;
-    justify: _angular_core.InputSignal<LoroCardJustify>;
-    mobileJustify: _angular_core.InputSignal<LoroCardJustify>;
-    selected: _angular_core.InputSignal<boolean>;
-    showArrow: _angular_core.InputSignal<boolean>;
-    arrowSize: _angular_core.InputSignal<number>;
-    heroGreeting: _angular_core.InputSignal<string>;
-    heroSubtitle: _angular_core.InputSignal<string>;
-    heroAvatarSrc: _angular_core.InputSignal<string | null>;
-    heroAvatarAlt: _angular_core.InputSignal<string>;
-    heroAvatarIcon: _angular_core.InputSignal<LoroIconName$1>;
-    heroAvatarIconSize: _angular_core.InputSignal<number>;
-    heroVisualImage: _angular_core.InputSignal<LoroImageName | null>;
-    heroVisualAlt: _angular_core.InputSignal<string>;
-    protected readonly resolvedIconSize: _angular_core.Signal<string>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroCard, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroCard, "loro-card", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconSize": { "alias": "iconSize"; "required": false; "isSignal": true; }; "iconColor": { "alias": "iconColor"; "required": false; "isSignal": true; }; "link": { "alias": "link"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "justify": { "alias": "justify"; "required": false; "isSignal": true; }; "mobileJustify": { "alias": "mobileJustify"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "showArrow": { "alias": "showArrow"; "required": false; "isSignal": true; }; "arrowSize": { "alias": "arrowSize"; "required": false; "isSignal": true; }; "heroGreeting": { "alias": "heroGreeting"; "required": false; "isSignal": true; }; "heroSubtitle": { "alias": "heroSubtitle"; "required": false; "isSignal": true; }; "heroAvatarSrc": { "alias": "heroAvatarSrc"; "required": false; "isSignal": true; }; "heroAvatarAlt": { "alias": "heroAvatarAlt"; "required": false; "isSignal": true; }; "heroAvatarIcon": { "alias": "heroAvatarIcon"; "required": false; "isSignal": true; }; "heroAvatarIconSize": { "alias": "heroAvatarIconSize"; "required": false; "isSignal": true; }; "heroVisualImage": { "alias": "heroVisualImage"; "required": false; "isSignal": true; }; "heroVisualAlt": { "alias": "heroVisualAlt"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+type LoroCardBenefitIconName = LoroIconName;
+type LoroCardBenefitIconColor = LoroIconColorToken;
+type LoroCardBenefitIconSize = 12 | 14 | 16 | 18 | 20 | 22 | 24 | 28 | 32;
+type LoroCardLinkAvatarSize = LoroCardBenefitIconSize;
+type LoroCardHomeVariant = LoroCardLinkVariant;
+
+declare class LoroCardBenefit {
+    readonly title: _angular_core.InputSignal<string>;
+    readonly description: _angular_core.InputSignal<string>;
+    readonly icon: _angular_core.InputSignal<_juligc99_loro_ui.LoroIconName | null>;
+    readonly iconSize: _angular_core.InputSignal<LoroCardBenefitIconSize>;
+    readonly iconColor: _angular_core.InputSignal<_juligc99_loro_ui.LoroIconColorToken>;
+    protected readonly hasIcon: _angular_core.Signal<boolean>;
+    protected readonly hasDescription: _angular_core.Signal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroCardBenefit, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroCardBenefit, "loro-card-benefit", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconSize": { "alias": "iconSize"; "required": false; "isSignal": true; }; "iconColor": { "alias": "iconColor"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+declare class LoroCardNavigation {
+    readonly title: _angular_core.InputSignal<string>;
+    readonly description: _angular_core.InputSignal<string>;
+    readonly icon: _angular_core.InputSignal<LoroIconName | null>;
+    readonly iconSize: _angular_core.InputSignal<number>;
+    readonly iconColor: _angular_core.InputSignal<string>;
+    readonly link: _angular_core.InputSignal<string>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly showArrow: _angular_core.InputSignal<boolean>;
+    readonly arrowSize: _angular_core.InputSignal<number>;
+    protected readonly hasDescription: _angular_core.Signal<boolean>;
+    protected readonly isInteractive: _angular_core.Signal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroCardNavigation, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroCardNavigation, "loro-card-navigation", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconSize": { "alias": "iconSize"; "required": false; "isSignal": true; }; "iconColor": { "alias": "iconColor"; "required": false; "isSignal": true; }; "link": { "alias": "link"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "showArrow": { "alias": "showArrow"; "required": false; "isSignal": true; }; "arrowSize": { "alias": "arrowSize"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class LoroCardLink {
+    readonly title: _angular_core.InputSignal<string>;
+    readonly subtitle: _angular_core.InputSignal<string>;
+    readonly avatarImage: _angular_core.InputSignal<string | null>;
+    readonly iconSize: _angular_core.InputSignal<_juligc99_loro_ui.LoroCardBenefitIconSize>;
+    readonly illustration: _angular_core.InputSignal<LoroImageName | null>;
+    protected readonly avatarLoadFailed: _angular_core.WritableSignal<boolean>;
+    protected readonly shouldShowAvatarImage: _angular_core.Signal<boolean>;
+    protected onAvatarImageError(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroCardLink, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroCardLink, "loro-card-link", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "avatarImage": { "alias": "avatarImage"; "required": false; "isSignal": true; }; "iconSize": { "alias": "iconSize"; "required": false; "isSignal": true; }; "illustration": { "alias": "illustration"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare const LoroCardDefaultIconSize = 28;
+declare const LoroCardDefaultArrowSize = 16;
+declare const LoroCardDefaultHeroAvatarIconSize = 22;
+
 type LoroCardNavVariant = 'default' | 'danger' | 'soft';
 type LoroCardNavTrailing = 'arrow' | 'toggle' | 'radio' | 'text' | 'badge' | 'none';
 declare class LoroCardNav {
     private readonly router;
     title: _angular_core.InputSignal<string>;
     description: _angular_core.InputSignal<string>;
-    icon: _angular_core.InputSignal<LoroIconName$1 | null>;
+    icon: _angular_core.InputSignal<LoroIconName | null>;
     iconSize: _angular_core.InputSignal<number>;
     iconColor: _angular_core.InputSignal<string>;
     route: _angular_core.InputSignal<string>;
@@ -1222,7 +1268,7 @@ declare class LoroDashboardCard {
     title: _angular_core.InputSignal<string>;
     description: _angular_core.InputSignal<string>;
     link: _angular_core.InputSignal<string>;
-    icon: _angular_core.InputSignal<LoroIconName$1 | null>;
+    icon: _angular_core.InputSignal<LoroIconName | null>;
     illustration: _angular_core.InputSignal<LoroImageName | null>;
     variant: _angular_core.InputSignal<"home" | "default">;
     showArrow: _angular_core.InputSignal<boolean>;
@@ -1298,7 +1344,7 @@ declare class LoroProductRow {
 
 declare class LoroProductSection {
     title: _angular_core.InputSignal<string>;
-    icon: _angular_core.InputSignal<LoroIconName$1>;
+    icon: _angular_core.InputSignal<LoroIconName>;
     collapsible: _angular_core.InputSignal<boolean>;
     protected readonly expanded: _angular_core.WritableSignal<boolean>;
     protected toggle(): void;
@@ -1355,7 +1401,7 @@ declare class LoroStatCard {
     value: _angular_core.InputSignal<string>;
     description: _angular_core.InputSignal<string>;
     eyebrow: _angular_core.InputSignal<string>;
-    icon: _angular_core.InputSignal<LoroIconName$1 | null>;
+    icon: _angular_core.InputSignal<LoroIconName | null>;
     iconSize: _angular_core.InputSignal<number>;
     image: _angular_core.InputSignal<LoroImageName | null>;
     topImage: _angular_core.InputSignal<LoroImageName | null>;
@@ -1398,7 +1444,7 @@ type LoroTabAlign = 'flex' | 'block';
 interface LoroTabOption {
     readonly value: string;
     readonly label: string;
-    readonly icon?: LoroIconName$1 | null;
+    readonly icon?: LoroIconName | null;
     readonly ariaLabel?: string;
 }
 declare class LoroTab {
@@ -1435,7 +1481,7 @@ declare class LoroAlert {
     readonly action: _angular_core.OutputEmitterRef<void>;
     /** Emitted by the close button. The parent decides whether to remove the alert. */
     readonly dismissed: _angular_core.OutputEmitterRef<void>;
-    protected readonly resolvedIcon: _angular_core.Signal<LoroIconName$1>;
+    protected readonly resolvedIcon: _angular_core.Signal<LoroIconName>;
     protected readonly resolvedIconColor: _angular_core.Signal<string>;
     protected readonly role: _angular_core.Signal<"status" | "alert" | null>;
     protected readonly ariaLive: _angular_core.Signal<"polite" | "assertive" | null>;
@@ -1466,7 +1512,7 @@ interface LoroNotificationItem {
     title: string;
     message: string;
     time?: string;
-    icon?: LoroIconName$1;
+    icon?: LoroIconName;
     unread?: boolean;
 }
 declare class LoroNotificationPanel {
@@ -1477,7 +1523,7 @@ declare class LoroNotificationPanel {
     markAllLabel: _angular_core.InputSignal<string>;
     showClearAll: _angular_core.InputSignal<boolean>;
     clearAllLabel: _angular_core.InputSignal<string>;
-    emptyIcon: _angular_core.InputSignal<LoroIconName$1>;
+    emptyIcon: _angular_core.InputSignal<LoroIconName>;
     emptyTitle: _angular_core.InputSignal<string>;
     emptyMessage: _angular_core.InputSignal<string>;
     itemClick: _angular_core.OutputEmitterRef<LoroNotificationItem>;
@@ -1495,7 +1541,7 @@ declare class LoroNotificationRow {
     title: _angular_core.InputSignal<string>;
     message: _angular_core.InputSignal<string>;
     time: _angular_core.InputSignal<string>;
-    icon: _angular_core.InputSignal<LoroIconName$1>;
+    icon: _angular_core.InputSignal<LoroIconName>;
     unread: _angular_core.InputSignal<boolean>;
     rowClick: _angular_core.OutputEmitterRef<void>;
     rowRemove: _angular_core.OutputEmitterRef<void>;
@@ -1550,7 +1596,7 @@ declare class LoroToast {
 
 type LoroAuthFieldState = 'default' | 'error';
 declare class LoroAuthField implements FormValueControl<string> {
-    icon: _angular_core.InputSignal<LoroIconName$1>;
+    icon: _angular_core.InputSignal<LoroIconName>;
     label: _angular_core.InputSignal<string>;
     placeholder: _angular_core.InputSignal<string>;
     value: _angular_core.ModelSignal<string>;
@@ -1621,7 +1667,7 @@ declare class LoroDropdown implements FormValueControl<string> {
 declare class LoroFilterChip {
     label: _angular_core.InputSignal<string>;
     value: _angular_core.InputSignal<string>;
-    icon: _angular_core.InputSignal<LoroIconName$1 | null>;
+    icon: _angular_core.InputSignal<LoroIconName | null>;
     active: _angular_core.InputSignal<boolean>;
     selected: _angular_core.OutputEmitterRef<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroFilterChip, never>;
@@ -1640,9 +1686,9 @@ declare class LoroInput implements FormValueControl<string> {
     name: _angular_core.InputSignal<string>;
     autocomplete: _angular_core.InputSignal<string>;
     inputmode: _angular_core.InputSignal<"" | "email" | "search" | "text" | "none" | "tel" | "url" | "numeric" | "decimal">;
-    icon: _angular_core.InputSignal<LoroIconName$1 | null>;
+    icon: _angular_core.InputSignal<LoroIconName | null>;
     iconSize: _angular_core.InputSignal<number>;
-    trailingIcon: _angular_core.InputSignal<LoroIconName$1 | null>;
+    trailingIcon: _angular_core.InputSignal<LoroIconName | null>;
     trailingIconSize: _angular_core.InputSignal<number>;
     trailingAriaLabel: _angular_core.InputSignal<string>;
     variant: _angular_core.InputSignal<LoroInputVariant>;
@@ -1719,7 +1765,7 @@ declare class LoroSelect {
     title: _angular_core.InputSignal<string>;
     subtitle: _angular_core.InputSignal<string>;
     meta: _angular_core.InputSignal<string>;
-    icon: _angular_core.InputSignal<LoroIconName$1>;
+    icon: _angular_core.InputSignal<LoroIconName>;
     badge: _angular_core.InputSignal<string>;
     status: _angular_core.InputSignal<string>;
     selected: _angular_core.InputSignal<boolean>;
@@ -1815,26 +1861,6 @@ declare class LoroModal {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroModal, "loro-modal", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; "sheetDragToClose": { "alias": "sheetDragToClose"; "required": false; "isSignal": true; }; "sheetRestTop": { "alias": "sheetRestTop"; "required": false; "isSignal": true; }; "showBackdrop": { "alias": "showBackdrop"; "required": false; "isSignal": true; }; "closeOnBackdrop": { "alias": "closeOnBackdrop"; "required": false; "isSignal": true; }; }, { "modalClose": "modalClose"; }, never, ["*", "[loro-modal-actions]"], true, never>;
 }
 
-type LoroIconColorToken = 'default' | 'primary' | 'primary-strong' | 'primary-deep' | 'text' | 'muted' | 'success' | 'danger' | 'warning' | 'inverse';
-type LoroIconColor = LoroIconColorToken | string;
-type LoroIconRenderMode = 'mask' | 'origin';
-type LoroIconSize = number | string;
-declare class LoroIcon {
-    name: _angular_core.InputSignal<LoroIconName>;
-    size: _angular_core.InputSignal<LoroIconSize>;
-    alt: _angular_core.InputSignal<string>;
-    decorative: _angular_core.InputSignal<boolean>;
-    color: _angular_core.InputSignal<string>;
-    renderMode: _angular_core.InputSignal<LoroIconRenderMode>;
-    protected readonly assetName: _angular_core.Signal<"icon-apple" | "icon-arrow-right" | "icon-auto" | "icon-back" | "icon-bag" | "icon-barcode" | "icon-bell" | "icon-bottle" | "icon-bulb" | "icon-calendar" | "icon-camera" | "icon-cart" | "icon-chart-bar" | "icon-chat" | "icon-check" | "icon-checkbox-empty" | "icon-chevron-down" | "icon-chevron-right" | "icon-chevron-up" | "icon-clock" | "icon-download" | "icon-email" | "icon-eye-off" | "icon-eye" | "icon-globe" | "icon-google" | "icon-headset" | "icon-help" | "icon-home" | "icon-info" | "icon-laptop" | "icon-leaf" | "icon-list" | "icon-location" | "icon-lock" | "icon-logout" | "icon-megaphone" | "icon-moon" | "icon-more-vertical" | "icon-nav-compare" | "icon-nav-home" | "icon-nav-list" | "icon-nav-pantry" | "icon-pantry-stock" | "icon-paperclip" | "icon-phone" | "icon-plus-user" | "icon-plus" | "icon-scanner" | "icon-search" | "icon-send" | "icon-settings" | "icon-shelf" | "icon-shield-alert" | "icon-shield" | "icon-star" | "icon-store" | "icon-sun" | "icon-tablet" | "icon-tag" | "icon-tick-circle" | "icon-trash-white" | "icon-trash" | "icon-trend" | "icon-user" | "icon-warning">;
-    protected readonly src: _angular_core.Signal<"assets/loro-ui/icons/apple.svg" | "assets/loro-ui/icons/arrow-right.svg" | "assets/loro-ui/icons/auto.svg" | "assets/loro-ui/icons/back.svg" | "assets/loro-ui/icons/bag.svg" | "assets/loro-ui/icons/barcode.svg" | "assets/loro-ui/icons/bell.svg" | "assets/loro-ui/icons/bottle.svg" | "assets/loro-ui/icons/bulb.svg" | "assets/loro-ui/icons/calendar.svg" | "assets/loro-ui/icons/camera.svg" | "assets/loro-ui/icons/cart.svg" | "assets/loro-ui/icons/chart-bar.svg" | "assets/loro-ui/icons/chat.svg" | "assets/loro-ui/icons/check.svg" | "assets/loro-ui/icons/checkbox-empty.svg" | "assets/loro-ui/icons/chevron-down.svg" | "assets/loro-ui/icons/chevron-right.svg" | "assets/loro-ui/icons/chevron-up.svg" | "assets/loro-ui/icons/clock.svg" | "assets/loro-ui/icons/download.svg" | "assets/loro-ui/icons/email.svg" | "assets/loro-ui/icons/eye-off.svg" | "assets/loro-ui/icons/eye.svg" | "assets/loro-ui/icons/globe.svg" | "assets/loro-ui/icons/google.svg" | "assets/loro-ui/icons/headset.svg" | "assets/loro-ui/icons/help.svg" | "assets/loro-ui/icons/home.svg" | "assets/loro-ui/icons/info.svg" | "assets/loro-ui/icons/laptop.svg" | "assets/loro-ui/icons/leaf.svg" | "assets/loro-ui/icons/list.svg" | "assets/loro-ui/icons/location.svg" | "assets/loro-ui/icons/lock.svg" | "assets/loro-ui/icons/logout.svg" | "assets/loro-ui/icons/megaphone.svg" | "assets/loro-ui/icons/moon.svg" | "assets/loro-ui/icons/more-vertical.svg" | "assets/loro-ui/icons/nav-compare.svg" | "assets/loro-ui/icons/nav-home.svg" | "assets/loro-ui/icons/nav-list.svg" | "assets/loro-ui/icons/nav-pantry.svg" | "assets/loro-ui/icons/pantry-stock.svg" | "assets/loro-ui/icons/paperclip.svg" | "assets/loro-ui/icons/phone.svg" | "assets/loro-ui/icons/plus-user.svg" | "assets/loro-ui/icons/plus.svg" | "assets/loro-ui/icons/scanner.svg" | "assets/loro-ui/icons/search.svg" | "assets/loro-ui/icons/send.svg" | "assets/loro-ui/icons/settings.svg" | "assets/loro-ui/icons/shelf.svg" | "assets/loro-ui/icons/shield-alert.svg" | "assets/loro-ui/icons/shield.svg" | "assets/loro-ui/icons/star.svg" | "assets/loro-ui/icons/store.svg" | "assets/loro-ui/icons/sun.svg" | "assets/loro-ui/icons/tablet.svg" | "assets/loro-ui/icons/tag.svg" | "assets/loro-ui/icons/tick-circle.svg" | "assets/loro-ui/icons/trash-white.svg" | "assets/loro-ui/icons/trash.svg" | "assets/loro-ui/icons/trend.svg" | "assets/loro-ui/icons/user.svg" | "assets/loro-ui/icons/warning.svg">;
-    protected readonly altText: _angular_core.Signal<string>;
-    protected readonly resolvedSize: _angular_core.Signal<string>;
-    protected readonly resolvedColor: _angular_core.Signal<string>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroIcon, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroIcon, "loro-icon", never, { "name": { "alias": "name"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "alt": { "alias": "alt"; "required": false; "isSignal": true; }; "decorative": { "alias": "decorative"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "renderMode": { "alias": "renderMode"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
-}
-
 declare class LoroHapticsService {
     private readonly document;
     private readonly vibration;
@@ -1846,5 +1872,5 @@ declare class LoroHapticsService {
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<LoroHapticsService>;
 }
 
-export { Footer, LORO_BUTTON_CLASSES, LORO_BUTTON_COLORS, LORO_BUTTON_DEFAULTS, LORO_BUTTON_ICON_MODES, LORO_BUTTON_SIZES, LORO_BUTTON_TYPES, LORO_BUTTON_VARIANTS, LORO_ICON_ASSETS, LORO_ICON_LEGACY_NAMES, LORO_ICON_PATHS, LORO_IMAGE_ASSETS, LORO_IMAGE_LEGACY_NAMES, LORO_IMAGE_PATHS, LoroAccordion, LoroAlert, LoroAppNav, LoroAssistantCard, LoroAuthField, LoroAuthSocialButton, LoroBadge, LoroButton, LoroCard, LoroCardNav, LoroCheckbox, LoroDashboardCard, LoroDivider, LoroDropdown, LoroFilterChip, LoroHapticsService, LoroIcon, LoroImage, LoroInput, LoroModal, LoroNotification, LoroNotificationPanel, LoroNotificationRow, LoroProductRow, LoroProductSection, LoroProfileCard, LoroProfileHero, LoroRadio, LoroSegmentedControl, LoroSelect, LoroSpinner, LoroStatCard, LoroStoreRankCard, LoroSummaryBar, LoroTab, LoroTextArea, LoroToast, LoroToggle, LoroUpload };
-export type { LoroAlertAnnouncement, LoroAlertVariant, LoroAppNavClick, LoroAppNavItem, LoroAuthFieldState, LoroBadgeVariant, LoroButtonColor, LoroButtonHtmlType, LoroButtonIconMode, LoroButtonSize, LoroButtonType, LoroButtonVariant, LoroButtonWidth, LoroCardJustify, LoroCardNavTrailing, LoroCardNavVariant, LoroCardVariant, LoroDividerAlign, LoroDropdownOption, LoroIconAsset, LoroIconAssetName, LoroIconColor, LoroIconColorToken, LoroIconLegacyName, LoroIconName, LoroIconRenderMode, LoroIconSize, LoroImageAsset, LoroImageAssetName, LoroImageLegacyName, LoroImageName, LoroInputState, LoroInputUnit, LoroInputVariant, LoroModalPlacement, LoroModalSize, LoroNotificationItem, LoroProductRowStatus, LoroProductRowVariant, LoroRadioVariant, LoroSegmentedOption, LoroStatCardVariant, LoroStoreRankCardVariant, LoroTabAlign, LoroTabOption, LoroToastPosition, LoroToastVariant };
+export { Footer, LORO_BUTTON_CLASSES, LORO_BUTTON_COLORS, LORO_BUTTON_DEFAULTS, LORO_BUTTON_ICON_MODES, LORO_BUTTON_SIZES, LORO_BUTTON_TYPES, LORO_BUTTON_VARIANTS, LORO_ICON_ASSETS, LORO_ICON_LEGACY_NAMES, LORO_ICON_PATHS, LORO_IMAGE_ASSETS, LORO_IMAGE_LEGACY_NAMES, LORO_IMAGE_PATHS, LoroAccordion, LoroAlert, LoroAppNav, LoroAssistantCard, LoroAuthField, LoroAuthSocialButton, LoroBadge, LoroButton, LoroCardBenefit, LoroCardDefaultArrowSize, LoroCardDefaultHeroAvatarIconSize, LoroCardDefaultIconSize, LoroCardLink, LoroCardNav, LoroCardNavigation, LoroCheckbox, LoroDashboardCard, LoroDivider, LoroDropdown, LoroFilterChip, LoroHapticsService, LoroIcon, LoroImage, LoroInput, LoroModal, LoroNotification, LoroNotificationPanel, LoroNotificationRow, LoroProductRow, LoroProductSection, LoroProfileCard, LoroProfileHero, LoroRadio, LoroSegmentedControl, LoroSelect, LoroSpinner, LoroStatCard, LoroStoreRankCard, LoroSummaryBar, LoroTab, LoroTextArea, LoroToast, LoroToggle, LoroUpload };
+export type { LoroAlertAnnouncement, LoroAlertVariant, LoroAppNavClick, LoroAppNavItem, LoroAuthFieldState, LoroBadgeVariant, LoroButtonColor, LoroButtonHtmlType, LoroButtonIconMode, LoroButtonSize, LoroButtonType, LoroButtonVariant, LoroButtonWidth, LoroCardBenefitIconColor, LoroCardBenefitIconName, LoroCardBenefitIconSize, LoroCardBenefitVariant, LoroCardHomeVariant, LoroCardJustify, LoroCardLinkAvatarSize, LoroCardLinkVariant, LoroCardNavTrailing, LoroCardNavVariant, LoroCardVariant, LoroDividerAlign, LoroDropdownOption, LoroIconAsset, LoroIconAssetName, LoroIconColor, LoroIconColorToken, LoroIconLegacyName, LoroIconName, LoroIconRenderMode, LoroIconSize, LoroImageAsset, LoroImageAssetName, LoroImageLegacyName, LoroImageName, LoroInputState, LoroInputUnit, LoroInputVariant, LoroModalPlacement, LoroModalSize, LoroNotificationItem, LoroProductRowStatus, LoroProductRowVariant, LoroRadioVariant, LoroSegmentedOption, LoroStatCardVariant, LoroStoreRankCardVariant, LoroTabAlign, LoroTabOption, LoroToastPosition, LoroToastVariant };