@sellmate/design-system 1.0.66 → 1.0.68

package/dist/esm/sd-tbody.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, a as getElement, h, H as Host } from './index-BqHL8W3c.js';
+import { r as registerInstance, a as getElement, h, H as Host } from './index-BGyJgVXm.js';
 import { T as TABLE_ID_ATTR } from './constants-sZMi_32I.js';
 
 const sdTbodyCss = () => `:host{display:contents}:host *{box-sizing:border-box}.tbody{display:table-row-group}.tbody--empty .tbody__no-data-row{display:table-row}.tbody--empty .tbody__no-data-cell{display:table-cell;padding:0;border-bottom:none}`;
@@ -47,7 +47,7 @@ const SdTbody = class {
     }
     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/esm/sd-td.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, a as getElement, f as forceUpdate, h, H as Host } from './index-BqHL8W3c.js';
+import { r as registerInstance, a as getElement, f as forceUpdate, h, H as Host } from './index-BGyJgVXm.js';
 import { T as TABLE_ID_ATTR } from './constants-sZMi_32I.js';
 
 const sdTdCss = () => `sd-td *{box-sizing:border-box}sd-td{display:contents}sd-td.align-left{text-align:left}sd-td.align-center{text-align:center}sd-td.align-right{text-align:right}`;
