@sellmate/design-system 1.0.61 → 1.0.63

package/dist/cjs/sd-select-v2-listbox_2.cjs.entry.js

@@ -1,353 +0,0 @@
-'use strict';
-
-var index = require('./index-BQt-JC6r.js');
-var sdSelectV2_config = require('./sd-select-v2.config-7xBJQhvx.js');
-
-const sdSelectV2ListboxCss = () => `sd-select-v2-listbox{display:block}sd-select-v2-listbox .sd-select-v2-listbox{display:flex;flex-direction:column;min-width:var(--listbox-trigger-width);max-width:var(--listbox-max-width);max-height:var(--listbox-max-height);width:fit-content;border-radius:var(--listbox-radius);background:white;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);overflow:hidden;outline:none}sd-select-v2-listbox .sd-select-v2-listbox__list{flex:1;min-height:0;overflow-y:auto;padding-bottom:0}sd-select-v2-listbox .sd-select-v2-listbox__empty{padding:12px;text-align:center;font-size:12px;line-height:20px;color:#888888}`;
-
-const SdSelectV2Listbox = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.optionSelect = index.createEvent(this, "sdOptionSelect", 7);
-    }
-    name = 'default';
-    options = [];
-    value = null;
-    emitValue = false;
-    triggerWidth = '200px';
-    maxWidth = '640px';
-    maxHeight = '260px';
-    searchKeyword = '';
-    isScrolled = false;
-    focusedIndex = -1;
-    optionSelect;
-    listEl;
-    lastScrolledIndex = -1;
-    keydownAttached = false;
-    suppressHover = false;
-    get isDepth() {
-        return this.name === 'default_depth' || this.name === 'multi_depth';
-    }
-    get isMulti() {
-        return this.name === 'multi' || this.name === 'multi_depth';
-    }
-    get showSearch() {
-        const count = this.isDepth ? sdSelectV2_config.countLeaves(this.options) : this.options.length;
-        return count >= sdSelectV2_config.SEARCH_THRESHOLD;
-    }
-    get filteredOptions() {
-        if (!this.searchKeyword)
-            return this.options;
-        if (this.isDepth)
-            return sdSelectV2_config.filterTree(this.options, this.searchKeyword);
-        const keyword = this.searchKeyword.toLowerCase();
-        return this.options.filter(o => o.label.toLowerCase().includes(keyword));
-    }
-    get isEmpty() {
-        if (this.isDepth)
-            return sdSelectV2_config.countLeaves(this.filteredOptions) === 0 && this.filteredOptions.length === 0;
-        return this.filteredOptions.length === 0;
-    }
-    getSelectedValues() {
-        if (!this.value || !Array.isArray(this.value))
-            return new Set();
-        if (this.emitValue) {
-            return new Set(this.value);
-        }
-        return new Set(this.value.map(s => s.value));
-    }
-    isOptionSelected(option) {
-        if (this.isMulti) {
-            return this.getSelectedValues().has(option.value);
-        }
-        if (this.emitValue) {
-            return this.value === option.value;
-        }
-        if (this.value != null && typeof this.value === 'object' && !Array.isArray(this.value)) {
-            return this.value.value === option.value;
-        }
-        return this.value === option.value;
-    }
-    getGroupSelectionState(option) {
-        if (!this.isMulti || !option.children)
-            return false;
-        const selectedValues = this.getSelectedValues();
-        if (selectedValues.size === 0)
-            return false;
-        const leaves = this.collectVisibleLeaves(option);
-        if (leaves.length === 0)
-            return false;
-        const selectedCount = leaves.filter(l => selectedValues.has(l.value)).length;
-        if (selectedCount === 0)
-            return false;
-        if (selectedCount === leaves.length)
-            return true;
-        return null;
-    }
-    getCountInfo(option) {
-        if (!this.isMulti || !option.children)
-            return undefined;
-        const selectedValues = this.getSelectedValues();
-        const leaves = this.collectVisibleLeaves(option);
-        const selectedCount = leaves.filter(l => selectedValues.has(l.value)).length;
-        return { selected: selectedCount, total: leaves.length };
-    }
-    findOriginalOption(value, options) {
-        for (const opt of options) {
-            if (opt.value === value)
-                return opt;
-            if (opt.children) {
-                const found = this.findOriginalOption(value, opt.children);
-                if (found)
-                    return found;
-            }
-        }
-        return undefined;
-    }
-    collectLeaves(option) {
-        if (!option.children)
-            return [option];
-        return option.children.flatMap(child => this.collectLeaves(child));
-    }
-    /**
-     * Returns the leaves currently visible to the user for the given (possibly
-     * filtered) option. When a group's own label matched the search keyword its
-     * `children` is emptied by `filterTree`; in that case we fall back to the
-     * full original subtree because the user has no way to deselect descendants
-     * individually.
-     */
-    collectVisibleLeaves(option) {
-        if (!option.children)
-            return [option];
-        if (option.children.length === 0) {
-            const original = this.findOriginalOption(option.value, this.options);
-            return original ? this.collectLeaves(original) : [];
-        }
-        return option.children.flatMap(child => this.collectVisibleLeaves(child));
-    }
-    get navigableOptions() {
-        const items = [];
-        const walk = (opts) => {
-            for (const opt of opts) {
-                const isGroup = !!opt.children;
-                const isSelectable = !isGroup || this.isMulti;
-                if (isSelectable && !opt.disabled)
-                    items.push(opt);
-                if (isGroup && opt.children && opt.children.length > 0)
-                    walk(opt.children);
-            }
-        };
-        walk(this.filteredOptions);
-        return items;
-    }
-    isOptionFocused(option) {
-        if (this.focusedIndex < 0)
-            return false;
-        const focused = this.navigableOptions[this.focusedIndex];
-        // filterTree 가 매 호출마다 옵션 객체를 새로 복제하기 때문에 참조 비교
-        // (=== / indexOf) 는 검색이 적용된 동안 항상 실패한다. 고유 식별자인
-        // value 로 비교해야 한다.
-        return !!focused && focused.value === option.value;
-    }
-    resetFocusOnFilter() {
-        // 필터가 바뀌면 이전 인덱스가 가리키던 항목이 사라질 수 있으므로
-        // 새 결과의 첫 항목으로 옮긴다. 결과가 비면 -1.
-        const items = this.navigableOptions;
-        this.focusedIndex = items.length > 0 ? 0 : -1;
-        // 키보드 네비게이션 직후 마우스가 한 번도 안 움직인 채로 사용자가
-        // 검색을 시작했다면 hover suppression 이 켜진 상태로 남아있을 수 있다.
-        // 검색이라는 명백한 사용자 의도 전환 시점에 강제로 해제한다.
-        if (this.suppressHover) {
-            document.removeEventListener('mousemove', this.releaseHoverSuppress, true);
-            this.suppressHover = false;
-        }
-    }
-    handleSearchFilter = (e) => {
-        this.searchKeyword = e.detail;
-    };
-    handleScroll = (e) => {
-        this.isScrolled = e.target.scrollTop > 0;
-    };
-    emitOptionSelect(option) {
-        this.optionSelect.emit({
-            option,
-            leaves: this.collectVisibleLeaves(option),
-        });
-    }
-    handleOptionClick = (e) => {
-        e.stopPropagation();
-        this.emitOptionSelect(e.detail);
-    };
-    handleOptionHover = (option) => {
-        if (this.suppressHover)
-            return;
-        const idx = this.navigableOptions.findIndex(o => o.value === option.value);
-        if (idx >= 0)
-            this.focusedIndex = idx;
-    };
-    releaseHoverSuppress = () => {
-        this.suppressHover = false;
-        document.removeEventListener('mousemove', this.releaseHoverSuppress, true);
-    };
-    handleKeyDown = (e) => {
-        const items = this.navigableOptions;
-        if (e.key === 'ArrowDown') {
-            if (items.length === 0)
-                return;
-            e.preventDefault();
-            e.stopPropagation();
-            this.focusedIndex = this.focusedIndex < 0 ? 0 : (this.focusedIndex + 1) % items.length;
-            this.beginHoverSuppression();
-        }
-        else if (e.key === 'ArrowUp') {
-            if (items.length === 0)
-                return;
-            e.preventDefault();
-            e.stopPropagation();
-            this.focusedIndex = this.focusedIndex <= 0 ? items.length - 1 : this.focusedIndex - 1;
-            this.beginHoverSuppression();
-        }
-        else if (e.key === 'Enter') {
-            if (this.focusedIndex < 0 || this.focusedIndex >= items.length)
-                return;
-            e.preventDefault();
-            e.stopPropagation();
-            this.emitOptionSelect(items[this.focusedIndex]);
-        }
-    };
-    /**
-     * 키보드로 인덱스를 옮기면 자동 스크롤이 일어나는데, 정지한 마우스 커서
-     * 아래로 다른 항목이 미끄러져 들어오면서 mouseenter 가 발화해 인덱스를
-     * 다시 덮어쓰는 문제를 막는다. 실제로 마우스가 한 번이라도 움직이기 전까지
-     * hover 갱신을 무시한다.
-     */
-    beginHoverSuppression() {
-        if (this.suppressHover)
-            return;
-        this.suppressHover = true;
-        document.addEventListener('mousemove', this.releaseHoverSuppress, true);
-    }
-    /**
-     * 리스트 컨테이너 내부에서만 스크롤한다. `scrollIntoView` 는 조상 스크롤
-     * 컨테이너(=문서 자체)까지 함께 스크롤시키므로 사용하지 않는다.
-     */
-    scrollFocusedIntoView() {
-        const list = this.listEl;
-        const focusedEl = list?.querySelector('.sd-select-v2-list-item--focused');
-        if (!list || !focusedEl)
-            return;
-        const listRect = list.getBoundingClientRect();
-        const itemRect = focusedEl.getBoundingClientRect();
-        if (itemRect.top < listRect.top) {
-            list.scrollTop += itemRect.top - listRect.top;
-        }
-        else if (itemRect.bottom > listRect.bottom) {
-            list.scrollTop += itemRect.bottom - listRect.bottom;
-        }
-    }
-    /**
-     * sd-portal 이 슬롯 노드를 body 로 이동시키면서 disconnect → connect 가
-     * 발생하므로, 키보드 리스너는 한 번만 실행되는 componentDidLoad 가 아니라
-     * connectedCallback / disconnectedCallback 에 묶어 매번 재부착한다.
-     * capture phase 로 잡아 포커스가 검색 input 에 있어도 ↑/↓/Enter 가
-     * input 의 기본 동작(커서 이동)·페이지 스크롤보다 먼저 처리되도록 한다.
-     */
-    connectedCallback() {
-        if (!this.keydownAttached) {
-            document.addEventListener('keydown', this.handleKeyDown, true);
-            this.keydownAttached = true;
-        }
-    }
-    disconnectedCallback() {
-        if (this.keydownAttached) {
-            document.removeEventListener('keydown', this.handleKeyDown, true);
-            this.keydownAttached = false;
-        }
-        if (this.suppressHover) {
-            document.removeEventListener('mousemove', this.releaseHoverSuppress, true);
-            this.suppressHover = false;
-        }
-    }
-    componentDidRender() {
-        if (this.focusedIndex !== this.lastScrolledIndex) {
-            this.lastScrolledIndex = this.focusedIndex;
-            if (this.focusedIndex >= 0)
-                this.scrollFocusedIntoView();
-        }
-    }
-    renderOptions(options, depth = 1) {
-        return options.map(option => {
-            const isGroup = !!option.children;
-            return [
-                index.h("sd-select-v2-list-item", { option: option, depth: depth, isSelected: isGroup ? this.getGroupSelectionState(option) : this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, countInfo: this.getCountInfo(option), onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) }),
-                isGroup && option.children ? this.renderOptions(option.children, depth + 1) : null,
-            ];
-        });
-    }
-    render() {
-        const cssVars = {
-            '--listbox-trigger-width': this.triggerWidth,
-            '--listbox-max-width': this.maxWidth,
-            '--listbox-max-height': this.maxHeight,
-            '--listbox-radius': `${sdSelectV2_config.LIST_BOX_LAYOUT.radius}px`,
-        };
-        return (index.h("div", { key: '92289973077789bd6f9657bb5b2e5567845bdc19', class: "sd-select-v2-listbox", style: cssVars }, this.showSearch && (index.h("sd-select-v2-list-item-search", { key: 'a26b9ba36f42165ab80347ea4f0194b98746a9a6', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), index.h("div", { key: 'd563a179278ec5c6eaa0b4c71d18cc5055bbebb5', class: "sd-select-v2-listbox__list", onScroll: this.handleScroll, ref: el => {
-                this.listEl = el;
-            } }, this.isEmpty ? (index.h("div", { class: "sd-select-v2-listbox__empty" }, sdSelectV2_config.EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (index.h("sd-select-v2-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) })))))));
-    }
-    static get watchers() { return {
-        "searchKeyword": [{
-                "resetFocusOnFilter": 0
-            }]
-    }; }
-};
-SdSelectV2Listbox.style = sdSelectV2ListboxCss();
-
-const sdSelectV2TriggerCss = () => `sd-select-v2-trigger{display:block;width:100%;height:100%}sd-select-v2-trigger .sd-select-v2-trigger{display:flex;width:100%;height:100%;cursor:pointer;user-select:none;overflow:hidden;border-radius:3px}sd-select-v2-trigger .sd-select-v2-trigger--disabled{cursor:not-allowed}sd-select-v2-trigger .sd-select-v2-trigger__content{display:flex;align-items:center;gap:var(--trigger-gap);flex:1;padding:0 var(--trigger-padding-x);min-width:0}sd-select-v2-trigger .sd-select-v2-trigger__text{flex:1;font-size:var(--trigger-font-size);line-height:var(--trigger-line-height);font-weight:var(--trigger-font-weight);color:var(--trigger-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}sd-select-v2-trigger .sd-select-v2-trigger__icon{flex-shrink:0;transition:transform 0.2s ease}sd-select-v2-trigger .sd-select-v2-trigger__icon--open{transform:rotate(180deg)}`;
-
-const SdSelectV2Trigger = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.triggerClick = index.createEvent(this, "sdTriggerClick", 7);
-    }
-    displayText = '';
-    placeholder = '선택';
-    disabled = false;
-    isOpen = false;
-    triggerClick;
-    handleClick = () => {
-        if (this.disabled)
-            return;
-        this.triggerClick.emit();
-    };
-    render() {
-        const hasValue = !!this.displayText;
-        const cssVars = {
-            '--trigger-padding-x': `${sdSelectV2_config.SELECT_LAYOUT.paddingX}px`,
-            '--trigger-gap': `${sdSelectV2_config.SELECT_LAYOUT.gap}px`,
-            '--trigger-font-size': `${sdSelectV2_config.SELECT_TYPOGRAPHY.fontSize}px`,
-            '--trigger-line-height': `${sdSelectV2_config.SELECT_TYPOGRAPHY.lineHeight}px`,
-            '--trigger-font-weight': sdSelectV2_config.SELECT_TYPOGRAPHY.fontWeight,
-            '--trigger-color': this.disabled
-                ? sdSelectV2_config.SELECT_COLORS.text.disabled
-                : hasValue
-                    ? sdSelectV2_config.SELECT_COLORS.text.default
-                    : sdSelectV2_config.SELECT_COLORS.icon.default,
-            '--trigger-icon-color': this.disabled
-                ? sdSelectV2_config.SELECT_COLORS.icon.disabled
-                : sdSelectV2_config.SELECT_COLORS.icon.default,
-        };
-        return (index.h("div", { key: '02e382b2a1867fa8816c11e2d07bb042a15027fb', class: {
-                'sd-select-v2-trigger': true,
-                'sd-select-v2-trigger--open': this.isOpen,
-                'sd-select-v2-trigger--disabled': this.disabled,
-            }, style: cssVars, onClick: this.handleClick }, index.h("div", { key: 'e08360c05f765ccc0c9dbefe8e402a66edd1c242', class: "sd-select-v2-trigger__content" }, index.h("span", { key: 'dc00441e24e17b9bb28a36892ff3564d4bb40a42', class: "sd-select-v2-trigger__text" }, hasValue ? this.displayText : this.placeholder), index.h("sd-icon", { key: '3d78221139a6df71aa349277ed0f8d73fbba23ba', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
-                'sd-select-v2-trigger__icon': true,
-                'sd-select-v2-trigger__icon--open': this.isOpen,
-            } }))));
-    }
-};
-SdSelectV2Trigger.style = sdSelectV2TriggerCss();
-
-exports.sd_select_v2_listbox = SdSelectV2Listbox;
-exports.sd_select_v2_trigger = SdSelectV2Trigger;

package/dist/cjs/sd-select-v2.config-7xBJQhvx.js

@@ -1,171 +0,0 @@
-'use strict';
-
-const select = {
-	paddingX: "12",
-	icon: {
-		"default": "#888888",
-		disabled: "#BBBBBB"
-	},
-	gap: "8",
-	typography: {
-		fontWeight: "400",
-		fontSize: "12",
-		lineHeight: "20"},
-	text: {
-		"default": "#222222",
-		disabled: "#888888"
-	}};
-var selectTokens = {
-	select: select
-};
-
-const listItem = {
-	paddingY: "4",
-	paddingRight: "12",
-	gap: "8",
-	paddingLeft: {
-		depth1: "12",
-		depth2: "20",
-		depth3: "28"
-	},
-	typography: {
-		fontWeight: "400",
-		fontSize: "12",
-		lineHeight: "20"},
-	bg: {
-		"default": "#FFFFFF",
-		hover: "#0075FF"
-	},
-	content: {
-		"default": "#222222",
-		hover: "#FFFFFF",
-		disabled: "#888888"
-	},
-	depth1: {
-		bg: {
-			"default": "#EFF6FF"},
-		border: {
-			color: "#E1E1E1",
-			width: "1"
-		}},
-	depth2: {
-		middle: {
-			bg: "#F6F6F6"}
-	}};
-var listItemTokens = {
-	listItem: listItem
-};
-
-const listBox = {
-	radius: "4"};
-var listBoxTokens = {
-	listBox: listBox
-};
-
-// ── Select Trigger Tokens ──
-const SELECT_LAYOUT = {
-    paddingX: selectTokens.select.paddingX,
-    gap: selectTokens.select.gap};
-const SELECT_TYPOGRAPHY = {
-    fontSize: selectTokens.select.typography.fontSize,
-    lineHeight: selectTokens.select.typography.lineHeight,
-    fontWeight: selectTokens.select.typography.fontWeight,
-};
-const SELECT_COLORS = {
-    icon: {
-        default: selectTokens.select.icon.default,
-        disabled: selectTokens.select.icon.disabled,
-    },
-    text: {
-        default: selectTokens.select.text.default,
-        disabled: selectTokens.select.text.disabled,
-    },
-};
-// ── ListItem Tokens ──
-const LIST_ITEM_LAYOUT = {
-    paddingY: listItemTokens.listItem.paddingY,
-    paddingRight: listItemTokens.listItem.paddingRight,
-    paddingLeft: {
-        depth1: listItemTokens.listItem.paddingLeft.depth1,
-        depth2: listItemTokens.listItem.paddingLeft.depth2,
-        depth3: listItemTokens.listItem.paddingLeft.depth3,
-    },
-    gap: listItemTokens.listItem.gap,
-};
-const LIST_ITEM_TYPOGRAPHY = {
-    fontSize: listItemTokens.listItem.typography.fontSize,
-    lineHeight: listItemTokens.listItem.typography.lineHeight,
-    fontWeight: listItemTokens.listItem.typography.fontWeight,
-};
-const LIST_ITEM_COLORS = {
-    bg: {
-        default: listItemTokens.listItem.bg.default,
-        hover: listItemTokens.listItem.bg.hover,
-    },
-    content: {
-        default: listItemTokens.listItem.content.default,
-        hover: listItemTokens.listItem.content.hover,
-        disabled: listItemTokens.listItem.content.disabled,
-    },
-    depth1: {
-        bg: listItemTokens.listItem.depth1.bg.default,
-        border: listItemTokens.listItem.depth1.border.color,
-        borderWidth: listItemTokens.listItem.depth1.border.width,
-    },
-    depth2: {
-        bg: listItemTokens.listItem.depth2.middle.bg,
-    }};
-// ── ListBox Tokens ──
-const LIST_BOX_LAYOUT = {
-    radius: listBoxTokens.listBox.radius,
-};
-// ── Constants ──
-const SEARCH_THRESHOLD = 11;
-const SEARCH_DEBOUNCE_MS = 1000;
-const EMPTY_MESSAGE = '표시할 항목이 없습니다.';
-// ── Utilities ──
-function countLeaves(options) {
-    return options.reduce((sum, option) => {
-        if (option.children) {
-            return sum + countLeaves(option.children);
-        }
-        return sum + 1;
-    }, 0);
-}
-function filterTree(options, keyword) {
-    const lowerKeyword = keyword.toLowerCase();
-    return options.reduce((acc, option) => {
-        const selfMatch = option.label.toLowerCase().includes(lowerKeyword);
-        if (option.children) {
-            // 그룹: 자식은 항상 추가로 필터링한다.
-            // - 자식 중 일치하는 게 있으면 그 자식들만 노출
-            // - 자식 매칭이 없더라도 그룹명이 매칭되면 그룹 헤더는 그대로 노출
-            //   (이때 children 은 빈 배열로 두고, 선택 동작은 collectVisibleLeaves
-            //    의 fallback 이 원본 트리를 사용해 처리한다)
-            const filteredChildren = filterTree(option.children, keyword);
-            if (filteredChildren.length > 0) {
-                acc.push({ ...option, children: filteredChildren });
-            }
-            else if (selfMatch) {
-                acc.push({ ...option, children: [] });
-            }
-        }
-        else if (selfMatch) {
-            acc.push({ ...option });
-        }
-        return acc;
-    }, []);
-}
-
-exports.EMPTY_MESSAGE = EMPTY_MESSAGE;
-exports.LIST_BOX_LAYOUT = LIST_BOX_LAYOUT;
-exports.LIST_ITEM_COLORS = LIST_ITEM_COLORS;
-exports.LIST_ITEM_LAYOUT = LIST_ITEM_LAYOUT;
-exports.LIST_ITEM_TYPOGRAPHY = LIST_ITEM_TYPOGRAPHY;
-exports.SEARCH_DEBOUNCE_MS = SEARCH_DEBOUNCE_MS;
-exports.SEARCH_THRESHOLD = SEARCH_THRESHOLD;
-exports.SELECT_COLORS = SELECT_COLORS;
-exports.SELECT_LAYOUT = SELECT_LAYOUT;
-exports.SELECT_TYPOGRAPHY = SELECT_TYPOGRAPHY;
-exports.countLeaves = countLeaves;
-exports.filterTree = filterTree;

package/dist/cjs/sd-toggle-button.cjs.entry.js

@@ -1,49 +0,0 @@
-'use strict';
-
-var index = require('./index-BQt-JC6r.js');
-
-const sdToggleButtonCss = () => `sd-toggle-button{display:inline-block;line-height:0}.sd-toggle-button{display:inline-flex;align-items:center;justify-content:center;height:28px;padding:4px 12px;gap:6px;border-radius:14px;border:1px solid #888888;background-color:#FFFFFF;color:#737373;font-size:12px;line-height:20px;font-weight:400;cursor:pointer;transition:border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;white-space:nowrap;user-select:none;box-sizing:border-box}.sd-toggle-button--active{border-color:#0075FF;color:#0075FF}.sd-toggle-button--disabled{background-color:#EEEEEE;border-color:#CCCCCC;color:#888888;cursor:not-allowed}.sd-toggle-button--disabled.sd-toggle-button--active{background-color:#EEEEEE;border-color:#CCCCCC;color:#888888}.sd-toggle-button:hover:not(.sd-toggle-button--disabled):not(.sd-toggle-button--active){border-color:#737373}.sd-toggle-button:hover:not(.sd-toggle-button--disabled).sd-toggle-button--active{border-color:#005CC9;color:#005CC9}`;
-
-const SdToggleButton = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.change = index.createEvent(this, "sdUpdate", 7);
-    }
-    value = false;
-    label = '';
-    disabled = false;
-    isActive = false;
-    change;
-    componentWillLoad() {
-        this.updateActiveState(this.value);
-    }
-    componentWillRender() {
-        this.updateActiveState(this.value);
-    }
-    updateActiveState(value) {
-        this.isActive = value;
-    }
-    get buttonClasses() {
-        const classes = ['sd-toggle-button'];
-        if (this.isActive) {
-            classes.push('sd-toggle-button--active');
-        }
-        if (this.disabled) {
-            classes.push('sd-toggle-button--disabled');
-        }
-        return classes.join(' ');
-    }
-    handleChange = () => {
-        if (this.disabled)
-            return;
-        const newValue = !this.value;
-        this.value = newValue;
-        this.change.emit(newValue);
-    };
-    render() {
-        return (index.h("label", { key: '0e933c52b633eec101beec8aa6ec888dc6bc3448', class: this.buttonClasses, "aria-label": this.label || 'toggle button' }, this.label, index.h("input", { key: '833e7c26895e310cb6322b7231345f76f0a409dc', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
-    }
-};
-SdToggleButton.style = sdToggleButtonCss();
-
-exports.sd_toggle_button = SdToggleButton;

package/dist/collection/components/sd-loading-spinner/sd-loading-spinner.css

@@ -1,44 +0,0 @@
-sd-loading-spinner {
-  display: inline-flex;
-  width: fit-content;
-  height: fit-content;
-  align-items: center;
-}
-sd-loading-spinner .sd-loading-spinner {
-  animation: sd-loading-spin 2s linear infinite;
-  transform-origin: center center;
-}
-sd-loading-spinner .sd-loading-spinner .path {
-  animation: sd-loading-spin-path 1.5s ease-in-out infinite;
-}
-@keyframes sd-loading-spin {
-  0% {
-    transform: rotate3d(0, 0, 1, 0deg);
-  }
-  25% {
-    transform: rotate3d(0, 0, 1, 90deg);
-  }
-  50% {
-    transform: rotate3d(0, 0, 1, 180deg);
-  }
-  75% {
-    transform: rotate3d(0, 0, 1, 270deg);
-  }
-  100% {
-    transform: rotate3d(0, 0, 1, 359deg);
-  }
-}
-@keyframes sd-loading-spin-path {
-  0% {
-    stroke-dasharray: 1, 200;
-    stroke-dashoffset: 0;
-  }
-  50% {
-    stroke-dasharray: 89, 200;
-    stroke-dashoffset: -35px;
-  }
-  100% {
-    stroke-dasharray: 89, 200;
-    stroke-dashoffset: -124px;
-  }
-}

package/dist/collection/components/sd-loading-spinner/sd-loading-spinner.js

@@ -1,46 +0,0 @@
-import { Fragment, h } from "@stencil/core";
-import { resolveColor } from "../../utils/color";
-export class SdLoadingSpinner {
-    color = '#0075ff';
-    get resolvedColor() {
-        return resolveColor(this.color);
-    }
-    render() {
-        return (h(Fragment, { key: 'a86933f554042c2d4b18836d37bb762d17080202' }, h("svg", { key: 'd0f301366f4b28855bf609dc048fdc7d76fd0433', class: "sd-loading-spinner", width: "72px", height: "72px", viewBox: "25 25 50 50", style: { color: this.resolvedColor } }, h("circle", { key: '64068446f4a6ec1892a00ca92da7a3f1f566891c', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
-    }
-    static get is() { return "sd-loading-spinner"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["sd-loading-spinner.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["sd-loading-spinner.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "color": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "color",
-                "defaultValue": "'#0075ff'"
-            }
-        };
-    }
-}