@designbasekorea/ui-wc 0.2.0 → 0.2.2

package/dist/index.d.ts

@@ -12,6 +12,8 @@ declare class DbButton extends HTMLElement {
     set size(value: string);
     get radius(): string;
     set radius(value: string);
+    get accentStyle(): string;
+    set accentStyle(value: string);
     get type(): string;
     set type(value: string);
     get loadingText(): string;
@@ -39,6 +41,8 @@ declare class DbButton extends HTMLElement {
     private syncIcons;
     private getDefaultRadiusClass;
     private syncRadius;
+    private syncAccentStyle;
+    private syncAccentField;
     private syncModifier;
     private syncBooleanModifier;
     private getSpinnerSize;
@@ -135,12 +139,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;
@@ -149,7 +157,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;
@@ -298,6 +309,9 @@ declare class DbTabs extends HTMLElement {
     get labels(): string[] | string;
     set labels(value: string[] | string);
     get tabItems(): TabItemConfig[];
+    get items(): TabItemConfig[];
+    set items(value: TabItemConfig[] | string);
+    set tabItems(value: TabItemConfig[] | string);
     get activeIndex(): number;
     set activeIndex(value: number);
     get orientation(): string;
@@ -373,6 +387,7 @@ declare class DbModal extends HTMLElement {
     private renderBodyContent;
     private renderFooter;
     private render;
+    private exitTimerId;
     private syncVisibility;
     private syncOpenState;
     private teardown;
@@ -590,7 +605,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?;
@@ -606,12 +623,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);
@@ -683,6 +704,7 @@ declare class DbRadio extends HTMLElement {
     private root?;
     private input?;
     private visual?;
+    private dot?;
     private labelEl?;
     private built;
     get checked(): boolean;
@@ -998,13 +1020,15 @@ declare class DbToast extends HTMLElement {
     static get observedAttributes(): string[];
     private timeoutId;
     private progressInterval;
+    private closeTimerId;
     private closed;
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: string): void;
     private clearTimers;
     private startTimers;
-    private close;
+    /** 토스트를 닫고(애니메이션 포함) auto-remove 설정 시 DOM에서 제거합니다. */
+    close(): void;
     private iconForStatus;
     private render;
 }
@@ -1436,6 +1460,8 @@ 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;
@@ -1474,6 +1500,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;
@@ -1526,6 +1558,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;
@@ -1707,6 +1747,8 @@ declare class DbSegmentControl extends HTMLElement {
     private segmentButtons;
     private focusedIndex;
     private boundKeyDown;
+    private boundResize;
+    private resizeObserver;
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: string): void;
@@ -1717,6 +1759,7 @@ declare class DbSegmentControl extends HTMLElement {
     private parseOptions;
     private render;
     private updateSelection;
+    private updateIndicator;
     private select;
     private handleKeyDown;
 }
@@ -2120,6 +2163,12 @@ declare global {
     }
 }
 
+type OnboardingStep = {
+    id: string;
+    image?: string;
+    title?: string;
+    description?: string;
+};
 declare class DbOnboardingModal extends HTMLElement {
     static get observedAttributes(): string[];
     private root?;
@@ -2139,6 +2188,10 @@ declare class DbOnboardingModal extends HTMLElement {
     private prevButtonEl?;
     private nextButtonEl?;
     private indicatorEl?;
+    get open(): boolean;
+    set open(value: boolean);
+    get steps(): OnboardingStep[];
+    set steps(value: OnboardingStep[] | string);
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: string): void;
@@ -2974,6 +3027,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;
@@ -2986,6 +3048,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;
@@ -2996,6 +3060,12 @@ declare global {
     }
 }
 
+interface FeatureAction {
+    label: string;
+    variant?: string;
+    size?: string;
+    href?: string;
+}
 declare class DbSectionFeature extends HTMLElement {
     static get observedAttributes(): string[];
     private built;
@@ -3011,6 +3081,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;
@@ -3061,6 +3133,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;
@@ -3072,6 +3152,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;
@@ -3115,11 +3197,17 @@ declare global {
     }
 }
 
+interface GradientColor {
+    color: string;
+    position?: number;
+}
 declare class DbGradient extends HTMLElement {
     static get observedAttributes(): string[];
     connectedCallback(): void;
     attributeChangedCallback(): void;
     private getBool;
+    get colors(): GradientColor[];
+    set colors(value: GradientColor[] | string);
     private parseColors;
     private directionMap;
     private colorStops;
@@ -3255,6 +3343,13 @@ declare global {
     }
 }
 
+type TutorialStep = {
+    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?;
@@ -3274,6 +3369,8 @@ declare class DbTutorial extends HTMLElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: string): void;
+    get steps(): TutorialStep[];
+    set steps(value: TutorialStep[] | string);
     private parseSteps;
     private syncStepFromAttribute;
     private isOpenRequested;
@@ -3368,5 +3465,85 @@ declare global {
     }
 }
 
-export { DbAccordion, DbAdBanner, DbAlert, DbAnimationBackground, DbAnimationText, DbAppBadge, DbAudioPlayer, DbAvatar, DbBackdrop, DbBadge, DbBanner, DbBottomNavigation, DbBottomSheet, DbBreadcrumbs, DbButton, DbCalendar, DbCard, DbCarousel, DbCheckbox, DbChip, DbCodeBlock, DbColorPicker, DbConfirm, DbContainer, DbContextMenu, DbCountdown, DbCursorFollower, DbDatePicker, DbDivider, DbDrawer, DbDropdown, DbDropzone, DbEmptyState, DbFileUploader, DbFloatingActionButton, DbForm, DbGradient, DbGrid, DbGridItem, DbImage, DbImageList, DbImagePlaceholder, DbIndicator, DbInput, DbLabel, DbLightbox, DbList, DbLogo, DbLottie, DbMarkdownEditor, DbMarquee, DbMasonry, DbMenuItem, DbModal, DbNavbar, DbOnboardingModal, DbPageHeader, DbPagination, DbPopover, DbProgress, DbProgressStep, DbProgressbar, DbRadio, DbRandomGradient, DbRangeSlider, DbRating, DbReorder, DbResizablePanels, DbScrollArea, DbSearchBar, DbSection, DbSectionAppDownload, DbSectionContact, DbSectionFeature, DbSectionHero, DbSegmentControl, DbSelect, DbShare, DbSidebar, DbSkeleton, DbSpinner, DbSplitView, DbStack, DbStat, DbStepper, DbTable, DbTabs, DbTestimonial, DbTextarea, DbTimePicker, DbTimeline, DbToast, DbToggle, DbToolbar, DbTooltip, DbTopBanner, DbTutorial, DbVideoPlayer, DbYouTubePlayer };
-export type { CalendarEventData, CalendarEventType, DbAlertAction, DbBannerAction, DbBottomNavigationItem, DbFormFieldData, DbImageListItem, DbLightboxImage, DbNavbarItem, DbNavbarUserProfile, DbPageHeaderTabItem, DbSharePlatform, DbShareVariant, DbSidebarItem, DbSidebarSection, DbSidebarUserProfile, DbStatChange, DbTimelineItem };
+/**
+ * 명령형 toast() 헬퍼 — 컨테이너/스택/제거를 자동 관리합니다.
+ *
+ * @example
+ *   import { toast } from '@designbasekorea/ui-wc';
+ *   toast.success('저장되었습니다');
+ *   toast.error('오류가 발생했어요', { description: '잠시 후 다시 시도해 주세요' });
+ *   const t = toast({ title: '업로드 중…', status: 'info', duration: 0 });
+ *   t.close();
+ */
+
+type DbToastStatus = 'info' | 'success' | 'warning' | 'error';
+type DbToastPosition = 'top-right' | 'top-center' | 'top-left' | 'bottom-right' | 'bottom-center' | 'bottom-left';
+interface DbToastOptions {
+    /** 제목 (필수) */
+    title: string;
+    /** 보조 설명 */
+    description?: string;
+    /** 상태 색상/아이콘. 기본 'info' */
+    status?: DbToastStatus;
+    /** 자동 닫힘 시간(ms). 0 이하이면 자동으로 닫히지 않음. 기본 5000 */
+    duration?: number;
+    /** 표시 위치. 기본 'top-right' */
+    position?: DbToastPosition;
+    /** 닫기 버튼 표시. 기본 true */
+    showClose?: boolean;
+    /** 진행 바 표시. 기본 false */
+    showProgress?: boolean;
+}
+interface DbToastHandle {
+    /** 토스트 고유 id */
+    id: string;
+    /** 토스트 엘리먼트 */
+    element: DbToast;
+    /** 토스트를 수동으로 닫습니다(애니메이션 포함). */
+    close: () => void;
+}
+type DbToastShortcut = (title: string, options?: Omit<DbToastOptions, 'title' | 'status'>) => DbToastHandle;
+interface DbToastApi {
+    (options: DbToastOptions): DbToastHandle;
+    show: (options: DbToastOptions) => DbToastHandle;
+    success: DbToastShortcut;
+    error: DbToastShortcut;
+    warning: DbToastShortcut;
+    info: DbToastShortcut;
+    /** 열려 있는 토스트를 모두 닫습니다. position 지정 시 해당 위치만. */
+    dismissAll: (position?: DbToastPosition) => void;
+}
+/** 토스트를 띄웁니다. `toast(options)` 와 동일합니다. */
+declare function showToast(options: DbToastOptions): DbToastHandle;
+declare const toast: DbToastApi;
+
+type DbConfirmVariant = 'info' | 'success' | 'warning' | 'danger';
+interface DbConfirmOptions {
+    /** 본문 메시지 (필수) */
+    message: string;
+    /** 제목 */
+    title?: string;
+    /** 확인 버튼 텍스트. 기본 '확인' */
+    confirmText?: string;
+    /** 취소 버튼 텍스트. 기본 '취소' */
+    cancelText?: string;
+    /** 확인 버튼 variant (db-button variant). 기본 'primary' */
+    confirmVariant?: string;
+    /** 아이콘/색상 톤. 기본 'info' */
+    variant?: DbConfirmVariant;
+    /** 크기. 기본 's' */
+    size?: 's' | 'm' | 'l';
+    /** 아이콘 표시. 기본 true */
+    showIcon?: boolean;
+    /** 처음 포커스 대상. 기본 'confirm' */
+    initialFocus?: 'confirm' | 'cancel';
+    /** ESC 로 취소 허용. 기본 true */
+    closeOnEscape?: boolean;
+    /** 배경 클릭으로 취소 허용. 기본 true */
+    closeOnBackdrop?: boolean;
+}
+/** 확인 대화상자를 띄우고, 확인 시 true / 취소(ESC·배경 포함) 시 false 로 resolve 합니다. */
+declare function confirm(options: DbConfirmOptions): Promise<boolean>;
+
+export { DbAccordion, DbAdBanner, DbAlert, DbAnimationBackground, DbAnimationText, DbAppBadge, DbAudioPlayer, DbAvatar, DbBackdrop, DbBadge, DbBanner, DbBottomNavigation, DbBottomSheet, DbBreadcrumbs, DbButton, DbCalendar, DbCard, DbCarousel, DbCheckbox, DbChip, DbCodeBlock, DbColorPicker, DbConfirm, DbContainer, DbContextMenu, DbCountdown, DbCursorFollower, DbDatePicker, DbDivider, DbDrawer, DbDropdown, DbDropzone, DbEmptyState, DbFileUploader, DbFloatingActionButton, DbForm, DbGradient, DbGrid, DbGridItem, DbImage, DbImageList, DbImagePlaceholder, DbIndicator, DbInput, DbLabel, DbLightbox, DbList, DbLogo, DbLottie, DbMarkdownEditor, DbMarquee, DbMasonry, DbMenuItem, DbModal, DbNavbar, DbOnboardingModal, DbPageHeader, DbPagination, DbPopover, DbProgress, DbProgressStep, DbProgressbar, DbRadio, DbRandomGradient, DbRangeSlider, DbRating, DbReorder, DbResizablePanels, DbScrollArea, DbSearchBar, DbSection, DbSectionAppDownload, DbSectionContact, DbSectionFeature, DbSectionHero, DbSegmentControl, DbSelect, DbShare, DbSidebar, DbSkeleton, DbSpinner, DbSplitView, DbStack, DbStat, DbStepper, DbTable, DbTabs, DbTestimonial, DbTextarea, DbTimePicker, DbTimeline, DbToast, DbToggle, DbToolbar, DbTooltip, DbTopBanner, DbTutorial, DbVideoPlayer, DbYouTubePlayer, confirm, confirm as dbConfirm, toast as dbToast, showToast, toast };
+export type { CalendarEventData, CalendarEventType, DbAlertAction, DbBannerAction, DbBottomNavigationItem, DbConfirmOptions, DbConfirmVariant, DbFormFieldData, DbImageListItem, DbLightboxImage, DbNavbarItem, DbNavbarUserProfile, DbPageHeaderTabItem, DbSharePlatform, DbShareVariant, DbSidebarItem, DbSidebarSection, DbSidebarUserProfile, DbStatChange, DbTimelineItem, DbToastApi, DbToastHandle, DbToastOptions, DbToastPosition, DbToastStatus };