@sellmate/design-system 1.0.62 → 1.0.63

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

@@ -0,0 +1,376 @@
+import { h, Host } from "@stencil/core";
+import { TABLE_ID_ATTR, } from "../constants";
+export class SdTr {
+    el;
+    columns;
+    selectable;
+    stickyColumn;
+    rowKey = '';
+    row = {};
+    tableId = '';
+    columnWidths = [];
+    isVisible = true;
+    _columns = [];
+    _selectable = false;
+    _stickyColumn = { left: 0, right: 0 };
+    _scrolledLeft = false;
+    _scrolledRight = false;
+    tableEl = null;
+    componentWillLoad() {
+        this.syncTableContext();
+        this.columnWidths = this.columnWidths ?? [];
+        this.resolveConfig();
+        this.columnWidths = this._columns.map(c => parseInt(c.width || '120', 10));
+        this.updateVisibilitySync();
+    }
+    componentDidLoad() {
+        this.syncTableContext();
+    }
+    syncTableContext() {
+        const table = this.el.closest('sd-table');
+        this.tableEl = table;
+        const fromMethod = table?.getTableIdSync?.();
+        const fromAttr = table?.getAttribute(TABLE_ID_ATTR);
+        const resolvedTableId = (fromMethod && fromMethod !== 'undefined' ? fromMethod : null) ??
+            (fromAttr && fromAttr !== 'undefined' ? fromAttr : null) ??
+            '';
+        if (resolvedTableId && resolvedTableId !== this.tableId) {
+            this.tableId = resolvedTableId;
+        }
+    }
+    resolveConfig() {
+        const config = this.tableEl?.getConfigSync?.();
+        this._columns = this.columns ?? config?.columns ?? [];
+        this._selectable = this.selectable ?? config?.selectable ?? false;
+        this._stickyColumn = this.stickyColumn ?? config?.stickyColumn ?? { left: 0, right: 0 };
+        this._scrolledLeft = config?.scrolledLeft ?? false;
+        this._scrolledRight = config?.scrolledRight ?? false;
+        if (config?.columnWidths && (this.columnWidths ?? []).length === 0) {
+            this.columnWidths = [...config.columnWidths];
+        }
+    }
+    async refreshConfig() {
+        this.resolveConfig();
+    }
+    async updateVisibility() {
+        this.updateVisibilitySync();
+    }
+    updateVisibilitySync() {
+        const rowIndex = parseInt(this.rowKey, 10);
+        const pageInfo = this.tableEl?.getPaginationInfoSync?.();
+        if (!pageInfo) {
+            this.isVisible = true;
+            return;
+        }
+        this.isVisible = rowIndex >= pageInfo.startIndex && rowIndex < pageInfo.endIndex;
+    }
+    async setColumnWidths(widths) {
+        this.columnWidths = widths;
+    }
+    async refreshSelection() {
+        const checkbox = this.el.querySelector('sd-checkbox');
+        if (checkbox) {
+            checkbox.value = this.isSelected();
+        }
+    }
+    get visibleColumns() {
+        return this._columns.filter(col => col.visible !== false);
+    }
+    formatValue(value) {
+        if (value === null || value === undefined) {
+            return '';
+        }
+        if (typeof value === 'number') {
+            return value.toLocaleString();
+        }
+        return String(value);
+    }
+    getCellValue(column) {
+        const { field, format, name } = column;
+        const value = typeof field === 'function' ? field(this.row) : field ? this.row[field] : this.row[name];
+        return format ? format(value, this.row) : this.formatValue(value);
+    }
+    getStickyStyle(colIdx) {
+        if (this.tableEl?.getStickyStyleSync) {
+            return this.tableEl.getStickyStyleSync(colIdx);
+        }
+        const leftOffset = this.columnWidths.slice(0, colIdx).reduce((a, b) => a + b, 0) + (this._selectable ? 52 : 0);
+        const rightOffset = this.columnWidths
+            .filter((_, i) => i >= this.visibleColumns.length - (this._stickyColumn.right || 0) && i > colIdx)
+            .reduce((a, b) => a + b, 0);
+        return {
+            '--sticky-left-offset': `${leftOffset}px`,
+            '--sticky-right-offset': `${rightOffset}px`,
+            'width': `${this.columnWidths[colIdx]}px`,
+            'minWidth': `${this.columnWidths[colIdx]}px`,
+            'maxWidth': `${this.columnWidths[colIdx]}px`,
+        };
+    }
+    isSelected() {
+        if (this.tableEl?.isRowSelectedSync) {
+            return this.tableEl.isRowSelectedSync(this.row);
+        }
+        return false;
+    }
+    handleSelect() {
+        if (this.tableEl?.updateRowSelectSync) {
+            this.tableEl.updateRowSelectSync(this.row);
+        }
+    }
+    render() {
+        const stickyLeftCount = this._stickyColumn.left || 0;
+        const stickyRightCount = this._stickyColumn.right || 0;
+        const stickyLeftCols = this.visibleColumns.slice(0, stickyLeftCount);
+        const middleCols = this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
+        const stickyRightCols = this.visibleColumns.slice(this.visibleColumns.length - stickyRightCount);
+        return (h(Host, { key: 'e0b035db61ba424f4a33cdb470c839cb23c696cc', style: { display: this.isVisible ? '' : 'none' } }, h("tr", { key: '224e8c360e01f81dee44d8c93f9e6724c3e87b4f', class: "tr" }, this._selectable && (h("td", { key: '34afbe37ae3f86054cc6151c31a9de4f20296aef', class: {
+                'td': true,
+                'td--selected': true,
+                'sticky-left': true,
+                'sticky-left-edge': stickyLeftCount === 0,
+                'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
+            }, style: { '--sticky-left-offset': '0px' } }, h("sd-checkbox", { key: '29ad82d0b043964fdfc68cb250deddeda8029b39', value: this.isSelected(), onSdUpdate: () => this.handleSelect() }))), stickyLeftCols.map((col, idx) => (h("td", { key: col.name, class: {
+                'td': true,
+                [`td--${col.align || 'left'}`]: true,
+                'sticky-left': true,
+                'sticky-left-edge': idx === stickyLeftCount - 1,
+                'is-scrolled-left': idx === stickyLeftCount - 1 && this._scrolledLeft,
+                [`${col.tdClass}`]: Boolean(col.tdClass),
+            }, style: this.getStickyStyle(idx) }, h("slot", { name: `${this.tableId}-${typeof col.field === 'string' ? col.field : col.name}-${this.rowKey}` }, h("span", null, this.getCellValue(col)))))), middleCols.map((col, relativeIdx) => {
+            const actualColIdx = stickyLeftCount + relativeIdx;
+            const fieldName = typeof col.field === 'string' ? col.field : col.name;
+            return (h("td", { key: col.name, class: {
+                    td: true,
+                    [`td--${col.align || 'left'}`]: true,
+                    [`${col.tdClass}`]: Boolean(col.tdClass),
+                }, style: this.getStickyStyle(actualColIdx) }, h("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, h("span", null, this.getCellValue(col)))));
+        }), stickyRightCols.map((col, relativeIdx) => {
+            const actualColIdx = this.visibleColumns.length - stickyRightCount + relativeIdx;
+            const fieldName = typeof col.field === 'string' ? col.field : col.name;
+            return (h("td", { key: col.name, class: {
+                    'td': true,
+                    [`td--${col.align || 'left'}`]: true,
+                    'sticky-right': true,
+                    'sticky-right-edge': relativeIdx === 0,
+                    'is-scrolled-right': relativeIdx === 0 && this._scrolledRight,
+                    [`${col.tdClass}`]: Boolean(col.tdClass),
+                }, style: this.getStickyStyle(actualColIdx) }, h("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, h("span", null, this.getCellValue(col)))));
+        }))));
+    }
+    static get is() { return "sd-tr"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sd-tr.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sd-tr.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "columns": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SdTableColumn[]",
+                    "resolved": "SdTableColumn[] | undefined",
+                    "references": {
+                        "SdTableColumn": {
+                            "location": "import",
+                            "path": "../constants",
+                            "id": "src/components/sd-table/constants.ts::SdTableColumn",
+                            "referenceLocation": "SdTableColumn"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "selectable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selectable"
+            },
+            "stickyColumn": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SdTableStickyColumn",
+                    "resolved": "SdTableStickyColumn | undefined",
+                    "references": {
+                        "SdTableStickyColumn": {
+                            "location": "import",
+                            "path": "../constants",
+                            "id": "src/components/sd-table/constants.ts::SdTableStickyColumn",
+                            "referenceLocation": "SdTableStickyColumn"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "rowKey": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "row-key",
+                "defaultValue": "''"
+            },
+            "row": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Row",
+                    "resolved": "Row",
+                    "references": {
+                        "Row": {
+                            "location": "import",
+                            "path": "../constants",
+                            "id": "src/components/sd-table/constants.ts::Row",
+                            "referenceLocation": "Row"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "tableId": {},
+            "columnWidths": {},
+            "isVisible": {},
+            "_columns": {},
+            "_selectable": {},
+            "_stickyColumn": {},
+            "_scrolledLeft": {},
+            "_scrolledRight": {}
+        };
+    }
+    static get methods() {
+        return {
+            "refreshConfig": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "updateVisibility": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "setColumnWidths": {
+                "complexType": {
+                    "signature": "(widths: number[]) => Promise<void>",
+                    "parameters": [{
+                            "name": "widths",
+                            "type": "number[]",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "refreshSelection": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}

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

@@ -39,7 +39,7 @@ export class SdTabs {
         return `square_xs_${color}`;
     }
     render() {
-        return (h("div", { key: 'df68b0102c4847bce978701991196b94447e82de', class: this.getContainerClasses() }, this.tabs.map((tab, index) => {
+        return (h("div", { key: '3ac46ee8a763ba5a4a566fb25d4e32366ff8288b', class: this.getContainerClasses() }, this.tabs.map((tab, index) => {
             const badgeName = this.getBadgeName(tab);
             return (h("div", { key: `tab-${index}`, class: this.getTabClasses(tab), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab.value) }, h("span", { "data-label": tab.label, class: "sd-tabs__label" }, tab.label), tab.badge && h("sd-tag", { name: badgeName, label: tab.badge.toString() })));
         })));

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

@@ -19,7 +19,7 @@ export class SdTag {
     render() {
         const config = this.resolvedConfig;
         const iconNode = this.renderIcon(config.icon, config.iconSize);
-        return (h("span", { key: 'acfc91bdd46c2f0fc53b066d6c6b9de94068c492', class: "sd-tag", style: {
+        return (h("span", { key: '773056b7cd351f05ec4c4b9fed8db790a8ab83d0', class: "sd-tag", style: {
                 '--sd-tag-background': config.background,
                 '--sd-tag-content': config.content,
                 '--sd-tag-height': config.height,
@@ -29,7 +29,7 @@ export class SdTag {
                 '--sd-tag-font-weight': config.fontWeight,
                 '--sd-tag-line-height': config.lineHeight,
                 '--sd-tag-radius': config.radius,
-            }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, h("span", { key: '8d7f7f40c4eb55687f2c7ebe66fba04c3846c0e2', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
+            }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, h("span", { key: '6271ce5e0f6cda83e668119e846a18cee3db3a16', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
     }
     static get is() { return "sd-tag"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-text-link/sd-text-link.css

@@ -10,6 +10,7 @@ sd-text-link .sd-text-link {
 }
 sd-text-link .sd-text-link__label {
   text-decoration: var(--sd-text-link-text-decoration);
+  color: var(--sd-text-link-color, inherit);
 }
 sd-text-link .sd-text-link:not(.sd-text-link--disabled):hover .sd-text-link__label {
   text-decoration: underline;

package/dist/collection/components/sd-text-link/sd-text-link.js

@@ -16,9 +16,6 @@ export class SdTextLink {
     };
     render() {
         const typo = this.underline ? TEXT_LINK_TYPOGRAPHY.underline : TEXT_LINK_TYPOGRAPHY.default;
-        // const contentColor = this.disabled
-        //   ? TEXT_LINK_COLORS.content.disabled
-        //   : TEXT_LINK_COLORS.content.default;
         const labelClassName = ['sd-text-link__label', this.labelClass].filter(Boolean).join(' ');
         const iconColor = this.disabled
             ? TEXT_LINK_COLORS.icon.disabled
@@ -26,22 +23,19 @@ export class SdTextLink {
         const arrowColor = this.disabled ? TEXT_LINK_COLORS.icon.disabled : TEXT_LINK_LAYOUT.arrowColor;
         const cssVars = {
             '--sd-text-link-gap': `${TEXT_LINK_LAYOUT.gap}px`,
-            // '--sd-text-link-font-size': `${typo.fontSize}px`,
-            // '--sd-text-link-font-weight': typo.fontWeight,
-            // '--sd-text-link-line-height': `${typo.lineHeight}px`,
             '--sd-text-link-text-decoration': typo.textDecoration,
-            // '--sd-text-link-color': contentColor,
+            ...(this.disabled ? { '--sd-text-link-color': TEXT_LINK_COLORS.content.disabled } : {}),
         };
-        return (h("span", { key: 'b20b183974df13a11812d3f3c16abd2456dd0eb5', class: {
+        return (h("span", { key: '348dc67e12982d74cd3f8b02d8e02071ad074c3f', class: {
                 'sd-text-link': true,
                 'sd-text-link--disabled': this.disabled,
-            }, style: cssVars, onClick: this.handleClick }, this.icon && (h("sd-icon", { key: '581390418ffdd23767838b6f4777fa36cac3ec89', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), h("span", { key: 'a733650304df4c66bb1a0f54cc0554538263830d', class: labelClassName }, this.label), this.useArrow && (h("span", { key: '1437e31870f22bcb13146cc8f2652f3b8d7fa57a', class: "sd-text-link__arrow", style: {
+            }, style: cssVars, onClick: this.handleClick }, this.icon && (h("sd-icon", { key: '26c20691fd307e58b59339cf3b4fc1f3aab8c668', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), h("span", { key: 'a767802a3df9fc15f7523d811d7dc69cc77404a1', class: labelClassName }, this.label), this.useArrow && (h("span", { key: 'a831f73d04cdfb970dcb78740889b6c5b242b880', class: "sd-text-link__arrow", style: {
                 width: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
                 height: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
                 display: 'inline-flex',
                 alignItems: 'center',
                 justifyContent: 'center',
-            } }, h("sd-icon", { key: '17a886109c8e5f72daf5f1f8baa4e185161c934d', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
+            } }, h("sd-icon", { key: 'a87e70e4977a2392de9876eb27904737c61b9e23', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
     }
     static get is() { return "sd-text-link"; }
     static get originalStyleUrls() {
@@ -152,7 +146,7 @@ export class SdTextLink {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "use-arrow",
                 "defaultValue": "false"
             },
@@ -172,7 +166,7 @@ export class SdTextLink {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "underline",
                 "defaultValue": "false"
             },
@@ -192,7 +186,7 @@ export class SdTextLink {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "disabled",
                 "defaultValue": "false"
             }

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

@@ -103,7 +103,7 @@ export class SdTextarea {
             '--sd-system-size-field-sm-height': 'auto',
             '--sd-system-radius-field-sm': `${TEXTAREA_TOKENS.radius}px`,
         };
-        return (h("sd-field", { key: 'ea611c76e2550f996cfe8848aa880d070325f133', name: this.name, label: this.label, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: '90dbe39c0dd4eb8e6dfbf15afb8d04925d1c767b', class: "sd-textarea__content" }, h("textarea", { key: '9026a4837b4b7bba8bc8237ad3c1f516b9dda267', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, autofocus: this.autoFocus, maxLength: this.maxLength, rows: this.rows, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.textareaStyle }))));
+        return (h("sd-field", { key: '4525a68094b0655721c1d8679ee32bc041cf9677', name: this.name, label: this.label, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: '8a7724f1ff423b44dd9017f0446cfeb1220fda95', class: "sd-textarea__content" }, h("textarea", { key: '3eb2bafbbd31cd36ba5626aa9e0069d24d4634ec', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, autofocus: this.autoFocus, maxLength: this.maxLength, rows: this.rows, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.textareaStyle }))));
     }
     static get is() { return "sd-textarea"; }
     static get originalStyleUrls() {

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

@@ -11,10 +11,10 @@ export class SdToast {
     render() {
         const typeConfig = TOAST_TYPE_CONFIG[this.type] ?? TOAST_TYPE_CONFIG.default;
         const iconSize = Number(TOAST_LAYOUT.iconSize);
-        return (h("div", { key: '2a054f05ab63f450e7b0dc1d3816dc9cfca149d0', style: {
+        return (h("div", { key: '0ae35299510680fdb91dcb7c6ef841cba1287c1a', style: {
                 '--sd-toast-bg': typeConfig.bg,
                 '--sd-toast-text': typeConfig.content,
-            } }, h("div", { key: 'e9ebafe293282a8df041b343e83ccbcca0f15919', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (h("div", { key: 'ebd56ba5d1aea16453a8e90be0ab1d7be8ccd579', class: "sd-toast__icon" }, h("sd-icon", { key: 'd01746c69004c6697209f76a88baba467bf290db', name: this.icon, size: iconSize, color: typeConfig.content }))), h("div", { key: '962d70832f11496be43a60415aa435a9094c3fef', class: "sd-toast__content" }, h("span", { key: 'fd868607134f556980c67f22c2e55d9819fbfb99', class: "sd-toast__message" }, this.message)), this.link && (h("a", { key: '72feff87a7e2f0a7726ed293e14203ae1c82d80f', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.useClose && (h("sd-ghost-button", { key: 'f98218ceb7d1a339065219a35bef7db4125ea30b', class: "sd-toast__close", icon: "close", intent: this.type === 'caution' ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
+            } }, h("div", { key: 'c0b4fb4e820e7e2435ce5516cebab1c3132dfe75', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (h("div", { key: '7c0b531a069b6fde7895b886603ceaf54f0a0a50', class: "sd-toast__icon" }, h("sd-icon", { key: '059de7e478b66a7e12c3e0560341311333e83b90', name: this.icon, size: iconSize, color: typeConfig.content }))), h("div", { key: '46911d81bc1cd24b541b6da71ec45a90237ea5a9', class: "sd-toast__content" }, h("span", { key: 'e5e80c82cda36042ad078bf35d2fdcf1d8556497', class: "sd-toast__message" }, this.message)), this.link && (h("a", { key: '95882e33b93d391fc00a92540c5f85d1235c0b8a', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.useClose && (h("sd-ghost-button", { key: 'e65eede91a5160ec3a0f4cab9f1f4bb02dc695f3', class: "sd-toast__close", icon: "close", intent: this.type === 'caution' ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
     }
     static get is() { return "sd-toast"; }
     static get originalStyleUrls() {

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

@@ -216,7 +216,7 @@ export class SdToastContainer {
         const activeToasts = toasts.filter(t => t.state !== 'exiting').reverse();
         const indexMap = new Map();
         activeToasts.forEach((t, i) => indexMap.set(t.id, i));
-        return (h("div", { key: '18ef06077ee49165d6237dbd4fff06e8c1997bcb', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
+        return (h("div", { key: '8a63cb5f1e62fea7f562eac000743bb59ec69fda', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
                 this.expanded = true;
                 this.pauseTimers();
             }, onMouseLeave: () => {

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

@@ -0,0 +1,33 @@
+import toggleTokens from "../../tokens/generated/component.toggle.json";
+export const TOGGLE_LAYOUT = {
+    height: Number(toggleTokens.toggle.height),
+    paddingX: Number(toggleTokens.toggle.paddingX),
+    radius: Number(toggleTokens.toggle.radius),
+    borderWidth: Number(toggleTokens.toggle.border.width),
+};
+export const TOGGLE_TYPOGRAPHY = {
+    fontFamily: toggleTokens.toggle.typography.fontFamily,
+    fontWeight: toggleTokens.toggle.typography.fontWeight,
+    fontSize: Number(toggleTokens.toggle.typography.fontSize),
+    lineHeight: Number(toggleTokens.toggle.typography.lineHeight),
+    textDecoration: toggleTokens.toggle.typography.textDecoration,
+};
+export const TOGGLE_COLORS = {
+    border: {
+        default: toggleTokens.toggle.border.default,
+        select: toggleTokens.toggle.border.select,
+        disabled: toggleTokens.toggle.border.disabled,
+    },
+    bg: {
+        default: toggleTokens.toggle.bg.default,
+        hover: toggleTokens.toggle.bg.hover,
+        select: toggleTokens.toggle.bg.select,
+        disabled: toggleTokens.toggle.bg.disabled,
+    },
+    content: {
+        default: toggleTokens.toggle.content.default,
+        hover: toggleTokens.toggle.content.hover,
+        select: toggleTokens.toggle.content.select,
+        disabled: toggleTokens.toggle.content.disabled,
+    },
+};

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

@@ -1,59 +1,47 @@
 sd-toggle {
   display: inline-block;
-  height: 20px;
   line-height: 0;
 }
-sd-toggle .sd-toggle {
-  cursor: pointer;
+
+.sd-toggle {
   display: inline-flex;
   align-items: center;
-  gap: 8px;
-  height: 20px;
-}
-sd-toggle .sd-toggle > input {
-  display: none;
-}
-sd-toggle .sd-toggle__label {
-  font-size: 12px;
-  color: #333333;
-  line-height: 20px;
-}
-sd-toggle .sd-toggle__track {
-  width: 36px;
-  height: 20px;
-  border-radius: 12px;
-  background: #CCCCCC;
-  position: relative;
-  transition: background-color 0.2s ease;
-}
-sd-toggle .sd-toggle__thumb {
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  background: white;
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  transition: transform 0.2s ease;
-}
-sd-toggle .sd-toggle--checked .sd-toggle__track {
-  background: #0075FF;
-}
-sd-toggle .sd-toggle--checked .sd-toggle__thumb {
-  transform: translateX(16px);
-}
-sd-toggle .sd-toggle--disabled {
+  justify-content: center;
+  box-sizing: border-box;
+  height: var(--sd-toggle-height);
+  padding: 0 var(--sd-toggle-padding-x);
+  border-radius: var(--sd-toggle-radius);
+  border: var(--sd-toggle-border-width) solid var(--sd-toggle-border-default);
+  background: var(--sd-toggle-bg-default);
+  color: var(--sd-toggle-content-default);
+  font-family: var(--sd-toggle-font-family);
+  font-weight: var(--sd-toggle-font-weight);
+  font-size: var(--sd-toggle-font-size);
+  line-height: var(--sd-toggle-line-height);
+  text-decoration: var(--sd-toggle-text-decoration);
+  white-space: nowrap;
+  user-select: none;
+  cursor: pointer;
+  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+}
+.sd-toggle:hover:not(.sd-toggle--disabled) {
+  background: var(--sd-toggle-bg-hover);
+  border-color: var(--sd-toggle-border-select);
+  color: var(--sd-toggle-content-hover);
+}
+.sd-toggle--active {
+  background: var(--sd-toggle-bg-select);
+  border-color: var(--sd-toggle-border-select);
+  color: var(--sd-toggle-content-select);
+}
+.sd-toggle--disabled {
+  background: var(--sd-toggle-bg-disabled);
+  border-color: var(--sd-toggle-border-disabled);
+  color: var(--sd-toggle-content-disabled);
   cursor: not-allowed;
 }
-sd-toggle .sd-toggle--disabled.sd-toggle--checked .sd-toggle__track {
-  background: #BBDAFF;
-}
-sd-toggle .sd-toggle--disabled.sd-toggle--unchecked .sd-toggle__track {
-  background: #EEEEEE;
-}
-sd-toggle .sd-toggle:hover:not(.sd-toggle--disabled).sd-toggle--checked .sd-toggle__track {
-  background: #005CC9;
-}
-sd-toggle .sd-toggle:hover:not(.sd-toggle--disabled).sd-toggle--unchecked .sd-toggle__track {
-  background: #BBBBBB;
+.sd-toggle--disabled.sd-toggle--active {
+  background: var(--sd-toggle-bg-disabled);
+  border-color: var(--sd-toggle-border-disabled);
+  color: var(--sd-toggle-content-disabled);
 }