@sellmate/design-system 0.0.51 → 0.0.53

package/dist/collection/components/sd-tabs/sd-tabs.js

@@ -0,0 +1,180 @@
+import { h } from "@stencil/core";
+export class SdTabs {
+    value;
+    tabs = [];
+    size = 'md';
+    isSub = false;
+    selectedValue;
+    sdChange;
+    componentWillLoad() {
+        if (this.value !== undefined && this.value !== null) {
+            this.selectedValue = this.value;
+        }
+    }
+    valueChanged(newValue) {
+        this.selectedValue = newValue;
+    }
+    handleTabClick = (tabValue) => {
+        this.selectedValue = tabValue;
+        this.value = tabValue;
+        this.sdChange.emit(tabValue);
+    };
+    isTabSelected(tab) {
+        return this.selectedValue === tab.value;
+    }
+    getTabClasses(tab) {
+        const classes = [
+            'sd-tabs__tab',
+            this.isTabSelected(tab) ? 'sd-tabs__tab--selected' : 'sd-tabs__tab--unselected',
+        ];
+        return classes.join(' ');
+    }
+    getContainerClasses() {
+        const classes = ['sd-tabs', `sd-tabs--${this.size}`];
+        if (this.isSub) {
+            classes.push('sd-tabs--sub');
+        }
+        return classes.join(' ');
+    }
+    getBadgeColors(tab) {
+        if (this.isTabSelected(tab)) {
+            return { bgColor: '#E6F1FF', textColor: '#0075FF' };
+        }
+        return { bgColor: '#E5E5E5', textColor: '#737373' };
+    }
+    render() {
+        return (h("div", { key: '749c892c45eccc71e2faad842be4dfd311aa2eed', class: this.getContainerClasses(), role: "tablist" }, this.tabs.map((tab, index) => {
+            const isSelected = this.isTabSelected(tab);
+            const badgeColors = this.getBadgeColors(tab);
+            return (h("div", { key: `tab-${index}`, class: this.getTabClasses(tab), role: "tab", "aria-selected": isSelected.toString(), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab.value) }, h("span", { class: "sd-tabs__label" }, tab.label), tab.badge && (h("sd-tag", { size: this.size, label: tab.badge.toString(), bgColor: badgeColors.bgColor, textColor: badgeColors.textColor, rounded: true }))));
+        })));
+    }
+    static get is() { return "sd-tabs"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sd-tabs.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sd-tabs.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value"
+            },
+            "tabs": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "TabOption[]",
+                    "resolved": "TabOption[]",
+                    "references": {
+                        "TabOption": {
+                            "location": "local",
+                            "path": "C:/Users/KimMeeKyeong/Documents/sellmate/frontend/design-system/packages/stencil/src/components/sd-tabs/sd-tabs.tsx",
+                            "id": "src/components/sd-tabs/sd-tabs.tsx::TabOption"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sm' | 'md'",
+                    "resolved": "\"md\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "isSub": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-sub",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "selectedValue": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "sdChange",
+                "name": "sdChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "valueChanged"
+            }];
+    }
+}
+//# sourceMappingURL=sd-tabs.js.map

