@designbasekorea/ui-wc 0.8.8 → 0.8.11

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { BadgeVariant, BadgeType, TIME_PICKER_FORMATS, DOWNLOAD_PROGRESS_STATUSES, DOWNLOAD_PROGRESS_POSITIONS, OTP_INPUT_SIZES, PHONE_VERIFY_SIZES, EMAIL_VERIFY_SIZES, TWO_FACTOR_SIZES, CHAT_ORB_SIZES, CHAT_ORB_VARIANTS, CHAT_ORB_STATES, CHAT_ORB_THEMES, CHAT_MESSAGE_ROLES, CHAT_WIDGET_VIEWS, CHAT_WIDGET_POSITIONS, ToastVariant, ToastPosition } from '@designbasekorea/ui-contracts';
+import { BadgeVariant, BadgeType, TIME_PICKER_FORMATS, DOWNLOAD_PROGRESS_STATUSES, DOWNLOAD_PROGRESS_POSITIONS, OTP_INPUT_SIZES, PHONE_VERIFY_SIZES, EMAIL_VERIFY_SIZES, TWO_FACTOR_SIZES, AI_GLOW_STATES, AI_GLOW_VARIANTS, AI_GLOW_SIZES, CHAT_ORB_SIZES, CHAT_ORB_VARIANTS, CHAT_ORB_STATES, CHAT_ORB_THEMES, CHAT_MESSAGE_ROLES, CHAT_WIDGET_VIEWS, CHAT_WIDGET_POSITIONS, ToastVariant, ToastPosition } from '@designbasekorea/ui-contracts';
 export { ToastPosition as DbToastPosition, ToastVariant as DbToastVariant } from '@designbasekorea/ui-contracts';
 
 /**
@@ -232,6 +232,11 @@ declare function t(key: DbStringKey | string, fallback?: string): string;
  */
 declare function labelFrom(el: Element, attribute: string, key: DbStringKey | string): string;
 
+declare function sanitizeHref(value: string | null | undefined, fallback?: string): string;
+
+/** 외부/저장 콘텐츠를 Light DOM에 넣기 전 허용 목록으로 정제합니다. */
+declare function sanitizeHtmlFragment(value: string | null | undefined): DocumentFragment;
+
 /**
  * 선택적 베이스 클래스.
  *
@@ -293,6 +298,8 @@ declare class DbButton extends HTMLElement {
     set accentStyle(value: string);
     get type(): string;
     set type(value: string);
+    get href(): string;
+    set href(value: string);
     get loadingText(): string;
     set loadingText(value: string);
     get disabled(): boolean;
@@ -460,6 +467,8 @@ declare class DbToggle extends HTMLElement {
     set readOnly(value: boolean);
     get size(): string;
     set size(value: string);
+    get variant(): string;
+    set variant(value: string);
     connectedCallback(): void;
     attributeChangedCallback(): void;
     formResetCallback(): void;
@@ -1662,6 +1671,9 @@ declare class DbShare extends HTMLElement {
     private dropdownEl;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    private getVariant;
+    private getSize;
+    private getPosition;
     attributeChangedCallback(name: string): void;
     get open(): boolean;
     set open(value: boolean);
@@ -2413,7 +2425,6 @@ declare class DbRangeSlider extends HTMLElement {
     private boundTrackClick;
     private boundPointerMove;
     private boundPointerUp;
-    private boundContainerKeyDown;
     private eventsBound;
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -3137,6 +3148,8 @@ declare class DbTimePicker extends HTMLElement {
     private tempSeconds;
     private tempPeriod;
     private boundDocumentMouseDown;
+    private boundViewportChange;
+    private viewportChangeFrame;
     connectedCallback(): void;
     disconnectedCallback(): void;
     /** 열린 드롭다운은 Escape 로 닫히고 포커스는 트리거로 돌아간다 (A11Y-ESCAPE) */
