@sellmate/design-system 0.0.52 → 0.0.54

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: 'dda95f842f686a3f595db6ecb651551f717cab18', "aria-checked": this.isChecked.toString(), "aria-disabled": this.disabled.toString(), role: "switch", "aria-label": this.label || 'toggle', class: this.toggleClasses }, h("input", { key: 'a281a6572b7fca32242ba08ad45984445bd1a009', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onInput: this.handleChange }), this.label && h("span", { key: 'dfae7796e9e421e7d6ebc6e6693e6266b2ff87cd', class: "sd-toggle__label" }, this.label), h("div", { key: 'e4343307f2df5f5c68509a3e9576a811bd9192ff', class: "sd-toggle__track" }, h("div", { key: 'be214081e5ccc21ad306e52ce186ba4dc56c6c3b', 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;
+}

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

@@ -0,0 +1,136 @@
+import { h } from "@stencil/core";
+export class SdToggleButton {
+    value = false;
+    label = '';
+    disabled = false;
+    isActive = false;
+    sdChange;
+    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.sdChange.emit(newValue);
+    };
+    render() {
+        return (h("label", { key: '4ac2cac1d4b1da4d707f4ce84a03ffc7a8ec7cb8', class: this.buttonClasses, role: "button", "aria-pressed": this.isActive.toString(), "aria-disabled": this.disabled.toString(), "aria-label": this.label || 'toggle button' }, this.label, h("input", { key: 'e9a974d34d7b3803b5ed44dc1b2da1199daf5bef', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+    }
+    static get is() { return "sd-toggle-button"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sd-toggle-button.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sd-toggle-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value",
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isActive": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "sdChange",
+                "name": "sdChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=sd-toggle-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sd-toggle-button.js","sourceRoot":"","sources":["../../../src/components/sd-toggle-button/sd-toggle-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,KAAK,EAAE,MAAM,eAAe,CAAC;AAM/E,MAAM,OAAO,cAAc;IACc,KAAK,GAAY,KAAK,CAAC;IAEvD,KAAK,GAAW,EAAE,CAAC;IAEnB,QAAQ,GAAY,KAAK,CAAC;IAEjB,QAAQ,GAAY,KAAK,CAAC;IAElC,QAAQ,CAAyB;IAE1C,iBAAiB;QAChB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACpC,CAAC;IAED,mBAAmB;QAClB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACpC,CAAC;IAEO,iBAAiB,CAAC,KAAc;QACvC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;IACvB,CAAC;IAED,IAAY,aAAa;QACxB,MAAM,OAAO,GAAG,CAAC,kBAAkB,CAAC,CAAC;QAErC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,OAAO,CAAC,IAAI,CAAC,0BAA0B,CAAC,CAAC;QAC1C,CAAC;QAED,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,OAAO,CAAC,IAAI,CAAC,4BAA4B,CAAC,CAAC;QAC5C,CAAC;QAED,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC1B,CAAC;IAEO,YAAY,GAAG,GAAG,EAAE;QAC3B,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAE1B,MAAM,QAAQ,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC;QAC7B,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;QACtB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC9B,CAAC,CAAC;IAEF,MAAM;QACL,OAAO,CACN,8DACC,KAAK,EAAE,IAAI,CAAC,aAAa,EACzB,IAAI,EAAC,QAAQ,kBACC,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,mBACvB,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,gBAC3B,IAAI,CAAC,KAAK,IAAI,eAAe;YAExC,IAAI,CAAC,KAAK;YACX,8DAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,IAAI,EAAC,UAAU,EAAC,OAAO,EAAE,IAAI,CAAC,YAAY,GAAI,CAC1E,CACR,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Prop, h, Event, EventEmitter, State } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'sd-toggle-button',\r\n styleUrl: 'sd-toggle-button.scss',\r\n})\r\nexport class SdToggleButton {\r\n @Prop({ mutable: true, reflect: true }) value: boolean = false;\r\n\r\n @Prop() label: string = '';\r\n\r\n @Prop() disabled: boolean = false;\r\n\r\n @State() private isActive: boolean = false;\r\n\r\n @Event() sdChange!: EventEmitter<boolean>;\r\n\r\n componentWillLoad() {\r\n  this.updateActiveState(this.value);\r\n }\r\n\r\n componentWillRender() {\r\n  this.updateActiveState(this.value);\r\n }\r\n\r\n private updateActiveState(value: boolean) {\r\n  this.isActive = value;\r\n }\r\n\r\n private get buttonClasses(): string {\r\n  const classes = ['sd-toggle-button'];\r\n\r\n  if (this.isActive) {\r\n   classes.push('sd-toggle-button--active');\r\n  }\r\n\r\n  if (this.disabled) {\r\n   classes.push('sd-toggle-button--disabled');\r\n  }\r\n\r\n  return classes.join(' ');\r\n }\r\n\r\n private handleChange = () => {\r\n  if (this.disabled) return;\r\n\r\n  const newValue = !this.value;\r\n  this.value = newValue;\r\n  this.sdChange.emit(newValue);\r\n };\r\n\r\n render() {\r\n  return (\r\n   <label\r\n    class={this.buttonClasses}\r\n    role=\"button\"\r\n    aria-pressed={this.isActive.toString()}\r\n    aria-disabled={this.disabled.toString()}\r\n    aria-label={this.label || 'toggle button'}\r\n   >\r\n    {this.label}\r\n    <input style={{ display: 'none' }} type=\"checkbox\" onInput={this.handleChange} />\r\n   </label>\r\n  );\r\n }\r\n}\r\n"]}

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

@@ -43,20 +43,20 @@ export class SdTooltip {
             : {
                 onClick: () => (this.showTooltip = !this.showTooltip),
             };
-        return (h(Fragment, { key: '44ccb9c1a2e9113160ccb516e62fbd175e139f50' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-tooltip", ...handleTrigger })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (h("sd-tooltip-portal", { key: '83f82f27164df34a1a8e0d1d8975b4f89a82691a', parentRef: this.buttonEl, onSdClose: () => this.handleClose(), placement: this.placement }, h("div", { key: '544085a133cdbbe707ec0c2be35a9a42cd2372bc', class: {
+        return (h(Fragment, { key: '55a62a0b80b8c10d8c0d8ced1a34178191b8a688' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-tooltip", ...handleTrigger })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (h("sd-tooltip-portal", { key: '21aaf4460591401ec5eb890d123e3cb381fb76f6', parentRef: this.buttonEl, onSdClose: () => this.handleClose(), placement: this.placement }, h("div", { key: 'ee5d301a2fa72f95a0f89242b174f7e21a086a15', class: {
                 'sd-tooltip-menu': true,
                 [`sd-tooltip-menu--${this.type}`]: true,
                 [`sd-tooltip-menu--${this.placement}`]: true,
                 'sd-tooltip-menu--with-close': this.useClose,
                 [`bg-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,
                 [`text-${SdTooltip.COLOR_OF_TYPE[this.type].text}`]: true,
-            } }, h("i", { key: '4b335754d346d6ae244e83ccdcae25edf05a306a', class: `sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '567fc901e95b918fb0883f9c241836a10e1e58e9', class: {
+            } }, h("i", { key: '4f7e09f6770fbde0f2e9df81d401ea7cd6739df2', class: `sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: 'd0856082e623129eb56aaab87e54d1b19f33555a', class: {
                 [`text-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,
-            } })), h("div", { key: '1475d6f5d76f4e3860e2524cb571eb2704460203', class: "sd-tooltip-menu__content", ref: el => {
+            } })), h("div", { key: '40dc2a7d4254ed0e712f22cf19032e2f5ef846b4', class: "sd-tooltip-menu__content", ref: el => {
                 if (el && this.slotContent && !el.hasChildNodes()) {
                     el.appendChild(this.slotContent.cloneNode(true));
                 }
-            } }, !this.slotContent && h("span", { key: 'f821b0aa74de05c7728b06a2bd78367e43703684' }, this.el.textContent)), this.useClose && (h("div", { key: '2068c369ef957cb25b9ec74e22e2c78f9ffa6232', class: "sd-tooltip-menu__close-button" }, h("button", { key: 'f61156a86ce1b3fd4f2fb97e507711f9602ac157', type: "button", "aria-label": "Close tooltip", title: "Close tooltip", onClick: () => this.handleClose() }, h("sd-icon", { key: '3ba6f3f4dc5379eb2d13aecb9ec1d5d6fdf20dec', name: "close", size: "12", color: "#AAAAAA" })))))))));
+            } }, !this.slotContent && h("span", { key: 'd897c210bb76de430a89243177f3a436cc684e09' }, this.el.textContent)), this.useClose && (h("div", { key: 'ca41d884070a25443833162e2dc50fcb91a6bd2a', class: "sd-tooltip-menu__close-button" }, h("button", { key: '75c911fa76787dda3346b4f18d6169304966d49b', type: "button", "aria-label": "Close tooltip", title: "Close tooltip", onClick: () => this.handleClose() }, h("sd-icon", { key: '4d737bf6cc2952776016b9bc7f11cf90364cdcdb', name: "close", size: "12", color: "#AAAAAA" })))))))));
     }
     static get is() { return "sd-tooltip"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-tooltip-portal/sd-tooltip-portal.js

@@ -144,7 +144,7 @@ export class SdTooltipPortal {
         this.sdClose.emit();
     }
     render() {
-        return h("slot", { key: '912ff6aba4bae810c40c95325ffb1109ddcfddbb' });
+        return h("slot", { key: 'c389b848b1dc63a0484f6000ac5443cce752e4ac' });
     }
     static get is() { return "sd-tooltip-portal"; }
     static get encapsulation() { return "shadow"; }

package/dist/components/index.js

@@ -1,4 +1,4 @@
-export { g as getAssetPath, r as render, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-TFWJruz2.js';
+export { g as getAssetPath, r as render, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-CQBrru3e.js';
 
 function format(first, middle, last) {
     return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');

package/dist/components/{p-DiehM5Y0.js → p-B05GJor3.js}

@@ -1,8 +1,8 @@
-import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-TFWJruz2.js';
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host, t as transformTag } from './p-CQBrru3e.js';
 import { r as resolveColor } from './p-BYf-ybt2.js';
-import { d as defineCustomElement$1 } from './p-BsyfatBe.js';
+import { d as defineCustomElement$1 } from './p-CV5tKC24.js';
 
-const sdButtonCss = "sd-button{display:inline-block;width:fit-content;height:fit-content}.sd-button{text-decoration:none;cursor:pointer;border-radius:4px;transition:all 0.2s ease-in-out;position:relative;overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center}.sd-button--xs{padding:0 8px;font-size:12px;font-weight:500;line-height:20px;min-height:24px}.sd-button--sm{padding:0 12px;font-size:12px;font-weight:500;line-height:20px;min-height:28px}.sd-button--md{padding:0 20px;font-size:16px;font-weight:500;line-height:26px;min-height:34px}.sd-button--lg{padding:0 28px;font-size:18px;font-weight:500;line-height:30px;min-height:62px}.sd-button--primary{background-color:var(--button-color);color:white;transition:filter 0.2s ease}.sd-button--primary::before{content:\"\";position:absolute;inset:0;background:#000000;opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--primary:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.25}.sd-button--outline{background:white;border:1px solid var(--button-color);color:var(--button-color)}.sd-button--outline::before{content:\"\";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--outline:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--outline .sd-button__content{position:relative;z-index:1}.sd-button--ghost{background-color:transparent;color:var(--button-color);border-color:transparent}.sd-button--ghost::before{content:\"\";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--ghost:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--ghost .sd-button__content{position:relative;z-index:1}.sd-button--disabled{border:1px solid #cccccc;background:#e1e1e1;color:#888888;cursor:not-allowed !important}.sd-button--icon-only{padding:0;width:fit-content;height:fit-content;aspect-ratio:1/1}.sd-button--no-hover:hover::before{opacity:0 !important}.sd-button .sd-button__content{display:inline-flex;align-items:center;justify-content:center;gap:4px;z-index:1;font-weight:500}";
+const sdButtonCss = () => `sd-button{display:inline-block;width:fit-content;height:fit-content}.sd-button{text-decoration:none;cursor:pointer;border-radius:4px;transition:all 0.2s ease-in-out;position:relative;overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center}.sd-button--xs{padding:0 8px;font-size:12px;font-weight:500;line-height:20px;min-height:24px}.sd-button--sm{padding:0 12px;font-size:12px;font-weight:500;line-height:20px;min-height:28px}.sd-button--md{padding:0 20px;font-size:16px;font-weight:500;line-height:26px;min-height:34px}.sd-button--lg{padding:0 28px;font-size:18px;font-weight:500;line-height:30px;min-height:62px}.sd-button--primary{background-color:var(--button-color);color:white;transition:filter 0.2s ease}.sd-button--primary::before{content:"";position:absolute;inset:0;background:#000000;opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--primary:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.25}.sd-button--outline{background:white;border:1px solid var(--button-color);color:var(--button-color)}.sd-button--outline::before{content:"";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--outline:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--outline .sd-button__content{position:relative;z-index:1}.sd-button--ghost{background-color:transparent;color:var(--button-color);border-color:transparent}.sd-button--ghost::before{content:"";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--ghost:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--ghost .sd-button__content{position:relative;z-index:1}.sd-button--disabled{border:1px solid #cccccc;background:#e1e1e1;color:#888888;cursor:not-allowed !important}.sd-button--icon-only{padding:0;width:fit-content;height:fit-content;aspect-ratio:1/1}.sd-button--no-hover:hover::before{opacity:0 !important}.sd-button .sd-button__content{display:inline-flex;align-items:center;justify-content:center;gap:4px;z-index:1;font-weight:500}`;
 
 const ICON_SIZES = {
     xs: 12,
@@ -62,7 +62,7 @@ const SdButton = /*@__PURE__*/ proxyCustomElement(class SdButton extends H {
         const resolvedColor = resolveColor(this.color);
         return (h(Host, { key: 'b30c8006e2f187fb971bcd47f8ce4a91d1dc47a6', style: { '--button-color': resolvedColor } }, h("button", { key: 'f494c93fc0b9d55537b468f5c6458569df962633', class: `${buttonClasses} ${this.class}`, type: this.type, disabled: this.disabled, onClick: this.handleClick }, h("div", { key: '7d64a6526baeac8569cccc60d9befacef3e3777d', class: "sd-button__content" }, this.icon && (h("sd-icon", { key: '9439e9456783aa5b057d383252a6b0c45a44b588', class: "sd-button__icon sd-button__icon--left", name: this.icon, size: this.iconSize ? this.iconSize : ICON_SIZES[this.size], color: this.iconColor ? this.iconColor : this.variant === 'primary' ? '#fff' : resolvedColor })), this.label && h("div", { key: '324371a6f8864c444cda39e7b349b4c9ec19b7f6', class: "sd-button__label" }, this.label), this.iconRight && (h("sd-icon", { key: '733790ceda6e1822c71911b17e66f527936b15a2', class: "sd-button__icon sd-button__icon--right", name: this.iconRight, size: ICON_SIZES[this.size], color: this.variant === 'primary' ? '#fff' : resolvedColor }))))));
     }
-    static get style() { return sdButtonCss; }
+    static get style() { return sdButtonCss(); }
 }, [768, "sd-button", {
         "variant": [1],
         "size": [1],
@@ -84,12 +84,12 @@ function defineCustomElement() {
     const components = ["sd-button", "sd-icon"];
     components.forEach(tagName => { switch (tagName) {
         case "sd-button":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SdButton);
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), SdButton);
             }
             break;
         case "sd-icon":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$1();
             }
             break;
@@ -97,6 +97,6 @@ function defineCustomElement() {
 }
 
 export { SdButton as S, defineCustomElement as d };
-//# sourceMappingURL=p-DiehM5Y0.js.map
+//# sourceMappingURL=p-B05GJor3.js.map
 
-//# sourceMappingURL=p-DiehM5Y0.js.map
+//# sourceMappingURL=p-B05GJor3.js.map