@@ -40,7 +40,7 @@ const SdTd = class {
         }
     }
     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 watchers() { return {
         "field": [{

package/dist/esm/sd-text-link.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-BqHL8W3c.js';
+import { r as registerInstance, c as createEvent, h } from './index-BGyJgVXm.js';
 
 const textLink = {
 	gap: "4",
@@ -71,16 +71,16 @@ const SdTextLink = class {
             '--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 })))));
     }
 };
 SdTextLink.style = sdTextLinkCss();

package/dist/esm/sd-textarea.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-BqHL8W3c.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-BGyJgVXm.js';
 import { n as nanoid } from './index-CCwNgVmC.js';
-import { i as inputTokens } from './component.textinput-CJwbBrt5.js';
+import { i as inputTokens } from './component.textinput-ByhWX2NK.js';
 
 const TEXTAREA_TOKENS = {
     paddingX: inputTokens.textinput.sm.paddingX,
@@ -127,7 +127,7 @@ const SdTextarea = class {
             '--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: '4c93d887429d6790d2d49c951be64e4be1496fd4', 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: 'b64aa1b2f02c1f68db57e5e36e0a7146257629e1', class: "sd-textarea__content" }, h("textarea", { key: 'b2baff1d99b9c2347f0b0bb751fc51268d2c48c7', 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 watchers() { return {
         "value": [{

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, a as getElement, h, H as Host } from './index-BqHL8W3c.js';
+import { r as registerInstance, a as getElement, h, H as Host } from './index-BGyJgVXm.js';
 import { T as TABLE_ID_ATTR } from './constants-sZMi_32I.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}`;
@@ -134,16 +134,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 (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/esm/sd-toast-container.entry.js

@@ -1,9 +1,9 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-BqHL8W3c.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-BGyJgVXm.js';
 
 const DEFAULT_DURATION = 4000;
 const DEFAULT_MAX_VISIBLE = 3;
 const DEFAULT_GAP = 8;
-const DEFAULT_Z_INDEX = 10000;
+const DEFAULT_Z_INDEX = 999;
 const TRANSITION_DURATION = 400;
 const TRANSITION_FALLBACK_BUFFER = 100;
 const COLLAPSED_SCALE_STEP = 0.05;
@@ -232,7 +232,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 (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/esm/sd-toast.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-BqHL8W3c.js';
+import { r as registerInstance, c as createEvent, h } from './index-BGyJgVXm.js';
 
 const toast = {
 	icon: "16",
@@ -55,10 +55,10 @@ const SdToast = class {
     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() })))));
     }
 };
 SdToast.style = sdToastCss();

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-BqHL8W3c.js';
+import { r as registerInstance, c as createEvent, h } from './index-BGyJgVXm.js';
 
 const toggle = {
 	height: "28",
@@ -118,7 +118,7 @@ const SdToggle = class {
             '--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 })));
     }
 };
 SdToggle.style = sdToggleCss();

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, a as getElement, h, H as Host } from './index-BqHL8W3c.js';
+import { r as registerInstance, a as getElement, h, H as Host } from './index-BGyJgVXm.js';
 import { T as TABLE_ID_ATTR } from './constants-sZMi_32I.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}`;
@@ -129,13 +129,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 (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/esm/system-C-txBx-h.js

@@ -0,0 +1,14 @@
+const color = {
+	bg: {
+		accent: {
+			"default": "#0075FF"}},
+	content: {
+		primary: "#222222",
+		secondary: "#555555",
+		inverse: "#FFFFFF"
+	}};
+var systemTokens = {
+	color: color
+};
+
+export { systemTokens as s };

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-BqHL8W3c.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-BGyJgVXm.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}`;
 
@@ -78,7 +78,7 @@ const DataTable = class {
         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 watchers() { return {
         "columns": [{

package/dist/esm/{tooltipArrow-BcsrQx1U.js → tooltipArrow-BAjP9_Hx.js}

@@ -1,4 +1,4 @@
-import { h } from './index-BqHL8W3c.js';
+import { h } from './index-BGyJgVXm.js';
 
 const TooltipArrow = (props) => (h("svg", { width: "16", height: "12", viewBox: "0 0 16 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, 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/types/components/sd-chip/sd-chip.config.d.ts

@@ -0,0 +1,36 @@
+export declare const CHIP_LAYOUT: {
+    height: string;
+    paddingX: string;
+    gap: string;
+    radius: string;
+    borderWidth: string;
+};
+export declare const CHIP_COLORS: {
+    bg: {
+        default: string;
+        error: string;
+        focus: string;
+    };
+    content: {
+        default: string;
+        error: string;
+        focus: string;
+    };
+    border: {
+        focus: string;
+    };
+};
+export declare const CHIP_TYPOGRAPHY: {
+    default: {
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+    };
+    focus: {
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+    };
+};

package/dist/types/components/sd-chip/sd-chip.d.ts

@@ -0,0 +1,47 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { ValidatableField } from '../sd-form/sd-form';
+import { Rule } from '../../types/form';
+export declare class SdChip implements ValidatableField {
+    el: HTMLElement;
+    name: string;
+    value: string;
+    error: boolean;
+    disabled: boolean;
+    placeholder: string;
+    rules?: Rule[];
+    internalValue: string;
+    isEditing: boolean;
+    update: EventEmitter<string>;
+    remove: EventEmitter<void>;
+    focus: EventEmitter<void>;
+    blur: EventEmitter<void>;
+    private inputEl?;
+    private draftValue;
+    private shouldInitInput;
+    valueChanged(newValue: string): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    sdValidate(): Promise<boolean>;
+    sdReset(): Promise<void>;
+    sdResetValidate(): Promise<void>;
+    sdResetValidation(): Promise<void>;
+    sdFocus(): Promise<void>;
+    sdGetNativeElement(): Promise<HTMLSpanElement | null>;
+    private enterEditMode;
+    private commitEdit;
+    private cancelEdit;
+    private handleChipClick;
+    private handleChipKeyDown;
+    private handleInputChange;
+    private handleInputKeyDown;
+    private handleInputBlur;
+    private handlePaste;
+    private handleRemoveClick;
+    private syncInputValue;
+    private registerToForm;
+    private unregisterFromForm;
+    componentDidUpdate(): void;
+    private resolveState;
+    render(): any;
+}

package/dist/types/components/sd-guide/sd-guide.config.d.ts

@@ -0,0 +1,44 @@
+export declare const GUIDE_CONFIG: {
+    readonly gap: `${string}px`;
+    readonly button: {
+        readonly height: `${string}px`;
+        readonly paddingX: `${string}px`;
+        readonly radius: `${string}px`;
+        readonly gap: `${string}px`;
+        readonly fontFamily: string;
+        readonly fontSize: `${string}px`;
+        readonly fontWeight: string;
+        readonly lineHeight: `${string}px`;
+        readonly iconSize: number;
+        readonly iconColorDefault: string;
+        readonly iconColorActive: string;
+        readonly iconColorNotion: string;
+        readonly borderWidth: `${string}px`;
+        readonly borderColor: string;
+        readonly bgDefault: string;
+        readonly bgTip: string;
+        readonly bgNotion: string;
+        readonly textDefault: string;
+        readonly textActive: string;
+    };
+    readonly contents: {
+        readonly paddingX: `${string}px`;
+        readonly paddingY: `${string}px`;
+        readonly gap: `${string}px`;
+        readonly rowGap: `${string}px`;
+        readonly bodyGap: `${string}px`;
+        readonly titleGap: `${string}px`;
+        readonly radius: `${string}px`;
+        readonly iconColor: string;
+        readonly iconColorNotion: string;
+        readonly titleFontFamily: string;
+        readonly titleFontSize: `${string}px`;
+        readonly titleFontWeight: string;
+        readonly titleLineHeight: `${string}px`;
+        readonly bodyFontFamily: string;
+        readonly bodyFontSize: `${string}px`;
+        readonly bodyFontWeight: string;
+        readonly bodyLineHeight: `${string}px`;
+        readonly textColor: string;
+    };
+};

package/dist/types/components/sd-guide/sd-guide.d.ts

@@ -1,19 +1,18 @@
-type GuideType = 'help' | 'pdf' | 'youtube' | 'notion' | 'event';
+export type GuideType = 'tip' | 'notion';
 export declare class SdGuide {
     el: HTMLElement;
     type: GuideType;
     label: string;
     message: string | string[];
-    guideUrl: string;
+    url: string;
     popupTitle: string;
     popupWidth?: number;
     popupShow: boolean;
     private guideRef?;
     private handleClickGuide;
-    private get guideClass();
     closeDropdown: () => void;
+    private get guideStyle();
     render(): any;
     renderListItem(message: string | string[], depth?: number): HTMLElement[];
     renderLi: (message: string, depth: number) => any;
 }
-export {};

package/dist/types/components/sd-loading-container/sd-loading-container.config.d.ts

@@ -1,4 +1,4 @@
-export declare const LOADING_CONTAINER_DEFAULT_Z_INDEX = 10000;
+export declare const LOADING_CONTAINER_DEFAULT_Z_INDEX = 999;
 export interface SdLoadingShowArgs {
     message?: string;
 }

package/dist/types/components/sd-loading-modal/sd-loading-modal.d.ts

@@ -3,6 +3,7 @@ import { type LoadingModalState } from './sd-loading-modal.config';
 export declare class SdLoadingModal {
     state: LoadingModalState;
     message: string;
+    useButton: boolean;
     buttonLabel: string;
     width?: string | number;
     height?: string | number;

package/dist/types/components/sd-modal-container/sd-modal-container.config.d.ts

@@ -19,6 +19,7 @@ export interface ConfirmModalOptions {
 export interface LoadingModalOptions {
     state?: LoadingModalState;
     message?: string;
+    useButton?: boolean;
     buttonLabel?: string;
     width?: string | number;
     height?: string | number;

package/dist/types/components/sd-modal-container/sd-modal-container.d.ts

@@ -1,34 +1,30 @@
-import type { ConfirmModalOptions, LoadingModalOptions, ModalEntry, ModalDialogRefLike, SdModalCreateOptions } from './sd-modal-container.config';
+import type { ConfirmModalOptions, LoadingModalOptions, ModalDialogRefLike, ModalEntry, SdModalCreateOptions } from './sd-modal-container.config';
 export declare class SdModalContainer {
     el: HTMLElement;
-    entries: ModalEntry[];
+    autoRemove: boolean;
+    entry?: ModalEntry;
     isVisible: boolean;
-    isBackdropVisible: boolean;
-    private contentRef?;
-    private containerDismissTimerId?;
-    private previousBodyOverflow;
-    private bodyScrollLocked;
-    handleKeydown(e: KeyboardEvent): void;
+    backdropVisible: boolean;
+    private layerRef?;
     open(options: ConfirmModalOptions, modalRef: ModalDialogRefLike): Promise<string>;
     openLoading(options: LoadingModalOptions, modalRef: ModalDialogRefLike): Promise<string>;
     createCustom(element: HTMLElement, options: SdModalCreateOptions, modalRef: ModalDialogRefLike): Promise<string>;
+    componentDidRender(): void;
+    disconnectedCallback(): void;
+    dismissById(id: string, reason?: 'confirm' | 'cancel' | 'close'): Promise<void>;
+    update(id: string, props: Partial<ConfirmModalOptions> | Partial<LoadingModalOptions>): Promise<void>;
+    private mountEntry;
     private attachModalEventListeners;
     private attachLoadingModalEventListeners;
     private dispatchClose;
-    private registerEntry;
-    dismissById(id: string, reason?: 'confirm' | 'cancel' | 'close'): Promise<void>;
-    update(id: string, props: Partial<ConfirmModalOptions> | Partial<LoadingModalOptions>): Promise<void>;
+    private requestDismiss;
+    private finalizeDismiss;
     private createConfirmModal;
     private createLoadingModal;
     private applyLoadingProps;
     private applyProps;
     private handleBackdropClick;
     private shakeModal;
-    disconnectedCallback(): void;
-    private setBodyScrollLock;
-    private getTopEntry;
-    private requestDismiss;
-    private finalizeDismiss;
     private waitForModalReady;
     private hasOwnProp;
     private setAttr;

package/dist/types/components/sd-pagination/sd-pagination.config.d.ts

@@ -0,0 +1,23 @@
+export declare const PAGINATION_LAYOUT: {
+    height: string;
+    paddingX: string;
+    radius: string;
+    gap: string;
+    moveGap: string;
+    iconSize: number;
+};
+export declare const PAGINATION_TYPOGRAPHY: {
+    fontFamily: string;
+    fontSize: string;
+    lineHeight: string;
+    fontWeightDefault: string;
+    fontWeightSelected: string;
+};
+export declare const PAGINATION_COLORS: {
+    contentDefault: string;
+    contentHover: string;
+    contentSelected: string;
+    bgHover: string;
+    bgSelected: string;
+    iconDefault: string;
+};

package/dist/types/components/sd-pagination/sd-pagination.d.ts

@@ -4,13 +4,13 @@ export declare class SdPagination {
     lastPage: number;
     simple: boolean;
     pageChange: EventEmitter<number>;
-    private get paginationClasses();
     private get pageNumbers();
     private get buttonWidth();
-    private handlePageChange;
-    private handleGroupChange;
     private get isFirstGroup();
     private get isLastGroup();
+    private handlePageChange;
+    private handleGroupChange;
+    private renderNavButton;
     private renderPrevButtons;
     private renderNextButtons;
     render(): any;

package/dist/types/components/sd-radio/sd-radio.config.d.ts

@@ -3,6 +3,7 @@ export declare const RADIO_LAYOUT: {
     radius: string;
     borderWidth: string;
     gap: string;
+    dotSize: string;
 };
 export declare const RADIO_TYPOGRAPHY: {
     fontSize: string;

package/dist/types/components/sd-select-v2/sd-select-v2.config.d.ts

@@ -61,6 +61,7 @@ export declare const LIST_ITEM_TYPOGRAPHY: {
     fontSize: string;
     lineHeight: string;
     fontWeight: string;
+    selectedFontWeight: string;
 };
 export declare const LIST_ITEM_COLORS: {
     bg: {
@@ -71,6 +72,7 @@ export declare const LIST_ITEM_COLORS: {
         default: string;
         hover: string;
         disabled: string;
+        selected: string;
     };
     depth1: {
         bg: string;
@@ -86,7 +88,6 @@ export declare const LIST_ITEM_COLORS: {
 };
 export declare const LIST_BOX_LAYOUT: {
     radius: string;
-    paddingBottom: string;
 };
 export declare const SEARCH_THRESHOLD = 11;
 export declare const SEARCH_DEBOUNCE_MS = 1000;

package/dist/types/components/sd-table/sd-table.stories.helpers.d.ts

@@ -0,0 +1,29 @@
+import { LitElement, nothing, type TemplateResult } from 'lit';
+import type { Row, SdTableColumn, SdTableStickyColumn } from './constants';
+export declare class StoryVirtualTable extends LitElement {
+    static styles: import("lit").CSSResult;
+    columns: SdTableColumn[];
+    rows: Row[];
+    stickyColumn: SdTableStickyColumn;
+    stickyHeader: boolean;
+    selectable: boolean;
+    resizable: boolean;
+    height: string;
+    width: string;
+    rowHeight: number;
+    rowKey: string;
+    renderRow?: (row: Row, absoluteIndex: number) => TemplateResult | typeof nothing;
+    private range;
+    private tableRef;
+    private detachListener?;
+    private syncRafId;
+    constructor();
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    render(): TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'story-virtual-table': StoryVirtualTable;
+    }
+}

package/dist/types/components/sd-toast-container/sd-toast-container.config.d.ts

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