@@ -3151,6 +3164,10 @@ declare class DbTimePicker extends HTMLElement {
     private get is12h();
     private get showSeconds();
     private get minuteStep();
+    private get normalizedSize();
+    private get dropdownPosition();
+    /** CSS wheel item 높이와 스크롤 계산을 같은 값으로 유지한다. */
+    private get itemHeight();
     get disabled(): boolean;
     set disabled(value: boolean);
     get readonly(): boolean;
@@ -3169,6 +3186,9 @@ declare class DbTimePicker extends HTMLElement {
     private closePicker;
     private toggleOpen;
     private handleDocumentMouseDown;
+    private handleViewportChange;
+    /** 드롭다운을 body에 고정해 overflow-hidden 컬럼에서도 잘리지 않게 한다. */
+    private positionDropdown;
     private createWheel;
     private renderSelector;
     private render;
@@ -3632,7 +3652,6 @@ declare class DbKanban extends HTMLElement {
     disconnectedCallback(): void;
     attributeChangedCallback(): void;
     private getBool;
-    private getOption;
     private emitChange;
     private emitCardMove;
     private findCardLocation;
@@ -5161,6 +5180,82 @@ declare global {
     }
 }
 
+type GlowSize = (typeof AI_GLOW_SIZES)[number];
+type GlowState = (typeof AI_GLOW_STATES)[number];
+type GlowVariant = (typeof AI_GLOW_VARIANTS)[number];
+/**
+ * AI 가 생각·작업·청취 중임을 알리는 테두리 글로우.
+ * iOS Siri·브라우저 에이전트처럼 가장자리 안쪽으로 여러 색 그라데이션이 번지며 흐른다.
+ * 콘텐츠 위에 떠 있지만 `pointer-events: none` 이라 조작을 막지 않는다.
+ *
+ * 기본은 뷰포트 전체(`position: fixed`). `contained` 를 주면 가장 가까운 positioned 조상 안에만
+ * 깔리고 모서리 둥글기도 부모를 따른다 — 부모에 `position: relative` 가 필요하다.
+ *
+ * `state="listening"` 은 음성 반응 모드다. `audioStream`(마이크 MediaStream) 또는
+ * `voice-level`(0–1) 을 넣으면 소리 크기에 맞춰 빛의 두께·밝기가 출렁인다.
+ * 둘 다 없으면 청취 중임을 알 수 있도록 말하는 듯한 잔잔한 움직임으로 대신한다.
+ *
+ * @example
+ *   <db-ai-glow active></db-ai-glow>
+ *
+ * @example
+ *   const glow = document.querySelector('db-ai-glow');
+ *   glow.state = 'listening';
+ *   glow.audioStream = await navigator.mediaDevices.getUserMedia({ audio: true });
+ *   glow.active = true;
+ */
+declare class DbAiGlow extends DbElement {
+    static get observedAttributes(): string[];
+    private status;
+    private readonly meter;
+    private inputStream;
+    private rafId;
+    private lastFrame;
+    private startedAt;
+    private level;
+    get active(): boolean;
+    set active(value: boolean);
+    get state(): GlowState;
+    set state(value: GlowState);
+    get variant(): GlowVariant;
+    set variant(value: GlowVariant);
+    get size(): GlowSize;
+    set size(value: GlowSize);
+    get contained(): boolean;
+    set contained(value: boolean);
+    /** 외부 분석기가 전달하는 정규화 음성 레벨(0–1). `listening` 상태에서만 쓰인다. */
+    get voiceLevel(): number;
+    set voiceLevel(value: number);
+    /** 켜질 때 스크린 리더에 알릴 문구(예: "AI가 화면을 제어하는 중"). 없으면 순수 장식이다. */
+    get label(): string;
+    set label(value: string);
+    /**
+     * 실제 마이크/통화 MediaStream. 음량만 분석하며 트랙을 stop() 하지 않는다.
+     * null 을 넣으면 분석만 해제한다.
+     */
+    get audioStream(): MediaStream | null;
+    set audioStream(stream: MediaStream | null);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    private onMotionChange;
+    /** 구조는 한 번만 만든다 (PERF-RECONCILE) */
+    private ensureStructure;
+    /** 소비자가 붙인 className 은 건드리지 않고 수식어만 교체한다 */
+    private syncClasses;
+    private syncStatus;
+    /** 음성 반응 루프는 청취 중 + 켜짐 + 모션 허용일 때만 돈다. 나머지 애니메이션은 전부 CSS 다. */
+    private syncLoop;
+    private stopLoop;
+    private frame;
+    private sampleLevel;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-ai-glow': DbAiGlow;
+    }
+}
+
 type OrbSize = (typeof CHAT_ORB_SIZES)[number];
 type OrbVariant = (typeof CHAT_ORB_VARIANTS)[number];
 type OrbState = (typeof CHAT_ORB_STATES)[number];
@@ -5705,7 +5800,8 @@ interface DbArtifactOptions {
     title?: string;
     /** 헤더 부제(선택) */
     subtitle?: string;
-    /** 본문 HTML (setArtifactContent 로 요소를 직접 넣을 수도 있음) */
+    /** 허용 목록으로 정제할 본문 HTML (직접 요소를 넣으려면 setArtifactContent 사용) */
+    /** 허용 목록으로 정제할 HTML 본문 (text 대신) */
     html?: string;
     /** 인라인 카드와 동기화할 id (toggle 용) */
     id?: string;
@@ -5938,6 +6034,7 @@ interface DbChatRoomMessage {
     /** 내가 보낸 메시지면 true(우측 정렬). 아니면 상대(좌측) */
     mine?: boolean;
     text?: string;
+    /** 허용 목록으로 정제할 HTML 본문 (text 대신) */
     html?: string;
     time?: string;
     /** 상대 이름(그룹 채팅에서 유용) */
@@ -6086,5 +6183,5 @@ interface DbConfirmOptions {
 /** 확인 대화상자를 띄우고, 확인 시 true / 취소(ESC·배경 포함) 시 false 로 resolve 합니다. */
 declare function confirm(options: DbConfirmOptions): Promise<boolean>;
 
-export { CleanupBag, DbAccordion, DbActivityHeatmap, DbAdBanner, DbAiChat, DbAiChatList, DbAlert, DbAnimationBackground, DbAnimationText, DbAppBadge, DbAudioPlayer, DbAvatar, DbBackdrop, DbBadge, DbBanner, DbBottomNavigation, DbBottomSheet, DbBreadcrumbs, DbButton, DbCalendar, DbCard, DbCarousel, DbChatComposer, DbChatList, DbChatMessage, DbChatOrb, DbChatRoom, DbChatSuggestions, DbChatTyping, DbChatWelcome, DbChatWidget, DbCheckbox, DbChip, DbCodeBlock, DbColorPicker, DbColorSwatch, DbConfirm, DbContainer, DbContextMenu, DbCookieBanner, DbCountdown, DbCursorFollower, DbDatePicker, DbDivider, DbDownloadProgress, DbDrawer, DbDropdown, DbDropzone, DbElement, DbEmailVerify, DbEmptyState, DbFileUploader, DbFloatingActionButton, DbFooter, DbForm, DbGantt, DbGradient, DbGrid, DbGridBackground, DbGridItem, DbImage, DbImageList, DbImagePlaceholder, DbIndicator, DbInput, DbKanban, DbLabel, DbLightbox, DbList, DbLogo, DbMarkdownEditor, DbMarquee, DbMasonry, DbMenuItem, DbModal, DbNavbar, DbOnboardingModal, DbOtpInput, DbPageHeader, DbPagination, DbPhoneVerify, DbPopover, DbProgress, DbProgressStep, DbProgressbar, DbRadio, DbRandomGradient, DbRangeSlider, DbRating, DbReorder, DbResizablePanels, DbScrollArea, DbSearchBar, DbSection, DbSectionAppDownload, DbSectionContact, DbSectionCta, DbSectionFaq, DbSectionFeature, DbSectionFeatureGrid, DbSectionHero, DbSectionLogoCloud, DbSectionPricing, DbSectionStats, DbSectionTestimonials, DbSegmentControl, DbSelect, DbShare, DbSidebar, DbSignature, DbSkeleton, DbSpinner, DbSplitView, DbStack, DbStat, DbStepper, DbTable, DbTabs, DbTestimonial, DbTextarea, DbTimePicker, DbTimeline, DbToast, DbToggle, DbToolbar, DbTooltip, DbTopBanner, DbTutorial, DbTwoFactor, DbVideoPlayer, DbYouTubePlayer, activateOnKey, announce, confirm, createFocusTrap, createSrOnly, confirm as dbConfirm, dbResetLocale, dbSetLocale, toast as dbToast, dbUid, ensureId, getTabbables, labelFrom, lockScroll, politenessForTone, rafThrottle, scrollLockDepth, setAccessibleName, showToast, t, toast, unlockScroll };
+export { CleanupBag, DbAccordion, DbActivityHeatmap, DbAdBanner, DbAiChat, DbAiChatList, DbAiGlow, DbAlert, DbAnimationBackground, DbAnimationText, DbAppBadge, DbAudioPlayer, DbAvatar, DbBackdrop, DbBadge, DbBanner, DbBottomNavigation, DbBottomSheet, DbBreadcrumbs, DbButton, DbCalendar, DbCard, DbCarousel, DbChatComposer, DbChatList, DbChatMessage, DbChatOrb, DbChatRoom, DbChatSuggestions, DbChatTyping, DbChatWelcome, DbChatWidget, DbCheckbox, DbChip, DbCodeBlock, DbColorPicker, DbColorSwatch, DbConfirm, DbContainer, DbContextMenu, DbCookieBanner, DbCountdown, DbCursorFollower, DbDatePicker, DbDivider, DbDownloadProgress, DbDrawer, DbDropdown, DbDropzone, DbElement, DbEmailVerify, DbEmptyState, DbFileUploader, DbFloatingActionButton, DbFooter, DbForm, DbGantt, DbGradient, DbGrid, DbGridBackground, DbGridItem, DbImage, DbImageList, DbImagePlaceholder, DbIndicator, DbInput, DbKanban, DbLabel, DbLightbox, DbList, DbLogo, DbMarkdownEditor, DbMarquee, DbMasonry, DbMenuItem, DbModal, DbNavbar, DbOnboardingModal, DbOtpInput, DbPageHeader, DbPagination, DbPhoneVerify, DbPopover, DbProgress, DbProgressStep, DbProgressbar, DbRadio, DbRandomGradient, DbRangeSlider, DbRating, DbReorder, DbResizablePanels, DbScrollArea, DbSearchBar, DbSection, DbSectionAppDownload, DbSectionContact, DbSectionCta, DbSectionFaq, DbSectionFeature, DbSectionFeatureGrid, DbSectionHero, DbSectionLogoCloud, DbSectionPricing, DbSectionStats, DbSectionTestimonials, DbSegmentControl, DbSelect, DbShare, DbSidebar, DbSignature, DbSkeleton, DbSpinner, DbSplitView, DbStack, DbStat, DbStepper, DbTable, DbTabs, DbTestimonial, DbTextarea, DbTimePicker, DbTimeline, DbToast, DbToggle, DbToolbar, DbTooltip, DbTopBanner, DbTutorial, DbTwoFactor, DbVideoPlayer, DbYouTubePlayer, activateOnKey, announce, confirm, createFocusTrap, createSrOnly, confirm as dbConfirm, dbResetLocale, dbSetLocale, toast as dbToast, dbUid, ensureId, getTabbables, labelFrom, lockScroll, politenessForTone, rafThrottle, sanitizeHref, sanitizeHtmlFragment, scrollLockDepth, setAccessibleName, showToast, t, toast, unlockScroll };
 export type { CalendarEventData, CalendarEventType, Cleanup, DbActivityHeatmapCellDetail, DbActivityHeatmapItem, DbAiChatItem, DbAlertAction, DbArtifactOptions, DbBannerAction, DbBottomNavigationItem, DbChatArtifactRef, DbChatAttachOption, DbChatListItem, DbChatMessageAttachment, DbChatMessageData, DbChatRoomMessage, DbChatSuggestion, DbChatTool, DbChatWidgetArticle, DbChatWidgetConversation, DbChatWidgetMenuAction, DbChatWidgetMenuItem, DbChatWidgetMessage, DbColorSwatchCustomType, DbColorSwatchItem, DbColorSwatchShape, DbColorSwatchSize, DbConfirmOptions, DbConfirmVariant, DbFooterCompanyInfo, DbFooterFamilySite, DbFooterLink, DbFooterLinkColumn, DbFooterSocialLink, DbFormFieldData, DbGanttAssignee, DbGanttGroup, DbGanttItem, DbGanttItemStatus, DbGanttRow, DbImageListItem, DbKanbanAssignee, DbKanbanCard, DbKanbanColumn, DbKanbanPriority, DbKanbanTag, DbLightboxImage, DbNavbarItem, DbNavbarUserProfile, DbPageHeaderTabItem, DbSharePlatform, DbShareVariant, DbSidebarItem, DbSidebarProject, DbSidebarPromoBanner, DbSidebarSection, DbSidebarUserProfile, DbSignaturePoint, DbSignatureVariant, DbStatChange, DbStringKey, DbStrings, DbTimelineItem, DbToastApi, DbToastHandle, DbToastOptions, FocusTrap, FocusTrapOptions };