@designbasekorea/ui-wc 0.5.3 → 0.5.6

package/dist/esm/components/db-youtube-player.js

@@ -1 +1,194 @@
-class DbYouTubePlayer extends HTMLElement{constructor(){super(...arguments),this.isFullscreen=!1,this.playlistIndex=0,this.onFullscreenChange=()=>{this.isFullscreen=!!document.fullscreenElement,this.dispatchEvent(new CustomEvent("db-fullscreen-change",{detail:{isFullscreen:this.isFullscreen},bubbles:!0,composed:!0})),this.render()}}static get observedAttributes(){return["video-id","title","description","size","variant","theme","auto-play","loop","muted","show-controls","enable-fullscreen","enable-keyboard","enable-touch","show-subtitles","default-subtitle-lang","playback-rate","start-time","end-time","show-related-videos","show-info","show-channel-info","show-like-buttons","show-comments","playlist","current-index"]}connectedCallback(){this.style.display="block",this.playlistIndex=Number(this.getAttribute("current-index")||0),this.render(),document.addEventListener("fullscreenchange",this.onFullscreenChange)}disconnectedCallback(){document.removeEventListener("fullscreenchange",this.onFullscreenChange)}attributeChangedCallback(){this.render()}getBool(e,t=!1){if(!this.hasAttribute(e))return t;const s=this.getAttribute(e);return""===s||"true"===s}extractVideoId(e){if(!e)return"";if(11===e.length&&/^[a-zA-Z0-9_-]{11}$/.test(e))return e;const t=[/(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/|youtube\.com\/v\/|youtube\.com\/watch\?.*&v=)([^&\n?#]+)/,/youtube\.com\/watch\?.*v=([^&\n?#]+)/];for(const s of t){const t=e.match(s);if(t)return t[1]}return e}getPlaylist(){try{const e=this.getAttribute("playlist"),t=e?JSON.parse(e):[];return Array.isArray(t)?t:[]}catch{return[]}}getCurrentVideoId(){const e=this.getPlaylist();if(e.length>0){const t=Math.max(0,Math.min(e.length-1,this.playlistIndex));return this.extractVideoId(e[t])}return this.extractVideoId(this.getAttribute("video-id")||"")}generateEmbedUrl(e){const t=new URLSearchParams;if(this.getBool("auto-play")&&t.append("autoplay","1"),this.getBool("loop")&&t.append("loop","1"),this.getBool("muted")&&t.append("mute","1"),this.getBool("show-controls",!0)||t.append("controls","0"),this.getBool("enable-fullscreen",!0)||t.append("fs","0"),this.getBool("enable-keyboard",!0)||t.append("disablekb","1"),this.getBool("enable-touch",!0)||t.append("modestbranding","1"),this.getBool("show-subtitles")){t.append("cc_load_policy","1");const e=this.getAttribute("default-subtitle-lang")||"ko";e&&t.append("cc_lang_pref",e)}const s=this.getAttribute("playback-rate")||"1";"1"!==s&&t.append("vq",s);const n=Number(this.getAttribute("start-time")||0);n>0&&t.append("start",String(n));const o=Number(this.getAttribute("end-time")||0);o>0&&t.append("end",String(o)),this.getBool("show-related-videos",!0)||t.append("rel","0"),this.getBool("show-info",!0)||t.append("showinfo","0"),this.getBool("show-channel-info",!0)||t.append("modestbranding","1"),this.getBool("show-like-buttons",!0)||t.append("modestbranding","1"),this.getBool("show-comments",!1)||t.append("modestbranding","1");const i=this.getPlaylist().map(e=>this.extractVideoId(e)).filter(Boolean);i.length>0?t.append("playlist",i.join(",")):this.getBool("loop")&&t.append("playlist",e);const r=t.toString();return`https://www.youtube.com/embed/${e}${r?`?${r}`:""}`}render(){const e=this.getAttribute("size")||"m",t=this.getAttribute("variant")||"default",s=this.getAttribute("theme")||"auto";this.className=["designbase-wc-youtube-player",`designbase-wc-youtube-player--${e}`,`designbase-wc-youtube-player--${t}`,`designbase-wc-youtube-player--${s}`,this.isFullscreen&&"designbase-wc-youtube-player--fullscreen"].filter(Boolean).join(" ");const n=this.getCurrentVideoId();if(!n){const e=document.createElement("div");return e.className="designbase-wc-youtube-player__error",e.textContent="동영상을 불러올 수 없습니다.",void this.replaceChildren(e)}const o=document.createElement("div");o.className="designbase-wc-youtube-player__container";const i=document.createElement("iframe");i.className="designbase-wc-youtube-player__iframe",i.src=this.generateEmbedUrl(n),i.title=this.getAttribute("title")||`YouTube 동영상: ${n}`,i.setAttribute("frameborder","0"),i.setAttribute("allow","accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"),i.setAttribute("referrerpolicy","strict-origin-when-cross-origin"),i.referrerPolicy="strict-origin-when-cross-origin",i.allowFullscreen=!0,o.append(i);const r=this.getAttribute("description"),a=document.createDocumentFragment();if(a.append(o),r&&"minimal"!==t){const e=document.createElement("div");e.className="designbase-wc-youtube-player__description";const t=document.createElement("p");t.textContent=r,e.append(t),a.append(e)}this.replaceChildren(a)}}customElements.get("db-youtube-player")||customElements.define("db-youtube-player",DbYouTubePlayer);export{DbYouTubePlayer};
+class DbYouTubePlayer extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.isFullscreen = false;
+        this.playlistIndex = 0;
+        this.onFullscreenChange = () => {
+            this.isFullscreen = !!document.fullscreenElement;
+            this.dispatchEvent(new CustomEvent('db-fullscreen-change', { detail: { isFullscreen: this.isFullscreen }, bubbles: true, composed: true }));
+            this.render();
+        };
+    }
+    static get observedAttributes() {
+        return [
+            'video-id',
+            'title',
+            'description',
+            'size',
+            'variant',
+            'theme',
+            'auto-play',
+            'loop',
+            'muted',
+            'show-controls',
+            'enable-fullscreen',
+            'enable-keyboard',
+            'enable-touch',
+            'show-subtitles',
+            'default-subtitle-lang',
+            'playback-rate',
+            'start-time',
+            'end-time',
+            'show-related-videos',
+            'show-info',
+            'show-channel-info',
+            'show-like-buttons',
+            'show-comments',
+            'playlist',
+            'current-index',
+        ];
+    }
+    connectedCallback() {
+        this.style.display = 'block';
+        this.playlistIndex = Number(this.getAttribute('current-index') || 0);
+        this.render();
+        document.addEventListener('fullscreenchange', this.onFullscreenChange);
+    }
+    disconnectedCallback() {
+        document.removeEventListener('fullscreenchange', this.onFullscreenChange);
+    }
+    attributeChangedCallback() {
+        this.render();
+    }
+    getBool(name, fallback = false) {
+        if (!this.hasAttribute(name))
+            return fallback;
+        const value = this.getAttribute(name);
+        return value === '' || value === 'true';
+    }
+    extractVideoId(url) {
+        if (!url)
+            return '';
+        if (url.length === 11 && /^[a-zA-Z0-9_-]{11}$/.test(url))
+            return url;
+        const patterns = [
+            /(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/|youtube\.com\/v\/|youtube\.com\/watch\?.*&v=)([^&\n?#]+)/,
+            /youtube\.com\/watch\?.*v=([^&\n?#]+)/,
+        ];
+        for (const pattern of patterns) {
+            const match = url.match(pattern);
+            if (match)
+                return match[1];
+        }
+        return url;
+    }
+    getPlaylist() {
+        try {
+            const raw = this.getAttribute('playlist');
+            const parsed = raw ? JSON.parse(raw) : [];
+            return Array.isArray(parsed) ? parsed : [];
+        }
+        catch {
+            return [];
+        }
+    }
+    getCurrentVideoId() {
+        const playlist = this.getPlaylist();
+        if (playlist.length > 0) {
+            const index = Math.max(0, Math.min(playlist.length - 1, this.playlistIndex));
+            return this.extractVideoId(playlist[index]);
+        }
+        return this.extractVideoId(this.getAttribute('video-id') || '');
+    }
+    generateEmbedUrl(videoId) {
+        const params = new URLSearchParams();
+        if (this.getBool('auto-play'))
+            params.append('autoplay', '1');
+        if (this.getBool('loop'))
+            params.append('loop', '1');
+        if (this.getBool('muted'))
+            params.append('mute', '1');
+        if (!this.getBool('show-controls', true))
+            params.append('controls', '0');
+        if (!this.getBool('enable-fullscreen', true))
+            params.append('fs', '0');
+        if (!this.getBool('enable-keyboard', true))
+            params.append('disablekb', '1');
+        if (!this.getBool('enable-touch', true))
+            params.append('modestbranding', '1');
+        if (this.getBool('show-subtitles')) {
+            params.append('cc_load_policy', '1');
+            const subtitleLang = this.getAttribute('default-subtitle-lang') || 'ko';
+            if (subtitleLang)
+                params.append('cc_lang_pref', subtitleLang);
+        }
+        const playbackRate = this.getAttribute('playback-rate') || '1';
+        if (playbackRate !== '1')
+            params.append('vq', playbackRate);
+        const start = Number(this.getAttribute('start-time') || 0);
+        if (start > 0)
+            params.append('start', String(start));
+        const end = Number(this.getAttribute('end-time') || 0);
+        if (end > 0)
+            params.append('end', String(end));
+        if (!this.getBool('show-related-videos', true))
+            params.append('rel', '0');
+        if (!this.getBool('show-info', true))
+            params.append('showinfo', '0');
+        if (!this.getBool('show-channel-info', true))
+            params.append('modestbranding', '1');
+        if (!this.getBool('show-like-buttons', true))
+            params.append('modestbranding', '1');
+        if (!this.getBool('show-comments', false))
+            params.append('modestbranding', '1');
+        const playlist = this.getPlaylist().map((entry) => this.extractVideoId(entry)).filter(Boolean);
+        if (playlist.length > 0) {
+            params.append('playlist', playlist.join(','));
+        }
+        else if (this.getBool('loop')) {
+            params.append('playlist', videoId);
+        }
+        const query = params.toString();
+        return `https://www.youtube.com/embed/${videoId}${query ? `?${query}` : ''}`;
+    }
+    render() {
+        const size = this.getAttribute('size') || 'm';
+        const variant = this.getAttribute('variant') || 'default';
+        const theme = this.getAttribute('theme') || 'auto';
+        this.className = [
+            'designbase-wc-youtube-player',
+            `designbase-wc-youtube-player--${size}`,
+            `designbase-wc-youtube-player--${variant}`,
+            `designbase-wc-youtube-player--${theme}`,
+            this.isFullscreen && 'designbase-wc-youtube-player--fullscreen',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        const currentVideoId = this.getCurrentVideoId();
+        if (!currentVideoId) {
+            const error = document.createElement('div');
+            error.className = 'designbase-wc-youtube-player__error';
+            error.textContent = '동영상을 불러올 수 없습니다.';
+            this.replaceChildren(error);
+            return;
+        }
+        const container = document.createElement('div');
+        container.className = 'designbase-wc-youtube-player__container';
+        const iframe = document.createElement('iframe');
+        iframe.className = 'designbase-wc-youtube-player__iframe';
+        iframe.src = this.generateEmbedUrl(currentVideoId);
+        iframe.title = this.getAttribute('title') || `YouTube 동영상: ${currentVideoId}`;
+        iframe.setAttribute('frameborder', '0');
+        iframe.setAttribute('allow', 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share');
+        iframe.setAttribute('referrerpolicy', 'strict-origin-when-cross-origin');
+        iframe.referrerPolicy = 'strict-origin-when-cross-origin';
+        iframe.allowFullscreen = true;
+        container.append(iframe);
+        const description = this.getAttribute('description');
+        const fragment = document.createDocumentFragment();
+        fragment.append(container);
+        if (description && variant !== 'minimal') {
+            const desc = document.createElement('div');
+            desc.className = 'designbase-wc-youtube-player__description';
+            const p = document.createElement('p');
+            p.textContent = description;
+            desc.append(p);
+            fragment.append(desc);
+        }
+        this.replaceChildren(fragment);
+    }
+}
+if (!customElements.get('db-youtube-player'))
+    customElements.define('db-youtube-player', DbYouTubePlayer);
+
+export { DbYouTubePlayer };

package/dist/esm/components/highlight-code.js

@@ -1 +1,65 @@
-import*as s from"prismjs";import"../node_modules/prismjs/components/prism-clike.js";import"../node_modules/prismjs/components/prism-markup.js";import"../node_modules/prismjs/components/prism-css.js";import"../node_modules/prismjs/components/prism-scss.js";import"../node_modules/prismjs/components/prism-bash.js";import"../node_modules/prismjs/components/prism-json.js";import"../node_modules/prismjs/components/prism-javascript.js";import"../node_modules/prismjs/components/prism-typescript.js";import"../node_modules/prismjs/components/prism-jsx.js";import"../node_modules/prismjs/components/prism-tsx.js";const o={js:"javascript",ts:"typescript",sh:"bash",shell:"bash",html:"markup",xml:"markup",svg:"markup"},r={javascript:"JavaScript",typescript:"TypeScript",tsx:"TSX",jsx:"JSX",css:"CSS",scss:"SCSS",json:"JSON",bash:"Bash",markup:"HTML"},resolvePrismLanguage=s=>{const r=s.toLowerCase().trim();return o[r]??r},formatLanguageLabel=s=>{const o=resolvePrismLanguage(s);return r[o]??s.toUpperCase()},highlightWithPrism=(o,r)=>{const m=(()=>{const o=globalThis.Prism;return o?.languages?o:s.default??s})(),p=resolvePrismLanguage(r),t=m.languages[p];if(!t)return null;try{return m.highlight(o,t,p)}catch{return null}},ensureHighlightReady=()=>Promise.resolve(),highlightCodeSync=(s,o)=>highlightWithPrism(s,o);export{ensureHighlightReady,formatLanguageLabel,highlightCodeSync,resolvePrismLanguage};
+import * as PrismNamespace from 'prismjs';
+import '../node_modules/prismjs/components/prism-clike.js';
+import '../node_modules/prismjs/components/prism-markup.js';
+import '../node_modules/prismjs/components/prism-css.js';
+import '../node_modules/prismjs/components/prism-scss.js';
+import '../node_modules/prismjs/components/prism-bash.js';
+import '../node_modules/prismjs/components/prism-json.js';
+import '../node_modules/prismjs/components/prism-javascript.js';
+import '../node_modules/prismjs/components/prism-typescript.js';
+import '../node_modules/prismjs/components/prism-jsx.js';
+import '../node_modules/prismjs/components/prism-tsx.js';
+
+const LANGUAGE_ALIASES = {
+    js: 'javascript',
+    ts: 'typescript',
+    sh: 'bash',
+    shell: 'bash',
+    html: 'markup',
+    xml: 'markup',
+    svg: 'markup',
+};
+const LANGUAGE_LABELS = {
+    javascript: 'JavaScript',
+    typescript: 'TypeScript',
+    tsx: 'TSX',
+    jsx: 'JSX',
+    css: 'CSS',
+    scss: 'SCSS',
+    json: 'JSON',
+    bash: 'Bash',
+    markup: 'HTML',
+};
+/** prism language components mutate the global Prism singleton — not always the ESM namespace */
+const getPrism = () => {
+    const globalPrism = globalThis.Prism;
+    if (globalPrism?.languages)
+        return globalPrism;
+    return PrismNamespace.default ?? PrismNamespace;
+};
+const resolvePrismLanguage = (language) => {
+    const normalized = language.toLowerCase().trim();
+    return LANGUAGE_ALIASES[normalized] ?? normalized;
+};
+const formatLanguageLabel = (language) => {
+    const resolved = resolvePrismLanguage(language);
+    return LANGUAGE_LABELS[resolved] ?? language.toUpperCase();
+};
+const highlightWithPrism = (code, language) => {
+    const Prism = getPrism();
+    const lang = resolvePrismLanguage(language);
+    const grammar = Prism.languages[lang];
+    if (!grammar) {
+        return null;
+    }
+    try {
+        return Prism.highlight(code, grammar, lang);
+    }
+    catch {
+        return null;
+    }
+};
+const ensureHighlightReady = () => Promise.resolve();
+const highlightCodeSync = (code, language) => highlightWithPrism(code, language);
+
+export { ensureHighlightReady, formatLanguageLabel, highlightCodeSync, resolvePrismLanguage };

package/dist/esm/components/input-validation.js

@@ -1 +1,50 @@
-const e={weak:"약함",fair:"보통",good:"강함","very-strong":"아주 강함"};function getPasswordScore(e){switch(e){case"weak":return 1;case"fair":return 2;case"good":return 3;case"very-strong":return 4;default:return 0}}function getPasswordValidation(t,r=8){const s=[{id:"length",label:`최소 ${r}자 이상`,met:t.length>=r},{id:"lowercase",label:"소문자 포함",met:/[a-z]/.test(t)},{id:"uppercase",label:"대문자 포함",met:/[A-Z]/.test(t)},{id:"number",label:"숫자 포함",met:/\d/.test(t)},{id:"special",label:"특수문자 포함",met:/[!@#$%^&*(),.?":{}|<>]/.test(t)}],a=function getPasswordStrengthLevel(e,t){return!t||e<=1?"weak":2===e?"fair":3===e?"good":"very-strong"}(s.filter(e=>e.met).length,t.length>0);return{requirements:s,score:getPasswordScore(a),level:a,levelLabel:e[a],isValid:s.every(e=>e.met),isStrongEnough:"good"===a||"very-strong"===a}}export{getPasswordValidation};
+const STRENGTH_LABELS = {
+    weak: '약함',
+    fair: '보통',
+    good: '강함',
+    'very-strong': '아주 강함',
+};
+function getPasswordStrengthLevel(metCount, hasValue) {
+    if (!hasValue || metCount <= 1)
+        return 'weak';
+    if (metCount === 2)
+        return 'fair';
+    if (metCount === 3)
+        return 'good';
+    return 'very-strong';
+}
+function getPasswordScore(level) {
+    switch (level) {
+        case 'weak':
+            return 1;
+        case 'fair':
+            return 2;
+        case 'good':
+            return 3;
+        case 'very-strong':
+            return 4;
+        default:
+            return 0;
+    }
+}
+function getPasswordValidation(value, minLength = 8) {
+    const requirements = [
+        { id: 'length', label: `최소 ${minLength}자 이상`, met: value.length >= minLength },
+        { id: 'lowercase', label: '소문자 포함', met: /[a-z]/.test(value) },
+        { id: 'uppercase', label: '대문자 포함', met: /[A-Z]/.test(value) },
+        { id: 'number', label: '숫자 포함', met: /\d/.test(value) },
+        { id: 'special', label: '특수문자 포함', met: /[!@#$%^&*(),.?":{}|<>]/.test(value) },
+    ];
+    const metCount = requirements.filter((requirement) => requirement.met).length;
+    const level = getPasswordStrengthLevel(metCount, value.length > 0);
+    return {
+        requirements,
+        score: getPasswordScore(level),
+        level,
+        levelLabel: STRENGTH_LABELS[level],
+        isValid: requirements.every((requirement) => requirement.met),
+        isStrongEnough: level === 'good' || level === 'very-strong',
+    };
+}
+
+export { getPasswordValidation };

package/dist/esm/components/marketing-block-host-utils.js

@@ -1 +1,9 @@
-const t=["full-width","full-height","overflow-visible"];function syncMarketingBlockHost(o,s){for(const l of t)o.classList.toggle(`${s}--${l}`,o.hasAttribute(l))}export{syncMarketingBlockHost};
+const HOST_FLAGS = ['full-width', 'full-height', 'overflow-visible'];
+/** Marketing blocks are standalone components — sync layout flags on the host, not nested db-section. */
+function syncMarketingBlockHost(host, baseClass) {
+    for (const flag of HOST_FLAGS) {
+        host.classList.toggle(`${baseClass}--${flag}`, host.hasAttribute(flag));
+    }
+}
+
+export { syncMarketingBlockHost };

package/dist/esm/components/number-scrub.js

@@ -1 +1,117 @@
-function parseScrubNumericValue(e){const t=e.trim();if(""===t)return 0;const r=Number(t);return Number.isFinite(r)?r:null}function getStepDecimalPlaces(e){const t=String(e),r=t.indexOf(".");return-1===r?0:t.length-r-1}function formatScrubValue(e,t){const r=getStepDecimalPlaces(t);return r>0?e.toFixed(r):String(Math.round(e))}function computeScrubValue(e,t,r,n,o,u,i){const a=n*(o.shiftKey?10:o.altKey?.1:1);let c=e+Math.round(t/r)*a;void 0!==u&&(c=Math.max(u,c)),void 0!==i&&(c=Math.min(i,c));const s=getStepDecimalPlaces(a);return c=s>0?Number(c.toFixed(s)):Math.round(c),c}function readNumericAttribute(e,t){const r=e.getAttribute(t);if(null===r||""===r)return;const n=Number(r);return Number.isFinite(n)?n:void 0}function attachNumberScrub(e,t){let r=null;const endScrub=()=>{r=null,t.onScrubStateChange?.(!1),document.body.style.removeProperty("cursor"),document.body.style.removeProperty("user-select")},handlePointerDown=n=>{if(!t.isEnabled()||!t.isInteractive()||0!==n.button)return;const o=parseScrubNumericValue(t.getValue());null!==o&&(r={pointerId:n.pointerId,startX:n.clientX,startValue:o,moved:!1},e.setPointerCapture(n.pointerId))},handlePointerMove=e=>{if(!r||r.pointerId!==e.pointerId)return;const n=e.clientX-r.startX;!r.moved&&Math.abs(n)<3||(r.moved||(r.moved=!0,t.onScrubStateChange?.(!0),document.body.style.cursor="ew-resize",document.body.style.userSelect="none"),e.preventDefault(),((e,n)=>{if(!r)return;const o=e-r.startX,u=t.getStep(),i=computeScrubValue(r.startValue,o,t.getSensitivity(),u,n,t.getMin(),t.getMax());t.onValueChange(formatScrubValue(i,u))})(e.clientX,e))},handlePointerEnd=t=>{r&&r.pointerId===t.pointerId&&(r.moved&&t.preventDefault(),e.hasPointerCapture(t.pointerId)&&e.releasePointerCapture(t.pointerId),endScrub())};return e.addEventListener("pointerdown",handlePointerDown),e.addEventListener("pointermove",handlePointerMove),e.addEventListener("pointerup",handlePointerEnd),e.addEventListener("pointercancel",handlePointerEnd),()=>{endScrub(),e.removeEventListener("pointerdown",handlePointerDown),e.removeEventListener("pointermove",handlePointerMove),e.removeEventListener("pointerup",handlePointerEnd),e.removeEventListener("pointercancel",handlePointerEnd)}}export{attachNumberScrub,computeScrubValue,formatScrubValue,getStepDecimalPlaces,parseScrubNumericValue,readNumericAttribute};
+function parseScrubNumericValue(raw) {
+    const trimmed = raw.trim();
+    if (trimmed === '')
+        return 0;
+    const parsed = Number(trimmed);
+    return Number.isFinite(parsed) ? parsed : null;
+}
+function getStepDecimalPlaces(step) {
+    const normalized = String(step);
+    const dotIndex = normalized.indexOf('.');
+    if (dotIndex === -1)
+        return 0;
+    return normalized.length - dotIndex - 1;
+}
+function formatScrubValue(value, step) {
+    const decimals = getStepDecimalPlaces(step);
+    if (decimals > 0) {
+        return value.toFixed(decimals);
+    }
+    return String(Math.round(value));
+}
+function computeScrubValue(startValue, deltaX, sensitivity, step, modifiers, min, max) {
+    const multiplier = modifiers.shiftKey ? 10 : modifiers.altKey ? 0.1 : 1;
+    const effectiveStep = step * multiplier;
+    const steps = Math.round(deltaX / sensitivity);
+    let next = startValue + steps * effectiveStep;
+    if (min !== undefined)
+        next = Math.max(min, next);
+    if (max !== undefined)
+        next = Math.min(max, next);
+    const decimals = getStepDecimalPlaces(effectiveStep);
+    if (decimals > 0) {
+        next = Number(next.toFixed(decimals));
+    }
+    else {
+        next = Math.round(next);
+    }
+    return next;
+}
+function readNumericAttribute(element, name) {
+    const raw = element.getAttribute(name);
+    if (raw === null || raw === '')
+        return undefined;
+    const parsed = Number(raw);
+    return Number.isFinite(parsed) ? parsed : undefined;
+}
+const SCRUB_DRAG_THRESHOLD = 3;
+function attachNumberScrub(input, options) {
+    let session = null;
+    const endScrub = () => {
+        session = null;
+        options.onScrubStateChange?.(false);
+        document.body.style.removeProperty('cursor');
+        document.body.style.removeProperty('user-select');
+    };
+    const applyScrub = (clientX, modifiers) => {
+        if (!session)
+            return;
+        const deltaX = clientX - session.startX;
+        const step = options.getStep();
+        const next = computeScrubValue(session.startValue, deltaX, options.getSensitivity(), step, modifiers, options.getMin(), options.getMax());
+        options.onValueChange(formatScrubValue(next, step));
+    };
+    const handlePointerDown = (event) => {
+        if (!options.isEnabled() || !options.isInteractive() || event.button !== 0)
+            return;
+        const startValue = parseScrubNumericValue(options.getValue());
+        if (startValue === null)
+            return;
+        session = {
+            pointerId: event.pointerId,
+            startX: event.clientX,
+            startValue,
+            moved: false,
+        };
+        input.setPointerCapture(event.pointerId);
+    };
+    const handlePointerMove = (event) => {
+        if (!session || session.pointerId !== event.pointerId)
+            return;
+        const deltaX = event.clientX - session.startX;
+        if (!session.moved && Math.abs(deltaX) < SCRUB_DRAG_THRESHOLD)
+            return;
+        if (!session.moved) {
+            session.moved = true;
+            options.onScrubStateChange?.(true);
+            document.body.style.cursor = 'ew-resize';
+            document.body.style.userSelect = 'none';
+        }
+        event.preventDefault();
+        applyScrub(event.clientX, event);
+    };
+    const handlePointerEnd = (event) => {
+        if (!session || session.pointerId !== event.pointerId)
+            return;
+        if (session.moved) {
+            event.preventDefault();
+        }
+        if (input.hasPointerCapture(event.pointerId)) {
+            input.releasePointerCapture(event.pointerId);
+        }
+        endScrub();
+    };
+    input.addEventListener('pointerdown', handlePointerDown);
+    input.addEventListener('pointermove', handlePointerMove);
+    input.addEventListener('pointerup', handlePointerEnd);
+    input.addEventListener('pointercancel', handlePointerEnd);
+    return () => {
+        endScrub();
+        input.removeEventListener('pointerdown', handlePointerDown);
+        input.removeEventListener('pointermove', handlePointerMove);
+        input.removeEventListener('pointerup', handlePointerEnd);
+        input.removeEventListener('pointercancel', handlePointerEnd);
+    };
+}
+
+export { attachNumberScrub, computeScrubValue, formatScrubValue, getStepDecimalPlaces, parseScrubNumericValue, readNumericAttribute };

package/dist/esm/components/random-gradient-palettes.js

@@ -1 +1,67 @@
-const a={primary:{light:["#eff6ff","#dbeafe","#bfdbfe","#93c5fd"],vivid:["#3b82f6","#2563eb","#1d4ed8","#1e40af","#1e3a8a"],dark:["#0f172a","#1e293b","#334155","#475569","#64748b"]},secondary:{light:["#f8fafc","#f1f5f9","#e2e8f0","#cbd5e1"],vivid:["#6b7280","#4b5563","#374151","#1f2937","#111827"],dark:["#0f0f0f","#1a1a1a","#262626","#404040","#525252"]},success:{light:["#f0fdf4","#dcfce7","#bbf7d0","#86efac"],vivid:["#22c55e","#16a34a","#15803d","#166534","#14532d"],dark:["#052e16","#14532d","#166534","#15803d","#16a34a"]},warning:{light:["#fffbeb","#fef3c7","#fde68a"],vivid:["#f59e0b","#d97706","#b45309","#92400e","#78350f"],dark:["#451a03","#78350f","#92400e","#b45309","#d97706"]},error:{light:["#fef2f2","#fecaca","#fca5a5"],vivid:["#ef4444","#dc2626","#b91c1c","#991b1b","#7f1d1d"],dark:["#450a0a","#7f1d1d","#991b1b","#b91c1c","#dc2626"]},info:{light:["#eff6ff","#dbeafe","#bfdbfe","#93c5fd"],vivid:["#3b82f6","#2563eb","#1d4ed8","#1e40af","#1e3a8a"],dark:["#0f172a","#1e293b","#334155","#475569","#64748b"]},purple:{light:["#faf5ff","#f3e8ff","#e9d5ff","#d8b4fe"],vivid:["#a855f7","#9333ea","#7c3aed","#6d28d9","#5b21b6"],dark:["#3b0764","#581c87","#6b21a8","#7c3aed","#9333ea"]},ocean:{light:["#f0fdfa","#ccfbf1","#99f6e4"],vivid:["#14b8a6","#0d9488","#0f766e","#115e59","#134e4a"],dark:["#042f2e","#134e4a","#115e59","#0f766e","#0d9488"]},sunset:{light:["#fff7ed","#fed7aa","#fdba74"],vivid:["#f97316","#ea580c","#c2410c","#9a3412","#7c2d12"],dark:["#431407","#7c2d12","#9a3412","#c2410c","#ea580c"]}};function createRandomGradientStyle(f,e,d,c,i,r){const b=a[f][e],t=Math.min(6,Math.max(3,d)),n=[];for(let a=0;a<t;a+=1)n.push(b[Math.floor(Math.random()*b.length)]);const o=Array.from({length:t},()=>100*Math.random()).sort((a,f)=>a-f),h=n.map((a,f)=>`${a} ${o[f]}%`).join(", ");return{background:`radial-gradient(circle at ${100*Math.random()}% ${100*Math.random()}%, ${h})`,filter:`blur(${Math.max(80,c)}px)`,transition:i?`background ${r}s ease-in-out`:"none"}}export{a as COLOR_PALETTES,createRandomGradientStyle};
+const COLOR_PALETTES = {
+    primary: {
+        light: ['#eff6ff', '#dbeafe', '#bfdbfe', '#93c5fd'],
+        vivid: ['#3b82f6', '#2563eb', '#1d4ed8', '#1e40af', '#1e3a8a'],
+        dark: ['#0f172a', '#1e293b', '#334155', '#475569', '#64748b'],
+    },
+    secondary: {
+        light: ['#f8fafc', '#f1f5f9', '#e2e8f0', '#cbd5e1'],
+        vivid: ['#6b7280', '#4b5563', '#374151', '#1f2937', '#111827'],
+        dark: ['#0f0f0f', '#1a1a1a', '#262626', '#404040', '#525252'],
+    },
+    success: {
+        light: ['#f0fdf4', '#dcfce7', '#bbf7d0', '#86efac'],
+        vivid: ['#22c55e', '#16a34a', '#15803d', '#166534', '#14532d'],
+        dark: ['#052e16', '#14532d', '#166534', '#15803d', '#16a34a'],
+    },
+    warning: {
+        light: ['#fffbeb', '#fef3c7', '#fde68a'],
+        vivid: ['#f59e0b', '#d97706', '#b45309', '#92400e', '#78350f'],
+        dark: ['#451a03', '#78350f', '#92400e', '#b45309', '#d97706'],
+    },
+    error: {
+        light: ['#fef2f2', '#fecaca', '#fca5a5'],
+        vivid: ['#ef4444', '#dc2626', '#b91c1c', '#991b1b', '#7f1d1d'],
+        dark: ['#450a0a', '#7f1d1d', '#991b1b', '#b91c1c', '#dc2626'],
+    },
+    info: {
+        light: ['#eff6ff', '#dbeafe', '#bfdbfe', '#93c5fd'],
+        vivid: ['#3b82f6', '#2563eb', '#1d4ed8', '#1e40af', '#1e3a8a'],
+        dark: ['#0f172a', '#1e293b', '#334155', '#475569', '#64748b'],
+    },
+    purple: {
+        light: ['#faf5ff', '#f3e8ff', '#e9d5ff', '#d8b4fe'],
+        vivid: ['#a855f7', '#9333ea', '#7c3aed', '#6d28d9', '#5b21b6'],
+        dark: ['#3b0764', '#581c87', '#6b21a8', '#7c3aed', '#9333ea'],
+    },
+    ocean: {
+        light: ['#f0fdfa', '#ccfbf1', '#99f6e4'],
+        vivid: ['#14b8a6', '#0d9488', '#0f766e', '#115e59', '#134e4a'],
+        dark: ['#042f2e', '#134e4a', '#115e59', '#0f766e', '#0d9488'],
+    },
+    sunset: {
+        light: ['#fff7ed', '#fed7aa', '#fdba74'],
+        vivid: ['#f97316', '#ea580c', '#c2410c', '#9a3412', '#7c2d12'],
+        dark: ['#431407', '#7c2d12', '#9a3412', '#c2410c', '#ea580c'],
+    },
+};
+function createRandomGradientStyle(scheme, tone, colorCount, blur, animated, animationDuration) {
+    const schemeColors = COLOR_PALETTES[scheme][tone];
+    const numColors = Math.min(6, Math.max(3, colorCount));
+    const colors = [];
+    for (let index = 0; index < numColors; index += 1) {
+        colors.push(schemeColors[Math.floor(Math.random() * schemeColors.length)]);
+    }
+    const positions = Array.from({ length: numColors }, () => Math.random() * 100).sort((a, b) => a - b);
+    const gradientStops = colors.map((color, index) => `${color} ${positions[index]}%`).join(', ');
+    const centerX = Math.random() * 100;
+    const centerY = Math.random() * 100;
+    const minBlur = Math.max(80, blur);
+    return {
+        background: `radial-gradient(circle at ${centerX}% ${centerY}%, ${gradientStops})`,
+        filter: `blur(${minBlur}px)`,
+        transition: animated ? `background ${animationDuration}s ease-in-out` : 'none',
+    };
+}
+
+export { COLOR_PALETTES, createRandomGradientStyle };

package/dist/esm/components/section-block-header-utils.js

@@ -1 +1,48 @@
-function applySectionBlockHeader(e,t){if(!e)return;const{headline:n="",subtitle:i="",description:s="",badge:a,align:d="center",extraClassName:o}=t;e.className=["designbase-wc-section-block-header",`designbase-wc-section-block-header--${d}`,o].filter(Boolean).join(" ");let r=e.querySelector("db-badge");a?.text?(r||(r=document.createElement("db-badge"),r.className="designbase-wc-section-block-header__badge",e.prepend(r)),r.removeAttribute("hidden"),r.style.display="",r.setAttribute("variant",a.variant||"primary"),r.setAttribute("badge-style",a.style||"text"),r.setAttribute("size",a.size||"m"),r.textContent=a.text):r&&(r.textContent="",r.setAttribute("hidden",""),r.style.display="none");const c=e.querySelector("h2"),l=e.querySelector(".designbase-wc-section-block-header__subtitle"),b=e.querySelector(".designbase-wc-section-block-header__description");c&&(c.textContent=n,c.hidden=!n),l&&(l.textContent=i,l.hidden=!i),b&&(b.textContent=s,b.hidden=!s)}export{applySectionBlockHeader};
+function applySectionBlockHeader(headerEl, options) {
+    if (!headerEl)
+        return;
+    const { headline = '', subtitle = '', description = '', badge, align = 'center', extraClassName, } = options;
+    headerEl.className = [
+        'designbase-wc-section-block-header',
+        `designbase-wc-section-block-header--${align}`,
+        extraClassName,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    let badgeEl = headerEl.querySelector('db-badge');
+    if (badge?.text) {
+        if (!badgeEl) {
+            badgeEl = document.createElement('db-badge');
+            badgeEl.className = 'designbase-wc-section-block-header__badge';
+            headerEl.prepend(badgeEl);
+        }
+        badgeEl.removeAttribute('hidden');
+        badgeEl.style.display = '';
+        badgeEl.setAttribute('variant', badge.variant || 'primary');
+        badgeEl.setAttribute('badge-style', badge.style || 'text');
+        badgeEl.setAttribute('size', badge.size || 'm');
+        badgeEl.textContent = badge.text;
+    }
+    else if (badgeEl) {
+        badgeEl.textContent = '';
+        badgeEl.setAttribute('hidden', '');
+        badgeEl.style.display = 'none';
+    }
+    const headlineEl = headerEl.querySelector('h2');
+    const subtitleEl = headerEl.querySelector('.designbase-wc-section-block-header__subtitle');
+    const descriptionEl = headerEl.querySelector('.designbase-wc-section-block-header__description');
+    if (headlineEl) {
+        headlineEl.textContent = headline;
+        headlineEl.hidden = !headline;
+    }
+    if (subtitleEl) {
+        subtitleEl.textContent = subtitle;
+        subtitleEl.hidden = !subtitle;
+    }
+    if (descriptionEl) {
+        descriptionEl.textContent = description;
+        descriptionEl.hidden = !description;
+    }
+}
+
+export { applySectionBlockHeader };

package/dist/esm/helpers/confirm.js

@@ -1 +1,52 @@
-function confirm(e){if(!function isBrowser(){return"undefined"!=typeof document}())return Promise.resolve(!1);const{message:t,title:n,confirmText:i,cancelText:r,confirmVariant:s,variant:o,size:c,showIcon:a,initialFocus:u,closeOnEscape:m,closeOnBackdrop:b}=e,d=document.createElement("db-confirm");return d.setAttribute("message",t),n&&d.setAttribute("title",n),i&&d.setAttribute("confirm-text",i),r&&d.setAttribute("cancel-text",r),s&&d.setAttribute("confirm-variant",s),o&&d.setAttribute("variant",o),c&&d.setAttribute("size",c),!1===a&&d.setAttribute("show-icon","false"),u&&d.setAttribute("initial-focus",u),!1===m&&d.setAttribute("close-on-escape","false"),!1===b&&d.setAttribute("close-on-backdrop","false"),document.body.appendChild(d),new Promise(e=>{let t=!1;const finish=n=>{t||(t=!0,d.removeEventListener("db-confirm",onConfirm),d.removeEventListener("db-cancel",onCancel),d.remove(),e(n))},onConfirm=()=>finish(!0),onCancel=()=>finish(!1);d.addEventListener("db-confirm",onConfirm),d.addEventListener("db-cancel",onCancel),d.setAttribute("open","true")})}export{confirm};
+function isBrowser() {
+    return typeof document !== 'undefined';
+}
+/** 확인 대화상자를 띄우고, 확인 시 true / 취소(ESC·배경 포함) 시 false 로 resolve 합니다. */
+function confirm(options) {
+    if (!isBrowser())
+        return Promise.resolve(false);
+    const { message, title, confirmText, cancelText, confirmVariant, variant, size, showIcon, initialFocus, closeOnEscape, closeOnBackdrop, } = options;
+    const el = document.createElement('db-confirm');
+    el.setAttribute('message', message);
+    if (title)
+        el.setAttribute('title', title);
+    if (confirmText)
+        el.setAttribute('confirm-text', confirmText);
+    if (cancelText)
+        el.setAttribute('cancel-text', cancelText);
+    if (confirmVariant)
+        el.setAttribute('confirm-variant', confirmVariant);
+    if (variant)
+        el.setAttribute('variant', variant);
+    if (size)
+        el.setAttribute('size', size);
+    if (showIcon === false)
+        el.setAttribute('show-icon', 'false');
+    if (initialFocus)
+        el.setAttribute('initial-focus', initialFocus);
+    if (closeOnEscape === false)
+        el.setAttribute('close-on-escape', 'false');
+    if (closeOnBackdrop === false)
+        el.setAttribute('close-on-backdrop', 'false');
+    // 닫힌 상태(open=false)로 먼저 연결한 뒤 open 을 켜서 오버레이를 표시한다.
+    document.body.appendChild(el);
+    return new Promise((resolve) => {
+        let settled = false;
+        const finish = (result) => {
+            if (settled)
+                return;
+            settled = true;
+            el.removeEventListener('db-confirm', onConfirm);
+            el.removeEventListener('db-cancel', onCancel);
+            el.remove();
+            resolve(result);
+        };
+        const onConfirm = () => finish(true);
+        const onCancel = () => finish(false);
+        el.addEventListener('db-confirm', onConfirm);
+        el.addEventListener('db-cancel', onCancel);
+        el.setAttribute('open', 'true');
+    });
+}
+
+export { confirm };