@designbasekorea/ui-wc 0.2.1 → 0.3.0

package/dist/react/index.d.ts

@@ -142,12 +142,16 @@ declare global {
 }
 
 declare class DbToggle extends HTMLElement {
+    static readonly formAssociated = true;
     static get observedAttributes(): string[];
+    private readonly internals;
     private root?;
     private labelEl?;
     private built;
     get checked(): boolean;
     set checked(value: boolean);
+    get name(): string;
+    set name(value: string);
     get disabled(): boolean;
     set disabled(value: boolean);
     get readOnly(): boolean;
@@ -156,7 +160,10 @@ declare class DbToggle extends HTMLElement {
     set size(value: string);
     connectedCallback(): void;
     attributeChangedCallback(): void;
+    formResetCallback(): void;
+    formDisabledCallback(disabled: boolean): void;
     private get hasLabel();
+    private syncFormValue;
     private build;
     private handleClick;
     private syncState;
@@ -296,6 +303,9 @@ declare class DbTabs extends HTMLElement {
     get labels(): string[] | string;
     set labels(value: string[] | string);
     get tabItems(): TabItemConfig$1[];
+    get items(): TabItemConfig$1[];
+    set items(value: TabItemConfig$1[] | string);
+    set tabItems(value: TabItemConfig$1[] | string);
     get activeIndex(): number;
     set activeIndex(value: number);
     get orientation(): string;
@@ -463,6 +473,8 @@ declare class DbTooltip extends HTMLElement {
     private showTimer?;
     private hideTimer?;
     private repositionRaf?;
+    private enterRaf?;
+    private removalTimer?;
     get content(): string;
     set content(value: string);
     get position(): string;
@@ -494,6 +506,7 @@ declare class DbTooltip extends HTMLElement {
     private syncTooltipClasses;
     private calculatePosition;
     private setVisible;
+    private hideTooltip;
     private removeTooltip;
     private handleShow;
     private handleHide;
@@ -576,11 +589,21 @@ declare global {
 
 declare class DbProgress extends HTMLElement {
     static get observedAttributes(): string[];
+    private structureSignature;
+    private barEl?;
+    private linearValueEl?;
+    private circularBarEl?;
+    private circularValueEl?;
+    private circumference;
     get value(): number;
     set value(value: number);
     connectedCallback(): void;
     attributeChangedCallback(): void;
     private render;
+    private buildLinear;
+    private updateLinear;
+    private buildCircular;
+    private updateCircular;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -589,7 +612,9 @@ declare global {
 }
 
 declare class DbSelect extends HTMLElement {
+    static readonly formAssociated = true;
     static get observedAttributes(): string[];
+    private readonly internals;
     private labelEl?;
     private trigger?;
     private valueEl?;
@@ -605,12 +630,16 @@ declare class DbSelect extends HTMLElement {
     private built;
     private searchTerm;
     private focusedIndex;
+    get name(): string;
+    set name(value: string);
     get open(): boolean;
     set open(value: boolean);
     get value(): string;
     set value(value: string);
     connectedCallback(): void;
     disconnectedCallback(): void;
+    formResetCallback(): void;
+    formDisabledCallback(disabled: boolean): void;
     attributeChangedCallback(name: string): void;
     get multiple(): boolean;
     set multiple(value: boolean);
@@ -999,7 +1028,8 @@ declare class DbToast extends HTMLElement {
     attributeChangedCallback(name: string): void;
     private clearTimers;
     private startTimers;
-    private close;
+    /** 토스트를 닫고(애니메이션 포함) auto-remove 설정 시 DOM에서 제거합니다. */
+    close(): void;
     private iconForStatus;
     private render;
 }
@@ -1050,6 +1080,10 @@ declare class DbIndicator extends HTMLElement {
     set size(value: string);
     get direction(): string;
     set direction(value: string);
+    get numberBackground(): boolean;
+    set numberBackground(value: boolean);
+    get playback(): boolean;
+    set playback(value: boolean);
     get clickable(): boolean;
     set clickable(value: boolean);
     get timer(): boolean;
@@ -1068,6 +1102,14 @@ declare class DbIndicator extends HTMLElement {
     private renderStep;
     private renderDots;
     private renderPlaybackButton;
+    private renderNumbers;
+    private renderSlide;
+    private renderScaleFill;
+    private renderLine;
+    private renderDotLine;
+    private fillRatio;
+    private renderFill;
+    private renderContent;
     private render;
 }
 declare global {
@@ -1358,6 +1400,7 @@ declare class DbLightbox extends HTMLElement {
     private imageError;
     private keydownHandler;
     private boundSrc;
+    private thumbnailSignature;
     static get observedAttributes(): string[];
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -1387,10 +1430,22 @@ declare global {
     }
 }
 
+interface DbBottomNavigationItem {
+    id: string;
+    icon: string;
+    activeIcon?: string;
+    label: string;
+    isActive?: boolean;
+    disabled?: boolean;
+    badge?: string | number;
+    badgeColor?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
+}
 declare class DbBottomNavigation extends HTMLElement {
     static get observedAttributes(): string[];
     connectedCallback(): void;
     attributeChangedCallback(): void;
+    get items(): DbBottomNavigationItem[];
+    set items(value: DbBottomNavigationItem[] | string);
     private parseItems;
     private iconSize;
     private syncHostClasses;
@@ -1402,6 +1457,49 @@ declare global {
     }
 }
 
+interface DbNavbarItem {
+    id: string;
+    label: string;
+    href?: string;
+    icon?: string;
+    /** 메가 메뉴 링크에서 라벨 아래 표시되는 보조 설명 */
+    description?: string;
+    active?: boolean;
+    disabled?: boolean;
+    children?: DbNavbarItem[];
+    /** children 대신 메가 메뉴(다단 패널) 스타일로 렌더링 */
+    megaMenu?: boolean;
+    /** 메가 메뉴 컬럼 목록 */
+    columns?: DbNavbarMegaColumn[];
+    /** 메가 메뉴 우측 강조(피처드) 영역 */
+    featured?: DbNavbarMegaFeatured;
+}
+interface DbNavbarMegaColumn {
+    id: string;
+    /** 컬럼 상단 제목 */
+    title?: string;
+    /** 컬럼 내 링크 목록 */
+    items: DbNavbarItem[];
+}
+interface DbNavbarMegaFeatured {
+    title?: string;
+    description?: string;
+    /** 배경 이미지 URL */
+    image?: string;
+    href?: string;
+    /** CTA 텍스트 (예: 자세히 보기) */
+    ctaLabel?: string;
+    icon?: string;
+}
+interface DbNavbarUserProfile {
+    name: string;
+    email?: string;
+    avatar?: string;
+    badge?: number;
+    badgeVariant?: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger';
+    badgeStyle?: 'dot' | 'number' | 'text' | 'outlined';
+    badgeText?: string;
+}
 declare class DbNavbar extends HTMLElement {
     private mobileOpen;
     private userMenuOpen;
@@ -1411,6 +1509,12 @@ declare class DbNavbar extends HTMLElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(): void;
+    get items(): DbNavbarItem[];
+    set items(value: DbNavbarItem[] | string);
+    get userMenuItems(): DbNavbarItem[];
+    set userMenuItems(value: DbNavbarItem[] | string);
+    get userProfile(): DbNavbarUserProfile | null;
+    set userProfile(value: DbNavbarUserProfile | string | null);
     private parseItems;
     private parseUserProfile;
     private iconSize;
@@ -1418,10 +1522,16 @@ declare class DbNavbar extends HTMLElement {
     private unbindOutsideClick;
     private dispatchItemClick;
     private syncHostClasses;
+    private isMegaMenu;
+    private createNavToggleButton;
+    private createMegaLink;
+    private createMegaMenu;
+    private createMegaFeatured;
     private createDesktopNavItem;
     private createUserMenuItemElement;
     private bindSearchEvents;
     private applyAvatarProfile;
+    private getMobileChildren;
     private createMobileMenuItem;
     private updateUserMenuVisibility;
     private renderMobileMenu;
@@ -1433,6 +1543,99 @@ declare global {
     }
 }
 
+type DbFooterSocialPlatform = 'youtube' | 'instagram' | 'x' | 'linkedin' | 'facebook' | 'email';
+interface DbFooterLink {
+    id: string;
+    label: string;
+    href?: string;
+    external?: boolean;
+    /** 개인정보처리방침 등 강조 링크 */
+    emphasize?: boolean;
+}
+interface DbFooterLinkColumn {
+    id: string;
+    title: string;
+    items: DbFooterLink[];
+}
+interface DbFooterSocialLink {
+    id: string;
+    platform: DbFooterSocialPlatform;
+    href: string;
+    label?: string;
+}
+interface DbFooterCompanyInfo {
+    companyName?: string;
+    representative?: string;
+    businessNumber?: string;
+    mailOrderNumber?: string;
+    address?: string;
+    phone?: string;
+    customerCenter?: string;
+    email?: string;
+    hostingProvider?: string;
+}
+interface DbFooterFamilySite {
+    id: string;
+    label: string;
+    href: string;
+}
+declare class DbFooter extends HTMLElement {
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    get columns(): DbFooterLinkColumn[];
+    set columns(value: DbFooterLinkColumn[] | string);
+    get legalLinks(): DbFooterLink[];
+    set legalLinks(value: DbFooterLink[] | string);
+    get socialLinks(): DbFooterSocialLink[];
+    set socialLinks(value: DbFooterSocialLink[] | string);
+    get companyInfo(): DbFooterCompanyInfo;
+    set companyInfo(value: DbFooterCompanyInfo | string);
+    get familySites(): DbFooterFamilySite[];
+    set familySites(value: DbFooterFamilySite[] | string);
+    private syncHostClasses;
+    private dispatchLinkClick;
+    private createLink;
+    private createSocialLink;
+    private createCompanyInfoRows;
+    private showLogo;
+    private createLogo;
+    private renderBrand;
+    private renderColumns;
+    private createLegalNav;
+    private renderLegalBar;
+    private renderCompanyInfo;
+    private createCopyright;
+    private renderMinimal;
+    private render;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-footer': DbFooter;
+    }
+}
+
+interface DbSidebarItem {
+    id: string;
+    label: string;
+    href?: string;
+    icon?: string;
+    active?: boolean;
+    disabled?: boolean;
+    badge?: string | number;
+    badgeColor?: string;
+    children?: DbSidebarItem[];
+}
+interface DbSidebarSection {
+    id: string;
+    title?: string;
+    items: DbSidebarItem[];
+}
+interface DbSidebarUserProfile {
+    name: string;
+    email?: string;
+    avatar?: string;
+}
 declare class DbSidebar extends HTMLElement {
     private expandedItems;
     private userMenuOpen;
@@ -1442,6 +1645,14 @@ declare class DbSidebar extends HTMLElement {
     disconnectedCallback(): void;
     attributeChangedCallback(name: string): void;
     private seedExpanded;
+    get items(): DbSidebarItem[];
+    set items(value: DbSidebarItem[] | string);
+    get sections(): DbSidebarSection[];
+    set sections(value: DbSidebarSection[] | string);
+    get userMenuItems(): DbSidebarItem[];
+    set userMenuItems(value: DbSidebarItem[] | string);
+    get userProfile(): DbSidebarUserProfile | null;
+    set userProfile(value: DbSidebarUserProfile | string | null);
     private parseSections;
     private parseUserMenuItems;
     private parseUserProfile;
@@ -2834,6 +3045,15 @@ declare global {
     }
 }
 
+interface HeroButton {
+    text: string;
+    href?: string;
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'outline' | 'ghost';
+    size?: 's' | 'm' | 'l';
+    external?: boolean;
+    startIcon?: string;
+    icon?: string;
+}
 declare class DbSectionHero extends HTMLElement {
     static get observedAttributes(): string[];
     private built;
@@ -2846,6 +3066,8 @@ declare class DbSectionHero extends HTMLElement {
     private buttonsEl?;
     connectedCallback(): void;
     attributeChangedCallback(): void;
+    get buttons(): HeroButton[];
+    set buttons(value: HeroButton[] | string);
     private parseButtons;
     private build;
     private updateUI;
@@ -2856,6 +3078,12 @@ declare global {
     }
 }
 
+interface FeatureAction {
+    label: string;
+    variant?: string;
+    size?: string;
+    href?: string;
+}
 declare class DbSectionFeature extends HTMLElement {
     static get observedAttributes(): string[];
     private built;
@@ -2871,6 +3099,8 @@ declare class DbSectionFeature extends HTMLElement {
     connectedCallback(): void;
     attributeChangedCallback(): void;
     private parseBadge;
+    get actions(): FeatureAction[];
+    set actions(value: FeatureAction[] | string);
     private parseActions;
     private build;
     private updateUI;
@@ -2921,6 +3151,14 @@ declare global {
     }
 }
 
+interface DownloadStore {
+    store: 'app-store' | 'google-play';
+    href?: string;
+    label?: string;
+    storeName?: string;
+    size?: string;
+    theme?: string;
+}
 declare class DbSectionAppDownload extends HTMLElement {
     static get observedAttributes(): string[];
     private built;
@@ -2932,6 +3170,8 @@ declare class DbSectionAppDownload extends HTMLElement {
     private badgesEl?;
     connectedCallback(): void;
     attributeChangedCallback(): void;
+    get stores(): DownloadStore[];
+    set stores(value: DownloadStore[] | string);
     private parseStores;
     private build;
     private updateUI;
@@ -2946,27 +3186,49 @@ declare class DbMarquee extends HTMLElement {
     static get observedAttributes(): string[];
     private built;
     private containerEl?;
-    private trackEl?;
-    private baseGroupEl?;
+    private rowsEl?;
     private srOnlyEl?;
+    private rows;
+    private rowCount;
     private resizeObserver?;
     private containerWidth;
-    private baseGroupWidth;
+    private gap;
+    private scrollVelocityEnabled;
+    private rafId;
+    private lastFrameTime;
+    private lastScrollY;
+    private smoothedScrollV;
+    private baseDurationSec;
+    private reduceMotion;
     private boundMeasure;
+    private boundFrame;
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(): void;
     private getBool;
     private parseItems;
+    private itemToText;
     private build;
     private bindResize;
+    /** rows 개수에 맞춰 행 DOM을 만들거나 제거한다. */
+    private reconcileRows;
     private measure;
     private unbindImageListeners;
     private bindImageListeners;
     private renderItem;
     private renderGroup;
-    private renderDuplicates;
+    /**
+     * 각 행의 base 그룹을 items로 다시 만든다 — items/attributes 변경 시에만 실행.
+     * 이미지 노드 재생성으로 인한 재로딩을 막기 위해 measure() 중에는 건드리지 않는다.
+     */
+    private buildBase;
+    private baseImagesReady;
+    /** 트랙을 채울 만큼의 복제 그룹 개수를 델타만 조정한다. */
+    private reconcileDuplicates;
     private syncReadyState;
+    private startScrollEngine;
+    private stopScrollEngine;
+    private frame;
     private updateUI;
 }
 declare global {
@@ -2975,11 +3237,17 @@ declare global {
     }
 }
 
+interface GradientColor$1 {
+    color: string;
+    position?: number;
+}
 declare class DbGradient extends HTMLElement {
     static get observedAttributes(): string[];
     connectedCallback(): void;
     attributeChangedCallback(): void;
     private getBool;
+    get colors(): GradientColor$1[];
+    set colors(value: GradientColor$1[] | string);
     private parseColors;
     private directionMap;
     private colorStops;
@@ -3025,8 +3293,16 @@ declare class DbAdBanner extends HTMLElement {
     private autoCloseTimer?;
     private rootEl?;
     private gradientEl?;
+    private animBgEl?;
+    private animBgInner?;
+    private gridBgEl?;
+    private gridBgInner?;
     private contentEl?;
+    private mainEl?;
+    private textEl?;
     private closeBtn?;
+    private imageEl?;
+    private linkEl?;
     private iconEl?;
     private labelEl?;
     private badgeEl?;
@@ -3044,11 +3320,28 @@ declare class DbAdBanner extends HTMLElement {
     private getBool;
     private getType;
     private getVariant;
+    private getSize;
+    private ctaButtonSize;
     private build;
     private handleClose;
     private stopAutoClose;
     private startAutoClose;
-    private renderGradientWrapper;
+    private getBackground;
+    private ensureAnimBg;
+    private ensureGridBg;
+    /** 이전 배경 모드의 백드롭 엘리먼트를 정리한다. */
+    private clearBackdrop;
+    private renderBackground;
+    /** 장식 아이콘은 card 타입에서만 사용한다. */
+    private syncIcon;
+    /** floating 타입에서만 텍스트 상단에 배지 칩을 노출한다. */
+    private syncBadge;
+    /** floating 타입에서 배너 이미지를 콘텐츠 상단(패딩 밖)에 렌더한다. */
+    private syncImage;
+    /** topbar 타입에서 href 가 있으면 전체를 덮는 링크 오버레이를 렌더한다. */
+    private syncLink;
+    /** show-countdown + end-date 가 있을 때만 카운트다운을 마운트한다. */
+    private syncCountdown;
     private updateUI;
 }
 declare global {
@@ -3092,11 +3385,18 @@ declare class DbAnimationText extends HTMLElement {
     private displayText;
     private isVisible;
     private isAnimating;
+    private wordEls;
+    private scrollHandler?;
+    private rafId?;
+    private rotateToken;
+    private rotateObserver?;
     static get observedAttributes(): string[];
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(): void;
     private getText;
+    private getRotateTexts;
+    private getLongestText;
     private getType;
     private getTrigger;
     private ensureStructure;
@@ -3104,6 +3404,10 @@ declare class DbAnimationText extends HTMLElement {
     private syncFromAttributes;
     private syncClasses;
     private setupTrigger;
+    private setupTextRotate;
+    private setupScrollFill;
+    private teardownScrollFill;
+    private updateScrollFill;
     private startAnimation;
     private startTyping;
     private startDecoding;
@@ -3115,6 +3419,13 @@ declare global {
     }
 }
 
+type TutorialStep$1 = {
+    id: string;
+    target: string;
+    title?: string;
+    content?: string;
+    placement?: 'top' | 'bottom' | 'left' | 'right' | 'auto';
+};
 declare class DbTutorial extends HTMLElement {
     static get observedAttributes(): string[];
     private root?;
@@ -3134,6 +3445,8 @@ declare class DbTutorial extends HTMLElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: string): void;
+    get steps(): TutorialStep$1[];
+    set steps(value: TutorialStep$1[] | string);
     private parseSteps;
     private syncStepFromAttribute;
     private isOpenRequested;
@@ -3162,15 +3475,36 @@ declare global {
 declare class DbAnimationBackground extends HTMLElement {
     private layersEl?;
     private contentEl?;
+    private controlsRootEl?;
+    private panelEl?;
+    private panelOpen;
     private layerHandle?;
     private clickHandler?;
+    private mountedType?;
+    private controlInputs;
+    private syncingControls;
     static get observedAttributes(): string[];
     connectedCallback(): void;
     disconnectedCallback(): void;
-    attributeChangedCallback(): void;
-    private teardownLayers;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    private getBool;
     private getSizeStyle;
+    private getConfig;
+    private teardownLayers;
+    private remountLayers;
+    private canLiveUpdate;
+    private applyConfig;
+    private syncClickable;
     private render;
+    private ensureControlsShell;
+    private syncControlsVisibility;
+    private syncPanelState;
+    private createIconButton;
+    private rebuildControlInputs;
+    private createControlField;
+    private commitControlValue;
+    private syncControlInputs;
+    private renderColorInputs;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -3178,8 +3512,99 @@ declare global {
     }
 }
 
+/**
+ * db-grid-background — 캔버스 기반 그리드 배경.
+ *
+ * 패턴은 항상 중앙을 기준으로 대칭 배치되며(가장자리 라인 없음),
+ * 단독 배경으로도, 다른 배경 위 데코 레이어(overlay)로도 쓸 수 있다.
+ * interactive/animate 로 마우스 인터랙션과 앰비언트 애니메이션을 켤 수 있다.
+ *
+ * @example
+ *   <db-grid-background type="lines" size="32" fade="all"
+ *     interactive animate height="240"></db-grid-background>
+ */
+declare class DbGridBackground extends HTMLElement {
+    private canvas?;
+    private ctx?;
+    private hlCanvas?;
+    private maskCanvas?;
+    private ro?;
+    private rafId?;
+    private lastTime;
+    private lastPointerMove;
+    private bandAngle;
+    private pointer;
+    private cssW;
+    private cssH;
+    private colorProbe?;
+    private themeObserver?;
+    private themeMedia?;
+    private tracePulses;
+    private traceSpawnAccumulator;
+    private onThemeMediaChange;
+    private onPointerMove;
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    private getBool;
+    private getNumber;
+    private getSizeStyle;
+    private getColorProbe;
+    private resolveCssColor;
+    private isDarkContext;
+    private resolveThemeColor;
+    private effectiveOpacity;
+    private effectiveColor;
+    private effectiveInterColor;
+    private traceDrawColor;
+    private traceDrawOpacity;
+    private parseColorRgb;
+    private crossArm;
+    private interactionMode;
+    private animationStyle;
+    private traceDirection;
+    private linesLayout;
+    private crossStyle;
+    private parseGuideEdges;
+    private guideFraction;
+    private isGridLines;
+    private isTraceableLines;
+    private get cfg();
+    private ensureCanvas;
+    private applyHostStyles;
+    private startObserving;
+    private observeDocumentTheme;
+    private bindPointer;
+    private handlePointerMove;
+    private measure;
+    /** 중앙을 기준으로 대칭 배치되며 (0, extent) 내부 좌표만 반환 → 가장자리 라인 없음 */
+    private axis;
+    private scheduleDraw;
+    private ensureLoop;
+    private drawFrame;
+    private easeInOutCubic;
+    private traceSegmentLength;
+    private pulseHead;
+    private updateTracePulses;
+    private traceLinePositions;
+    private spawnTracePulse;
+    private drawTracePulseSegment;
+    private drawTraceHighlight;
+    private drawPattern;
+    private drawGridLines;
+    private drawFrameGuides;
+    private drawCenterGuides;
+    private buildEnergyMask;
+    private applyFade;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-grid-background': DbGridBackground;
+    }
+}
+
 declare class DbCursorFollower extends HTMLElement {
-    private scopeEl?;
     private portalRoot?;
     private pillEl?;
     private labelEl?;
@@ -3197,7 +3622,7 @@ declare class DbCursorFollower extends HTMLElement {
     disconnectedCallback(): void;
     attributeChangedCallback(): void;
     private setupDesktopGate;
-    private ensureScope;
+    private updateScope;
     private isInScope;
     private mountLayer;
     private teardownLayer;
@@ -3245,17 +3670,17 @@ declare function ModalHeader({ className, children, ...props }: PartProps): reac
     accessKey?: string | undefined;
     autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
     autoFocus?: boolean | undefined;
-    contentEditable?: (boolean | "false" | "true") | "inherit" | "plaintext-only" | undefined;
+    contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     contextMenu?: string | undefined;
     dir?: string | undefined;
-    draggable?: (boolean | "false" | "true") | undefined;
+    draggable?: (boolean | "true" | "false") | undefined;
     enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
     hidden?: boolean | undefined;
     id?: string | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
     slot?: string | undefined;
-    spellCheck?: (boolean | "false" | "true") | undefined;
+    spellCheck?: (boolean | "true" | "false") | undefined;
     style?: react.CSSProperties | undefined;
     tabIndex?: number | undefined;
     title?: string | undefined;
@@ -3293,11 +3718,11 @@ declare function ModalHeader({ className, children, ...props }: PartProps): reac
     exportparts?: string | undefined;
     part?: string | undefined;
     "aria-activedescendant"?: string | undefined;
-    "aria-atomic"?: (boolean | "false" | "true") | undefined;
+    "aria-atomic"?: (boolean | "true" | "false") | undefined;
     "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
     "aria-braillelabel"?: string | undefined;
     "aria-brailleroledescription"?: string | undefined;
-    "aria-busy"?: (boolean | "false" | "true") | undefined;
+    "aria-busy"?: (boolean | "true" | "false") | undefined;
     "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
     "aria-colcount"?: number | undefined;
     "aria-colindex"?: number | undefined;
@@ -3308,37 +3733,37 @@ declare function ModalHeader({ className, children, ...props }: PartProps): reac
     "aria-describedby"?: string | undefined;
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;
-    "aria-disabled"?: (boolean | "false" | "true") | undefined;
+    "aria-disabled"?: (boolean | "true" | "false") | undefined;
     "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
     "aria-errormessage"?: string | undefined;
-    "aria-expanded"?: (boolean | "false" | "true") | undefined;
+    "aria-expanded"?: (boolean | "true" | "false") | undefined;
     "aria-flowto"?: string | undefined;
-    "aria-grabbed"?: (boolean | "false" | "true") | undefined;
+    "aria-grabbed"?: (boolean | "true" | "false") | undefined;
     "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
-    "aria-hidden"?: (boolean | "false" | "true") | undefined;
+    "aria-hidden"?: (boolean | "true" | "false") | undefined;
     "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
     "aria-keyshortcuts"?: string | undefined;
     "aria-label"?: string | undefined;
     "aria-labelledby"?: string | undefined;
     "aria-level"?: number | undefined;
     "aria-live"?: "off" | "assertive" | "polite" | undefined;
-    "aria-modal"?: (boolean | "false" | "true") | undefined;
-    "aria-multiline"?: (boolean | "false" | "true") | undefined;
-    "aria-multiselectable"?: (boolean | "false" | "true") | undefined;
+    "aria-modal"?: (boolean | "true" | "false") | undefined;
+    "aria-multiline"?: (boolean | "true" | "false") | undefined;
+    "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
     "aria-orientation"?: "horizontal" | "vertical" | undefined;
     "aria-owns"?: string | undefined;
     "aria-placeholder"?: string | undefined;
     "aria-posinset"?: number | undefined;
     "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
-    "aria-readonly"?: (boolean | "false" | "true") | undefined;
+    "aria-readonly"?: (boolean | "true" | "false") | undefined;
     "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
-    "aria-required"?: (boolean | "false" | "true") | undefined;
+    "aria-required"?: (boolean | "true" | "false") | undefined;
     "aria-roledescription"?: string | undefined;
     "aria-rowcount"?: number | undefined;
     "aria-rowindex"?: number | undefined;
     "aria-rowindextext"?: string | undefined;
     "aria-rowspan"?: number | undefined;
-    "aria-selected"?: (boolean | "false" | "true") | undefined;
+    "aria-selected"?: (boolean | "true" | "false") | undefined;
     "aria-setsize"?: number | undefined;
     "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
     "aria-valuemax"?: number | undefined;
@@ -3527,17 +3952,17 @@ declare function ModalBody({ className, children, ...props }: PartProps): react.
     accessKey?: string | undefined;
     autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
     autoFocus?: boolean | undefined;
-    contentEditable?: (boolean | "false" | "true") | "inherit" | "plaintext-only" | undefined;
+    contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     contextMenu?: string | undefined;
     dir?: string | undefined;
-    draggable?: (boolean | "false" | "true") | undefined;
+    draggable?: (boolean | "true" | "false") | undefined;
     enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
     hidden?: boolean | undefined;
     id?: string | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
     slot?: string | undefined;
-    spellCheck?: (boolean | "false" | "true") | undefined;
+    spellCheck?: (boolean | "true" | "false") | undefined;
     style?: react.CSSProperties | undefined;
     tabIndex?: number | undefined;
     title?: string | undefined;
@@ -3575,11 +4000,11 @@ declare function ModalBody({ className, children, ...props }: PartProps): react.
     exportparts?: string | undefined;
     part?: string | undefined;
     "aria-activedescendant"?: string | undefined;
-    "aria-atomic"?: (boolean | "false" | "true") | undefined;
+    "aria-atomic"?: (boolean | "true" | "false") | undefined;
     "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
     "aria-braillelabel"?: string | undefined;
     "aria-brailleroledescription"?: string | undefined;
-    "aria-busy"?: (boolean | "false" | "true") | undefined;
+    "aria-busy"?: (boolean | "true" | "false") | undefined;
     "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
     "aria-colcount"?: number | undefined;
     "aria-colindex"?: number | undefined;
@@ -3590,37 +4015,37 @@ declare function ModalBody({ className, children, ...props }: PartProps): react.
     "aria-describedby"?: string | undefined;
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;
-    "aria-disabled"?: (boolean | "false" | "true") | undefined;
+    "aria-disabled"?: (boolean | "true" | "false") | undefined;
     "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
     "aria-errormessage"?: string | undefined;
-    "aria-expanded"?: (boolean | "false" | "true") | undefined;
+    "aria-expanded"?: (boolean | "true" | "false") | undefined;
     "aria-flowto"?: string | undefined;
-    "aria-grabbed"?: (boolean | "false" | "true") | undefined;
+    "aria-grabbed"?: (boolean | "true" | "false") | undefined;
     "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
-    "aria-hidden"?: (boolean | "false" | "true") | undefined;
+    "aria-hidden"?: (boolean | "true" | "false") | undefined;
     "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
     "aria-keyshortcuts"?: string | undefined;
     "aria-label"?: string | undefined;
     "aria-labelledby"?: string | undefined;
     "aria-level"?: number | undefined;
     "aria-live"?: "off" | "assertive" | "polite" | undefined;
-    "aria-modal"?: (boolean | "false" | "true") | undefined;
-    "aria-multiline"?: (boolean | "false" | "true") | undefined;
-    "aria-multiselectable"?: (boolean | "false" | "true") | undefined;
+    "aria-modal"?: (boolean | "true" | "false") | undefined;
+    "aria-multiline"?: (boolean | "true" | "false") | undefined;
+    "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
     "aria-orientation"?: "horizontal" | "vertical" | undefined;
     "aria-owns"?: string | undefined;
     "aria-placeholder"?: string | undefined;
     "aria-posinset"?: number | undefined;
     "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
-    "aria-readonly"?: (boolean | "false" | "true") | undefined;
+    "aria-readonly"?: (boolean | "true" | "false") | undefined;
     "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
-    "aria-required"?: (boolean | "false" | "true") | undefined;
+    "aria-required"?: (boolean | "true" | "false") | undefined;
     "aria-roledescription"?: string | undefined;
     "aria-rowcount"?: number | undefined;
     "aria-rowindex"?: number | undefined;
     "aria-rowindextext"?: string | undefined;
     "aria-rowspan"?: number | undefined;
-    "aria-selected"?: (boolean | "false" | "true") | undefined;
+    "aria-selected"?: (boolean | "true" | "false") | undefined;
     "aria-setsize"?: number | undefined;
     "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
     "aria-valuemax"?: number | undefined;
@@ -3809,17 +4234,17 @@ declare function ModalFooter({ className, children, ...props }: PartProps): reac
     accessKey?: string | undefined;
     autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
     autoFocus?: boolean | undefined;
-    contentEditable?: (boolean | "false" | "true") | "inherit" | "plaintext-only" | undefined;
+    contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     contextMenu?: string | undefined;
     dir?: string | undefined;
-    draggable?: (boolean | "false" | "true") | undefined;
+    draggable?: (boolean | "true" | "false") | undefined;
     enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
     hidden?: boolean | undefined;
     id?: string | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
     slot?: string | undefined;
-    spellCheck?: (boolean | "false" | "true") | undefined;
+    spellCheck?: (boolean | "true" | "false") | undefined;
     style?: react.CSSProperties | undefined;
     tabIndex?: number | undefined;
     title?: string | undefined;
@@ -3857,11 +4282,11 @@ declare function ModalFooter({ className, children, ...props }: PartProps): reac
     exportparts?: string | undefined;
     part?: string | undefined;
     "aria-activedescendant"?: string | undefined;
-    "aria-atomic"?: (boolean | "false" | "true") | undefined;
+    "aria-atomic"?: (boolean | "true" | "false") | undefined;
     "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
     "aria-braillelabel"?: string | undefined;
     "aria-brailleroledescription"?: string | undefined;
-    "aria-busy"?: (boolean | "false" | "true") | undefined;
+    "aria-busy"?: (boolean | "true" | "false") | undefined;
     "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
     "aria-colcount"?: number | undefined;
     "aria-colindex"?: number | undefined;
@@ -3872,37 +4297,37 @@ declare function ModalFooter({ className, children, ...props }: PartProps): reac
     "aria-describedby"?: string | undefined;
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;
-    "aria-disabled"?: (boolean | "false" | "true") | undefined;
+    "aria-disabled"?: (boolean | "true" | "false") | undefined;
     "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
     "aria-errormessage"?: string | undefined;
-    "aria-expanded"?: (boolean | "false" | "true") | undefined;
+    "aria-expanded"?: (boolean | "true" | "false") | undefined;
     "aria-flowto"?: string | undefined;
-    "aria-grabbed"?: (boolean | "false" | "true") | undefined;
+    "aria-grabbed"?: (boolean | "true" | "false") | undefined;
     "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
-    "aria-hidden"?: (boolean | "false" | "true") | undefined;
+    "aria-hidden"?: (boolean | "true" | "false") | undefined;
     "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
     "aria-keyshortcuts"?: string | undefined;
     "aria-label"?: string | undefined;
     "aria-labelledby"?: string | undefined;
     "aria-level"?: number | undefined;
     "aria-live"?: "off" | "assertive" | "polite" | undefined;
-    "aria-modal"?: (boolean | "false" | "true") | undefined;
-    "aria-multiline"?: (boolean | "false" | "true") | undefined;
-    "aria-multiselectable"?: (boolean | "false" | "true") | undefined;
+    "aria-modal"?: (boolean | "true" | "false") | undefined;
+    "aria-multiline"?: (boolean | "true" | "false") | undefined;
+    "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
     "aria-orientation"?: "horizontal" | "vertical" | undefined;
     "aria-owns"?: string | undefined;
     "aria-placeholder"?: string | undefined;
     "aria-posinset"?: number | undefined;
     "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
-    "aria-readonly"?: (boolean | "false" | "true") | undefined;
+    "aria-readonly"?: (boolean | "true" | "false") | undefined;
     "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
-    "aria-required"?: (boolean | "false" | "true") | undefined;
+    "aria-required"?: (boolean | "true" | "false") | undefined;
     "aria-roledescription"?: string | undefined;
     "aria-rowcount"?: number | undefined;
     "aria-rowindex"?: number | undefined;
     "aria-rowindextext"?: string | undefined;
     "aria-rowspan"?: number | undefined;
-    "aria-selected"?: (boolean | "false" | "true") | undefined;
+    "aria-selected"?: (boolean | "true" | "false") | undefined;
     "aria-setsize"?: number | undefined;
     "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
     "aria-valuemax"?: number | undefined;
@@ -4158,6 +4583,10 @@ type RangeSliderProps = WebComponentProps & {
     size?: 's' | 'm' | 'l';
     variant?: 'default' | 'primary' | 'success' | 'warning' | 'danger';
     showValue?: boolean;
+    showLabel?: boolean;
+    label?: string;
+    valueFixed?: number;
+    showThumbTooltip?: boolean;
     valuePosition?: 'top' | 'left' | 'right' | 'bottom';
     showMarks?: boolean;
     marks?: number[];
@@ -4800,6 +5229,56 @@ type NavbarProps = WebComponentProps & {
     fullWidth?: boolean;
     shadow?: boolean;
 };
+type FooterLink = {
+    id: string;
+    label: string;
+    href?: string;
+    external?: boolean;
+    emphasize?: boolean;
+};
+type FooterLinkColumn = {
+    id: string;
+    title: string;
+    items: FooterLink[];
+};
+type FooterSocialLink = {
+    id: string;
+    platform: 'youtube' | 'instagram' | 'x' | 'linkedin' | 'facebook' | 'email';
+    href: string;
+    label?: string;
+};
+type FooterCompanyInfo = {
+    companyName?: string;
+    representative?: string;
+    businessNumber?: string;
+    mailOrderNumber?: string;
+    address?: string;
+    phone?: string;
+    customerCenter?: string;
+    email?: string;
+    hostingProvider?: string;
+};
+type FooterFamilySite = {
+    id: string;
+    label: string;
+    href: string;
+};
+type FooterProps = WebComponentProps & {
+    columns?: FooterLinkColumn[] | string;
+    legalLinks?: FooterLink[] | string;
+    socialLinks?: FooterSocialLink[] | string;
+    companyInfo?: FooterCompanyInfo | string;
+    familySites?: FooterFamilySite[] | string;
+    tagline?: string;
+    copyright?: string;
+    logoType?: string;
+    variant?: 'default' | 'compact' | 'minimal';
+    size?: 's' | 'm' | 'l';
+    fullWidth?: boolean;
+    showLogo?: boolean;
+    showSocial?: boolean;
+    familySiteLabel?: string;
+};
 type SidebarItem = {
     id: string;
     label: string;
@@ -4881,6 +5360,8 @@ type ProgressProps = WebComponentProps & {
     showValue?: boolean;
     animated?: boolean;
     striped?: boolean;
+    gradient?: boolean;
+    glow?: boolean;
 };
 type SkeletonProps = WebComponentProps & {
     variant?: 'text' | 'circular' | 'rectangular' | 'rounded';
@@ -5167,8 +5648,8 @@ type AccordionItemConfig = {
 };
 type AccordionProps = WebComponentProps & {
     items?: AccordionItemConfig[] | string;
+    /** 외형·레이아웃 (default · bordered · separated · contained) */
     variant?: 'default' | 'bordered' | 'separated' | 'contained';
-    style?: 'default' | 'bordered' | 'separated' | 'contained';
     size?: 's' | 'm' | 'l';
     /** @deprecated expandMode="multiple" 사용 */
     allowMultiple?: boolean;
@@ -5228,8 +5709,10 @@ type BreadcrumbItemConfig = {
 type BreadcrumbsProps = WebComponentProps & {
     items?: BreadcrumbItemConfig[] | string;
     size?: 's' | 'm' | 'l';
-    variant?: 'default' | 'contained' | 'underlined' | 'minimal' | 'outlined';
+    /** 외형·레이아웃 (canonical). @deprecated variant는 breadcrumbStyle과 동일한 레거시 별칭 */
     breadcrumbStyle?: 'default' | 'contained' | 'underlined' | 'minimal' | 'outlined';
+    /** @deprecated breadcrumbStyle 사용 */
+    variant?: 'default' | 'contained' | 'underlined' | 'minimal' | 'outlined';
     maxItems?: number;
     onItemClick?: DbEventHandler<{
         item: BreadcrumbItemConfig;
@@ -5431,10 +5914,12 @@ type IndicatorProps = WebComponentProps & {
     total?: number;
     current?: number;
     defaultCurrent?: number;
-    indicatorType?: 'dots' | 'numbers' | 'line' | 'dot-line' | 'slide' | 'combined';
-    type?: 'dots' | 'numbers' | 'line' | 'dot-line' | 'slide' | 'combined';
+    indicatorType?: 'dots' | 'numbers' | 'line' | 'dot-line' | 'slide' | 'fill' | 'combined';
+    type?: 'dots' | 'numbers' | 'line' | 'dot-line' | 'slide' | 'fill' | 'combined';
     direction?: 'horizontal' | 'vertical';
     size?: 's' | 'm' | 'l';
+    numberBackground?: boolean;
+    playback?: boolean;
     clickable?: boolean;
     timer?: boolean;
     timerDuration?: number;
@@ -6228,8 +6713,14 @@ type SectionAppDownloadProps = WebComponentProps & {
     fullHeight?: boolean;
     overflowVisible?: boolean;
 };
+type MarqueeImageItem = {
+    src: string;
+    alt?: string;
+    href?: string;
+    height?: number;
+};
 type MarqueeProps = WebComponentProps & {
-    items?: string[] | string;
+    items?: Array<string | MarqueeImageItem> | string;
     direction?: 'left' | 'right';
     duration?: number;
     speed?: number;
@@ -6242,6 +6733,10 @@ type MarqueeProps = WebComponentProps & {
     edgePadding?: number;
     gap?: number;
     alignY?: 'start' | 'center' | 'end';
+    rowCount?: number;
+    rowGap?: number;
+    scrollVelocity?: boolean;
+    scrollBoost?: number;
     ariaLabel?: string;
 };
 type GradientColor = {
@@ -6273,11 +6768,19 @@ type RandomGradientProps = WebComponentProps & {
 type AdBannerProps = WebComponentProps & {
     type?: 'hero' | 'topbar' | 'card' | 'floating';
     variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'error';
+    size?: 's' | 'm' | 'l';
     title?: string;
     subtitle?: string;
     ctaText?: string;
+    image?: string;
+    imageAlt?: string;
+    href?: string;
+    target?: string;
     autoClose?: boolean;
     closeDelay?: number;
+    background?: 'solid' | 'gradient' | 'animation' | 'grid';
+    animationType?: string;
+    gridType?: 'lines' | 'dots' | 'cross' | 'diagonal';
     useRandomGradient?: boolean;
     gradientScheme?: RandomGradientProps['scheme'];
     gradientTone?: RandomGradientProps['tone'];
@@ -6321,8 +6824,12 @@ type TimelineProps = WebComponentProps & {
 };
 type AnimationTextProps = WebComponentProps & {
     text?: string;
+    /** text-rotate 타입용 — 콤마로 구분된 여러 텍스트 */
+    texts?: string;
+    /** text-rotate 타입용 — 각 텍스트 유지 시간(ms) */
+    interval?: number;
     trigger?: 'mount' | 'hover' | 'click' | 'in-view';
-    type?: 'typing' | 'fade' | 'slide' | 'bounce' | 'shake' | 'glow' | 'gradient' | 'wave' | 'flip' | 'scale' | 'decode';
+    type?: 'typing' | 'fade' | 'slide' | 'bounce' | 'shake' | 'glow' | 'gradient' | 'wave' | 'flip' | 'scale' | 'decode' | 'roll' | 'reveal' | 'scroll-fill' | 'text-rotate';
     speed?: number;
     repeat?: number;
     delay?: number;
@@ -6367,7 +6874,7 @@ type TutorialProps = WebComponentProps & {
     onDbPrev?: DbEventHandler;
 };
 type AnimationBackgroundProps = WebComponentProps & {
-    type?: 'gradient' | 'particles' | 'stars' | 'snow' | 'flowers' | 'confetti' | 'aurora' | 'plasma' | 'mesh-flow' | 'fluid' | 'radiant' | 'ethereal';
+    type?: 'particles' | 'stars' | 'snow' | 'flowers' | 'confetti' | 'aurora' | 'plasma' | 'mesh-flow' | 'fluid' | 'radiant' | 'ethereal' | 'graphite';
     theme?: 'light' | 'dark';
     intensity?: 'subtle' | 'medium' | 'vivid';
     blur?: number;
@@ -6393,6 +6900,10 @@ type AnimationBackgroundProps = WebComponentProps & {
     showVignette?: boolean;
     preset?: string;
     zoom?: number;
+    showControls?: boolean;
+    shaderSpeed?: number;
+    shaderIntensity?: number;
+    warp?: number;
     onClick?: DbEventHandler;
     onDbClick?: DbEventHandler;
 };
@@ -6465,6 +6976,7 @@ declare const ImageList: react.ForwardRefExoticComponent<Omit<ImageListProps, "r
 declare const Lightbox: react.ForwardRefExoticComponent<Omit<LightboxProps, "ref"> & react.RefAttributes<HTMLElement>>;
 declare const BottomNavigation: react.ForwardRefExoticComponent<Omit<BottomNavigationProps, "ref"> & react.RefAttributes<HTMLElement>>;
 declare const Navbar: react.ForwardRefExoticComponent<Omit<NavbarProps, "ref"> & react.RefAttributes<HTMLElement>>;
+declare const Footer: react.ForwardRefExoticComponent<Omit<FooterProps, "ref"> & react.RefAttributes<HTMLElement>>;
 declare const Sidebar: react.ForwardRefExoticComponent<Omit<SidebarProps, "ref"> & react.RefAttributes<HTMLElement>>;
 declare const SegmentControl: react.ForwardRefExoticComponent<Omit<SegmentControlProps, "ref"> & react.RefAttributes<HTMLElement>>;
 declare const Select: react.ForwardRefExoticComponent<Omit<SelectProps, "ref"> & react.RefAttributes<HTMLElement>>;
@@ -6505,6 +7017,34 @@ declare const Timeline: react.ForwardRefExoticComponent<Omit<TimelineProps, "ref
 declare const AnimationText: react.ForwardRefExoticComponent<Omit<AnimationTextProps, "ref"> & react.RefAttributes<HTMLElement>>;
 declare const Tutorial: react.ForwardRefExoticComponent<Omit<TutorialProps, "ref"> & react.RefAttributes<HTMLElement>>;
 declare const AnimationBackground: react.ForwardRefExoticComponent<Omit<AnimationBackgroundProps, "ref"> & react.RefAttributes<HTMLElement>>;
+type GridBackgroundProps = WebComponentProps & {
+    type?: 'lines' | 'dots' | 'cross' | 'diagonal';
+    size?: number;
+    thickness?: number;
+    color?: string;
+    theme?: string;
+    opacity?: number;
+    fade?: string;
+    fadeSize?: number | string;
+    background?: string;
+    overlay?: string;
+    interactive?: boolean;
+    interaction?: 'none' | 'glow' | 'magnet' | 'rotate';
+    interactionColor?: string;
+    interactionRadius?: number;
+    crossSize?: number;
+    crossStyle?: 'plus' | 'line';
+    linesLayout?: 'grid' | 'frame' | 'center';
+    animated?: boolean;
+    animationStyle?: 'band' | 'trace' | 'both';
+    animationSpeed?: number;
+    traceLength?: number;
+    traceDirection?: 'vertical' | 'horizontal' | 'both';
+    width?: number | string;
+    height?: number | string;
+    borderRadius?: number | string;
+};
+declare const GridBackground: react.ForwardRefExoticComponent<Omit<GridBackgroundProps, "ref"> & react.RefAttributes<HTMLElement>>;
 declare const CursorFollower: react.ForwardRefExoticComponent<Omit<CursorFollowerProps, "ref"> & react.RefAttributes<HTMLElement>>;
 declare const Lottie: react.ForwardRefExoticComponent<Omit<LottieProps, "ref"> & react.RefAttributes<HTMLElement>>;
 declare const PageHeader: react.ForwardRefExoticComponent<Omit<PageHeaderProps, "ref"> & react.RefAttributes<HTMLElement>>;
@@ -6520,5 +7060,5 @@ declare const DatePicker: react.ForwardRefExoticComponent<Omit<DatePickerProps,
 declare const TimePicker: react.ForwardRefExoticComponent<Omit<TimePickerProps, "ref"> & react.RefAttributes<HTMLElement>>;
 declare const Calendar: react.ForwardRefExoticComponent<Omit<CalendarProps, "ref"> & react.RefAttributes<HTMLElement>>;
 
-export { Accordion, AdBanner, Alert, AnimationBackground, AnimationText, AppBadge, AudioPlayer, Avatar, Backdrop, Badge, Banner, BottomNavigation, BottomSheet, Breadcrumbs, Button, Calendar, Card, Carousel, Checkbox, Chip, CodeBlock, ColorPicker, Confirm, Container, ContextMenu, Countdown, CursorFollower, DatePicker, Divider, Drawer, Dropdown, Dropzone, EmptyState, FileUploader, FloatingActionButton, Form, Gradient, Grid, GridItem, Image, ImageList, ImagePlaceholder, Indicator, Input, Label, Lightbox, List, Logo, Lottie, MarkdownEditor, Marquee, Masonry, MenuItem, Modal, ModalBody, ModalFooter, ModalHeader, Navbar, OnboardingModal, PageHeader, Pagination, Popover, Progress, ProgressStep, Progressbar, Radio, RandomGradient, RangeSlider, Rating, Reorder, ResizablePanels, ScrollArea, SearchBar, Section, SectionAppDownload, SectionContact, SectionFeature, SectionHero, SegmentControl, Select, Share, Sidebar, Skeleton, Spinner, SplitView, Stack, Stat, Stepper, Table, Tabs, Testimonial, Textarea, TimePicker, Timeline, Toast, Toggle, Toolbar, Tooltip, TopBanner, Tutorial, VideoPlayer, YouTubePlayer, useContextMenu };
-export type { AccordionItemConfig, AccordionProps, AdBannerProps, AlertAction, AlertProps, AnimationBackgroundProps, AnimationTextProps, AppBadgeProps, AudioPlayerProps, AvatarProps, BackdropProps, BadgeProps, BannerAction, BannerProps, BottomNavigationItem, BottomNavigationProps, BottomSheetProps, BreadcrumbItemConfig, BreadcrumbsProps, ButtonProps, CalendarEvent, CalendarProps, CardProps, CarouselItem, CarouselProps, ChipProps, CodeBlockItem, CodeBlockProps, ColorPickerProps, ConfirmProps, ContextMenuItemConfig, ContextMenuProps, CountdownProps, CursorFollowerProps, DatePickerProps, DbEventHandler, DividerProps, DrawerProps, DropdownItemConfig, DropdownProps, DropzoneProps, EmptyStateProps, FileUploaderProps, FloatingActionButtonProps, FormFieldData, FormProps, GradientColor, GradientProps, GradientScheme, GradientTone, ImageListItem, ImageListProps, ImagePlaceholderProps, ImageProps, IndicatorProps, InputProps, LabelProps, LightboxImage, LightboxProps, ListItemConfig, ListProps, LogoProps, LottieProps, MarkdownEditorProps, MarqueeProps, MasonryItem, MasonryProps, MenuItemChildConfig, MenuItemProps, ModalProps, ModalSegmentItem, ModalTabItem, NavbarItem, NavbarProps, NavbarUserProfile, OnboardingModalProps, OnboardingStep, PageHeaderProps, PageHeaderTabItem, PaginationProps, PopoverProps, ProgressProps, ProgressStepItem, ProgressStepProps, RadioProps, RandomGradientProps, RangeSliderProps, RatingProps, ReorderItem, ReorderProps, ResizablePanelsProps, ScrollAreaProps, SearchBarProps, SectionAppDownloadProps, SectionAppDownloadStore, SectionContactAction, SectionContactProps, SectionFeatureAction, SectionFeatureBadge, SectionFeatureProps, SectionHeroButton, SectionHeroProps, SectionProps, SegmentControlProps, SelectProps, SelectionProps, SharePlatform, ShareProps, SidebarItem, SidebarProps, SidebarSection, SidebarUserProfile, SkeletonProps, SpinnerProps, SplitViewProps, StatChange, StatProps, StepperProps, TabItemConfig, TableColumn, TableProps, TabsProps, TestimonialProps, TextareaProps, TimePickerProps, TimelineItem, TimelineProps, ToastProps, ToggleProps, TooltipProps, TopBannerProps, TutorialProps, TutorialStep, UseContextMenuReturn, VideoPlayerProps, WebComponentProps, YouTubePlayerProps };
+export { Accordion, AdBanner, Alert, AnimationBackground, AnimationText, AppBadge, AudioPlayer, Avatar, Backdrop, Badge, Banner, BottomNavigation, BottomSheet, Breadcrumbs, Button, Calendar, Card, Carousel, Checkbox, Chip, CodeBlock, ColorPicker, Confirm, Container, ContextMenu, Countdown, CursorFollower, DatePicker, Divider, Drawer, Dropdown, Dropzone, EmptyState, FileUploader, FloatingActionButton, Footer, Form, Gradient, Grid, GridBackground, GridItem, Image, ImageList, ImagePlaceholder, Indicator, Input, Label, Lightbox, List, Logo, Lottie, MarkdownEditor, Marquee, Masonry, MenuItem, Modal, ModalBody, ModalFooter, ModalHeader, Navbar, OnboardingModal, PageHeader, Pagination, Popover, Progress, ProgressStep, Progressbar, Radio, RandomGradient, RangeSlider, Rating, Reorder, ResizablePanels, ScrollArea, SearchBar, Section, SectionAppDownload, SectionContact, SectionFeature, SectionHero, SegmentControl, Select, Share, Sidebar, Skeleton, Spinner, SplitView, Stack, Stat, Stepper, Table, Tabs, Testimonial, Textarea, TimePicker, Timeline, Toast, Toggle, Toolbar, Tooltip, TopBanner, Tutorial, VideoPlayer, YouTubePlayer, useContextMenu };
+export type { AccordionItemConfig, AccordionProps, AdBannerProps, AlertAction, AlertProps, AnimationBackgroundProps, AnimationTextProps, AppBadgeProps, AudioPlayerProps, AvatarProps, BackdropProps, BadgeProps, BannerAction, BannerProps, BottomNavigationItem, BottomNavigationProps, BottomSheetProps, BreadcrumbItemConfig, BreadcrumbsProps, ButtonProps, CalendarEvent, CalendarProps, CardProps, CarouselItem, CarouselProps, ChipProps, CodeBlockItem, CodeBlockProps, ColorPickerProps, ConfirmProps, ContextMenuItemConfig, ContextMenuProps, CountdownProps, CursorFollowerProps, DatePickerProps, DbEventHandler, DividerProps, DrawerProps, DropdownItemConfig, DropdownProps, DropzoneProps, EmptyStateProps, FileUploaderProps, FloatingActionButtonProps, FooterCompanyInfo, FooterFamilySite, FooterLink, FooterLinkColumn, FooterProps, FooterSocialLink, FormFieldData, FormProps, GradientColor, GradientProps, GradientScheme, GradientTone, GridBackgroundProps, ImageListItem, ImageListProps, ImagePlaceholderProps, ImageProps, IndicatorProps, InputProps, LabelProps, LightboxImage, LightboxProps, ListItemConfig, ListProps, LogoProps, LottieProps, MarkdownEditorProps, MarqueeImageItem, MarqueeProps, MasonryItem, MasonryProps, MenuItemChildConfig, MenuItemProps, ModalProps, ModalSegmentItem, ModalTabItem, NavbarItem, NavbarProps, NavbarUserProfile, OnboardingModalProps, OnboardingStep, PageHeaderProps, PageHeaderTabItem, PaginationProps, PopoverProps, ProgressProps, ProgressStepItem, ProgressStepProps, RadioProps, RandomGradientProps, RangeSliderProps, RatingProps, ReorderItem, ReorderProps, ResizablePanelsProps, ScrollAreaProps, SearchBarProps, SectionAppDownloadProps, SectionAppDownloadStore, SectionContactAction, SectionContactProps, SectionFeatureAction, SectionFeatureBadge, SectionFeatureProps, SectionHeroButton, SectionHeroProps, SectionProps, SegmentControlProps, SelectProps, SelectionProps, SharePlatform, ShareProps, SidebarItem, SidebarProps, SidebarSection, SidebarUserProfile, SkeletonProps, SpinnerProps, SplitViewProps, StatChange, StatProps, StepperProps, TabItemConfig, TableColumn, TableProps, TabsProps, TestimonialProps, TextareaProps, TimePickerProps, TimelineItem, TimelineProps, ToastProps, ToggleProps, TooltipProps, TopBannerProps, TutorialProps, TutorialStep, UseContextMenuReturn, VideoPlayerProps, WebComponentProps, YouTubePlayerProps };