@sellmate/design-system 1.0.62 → 1.0.63

package/dist/collection/components/sd-select-multiple/sd-select-multiple.js

@@ -150,7 +150,7 @@ export class SdSelectMultiple extends BaseDropdownEvent {
         this.handleOptionSelection(option);
     };
     render() {
-        return (h("sd-field", { key: '1e3954ff06d55a6feb8ff70cbba35e11a1b4863e', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, h("div", { key: '192dd606eaa8a7642dfaf28f342701694cbbc237', class: {
+        return (h("sd-field", { key: 'e372aab1dafc730f22c6d58cbd39d651e65a66dc', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, h("div", { key: 'a73dc6abd9a05f888c39d2176f72275a329ccae0', class: {
                 'sd-select-multiple': true,
                 'sd-select-multiple--open': this.isOpen,
                 'sd-select-multiple--disabled': this.disabled,

package/dist/collection/components/sd-select-multiple-group/sd-select-multiple-group.css

@@ -26,6 +26,10 @@ sd-select-multiple-group .sd-select-multiple-group .sd-select-multiple-group__tr
   display: flex;
   width: 100%;
   align-items: center;
+  cursor: pointer;
+}
+.sd-field--disabled sd-select-multiple-group .sd-select-multiple-group .sd-select-multiple-group__trigger {
+  cursor: not-allowed;
 }
 sd-select-multiple-group .sd-select-multiple-group .sd-select-multiple-group__trigger .sd-select-multiple-group__value {
   flex: 1;

package/dist/collection/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.js

@@ -39,7 +39,7 @@ export class SdSelectOptionGroup {
         }
     };
     render() {
-        return (h("div", { key: 'd39aa4744aa498f8b2f7c77502f2c4f56e670296', class: {
+        return (h("div", { key: 'c1dd7d0232fff281261792ecb2137a1f09bc364d', class: {
                 'sd-select__option-group': true,
                 'sd-select__option-group--selected': !!this.isSelected,
                 'sd-select__option-group--disabled': !!this.option.disabled,
@@ -48,10 +48,10 @@ export class SdSelectOptionGroup {
                 'sd-select__option-group--group': this.option.type === 'group',
                 'sd-select__option-group--subgroup': this.option.type === 'subgroup',
                 'sd-select__option-group--item': this.option.type === 'item',
-            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, h("div", { key: 'c856a933ddfa7084741cbb65d2075f3b59404ae7', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (h("sd-checkbox", { key: '455dde9674811174fb4b939ca37b5128085cd65d', value: this.isSelected, disabled: this.option.disabled, onClick: e => {
+            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, h("div", { key: 'a8ce6f2c13ea558413e61426dfbaa75e616f5687', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (h("sd-checkbox", { key: '3c53ea6005aa1288a4eae148bd9d6ed4573f0404', value: this.isSelected, disabled: this.option.disabled, onClick: e => {
                 e.preventDefault();
                 this.handleClick(this.option, this.isSelected, e);
-            } })), h("span", { key: '0255e9f2da18d3da01843ec61c9bc75150efcc4a', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (h("span", { key: '73c0a138d3e38f4fc8c8e94230aea82c89a7cb84', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
+            } })), h("span", { key: 'c28aea2bf78120a42d6884c322cc2cf77713a6cb', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (h("span", { key: '6a51641a8c9da9957f1428a721de9ce2a1a2a86b', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
     }
     static get is() { return "sd-select-option-group"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-select-v2/sd-select-v2-list-item/sd-select-v2-list-item.js

@@ -64,7 +64,7 @@ export class SdSelectV2ListItem {
         if (isDepth1Group) {
             cssVars['--list-item-border-top'] = `${LIST_ITEM_COLORS.depth1.borderWidth}px solid ${LIST_ITEM_COLORS.depth1.border}`;
         }
-        return (h("div", { key: '8cd297b8d4ff1a7ef5c64bcaefef9cc54b3de357', class: {
+        return (h("div", { key: '2c6431785cccc79e4ce7eb0252877f18e799bb03', class: {
                 'sd-select-v2-list-item': true,
                 'sd-select-v2-list-item--group': isGroup,
                 'sd-select-v2-list-item--depth1-group': isDepth1Group,
@@ -74,7 +74,7 @@ export class SdSelectV2ListItem {
                 'sd-select-v2-list-item--focused': this.isFocused,
                 'sd-select-v2-list-item--selectable': this.isSelectable && !this.option.disabled,
                 'sd-select-v2-list-item--disabled': !!this.option.disabled,
-            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (h("sd-checkbox", { key: '11597153f05d17fc172920a65d26d74b4b7aa239', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, class: "sd-select-v2-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), h("span", { key: '1dc78dcbffc3f3826fac7a9a3b8aa300c3754de6', class: "sd-select-v2-list-item__label" }, this.option.label), this.countInfo && (h("span", { key: '5b96136bc54b241359e60849ebd1e792eb749c0d', class: "sd-select-v2-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
+            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (h("sd-checkbox", { key: '88751dff8393de63ff2762bf6a52f685b478cbe2', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, inverse: this.isFocused && this.isSelected !== false, class: "sd-select-v2-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), h("span", { key: '09d711dbd6181ac2da194813cd8d298061428c8e', class: "sd-select-v2-list-item__label" }, this.option.label), this.countInfo && (h("span", { key: '8d0e113be506cfefa1994ee8a43efa7b6f09c707', class: "sd-select-v2-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
     }
     static get is() { return "sd-select-v2-list-item"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-select-v2/sd-select-v2-list-item-search/sd-select-v2-list-item-search.css

@@ -52,4 +52,8 @@ sd-select-v2-list-item-search .sd-select-v2-list-item-search__clear {
 }
 sd-select-v2-list-item-search .sd-select-v2-list-item-search__clear:hover {
   background: #F0F0F0;
+}
+sd-select-v2-list-item-search .sd-select-v2-list-item-search__clear--hidden {
+  visibility: hidden;
+  pointer-events: none;
 }

package/dist/collection/components/sd-select-v2/sd-select-v2-list-item-search/sd-select-v2-list-item-search.js

@@ -41,12 +41,15 @@ export class SdSelectV2ListItemSearch {
             clearTimeout(this.debounceTimer);
     }
     render() {
-        return (h("div", { key: '8ccebea10b658edba2c417893f2a939a7361ef1b', class: {
+        return (h("div", { key: '10f081acd51cad3b6632b2afcd5017c02fe2ed57', class: {
                 'sd-select-v2-list-item-search': true,
                 'sd-select-v2-list-item-search--scrolled': this.isScrolled,
-            } }, h("div", { key: '4007afb556220e746c2379f643afb38445345853', class: "sd-select-v2-list-item-search__inner" }, h("sd-icon", { key: '1afc1ef8aa6f3d26ee1001212ac9ea7d0bf3d1e4', name: "search", size: 16, color: "grey_70", class: "sd-select-v2-list-item-search__icon" }), h("input", { key: 'a32ddcc18a401217f1a624e544c56bd499b0f47e', ref: el => {
+            } }, h("div", { key: '585f29e2826841874e88ce01fa08306cffb39033', class: "sd-select-v2-list-item-search__inner" }, h("sd-icon", { key: 'fe3d85e03b2e7302102babd3736e7aea0b08fcee', name: "search", size: 16, color: "grey_70", class: "sd-select-v2-list-item-search__icon" }), h("input", { key: '62913d0721cf6171bc7dc52fb6548410fa87527e', ref: el => {
                 this.inputEl = el;
-            }, type: "text", class: "sd-select-v2-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), this.searchText && (h("button", { key: '150d5aca71d6ac6277917177ed4e4e157e4ba33f', type: "button", class: "sd-select-v2-list-item-search__clear", onClick: this.handleClear }, h("sd-icon", { key: 'f0397c023e5dd5972eb6dfd20f9fb1ac1027fb2f', name: "close", size: 12, color: "#888888" }))))));
+            }, type: "text", class: "sd-select-v2-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), h("button", { key: '986ea74f6b02e65f138665f2afd19fa10f7f430a', type: "button", class: {
+                'sd-select-v2-list-item-search__clear': true,
+                'sd-select-v2-list-item-search__clear--hidden': !this.searchText,
+            }, onClick: this.handleClear, tabindex: this.searchText ? 0 : -1, "aria-hidden": this.searchText ? 'false' : 'true' }, h("sd-icon", { key: '344bbbb25eab6a6a3f4cce5cde8d9a10e9b13f25', name: "close", size: 12, color: "#888888" })))));
     }
     static get is() { return "sd-select-v2-list-item-search"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-select-v2/sd-select-v2-listbox/sd-select-v2-listbox.css

@@ -4,10 +4,9 @@ sd-select-v2-listbox {
 sd-select-v2-listbox .sd-select-v2-listbox {
   display: flex;
   flex-direction: column;
-  min-width: var(--listbox-trigger-width);
+  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);
@@ -18,7 +17,7 @@ sd-select-v2-listbox .sd-select-v2-listbox__list {
   flex: 1;
   min-height: 0;
   overflow-y: auto;
-  padding-bottom: 0;
+  padding-bottom: var(--listbox-padding-bottom);
 }
 sd-select-v2-listbox .sd-select-v2-listbox__empty {
   padding: 12px;

package/dist/collection/components/sd-select-v2/sd-select-v2-listbox/sd-select-v2-listbox.js

@@ -281,8 +281,9 @@ export class SdSelectV2Listbox {
             '--listbox-max-width': this.maxWidth,
             '--listbox-max-height': this.maxHeight,
             '--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
+            '--listbox-padding-bottom': `${LIST_BOX_LAYOUT.paddingBottom}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 => {
+        return (h("div", { key: 'd3f41c72aa6d013efff695f2435e72482f25a28f', class: "sd-select-v2-listbox", style: cssVars }, this.showSearch && (h("sd-select-v2-list-item-search", { key: '6586d230d0eb3466cf30d644b3ebe94482e91847', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), h("div", { key: '9de0cfc6d458f48a3770fa61dfc019411cfd96bb', 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) })))))));
     }

package/dist/collection/components/sd-select-v2/sd-select-v2-trigger/sd-select-v2-trigger.js

@@ -28,11 +28,11 @@ export class SdSelectV2Trigger {
                 ? SELECT_COLORS.icon.disabled
                 : SELECT_COLORS.icon.default,
         };
-        return (h("div", { key: '02e382b2a1867fa8816c11e2d07bb042a15027fb', class: {
+        return (h("div", { key: '906bfdacc9ec8028d61335dd8a6eb9fa887ccd2d', 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: {
+            }, style: cssVars, onClick: this.handleClick }, h("div", { key: '3688fb32fbc996ce423a92007d1208b950f7baba', class: "sd-select-v2-trigger__content" }, h("span", { key: '1c38cf28cb536aa93541e1bfd0b3736ba8b59782', class: "sd-select-v2-trigger__text" }, hasValue ? this.displayText : this.placeholder), h("sd-icon", { key: '9bfc7681e142766eeaa42dd801c8ff88dec61861', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
                 'sd-select-v2-trigger__icon': true,
                 'sd-select-v2-trigger__icon--open': this.isOpen,
             } }))));

package/dist/collection/components/sd-select-v2/sd-select-v2.config.js

@@ -76,6 +76,7 @@ export const LIST_ITEM_COLORS = {
 // ── ListBox Tokens ──
 export const LIST_BOX_LAYOUT = {
     radius: listBoxTokens.listBox.radius,
+    paddingBottom: listBoxTokens.listBox.paddingBottom,
 };
 // ── Constants ──
 export const SEARCH_THRESHOLD = 11;

package/dist/collection/components/sd-select-v2/sd-select-v2.js

@@ -206,13 +206,13 @@ export class SdSelectV2 {
                 this.closeDropdown();
             },
         };
-        return (h("sd-field", { key: '3bce41792a627708e9a947649106fdeaf63bf12f', name: this.fieldName || this.internalName, label: this.label, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
+        return (h("sd-field", { key: 'b2a7f6ff2b4844069703400d68e9e736689d130a', name: this.fieldName || this.internalName, label: this.label, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
                 this.hovered = true;
             }, onMouseLeave: () => {
                 this.hovered = false;
-            } }, h("div", { key: '994150030e4e7d87650de8dc8fd7b44d57c3b62b', class: "sd-select-v2", ref: el => {
+            } }, h("div", { key: 'f832e4df90c6874c56e1f0ec5b109a7a77f3d0d1', class: "sd-select-v2", ref: el => {
                 this.triggerRef = el;
-            } }, h("sd-select-v2-trigger", { key: 'ff1d052c318bdec6d870bcc707fc33e40bc41f9c', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '0a1214c3f2fcc6c34afa2f5168c64edb305048ea', ...portalProps }, h("sd-select-v2-listbox", { key: 'c3888dbe740611633a95ef8b58024bdfa558f15b', name: this.name, options: this.options, value: this.value, emitValue: this.emitValue, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
+            } }, h("sd-select-v2-trigger", { key: '9f2eaff8ca1ece8bec8fe635372e961a42ec0f80', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '2b8c31b66ac81a51dbd7657d5bbeeeaeb3ff0c83', ...portalProps }, h("sd-select-v2-listbox", { key: '8d16190fff39d403c74966e197c09afb55e9b9f8', name: this.name, options: this.options, value: this.value, emitValue: this.emitValue, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
     }
     static get is() { return "sd-select-v2"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-switch/sd-switch.config.js

@@ -0,0 +1,23 @@
+import switchTokens from "../../tokens/generated/component.switch.json";
+export const SWITCH_LAYOUT = {
+    width: Number(switchTokens.switch.width),
+    height: Number(switchTokens.switch.height),
+    paddingXY: Number(switchTokens.switch.paddingXY),
+    radius: Number(switchTokens.switch.radius),
+    knobSize: Number(switchTokens.switch.knob.size),
+    gap: Number(switchTokens.switch.gap),
+};
+export const SWITCH_COLORS = {
+    knobBg: switchTokens.switch.knob.bg,
+    bgOn: switchTokens.switch.bg.on,
+    bgOff: switchTokens.switch.bg.off,
+    bgDisabledOn: switchTokens.switch.bg.disabled.on,
+    bgDisabledOff: switchTokens.switch.bg.disabled.off,
+};
+export const SWITCH_TYPOGRAPHY = {
+    fontFamily: switchTokens.switch.label.typography.fontFamily,
+    fontWeight: switchTokens.switch.label.typography.fontWeight,
+    fontSize: Number(switchTokens.switch.label.typography.fontSize),
+    lineHeight: Number(switchTokens.switch.label.typography.lineHeight),
+    textDecoration: switchTokens.switch.label.typography.textDecoration,
+};

package/dist/collection/components/sd-switch/sd-switch.css

@@ -0,0 +1,54 @@
+sd-switch {
+  display: inline-block;
+  line-height: 0;
+}
+sd-switch .sd-switch {
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sd-switch-gap);
+}
+sd-switch .sd-switch > input {
+  display: none;
+}
+sd-switch .sd-switch__track {
+  position: relative;
+  width: var(--sd-switch-track-width);
+  height: var(--sd-switch-track-height);
+  border-radius: var(--sd-switch-track-radius);
+  background: var(--sd-switch-bg-off);
+  transition: background-color 0.2s ease;
+}
+sd-switch .sd-switch__knob {
+  position: absolute;
+  top: var(--sd-switch-track-padding);
+  left: var(--sd-switch-track-padding);
+  width: var(--sd-switch-knob-size);
+  height: var(--sd-switch-knob-size);
+  border-radius: 50%;
+  background: var(--sd-switch-knob-bg);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16);
+  transition: transform 0.2s ease;
+}
+sd-switch .sd-switch__label {
+  font-family: var(--sd-switch-font-family);
+  font-weight: var(--sd-switch-font-weight);
+  font-size: var(--sd-switch-font-size);
+  line-height: var(--sd-switch-line-height);
+  text-decoration: var(--sd-switch-text-decoration);
+}
+sd-switch .sd-switch--on .sd-switch__track {
+  background: var(--sd-switch-bg-on);
+}
+sd-switch .sd-switch--on .sd-switch__knob {
+  transform: translateX(var(--sd-switch-knob-offset));
+}
+sd-switch .sd-switch--disabled {
+  cursor: not-allowed;
+}
+sd-switch .sd-switch--disabled.sd-switch--on .sd-switch__track {
+  background: var(--sd-switch-bg-disabled-on);
+}
+sd-switch .sd-switch--disabled.sd-switch--off .sd-switch__track {
+  background: var(--sd-switch-bg-disabled-off);
+}

package/dist/collection/components/{sd-toggle-button/sd-toggle-button.js → sd-switch/sd-switch.js}

@@ -1,26 +1,14 @@
 import { h } from "@stencil/core";
-export class SdToggleButton {
+import { SWITCH_COLORS, SWITCH_LAYOUT, SWITCH_TYPOGRAPHY } from "./sd-switch.config";
+export class SdSwitch {
     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');
-        }
+    get switchClasses() {
+        const classes = ['sd-switch', this.value ? 'sd-switch--on' : 'sd-switch--off'];
         if (this.disabled) {
-            classes.push('sd-toggle-button--disabled');
+            classes.push('sd-switch--disabled');
         }
         return classes.join(' ');
     }
@@ -32,17 +20,37 @@ export class SdToggleButton {
         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 })));
+        const knobOffset = SWITCH_LAYOUT.width - SWITCH_LAYOUT.knobSize - SWITCH_LAYOUT.paddingXY * 2;
+        const cssVars = {
+            '--sd-switch-track-width': `${SWITCH_LAYOUT.width}px`,
+            '--sd-switch-track-height': `${SWITCH_LAYOUT.height}px`,
+            '--sd-switch-track-padding': `${SWITCH_LAYOUT.paddingXY}px`,
+            '--sd-switch-track-radius': `${SWITCH_LAYOUT.radius}px`,
+            '--sd-switch-knob-size': `${SWITCH_LAYOUT.knobSize}px`,
+            '--sd-switch-knob-offset': `${knobOffset}px`,
+            '--sd-switch-knob-bg': SWITCH_COLORS.knobBg,
+            '--sd-switch-bg-on': SWITCH_COLORS.bgOn,
+            '--sd-switch-bg-off': SWITCH_COLORS.bgOff,
+            '--sd-switch-bg-disabled-on': SWITCH_COLORS.bgDisabledOn,
+            '--sd-switch-bg-disabled-off': SWITCH_COLORS.bgDisabledOff,
+            '--sd-switch-gap': `${SWITCH_LAYOUT.gap}px`,
+            '--sd-switch-font-family': SWITCH_TYPOGRAPHY.fontFamily,
+            '--sd-switch-font-weight': SWITCH_TYPOGRAPHY.fontWeight,
+            '--sd-switch-font-size': `${SWITCH_TYPOGRAPHY.fontSize}px`,
+            '--sd-switch-line-height': `${SWITCH_TYPOGRAPHY.lineHeight}px`,
+            '--sd-switch-text-decoration': SWITCH_TYPOGRAPHY.textDecoration,
+        };
+        return (h("label", { key: '44ff8ae899d3f1d7f20df43cab5ceb0987d0dab3', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, h("input", { key: 'c7bd9e8ab470c575a52c33b482f83e0113917fda', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), h("div", { key: '604c57baaea22b389e0d19b2c8a06421ab44063e', class: "sd-switch__track" }, h("div", { key: 'a9329987d6c2295a90fe6b4904eeea98b075b30c', class: "sd-switch__knob" })), this.label && h("span", { key: '77cab17a2dbab5245f26c218a8b60f956770e316', class: "sd-switch__label" }, this.label)));
     }
-    static get is() { return "sd-toggle-button"; }
+    static get is() { return "sd-switch"; }
     static get originalStyleUrls() {
         return {
-            "$": ["sd-toggle-button.scss"]
+            "$": ["sd-switch.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["sd-toggle-button.css"]
+            "$": ["sd-switch.css"]
         };
     }
     static get properties() {
@@ -63,7 +71,7 @@ export class SdToggleButton {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true,
+                "reflect": false,
                 "attribute": "value",
                 "defaultValue": "false"
             },
@@ -109,11 +117,6 @@ export class SdToggleButton {
             }
         };
     }
-    static get states() {
-        return {
-            "isActive": {}
-        };
-    }
     static get events() {
         return [{
                 "method": "change",

package/dist/collection/components/sd-table/constants.js

@@ -0,0 +1 @@
+export const TABLE_ID_ATTR = 'table-id';