@sellmate/design-system 1.0.71 → 1.0.72

package/dist/cjs/sd-thead.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-B2QvhbC3.js');
+var index = require('./index-Dptupbm0.js');
 var constants = require('./constants-DJRV1upE.js');
 
 const sdTheadCss = () => `sd-thead{display:contents}sd-thead *{box-sizing:border-box}.thead{display:table-header-group;height:36px}.thead--sticky{position:sticky;top:0;z-index:120}.tr{display:table-row;width:100%}.th{display:table-cell;background:#F5FAFF;height:36px;padding:0 16px;font-weight:500;vertical-align:middle;border-bottom:1px solid #E1E1E1;-webkit-user-select:none;user-select:none;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.th--selected{position:relative;width:52px !important;max-width:52px !important;min-width:52px !important;padding:0 10px 0 24px;text-align:left}.th--selected sd-checkbox label{position:relative}.th--selected sd-checkbox label:before{content:"";position:absolute;inset:-6px}.th.sticky-left{position:sticky;background-color:#F5FAFF;z-index:110 !important;left:var(--sticky-left-offset, 0)}.th.sticky-right{position:sticky;background-color:#F5FAFF;z-index:110 !important;right:var(--sticky-right-offset, 0)}.th.sticky-left-edge:after{content:"";position:absolute;top:0;left:100%;right:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset 12px 0 20px -25px;opacity:0;pointer-events:none;transition:opacity 0.2s}.th.sticky-right-edge:after{content:"";position:absolute;top:0;left:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset -12px 0 20px -25px;opacity:0;pointer-events:none;transition:opacity 0.2s}.th.sticky-left-edge.is-scrolled-left{overflow:visible}.th.sticky-left-edge.is-scrolled-left:after{opacity:1}.th.sticky-right-edge.is-scrolled-right{overflow:visible}.th.sticky-right-edge.is-scrolled-right:after{opacity:1}.th__content{display:flex;flex-flow:row nowrap;align-items:center;gap:4px}.th__content--left{justify-content:flex-start}.th__content--center{justify-content:center}.th__content--right{justify-content:flex-end}.th__content--label{white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.th__resizer{position:absolute;top:50%;right:0;transform:translateY(-50%);width:4px;height:16px;cursor:col-resize;z-index:3;border-left:1px solid #CCCCCC;border-right:1px solid #CCCCCC}.th__resizer--left{right:auto;left:0}`;
