@sellmate/design-system 1.0.67 → 1.0.69

package/dist/collection/components/sd-select-v2/sd-select-v2.js

@@ -15,6 +15,7 @@ export class SdSelectV2 {
     label = '';
     labelWidth = '';
     addonLabel = '';
+    addonAlign = 'start';
     error = false;
     hint = '';
     errorMessage = '';
@@ -207,13 +208,13 @@ export class SdSelectV2 {
                 this.closeDropdown();
             },
         };
-        return (h("sd-field", { key: 'c9f08598c8f9852ab4000f056621dfef238e16de', name: this.fieldName || this.internalName, label: this.label, labelWidth: this.labelWidth, 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, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
+        return (h("sd-field", { key: '6074cfea700e1f3ea03aaedb0146d7dffdaa7101', name: this.fieldName || this.internalName, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
                 this.hovered = true;
             }, onMouseLeave: () => {
                 this.hovered = false;
-            } }, h("div", { key: '302103a425963e5d577b01ad179d5af82e6f30b1', class: "sd-select-v2", ref: el => {
+            } }, h("div", { key: '4840cfcf19e262903110245f88b73f3f03713624', class: "sd-select-v2", ref: el => {
                 this.triggerRef = el;
-            } }, h("sd-select-v2-trigger", { key: 'a22bca400e5d10ee29e569da04d36b9291a1dade', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '0df4ad35bb284298708a0c1e11ce0e3c28d16ed8', ...portalProps }, h("sd-select-v2-listbox", { key: '90c18612d553342be091a30e05194bab91407c76', name: this.name, options: this.options, value: this.value, emitValue: this.emitValue, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
+            } }, h("sd-select-v2-trigger", { key: '4b34dd8007864623d17c80b4e5cea02aa4db954a', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '7ec2c4ca8e32f877a894f9f766d3558c10d66596', ...portalProps }, h("sd-select-v2-listbox", { key: 'c804a19a142d2978d8fb4eaa33ad2a6a7028e7d3', name: this.name, options: this.options, value: this.value, emitValue: this.emitValue, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
     }
     static get is() { return "sd-select-v2"; }
     static get originalStyleUrls() {
@@ -447,6 +448,33 @@ export class SdSelectV2 {
                 "attribute": "addon-label",
                 "defaultValue": "''"
             },
+            "addonAlign": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "FieldAddonAlign",
+                    "resolved": "\"center\" | \"end\" | \"start\"",
+                    "references": {
+                        "FieldAddonAlign": {
+                            "location": "import",
+                            "path": "../sd-field/sd-field.config",
+                            "id": "src/components/sd-field/sd-field.config.ts::FieldAddonAlign",
+                            "referenceLocation": "FieldAddonAlign"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "addon-align",
+                "defaultValue": "'start'"
+            },
             "error": {
                 "type": "boolean",
                 "mutable": true,

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

@@ -40,7 +40,7 @@ export class SdSwitch {
             '--sd-switch-line-height': `${SWITCH_TYPOGRAPHY.lineHeight}px`,
             '--sd-switch-text-decoration': SWITCH_TYPOGRAPHY.textDecoration,
         };
-        return (h("label", { key: '44ff8ae899d3f1d7f20df43cab5ceb0987d0dab3', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, h("input", { key: 'c7bd9e8ab470c575a52c33b482f83e0113917fda', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), h("div", { key: '604c57baaea22b389e0d19b2c8a06421ab44063e', class: "sd-switch__track" }, h("div", { key: 'a9329987d6c2295a90fe6b4904eeea98b075b30c', class: "sd-switch__knob" })), this.label && h("span", { key: '77cab17a2dbab5245f26c218a8b60f956770e316', class: "sd-switch__label" }, this.label)));
+        return (h("label", { key: '730eacd9dbc035c76ff99396caf13b37ecc19c86', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, h("input", { key: '2cb2e4ba617d6f9f2d86a56ac6cc134a43cd1594', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), h("div", { key: 'b67a6243d2af4b89e433e44047da3336e87da9f9', class: "sd-switch__track" }, h("div", { key: 'a99cf1e298cd3ed474cb7f94a48332475fe68641', class: "sd-switch__knob" })), this.label && h("span", { key: '084960a8dce47c47b17f807aa46acea3a08aa53b', class: "sd-switch__label" }, this.label)));
     }
     static get is() { return "sd-switch"; }
     static get originalStyleUrls() {

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

@@ -495,24 +495,24 @@ export class SdTable {
     }
     render() {
         const resolvedTableId = this.getResolvedTableId();
-        return (h(Host, { key: 'dd25a84ce29a197a7e853d1812ce0f0fbdf043bd' }, h("div", { key: '8b256e995d55c36ff9622148054911fcbe8aa89b', class: "sd-table__container", style: {
+        return (h(Host, { key: 'd2a43d075579bf4ffc53949fb074afaf9987113d' }, h("div", { key: '3e6b69b3ab38281c1763ab779d66b0916b2cb295', class: "sd-table__container", style: {
                 '--table-width': this.width,
                 '--table-height': this.height,
                 '--table-container-height': `calc(${this.height || '100%'} - ${this.pagination && this.rowCount > 0 && !this.useVirtualScroll ? 48 : 0}px)`,
-            } }, h("div", { key: 'b4949fed8c50b93bcddace22978aff358ea7c210', class: {
+            } }, h("div", { key: '60ac7f5d53cdfbb0225dd3ed57be4788e6b7ff2b', class: {
                 'sd-table__clip': true,
                 'sd-table__clip--has-pagination': !!(this.pagination &&
                     this.pagination.rowsPerPage > 0 &&
                     this.rowCount > 0 &&
                     !this.useVirtualScroll),
-            } }, h("div", { key: '5fcceeb27568afdd367e7dbf2886fcbd107089c5', class: {
+            } }, h("div", { key: 'ea4144995650e283bf62de067fe792e1b7d90eb1', class: {
                 'sd-table__wrapper': true,
                 'sd-table__wrapper--loading': this.isLoading,
                 'sd-table__wrapper--no-data': this.rowCount === 0 && !this.isLoading,
-            } }, this.isLoading && (h("div", { key: 'edabfb6b601cfad985e3b8614d603f2df1da8f98', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, h("sd-circle-progress", { key: '40de9b2b97407523d1b02b97f208682e4946be66', indeterminate: true }))), this.rowCount === 0 && !this.isLoading && (h("div", { key: 'fe0d54f45a2a0a8ca1cc6552a42c7725ecd84c99', class: "sd-table__no-data" }, h("slot", { key: 'f64d232d1b3bd69d7c43a5170d06e73cbc586226', name: "no-data" }, h("span", { key: '71f5dcf2e5af2403032bdefd19a3cc4793a823e9' }, this.resolvedNoDataLabel)))), h("table", { key: 'e32c9f96523db174a57efffa584237836a67214a', class: this.tableClasses }, h("slot", { key: 'ce5e49454ac9044d6b3fcf3ac51809bb1e5465f8', name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }), h("slot", { key: '800b45ddc05aac02cf8827b31beca5d0f363b55f', name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange })))), this.pagination &&
+            } }, this.isLoading && (h("div", { key: '36fd919bbf313d4d5a62d657223ce7e68bd7678d', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, h("sd-circle-progress", { key: '5854fbf9090072e1caf5d4a497fe35403c4c8c21', indeterminate: true }))), this.rowCount === 0 && !this.isLoading && (h("div", { key: '210bc0045bacd05d4134f96716f74c5893c494dd', class: "sd-table__no-data" }, h("slot", { key: 'a2aabac27057d00a6352230d23a9c776a99818b5', name: "no-data" }, h("span", { key: 'd030f9abc7bc3afd8cb70433513a8875ae3eecb2' }, this.resolvedNoDataLabel)))), h("table", { key: '731208435f8e018b74f2a0670e4c4f68f4c7fd58', class: this.tableClasses }, h("slot", { key: 'd12bbe4ed17e9c0d781c50c6b4161c7bddec3480', name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }), h("slot", { key: '555d63d8f0ad56d49bcc09451b893e05cc7110cd', name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange })))), this.pagination &&
             this.pagination.rowsPerPage > 0 &&
             this.rowCount > 0 &&
-            !this.useVirtualScroll && (h("div", { key: 'ea2afbe59f7b249d3f4e9d9763ab402438e47008', class: "sd-table__pagination" }, h("sd-pagination", { key: 'a64223b9d2374142cbf12ec582e580f1b9f8f8dc', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (h("sd-select-v2", { key: '597cd596ac0ce2752ab6fc792887ce447c863eb8', value: this.useInternalPagination
+            !this.useVirtualScroll && (h("div", { key: '83b1c554f574013c8a93707f99d4224c581d485c', class: "sd-table__pagination" }, h("sd-pagination", { key: '425c036f79001e4d7f012dc528d2c2ecec25ed9b', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (h("sd-select-v2", { key: '1c7c6ddacdd24cfa0cef627cd8ba06fe2466d415', value: this.useInternalPagination
                 ? this.innerRowsPerPage
                 : this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", emitValue: true, onSdUpdate: e => {
                 if (!this.isRowsPerPageValue(e.detail))

package/dist/collection/components/sd-table/sd-table.stories.helpers.js

@@ -0,0 +1,146 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, LitElement, html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { createRef, ref } from "lit/directives/ref.js";
+import { repeat } from "lit/directives/repeat.js";
+// React/Vue의 useSdTableVirtualScroll과 동일 역할:
+// sd-table의 sdVirtualUpdate를 listen해서 vsStart..vsEnd 슬라이스만 슬롯에 꽂는다.
+// Storybook(lit-html)에는 그 역할을 할 reactive 호스트가 없어서 wrapper로 제공.
+//
+// declare + constructor 초기화 패턴: tsconfig가 target es2022라
+// class field가 native define으로 컴파일되어 lit의 accessor를 overwrite하는 문제를 회피.
+let StoryVirtualTable = class StoryVirtualTable extends LitElement {
+    static styles = css `
+    :host {
+      display: block;
+      width: 100%;
+    }
+  `;
+    tableRef = createRef();
+    detachListener;
+    syncRafId = 0;
+    constructor() {
+        super();
+        this.columns = [];
+        this.rows = [];
+        this.stickyColumn = { left: 0, right: 0 };
+        this.stickyHeader = false;
+        this.selectable = false;
+        this.resizable = false;
+        this.height = '480px';
+        this.width = '100%';
+        this.rowHeight = 44;
+        this.rowKey = 'id';
+        this.range = null;
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.detachListener?.();
+        if (this.syncRafId)
+            cancelAnimationFrame(this.syncRafId);
+    }
+    firstUpdated() {
+        const el = this.tableRef.value;
+        if (!el)
+            return;
+        const onUpdate = (e) => {
+            const detail = e.detail;
+            this.range = { from: detail.from, to: detail.to };
+        };
+        el.addEventListener('sdVirtualUpdate', onUpdate);
+        this.detachListener = () => el.removeEventListener('sdVirtualUpdate', onUpdate);
+        const trySync = () => {
+            const r = el
+                .getVirtualScrollRangeSync?.();
+            if (r && typeof r.from === 'number' && typeof r.to === 'number') {
+                this.range = { from: r.from, to: r.to };
+            }
+            else {
+                this.syncRafId = requestAnimationFrame(trySync);
+            }
+        };
+        trySync();
+    }
+    render() {
+        const from = this.range?.from ?? 0;
+        const to = this.range?.to ?? 0;
+        const slice = this.range ? this.rows.slice(from, to) : [];
+        return html `
+      <sd-table
+        ${ref(this.tableRef)}
+        .columns=${this.columns}
+        .rows=${this.rows}
+        row-key=${this.rowKey}
+        ?selectable=${this.selectable}
+        ?resizable=${this.resizable}
+        ?sticky-header=${this.stickyHeader}
+        .stickyColumn=${this.stickyColumn}
+        width=${this.width}
+        height=${this.height}
+        ?use-virtual-scroll=${true}
+        row-height=${this.rowHeight}
+      >
+        <sd-thead></sd-thead>
+        <sd-tbody>
+          ${repeat(slice, (_row, i) => from + i, (row, i) => {
+            const absoluteIndex = from + i;
+            return html `
+                <sd-tr row-key=${String(absoluteIndex)} .row=${row}>
+                  ${this.renderRow ? this.renderRow(row, absoluteIndex) : nothing}
+                </sd-tr>
+              `;
+        })}
+        </sd-tbody>
+      </sd-table>
+    `;
+    }
+};
+__decorate([
+    property({ attribute: false })
+], StoryVirtualTable.prototype, "columns", void 0);
+__decorate([
+    property({ attribute: false })
+], StoryVirtualTable.prototype, "rows", void 0);
+__decorate([
+    property({ attribute: false })
+], StoryVirtualTable.prototype, "stickyColumn", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'sticky-header' })
+], StoryVirtualTable.prototype, "stickyHeader", void 0);
+__decorate([
+    property({ type: Boolean })
+], StoryVirtualTable.prototype, "selectable", void 0);
+__decorate([
+    property({ type: Boolean })
+], StoryVirtualTable.prototype, "resizable", void 0);
+__decorate([
+    property()
+], StoryVirtualTable.prototype, "height", void 0);
+__decorate([
+    property()
+], StoryVirtualTable.prototype, "width", void 0);
+__decorate([
+    property({ type: Number, attribute: 'row-height' })
+], StoryVirtualTable.prototype, "rowHeight", void 0);
+__decorate([
+    property({ attribute: 'row-key' })
+], StoryVirtualTable.prototype, "rowKey", void 0);
+__decorate([
+    property({ attribute: false })
+], StoryVirtualTable.prototype, "renderRow", void 0);
+__decorate([
+    state()
+], StoryVirtualTable.prototype, "range", void 0);
+StoryVirtualTable = __decorate([
+    customElement('story-virtual-table')
+], StoryVirtualTable);
+export { StoryVirtualTable };

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

@@ -41,7 +41,7 @@ export class SdTbody {
     }
     render() {
         const hasRows = this.rows.length > 0;
-        return (h(Host, { key: 'aaa6a5a3ae24728e004c769f8652c838f852aefc', slot: `${this.tableId}-body` }, h("tbody", { key: 'de2909b4fe23293abd69778aed02abdab4ee8120', class: { 'tbody': true, 'tbody--empty': !hasRows } }, hasRows ? ([
+        return (h(Host, { key: '82a437ddf0cb3c34877b9dbcb47b5406c20a0c0e', slot: `${this.tableId}-body` }, h("tbody", { key: '0f0257720491c781eda0479fb0c08d7dffc4f734', class: { 'tbody': true, 'tbody--empty': !hasRows } }, hasRows ? ([
             this.topSpacerHeight > 0 && (h("tr", { key: "spacer-top", class: "tbody__spacer", style: { height: `${this.topSpacerHeight}px`, display: 'block' } })),
             h("slot", null),
             this.bottomSpacerHeight > 0 && (h("tr", { key: "spacer-bottom", class: "tbody__spacer", style: { height: `${this.bottomSpacerHeight}px`, display: 'block' } })),

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

@@ -34,7 +34,7 @@ export class SdTd {
         }
     }
     render() {
-        return (h(Host, { key: '9fdf1f552785399ec47244f1d534d49070dd6fa1', class: { [`align-${this.align}`]: Boolean(this.align) } }, h("slot", { key: '845eddc0d15fd8bb2f2f93e146aa8fa1eb9d194f' })));
+        return (h(Host, { key: 'c6ddb546268b573694b827509ebdfe74fff8a15a', class: { [`align-${this.align}`]: Boolean(this.align) } }, h("slot", { key: '0b59fb8a0cfa1ef628f50496af96aa2f39fdc89a' })));
     }
     static get is() { return "sd-td"; }
     static get originalStyleUrls() {

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

@@ -128,16 +128,16 @@ export class SdThead {
         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: '5ccdb84a8876df2af0d73424be3f5a7fdb1979a5', slot: `${this.tableId}-head` }, h("thead", { key: '6517b6f3baf56173f27b8194de7bd1de625ea304', class: {
+        return (h(Host, { key: '97badde9634e2e7363eace5a402fc49a587459c3', slot: `${this.tableId}-head` }, h("thead", { key: 'd1ce731f6082679d8d61f4b74ac122f28f344909', class: {
                 'thead': true,
                 'thead--sticky': this._stickyHeader,
-            } }, h("tr", { key: '8a9c268a3195376a8c9986411b29724896ff36d8', class: "tr" }, this._selectable && (h("th", { key: 'f0fae86684bbef173019ddb1dd23a5f57956fb04', class: {
+            } }, h("tr", { key: 'd0f8b1e8b8a7174cc9b39fabf782eddf2e2accaa', class: "tr" }, this._selectable && (h("th", { key: 'c422f5bd9f9a045785d2d91dd9e2dee6e8f91185', class: {
                 'th': true,
                 'th--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: 'cde120ec02f8bf03fa869eadbc0d91b4fde8e1ba', value: this.getIsAllChecked(), disabled: !safeRows.length, onSdUpdate: (e) => this.handleSelectAll(e.detail) }))), stickyLeftCols.map((col, idx) => (h("th", { key: col.name, class: {
+            }, style: { '--sticky-left-offset': '0px' } }, h("sd-checkbox", { key: '32cea740457b21d4d6fd53a8f1c10b505a24a481', value: this.getIsAllChecked(), disabled: !safeRows.length, onSdUpdate: (e) => this.handleSelectAll(e.detail) }))), stickyLeftCols.map((col, idx) => (h("th", { key: col.name, class: {
                 'th': true,
                 [`${col.thClass}`]: Boolean(col.thClass),
                 'sticky-left': true,

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

@@ -123,13 +123,13 @@ export class SdTr {
         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: {
+        return (h(Host, { key: '3bc910f3afa801d7824eee2e73456ef152c7dc93', style: { display: this.isVisible ? '' : 'none' } }, h("tr", { key: '93b1f4113ae63aa1c0cf79addaa9e8d15c9e8287', class: "tr" }, this._selectable && (h("td", { key: '0caba47c216126f4b7407dfe26afb9f0c75f6450', 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: {
+            }, style: { '--sticky-left-offset': '0px' } }, h("sd-checkbox", { key: '2e41b3902f489877b624266e588221698aaa8f12', 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,

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: '3ac46ee8a763ba5a4a566fb25d4e32366ff8288b', class: this.getContainerClasses() }, this.tabs.map((tab, index) => {
+        return (h("div", { key: '62ace36515932f8889fc35121b6a8cf98fd9a314', 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: '773056b7cd351f05ec4c4b9fed8db790a8ab83d0', class: "sd-tag", style: {
+        return (h("span", { key: '3e3bf735f8d832e75f1061eac69ccd8972b9f40f', 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: '6271ce5e0f6cda83e668119e846a18cee3db3a16', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
+            }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, h("span", { key: 'a06237d1d29bb64b4b830294f5385a9b9b909624', 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.js

@@ -26,16 +26,16 @@ export class SdTextLink {
             '--sd-text-link-text-decoration': typo.textDecoration,
             ...(this.disabled ? { '--sd-text-link-color': TEXT_LINK_COLORS.content.disabled } : {}),
         };
-        return (h("span", { key: '348dc67e12982d74cd3f8b02d8e02071ad074c3f', class: {
+        return (h("span", { key: 'c485091d0a9d7f8aa946ac54d96baab50bcaa3c7', class: {
                 'sd-text-link': true,
                 'sd-text-link--disabled': this.disabled,
-            }, 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: {
+            }, style: cssVars, onClick: this.handleClick }, this.icon && (h("sd-icon", { key: '98a2df9a2ba9b5d77eb73c0989cdf38383cfcd15', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), h("span", { key: '3c6867611e0d970855897b06f7e9368a8588ff76', class: labelClassName }, this.label), this.useArrow && (h("span", { key: '460bebf92782560d64e41b47ea9ef42b66cc08c0', 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: 'a87e70e4977a2392de9876eb27904737c61b9e23', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
+            } }, h("sd-icon", { key: 'fee7c74359e683829ad3fa802191b651aa9e94da', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
     }
     static get is() { return "sd-text-link"; }
     static get originalStyleUrls() {

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

@@ -18,6 +18,7 @@ export class SdTextarea {
     label = '';
     labelWidth = '';
     addonLabel = '';
+    addonAlign = 'start';
     hint = '';
     errorMessage = '';
     icon = undefined;
@@ -104,7 +105,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: '6b2360f01a356db14659e1ebc53d8c4d8c4f671f', name: this.name, label: this.label, labelWidth: this.labelWidth, 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: 'f43279ee861d3502c9130f1de0c47cba61ad0866', class: "sd-textarea__content" }, h("textarea", { key: '0600b577417019ae36a0daba637168ebc5685220', 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: '9f456eb1b18d0d83fb40f0b6b66125d587bcb4c6', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, 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: 'f201962ed64908c97d24923b62e97c33b356170a', class: "sd-textarea__content" }, h("textarea", { key: '826e4b3c4743dbf16387b68317bd09ca7c75746d', 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() {
@@ -395,6 +396,33 @@ export class SdTextarea {
                 "attribute": "addon-label",
                 "defaultValue": "''"
             },
+            "addonAlign": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "FieldAddonAlign",
+                    "resolved": "\"center\" | \"end\" | \"start\"",
+                    "references": {
+                        "FieldAddonAlign": {
+                            "location": "import",
+                            "path": "../sd-field/sd-field.config",
+                            "id": "src/components/sd-field/sd-field.config.ts::FieldAddonAlign",
+                            "referenceLocation": "FieldAddonAlign"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "addon-align",
+                "defaultValue": "'start'"
+            },
             "hint": {
                 "type": "string",
                 "mutable": false,

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: '0ae35299510680fdb91dcb7c6ef841cba1287c1a', style: {
+        return (h("div", { key: 'a041d5561d09ef56f4afd722e141b0a2e3a9453f', style: {
                 '--sd-toast-bg': typeConfig.bg,
                 '--sd-toast-text': typeConfig.content,
-            } }, 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() })))));
+            } }, h("div", { key: 'bf2a397484ec5938c0442ee0ee98f0ce00ad1ec0', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (h("div", { key: '4ea8468b31909e3aea1a293c393621e1815dea5c', class: "sd-toast__icon" }, h("sd-icon", { key: '407a0be71e36a6dca30f5cfb300f2c9ebf6b32c2', name: this.icon, size: iconSize, color: typeConfig.content }))), h("div", { key: '756ca54899ec4d6c3543f8fb1f681d09181674c9', class: "sd-toast__content" }, h("span", { key: 'f0e66dbd5e99bc3921a354ac51294a3c29fe9ea0', class: "sd-toast__message" }, this.message)), this.link && (h("a", { key: '9f4a1a938b7559b03d7dd824c7f2fdbcb093e6fe', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.useClose && (h("sd-ghost-button", { key: '03d64765901bc8a93f09642b09ae733fa9da0db4', 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.config.js

@@ -1,7 +1,7 @@
 export const DEFAULT_DURATION = 4000;
 export const DEFAULT_MAX_VISIBLE = 3;
 export const DEFAULT_GAP = 8;
-export const DEFAULT_Z_INDEX = 10000;
+export const DEFAULT_Z_INDEX = 999;
 export const TRANSITION_DURATION = 400;
 export const TRANSITION_FALLBACK_BUFFER = 100;
 export const COLLAPSED_SCALE_STEP = 0.05;

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: '8a63cb5f1e62fea7f562eac000743bb59ec69fda', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
+        return (h("div", { key: '4660dd2f2626d391bbcca7da59e16e6c4204d80d', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
                 this.expanded = true;
                 this.pauseTimers();
             }, onMouseLeave: () => {

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

@@ -45,7 +45,7 @@ export class SdToggle {
             '--sd-toggle-content-select': TOGGLE_COLORS.content.select,
             '--sd-toggle-content-disabled': TOGGLE_COLORS.content.disabled,
         };
-        return (h("label", { key: 'ec38c0ca834e5208d2cc5eb1fc32f959eacbb46d', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, h("input", { key: '2b47036dbd0cb880a7b7973523c985ae13e0cf22', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (h("label", { key: '1e0864450b0447ec08643290d1050e4d0ee0c4a4', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, h("input", { key: '7e44e8569de24839c41e8c28f579923e3a837366', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
     static get is() { return "sd-toggle"; }
     static get originalStyleUrls() {

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

@@ -81,14 +81,14 @@ export class SdTooltip {
         const toggleTooltip = () => (this.showTooltip = !this.showTooltip);
         const divTrigger = trigger === 'hover' ? hoverTrigger : this.label ? {} : { onClick: toggleTooltip };
         const buttonClickTrigger = trigger === 'click' && this.label ? { onSdClick: toggleTooltip } : {};
-        return (h(Fragment, { key: '097722e57d6a808193e8fc0d48cebc80ee13848a' }, h("div", { key: '92c6fd83098faec1cfa405ace12530d0cb408395', class: `sd-tooltip-trigger ${this.sdClass || ''}`, ...divTrigger }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: icon, size: this.buttonSize ?? 'sm', color: color, variant: this.buttonVariant ?? 'primary', class: "sd-tooltip", ...buttonClickTrigger })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (h("sd-floating-portal", { key: 'd05d011181a8c183690607c974208e708ccba184', parentRef: this.buttonEl, onSdClose: this.handleClose.bind(this), placement: placement, offset: this.tooltipOffset }, h("div", { key: '281c3994d52fcd1d6194edd12bd64ac9a42f5e71', ref: el => (this.menuEl = el), class: {
+        return (h(Fragment, { key: 'aade7a4be8e9955ca4dc437845ee8de9d212fd61' }, h("div", { key: '332c4872541bea334c1f0b6f06de8a1789dc10b8', class: `sd-tooltip-trigger ${this.sdClass || ''}`, ...divTrigger }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: icon, size: this.buttonSize ?? 'sm', color: color, variant: this.buttonVariant ?? 'primary', class: "sd-tooltip", ...buttonClickTrigger })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (h("sd-floating-portal", { key: '96f19d91f765020ae5663f216011e2000617c9d1', parentRef: this.buttonEl, onSdClose: this.handleClose.bind(this), placement: placement, offset: this.tooltipOffset }, h("div", { key: '12c2f1fbf59dc1a790016da071805164b0426419', ref: el => (this.menuEl = el), class: {
                 'sd-floating-menu': true,
                 [`sd-floating-menu--${tooltipType}`]: true,
                 [`sd-floating-menu--${placement}`]: true,
             }, style: {
                 '--sd-floating-bg': typeConfig.bg,
                 '--sd-floating-content': typeConfig.content,
-            }, onMouseEnter: () => this.show(), onMouseLeave: () => this.startHideTimer() }, h("i", { key: '87374c0a423bc037decdc820e118c65ea7b3f75f', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, h(TooltipArrow, { key: '9cdd8215849973011a2339ed80bfb2863b1e374e' })), h("div", { key: '4f764958e07a8b2ed0ea093609f5a42d86fa3f3c', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }))))));
+            }, onMouseEnter: () => this.show(), onMouseLeave: () => this.startHideTimer() }, h("i", { key: 'f69c0cb66d5be975f60bfa7cdbd46e0283d4af2b', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, h(TooltipArrow, { key: '3fbc2c3baa903e80d525225ab1f1aa4b3ec6ad4b' })), h("div", { key: 'a2286ef4e9f5d6c1b1a26ea044ddf1051900c5a2', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }))))));
     }
     static get is() { return "sd-tooltip"; }
     static get originalStyleUrls() {

package/dist/collection/components/table-test/table-test.js

@@ -71,7 +71,7 @@ export class DataTable {
         return el.innerHTML;
     }
     render() {
-        return (h("div", { key: '6d2ff3676d082540cc70939363b0f07ff7252e8c', class: "table-wrapper" }, h("table", { key: '3995aead06dfce42ea4e918486b1473c1740b96e', class: { 'data-table': true, 'bordered': this.bordered, 'striped': this.striped } }, h("thead", { key: '9cbe03cbe1f69d7546ba5037489d20d85bd4a534' }, h("tr", { key: '7ab64e3e3ef214a19a010501d3ec9778c5594990' }, this.columns.map(column => (h("th", { key: column.field, style: { width: column.width } }, this.renderHeaderContent(column)))))), h("tbody", { key: '660707fb4d5075b98698718e8cfa8ed903f3d1e2' }, this.rows.map((row, rowIndex) => (h("tr", { key: rowIndex }, this.columns.map(column => (h("td", { key: `${rowIndex}-${column.field}` }, this.renderCellContent(column, row, rowIndex))))))))), h("div", { key: '9aabf030b814c340b2f4a1d66644516ed320f31b', class: "templates-slot", hidden: true }, h("slot", { key: '532e40bf658706a99b57dc89c056d977db3e4d83' }))));
+        return (h("div", { key: 'eb6246d49bb46a1c2b2b9d93cff90e7c0d6788b4', class: "table-wrapper" }, h("table", { key: '584d752e51f252f2dd7a29868ae4300b55c47065', class: { 'data-table': true, 'bordered': this.bordered, 'striped': this.striped } }, h("thead", { key: 'fd35de9ad1cb79cf77ab9f7a806d2d7258d8b11b' }, h("tr", { key: '39a42d9fc76571aa5ef6073ec554471d5fd1b4c1' }, this.columns.map(column => (h("th", { key: column.field, style: { width: column.width } }, this.renderHeaderContent(column)))))), h("tbody", { key: '5c3a2b5853f619666b20145e0f7a221c75969071' }, this.rows.map((row, rowIndex) => (h("tr", { key: rowIndex }, this.columns.map(column => (h("td", { key: `${rowIndex}-${column.field}` }, this.renderCellContent(column, row, rowIndex))))))))), h("div", { key: 'bbbd15c2d1b517774340dbcdfb59338f260df21b', class: "templates-slot", hidden: true }, h("slot", { key: '28733f09dd4a90976d9bb60102039981c736cf87' }))));
     }
     static get is() { return "table-test"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/utils/modal-stack.js

@@ -0,0 +1,109 @@
+const DEFAULT_BASE_Z_INDEX = 997;
+let baseZIndex = DEFAULT_BASE_Z_INDEX;
+let entries = [];
+let bodyScrollLocked = false;
+let previousBodyOverflow = null;
+let isKeydownAttached = false;
+function isBrowserEnvironment() {
+    return typeof window !== 'undefined' && typeof document !== 'undefined';
+}
+function getTopInteractiveEntry() {
+    return [...entries].reverse().find(entry => entry.interactive);
+}
+function syncBodyScrollLock() {
+    if (!isBrowserEnvironment())
+        return;
+    const shouldLock = entries.length > 0;
+    if (shouldLock === bodyScrollLocked)
+        return;
+    if (shouldLock) {
+        previousBodyOverflow = document.body.style.overflow || '';
+        document.body.style.overflow = 'hidden';
+    }
+    else {
+        document.body.style.overflow = previousBodyOverflow ?? '';
+        previousBodyOverflow = null;
+    }
+    bodyScrollLocked = shouldLock;
+}
+function updateEntryZIndices() {
+    entries.forEach(entry => {
+        entry.setZIndex(baseZIndex);
+    });
+}
+function detachKeydownListener() {
+    if (!isBrowserEnvironment() || !isKeydownAttached)
+        return;
+    window.removeEventListener('keydown', handleWindowKeydown);
+    isKeydownAttached = false;
+}
+function attachKeydownListener() {
+    if (!isBrowserEnvironment() || isKeydownAttached)
+        return;
+    window.addEventListener('keydown', handleWindowKeydown);
+    isKeydownAttached = true;
+}
+function syncGlobalState() {
+    updateEntryZIndices();
+    syncBodyScrollLock();
+    if (entries.length > 0)
+        attachKeydownListener();
+    else
+        detachKeydownListener();
+}
+function handleWindowKeydown(e) {
+    if (e.key !== 'Escape')
+        return;
+    const topEntry = getTopInteractiveEntry();
+    if (!topEntry)
+        return;
+    if (topEntry.persistent) {
+        topEntry.shake();
+        return;
+    }
+    topEntry.requestClose('close');
+}
+export function configureModalStack(options = {}) {
+    if (options.zIndex != null) {
+        baseZIndex = options.zIndex;
+    }
+    syncGlobalState();
+}
+export function registerModal(entry) {
+    entries = [
+        ...entries.filter(item => item.id !== entry.id),
+        {
+            ...entry,
+            interactive: true,
+        },
+    ];
+    syncGlobalState();
+}
+export function unregisterModal(id) {
+    entries = entries.filter(entry => entry.id !== id);
+    syncGlobalState();
+}
+export function setModalInteractive(id, interactive) {
+    entries = entries.map(entry => (entry.id === id ? { ...entry, interactive } : entry));
+    syncGlobalState();
+}
+export function isTopInteractiveModal(id) {
+    return getTopInteractiveEntry()?.id === id;
+}
+export function requestCloseForModal(id) {
+    const topEntry = getTopInteractiveEntry();
+    if (!topEntry || topEntry.id !== id)
+        return false;
+    if (topEntry.persistent) {
+        topEntry.shake();
+        return true;
+    }
+    topEntry.requestClose('close');
+    return true;
+}
+export function resetModalStackManagerForTests() {
+    entries = [];
+    baseZIndex = DEFAULT_BASE_Z_INDEX;
+    syncBodyScrollLock();
+    detachKeydownListener();
+}