@designbasekorea/ui-wc 0.2.2 → 0.4.0

package/dist/react/index.d.ts

@@ -473,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;
@@ -504,6 +506,7 @@ declare class DbTooltip extends HTMLElement {
     private syncTooltipClasses;
     private calculatePosition;
     private setVisible;
+    private hideTooltip;
     private removeTooltip;
     private handleShow;
     private handleHide;
@@ -519,6 +522,8 @@ declare global {
 interface AccordionItemConfig$1 {
     id?: string;
     title: string;
+    /** 슬롯(content-N)이 없을 때 본문으로 렌더되는 텍스트 */
+    content?: string;
     disabled?: boolean;
     itemType?: 'icon' | 'number' | 'question' | 'none';
     icon?: string;
@@ -586,11 +591,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 {
@@ -750,6 +765,14 @@ declare global {
     }
 }
 
+interface BreadcrumbMenuItem {
+    id?: string;
+    label: string;
+    href?: string;
+    active?: boolean;
+    disabled?: boolean;
+    icon?: string;
+}
 interface BreadcrumbItem {
     id?: string;
     label: string;
@@ -757,14 +780,35 @@ interface BreadcrumbItem {
     active?: boolean;
     disabled?: boolean;
     icon?: string;
+    menu?: BreadcrumbMenuItem[];
 }
 declare class DbBreadcrumbs extends HTMLElement {
     static get observedAttributes(): string[];
+    private openMenuId;
+    private onDocumentMouseDown;
+    private onDocumentKeyDown;
     get items(): BreadcrumbItem[] | string;
     set items(value: BreadcrumbItem[] | string);
     connectedCallback(): void;
+    disconnectedCallback(): void;
     attributeChangedCallback(): void;
+    private get menuDropdown();
+    private get maxLabelLength();
+    private get resolvedVariant();
+    private itemId;
+    private menuItemId;
     private visibleItems;
+    private shouldUseDropdown;
+    private closeMenu;
+    private openMenu;
+    private toggleMenu;
+    private addGlobalListeners;
+    private removeGlobalListeners;
+    private updateDropdownStates;
+    private createLabel;
+    private createMenuItem;
+    private createDropdownItem;
+    private createStandardItem;
     private render;
 }
 declare global {
@@ -1067,6 +1111,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;
@@ -1085,6 +1133,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 {
@@ -1375,6 +1431,7 @@ declare class DbLightbox extends HTMLElement {
     private imageError;
     private keydownHandler;
     private boundSrc;
+    private thumbnailSignature;
     static get observedAttributes(): string[];
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -1436,9 +1493,34 @@ interface DbNavbarItem {
     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;
@@ -1471,10 +1553,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;
@@ -1486,6 +1574,78 @@ 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;
@@ -2602,6 +2762,168 @@ declare global {
     }
 }
 
+type DbKanbanPriority = 'low' | 'medium' | 'high' | 'urgent';
+type DbKanbanTag = {
+    label: string;
+    variant?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'neutral';
+};
+type DbKanbanAssignee = {
+    name: string;
+    initials?: string;
+    avatar?: string;
+};
+type DbKanbanCard = {
+    id: string;
+    title: string;
+    description?: string;
+    tags?: DbKanbanTag[];
+    assignee?: DbKanbanAssignee;
+    priority?: DbKanbanPriority;
+    dueDate?: string;
+    disabled?: boolean;
+};
+type DbKanbanColumn = {
+    id: string;
+    title: string;
+    cards: DbKanbanCard[];
+    limit?: number;
+    color?: string;
+};
+declare class DbKanban extends HTMLElement {
+    private dragState;
+    private dropTarget;
+    static get observedAttributes(): string[];
+    get columns(): DbKanbanColumn[];
+    set columns(value: DbKanbanColumn[] | string);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    private getBool;
+    private getOption;
+    private emitChange;
+    private emitCardMove;
+    private findCardLocation;
+    private getAdjustedDropIndex;
+    private isValidDropTarget;
+    private moveCard;
+    private setDropTarget;
+    private resetDragState;
+    private updateDragClasses;
+    private getDropIndexFromPointer;
+    private getDropIndexFromColumnPointer;
+    private commitDrop;
+    private handleBoardDragOver;
+    private handleBoardDrop;
+    private formatDueDate;
+    private getInitials;
+    private createTag;
+    private createPriorityBadge;
+    private createAssignee;
+    private bindCardDrag;
+    private createCard;
+    private createColumn;
+    private render;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-kanban': DbKanban;
+    }
+}
+
+type DbGanttAssignee = {
+    name: string;
+    initials?: string;
+    avatar?: string;
+};
+type DbGanttItemStatus = 'on-track' | 'at-risk' | 'delayed' | 'completed';
+type DbGanttItem = {
+    id: string;
+    rowId: string;
+    title: string;
+    startDate: string;
+    endDate: string;
+    color?: string;
+    assignee?: DbGanttAssignee;
+    progress?: number;
+    status?: DbGanttItemStatus;
+    disabled?: boolean;
+};
+type DbGanttRow = {
+    id: string;
+    label: string;
+    groupId?: string;
+};
+type DbGanttGroup = {
+    id: string;
+    title: string;
+    color?: string;
+};
+declare class DbGantt extends HTMLElement {
+    private collapsedGroups;
+    private dragState;
+    private reorderState;
+    private reorderDropIndex;
+    private suppressRender;
+    private didDrag;
+    static get observedAttributes(): string[];
+    get groups(): DbGanttGroup[];
+    set groups(value: DbGanttGroup[] | string);
+    get rows(): DbGanttRow[];
+    set rows(value: DbGanttRow[] | string);
+    get items(): DbGanttItem[];
+    set items(value: DbGanttItem[] | string);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    private parseJson;
+    private getBool;
+    private getNumber;
+    private getOption;
+    private getLocale;
+    private getWeekdays;
+    private getViewRange;
+    private getTodayDate;
+    private getDateColumns;
+    private getVisibleRows;
+    private getMonthSegments;
+    private getInitials;
+    private updateItem;
+    private emitItemsChange;
+    private applyBarGeometry;
+    private handlePointerMove;
+    private handlePointerUp;
+    private startBarDrag;
+    private canReorder;
+    private createDragHandle;
+    private getGroupIndex;
+    private getRowScope;
+    private getRowIndexInScope;
+    private getReorderTargets;
+    private startReorderDrag;
+    private updateReorderDropTarget;
+    private clearReorderIndicators;
+    private finishReorderDrag;
+    private emitStructureChange;
+    private reorderGroups;
+    private reorderRows;
+    private createGroupBadge;
+    private createGroupChevron;
+    private createAssignee;
+    private createStatusIcon;
+    private deriveSummaryColor;
+    private getGroupSummary;
+    private applyBarTone;
+    private createGroupSummaryBar;
+    private createBar;
+    private toggleGroup;
+    private render;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-gantt': DbGantt;
+    }
+}
+
 declare class DbResizablePanels extends HTMLElement {
     private container?;
     private contentEl?;
@@ -2958,8 +3280,8 @@ interface FeatureAction {
 declare class DbSectionFeature extends HTMLElement {
     static get observedAttributes(): string[];
     private built;
-    private sectionEl?;
-    private featureWrapEl?;
+    private innerEl?;
+    private contentEl?;
     private badgeEl?;
     private headlineEl?;
     private subtitleEl?;
@@ -3004,9 +3326,7 @@ declare global {
 declare class DbSectionContact extends HTMLElement {
     static get observedAttributes(): string[];
     private built;
-    private sectionEl?;
-    private wrapEl?;
-    private contactWrapEl?;
+    private innerEl?;
     private titleEl?;
     private descriptionEl?;
     private actionEl?;
@@ -3033,8 +3353,6 @@ interface DownloadStore {
 declare class DbSectionAppDownload extends HTMLElement {
     static get observedAttributes(): string[];
     private built;
-    private sectionEl?;
-    private wrapEl?;
     private innerEl?;
     private titleEl?;
     private descriptionEl?;
@@ -3053,31 +3371,204 @@ declare global {
     }
 }
 
+declare class DbSectionCta extends HTMLElement {
+    static get observedAttributes(): string[];
+    private built;
+    private wrapEl?;
+    private headerEl?;
+    private badgeEl?;
+    private headlineEl?;
+    private subtitleEl?;
+    private descriptionEl?;
+    private actionsEl?;
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private parseBadge;
+    private parseButtons;
+    private build;
+    private updateUI;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-section-cta': DbSectionCta;
+    }
+}
+
+declare class DbSectionTestimonials extends HTMLElement {
+    static get observedAttributes(): string[];
+    private built;
+    private carouselIndex;
+    private innerEl?;
+    private headerEl?;
+    private contentEl?;
+    private carouselViewport?;
+    private carouselTrack?;
+    private carouselIndicator?;
+    private resizeObserver?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    private parseItems;
+    private parseBadge;
+    private buildHeader;
+    private build;
+    private createTestimonialEl;
+    private updateHeader;
+    private clampCarouselIndex;
+    private updateCarouselTransform;
+    private goToCarouselSlide;
+    private renderGrid;
+    private renderCarousel;
+    private updateUI;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-section-testimonials': DbSectionTestimonials;
+    }
+}
+
+declare class DbSectionFeatureGrid extends HTMLElement {
+    static get observedAttributes(): string[];
+    private built;
+    private innerEl?;
+    private headerEl?;
+    private gridEl?;
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private parseItems;
+    private parseBadge;
+    private build;
+    private updateUI;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-section-feature-grid': DbSectionFeatureGrid;
+    }
+}
+
+declare class DbSectionLogoCloud extends HTMLElement {
+    static get observedAttributes(): string[];
+    private built;
+    private innerEl?;
+    private headerEl?;
+    private contentEl?;
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private parseLogos;
+    private parseBadge;
+    private build;
+    private updateUI;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-section-logo-cloud': DbSectionLogoCloud;
+    }
+}
+
+declare class DbSectionStats extends HTMLElement {
+    static get observedAttributes(): string[];
+    private built;
+    private innerEl?;
+    private headerEl?;
+    private gridEl?;
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private parseItems;
+    private parseBadge;
+    private build;
+    private updateUI;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-section-stats': DbSectionStats;
+    }
+}
+
+declare class DbSectionFaq extends HTMLElement {
+    static get observedAttributes(): string[];
+    private built;
+    private innerEl?;
+    private headerEl?;
+    private accordionEl?;
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private parseItems;
+    private parseBadge;
+    private build;
+    private updateUI;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-section-faq': DbSectionFaq;
+    }
+}
+
+declare class DbSectionPricing extends HTMLElement {
+    static get observedAttributes(): string[];
+    private built;
+    private innerEl?;
+    private headerEl?;
+    private gridEl?;
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private parsePlans;
+    private parseBadge;
+    private build;
+    private updateUI;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-section-pricing': DbSectionPricing;
+    }
+}
+
 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 {
@@ -3142,8 +3633,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?;
@@ -3161,11 +3660,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 {
@@ -3209,11 +3725,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;
@@ -3221,6 +3744,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;
@@ -3288,15 +3815,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 {
@@ -3304,8 +3852,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?;
@@ -3323,7 +3962,7 @@ declare class DbCursorFollower extends HTMLElement {
     disconnectedCallback(): void;
     attributeChangedCallback(): void;
     private setupDesktopGate;
-    private ensureScope;
+    private updateScope;
     private isInScope;
     private mountLayer;
     private teardownLayer;
@@ -4284,6 +4923,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[];
@@ -4926,6 +5569,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;
@@ -5007,6 +5700,8 @@ type ProgressProps = WebComponentProps & {
     showValue?: boolean;
     animated?: boolean;
     striped?: boolean;
+    gradient?: boolean;
+    glow?: boolean;
 };
 type SkeletonProps = WebComponentProps & {
     variant?: 'text' | 'circular' | 'rectangular' | 'rounded';
@@ -5343,6 +6038,14 @@ type TabsProps = WebComponentProps & {
         id: string;
     }>;
 };
+type BreadcrumbMenuItemConfig = {
+    id?: string;
+    label: string;
+    href?: string;
+    active?: boolean;
+    disabled?: boolean;
+    icon?: string;
+};
 type BreadcrumbItemConfig = {
     id?: string;
     label: string;
@@ -5350,24 +6053,34 @@ type BreadcrumbItemConfig = {
     active?: boolean;
     disabled?: boolean;
     icon?: string;
+    menu?: BreadcrumbMenuItemConfig[];
 };
 type BreadcrumbsProps = WebComponentProps & {
     items?: BreadcrumbItemConfig[] | string;
     size?: 's' | 'm' | 'l';
-    /** 외형·레이아웃 (canonical). @deprecated variant는 breadcrumbStyle과 동일한 레거시 별칭 */
-    breadcrumbStyle?: 'default' | 'contained' | 'underlined' | 'minimal' | 'outlined';
-    /** @deprecated breadcrumbStyle 사용 */
-    variant?: 'default' | 'contained' | 'underlined' | 'minimal' | 'outlined';
+    variant?: 'default' | 'contained' | 'underlined';
+    /** @deprecated variant 사용 */
+    breadcrumbStyle?: 'default' | 'contained' | 'underlined';
     maxItems?: number;
+    menuDropdown?: boolean;
+    maxLabelLength?: number;
     onItemClick?: DbEventHandler<{
         item: BreadcrumbItemConfig;
     }>;
+    onMenuItemClick?: DbEventHandler<{
+        menuItem: BreadcrumbMenuItemConfig;
+        parentItem: BreadcrumbItemConfig;
+    }>;
     onClick?: DbEventHandler<{
         item: BreadcrumbItemConfig;
     }>;
     onDbClick?: DbEventHandler<{
         item: BreadcrumbItemConfig;
     }>;
+    onDbMenuClick?: DbEventHandler<{
+        menuItem: BreadcrumbMenuItemConfig;
+        parentItem: BreadcrumbItemConfig;
+    }>;
 };
 type PaginationProps = WebComponentProps & {
     currentPage?: number;
@@ -5559,10 +6272,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;
@@ -5890,6 +6605,194 @@ type ReorderProps = WebComponentProps & {
         items: ReorderItem[];
     }>;
 };
+type KanbanTag = {
+    label: string;
+    variant?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'neutral';
+};
+type KanbanAssignee = {
+    name: string;
+    initials?: string;
+    avatar?: string;
+};
+type KanbanCard = {
+    id: string;
+    title: string;
+    description?: string;
+    tags?: KanbanTag[];
+    assignee?: KanbanAssignee;
+    priority?: 'low' | 'medium' | 'high' | 'urgent';
+    dueDate?: string;
+    disabled?: boolean;
+};
+type KanbanColumn = {
+    id: string;
+    title: string;
+    cards: KanbanCard[];
+    limit?: number;
+    color?: string;
+};
+type KanbanProps = WebComponentProps & {
+    columns?: KanbanColumn[] | string;
+    size?: 's' | 'm' | 'l';
+    draggable?: boolean;
+    showColumnCount?: boolean;
+    showAddCard?: boolean;
+    allowCrossColumn?: boolean;
+    fullWidth?: boolean;
+    disabled?: boolean;
+    emptyColumnText?: string;
+    onChange?: DbEventHandler<{
+        columns: KanbanColumn[];
+    }>;
+    onCardMove?: DbEventHandler<{
+        cardId: string;
+        fromColumnId: string;
+        toColumnId: string;
+        fromIndex: number;
+        toIndex: number;
+        columns: KanbanColumn[];
+    }>;
+    onCardClick?: DbEventHandler<{
+        card: KanbanCard;
+        columnId: string;
+    }>;
+    onAddCard?: DbEventHandler<{
+        columnId: string;
+    }>;
+    onDbChange?: DbEventHandler<{
+        columns: KanbanColumn[];
+    }>;
+    onDbCardMove?: DbEventHandler<{
+        cardId: string;
+        fromColumnId: string;
+        toColumnId: string;
+        fromIndex: number;
+        toIndex: number;
+        columns: KanbanColumn[];
+    }>;
+    onDbCardClick?: DbEventHandler<{
+        card: KanbanCard;
+        columnId: string;
+    }>;
+    onDbAddCard?: DbEventHandler<{
+        columnId: string;
+    }>;
+};
+type GanttAssignee = {
+    name: string;
+    initials?: string;
+    avatar?: string;
+};
+type GanttItem = {
+    id: string;
+    rowId: string;
+    title: string;
+    startDate: string;
+    endDate: string;
+    color?: string;
+    assignee?: GanttAssignee;
+    progress?: number;
+    status?: 'on-track' | 'at-risk' | 'delayed' | 'completed';
+    disabled?: boolean;
+};
+type GanttRow = {
+    id: string;
+    label: string;
+    groupId?: string;
+};
+type GanttGroup = {
+    id: string;
+    title: string;
+    color?: string;
+};
+type GanttProps = WebComponentProps & {
+    groups?: GanttGroup[] | string;
+    rows?: GanttRow[] | string;
+    items?: GanttItem[] | string;
+    startDate?: string;
+    endDate?: string;
+    today?: string;
+    scale?: 'day' | 'week';
+    cellWidth?: number;
+    showWeekends?: boolean;
+    showToday?: boolean;
+    sidebarLabel?: string;
+    fullWidth?: boolean;
+    disabled?: boolean;
+    draggable?: boolean;
+    reorderable?: boolean;
+    locale?: string;
+    onItemClick?: DbEventHandler<{
+        item: GanttItem;
+    }>;
+    onItemChange?: DbEventHandler<{
+        item?: GanttItem;
+        items: GanttItem[];
+        action: string;
+    }>;
+    onChange?: DbEventHandler<{
+        groups?: GanttGroup[];
+        rows?: GanttRow[];
+        items: GanttItem[];
+    }>;
+    onRowClick?: DbEventHandler<{
+        row: GanttRow;
+    }>;
+    onRowReorder?: DbEventHandler<{
+        rowId: string;
+        groupId?: string;
+        fromIndex: number;
+        toIndex: number;
+        groups: GanttGroup[];
+        rows: GanttRow[];
+    }>;
+    onGroupReorder?: DbEventHandler<{
+        groupId: string;
+        fromIndex: number;
+        toIndex: number;
+        groups: GanttGroup[];
+        rows: GanttRow[];
+    }>;
+    onGroupToggle?: DbEventHandler<{
+        groupId: string;
+        collapsed: boolean;
+    }>;
+    onDbItemClick?: DbEventHandler<{
+        item: GanttItem;
+    }>;
+    onDbItemChange?: DbEventHandler<{
+        item?: GanttItem;
+        items: GanttItem[];
+        action: string;
+    }>;
+    onDbChange?: DbEventHandler<{
+        groups?: GanttGroup[];
+        rows?: GanttRow[];
+        items: GanttItem[];
+    }>;
+    onDbRowClick?: DbEventHandler<{
+        row: GanttRow;
+    }>;
+    onDbRowReorder?: DbEventHandler<{
+        rowId: string;
+        groupId?: string;
+        fromIndex: number;
+        toIndex: number;
+        groups: GanttGroup[];
+        rows: GanttRow[];
+    }>;
+    onDbGroupReorder?: DbEventHandler<{
+        groupId: string;
+        fromIndex: number;
+        toIndex: number;
+        groups: GanttGroup[];
+        rows: GanttRow[];
+    }>;
+    onDbGroupToggle?: DbEventHandler<{
+        groupId: string;
+        collapsed: boolean;
+    }>;
+};
 type CarouselItem = {
     id: string;
     title?: string;
@@ -6356,8 +7259,185 @@ type SectionAppDownloadProps = WebComponentProps & {
     fullHeight?: boolean;
     overflowVisible?: boolean;
 };
+type SectionBlockBadge = {
+    text: string;
+    variant?: string;
+    style?: string;
+    size?: string;
+};
+type SectionCtaButton = {
+    text: string;
+    variant?: string;
+    size?: string;
+    href?: string;
+};
+type SectionCtaProps = WebComponentProps & {
+    title?: string;
+    headline?: string;
+    subtitle?: string;
+    description?: string;
+    badge?: SectionBlockBadge | string;
+    buttons?: SectionCtaButton[] | string;
+    variant?: 'default' | 'banner' | 'card';
+    theme?: 'light' | 'dark' | 'gradient' | 'tinted';
+    align?: 'left' | 'center';
+    contentPadding?: 's' | 'm' | 'l';
+    size?: 's' | 'm' | 'l' | 'xl';
+    fullWidth?: boolean;
+    fullHeight?: boolean;
+    overflowVisible?: boolean;
+    onAction?: DbEventHandler<{
+        action: SectionCtaButton;
+    }>;
+    onDbAction?: DbEventHandler<{
+        action: SectionCtaButton;
+    }>;
+};
+type SectionTestimonialItem = {
+    quote: string;
+    author: string;
+    role?: string;
+    company?: string;
+    avatar?: string;
+    rating?: number;
+};
+type SectionTestimonialsProps = WebComponentProps & {
+    headline?: string;
+    subtitle?: string;
+    description?: string;
+    badge?: SectionBlockBadge | string;
+    items?: SectionTestimonialItem[] | string;
+    variant?: 'grid' | 'carousel';
+    columns?: 2 | 3 | string;
+    align?: 'left' | 'center';
+    contentPadding?: 's' | 'm' | 'l';
+    size?: 's' | 'm' | 'l' | 'xl';
+    fullWidth?: boolean;
+    fullHeight?: boolean;
+    overflowVisible?: boolean;
+};
+type SectionFeatureGridItem = {
+    title: string;
+    description: string;
+    iconName?: string;
+};
+type SectionFeatureGridProps = WebComponentProps & {
+    headline?: string;
+    subtitle?: string;
+    description?: string;
+    badge?: SectionBlockBadge | string;
+    items?: SectionFeatureGridItem[] | string;
+    columns?: 2 | 3 | 4 | string;
+    tinted?: boolean;
+    align?: 'left' | 'center';
+    contentPadding?: 's' | 'm' | 'l';
+    size?: 's' | 'm' | 'l' | 'xl';
+    fullWidth?: boolean;
+    fullHeight?: boolean;
+    overflowVisible?: boolean;
+};
+type SectionLogoCloudItem = {
+    src?: string;
+    alt: string;
+    href?: string;
+    label?: string;
+};
+type SectionLogoCloudProps = WebComponentProps & {
+    headline?: string;
+    subtitle?: string;
+    description?: string;
+    badge?: SectionBlockBadge | string;
+    logos?: SectionLogoCloudItem[] | string;
+    variant?: 'grid' | 'marquee';
+    align?: 'left' | 'center';
+    contentPadding?: 's' | 'm' | 'l';
+    size?: 's' | 'm' | 'l' | 'xl';
+    fullWidth?: boolean;
+    fullHeight?: boolean;
+    overflowVisible?: boolean;
+};
+type SectionStatItem = {
+    value: string | number;
+    label: string;
+    description?: string;
+};
+type SectionStatsProps = WebComponentProps & {
+    headline?: string;
+    subtitle?: string;
+    description?: string;
+    badge?: SectionBlockBadge | string;
+    items?: SectionStatItem[] | string;
+    columns?: 2 | 3 | 4 | string;
+    tinted?: boolean;
+    align?: 'left' | 'center';
+    contentPadding?: 's' | 'm' | 'l';
+    size?: 's' | 'm' | 'l' | 'xl';
+    fullWidth?: boolean;
+    fullHeight?: boolean;
+    overflowVisible?: boolean;
+};
+type SectionFaqItem = {
+    id: string;
+    question: string;
+    answer: string;
+};
+type SectionFaqProps = WebComponentProps & {
+    headline?: string;
+    subtitle?: string;
+    description?: string;
+    badge?: SectionBlockBadge | string;
+    items?: SectionFaqItem[] | string;
+    allowMultiple?: boolean;
+    align?: 'left' | 'center';
+    contentPadding?: 's' | 'm' | 'l';
+    size?: 's' | 'm' | 'l' | 'xl';
+    fullWidth?: boolean;
+    fullHeight?: boolean;
+    overflowVisible?: boolean;
+};
+type SectionPricingCta = {
+    label: string;
+    href?: string;
+    variant?: string;
+};
+type SectionPricingPlan = {
+    name: string;
+    price: string;
+    period?: string;
+    description?: string;
+    features: string[];
+    highlighted?: boolean;
+    badge?: string;
+    cta: SectionPricingCta;
+};
+type SectionPricingProps = WebComponentProps & {
+    headline?: string;
+    subtitle?: string;
+    description?: string;
+    badge?: SectionBlockBadge | string;
+    plans?: SectionPricingPlan[] | string;
+    columns?: 2 | 3 | string;
+    align?: 'left' | 'center';
+    contentPadding?: 's' | 'm' | 'l';
+    size?: 's' | 'm' | 'l' | 'xl';
+    fullWidth?: boolean;
+    fullHeight?: boolean;
+    overflowVisible?: boolean;
+    onAction?: DbEventHandler<{
+        plan: SectionPricingPlan;
+    }>;
+    onDbAction?: DbEventHandler<{
+        plan: SectionPricingPlan;
+    }>;
+};
+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;
@@ -6370,6 +7450,10 @@ type MarqueeProps = WebComponentProps & {
     edgePadding?: number;
     gap?: number;
     alignY?: 'start' | 'center' | 'end';
+    rowCount?: number;
+    rowGap?: number;
+    scrollVelocity?: boolean;
+    scrollBoost?: number;
     ariaLabel?: string;
 };
 type GradientColor = {
@@ -6401,11 +7485,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'];
@@ -6449,8 +7541,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;
@@ -6495,7 +7591,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;
@@ -6521,6 +7617,10 @@ type AnimationBackgroundProps = WebComponentProps & {
     showVignette?: boolean;
     preset?: string;
     zoom?: number;
+    showControls?: boolean;
+    shaderSpeed?: number;
+    shaderIntensity?: number;
+    warp?: number;
     onClick?: DbEventHandler;
     onDbClick?: DbEventHandler;
 };
@@ -6593,6 +7693,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>>;
@@ -6613,6 +7714,8 @@ declare const Masonry: react.ForwardRefExoticComponent<Omit<MasonryProps, "ref">
 declare const Carousel: react.ForwardRefExoticComponent<Omit<CarouselProps, "ref"> & react.RefAttributes<HTMLElement>>;
 declare const ColorPicker: react.ForwardRefExoticComponent<Omit<ColorPickerProps, "ref"> & react.RefAttributes<HTMLElement>>;
 declare const Reorder: react.ForwardRefExoticComponent<Omit<ReorderProps, "ref"> & react.RefAttributes<HTMLElement>>;
+declare const Kanban: react.ForwardRefExoticComponent<Omit<KanbanProps, "ref"> & react.RefAttributes<HTMLElement>>;
+declare const Gantt: react.ForwardRefExoticComponent<Omit<GanttProps, "ref"> & react.RefAttributes<HTMLElement>>;
 declare const ResizablePanels: react.ForwardRefExoticComponent<Omit<ResizablePanelsProps, "ref"> & react.RefAttributes<HTMLElement>>;
 declare const VideoPlayer: react.ForwardRefExoticComponent<Omit<VideoPlayerProps, "ref"> & react.RefAttributes<HTMLElement>>;
 declare const YouTubePlayer: react.ForwardRefExoticComponent<Omit<YouTubePlayerProps, "ref"> & react.RefAttributes<HTMLElement>>;
@@ -6625,6 +7728,13 @@ declare const SectionFeature: react.ForwardRefExoticComponent<Omit<SectionFeatur
 declare const AppBadge: react.ForwardRefExoticComponent<Omit<AppBadgeProps, "ref"> & react.RefAttributes<HTMLElement>>;
 declare const SectionContact: react.ForwardRefExoticComponent<Omit<SectionContactProps, "ref"> & react.RefAttributes<HTMLElement>>;
 declare const SectionAppDownload: react.ForwardRefExoticComponent<Omit<SectionAppDownloadProps, "ref"> & react.RefAttributes<HTMLElement>>;
+declare const SectionCta: react.ForwardRefExoticComponent<Omit<SectionCtaProps, "ref"> & react.RefAttributes<HTMLElement>>;
+declare const SectionTestimonials: react.ForwardRefExoticComponent<Omit<SectionTestimonialsProps, "ref"> & react.RefAttributes<HTMLElement>>;
+declare const SectionFeatureGrid: react.ForwardRefExoticComponent<Omit<SectionFeatureGridProps, "ref"> & react.RefAttributes<HTMLElement>>;
+declare const SectionLogoCloud: react.ForwardRefExoticComponent<Omit<SectionLogoCloudProps, "ref"> & react.RefAttributes<HTMLElement>>;
+declare const SectionStats: react.ForwardRefExoticComponent<Omit<SectionStatsProps, "ref"> & react.RefAttributes<HTMLElement>>;
+declare const SectionFaq: react.ForwardRefExoticComponent<Omit<SectionFaqProps, "ref"> & react.RefAttributes<HTMLElement>>;
+declare const SectionPricing: react.ForwardRefExoticComponent<Omit<SectionPricingProps, "ref"> & react.RefAttributes<HTMLElement>>;
 declare const Marquee: react.ForwardRefExoticComponent<Omit<MarqueeProps, "ref"> & react.RefAttributes<HTMLElement>>;
 declare const Gradient: react.ForwardRefExoticComponent<Omit<GradientProps, "ref"> & react.RefAttributes<HTMLElement>>;
 declare const RandomGradient: react.ForwardRefExoticComponent<Omit<RandomGradientProps, "ref"> & react.RefAttributes<HTMLElement>>;
@@ -6633,6 +7743,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>>;
@@ -6648,5 +7786,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, Gantt, Gradient, Grid, GridBackground, GridItem, Image, ImageList, ImagePlaceholder, Indicator, Input, Kanban, 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, SectionCta, SectionFaq, SectionFeature, SectionFeatureGrid, SectionHero, SectionLogoCloud, SectionPricing, SectionStats, SectionTestimonials, 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, BreadcrumbMenuItemConfig, 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, GanttAssignee, GanttGroup, GanttItem, GanttProps, GanttRow, GradientColor, GradientProps, GradientScheme, GradientTone, GridBackgroundProps, ImageListItem, ImageListProps, ImagePlaceholderProps, ImageProps, IndicatorProps, InputProps, KanbanAssignee, KanbanCard, KanbanColumn, KanbanProps, KanbanTag, 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, SectionBlockBadge, SectionContactAction, SectionContactProps, SectionCtaButton, SectionCtaProps, SectionFaqItem, SectionFaqProps, SectionFeatureAction, SectionFeatureBadge, SectionFeatureGridItem, SectionFeatureGridProps, SectionFeatureProps, SectionHeroButton, SectionHeroProps, SectionLogoCloudItem, SectionLogoCloudProps, SectionPricingCta, SectionPricingPlan, SectionPricingProps, SectionProps, SectionStatItem, SectionStatsProps, SectionTestimonialItem, SectionTestimonialsProps, 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 };