@sellmate/design-system 0.0.55 → 1.0.0

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

@@ -0,0 +1,400 @@
+import { Host, h, } from "@stencil/core";
+export class SdTextarea {
+    host;
+    value = null;
+    name;
+    disabled = false;
+    width;
+    autoFocus = false;
+    textareaClass = '';
+    helpText;
+    maxLength;
+    placeholder = '입력해 주세요.';
+    internalValue = null;
+    focused = false;
+    hovered = false;
+    nativeEl = undefined;
+    input;
+    focus;
+    blur;
+    valueChanged(newValue) {
+        this.internalValue = newValue;
+    }
+    internalValueChanged(newValue) {
+        if (newValue !== this.value) {
+            this.value = newValue;
+            this.input?.emit(this.value);
+        }
+    }
+    async sdFocus() {
+        this.nativeEl?.focus();
+    }
+    async getNativeElement() {
+        return this.nativeEl || null;
+    }
+    componentWillLoad() {
+        if (this.value !== null && this.value !== undefined) {
+            this.internalValue = this.value;
+        }
+    }
+    componentDidLoad() {
+        if (this.autoFocus) {
+            this.nativeEl?.focus();
+        }
+    }
+    handleInput(event) {
+        const target = event.target;
+        this.internalValue = target.value;
+    }
+    handleFocus(type, event) {
+        this.focused = type === 'focus';
+        if (type === 'blur') {
+            this.blur?.emit(event);
+        }
+        else {
+            this.focus?.emit(event);
+        }
+    }
+    getTextareaStatus() {
+        if (this.disabled)
+            return 'sd-textarea--disabled';
+        if (this.hovered)
+            return 'sd-textarea--hovered';
+        if (this.focused)
+            return 'sd-textarea--focused';
+        return '';
+    }
+    getMaxLengthCounter() {
+        if (this.maxLength === undefined) {
+            return null;
+        }
+        const currentLength = (this.internalValue || '').length;
+        return `${currentLength}/${this.maxLength}`;
+    }
+    hasFooter() {
+        return this.helpText !== undefined || this.maxLength !== undefined;
+    }
+    render() {
+        const textareaWidth = this.width
+            ? {
+                '--textarea-width': typeof this.width === 'number' ? `${this.width}px` : this.width,
+            }
+            : {};
+        const maxLengthCounter = this.getMaxLengthCounter();
+        return (h(Host, { key: 'db95720b6b96d950d6435b1881f95d58c6bc4637', style: textareaWidth, class: {
+                'sd-textarea': true,
+                [this.getTextareaStatus()]: true,
+            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("div", { key: '3dae36a9b56837fa7d770f295359d8ed9aa2a3e4', class: "sd-textarea__content" }, h("textarea", { key: 'b9e4ff3cffc1b06e4ef6e5ffee240579c80c6d94', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, autofocus: this.autoFocus, maxLength: this.maxLength, onInput: this.handleInput.bind(this), onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) })), this.hasFooter() && (h("div", { key: 'b0de9e449897f2a8d1e6a7204d2383551d3ae2e4', class: "sd-textarea__footer" }, this.helpText !== undefined && h("span", { key: 'b4528beb70095d70a030a70f451c59e511865fcb', class: "sd-textarea__help-text" }, this.helpText), maxLengthCounter !== null && h("span", { key: 'ce2d33888c7bd85ea240ce00851aec7ecd945adc', class: "sd-textarea__counter" }, maxLengthCounter)))));
+    }
+    static get is() { return "sd-textarea"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sd-textarea.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sd-textarea.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "null | string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "null"
+            },
+            "name": {
+                "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": "name"
+            },
+            "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"
+            },
+            "width": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | string",
+                    "resolved": "number | string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width"
+            },
+            "autoFocus": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "auto-focus",
+                "defaultValue": "false"
+            },
+            "textareaClass": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "textarea-class",
+                "defaultValue": "''"
+            },
+            "helpText": {
+                "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": "help-text"
+            },
+            "maxLength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-length"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "'\uC785\uB825\uD574 \uC8FC\uC138\uC694.'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "internalValue": {},
+            "focused": {},
+            "hovered": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "input",
+                "name": "sdUpdate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "null | string",
+                    "references": {}
+                }
+            }, {
+                "method": "focus",
+                "name": "sdFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "Event",
+                    "resolved": "Event",
+                    "references": {
+                        "Event": {
+                            "location": "import",
+                            "path": "@stencil/core",
+                            "id": "../../node_modules/@stencil/core/internal/stencil-core/index.d.ts::Event"
+                        }
+                    }
+                }
+            }, {
+                "method": "blur",
+                "name": "sdBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "Event",
+                    "resolved": "Event",
+                    "references": {
+                        "Event": {
+                            "location": "import",
+                            "path": "@stencil/core",
+                            "id": "../../node_modules/@stencil/core/internal/stencil-core/index.d.ts::Event"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "sdFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "getNativeElement": {
+                "complexType": {
+                    "signature": "() => Promise<HTMLTextAreaElement | null>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLTextAreaElement": {
+                            "location": "global",
+                            "id": "global::HTMLTextAreaElement"
+                        }
+                    },
+                    "return": "Promise<HTMLTextAreaElement | null>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "valueChanged"
+            }, {
+                "propName": "internalValue",
+                "methodName": "internalValueChanged"
+            }];
+    }
+}
+//# sourceMappingURL=sd-textarea.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sd-textarea.js","sourceRoot":"","sources":["../../../src/components/sd-textarea/sd-textarea.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Host,\n Prop,\n State,\n Watch,\n Event,\n EventEmitter,\n h,\n Method,\n} from '@stencil/core';\n\n@Component({\n tag: 'sd-textarea',\n styleUrl: 'sd-textarea.scss',\n})\nexport class SdTextarea {\n @Element() host!: HTMLElement;\n\n @Prop({ mutable: true }) value?: string | null = null;\n @Prop() name?: string;\n @Prop() disabled: boolean = false;\n @Prop() width?: number | string;\n @Prop() autoFocus: boolean = false;\n @Prop() textareaClass: string = '';\n @Prop() helpText?: string;\n @Prop() maxLength?: number;\n @Prop() placeholder: string = '입력해 주세요.';\n\n @State() private internalValue: string | null = null;\n @State() private focused: boolean = false;\n @State() private hovered: boolean = false;\n\n private nativeEl: HTMLTextAreaElement | undefined = undefined;\n\n @Event({ eventName: 'sdUpdate' }) input?: EventEmitter<string | null>;\n @Event({ eventName: 'sdFocus' }) focus?: EventEmitter<Event>;\n @Event({ eventName: 'sdBlur' }) blur?: EventEmitter<Event>;\n\n @Watch('value')\n valueChanged(newValue: string | null) {\n  this.internalValue = newValue;\n }\n\n @Watch('internalValue')\n internalValueChanged(newValue: string | null) {\n  if (newValue !== this.value) {\n   this.value = newValue;\n   this.input?.emit(this.value);\n  }\n }\n\n @Method()\n async sdFocus() {\n  this.nativeEl?.focus();\n }\n\n @Method()\n async getNativeElement(): Promise<HTMLTextAreaElement | null> {\n  return this.nativeEl || null;\n }\n\n componentWillLoad() {\n  if (this.value !== null && this.value !== undefined) {\n   this.internalValue = this.value;\n  }\n }\n\n componentDidLoad() {\n  if (this.autoFocus) {\n   this.nativeEl?.focus();\n  }\n }\n\n private handleInput(event: Event) {\n  const target = event.target as HTMLTextAreaElement;\n  this.internalValue = target.value;\n }\n\n private handleFocus(type: 'focus' | 'blur', event: Event) {\n  this.focused = type === 'focus';\n\n  if (type === 'blur') {\n   this.blur?.emit(event);\n  } else {\n   this.focus?.emit(event);\n  }\n }\n\n private getTextareaStatus() {\n  if (this.disabled) return 'sd-textarea--disabled';\n  if (this.hovered) return 'sd-textarea--hovered';\n  if (this.focused) return 'sd-textarea--focused';\n  return '';\n }\n\n private getMaxLengthCounter(): string | null {\n  if (this.maxLength === undefined) {\n   return null;\n  }\n  const currentLength = (this.internalValue || '').length;\n  return `${currentLength}/${this.maxLength}`;\n }\n\n private hasFooter(): boolean {\n  return this.helpText !== undefined || this.maxLength !== undefined;\n }\n\n render() {\n  const textareaWidth = this.width\n   ? {\n      '--textarea-width': typeof this.width === 'number' ? `${this.width}px` : this.width,\n     }\n   : {};\n\n  const maxLengthCounter = this.getMaxLengthCounter();\n\n  return (\n   <Host\n    style={textareaWidth}\n    class={{\n     'sd-textarea': true,\n     [this.getTextareaStatus()]: true,\n    }}\n    onMouseEnter={() => (this.hovered = true)}\n    onMouseLeave={() => (this.hovered = false)}\n   >\n    <div class=\"sd-textarea__content\">\n     <textarea\n      name={this.name}\n      ref={el => (this.nativeEl = el)}\n      class={`sd-textarea__native ${this.textareaClass}`}\n      value={this.internalValue || ''}\n      placeholder={this.placeholder}\n      disabled={this.disabled}\n      autofocus={this.autoFocus}\n      maxLength={this.maxLength}\n      onInput={this.handleInput.bind(this)}\n      onFocus={event => this.handleFocus('focus', event)}\n      onBlur={event => this.handleFocus('blur', event)}\n     />\n    </div>\n    {this.hasFooter() && (\n     <div class=\"sd-textarea__footer\">\n      {this.helpText !== undefined && <span class=\"sd-textarea__help-text\">{this.helpText}</span>}\n      {maxLengthCounter !== null && <span class=\"sd-textarea__counter\">{maxLengthCounter}</span>}\n     </div>\n    )}\n   </Host>\n  );\n }\n}\n"]}

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

