npm - @sellmate/design-system - Versions diffs - 1.0.17 → 1.0.19 - Mend

@sellmate/design-system 1.0.17 → 1.0.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (71) hide show

package/hydrate/index.js CHANGED Viewed

@@ -6131,7 +6131,7 @@ class SdDateRangePicker {
     }; }
 }
-const sdFieldCss = () => `sd-field{display:inline-flex;flex-flow:column nowrap;height:fit-content;width:100%}sd-field .sd-field *:focus,sd-field .sd-field *:focus-visible,sd-field .sd-field *:focus-within{outline:none !important}sd-field .sd-field:not(.sd-field--disabled):hover .sd-field__control{border:1px solid #0075ff !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field.sd-field--disabled{cursor:not-allowed}sd-field .sd-field.sd-field--disabled .sd-field__wrapper{cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__label-inside{border-color:#cccccc;color:#888888;cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__control{background-color:#eeeeee;border-color:#cccccc;color:#888888;cursor:not-allowed !important}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label{display:flex;align-items:center;margin-right:12px}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__required-icon{margin-right:4px}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__text{font-size:12px;line-height:20px;color:#333333;white-space:nowrap}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__tooltip{margin-left:2px}sd-field .sd-field--has-label-inside .sd-field__wrapper .sd-field__label{margin-right:0;display:flex;align-items:center;justify-content:center;padding:3px 12px;border:1px solid #cccccc;border-right:none;border-radius:4px 0 0 4px;border-color:#aaaaaa;background-color:#f6f6f6}sd-field .sd-field__wrapper{width:100%;height:28px;display:flex;align-items:center;flex-flow:row nowrap;position:relative;color:#333333;cursor:pointer;-webkit-user-select:none;user-select:none}sd-field .sd-field__wrapper .sd-field__control{position:relative;width:100%;height:100%;display:flex;flex:1;border:1px solid #aaaaaa;border-radius:4px;background:white}sd-field .sd-field__wrapper .sd-field__control--label-inside{border-top-left-radius:0px;border-bottom-left-radius:0px}sd-field .sd-field--error:not(:hover) .sd-field__wrapper .sd-field__control{border:1px solid #fb4444 !important}sd-field .sd-field.sd-field--focus .sd-field__wrapper .sd-field__control,sd-field .sd-field.sd-field--hover .sd-field__wrapper .sd-field__control{border:1px solid #0075ff !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field .sd-field__error-message{color:#fb4444;font-size:12px;line-height:20px;margin-top:4px}`;
+const sdFieldCss = () => `sd-field{display:inline-flex;flex-flow:column nowrap;height:fit-content;width:100%}sd-field .sd-field *:focus,sd-field .sd-field *:focus-visible,sd-field .sd-field *:focus-within{outline:none !important}sd-field .sd-field:not(.sd-field--disabled):hover .sd-field__control{border:1px solid #0075ff !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field.sd-field--disabled{cursor:not-allowed}sd-field .sd-field.sd-field--disabled .sd-field__wrapper{cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__label-inside{border-color:#cccccc;color:#888888;cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__control{background-color:#eeeeee;border-color:#cccccc;color:#888888;cursor:not-allowed !important}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label{display:flex;align-items:center;margin-right:12px}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__required-icon{margin-right:4px}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__text{font-size:12px;line-height:20px;color:#333333;white-space:nowrap}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__tooltip{margin-left:2px}sd-field .sd-field--has-label-inside .sd-field__wrapper .sd-field__label{margin-right:0;display:flex;align-items:center;justify-content:center;padding:3px 12px;border:1px solid #cccccc;border-right:none;border-radius:4px 0 0 4px;border-color:#aaaaaa;background-color:#f6f6f6}sd-field .sd-field__wrapper{width:100%;height:28px;display:flex;align-items:center;flex-flow:row nowrap;position:relative;color:#333333;cursor:pointer;-webkit-user-select:none;user-select:none}sd-field .sd-field__wrapper .sd-field__control{position:relative;width:100%;height:100%;display:flex;flex:1;border:1px solid #aaaaaa;border-radius:4px;background:white}sd-field .sd-field__wrapper .sd-field__control--label-inside{border-top-left-radius:0px;border-bottom-left-radius:0px}sd-field .sd-field--error:not(:hover) .sd-field__wrapper .sd-field__control{border:1px solid #fb4444 !important}sd-field .sd-field.sd-field--focus .sd-field__wrapper .sd-field__control,sd-field .sd-field.sd-field--hover .sd-field__wrapper .sd-field__control{border:1px solid #0075ff !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field.sd-field--pass .sd-field__wrapper .sd-field__control{border:1px solid #2bce6c !important}sd-field .sd-field .sd-field__error-message{color:#fb4444;font-size:12px;line-height:20px;margin-top:4px}`;
 const FORM_PARENT_TAGS = [
     'sd-select',
@@ -7515,7 +7515,7 @@ const CheckFilled20 = (props) => (hAsync("svg", { ...props, width: "20", height:
 const CheckFilled24 = (props) => (hAsync("svg", { ...props, width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, hAsync("path", { d: "M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM18.1299 8.46973C17.837 8.17703 17.3622 8.1769 17.0693 8.46973L10.8125 14.7275L7.09961 11.0146C6.80684 10.7221 6.33191 10.7223 6.03906 11.0146C5.74625 11.3075 5.7464 11.7823 6.03906 12.0752L10.1045 16.1416C10.495 16.5321 11.129 16.5321 11.5195 16.1416L18.1299 9.53027C18.4228 9.23738 18.4228 8.76262 18.1299 8.46973Z", fill: "currentColor" })));
-const CheckFilled = {
+const checkFilled = {
     8: CheckFilled8,
     10: CheckFilled10,
     12: CheckFilled12,
@@ -7524,9 +7524,9 @@ const CheckFilled = {
     24: CheckFilled24,
 };
-var CheckFilled$1 = /*#__PURE__*/Object.freeze({
+var CheckFilled = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  CheckFilled: CheckFilled
+  checkFilled: checkFilled
 });
 const CheckOutline8 = (props) => (hAsync("svg", { ...props, width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, hAsync("path", { d: "M4 0.0332031C6.19058 0.0333789 7.9668 1.80938 7.9668 4C7.96662 6.19047 6.19047 7.96662 4 7.9668C1.80939 7.96679 0.0333844 6.19057 0.0332031 4C0.0332031 1.80927 1.80927 0.0332059 4 0.0332031ZM4 0.632812C2.14064 0.632815 0.632812 2.14064 0.632812 4C0.632994 5.8592 2.14076 7.36621 4 7.36621C5.8591 7.36603 7.36603 5.8591 7.36621 4C7.36621 2.14075 5.85921 0.632988 4 0.632812ZM5.6543 2.78809C5.77145 2.67093 5.96097 2.67093 6.07812 2.78809C6.19518 2.90525 6.19525 3.09479 6.07812 3.21191L3.875 5.41504C3.72544 5.5646 3.48274 5.56529 3.33301 5.41602L1.97754 4.06055C1.86045 3.94345 1.86057 3.75389 1.97754 3.63672C2.0947 3.51956 2.28421 3.51956 2.40137 3.63672L3.60352 4.83887L5.6543 2.78809Z", fill: "currentColor" })));
@@ -7541,7 +7541,7 @@ const CheckOutline20 = (props) => (hAsync("svg", { ...props, width: "20", height
 const CheckOutline24 = (props) => (hAsync("svg", { ...props, width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, hAsync("path", { d: "M12 0.25C18.4893 0.25 23.75 5.51065 23.75 12C23.75 18.4893 18.4893 23.75 12 23.75C5.51065 23.75 0.25 18.4893 0.25 12C0.25 5.51065 5.51065 0.25 12 0.25ZM12 1.75C6.33908 1.75 1.75 6.33908 1.75 12C1.75 17.6609 6.33908 22.25 12 22.25C17.6609 22.25 22.25 17.6609 22.25 12C22.25 6.33908 17.6609 1.75 12 1.75ZM17.0693 8.46973C17.3622 8.1769 17.837 8.17703 18.1299 8.46973C18.4228 8.76262 18.4228 9.23738 18.1299 9.53027L11.5195 16.1416C11.129 16.5321 10.495 16.5321 10.1045 16.1416L6.03906 12.0752C5.7464 11.7823 5.74625 11.3075 6.03906 11.0146C6.33191 10.7223 6.80684 10.7221 7.09961 11.0146L10.8125 14.7275L17.0693 8.46973Z", fill: "currentColor" })));
-const CheckOutline = {
+const checkOutline = {
     8: CheckOutline8,
     10: CheckOutline10,
     12: CheckOutline12,
@@ -7550,9 +7550,9 @@ const CheckOutline = {
     24: CheckOutline24,
 };
-var CheckOutline$1 = /*#__PURE__*/Object.freeze({
+var CheckOutline = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  CheckOutline: CheckOutline
+  checkOutline: checkOutline
 });
 const ClockFilled8 = (props) => (hAsync("svg", { ...props, width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, hAsync("path", { d: "M4.00034 0.333313C6.02523 0.333489 7.66635 1.97537 7.66635 4.00031C7.66618 6.02509 6.02512 7.66614 4.00034 7.66632C1.9754 7.66632 0.333519 6.0252 0.333344 4.00031C0.333344 1.97526 1.97529 0.333313 4.00034 0.333313ZM4.00034 1.33331C3.81636 1.33331 3.66751 1.48239 3.66733 1.66632V3.99933C3.66733 4.18342 3.81624 4.33331 4.00034 4.33331H6.33334C6.51728 4.33313 6.66733 4.18331 6.66733 3.99933C6.66697 3.81565 6.51706 3.6665 6.33334 3.66632H4.33334V1.66632C4.33316 1.4825 4.18416 1.33349 4.00034 1.33331Z", fill: "currentColor" })));
@@ -8707,8 +8707,8 @@ const Icons = {
     ...CaretRight,
     ...CaretUp,
     ...Check,
-    ...CheckFilled$1,
-    ...CheckOutline$1,
+    ...CheckFilled,
+    ...CheckOutline,
     ...ClockFilled,
     ...ClockOutline,
     ...Close,
@@ -9223,6 +9223,7 @@ class SdNumberInput {
         }
     };
     handleFocus = (event) => {
+        this.focused = true;
         this.focus?.emit(event);
     };
     handleBlur = async (event) => {
@@ -9293,17 +9294,17 @@ class SdNumberInput {
         const inputStyles = {
             textAlign: this.useButton ? 'center' : 'right',
         };
-        return (hAsync("sd-field", { key: 'ea231ae67c1e209d4c9adca87bd9760bcd28ec51', name: this.name, label: this.label, insideLabel: this.insideLabel, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, ref: el => (this.formField = el), style: inputWidth }, hAsync("label", { key: '76bbc2fb1e36d25887ac0559ff7f34617a35883e', class: {
+        return (hAsync("sd-field", { key: '7aa387eeb5850052e121931b3f8183373b4319aa', name: this.name, label: this.label, insideLabel: this.insideLabel, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, ref: el => (this.formField = el), style: inputWidth }, hAsync("label", { key: 'f5bbb6c76e32de4aefe59c6958a38e1a560f05c9', class: {
                 'sd-number-input': true,
                 [this.getInputStatus()]: true,
                 'sd-number-input--with-buttons': this.useButton,
-            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, hAsync("input", { key: '7978c4e8383017b9a8213e827f92c2d9ccc7b275', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__input ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, style: inputStyles, onFocus: this.handleFocus, onBlur: this.handleBlur }), this.useButton && (hAsync("div", { key: 'aff328615ab939724ee0f77f4b7ac8b046eb16d1', class: "sd-number-input__buttons" }, hAsync("button", { key: 'a27a592cc4e74b3272e3473988dbd877e9d0afd3', type: "button", class: {
+            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, hAsync("input", { key: 'fc26b7cf0d121025c9a748b158640e03188d72d3', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__input ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, style: inputStyles, onFocus: this.handleFocus, onBlur: this.handleBlur }), this.useButton && (hAsync("div", { key: 'c9325ea7dd19c02fead55a0d63ac0b7b16143d08', class: "sd-number-input__buttons" }, hAsync("button", { key: 'ec96811ce7046a3fe9506ca0635db97413d8283a', type: "button", class: {
                 'sd-number-input__button': true,
                 'sd-number-input__button--decrement': true,
-            }, disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, hAsync("sd-icon", { key: '79853e0a9ab38cfaafbd8027dae1a0732702d5bc', name: "minus", size: 12, color: this.isDecrementDisabled() ? 'grey_45' : 'brilliantblue_70' })), hAsync("button", { key: '0993c22719cdbdf3982dea138653ba1f2f6aa523', type: "button", class: {
+            }, disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, hAsync("sd-icon", { key: '70311a7723356ecc88125042d366bf567b0b5a2a', name: "minus", size: 12, color: this.isDecrementDisabled() ? 'grey_45' : 'brilliantblue_70' })), hAsync("button", { key: 'b7086218dc98fec4287e4becb0d834634fd52055', type: "button", class: {
                 'sd-number-input__button': true,
                 'sd-number-input__button--increment': true,
-            }, disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, hAsync("sd-icon", { key: '6da02951a443a1a46fd44f6bd7c1a7ed41af0b01', name: "add", size: 12, color: this.isIncrementDisabled() ? 'grey_45' : 'brilliantblue_70' })))))));
+            }, disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, hAsync("sd-icon", { key: 'b945a1561978dc4bba1868fa57652e94a6bcfc34', name: "add", size: 12, color: this.isIncrementDisabled() ? 'grey_45' : 'brilliantblue_70' })))))));
     }
     static get watchers() { return {
         "value": [{
@@ -12442,9 +12443,9 @@ class SdTextarea {
     }; }
 }
-const sdToastMessageCss = () => `sd-toast-message{display:block;width:fit-content;height:fit-content}sd-toast-message .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 .sd-toast-message--hidden{opacity:0;visibility:hidden;pointer-events:none}sd-toast-message .sd-toast-message__icon{display:flex;align-items:center;flex-shrink:0}sd-toast-message .sd-toast-message__content{display:flex;flex:1}sd-toast-message .sd-toast-message__message{font-size:14px;line-height:20px;font-weight:400}sd-toast-message .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 .sd-toast-message__link:hover{opacity:0.8}sd-toast-message .sd-toast-message__button{flex-shrink:0}sd-toast-message .sd-toast-message__button button{color:var(--button-text-color, inherit) !important}sd-toast-message .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 .sd-toast-message__close:hover{opacity:0.7}sd-toast-message .sd-toast-message__close:active{opacity:0.5}`;
+const sdToastCss = () => `sd-toast{display:block;width:fit-content;height:fit-content}sd-toast .sd-toast{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 .sd-toast--hidden{opacity:0;visibility:hidden;pointer-events:none}sd-toast .sd-toast__icon{display:flex;align-items:center;flex-shrink:0}sd-toast .sd-toast__content{display:flex;flex:1}sd-toast .sd-toast__message{font-size:14px;line-height:20px;font-weight:400}sd-toast .sd-toast__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 .sd-toast__link:hover{opacity:0.8}sd-toast .sd-toast__button{flex-shrink:0}sd-toast .sd-toast__button button{color:var(--button-text-color, inherit) !important}sd-toast .sd-toast__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 .sd-toast__close:hover{opacity:0.7}sd-toast .sd-toast__close:active{opacity:0.5}`;
-class SdToastMessage {
+class SdToast {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.close = createEvent(this, "sdClose");
@@ -12476,27 +12477,27 @@ class SdToastMessage {
         this.buttonClick.emit();
     };
     getContainerClasses() {
-        const classes = ['sd-toast-message', `sd-toast-message--${this.type}`];
+        const classes = ['sd-toast', `sd-toast--${this.type}`];
         if (!this.isVisible) {
-            classes.push('sd-toast-message--hidden');
+            classes.push('sd-toast--hidden');
         }
         return classes.join(' ');
     }
     render() {
-        const colorTokens = SdToastMessage.COLOR_OF_TYPE[this.type];
+        const colorTokens = SdToast.COLOR_OF_TYPE[this.type];
         const colors = {
             background: resolveColor(colorTokens.background),
             text: resolveColor(colorTokens.text),
         };
-        return (hAsync("div", { key: '5fd84c67e2766016835cfa6fb87a6624b654338d', style: {
+        return (hAsync("div", { key: '8118f67a55a3080ea91ffdfbd929bbe3464ab044', style: {
                 '--sd-toast-bg': colors.background,
                 '--sd-toast-text': colors.text,
-            } }, hAsync("div", { key: '00cbdacb890e65c6a4a1980933496e3a007d4c55', class: this.getContainerClasses(), role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (hAsync("div", { key: '40a4942dafb3c7b5e720ece5af28bfbe40a05726', class: "sd-toast-message__icon" }, hAsync("sd-icon", { key: 'a2541d653e24e33a2496a36f476a98acd81d1d9d', name: this.icon, size: 16, color: colors.text }))), hAsync("div", { key: '09d913c231f397813f4c145577113334b4d8936c', class: "sd-toast-message__content" }, hAsync("span", { key: '1b6ddeadab09234698824b2e07b6b3170a52b742', class: "sd-toast-message__message" }, this.message)), this.link && (hAsync("a", { key: '2c85646a763edb49dfd4ace150b11704064ffacb', href: this.link, class: "sd-toast-message__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (hAsync("sd-button", { key: '5e53f5a629c3b9a1000b8606877d833eaf56de2a', 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.useClose && (hAsync("button", { key: '78583506f960dab8c2e978a51de52fa0cfecc559', type: "button", class: "sd-toast-message__close", onClick: this.handleClose, "aria-label": "Close", title: "Close" }, hAsync("sd-icon", { key: '926c90a10942c2bb2ed0815236e2857d3d46b6f6', name: "close", size: 12, color: colors.text }))))));
+            } }, hAsync("div", { key: 'f05c16b0c8ef6de2d62161f80591cb3a82c24434', class: this.getContainerClasses(), role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (hAsync("div", { key: 'b16fee2031c4093c263229d2ef07ad8f6e69778b', class: "sd-toast__icon" }, hAsync("sd-icon", { key: 'cd8b4c4d9cbc329fdfc99236ca56a49658c0ca8c', name: this.icon, size: 16, color: colors.text }))), hAsync("div", { key: '888748872d886745ace2ef8491d7098528df8a46', class: "sd-toast__content" }, hAsync("span", { key: '31b285a6b6a03b833577b4a9fb860fd76e066cb6', class: "sd-toast__message" }, this.message)), this.link && (hAsync("a", { key: '61d1aacf70e7062abbedd2364474e7da990f485f', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (hAsync("sd-button", { key: '94aa75ef25ee18f0577d5539337152d654dab5c1', class: `sd-toast__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.useClose && (hAsync("button", { key: 'db0b83f7030feb5459597156c2d25f3437b91904', type: "button", class: "sd-toast__close", onClick: this.handleClose, "aria-label": "Close", title: "Close" }, hAsync("sd-icon", { key: 'a3aab6c19c32043182f2d05d2583271520458493', name: "close", size: 12, color: colors.text }))))));
     }
-    static get style() { return sdToastMessageCss(); }
+    static get style() { return sdToastCss(); }
     static get cmpMeta() { return {
         "$flags$": 512,
-        "$tagName$": "sd-toast-message",
+        "$tagName$": "sd-toast",
         "$members$": {
             "icon": [1],
             "message": [1],
@@ -12737,7 +12738,7 @@ registerComponents([
   SdTabs,
   SdTag,
   SdTextarea,
-  SdToastMessage,
+  SdToast,
   SdToggle,
   SdToggleButton,
   SdTooltip,

package/hydrate/index.mjs CHANGED Viewed

@@ -6129,7 +6129,7 @@ class SdDateRangePicker {
     }; }
 }
-const sdFieldCss = () => `sd-field{display:inline-flex;flex-flow:column nowrap;height:fit-content;width:100%}sd-field .sd-field *:focus,sd-field .sd-field *:focus-visible,sd-field .sd-field *:focus-within{outline:none !important}sd-field .sd-field:not(.sd-field--disabled):hover .sd-field__control{border:1px solid #0075ff !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field.sd-field--disabled{cursor:not-allowed}sd-field .sd-field.sd-field--disabled .sd-field__wrapper{cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__label-inside{border-color:#cccccc;color:#888888;cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__control{background-color:#eeeeee;border-color:#cccccc;color:#888888;cursor:not-allowed !important}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label{display:flex;align-items:center;margin-right:12px}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__required-icon{margin-right:4px}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__text{font-size:12px;line-height:20px;color:#333333;white-space:nowrap}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__tooltip{margin-left:2px}sd-field .sd-field--has-label-inside .sd-field__wrapper .sd-field__label{margin-right:0;display:flex;align-items:center;justify-content:center;padding:3px 12px;border:1px solid #cccccc;border-right:none;border-radius:4px 0 0 4px;border-color:#aaaaaa;background-color:#f6f6f6}sd-field .sd-field__wrapper{width:100%;height:28px;display:flex;align-items:center;flex-flow:row nowrap;position:relative;color:#333333;cursor:pointer;-webkit-user-select:none;user-select:none}sd-field .sd-field__wrapper .sd-field__control{position:relative;width:100%;height:100%;display:flex;flex:1;border:1px solid #aaaaaa;border-radius:4px;background:white}sd-field .sd-field__wrapper .sd-field__control--label-inside{border-top-left-radius:0px;border-bottom-left-radius:0px}sd-field .sd-field--error:not(:hover) .sd-field__wrapper .sd-field__control{border:1px solid #fb4444 !important}sd-field .sd-field.sd-field--focus .sd-field__wrapper .sd-field__control,sd-field .sd-field.sd-field--hover .sd-field__wrapper .sd-field__control{border:1px solid #0075ff !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field .sd-field__error-message{color:#fb4444;font-size:12px;line-height:20px;margin-top:4px}`;
+const sdFieldCss = () => `sd-field{display:inline-flex;flex-flow:column nowrap;height:fit-content;width:100%}sd-field .sd-field *:focus,sd-field .sd-field *:focus-visible,sd-field .sd-field *:focus-within{outline:none !important}sd-field .sd-field:not(.sd-field--disabled):hover .sd-field__control{border:1px solid #0075ff !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field.sd-field--disabled{cursor:not-allowed}sd-field .sd-field.sd-field--disabled .sd-field__wrapper{cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__label-inside{border-color:#cccccc;color:#888888;cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__control{background-color:#eeeeee;border-color:#cccccc;color:#888888;cursor:not-allowed !important}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label{display:flex;align-items:center;margin-right:12px}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__required-icon{margin-right:4px}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__text{font-size:12px;line-height:20px;color:#333333;white-space:nowrap}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__tooltip{margin-left:2px}sd-field .sd-field--has-label-inside .sd-field__wrapper .sd-field__label{margin-right:0;display:flex;align-items:center;justify-content:center;padding:3px 12px;border:1px solid #cccccc;border-right:none;border-radius:4px 0 0 4px;border-color:#aaaaaa;background-color:#f6f6f6}sd-field .sd-field__wrapper{width:100%;height:28px;display:flex;align-items:center;flex-flow:row nowrap;position:relative;color:#333333;cursor:pointer;-webkit-user-select:none;user-select:none}sd-field .sd-field__wrapper .sd-field__control{position:relative;width:100%;height:100%;display:flex;flex:1;border:1px solid #aaaaaa;border-radius:4px;background:white}sd-field .sd-field__wrapper .sd-field__control--label-inside{border-top-left-radius:0px;border-bottom-left-radius:0px}sd-field .sd-field--error:not(:hover) .sd-field__wrapper .sd-field__control{border:1px solid #fb4444 !important}sd-field .sd-field.sd-field--focus .sd-field__wrapper .sd-field__control,sd-field .sd-field.sd-field--hover .sd-field__wrapper .sd-field__control{border:1px solid #0075ff !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field.sd-field--pass .sd-field__wrapper .sd-field__control{border:1px solid #2bce6c !important}sd-field .sd-field .sd-field__error-message{color:#fb4444;font-size:12px;line-height:20px;margin-top:4px}`;
 const FORM_PARENT_TAGS = [
     'sd-select',
@@ -7513,7 +7513,7 @@ const CheckFilled20 = (props) => (hAsync("svg", { ...props, width: "20", height:
 const CheckFilled24 = (props) => (hAsync("svg", { ...props, width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, hAsync("path", { d: "M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM18.1299 8.46973C17.837 8.17703 17.3622 8.1769 17.0693 8.46973L10.8125 14.7275L7.09961 11.0146C6.80684 10.7221 6.33191 10.7223 6.03906 11.0146C5.74625 11.3075 5.7464 11.7823 6.03906 12.0752L10.1045 16.1416C10.495 16.5321 11.129 16.5321 11.5195 16.1416L18.1299 9.53027C18.4228 9.23738 18.4228 8.76262 18.1299 8.46973Z", fill: "currentColor" })));
-const CheckFilled = {
+const checkFilled = {
     8: CheckFilled8,
     10: CheckFilled10,
     12: CheckFilled12,
@@ -7522,9 +7522,9 @@ const CheckFilled = {
     24: CheckFilled24,
 };
-var CheckFilled$1 = /*#__PURE__*/Object.freeze({
+var CheckFilled = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  CheckFilled: CheckFilled
+  checkFilled: checkFilled
 });
 const CheckOutline8 = (props) => (hAsync("svg", { ...props, width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, hAsync("path", { d: "M4 0.0332031C6.19058 0.0333789 7.9668 1.80938 7.9668 4C7.96662 6.19047 6.19047 7.96662 4 7.9668C1.80939 7.96679 0.0333844 6.19057 0.0332031 4C0.0332031 1.80927 1.80927 0.0332059 4 0.0332031ZM4 0.632812C2.14064 0.632815 0.632812 2.14064 0.632812 4C0.632994 5.8592 2.14076 7.36621 4 7.36621C5.8591 7.36603 7.36603 5.8591 7.36621 4C7.36621 2.14075 5.85921 0.632988 4 0.632812ZM5.6543 2.78809C5.77145 2.67093 5.96097 2.67093 6.07812 2.78809C6.19518 2.90525 6.19525 3.09479 6.07812 3.21191L3.875 5.41504C3.72544 5.5646 3.48274 5.56529 3.33301 5.41602L1.97754 4.06055C1.86045 3.94345 1.86057 3.75389 1.97754 3.63672C2.0947 3.51956 2.28421 3.51956 2.40137 3.63672L3.60352 4.83887L5.6543 2.78809Z", fill: "currentColor" })));
@@ -7539,7 +7539,7 @@ const CheckOutline20 = (props) => (hAsync("svg", { ...props, width: "20", height
 const CheckOutline24 = (props) => (hAsync("svg", { ...props, width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, hAsync("path", { d: "M12 0.25C18.4893 0.25 23.75 5.51065 23.75 12C23.75 18.4893 18.4893 23.75 12 23.75C5.51065 23.75 0.25 18.4893 0.25 12C0.25 5.51065 5.51065 0.25 12 0.25ZM12 1.75C6.33908 1.75 1.75 6.33908 1.75 12C1.75 17.6609 6.33908 22.25 12 22.25C17.6609 22.25 22.25 17.6609 22.25 12C22.25 6.33908 17.6609 1.75 12 1.75ZM17.0693 8.46973C17.3622 8.1769 17.837 8.17703 18.1299 8.46973C18.4228 8.76262 18.4228 9.23738 18.1299 9.53027L11.5195 16.1416C11.129 16.5321 10.495 16.5321 10.1045 16.1416L6.03906 12.0752C5.7464 11.7823 5.74625 11.3075 6.03906 11.0146C6.33191 10.7223 6.80684 10.7221 7.09961 11.0146L10.8125 14.7275L17.0693 8.46973Z", fill: "currentColor" })));
-const CheckOutline = {
+const checkOutline = {
     8: CheckOutline8,
     10: CheckOutline10,
     12: CheckOutline12,
@@ -7548,9 +7548,9 @@ const CheckOutline = {
     24: CheckOutline24,
 };
-var CheckOutline$1 = /*#__PURE__*/Object.freeze({
+var CheckOutline = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  CheckOutline: CheckOutline
+  checkOutline: checkOutline
 });
 const ClockFilled8 = (props) => (hAsync("svg", { ...props, width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, hAsync("path", { d: "M4.00034 0.333313C6.02523 0.333489 7.66635 1.97537 7.66635 4.00031C7.66618 6.02509 6.02512 7.66614 4.00034 7.66632C1.9754 7.66632 0.333519 6.0252 0.333344 4.00031C0.333344 1.97526 1.97529 0.333313 4.00034 0.333313ZM4.00034 1.33331C3.81636 1.33331 3.66751 1.48239 3.66733 1.66632V3.99933C3.66733 4.18342 3.81624 4.33331 4.00034 4.33331H6.33334C6.51728 4.33313 6.66733 4.18331 6.66733 3.99933C6.66697 3.81565 6.51706 3.6665 6.33334 3.66632H4.33334V1.66632C4.33316 1.4825 4.18416 1.33349 4.00034 1.33331Z", fill: "currentColor" })));
@@ -8705,8 +8705,8 @@ const Icons = {
     ...CaretRight,
     ...CaretUp,
     ...Check,
-    ...CheckFilled$1,
-    ...CheckOutline$1,
+    ...CheckFilled,
+    ...CheckOutline,
     ...ClockFilled,
     ...ClockOutline,
     ...Close,
@@ -9221,6 +9221,7 @@ class SdNumberInput {
         }
     };
     handleFocus = (event) => {
+        this.focused = true;
         this.focus?.emit(event);
     };
     handleBlur = async (event) => {
@@ -9291,17 +9292,17 @@ class SdNumberInput {
         const inputStyles = {
             textAlign: this.useButton ? 'center' : 'right',
         };
-        return (hAsync("sd-field", { key: 'ea231ae67c1e209d4c9adca87bd9760bcd28ec51', name: this.name, label: this.label, insideLabel: this.insideLabel, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, ref: el => (this.formField = el), style: inputWidth }, hAsync("label", { key: '76bbc2fb1e36d25887ac0559ff7f34617a35883e', class: {
+        return (hAsync("sd-field", { key: '7aa387eeb5850052e121931b3f8183373b4319aa', name: this.name, label: this.label, insideLabel: this.insideLabel, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, ref: el => (this.formField = el), style: inputWidth }, hAsync("label", { key: 'f5bbb6c76e32de4aefe59c6958a38e1a560f05c9', class: {
                 'sd-number-input': true,
                 [this.getInputStatus()]: true,
                 'sd-number-input--with-buttons': this.useButton,
-            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, hAsync("input", { key: '7978c4e8383017b9a8213e827f92c2d9ccc7b275', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__input ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, style: inputStyles, onFocus: this.handleFocus, onBlur: this.handleBlur }), this.useButton && (hAsync("div", { key: 'aff328615ab939724ee0f77f4b7ac8b046eb16d1', class: "sd-number-input__buttons" }, hAsync("button", { key: 'a27a592cc4e74b3272e3473988dbd877e9d0afd3', type: "button", class: {
+            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, hAsync("input", { key: 'fc26b7cf0d121025c9a748b158640e03188d72d3', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__input ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, style: inputStyles, onFocus: this.handleFocus, onBlur: this.handleBlur }), this.useButton && (hAsync("div", { key: 'c9325ea7dd19c02fead55a0d63ac0b7b16143d08', class: "sd-number-input__buttons" }, hAsync("button", { key: 'ec96811ce7046a3fe9506ca0635db97413d8283a', type: "button", class: {
                 'sd-number-input__button': true,
                 'sd-number-input__button--decrement': true,
-            }, disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, hAsync("sd-icon", { key: '79853e0a9ab38cfaafbd8027dae1a0732702d5bc', name: "minus", size: 12, color: this.isDecrementDisabled() ? 'grey_45' : 'brilliantblue_70' })), hAsync("button", { key: '0993c22719cdbdf3982dea138653ba1f2f6aa523', type: "button", class: {
+            }, disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, hAsync("sd-icon", { key: '70311a7723356ecc88125042d366bf567b0b5a2a', name: "minus", size: 12, color: this.isDecrementDisabled() ? 'grey_45' : 'brilliantblue_70' })), hAsync("button", { key: 'b7086218dc98fec4287e4becb0d834634fd52055', type: "button", class: {
                 'sd-number-input__button': true,
                 'sd-number-input__button--increment': true,
-            }, disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, hAsync("sd-icon", { key: '6da02951a443a1a46fd44f6bd7c1a7ed41af0b01', name: "add", size: 12, color: this.isIncrementDisabled() ? 'grey_45' : 'brilliantblue_70' })))))));
+            }, disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, hAsync("sd-icon", { key: 'b945a1561978dc4bba1868fa57652e94a6bcfc34', name: "add", size: 12, color: this.isIncrementDisabled() ? 'grey_45' : 'brilliantblue_70' })))))));
     }
     static get watchers() { return {
         "value": [{
@@ -12440,9 +12441,9 @@ class SdTextarea {
     }; }
 }
-const sdToastMessageCss = () => `sd-toast-message{display:block;width:fit-content;height:fit-content}sd-toast-message .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 .sd-toast-message--hidden{opacity:0;visibility:hidden;pointer-events:none}sd-toast-message .sd-toast-message__icon{display:flex;align-items:center;flex-shrink:0}sd-toast-message .sd-toast-message__content{display:flex;flex:1}sd-toast-message .sd-toast-message__message{font-size:14px;line-height:20px;font-weight:400}sd-toast-message .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 .sd-toast-message__link:hover{opacity:0.8}sd-toast-message .sd-toast-message__button{flex-shrink:0}sd-toast-message .sd-toast-message__button button{color:var(--button-text-color, inherit) !important}sd-toast-message .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 .sd-toast-message__close:hover{opacity:0.7}sd-toast-message .sd-toast-message__close:active{opacity:0.5}`;
+const sdToastCss = () => `sd-toast{display:block;width:fit-content;height:fit-content}sd-toast .sd-toast{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 .sd-toast--hidden{opacity:0;visibility:hidden;pointer-events:none}sd-toast .sd-toast__icon{display:flex;align-items:center;flex-shrink:0}sd-toast .sd-toast__content{display:flex;flex:1}sd-toast .sd-toast__message{font-size:14px;line-height:20px;font-weight:400}sd-toast .sd-toast__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 .sd-toast__link:hover{opacity:0.8}sd-toast .sd-toast__button{flex-shrink:0}sd-toast .sd-toast__button button{color:var(--button-text-color, inherit) !important}sd-toast .sd-toast__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 .sd-toast__close:hover{opacity:0.7}sd-toast .sd-toast__close:active{opacity:0.5}`;
-class SdToastMessage {
+class SdToast {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.close = createEvent(this, "sdClose");
@@ -12474,27 +12475,27 @@ class SdToastMessage {
         this.buttonClick.emit();
     };
     getContainerClasses() {
-        const classes = ['sd-toast-message', `sd-toast-message--${this.type}`];
+        const classes = ['sd-toast', `sd-toast--${this.type}`];
         if (!this.isVisible) {
-            classes.push('sd-toast-message--hidden');
+            classes.push('sd-toast--hidden');
         }
         return classes.join(' ');
     }
     render() {
-        const colorTokens = SdToastMessage.COLOR_OF_TYPE[this.type];
+        const colorTokens = SdToast.COLOR_OF_TYPE[this.type];
         const colors = {
             background: resolveColor(colorTokens.background),
             text: resolveColor(colorTokens.text),
         };
-        return (hAsync("div", { key: '5fd84c67e2766016835cfa6fb87a6624b654338d', style: {
+        return (hAsync("div", { key: '8118f67a55a3080ea91ffdfbd929bbe3464ab044', style: {
                 '--sd-toast-bg': colors.background,
                 '--sd-toast-text': colors.text,
-            } }, hAsync("div", { key: '00cbdacb890e65c6a4a1980933496e3a007d4c55', class: this.getContainerClasses(), role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (hAsync("div", { key: '40a4942dafb3c7b5e720ece5af28bfbe40a05726', class: "sd-toast-message__icon" }, hAsync("sd-icon", { key: 'a2541d653e24e33a2496a36f476a98acd81d1d9d', name: this.icon, size: 16, color: colors.text }))), hAsync("div", { key: '09d913c231f397813f4c145577113334b4d8936c', class: "sd-toast-message__content" }, hAsync("span", { key: '1b6ddeadab09234698824b2e07b6b3170a52b742', class: "sd-toast-message__message" }, this.message)), this.link && (hAsync("a", { key: '2c85646a763edb49dfd4ace150b11704064ffacb', href: this.link, class: "sd-toast-message__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (hAsync("sd-button", { key: '5e53f5a629c3b9a1000b8606877d833eaf56de2a', 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.useClose && (hAsync("button", { key: '78583506f960dab8c2e978a51de52fa0cfecc559', type: "button", class: "sd-toast-message__close", onClick: this.handleClose, "aria-label": "Close", title: "Close" }, hAsync("sd-icon", { key: '926c90a10942c2bb2ed0815236e2857d3d46b6f6', name: "close", size: 12, color: colors.text }))))));
+            } }, hAsync("div", { key: 'f05c16b0c8ef6de2d62161f80591cb3a82c24434', class: this.getContainerClasses(), role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (hAsync("div", { key: 'b16fee2031c4093c263229d2ef07ad8f6e69778b', class: "sd-toast__icon" }, hAsync("sd-icon", { key: 'cd8b4c4d9cbc329fdfc99236ca56a49658c0ca8c', name: this.icon, size: 16, color: colors.text }))), hAsync("div", { key: '888748872d886745ace2ef8491d7098528df8a46', class: "sd-toast__content" }, hAsync("span", { key: '31b285a6b6a03b833577b4a9fb860fd76e066cb6', class: "sd-toast__message" }, this.message)), this.link && (hAsync("a", { key: '61d1aacf70e7062abbedd2364474e7da990f485f', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (hAsync("sd-button", { key: '94aa75ef25ee18f0577d5539337152d654dab5c1', class: `sd-toast__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.useClose && (hAsync("button", { key: 'db0b83f7030feb5459597156c2d25f3437b91904', type: "button", class: "sd-toast__close", onClick: this.handleClose, "aria-label": "Close", title: "Close" }, hAsync("sd-icon", { key: 'a3aab6c19c32043182f2d05d2583271520458493', name: "close", size: 12, color: colors.text }))))));
     }
-    static get style() { return sdToastMessageCss(); }
+    static get style() { return sdToastCss(); }
     static get cmpMeta() { return {
         "$flags$": 512,
-        "$tagName$": "sd-toast-message",
+        "$tagName$": "sd-toast",
         "$members$": {
             "icon": [1],
             "message": [1],
@@ -12735,7 +12736,7 @@ registerComponents([
   SdTabs,
   SdTag,
   SdTextarea,
-  SdToastMessage,
+  SdToast,
   SdToggle,
   SdToggleButton,
   SdTooltip,

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
  "name": "@sellmate/design-system",
- "version": "1.0.17",
+ "version": "1.0.19",
  "description": "Sellmate Design System - Web Components Library built with Stencil",
  "keywords": [
   "web-components",

package/dist/cjs/sd-toast-message.cjs.entry.js DELETED Viewed

@@ -1,60 +0,0 @@
-'use strict';
-var index = require('./index--TtofS7_.js');
-var resolveColor = require('./resolveColor-B7Ku3IGq.js');
-const sdToastMessageCss = () => `sd-toast-message{display:block;width:fit-content;height:fit-content}sd-toast-message .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 .sd-toast-message--hidden{opacity:0;visibility:hidden;pointer-events:none}sd-toast-message .sd-toast-message__icon{display:flex;align-items:center;flex-shrink:0}sd-toast-message .sd-toast-message__content{display:flex;flex:1}sd-toast-message .sd-toast-message__message{font-size:14px;line-height:20px;font-weight:400}sd-toast-message .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 .sd-toast-message__link:hover{opacity:0.8}sd-toast-message .sd-toast-message__button{flex-shrink:0}sd-toast-message .sd-toast-message__button button{color:var(--button-text-color, inherit) !important}sd-toast-message .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 .sd-toast-message__close:hover{opacity:0.7}sd-toast-message .sd-toast-message__close:active{opacity:0.5}`;
-const SdToastMessage = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.close = index.createEvent(this, "sdClose");
-        this.buttonClick = index.createEvent(this, "sdButtonClick");
-    }
-    icon;
-    message;
-    link;
-    linkLabel;
-    buttonLabel;
-    useClose = false;
-    type = 'basicDark';
-    close;
-    buttonClick;
-    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_40', text: 'grey_90' },
-        complete: { background: 'green_75', text: 'white' },
-        progress: { background: 'brilliantblue_80', text: 'white' },
-    };
-    handleClose = () => {
-        this.isVisible = false;
-        this.close.emit();
-    };
-    handleButtonClick = () => {
-        this.buttonClick.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.resolveColor(colorTokens.background),
-            text: resolveColor.resolveColor(colorTokens.text),
-        };
-        return (index.h("div", { key: '5fd84c67e2766016835cfa6fb87a6624b654338d', style: {
-                '--sd-toast-bg': colors.background,
-                '--sd-toast-text': colors.text,
-            } }, index.h("div", { key: '00cbdacb890e65c6a4a1980933496e3a007d4c55', class: this.getContainerClasses(), role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: '40a4942dafb3c7b5e720ece5af28bfbe40a05726', class: "sd-toast-message__icon" }, index.h("sd-icon", { key: 'a2541d653e24e33a2496a36f476a98acd81d1d9d', name: this.icon, size: 16, color: colors.text }))), index.h("div", { key: '09d913c231f397813f4c145577113334b4d8936c', class: "sd-toast-message__content" }, index.h("span", { key: '1b6ddeadab09234698824b2e07b6b3170a52b742', class: "sd-toast-message__message" }, this.message)), this.link && (index.h("a", { key: '2c85646a763edb49dfd4ace150b11704064ffacb', href: this.link, class: "sd-toast-message__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (index.h("sd-button", { key: '5e53f5a629c3b9a1000b8606877d833eaf56de2a', 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.resolveColor('grey_95') } : {} })), this.useClose && (index.h("button", { key: '78583506f960dab8c2e978a51de52fa0cfecc559', type: "button", class: "sd-toast-message__close", onClick: this.handleClose, "aria-label": "Close", title: "Close" }, index.h("sd-icon", { key: '926c90a10942c2bb2ed0815236e2857d3d46b6f6', name: "close", size: 12, color: colors.text }))))));
-    }
-};
-SdToastMessage.style = sdToastMessageCss();
-exports.sd_toast_message = SdToastMessage;

package/dist/components/sd-toast-message.js DELETED Viewed

@@ -1 +0,0 @@

- import{p as s,H as t,c as e,h as a,t as o}from"./p-4iQAU7kM.js";import{r as i}from"./p-DcGvp3RM.js";import{d as n}from"./p-BJ1sZUZE.js";import{d}from"./p-IlOHs7VA.js";const c=s(class s extends t{constructor(s){super(),!1!==s&&this.__registerHost(),this.close=e(this,"sdClose"),this.buttonClick=e(this,"sdButtonClick")}icon;message;link;linkLabel;buttonLabel;useClose=!1;type="basicDark";close;buttonClick;isVisible=!0;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_40",text:"grey_90"},complete:{background:"green_75",text:"white"},progress:{background:"brilliantblue_80",text:"white"}};handleClose=()=>{this.isVisible=!1,this.close.emit()};handleButtonClick=()=>{this.buttonClick.emit()};getContainerClasses(){const s=["sd-toast-message","sd-toast-message--"+this.type];return this.isVisible||s.push("sd-toast-message--hidden"),s.join(" ")}render(){const t=s.COLOR_OF_TYPE[this.type],e={background:i(t.background),text:i(t.text)};return a("div",{key:"5fd84c67e2766016835cfa6fb87a6624b654338d",style:{"--sd-toast-bg":e.background,"--sd-toast-text":e.text}},a("div",{key:"00cbdacb890e65c6a4a1980933496e3a007d4c55",class:this.getContainerClasses(),role:"status","aria-live":"polite","aria-atomic":"true"},this.icon&&a("div",{key:"40a4942dafb3c7b5e720ece5af28bfbe40a05726",class:"sd-toast-message__icon"},a("sd-icon",{key:"a2541d653e24e33a2496a36f476a98acd81d1d9d",name:this.icon,size:16,color:e.text})),a("div",{key:"09d913c231f397813f4c145577113334b4d8936c",class:"sd-toast-message__content"},a("span",{key:"1b6ddeadab09234698824b2e07b6b3170a52b742",class:"sd-toast-message__message"},this.message)),this.link&&a("a",{key:"2c85646a763edb49dfd4ace150b11704064ffacb",href:this.link,class:"sd-toast-message__link",target:"_blank",rel:"noopener noreferrer"},this.linkLabel||this.link),this.buttonLabel&&a("sd-button",{key:"5e53f5a629c3b9a1000b8606877d833eaf56de2a",class:"sd-toast-message__button "+("basicLight"===this.type?"text-white":""),label:this.buttonLabel,variant:"primary",color:"basicLight"===this.type?"oceanblue_75":"white",size:"sm",onSdClick:this.handleButtonClick,style:"basicLight"!==this.type?{"--button-text-color":i("grey_95")}:{}}),this.useClose&&a("button",{key:"78583506f960dab8c2e978a51de52fa0cfecc559",type:"button",class:"sd-toast-message__close",onClick:this.handleClose,"aria-label":"Close",title:"Close"},a("sd-icon",{key:"926c90a10942c2bb2ed0815236e2857d3d46b6f6",name:"close",size:12,color:e.text}))))}static get style(){return"sd-toast-message{display:block;width:fit-content;height:fit-content}sd-toast-message .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 .sd-toast-message--hidden{opacity:0;visibility:hidden;pointer-events:none}sd-toast-message .sd-toast-message__icon{display:flex;align-items:center;flex-shrink:0}sd-toast-message .sd-toast-message__content{display:flex;flex:1}sd-toast-message .sd-toast-message__message{font-size:14px;line-height:20px;font-weight:400}sd-toast-message .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 .sd-toast-message__link:hover{opacity:0.8}sd-toast-message .sd-toast-message__button{flex-shrink:0}sd-toast-message .sd-toast-message__button button{color:var(--button-text-color, inherit) !important}sd-toast-message .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 .sd-toast-message__close:hover{opacity:0.7}sd-toast-message .sd-toast-message__close:active{opacity:0.5}"}},[512,"sd-toast-message",{icon:[1],message:[1],link:[1],linkLabel:[1,"link-label"],buttonLabel:[1,"button-label"],useClose:[4,"use-close"],type:[1],isVisible:[32]}]),l=c,r=function(){"undefined"!=typeof customElements&&["sd-toast-message","sd-button","sd-icon"].forEach((s=>{switch(s){case"sd-toast-message":customElements.get(o(s))||customElements.define(o(s),c);break;case"sd-button":customElements.get(o(s))||n();break;case"sd-icon":customElements.get(o(s))||d()}}))};export{l as SdToastMessage,r as defineCustomElement}