@sellmate/design-system 1.0.61 → 1.0.63

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

@@ -1,350 +0,0 @@
-import { r as registerInstance, c as createEvent, h } from './index-DsU722JF.js';
-import { c as countLeaves, S as SEARCH_THRESHOLD, f as filterTree, E as EMPTY_MESSAGE, L as LIST_BOX_LAYOUT, a as SELECT_COLORS, b as SELECT_TYPOGRAPHY, d as SELECT_LAYOUT } from './sd-select-v2.config-C3eQSZx-.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) {
-        registerInstance(this, hostRef);
-        this.optionSelect = 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 ? countLeaves(this.options) : this.options.length;
-        return count >= SEARCH_THRESHOLD;
-    }
-    get filteredOptions() {
-        if (!this.searchKeyword)
-            return this.options;
-        if (this.isDepth)
-            return 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 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 [
-                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': `${LIST_BOX_LAYOUT.radius}px`,
-        };
-        return (h("div", { key: '92289973077789bd6f9657bb5b2e5567845bdc19', class: "sd-select-v2-listbox", style: cssVars }, this.showSearch && (h("sd-select-v2-list-item-search", { key: 'a26b9ba36f42165ab80347ea4f0194b98746a9a6', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), h("div", { key: 'd563a179278ec5c6eaa0b4c71d18cc5055bbebb5', class: "sd-select-v2-listbox__list", onScroll: this.handleScroll, ref: el => {
-                this.listEl = el;
-            } }, this.isEmpty ? (h("div", { class: "sd-select-v2-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (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) {
-        registerInstance(this, hostRef);
-        this.triggerClick = 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': `${SELECT_LAYOUT.paddingX}px`,
-            '--trigger-gap': `${SELECT_LAYOUT.gap}px`,
-            '--trigger-font-size': `${SELECT_TYPOGRAPHY.fontSize}px`,
-            '--trigger-line-height': `${SELECT_TYPOGRAPHY.lineHeight}px`,
-            '--trigger-font-weight': SELECT_TYPOGRAPHY.fontWeight,
-            '--trigger-color': this.disabled
-                ? SELECT_COLORS.text.disabled
-                : hasValue
-                    ? SELECT_COLORS.text.default
-                    : SELECT_COLORS.icon.default,
-            '--trigger-icon-color': this.disabled
-                ? SELECT_COLORS.icon.disabled
-                : SELECT_COLORS.icon.default,
-        };
-        return (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 }, h("div", { key: 'e08360c05f765ccc0c9dbefe8e402a66edd1c242', class: "sd-select-v2-trigger__content" }, h("span", { key: 'dc00441e24e17b9bb28a36892ff3564d4bb40a42', class: "sd-select-v2-trigger__text" }, hasValue ? this.displayText : this.placeholder), 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();
-
-export { SdSelectV2Listbox as sd_select_v2_listbox, SdSelectV2Trigger as sd_select_v2_trigger };

package/dist/esm/sd-select-v2.config-C3eQSZx-.js

@@ -1,158 +0,0 @@
-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;
-    }, []);
-}
-
-export { EMPTY_MESSAGE as E, LIST_BOX_LAYOUT as L, SEARCH_THRESHOLD as S, SELECT_COLORS as a, SELECT_TYPOGRAPHY as b, countLeaves as c, SELECT_LAYOUT as d, LIST_ITEM_LAYOUT as e, filterTree as f, LIST_ITEM_COLORS as g, LIST_ITEM_TYPOGRAPHY as h, SEARCH_DEBOUNCE_MS as i };

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

@@ -1,47 +0,0 @@
-import { r as registerInstance, c as createEvent, h } from './index-DsU722JF.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) {
-        registerInstance(this, hostRef);
-        this.change = 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 (h("label", { key: '0e933c52b633eec101beec8aa6ec888dc6bc3448', class: this.buttonClasses, "aria-label": this.label || 'toggle button' }, this.label, h("input", { key: '833e7c26895e310cb6322b7231345f76f0a409dc', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
-    }
-};
-SdToggleButton.style = sdToggleButtonCss();
-
-export { SdToggleButton as sd_toggle_button };

package/dist/types/components/sd-loading-spinner/sd-loading-spinner.d.ts

@@ -1,5 +0,0 @@
-export declare class SdLoadingSpinner {
-    color?: string;
-    private get resolvedColor();
-    render(): any;
-}