@@ -6,10 +6,10 @@ export class SdToastMessage {
     link;
     linkLabel;
     buttonLabel;
-    close = false;
+    useClose = false;
     type = 'basicDark';
-    sdClose;
-    sdButtonClick;
+    close;
+    buttonClick;
     isVisible = true;
     static COLOR_OF_TYPE = {
         basicLight: { background: 'white', text: 'grey_95' },
@@ -21,10 +21,10 @@ export class SdToastMessage {
     };
     handleClose = () => {
         this.isVisible = false;
-        this.sdClose.emit();
+        this.close.emit();
     };
     handleButtonClick = () => {
-        this.sdButtonClick.emit();
+        this.buttonClick.emit();
     };
     getContainerClasses() {
         const classes = ['sd-toast-message', `sd-toast-message--${this.type}`];
@@ -39,10 +39,10 @@ export class SdToastMessage {
             background: resolveColor(colorTokens.background),
             text: resolveColor(colorTokens.text),
         };
-        return (h(Host, { key: '08b9ea203d36fbb3c6da642f3fc4355209867042', style: {
+        return (h(Host, { key: 'edd60b2a74bae15c88131baedaa3e913dc5326ae', style: {
                 '--sd-toast-bg': colors.background,
                 '--sd-toast-text': colors.text,
-            } }, h("div", { key: '9b93919198c900453ff04a7dd71985f829967803', class: this.getContainerClasses(), role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (h("div", { key: '6d1775a1d5c9e4b55fdac888f9dea6e806a76b14', class: "sd-toast-message__icon" }, h("sd-icon", { key: 'd122832fa3b011792eb81f31296177d2dd99d571', name: this.icon, size: 16, color: colors.text }))), h("div", { key: '63e5f2f2bc800d24559fb5fb8a2e92e575f2b119', class: "sd-toast-message__content" }, h("span", { key: '2422d351d2019333f5085e8c0fdcb3cbf58b5b67', class: "sd-toast-message__message" }, this.message)), this.link && (h("a", { key: '766716d0ddf7da45d78b4e84a55f12c66e95a8f3', href: this.link, class: "sd-toast-message__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (h("sd-button", { key: '8b1e262e5da42e324cb392fc950c02c82005987c', 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: '42d20adef4a675644958116f8bbb987f131e194c', type: "button", class: "sd-toast-message__close", onClick: this.handleClose, "aria-label": "Close", title: "Close" }, h("sd-icon", { key: '5141cf3044ba13b541091bb79b3040e1eabc0b17', name: "close", size: 12, color: colors.text }))))));
+            } }, h("div", { key: 'b41ad15e9fe7520ee8fbf683f6d95e327c59ac6c', class: this.getContainerClasses(), role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (h("div", { key: 'def78fc8bc05ead9b97144dccc4f105fad953477', class: "sd-toast-message__icon" }, h("sd-icon", { key: 'a01368892d295aee0339fa027663bffe31fb2c2b', name: this.icon, size: 16, color: colors.text }))), h("div", { key: 'f0c6d32da360c2135aee2374b1091c27bddf4d22', class: "sd-toast-message__content" }, h("span", { key: '0f1f7d81154470ad9bcc3d8d4c1ed0c0994da7bb', class: "sd-toast-message__message" }, this.message)), this.link && (h("a", { key: '2a4f7b21940e2234653a18e8a677aba9586d18e3', href: this.link, class: "sd-toast-message__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (h("sd-button", { key: 'd399961349429bee81fa395c555879fabef86136', class: `sd-toast-message__button ${this.type === 'basicLight' ? 'text-white' : ''}`, label: this.buttonLabel, variant: "primary", color: this.type === 'basicLight' ? 'oceanblue_75' : 'white', size: "sm", onClick: this.handleButtonClick, style: this.type !== 'basicLight' ? { '--button-text-color': resolveColor('grey_95') } : {} })), this.useClose && (h("button", { key: '4bfae7573d5a5204c29d5ef0e2dc71e9a7622d62', type: "button", class: "sd-toast-message__close", onClick: this.handleClose, "aria-label": "Close", title: "Close" }, h("sd-icon", { key: '7ac20a34965ee46c8af76c6c862a69269a73f1a2', name: "close", size: 12, color: colors.text }))))));
     }
     static get is() { return "sd-toast-message"; }
     static get encapsulation() { return "scoped"; }
@@ -158,7 +158,7 @@ export class SdToastMessage {
                 "reflect": false,
                 "attribute": "button-label"
             },
-            "close": {
+            "useClose": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -175,7 +175,7 @@ export class SdToastMessage {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "close",
+                "attribute": "use-close",
                 "defaultValue": "false"
             },
             "type": {
@@ -213,7 +213,7 @@ export class SdToastMessage {
     }
     static get events() {
         return [{
-                "method": "sdClose",
+                "method": "close",
                 "name": "sdClose",
                 "bubbles": true,
                 "cancelable": true,
@@ -228,7 +228,7 @@ export class SdToastMessage {
                     "references": {}
                 }
             }, {
-                "method": "sdButtonClick",
+                "method": "buttonClick",
                 "name": "sdButtonClick",
                 "bubbles": true,
                 "cancelable": true,

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

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

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

@@ -3,8 +3,7 @@ export class SdToggle {
     value = false;
     label = '';
     disabled = false;
-    isChecked = false;
-    sdChange;
+    change;
     componentWillLoad() {
         this.updateCheckedState(this.value);
     }
@@ -12,10 +11,10 @@ export class SdToggle {
         this.updateCheckedState(this.value);
     }
     updateCheckedState(value) {
-        this.isChecked = value;
+        this.value = value;
     }
     get toggleClasses() {
-        const classes = ['sd-toggle', this.isChecked ? 'sd-toggle--checked' : 'sd-toggle--unchecked'];
+        const classes = ['sd-toggle', this.value ? 'sd-toggle--checked' : 'sd-toggle--unchecked'];
         if (this.disabled) {
             classes.push('sd-toggle--disabled');
         }
@@ -26,10 +25,10 @@ export class SdToggle {
             return;
         const newValue = !this.value;
         this.value = newValue;
-        this.sdChange.emit(newValue);
+        this.change.emit(newValue);
     };
     render() {
-        return (h("label", { key: '98109b653fae3a6fb4da63974bd1cb3c298922a8', "aria-checked": this.isChecked.toString(), "aria-disabled": this.disabled.toString(), role: "switch", "aria-label": this.label || 'toggle', class: this.toggleClasses }, h("input", { key: '72abccdd961d365d34aeaefe1a45ffb84de8c74f', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onInput: this.handleChange }), this.label && h("span", { key: 'd8c2f68be88a9089ba494017f3d46a3151cfb882', class: "sd-toggle__label" }, this.label), h("div", { key: 'be28af142749104d24172782817bdaa94bd24eb1', class: "sd-toggle__track" }, h("div", { key: 'f3b000418dbaece07540ad3135ef629113274de4', class: "sd-toggle__thumb" }))));
+        return (h("label", { key: 'ca85bc0493aff9ff17108696ddb8af29734b00f5', "aria-label": this.label || 'toggle', class: this.toggleClasses }, h("input", { key: 'b99a4fa0d557968e50b302332778faaf1b46f8cc', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), this.label && h("span", { key: 'e62ca806b95463c7807f82ace61b4aa0affec962', class: "sd-toggle__label" }, this.label), h("div", { key: '6923da9a043df0d0d7fc0ecf2fe175857279e9b3', class: "sd-toggle__track" }, h("div", { key: '090dfbcf308f26b8e200d0e2cd69d44b0f5cb8bf', class: "sd-toggle__thumb" }))));
     }
     static get is() { return "sd-toggle"; }
     static get originalStyleUrls() {
@@ -60,7 +59,7 @@ export class SdToggle {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true,
+                "reflect": false,
                 "attribute": "value",
                 "defaultValue": "false"
             },
@@ -106,15 +105,10 @@ export class SdToggle {
             }
         };
     }
-    static get states() {
-        return {
-            "isChecked": {}
-        };
-    }
     static get events() {
         return [{
-                "method": "sdChange",
-                "name": "sdChange",
+                "method": "change",
+                "name": "sdUpdate",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,

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

@@ -1 +1 @@
-{"version":3,"file":"sd-toggle.js","sourceRoot":"","sources":["../../../src/components/sd-toggle/sd-toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,KAAK,EAAE,MAAM,eAAe,CAAC;AAM/E,MAAM,OAAO,QAAQ;IACoB,KAAK,GAAY,KAAK,CAAC;IAEvD,KAAK,GAAW,EAAE,CAAC;IAEnB,QAAQ,GAAY,KAAK,CAAC;IAEjB,SAAS,GAAY,KAAK,CAAC;IAEnC,QAAQ,CAAyB;IAE1C,iBAAiB;QAChB,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACrC,CAAC;IAED,mBAAmB;QAClB,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACrC,CAAC;IAEO,kBAAkB,CAAC,KAAc;QACxC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;IACxB,CAAC;IAED,IAAY,aAAa;QACxB,MAAM,OAAO,GAAG,CAAC,WAAW,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC;QAE9F,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,OAAO,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;QACrC,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,8EACe,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,mBACxB,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,EACvC,IAAI,EAAC,QAAQ,gBACD,IAAI,CAAC,KAAK,IAAI,QAAQ,EAClC,KAAK,EAAE,IAAI,CAAC,aAAa;YAEzB,8DACC,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,IAAI,CAAC,SAAS,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,YAAY,GACzB;YACD,IAAI,CAAC,KAAK,IAAI,6DAAM,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,KAAK,CAAQ;YACjE,4DAAK,KAAK,EAAC,kBAAkB;gBAC5B,4DAAK,KAAK,EAAC,kBAAkB,GAAO,CAC/B,CACC,CACR,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Prop, h, Event, EventEmitter, State } from '@stencil/core';\n\n@Component({\n tag: 'sd-toggle',\n styleUrl: 'sd-toggle.scss',\n})\nexport class SdToggle {\n @Prop({ mutable: true, reflect: true }) value: boolean = false;\n\n @Prop() label: string = '';\n\n @Prop() disabled: boolean = false;\n\n @State() private isChecked: boolean = false;\n\n @Event() sdChange!: EventEmitter<boolean>;\n\n componentWillLoad() {\n  this.updateCheckedState(this.value);\n }\n\n componentWillRender() {\n  this.updateCheckedState(this.value);\n }\n\n private updateCheckedState(value: boolean) {\n  this.isChecked = value;\n }\n\n private get toggleClasses(): string {\n  const classes = ['sd-toggle', this.isChecked ? 'sd-toggle--checked' : 'sd-toggle--unchecked'];\n\n  if (this.disabled) {\n   classes.push('sd-toggle--disabled');\n  }\n\n  return classes.join(' ');\n }\n\n private handleChange = () => {\n  if (this.disabled) return;\n\n  const newValue = !this.value;\n  this.value = newValue;\n  this.sdChange.emit(newValue);\n };\n\n render() {\n  return (\n   <label\n    aria-checked={this.isChecked.toString()}\n    aria-disabled={this.disabled.toString()}\n    role=\"switch\"\n    aria-label={this.label || 'toggle'}\n    class={this.toggleClasses}\n   >\n    <input\n     type=\"checkbox\"\n     checked={this.isChecked}\n     disabled={this.disabled}\n     onInput={this.handleChange}\n    />\n    {this.label && <span class=\"sd-toggle__label\">{this.label}</span>}\n    <div class=\"sd-toggle__track\">\n     <div class=\"sd-toggle__thumb\"></div>\n    </div>\n   </label>\n  );\n }\n}\n"]}
+{"version":3,"file":"sd-toggle.js","sourceRoot":"","sources":["../../../src/components/sd-toggle/sd-toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAMxE,MAAM,OAAO,QAAQ;IACK,KAAK,GAAY,KAAK,CAAC;IAExC,KAAK,GAAW,EAAE,CAAC;IAEnB,QAAQ,GAAY,KAAK,CAAC;IAEA,MAAM,CAAyB;IAEjE,iBAAiB;QAChB,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACrC,CAAC;IAED,mBAAmB;QAClB,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACrC,CAAC;IAEO,kBAAkB,CAAC,KAAc;QACxC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;IACpB,CAAC;IAED,IAAY,aAAa;QACxB,MAAM,OAAO,GAAG,CAAC,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC;QAE1F,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,OAAO,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;QACrC,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,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC5B,CAAC,CAAC;IAEF,MAAM;QACL,OAAO,CACN,4EAIa,IAAI,CAAC,KAAK,IAAI,QAAQ,EAClC,KAAK,EAAE,IAAI,CAAC,aAAa;YAEzB,8DACC,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,IAAI,CAAC,KAAK,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,YAAY,GACzB;YACD,IAAI,CAAC,KAAK,IAAI,6DAAM,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,KAAK,CAAQ;YACjE,4DAAK,KAAK,EAAC,kBAAkB;gBAC5B,4DAAK,KAAK,EAAC,kBAAkB,GAAO,CAC/B,CACC,CACR,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Prop, h, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'sd-toggle',\n styleUrl: 'sd-toggle.scss',\n})\nexport class SdToggle {\n @Prop({ mutable: true }) value: boolean = false;\n\n @Prop() label: string = '';\n\n @Prop() disabled: boolean = false;\n\n @Event({ eventName: 'sdUpdate' }) change!: EventEmitter<boolean>;\n\n componentWillLoad() {\n  this.updateCheckedState(this.value);\n }\n\n componentWillRender() {\n  this.updateCheckedState(this.value);\n }\n\n private updateCheckedState(value: boolean) {\n  this.value = value;\n }\n\n private get toggleClasses(): string {\n  const classes = ['sd-toggle', this.value ? 'sd-toggle--checked' : 'sd-toggle--unchecked'];\n\n  if (this.disabled) {\n   classes.push('sd-toggle--disabled');\n  }\n\n  return classes.join(' ');\n }\n\n private handleChange = () => {\n  if (this.disabled) return;\n\n  const newValue = !this.value;\n  this.value = newValue;\n  this.change.emit(newValue);\n };\n\n render() {\n  return (\n   <label\n    // aria-checked={this.value.toString()}\n    // aria-disabled={this.disabled.toString()}\n    // role=\"switch\"\n    aria-label={this.label || 'toggle'}\n    class={this.toggleClasses}\n   >\n    <input\n     type=\"checkbox\"\n     checked={this.value}\n     disabled={this.disabled}\n     onInput={this.handleChange}\n    />\n    {this.label && <span class=\"sd-toggle__label\">{this.label}</span>}\n    <div class=\"sd-toggle__track\">\n     <div class=\"sd-toggle__thumb\"></div>\n    </div>\n   </label>\n  );\n }\n}\n"]}

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

@@ -4,7 +4,7 @@ export class SdToggleButton {
     label = '';
     disabled = false;
     isActive = false;
-    sdChange;
+    change;
     componentWillLoad() {
         this.updateActiveState(this.value);
     }
@@ -29,10 +29,10 @@ export class SdToggleButton {
             return;
         const newValue = !this.value;
         this.value = newValue;
-        this.sdChange.emit(newValue);
+        this.change.emit(newValue);
     };
     render() {
-        return (h("label", { key: '98522762cdfcfd0b7ee4e460455c46e2e5aea679', 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: '905fbcee8ca900a099b27c4fe90b87a1485aefd3', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (h("label", { key: '9eb4abcfe8f3894198c8d8643150daa507e6f0e9', class: this.buttonClasses, "aria-label": this.label || 'toggle button' }, this.label, h("input", { key: 'e3d952af461da0fac978b8ce6bd55a6990907fb3', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
     static get is() { return "sd-toggle-button"; }
     static get originalStyleUrls() {
@@ -116,8 +116,8 @@ export class SdToggleButton {
     }
     static get events() {
         return [{
-                "method": "sdChange",
-                "name": "sdChange",
+                "method": "change",
+                "name": "sdUpdate",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,