package/dist/collection/components/sd-tabs/sd-tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sd-tabs.js","sourceRoot":"","sources":["../../../src/components/sd-tabs/sd-tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, EventEmitter, Event, State, Watch } from '@stencil/core';\r\n\r\nexport type TabOption = {\r\n  label: string;\r\n  value: string;\r\n  badge?: string | number;\r\n};\r\n\r\n@Component({\r\n  tag: 'sd-tabs',\r\n  styleUrl: 'sd-tabs.scss',\r\n})\r\nexport class SdTabs {\r\n  @Prop({ mutable: true, reflect: true }) value!: string;\r\n\r\n  @Prop({ mutable: true }) tabs: TabOption[] = [];\r\n\r\n  @Prop() size: 'sm' | 'md' = 'md';\r\n\r\n  @Prop() isSub: boolean = false;\r\n\r\n  @State() private selectedValue!: string;\r\n\r\n  @Event()\r\n  sdChange!: EventEmitter<string>;\r\n\r\n  componentWillLoad() {\r\n    if (this.value !== undefined && this.value !== null) {\r\n      this.selectedValue = this.value;\r\n    }\r\n  }\r\n\r\n  @Watch('value')\r\n  valueChanged(newValue: string) {\r\n    this.selectedValue = newValue;\r\n  }\r\n\r\n  private handleTabClick = (tabValue: string) => {\r\n    this.selectedValue = tabValue;\r\n    this.value = tabValue;\r\n    this.sdChange.emit(tabValue);\r\n  };\r\n\r\n  private isTabSelected(tab: TabOption): boolean {\r\n    return this.selectedValue === tab.value;\r\n  }\r\n\r\n  private getTabClasses(tab: TabOption): string {\r\n    const classes = [\r\n      'sd-tabs__tab',\r\n      this.isTabSelected(tab) ? 'sd-tabs__tab--selected' : 'sd-tabs__tab--unselected',\r\n    ];\r\n\r\n    return classes.join(' ');\r\n  }\r\n\r\n  private getContainerClasses(): string {\r\n    const classes = ['sd-tabs', `sd-tabs--${this.size}`];\r\n\r\n    if (this.isSub) {\r\n      classes.push('sd-tabs--sub');\r\n    }\r\n\r\n    return classes.join(' ');\r\n  }\r\n\r\n  private getBadgeColors(tab: TabOption): { bgColor: string; textColor: string } {\r\n    if (this.isTabSelected(tab)) {\r\n      return { bgColor: '#E6F1FF', textColor: '#0075FF' };\r\n    }\r\n    return { bgColor: '#E5E5E5', textColor: '#737373' };\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class={this.getContainerClasses()} role=\"tablist\">\r\n        {this.tabs.map((tab, index) => {\r\n          const isSelected = this.isTabSelected(tab);\r\n          const badgeColors = this.getBadgeColors(tab);\r\n\r\n          return (\r\n            <div\r\n              key={`tab-${index}`}\r\n              class={this.getTabClasses(tab)}\r\n              role=\"tab\"\r\n              aria-selected={isSelected.toString()}\r\n              aria-label={tab.label || 'tab'}\r\n              onClick={() => this.handleTabClick(tab.value)}\r\n            >\r\n              <span class=\"sd-tabs__label\">{tab.label}</span>\r\n              {tab.badge && (\r\n                <sd-tag\r\n                  size={this.size}\r\n                  label={tab.badge.toString()}\r\n                  bgColor={badgeColors.bgColor}\r\n                  textColor={badgeColors.textColor}\r\n                  rounded={true}\r\n                />\r\n              )}\r\n            </div>\r\n          );\r\n        })}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -8,6 +8,7 @@
 
 .sd-tag {
   display: inline-flex;
+  width: 100%;
   align-items: center;
   justify-content: center;
   gap: 8px;
@@ -22,6 +23,13 @@
   user-select: none;
   box-sizing: border-box;
 }
+.sd-tag__content {
+  display: inline-block;
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
 .sd-tag--custom-color {
   background: var(--tag-bg-color);
   color: var(--tag-text-color);

package/dist/collection/components/sd-tag/sd-tag.js

@@ -37,7 +37,7 @@ export class SdTag {
     }
     render() {
         const tagClasses = this.getTagClasses();
-        return (h("span", { key: '3ab30b01fbf0c25426e7903ed05372399c380a01', class: tagClasses, style: {
+        return (h("span", { key: '6f3353059d6a1516dd11e23f6347f52f514020e4', class: tagClasses, style: {
                 '--tag-bg-color': this.bgColor,
                 '--tag-text-color': this.textColor,
             }, "aria-label": this.label || 'tag' }, this.renderContent()));

package/dist/collection/components/sd-toast-message/sd-toast-message.css

@@ -0,0 +1,66 @@
+.sd-toast-message {
+  display: flex;
+  width: fit-content;
+  align-items: center;
+  gap: 16px;
+  padding: 12px 24px;
+  border-radius: 4px;
+  background-color: var(--sd-toast-bg);
+  color: var(--sd-toast-text);
+  transition: opacity 0.2s ease, visibility 0.2s ease;
+  box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.2);
+}
+.sd-toast-message--hidden {
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+.sd-toast-message__icon {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+.sd-toast-message__content {
+  display: flex;
+  flex: 1;
+}
+.sd-toast-message__message {
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 400;
+}
+.sd-toast-message__link {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--sd-toast-text);
+  text-decoration: underline;
+  cursor: pointer;
+  transition: opacity 0.2s ease;
+  margin-left: 4px;
+}
+.sd-toast-message__link:hover {
+  opacity: 0.8;
+}
+.sd-toast-message__button {
+  flex-shrink: 0;
+}
+.sd-toast-message__button button {
+  color: var(--button-text-color, inherit) !important;
+}
+.sd-toast-message__close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px;
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  transition: opacity 0.2s ease;
+  flex-shrink: 0;
+}
+.sd-toast-message__close:hover {
+  opacity: 0.7;
+}
+.sd-toast-message__close:active {
+  opacity: 0.5;
+}

package/dist/collection/components/sd-toast-message/sd-toast-message.js

@@ -0,0 +1,248 @@
+import { h, Host } from "@stencil/core";
+import { resolveColor } from "../../utils/color";
+export class SdToastMessage {
+    icon;
+    message;
+    link;
+    linkLabel;
+    buttonLabel;
+    close = false;
+    type = 'basicDark';
+    sdClose;
+    sdButtonClick;
+    isVisible = true;
+    static COLOR_OF_TYPE = {
+        basicLight: { background: 'white', text: 'grey_95' },
+        basicDark: { background: 'steelblue_90', text: 'white' },
+        error: { background: 'red_70', text: 'white' },
+        caution: { background: 'yellow_45', text: 'grey_90' },
+        complete: { background: 'green_75', text: 'white' },
+        progress: { background: 'brilliantblue_80', text: 'white' },
+    };
+    handleClose = () => {
+        this.isVisible = false;
+        this.sdClose.emit();
+    };
+    handleButtonClick = () => {
+        this.sdButtonClick.emit();
+    };
+    getContainerClasses() {
+        const classes = ['sd-toast-message', `sd-toast-message--${this.type}`];
+        if (!this.isVisible) {
+            classes.push('sd-toast-message--hidden');
+        }
+        return classes.join(' ');
+    }
+    render() {
+        const colorTokens = SdToastMessage.COLOR_OF_TYPE[this.type];
+        const colors = {
+            background: resolveColor(colorTokens.background),
+            text: resolveColor(colorTokens.text),
+        };
+        return (h(Host, { key: '4d342822195d44b49e5976e8d5e66fc7a58301b9', style: {
+                '--sd-toast-bg': colors.background,
+                '--sd-toast-text': colors.text,
+            } }, h("div", { key: '2b33303cc0fc474d9c58a83a925a43b59f577125', class: this.getContainerClasses(), role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (h("div", { key: 'a7b7c49a4a15c76f0633520046128ce937e6410d', class: "sd-toast-message__icon" }, h("sd-icon", { key: '7c61a7142e8e442936c9b2736cbcf8ebf8521087', name: this.icon, size: 16, color: colors.text }))), h("div", { key: 'd0606186e02a44ba81ba3924baa0bdd8b34984f1', class: "sd-toast-message__content" }, h("span", { key: '52e689c1e1d6a7170381a46f8c9370105386aac7', class: "sd-toast-message__message" }, this.message)), this.link && (h("a", { key: '0818b9ffe71bd2cbe9fc00bfab9f8a6591f03cbd', href: this.link, class: "sd-toast-message__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (h("sd-button", { key: '4d4d7b15137574db44b64e3dc62010fe8ccdf530', class: `sd-toast-message__button ${this.type === 'basicLight' ? 'text-white' : ''}`, label: this.buttonLabel, variant: "primary", color: this.type === 'basicLight' ? 'oceanblue_75' : 'white', size: "sm", onSdClick: this.handleButtonClick, style: this.type !== 'basicLight' ? { '--button-text-color': resolveColor('grey_95') } : {} })), this.close && (h("button", { key: '991ad8fe130c370f24ce23cf6d98a9ac797f7367', type: "button", class: "sd-toast-message__close", onClick: this.handleClose, "aria-label": "Close", title: "Close" }, h("sd-icon", { key: 'd71dee73974143e5b6eb92f4135d40ee1df178fb', name: "close", size: 12, color: colors.text }))))));
+    }
+    static get is() { return "sd-toast-message"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sd-toast-message.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sd-toast-message.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconName",
+                    "resolved": "\"youtube\" | \"warningOutline\" | \"warningFilled\" | \"warehouseSolid\" | \"warehouseLine\" | \"visibilityOn\" | \"visibilityOff\" | \"user\" | \"synchronize\" | \"star\" | \"setting\" | \"search\" | \"row\" | \"robot\" | \"reset\" | \"pdf\" | \"pageMove\" | \"pageEdit\" | \"outLine\" | \"notion\" | \"notificationOutline\" | \"notificationFilled\" | \"minus\" | \"logout\" | \"location\" | \"line\" | \"inline\" | \"imageLine\" | \"imageFill\" | \"history\" | \"helpOutline\" | \"helpFilled\" | \"global\" | \"event\" | \"etc\" | \"drag\" | \"download\" | \"remove\" | \"date\" | \"dashboard\" | \"copy\" | \"close\" | \"clockOutline\" | \"clockFilled\" | \"CheckOutline\" | \"CheckFilled\" | \"check\" | \"caretUp\" | \"caretRight\" | \"caretLeft\" | \"caretDown\" | \"cancelOutline\" | \"cancelFilled\" | \"box\" | \"board\" | \"bell\" | \"barcode\" | \"badgeNew\" | \"attachFile\" | \"arrowUp\" | \"arrowRightEnd\" | \"arrowRight\" | \"arrowLeftEnd\" | \"arrowLeft\" | \"arrowDown\" | \"arrow2UpDown\" | \"arrow2Up\" | \"arrow2Right\" | \"arrow2Left\" | \"arrow2Down\" | \"archive\" | \"alignKorean\" | \"alert\" | \"add\" | undefined",
+                    "references": {
+                        "IconName": {
+                            "location": "global",
+                            "id": "global::IconName"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
+            },
+            "message": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "message"
+            },
+            "link": {
+                "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": "link"
+            },
+            "linkLabel": {
+                "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": "link-label"
+            },
+            "buttonLabel": {
+                "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": "button-label"
+            },
+            "close": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close",
+                "defaultValue": "false"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ToastType",
+                    "resolved": "\"basicDark\" | \"basicLight\" | \"caution\" | \"complete\" | \"error\" | \"progress\"",
+                    "references": {
+                        "ToastType": {
+                            "location": "local",
+                            "path": "C:/Users/KimMeeKyeong/Documents/sellmate/frontend/design-system/packages/stencil/src/components/sd-toast-message/sd-toast-message.tsx",
+                            "id": "src/components/sd-toast-message/sd-toast-message.tsx::ToastType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'basicDark'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isVisible": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "sdClose",
+                "name": "sdClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "sdButtonClick",
+                "name": "sdButtonClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=sd-toast-message.js.map

package/dist/collection/components/sd-toast-message/sd-toast-message.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sd-toast-message.js","sourceRoot":"","sources":["../../../src/components/sd-toast-message/sd-toast-message.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Event, EventEmitter, State, Host } from '@stencil/core';\r\nimport { resolveColor } from '../../utils/color';\r\n\r\nexport type ToastType = 'basicLight' | 'basicDark' | 'error' | 'caution' | 'complete' | 'progress';\r\n\r\n@Component({\r\n tag: 'sd-toast-message',\r\n styleUrl: 'sd-toast-message.scss',\r\n scoped: true,\r\n})\r\nexport class SdToastMessage {\r\n @Prop() icon?: IconName;\r\n\r\n @Prop() message!: string;\r\n\r\n @Prop() link?: string;\r\n\r\n @Prop() linkLabel?: string;\r\n\r\n @Prop() buttonLabel?: string;\r\n\r\n @Prop() close: boolean = false;\r\n\r\n @Prop() type: ToastType = 'basicDark';\r\n\r\n @Event()\r\n sdClose!: EventEmitter<void>;\r\n\r\n @Event()\r\n sdButtonClick!: EventEmitter<void>;\r\n\r\n @State() private isVisible: boolean = true;\r\n\r\n private static readonly COLOR_OF_TYPE = {\r\n  basicLight: { background: 'white', text: 'grey_95' },\r\n  basicDark: { background: 'steelblue_90', text: 'white' },\r\n  error: { background: 'red_70', text: 'white' },\r\n  caution: { background: 'yellow_45', text: 'grey_90' },\r\n  complete: { background: 'green_75', text: 'white' },\r\n  progress: { background: 'brilliantblue_80', text: 'white' },\r\n };\r\n\r\n private handleClose = () => {\r\n  this.isVisible = false;\r\n  this.sdClose.emit();\r\n };\r\n\r\n private handleButtonClick = () => {\r\n  this.sdButtonClick.emit();\r\n };\r\n\r\n private getContainerClasses(): string {\r\n  const classes = ['sd-toast-message', `sd-toast-message--${this.type}`];\r\n\r\n  if (!this.isVisible) {\r\n   classes.push('sd-toast-message--hidden');\r\n  }\r\n\r\n  return classes.join(' ');\r\n }\r\n\r\n render() {\r\n  const colorTokens = SdToastMessage.COLOR_OF_TYPE[this.type];\r\n  const colors = {\r\n   background: resolveColor(colorTokens.background),\r\n   text: resolveColor(colorTokens.text),\r\n  };\r\n\r\n  return (\r\n   <Host\r\n    style={{\r\n     '--sd-toast-bg': colors.background,\r\n     '--sd-toast-text': colors.text,\r\n    }}\r\n   >\r\n    <div class={this.getContainerClasses()} role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\r\n     {this.icon && (\r\n      <div class=\"sd-toast-message__icon\">\r\n       <sd-icon name={this.icon} size={16} color={colors.text}></sd-icon>\r\n      </div>\r\n     )}\r\n\r\n     <div class=\"sd-toast-message__content\">\r\n      <span class=\"sd-toast-message__message\">{this.message}</span>\r\n     </div>\r\n\r\n     {this.link && (\r\n      <a href={this.link} class=\"sd-toast-message__link\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n       {this.linkLabel || this.link}\r\n      </a>\r\n     )}\r\n\r\n     {this.buttonLabel && (\r\n      <sd-button\r\n       class={`sd-toast-message__button ${this.type === 'basicLight' ? 'text-white' : ''}`}\r\n       label={this.buttonLabel}\r\n       variant=\"primary\"\r\n       color={this.type === 'basicLight' ? 'oceanblue_75' : 'white'}\r\n       size=\"sm\"\r\n       onSdClick={this.handleButtonClick}\r\n       style={this.type !== 'basicLight' ? { '--button-text-color': resolveColor('grey_95') } : {}}\r\n      ></sd-button>\r\n     )}\r\n\r\n     {this.close && (\r\n      <button\r\n       type=\"button\"\r\n       class=\"sd-toast-message__close\"\r\n       onClick={this.handleClose}\r\n       aria-label=\"Close\"\r\n       title=\"Close\"\r\n      >\r\n       <sd-icon name=\"close\" size={12} color={colors.text}></sd-icon>\r\n      </button>\r\n     )}\r\n    </div>\r\n   </Host>\r\n  );\r\n }\r\n}\r\n"]}

package/dist/collection/components/sd-toggle/sd-toggle.js

@@ -29,7 +29,7 @@ export class SdToggle {
         this.sdChange.emit(newValue);
     };
     render() {
-        return (h("label", { key: '8b196fae6d8931cdd39c7eea51a7f1f843f4cb75', "aria-checked": this.isChecked.toString(), "aria-disabled": this.disabled.toString(), role: "switch", "aria-label": this.label || 'toggle', class: this.toggleClasses }, h("input", { key: '4a60ce883411cb2a598d003ff264fe6659d0df02', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onInput: this.handleChange }), this.label && h("span", { key: 'c0fb2edfb1a2854c31fb6eb0a4e4169e2e409db2', class: "sd-toggle__label" }, this.label), h("div", { key: 'c9f78f892be478cbd1232722487471eae53bee8a', class: "sd-toggle__track" }, h("div", { key: 'b6388556a0d6f4b9f74e6e2684ded4cde93d6384', class: "sd-toggle__thumb" }))));
+        return (h("label", { key: 'b21fce826c30404ab3f30cc27a1866d9a7745402', "aria-checked": this.isChecked.toString(), "aria-disabled": this.disabled.toString(), role: "switch", "aria-label": this.label || 'toggle', class: this.toggleClasses }, h("input", { key: '8bac810392c4aa1f0f04f13b37bc73210d70fe98', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onInput: this.handleChange }), this.label && h("span", { key: '2d2949701bb4bf24dbbce2e296d8cb82606f6a62', class: "sd-toggle__label" }, this.label), h("div", { key: '42d39942bd284f3de320735a182bd53569782e1f', class: "sd-toggle__track" }, h("div", { key: 'b2decb4e6c1a1e9459621ea409fec24cf8695f4b', class: "sd-toggle__thumb" }))));
     }
     static get is() { return "sd-toggle"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-toggle-button/sd-toggle-button.css

@@ -0,0 +1,46 @@
+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;
+}
+.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;
+}