@@ -136,16 +136,16 @@ const SdThead = class {
         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 (index.h(index.Host, { key: '97badde9634e2e7363eace5a402fc49a587459c3', slot: `${this.tableId}-head` }, index.h("thead", { key: 'd1ce731f6082679d8d61f4b74ac122f28f344909', class: {
+        return (index.h(index.Host, { key: '2358499ef65d88005d03b1246604c0fd8eefdde1', slot: `${this.tableId}-head` }, index.h("thead", { key: '49bb43a19aeb83f3a60367b26dbb6535ebcec743', class: {
                 'thead': true,
                 'thead--sticky': this._stickyHeader,
-            } }, index.h("tr", { key: 'd0f8b1e8b8a7174cc9b39fabf782eddf2e2accaa', class: "tr" }, this._selectable && (index.h("th", { key: 'c422f5bd9f9a045785d2d91dd9e2dee6e8f91185', class: {
+            } }, index.h("tr", { key: 'cd6388d79e9a4a5d9edbbda05601abbbefcb1ff4', class: "tr" }, this._selectable && (index.h("th", { key: 'fa09e82368d45e9fb1d32838ef44e609c698609d', 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' } }, index.h("sd-checkbox", { key: '32cea740457b21d4d6fd53a8f1c10b505a24a481', value: this.getIsAllChecked(), disabled: !safeRows.length, onSdUpdate: (e) => this.handleSelectAll(e.detail) }))), stickyLeftCols.map((col, idx) => (index.h("th", { key: col.name, class: {
+            }, style: { '--sticky-left-offset': '0px' } }, index.h("sd-checkbox", { key: '5ab4861aecfac9495101363d5bd809d077c7dbc3', value: this.getIsAllChecked(), disabled: !safeRows.length, onSdUpdate: (e) => this.handleSelectAll(e.detail) }))), stickyLeftCols.map((col, idx) => (index.h("th", { key: col.name, class: {
                 'th': true,
                 [`${col.thClass}`]: Boolean(col.thClass),
                 'sticky-left': true,

package/dist/cjs/sd-toast-container.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-B2QvhbC3.js');
+var index = require('./index-Dptupbm0.js');
 
 const DEFAULT_DURATION = 4000;
 const DEFAULT_MAX_VISIBLE = 3;
@@ -234,7 +234,7 @@ const SdToastContainer = class {
         const activeToasts = toasts.filter(t => t.state !== 'exiting').reverse();
         const indexMap = new Map();
         activeToasts.forEach((t, i) => indexMap.set(t.id, i));
-        return (index.h("div", { key: '4660dd2f2626d391bbcca7da59e16e6c4204d80d', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
+        return (index.h("div", { key: '601c4c5aa55df02459866607ca7c59da53c2eda5', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
                 this.expanded = true;
                 this.pauseTimers();
             }, onMouseLeave: () => {

package/dist/cjs/sd-toast.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-B2QvhbC3.js');
+var index = require('./index-Dptupbm0.js');
 
 const toast = {
 	icon: "16",
@@ -57,10 +57,10 @@ const SdToast = class {
     render() {
         const typeConfig = TOAST_TYPE_CONFIG[this.type] ?? TOAST_TYPE_CONFIG.default;
         const iconSize = Number(TOAST_LAYOUT.iconSize);
-        return (index.h("div", { key: 'a041d5561d09ef56f4afd722e141b0a2e3a9453f', style: {
+        return (index.h("div", { key: 'd4b73e2503514143f5174bc8859baf0e59c2f8da', style: {
                 '--sd-toast-bg': typeConfig.bg,
                 '--sd-toast-text': typeConfig.content,
-            } }, index.h("div", { key: 'bf2a397484ec5938c0442ee0ee98f0ce00ad1ec0', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: '4ea8468b31909e3aea1a293c393621e1815dea5c', class: "sd-toast__icon" }, index.h("sd-icon", { key: '407a0be71e36a6dca30f5cfb300f2c9ebf6b32c2', name: this.icon, size: iconSize, color: typeConfig.content }))), index.h("div", { key: '756ca54899ec4d6c3543f8fb1f681d09181674c9', class: "sd-toast__content" }, index.h("span", { key: 'f0e66dbd5e99bc3921a354ac51294a3c29fe9ea0', class: "sd-toast__message" }, this.message)), this.link && (index.h("a", { key: '9f4a1a938b7559b03d7dd824c7f2fdbcb093e6fe', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.useClose && (index.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() })))));
+            } }, index.h("div", { key: '7334daee691fb03a1005c2afac64033554489046', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: '297ada835b0710bf43a936b02e53b0873b7f4af3', class: "sd-toast__icon" }, index.h("sd-icon", { key: 'b5bc4716df28231dc7af15db63595ae9044189b5', name: this.icon, size: iconSize, color: typeConfig.content }))), index.h("div", { key: 'd0239c8f8b495fbdaedad0f65a6d0a0edfaada60', class: "sd-toast__content" }, index.h("span", { key: 'dc70d403673bb8f99cfd91393054a86bf17e5ac2', class: "sd-toast__message" }, this.message)), this.link && (index.h("a", { key: '1a76bcee482720693b501d3a13c54e720bbe44fc', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.useClose && (index.h("sd-ghost-button", { key: 'a8dc3c15cabf5ca4e075e75c4fb2744dd5da4fa0', class: "sd-toast__close", icon: "close", intent: this.type === 'caution' ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
     }
 };
 SdToast.style = sdToastCss();

package/dist/cjs/sd-toggle.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-B2QvhbC3.js');
+var index = require('./index-Dptupbm0.js');
 
 const toggle = {
 	height: "28",
@@ -120,7 +120,7 @@ const SdToggle = class {
             '--sd-toggle-content-select': TOGGLE_COLORS.content.select,
             '--sd-toggle-content-disabled': TOGGLE_COLORS.content.disabled,
         };
-        return (index.h("label", { key: '1e0864450b0447ec08643290d1050e4d0ee0c4a4', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, index.h("input", { key: '7e44e8569de24839c41e8c28f579923e3a837366', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (index.h("label", { key: 'fe56ffe876ccc859536ca74703e0870ad97e1668', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, index.h("input", { key: 'f473fd71c03d0e4e3e8fb354753d769033f148f2', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
 };
 SdToggle.style = sdToggleCss();

package/dist/cjs/sd-tr.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-B2QvhbC3.js');
+var index = require('./index-Dptupbm0.js');
 var constants = require('./constants-DJRV1upE.js');
 
 const sdTrCss = () => `sd-tr{display:contents}sd-tr *{box-sizing:border-box}.tr{display:table-row}.tr:hover .td{background-color:#F9F9F9}.td{display:table-cell;height:44px;padding:0 16px;border-bottom:1px solid #E1E1E1;background:white;vertical-align:middle;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.td--left{text-align:left}.td--center{text-align:center}.td--right{text-align:right}.td--selected{position:relative;width:52px !important;max-width:52px !important;min-width:52px !important;padding:0 10px 0 24px;text-align:left}.td--selected sd-checkbox label{position:relative}.td--selected sd-checkbox label:before{content:"";position:absolute;inset:-6px}.td.sticky-left{position:sticky;background-color:white;z-index:100 !important;left:var(--sticky-left-offset, 0)}.td.sticky-right{position:sticky;background-color:white;z-index:100 !important;right:var(--sticky-right-offset, 0)}.td.sticky-left-edge:after{content:"";position:absolute;top:0;left:100%;right:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset 12px 0 20px -25px;opacity:0;pointer-events:none;transition:opacity 0.2s}.td.sticky-right-edge:after{content:"";position:absolute;top:0;left:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset -12px 0 20px -25px;opacity:0;pointer-events:none;transition:opacity 0.2s}.td.sticky-left-edge.is-scrolled-left{overflow:visible}.td.sticky-left-edge.is-scrolled-left:after{opacity:1}.td.sticky-right-edge.is-scrolled-right{overflow:visible}.td.sticky-right-edge.is-scrolled-right:after{opacity:1}.tr:hover .td.sticky-left,.tr:hover .td.sticky-right{background-color:#F9F9F9}`;
@@ -131,13 +131,13 @@ const SdTr = class {
         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 (index.h(index.Host, { key: '3bc910f3afa801d7824eee2e73456ef152c7dc93', style: { display: this.isVisible ? '' : 'none' } }, index.h("tr", { key: '93b1f4113ae63aa1c0cf79addaa9e8d15c9e8287', class: "tr" }, this._selectable && (index.h("td", { key: '0caba47c216126f4b7407dfe26afb9f0c75f6450', class: {
+        return (index.h(index.Host, { key: 'd6259e5c87cce0fa70f1d849e11416ad69b0cac1', style: { display: this.isVisible ? '' : 'none' } }, index.h("tr", { key: '90e36c39bede0e07fc1c4d90183a73ebc99b6ed8', class: "tr" }, this._selectable && (index.h("td", { key: '601f1747063d8e73803304abc2cd767f420f359c', 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' } }, index.h("sd-checkbox", { key: '2e41b3902f489877b624266e588221698aaa8f12', value: this.isSelected(), onSdUpdate: () => this.handleSelect() }))), stickyLeftCols.map((col, idx) => (index.h("td", { key: col.name, class: {
+            }, style: { '--sticky-left-offset': '0px' } }, index.h("sd-checkbox", { key: '97068a623d3b7876c7e6392e3f5ed81cfc60d592', value: this.isSelected(), onSdUpdate: () => this.handleSelect() }))), stickyLeftCols.map((col, idx) => (index.h("td", { key: col.name, class: {
                 'td': true,
                 [`td--${col.align || 'left'}`]: true,
                 'sticky-left': true,

package/dist/cjs/{system-C89o3A9Z.js → system-BbCUNhDJ.js}

@@ -7,6 +7,7 @@ const color = {
 	content: {
 		primary: "#222222",
 		secondary: "#555555",
+		tertiary: "#888888",
 		inverse: "#FFFFFF"
 	}};
 var systemTokens = {

package/dist/cjs/table-test.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-B2QvhbC3.js');
+var index = require('./index-Dptupbm0.js');
 
 const tableTestCss = () => `:host{display:block}.table-wrapper{width:100%;overflow-x:auto}.templates-slot{display:none}.data-table{width:100%;border-collapse:collapse;font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;font-size:14px}.data-table th,.data-table td{padding:12px 16px;text-align:left;vertical-align:middle}.data-table th{font-weight:600;background-color:#f8f9fa;color:#333}.data-table.bordered th,.data-table.bordered td{border:1px solid #dee2e6}.data-table.striped tbody tr:nth-child(odd){background-color:#f8f9fa}.data-table tbody tr:hover{background-color:#e9ecef}.data-table .cell-flex{display:flex;align-items:center;gap:8px}.data-table .cell-image{width:24px;height:16px;object-fit:cover;border-radius:2px}`;
 
@@ -80,7 +80,7 @@ const DataTable = class {
         return el.innerHTML;
     }
     render() {
-        return (index.h("div", { key: '2aaa005ce2516e841fdace352e9d8cf2b98cbde4', class: "table-wrapper" }, index.h("table", { key: '3b13c885dc0cefd1c2b7de3c336d803099009063', class: { 'data-table': true, 'bordered': this.bordered, 'striped': this.striped } }, index.h("thead", { key: 'a866c3ce695250fc6b220044955c6fafa68f5647' }, index.h("tr", { key: '465974d2bd2f39114cabda226aba8645d79b4a68' }, this.columns.map(column => (index.h("th", { key: column.field, style: { width: column.width } }, this.renderHeaderContent(column)))))), index.h("tbody", { key: '4b0a96da5bf54404774fca7bb9136561ddc57170' }, this.rows.map((row, rowIndex) => (index.h("tr", { key: rowIndex }, this.columns.map(column => (index.h("td", { key: `${rowIndex}-${column.field}` }, this.renderCellContent(column, row, rowIndex))))))))), index.h("div", { key: '1deba9664748b1953a65b2d7badc4b2e813ab2eb', class: "templates-slot", hidden: true }, index.h("slot", { key: '782d4ef14b8e6068e1d96a55af5f0b16af33dc0f' }))));
+        return (index.h("div", { key: 'a34267f6b11cdd0dff53bfa3da62b7a47934c73b', class: "table-wrapper" }, index.h("table", { key: 'b23ac2cd9a785d8fc89c09a04a6aa29a63e6d2b4', class: { 'data-table': true, 'bordered': this.bordered, 'striped': this.striped } }, index.h("thead", { key: 'e08ff945e40f3ec6db10285840d4185d110a1dc0' }, index.h("tr", { key: 'ffe2e7253865f5a650611e2859f979d0204fca2a' }, this.columns.map(column => (index.h("th", { key: column.field, style: { width: column.width } }, this.renderHeaderContent(column)))))), index.h("tbody", { key: '2d47105abba4eecad71b549282650b7f2b056b4c' }, this.rows.map((row, rowIndex) => (index.h("tr", { key: rowIndex }, this.columns.map(column => (index.h("td", { key: `${rowIndex}-${column.field}` }, this.renderCellContent(column, row, rowIndex))))))))), index.h("div", { key: '99fe2715e69abf50f69a844e76a3ad422f5b870b', class: "templates-slot", hidden: true }, index.h("slot", { key: '8c56201e8edb251c5f7494e00acdc5e5fbb67d00' }))));
     }
     static get watchers() { return {
         "columns": [{

package/dist/cjs/{tooltipArrow-Xkv-p1bY.js → tooltipArrow-DuANjCfc.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-B2QvhbC3.js');
+var index = require('./index-Dptupbm0.js');
 
 const TooltipArrow = (props) => (index.h("svg", { width: "16", height: "12", viewBox: "0 0 16 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, index.h("path", { d: "M8.83205 10.7519C8.43623 11.3457 7.56377 11.3457 7.16795 10.7519L1.04907e-06 -1.39876e-06L16 0L8.83205 10.7519Z", fill: "currentColor" })));
 

package/dist/collection/collection-manifest.json

@@ -13,7 +13,6 @@
     "components/sd-radio-group/sd-radio-group.js",
     "components/sd-select/sd-select.js",
     "components/sd-select-multiple-group/sd-select-multiple-group.js",
-    "components/sd-tabs/sd-tabs.js",
     "components/table-test/table-test.js",
     "components/sd-action-modal/sd-action-modal.js",
     "components/sd-badge/sd-badge.js",
@@ -35,6 +34,7 @@
     "components/sd-ghost-button/sd-ghost-button.js",
     "components/sd-icon/sd-icon.js",
     "components/sd-input/sd-input.js",
+    "components/sd-linear-progress/sd-linear-progress.js",
     "components/sd-loading-container/sd-loading-container.js",
     "components/sd-loading-modal/sd-loading-modal.js",
     "components/sd-modal-container/sd-modal-container.js",
@@ -58,6 +58,7 @@
     "components/sd-table/sd-td/sd-td.js",
     "components/sd-table/sd-thead/sd-thead.js",
     "components/sd-table/sd-tr/sd-tr.js",
+    "components/sd-tabs/sd-tabs.js",
     "components/sd-tag/sd-tag.js",
     "components/sd-text-link/sd-text-link.js",
     "components/sd-textarea/sd-textarea.js",

package/dist/collection/components/sd-action-modal/sd-action-modal.js

@@ -39,7 +39,7 @@ export class SdActionModal {
         if (this.height != null && this.height !== '') {
             sizeStyle.height = typeof this.height === 'number' ? `${this.height}px` : this.height;
         }
-        return (h("div", { key: '45997c9b1e10845c4d04528911147bc1d7192dd6', class: "sd-action-modal", style: { ...cssVars, ...sizeStyle } }, h("header", { key: '838bfdc66c52fffb7f226a2a1eb0bdd4a2a8addc', class: "sd-action-modal__header" }, h("h2", { key: 'e17e9c7954d0217071e2c21aa030f3abcc0a584f', class: "sd-action-modal__title" }, this.modalTitle), h("div", { key: 'e81bbfa0bcabba237be8364a40a71c38a4120af1', class: "sd-action-modal__header-sub" }, h("slot", { key: 'b98817a60a874897acd209e7184690f04678a5ca', name: "header-sub-title" })), h("sd-ghost-button", { key: '3b99fd3a4f3e795e5192fe9b41de8b97a40f80d0', class: "sd-action-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), h("div", { key: 'f499d92ecc3adeed3da427ae8bbdc0c6d7edf37b', class: "sd-action-modal__body" }, h("slot", { key: 'dd05e8f95be6aa98a84d5752c89dad9a28695601', name: "body" })), (this.buttonProps != null || this.buttonProps != undefined) && (h("footer", { key: '43b2338654d3a56aced7029749b0e03f0427545f', class: "sd-action-modal__footer" }, h("div", { key: '6308a79ed13017ee2c5a71d7dbf49a7da6bd775f', class: "sd-action-modal__footer-sub" }, h("slot", { key: 'f3764684c374d82a31cbd65333bb0f69eb6f2f1b', name: "bottom-sub-content" })), h("sd-button-v2", { key: '42a2b3068574b56172b0138076f49167da8e6625', ...DEFAULT_BUTTON_PROPS, ...this.buttonProps, onSdClick: () => this.ok.emit() })))));
+        return (h("div", { key: 'c8fdd9cdb0ce6850b900744f087ace5739b13e1f', class: "sd-action-modal", style: { ...cssVars, ...sizeStyle } }, h("header", { key: 'a8ba3d0c496f7fbf0291818c5136e466dfbe3cab', class: "sd-action-modal__header" }, h("h2", { key: 'df021377c4368ecf2316a019dbf3126923912ea2', class: "sd-action-modal__title" }, this.modalTitle), h("div", { key: '19f226d875e53f12192975165f6c0686120692c1', class: "sd-action-modal__header-sub" }, h("slot", { key: '859a677df07d6d869fbebcadfa59aab54da08cab', name: "header-sub-title" })), h("sd-ghost-button", { key: '3fab2e805587a3bfe450696a568c67ff08a7920a', class: "sd-action-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), h("div", { key: '94911045fe85bd87a9c2ba84ae2e8ff57b1f91ad', class: "sd-action-modal__body" }, h("slot", { key: '12430e8a43dbe76fde667b2ac5b79fa5fae89248', name: "body" })), (this.buttonProps != null || this.buttonProps != undefined) && (h("footer", { key: 'd90243f5ce989e19e8f1f2b0d4dbab426908d706', class: "sd-action-modal__footer" }, h("div", { key: '512b80f97adbe1ba36805418476ff2e611855338', class: "sd-action-modal__footer-sub" }, h("slot", { key: '9ee6b21a2e004074f1e468893ae5831eb440501b', name: "bottom-sub-content" })), h("sd-button-v2", { key: '48bd4e35cc5ae630989d057f41df028824e9da78', ...DEFAULT_BUTTON_PROPS, ...this.buttonProps, onSdClick: () => this.ok.emit() })))));
     }
     static get is() { return "sd-action-modal"; }
     static get originalStyleUrls() {

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

@@ -5,7 +5,7 @@ export class SdBadge {
     label = '';
     render() {
         const resolvedColor = BADGE_COLOR_MAP[this.color] ?? BADGE_COLOR_MAP.blue;
-        return (h("div", { key: '25c24499f0474cad07059347491dd38dc4f59025', class: "sd-badge", style: { '--sd-badge-color': resolvedColor } }, h("div", { key: '7580873ce298cf669a198c277bd4e6812e7c4120', class: "sd-badge__dot" }), h("div", { key: '6c2b8e63a490a3f538cd98749283a5decde63ca6', class: "sd-badge__label" }, this.label)));
+        return (h("div", { key: '6050de370a7c9cbad2c4eb2d9e19180d54bcf64f', class: "sd-badge", style: { '--sd-badge-color': resolvedColor } }, h("div", { key: '34c8fdf04e61f9fb16b651764e4cb13b2c6ec0c5', class: "sd-badge__dot" }), h("div", { key: '03ceee1c7d54589dfa61aef8e80be5799a816a66', class: "sd-badge__label" }, this.label)));
     }
     static get is() { return "sd-badge"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-barcode-input/sd-barcode-input.js

@@ -102,7 +102,7 @@ export class SdBarcodeInput {
             '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
             '--sd-system-color-field-bg-default': BARCODE_INPUT_COLORS.bg.barcode,
         };
-        return (h("sd-field", { key: '5e1e5e5ba201ea743fa83df03f7712d7141332e7', 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, size: this.size, 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("label", { key: '4b8d82acd91c247b148d1b16f3b3c9d4e69c178f', class: "sd-barcode-input__content" }, h("slot", { key: '0fb54ff8ebca25f348f1fdbb7b29f5e391beea9e', name: "prefix" }), h("input", { key: '9c1e3fd1bfa35cc663838dc0dc737497525a8aa6', name: this.name, ref: el => (this.nativeEl = el), class: `sd-barcode-input__native ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: '6e060c721546d34ce6137986ba7204df90a55f51', name: "suffix" }), this.clearable && this.internalValue && (h("sd-ghost-button", { key: 'ded4ca906d1f25bbc80a7ba8e090eb24f507bb09', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-barcode-input__clear-icon", onClick: async () => {
+        return (h("sd-field", { key: 'b1f0cde9ef54653ee1c71cda192b1bdfaf483c56', 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, size: this.size, 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("label", { key: '41429c5f9218b80374c859725973463a89d6395c', class: "sd-barcode-input__content" }, h("slot", { key: '55408b20fe1ed73cce03068ed21b019f106cb730', name: "prefix" }), h("input", { key: '96a99d5319f15691da47b0f16218cfed6009bf5e', name: this.name, ref: el => (this.nativeEl = el), class: `sd-barcode-input__native ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: '10b108a25cedd0f5ec6c7184bf7b776c96106b08', name: "suffix" }), this.clearable && this.internalValue && (h("sd-ghost-button", { key: 'bdf086a67e29d90e4e91fd40530ab29063c5a180', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-barcode-input__clear-icon", onClick: async () => {
                 if (this.disabled)
                     return;
                 this.internalValue = '';

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

@@ -62,13 +62,13 @@ export class SdButtonV2 {
         const hasLabel = Boolean(this.label);
         const iconOnly = !this.label && Boolean(this.icon) !== Boolean(this.rightIcon);
         const accessibleName = iconOnly && this.ariaLabel.trim() ? this.ariaLabel : undefined;
-        return (h("button", { key: '9e81a8201a521c9c1e14c2c0145607189b8c3838', class: this.getButtonClasses(preset, config.size, hasLabel, iconOnly), type: this.type, disabled: this.disabled, "aria-label": accessibleName, style: {
+        return (h("button", { key: '19a9be4f92af097e104f64e890203aab3f897c61', class: this.getButtonClasses(preset, config.size, hasLabel, iconOnly), type: this.type, disabled: this.disabled, "aria-label": accessibleName, style: {
                 '--sd-button-v2-bg': config.color,
                 '--sd-button-v2-bg-hover': PRESET_HOVER_BACKGROUNDS[preset],
                 '--sd-button-v2-border': PRESET_BORDER_COLORS[preset],
                 '--sd-button-v2-content': PRESET_CONTENT_COLORS[preset],
                 '--sd-button-v2-accent': BUTTON_FOCUS_RING_COLOR,
-            }, onClick: this.handleClick }, h("span", { key: '42d8b7f20ab0b3e8e32a18f2e8b2af9251558413', class: "sd-button-v2__content" }, this.icon && (h("sd-icon", { key: '8430b5aebe8c7d41bddf8378441d4182ee9ab344', class: "sd-button-v2__icon", name: this.icon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-v2-current-icon)" })), this.label && h("span", { key: '7a1865fb4472fb1e567c2adeb6a30e09665b6250', class: "sd-button-v2__label" }, this.label), this.rightIcon && (h("sd-icon", { key: '51738c13c5e518cf0d864beb9c6cc680d0b5c867', class: "sd-button-v2__icon sd-button-v2__icon--right", name: this.rightIcon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-v2-current-icon)" })))));
+            }, onClick: this.handleClick }, h("span", { key: '813e88dce8e00e983caa70da63fe7766ee115b68', class: "sd-button-v2__content" }, this.icon && (h("sd-icon", { key: '31b6980a27ddbeff51b1f28e13b197164ab3175f', class: "sd-button-v2__icon", name: this.icon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-v2-current-icon)" })), this.label && h("span", { key: '85737212b55b6d48c9c17312f0ae7a419298da4c', class: "sd-button-v2__label" }, this.label), this.rightIcon && (h("sd-icon", { key: 'ef8b914dec71d6857c26a26be74e63d9440a46de', class: "sd-button-v2__icon sd-button-v2__icon--right", name: this.rightIcon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-v2-current-icon)" })))));
     }
     static get is() { return "sd-button-v2"; }
     static get originalStyleUrls() {

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

@@ -3,7 +3,7 @@ export class SdCard {
     bordered = false;
     sdClass = '';
     render() {
-        return (h(Fragment, { key: 'fa3c7ed4a6fb93200c9faacc1aef1db51ed3050f' }, h("div", { key: '2e82506370c7f6873793053248bf28c2b5fe42ce', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, h("slot", { key: 'a725bee33ea056e6662485f72dcd08ae96acf03e' }))));
+        return (h(Fragment, { key: '299b67c4e5a95d03c67bfe7a7cc13cfda642e494' }, h("div", { key: '44630cec810c1ee0cc6526764adbae866f3d68f0', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, h("slot", { key: 'bbcb7e2332b1772cff4fd3b132e6378f6fbc0832' }))));
     }
     static get is() { return "sd-card"; }
     static get originalStyleUrls() {

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

@@ -171,7 +171,7 @@ export class SdChip {
             return;
         const formEl = this.el.closest('sd-form');
         formEl?.componentOnReady().then(form => {
-            form.sdUnregisterField(this.name);
+            form.sdUnregisterField(this);
         });
     }
     componentDidUpdate() {
@@ -205,7 +205,7 @@ export class SdChip {
             '--sd-chip-font-weight': typography.fontWeight,
             '--sd-chip-line-height': typography.lineHeight,
         };
-        return (h("span", { key: '70ea5743cf806c5d12f8559bdb12abb2adf2af30', class: {
+        return (h("span", { key: '7d84dd478510c7e144fd049028f2f0a70a909016', class: {
                 'sd-chip': true,
                 [`sd-chip--${state}`]: true,
                 'sd-chip--disabled': this.disabled,

package/dist/collection/components/sd-circle-progress/sd-circle-progress.config.js

@@ -1,4 +1,8 @@
 import spinnerTokens from "../../tokens/generated/component.spinner.json";
+import progressTokens from "../../tokens/generated/component.progress.json";
+import systemTokens from "../../tokens/generated/system.json";
+export const CIRCLE_PROGRESS_LABEL_COLOR = progressTokens.progress.color.label;
+export const CIRCLE_PROGRESS_PERCENT_ZERO_COLOR = systemTokens.color.content.tertiary;
 // TODO: error/complete 색상 및 inverse 흰색은 토큰 반영 후 교체
 export const CIRCLE_PROGRESS_COLOR_MAP = {
     primary: {

package/dist/collection/components/sd-circle-progress/sd-circle-progress.css

@@ -1,12 +1,13 @@
 @charset "UTF-8";
 sd-circle-progress {
   display: inline-flex;
-  width: 80px;
-  height: 80px;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
 }
 sd-circle-progress .sd-circle-progress {
-  width: 100%;
-  height: 100%;
+  width: 80px;
+  height: 80px;
 }
 sd-circle-progress .sd-circle-progress__track {
   stroke: var(--sd-circle-progress-track);
@@ -15,7 +16,23 @@ sd-circle-progress .sd-circle-progress__arc {
   stroke: var(--sd-circle-progress-arc);
   transform: rotate(-90deg);
   transform-origin: center center;
-  transition: stroke-dasharray 0.3s ease, stroke-dashoffset 0.3s ease;
+  transition: stroke-dasharray 0.4s linear, stroke-dashoffset 0.4s linear;
+}
+sd-circle-progress .sd-circle-progress__percent {
+  text-align: center;
+  color: var(--sd-circle-progress-percent-color);
+  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 26px;
+}
+sd-circle-progress .sd-circle-progress__label {
+  text-align: center;
+  color: var(--sd-circle-progress-label-color);
+  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 20px;
 }
 sd-circle-progress {
   /* indeterminate 모드: 회전 + dasharray grow/shrink 애니메이션 */

package/dist/collection/components/sd-circle-progress/sd-circle-progress.js

@@ -1,9 +1,10 @@
 import { Host, h } from "@stencil/core";
-import { CIRCLE_PROGRESS_CIRCUMFERENCE, CIRCLE_PROGRESS_COLOR_MAP, CIRCLE_PROGRESS_RADIUS, CIRCLE_PROGRESS_STROKE_WIDTH, CIRCLE_PROGRESS_VIEWBOX_SIZE, } from "./sd-circle-progress.config";
+import { CIRCLE_PROGRESS_CIRCUMFERENCE, CIRCLE_PROGRESS_COLOR_MAP, CIRCLE_PROGRESS_LABEL_COLOR, CIRCLE_PROGRESS_PERCENT_ZERO_COLOR, CIRCLE_PROGRESS_RADIUS, CIRCLE_PROGRESS_STROKE_WIDTH, CIRCLE_PROGRESS_VIEWBOX_SIZE, } from "./sd-circle-progress.config";
 export class SdCircleProgress {
     indeterminate = false;
     value = 0;
     type = 'primary';
+    label;
     get clampedValue() {
         if (!Number.isFinite(this.value))
             return 0;
@@ -11,9 +12,12 @@ export class SdCircleProgress {
     }
     render() {
         const colors = CIRCLE_PROGRESS_COLOR_MAP[this.type] ?? CIRCLE_PROGRESS_COLOR_MAP.primary;
+        const percentColor = this.clampedValue === 0 ? CIRCLE_PROGRESS_PERCENT_ZERO_COLOR : colors.arc;
         const hostStyle = {
             '--sd-circle-progress-track': colors.track,
             '--sd-circle-progress-arc': colors.arc,
+            '--sd-circle-progress-label-color': CIRCLE_PROGRESS_LABEL_COLOR,
+            '--sd-circle-progress-percent-color': percentColor,
         };
         const arcStyle = {};
         if (!this.indeterminate) {
@@ -22,7 +26,8 @@ export class SdCircleProgress {
             arcStyle.strokeDashoffset = '0';
         }
         const c = CIRCLE_PROGRESS_VIEWBOX_SIZE / 2;
-        return (h(Host, { key: 'ce120476470e03e49d5a50a0395bb21955163019', style: hostStyle }, h("svg", { key: 'ad0916ef87d9a04415d4712e3e84d44fcb8b40d7', class: "sd-circle-progress", viewBox: `0 0 ${CIRCLE_PROGRESS_VIEWBOX_SIZE} ${CIRCLE_PROGRESS_VIEWBOX_SIZE}`, xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: 'db230e486fe5bfd1325ddb4510558cadea09032f', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), h("circle", { key: '9e1c53e5d6dc75c6e5c9a3b79b329847b17b10d6', class: "sd-circle-progress__arc", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH, "stroke-linecap": "round", style: arcStyle }))));
+        const showPercent = !this.indeterminate;
+        return (h(Host, { key: '46d74c0edb5a5e8cd0472c83efc45a0efaf353b4', style: hostStyle }, h("svg", { key: '34117c89eb180370a215807e614ad08f4f72b517', class: "sd-circle-progress", viewBox: `0 0 ${CIRCLE_PROGRESS_VIEWBOX_SIZE} ${CIRCLE_PROGRESS_VIEWBOX_SIZE}`, xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: '08ac6f011b6a4b6744ddcf437b1e0a5b96abfc6e', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), h("circle", { key: '5ae0a53ce10bd5a8b2f316ebd00d3ee28c4336d6', class: "sd-circle-progress__arc", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH, "stroke-linecap": "round", style: arcStyle })), showPercent && (h("span", { key: 'fd52ee1947d41b2117c9ea6e4cc9a448799342e3', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && h("span", { key: 'a58776c4ef67eb900eba97ff4fed138c8f5e8452', class: "sd-circle-progress__label" }, this.label)));
     }
     static get is() { return "sd-circle-progress"; }
     static get originalStyleUrls() {
@@ -103,6 +108,25 @@ export class SdCircleProgress {
                 "reflect": true,
                 "attribute": "type",
                 "defaultValue": "'primary'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
             }
         };
     }

package/dist/collection/components/sd-confirm-modal/sd-confirm-modal.js

@@ -67,9 +67,9 @@ export class SdConfirmModal {
     render() {
         const iconName = CONFIRM_MODAL_ICON_MAP[this.type];
         const iconColor = CONFIRM_MODAL_ICON_COLOR[this.type];
-        return (h("div", { key: '527f7377ba0ccf59b2a212a885e05b0cfa3b3431', class: "sd-confirm-modal" }, h("sd-ghost-button", { key: '2423769fb6e746cf1e89a9d28a11cf7fc6d70ded', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (h("sd-icon", { key: '44f12a1fc2b19cf55ac75011af503ae0bab3188d', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), h("h2", { key: '50406274eca8bd43fec1cdd50d8e348e2270d11c', class: `sd-confirm-modal__title ${this.titleClass}` }, this.modalTitle), h("div", { key: 'a320636aa68da78881583005d3a2d5af9252f566', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (h("div", { key: '6702a46ad0d3db59b1bda03e506515ba302dd292', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg }))))), this.showContentBox && (h("div", { key: '1fa38c64b283b38a2b2dd58f772f1968c06be04d', class: "sd-confirm-modal__content-box" }, this.tagContents ? (h("div", { class: "sd-confirm-modal__custom-content", ref: el => {
+        return (h("div", { key: 'e4fa59bb7bfb335bc16f4e13e49a10c517e2520c', class: "sd-confirm-modal" }, h("sd-ghost-button", { key: 'ada7366093d2453dc354b534433647a07cecd632', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (h("sd-icon", { key: 'a3578b9366349289866e312929f53cefe3b9fcd7', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), h("h2", { key: 'c1880435ede221bfbfad4df31b222c486471d364', class: `sd-confirm-modal__title ${this.titleClass}` }, this.modalTitle), h("div", { key: '1f1edc065f2985c3ad9d3dd72db74a285474bc7a', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (h("div", { key: 'a198f9d6d64f19919c11bb101a192e04043c7e6f', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg }))))), this.showContentBox && (h("div", { key: '30b62d85ce7fe447643fbe19379cc39ccc44b9d0', class: "sd-confirm-modal__content-box" }, this.tagContents ? (h("div", { class: "sd-confirm-modal__custom-content", ref: el => {
                 this.customContentRef = el;
-            } })) : (h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && h("sd-tag", { name: this.tagPreset, label: this.tagLabel }), this.slotLabel && (h("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (h("div", { key: '217a024876abf99c9eddc7721a71ee7ce2f09308', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg })))))), h("div", { key: '58b585e8a4481e12df904e764357d50c30896987', class: "sd-confirm-modal__button" }, this.subButtonLabel && (h("sd-button-v2", { key: 'd066d5deb7a6993fbc7ff38ad9015dc3148b3241', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), h("sd-button-v2", { key: '920e596824d7fadf478f520f1e7814f5ab27aa95', name: this.resolvedMainButton, label: this.mainButtonLabel, onSdClick: () => this.ok.emit() }))));
+            } })) : (h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && h("sd-tag", { name: this.tagPreset, label: this.tagLabel }), this.slotLabel && (h("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (h("div", { key: '4d45291fafdd6dc5d70e69969cad5d3d7ea19bcc', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg })))))), h("div", { key: 'f7ff30646b1bb772d8f41044fab5642408df25d5', class: "sd-confirm-modal__button" }, this.subButtonLabel && (h("sd-button-v2", { key: '1750bfe43e9d00ff8a46777000c4ed8728502bb5', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), h("sd-button-v2", { key: 'ca0f57d4bdfe8f3a337de8dbe05b98e49e3f5a18', name: this.resolvedMainButton, label: this.mainButtonLabel, onSdClick: () => this.ok.emit() }))));
     }
     static get is() { return "sd-confirm-modal"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-date-picker/sd-date-picker-calendar/sd-date-picker-calendar.js

@@ -133,7 +133,7 @@ export class SdDatePickerCalendar {
             '--calendar-day-font-weight': CALENDAR_LAYOUT.day.fontWeight,
             '--calendar-day-bold-font-weight': CALENDAR_LAYOUT.day.boldFontWeight,
         };
-        return (h("div", { key: '8b1562e7be35eefd8b05c66931f6288edc48d4f7', class: "sd-date-picker-calendar", style: cssVars }, h("div", { key: '0a5b4eeeb54eed144fcb89a2030fa33783e187e3', class: "sd-date-picker-calendar__header" }, h("div", { key: '9d522b1a52afba7f035f2898aaec7252340f8f57', class: "sd-date-picker-calendar__nav-group" }, h("sd-ghost-button", { key: '944e17391090faf35e68d39b2c8c8de04ef115e5', ariaLabel: "prevYear", size: "xxs", icon: "chevronLeft", onClick: this.goPrevYear }), h("span", { key: '2b708445cb919ecec6a72b9532a83d09c3324f77', class: "sd-date-picker-calendar__label" }, this.currentYear), h("sd-ghost-button", { key: '501f4ac1ba04fe55856f891b8738454abe358d6b', ariaLabel: "nextYear", size: "xxs", icon: "chevronRight", onClick: this.goNextYear })), h("span", { key: 'dff5ff19a16897c79ac85c887ebe358ecefb910b', class: "sd-date-picker-calendar__divider", "aria-hidden": "true" }), h("div", { key: 'cee819c90306c593e201aefcf278ecb6aeca2ee6', class: "sd-date-picker-calendar__nav-group sd-date-picker-calendar__nav-group-month" }, h("sd-ghost-button", { key: '73c2fddb26e26fed12218a8320dce522c5de1303', ariaLabel: "prevMonth", size: "xxs", icon: "chevronLeft", onClick: this.goPrevMonth }), h("span", { key: 'abaa67ebd52b3e906989b84ead4a74187da7a176', class: "sd-date-picker-calendar__label sd-date-picker-calendar__label-month" }, this.currentMonth, "\uC6D4"), h("sd-ghost-button", { key: 'e90263362f21b2521bea4e587f801fa2994a618d', ariaLabel: "nextMonth", size: "xxs", icon: "chevronRight", onClick: this.goNextMonth }))), h("div", { key: '6913c667bd423d5930f7c3b802b391e15c6522c9', class: "sd-date-picker-calendar__week" }, WEEK_LABELS.map(label => (h("span", { key: label, class: "sd-date-picker-calendar__week-cell" }, label)))), h("div", { key: '7c85954ecc18216ebab15f9249882f88965e6490', class: "sd-date-picker-calendar__grid" }, this.cells.map(cell => {
+        return (h("div", { key: 'ac86be94b03ba15d7dfd885f96fb29a988468e30', class: "sd-date-picker-calendar", style: cssVars }, h("div", { key: '64a116ef69725d8f51eed4b54ed0f73e1dc23f9d', class: "sd-date-picker-calendar__header" }, h("div", { key: 'f0372d3d91dc9d1917ada3677baa4841074d6e22', class: "sd-date-picker-calendar__nav-group" }, h("sd-ghost-button", { key: '133611ecd17975064fce932a6cc6c23478d93c3a', ariaLabel: "prevYear", size: "xxs", icon: "chevronLeft", onClick: this.goPrevYear }), h("span", { key: '4445d069e21ac31b46c62ee8d7c213b72c7f787c', class: "sd-date-picker-calendar__label" }, this.currentYear), h("sd-ghost-button", { key: '407f906335b31b5c70018f53a21d0e7d0cbc39ee', ariaLabel: "nextYear", size: "xxs", icon: "chevronRight", onClick: this.goNextYear })), h("span", { key: 'ddf5d7348d5833988b5a12ece9209624842e40ee', class: "sd-date-picker-calendar__divider", "aria-hidden": "true" }), h("div", { key: '19a362b93db20bfaf63b6f8552a60d9baf3d7c24', class: "sd-date-picker-calendar__nav-group sd-date-picker-calendar__nav-group-month" }, h("sd-ghost-button", { key: '9618b3ebfadf65a7d8abfa8a7360b8fcccbf68b5', ariaLabel: "prevMonth", size: "xxs", icon: "chevronLeft", onClick: this.goPrevMonth }), h("span", { key: '2b989a40ad784a08f42a6571817431c028720564', class: "sd-date-picker-calendar__label sd-date-picker-calendar__label-month" }, this.currentMonth, "\uC6D4"), h("sd-ghost-button", { key: '60ab56cdfbd93e2cd0fa4453d44e540393ac5296', ariaLabel: "nextMonth", size: "xxs", icon: "chevronRight", onClick: this.goNextMonth }))), h("div", { key: '337ad71a09089b1771e734aa591b243abe226d92', class: "sd-date-picker-calendar__week" }, WEEK_LABELS.map(label => (h("span", { key: label, class: "sd-date-picker-calendar__week-cell" }, label)))), h("div", { key: 'baf0ad26ee64044f0af3b8126efaafe94feba8a4', class: "sd-date-picker-calendar__grid" }, this.cells.map(cell => {
             const isSelected = cell.inCurrentMonth && !!this.value && this.value === cell.date;
             const isToday = cell.inCurrentMonth && today === cell.date;
             const isDisabled = cell.inCurrentMonth && this.isDisabled(cell.date);

package/dist/collection/components/sd-date-picker/sd-date-picker-trigger/sd-date-picker-trigger.js

@@ -31,10 +31,10 @@ export class SdDatePickerTrigger {
                 ? DATEPICKER_COLORS.icon.disabled
                 : DATEPICKER_COLORS.icon.default,
         };
-        return (h("div", { key: 'b68ee54fcd6dc1fe5aa4e1f157ebd2f7603240c6', class: {
+        return (h("div", { key: '48f426459dfa50a5fab8e8e9c597b9a3c3f011c1', class: {
                 'sd-date-picker-trigger': true,
                 'sd-date-picker-trigger--disabled': this.disabled,
-            }, style: cssVars, onClick: this.handleClick }, h("sd-icon", { key: '8cf46b98ab2f4839e631af68451185fd849ed45f', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), h("span", { key: '971afb2a5c045800ebdd96df579df362ccc950c6', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
+            }, style: cssVars, onClick: this.handleClick }, h("sd-icon", { key: 'd5309ad89fe5232fea4a086784cfd28f920450c0', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), h("span", { key: '6885fdfce1384cc43cded08a40889edb15ba1108', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
     }
     static get is() { return "sd-date-picker-trigger"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-date-picker/sd-date-picker.js

@@ -93,9 +93,9 @@ export class SdDatePicker {
             '--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
             '--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
         };
-        return (h("sd-field", { key: 'b8a0f70ce797b4d28997c1870641077d9c067347', 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, size: this.size, 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: 'fe9117f48031e5524e2c751586f4b584a015000c', class: "sd-date-picker", ref: el => {
+        return (h("sd-field", { key: 'f301bd573e88d05c4588642370f062415698b9d6', 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, size: this.size, 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: '0f572527494a711f01248c8978392ee4cf53cfef', class: "sd-date-picker", ref: el => {
                 this.triggerRef = el;
-            } }, h("sd-date-picker-trigger", { key: 'd1bbcccf9de8b9aadb56291fdd2fa335af8c82dd', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '37a5c22f48e077e943a3701d4d686a52c102459e', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-date-picker-calendar", { key: 'dcc2248ad0963fb924f85aad59a6b24d7f3c23d8', value: this.value, selectable: this.selectable, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
+            } }, h("sd-date-picker-trigger", { key: '303a3412997821494c667d09c3aa1f11d47c9c1f', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: 'd9002fc84bd35af41393ddfd86f091d109f3f8bb', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-date-picker-calendar", { key: 'e4081f0764cc3c4c706caf09f93b5ec5d596f042', value: this.value, selectable: this.selectable, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
     }
     static get is() { return "sd-date-picker"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-date-range-picker/sd-date-range-picker-calendar/sd-date-range-picker-calendar.js

@@ -239,7 +239,7 @@ export class SdDateRangePickerCalendar {
             '--range-panel-gap': `${RANGE_LAYOUT.panelGap}px`,
             '--range-divider': RANGE_LAYOUT.divider,
         };
-        return (h(Fragment, { key: 'e925fa935f807e22b22a2f65b4af5b2568865781' }, h("div", { key: 'be601b16d179d91292b58c3b70ce6a4aa4f5e59a', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), h("div", { key: 'e193b983a7eb75a227ea8e1d13839dcc9e875588', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), h("span", { key: '6f2ea95c2fd490a46ac40f6a526ca028920bc564', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
+        return (h(Fragment, { key: 'b420e317ccefa8b143d781d916c0a60c8be15d2f' }, h("div", { key: 'ec537bf3ed58f6b18e80f885d78d8e5dcca7ecfe', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), h("div", { key: '70afdc7311c5707c6d639034fa14c6f5ca2aa3d2', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), h("span", { key: 'a400c8d9d3a0b1a4e13e7d4de004da550e91916f', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
     }
     static get is() { return "sd-date-range-picker-calendar"; }
     static get originalStyleUrls() {

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

@@ -186,7 +186,7 @@ export class SdDropdownButton extends BaseDropdownEvent {
     }
     render() {
         const { config, preset } = this.resolvedConfig;
-        return (h("div", { key: 'ce06d2b7e13cb234bb6e7393939d2ccd834801a5', class: "sd-dropdown-button" }, h("button", { key: '4bd3e86eec90698188a834eb35ff922dee7d1855', type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen), disabled: this.disabled, "aria-haspopup": "menu", "aria-expanded": String(this.isOpen), onClick: this.toggleDropdown, ref: el => (this.triggerRef = el), style: {
+        return (h("div", { key: '3a9e74c689c0345c89dbaeba5814164b72fe7108', class: "sd-dropdown-button" }, h("button", { key: '1633f3a0348082ec2433a6a1e7c41a64a797a725', type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen), disabled: this.disabled, "aria-haspopup": "menu", "aria-expanded": String(this.isOpen), onClick: this.toggleDropdown, ref: el => (this.triggerRef = el), style: {
                 '--sd-dropdown-button-bg': config.color,
                 '--sd-dropdown-button-bg-hover': PRESET_HOVER_BACKGROUNDS[preset],
                 '--sd-dropdown-button-border': PRESET_BORDER_COLORS[preset],
@@ -196,10 +196,10 @@ export class SdDropdownButton extends BaseDropdownEvent {
                 '--sd-dropdown-button-disabled-bg': DROPDOWN_DISABLED_BACKGROUND,
                 '--sd-dropdown-button-disabled-content': DROPDOWN_DISABLED_TEXT,
                 '--sd-dropdown-button-disabled-border': DROPDOWN_DISABLED_BORDER,
-            } }, h("span", { key: '2baea4f0777ec766625d4ae1fb14739aa61ca114', class: "sd-dropdown-button__trigger-label" }, this.label), h("span", { key: 'b37a94dd23d26a1444ddccc192b2a5ab2388bc64', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), h("span", { key: 'b903ff916c3ae1ab189cd08877a57940e45d8aeb', class: {
+            } }, h("span", { key: '7378e3aa3c4cf2991f3a92511f10ca1834af9563', class: "sd-dropdown-button__trigger-label" }, this.label), h("span", { key: 'd5b59ccaad1985e3a50bb9a53b0a156a1e2e28a9', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), h("span", { key: 'a24ed74d95ac1866abf9f3ed7a1c4b7bfe2c56c8', class: {
                 'sd-dropdown-button__trigger-icon': true,
                 'sd-dropdown-button__trigger-icon--open': this.isOpen,
-            }, "aria-hidden": "true" }, h("sd-icon", { key: '2eac1eabd2677decb0c1cfe4f518a7da9aca60ff', name: "chevronDown", size: DROPDOWN_CHEVRON_ICON_SIZE[config.size], color: "var(--sd-dropdown-button-current-content)" }))), this.renderDropdown(preset)));
+            }, "aria-hidden": "true" }, h("sd-icon", { key: '7cb8cf5665f3ee2e252f4c0471daee31f4af0c7b', name: "chevronDown", size: DROPDOWN_CHEVRON_ICON_SIZE[config.size], color: "var(--sd-dropdown-button-current-content)" }))), this.renderDropdown(preset)));
     }
     static get is() { return "sd-dropdown-button"; }
     static get originalStyleUrls() {

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

@@ -91,7 +91,7 @@ export class SdField {
             return;
         const formEl = this.el.closest('sd-form');
         formEl?.componentOnReady().then(form => {
-            form.sdUnregisterField(this.name);
+            form.sdUnregisterField(this);
         });
     }
     async sdValidate() {
@@ -170,20 +170,20 @@ export class SdField {
                     : {}),
             }
             : {};
-        return (h("div", { key: '1968d09203629bca596f6569720d532cae387654', class: {
+        return (h("div", { key: '218df97b257b97f4801a31a11d4cf2072f981f07', class: {
                 'sd-field': true,
                 'sd-field--has-label': !!this.label,
                 'sd-field--has-addon': !!addon,
                 [this.fieldStatus]: !!this.fieldStatus,
-            }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars } }, h("div", { key: 'c373b7878033026747c8c4fa5d984d036d391cd8', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: 'd6a379920eded2abb88b9f9260108a32c80ca888', class: "sd-field__main", style: this.width
+            }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars } }, h("div", { key: '66fb430b166850197649a46cd07068782636e932', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: 'f9dafcf19258a3253de84d35a7fd368d87232f95', class: "sd-field__main", style: this.width
                 ? {
                     width: typeof this.width === 'number' ? `${this.width}px` : this.width,
                     flex: 'none',
                 }
-                : {} }, h("div", { key: '25aa5a21fed7d1482629e1f0c07fc2e3b5440c3e', class: {
+                : {} }, h("div", { key: '1f4176fb04ba648fc2971904daa88974a4526868', class: {
                 'sd-field__control': true,
                 'sd-field__control--has-addon': !!addon,
-            } }, addon && h("div", { key: 'e6b9edaaef227f202b8cd1b0f921dd3a07cbd296', class: "sd-field__addon" }, addon), h("slot", { key: 'ecee94ec7996f99738508165c58afd07eced9d24' })), this.errorMsg || this.errorMessage ? (h("div", { class: "sd-field__error-message" }, this.errorMsg || this.errorMessage)) : (this.hint && h("div", { class: "sd-field__hint" }, this.hint))))));
+            } }, addon && h("div", { key: 'fd90999129ed8ab6b9870d73083048de8e8987f6', class: "sd-field__addon" }, addon), h("slot", { key: '9dbf3d99538016095c436619f9ad20f64fa20834' })), this.errorMsg || this.errorMessage ? (h("div", { class: "sd-field__error-message" }, this.errorMsg || this.errorMessage)) : (this.hint && h("div", { class: "sd-field__hint" }, this.hint))))));
     }
     renderLabel(label) {
         if (!label)

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

@@ -153,7 +153,7 @@ export class SdFloatingPopover {
         }
     }
     render() {
-        return h("slot", { key: 'c10da1f592b785b1c7540ba76e9d1768abeb0c11' });
+        return h("slot", { key: '2ee14400df156cb766c0f88b77bc232263b3c7e2' });
     }
     static get is() { return "sd-floating-portal"; }
     static get originalStyleUrls() {