@sellmate/design-system 1.9.0 → 1.10.0

package/dist/esm/sd-dropdown-button.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, a as getElement, h } from './index-BpO2YWvq.js';
 import { s as sanitizeInlineHtml } from './sanitize-inline-html-BE4tnQ2Z.js';
-import { B as BUTTON_CONFIG, g as getPresetName, e as buttonTokens, c as PRESET_BORDER_COLORS$1, P as PRESET_CONTENT_COLORS$1, d as PRESET_HOVER_BACKGROUNDS$1, b as BUTTON_FOCUS_RING_COLOR } from './sd-button.config-CdRvJ-Uc.js';
+import { B as BUTTON_CONFIG, g as getPresetName, f as buttonTokens, d as PRESET_BORDER_COLORS$1, P as PRESET_ICON_COLORS$1, c as PRESET_TEXT_COLORS$1, e as PRESET_HOVER_BACKGROUNDS$1, b as BUTTON_FOCUS_RING_COLOR } from './sd-button.config-DjcjlPt7.js';
 import { s as systemTokens } from './system-j2khhcHY.js';
 
 class DropdownManager {
@@ -98,7 +98,8 @@ const DROPDOWN_BUTTON_CONFIG = (() => {
     return Object.fromEntries(names.map(name => [name, BUTTON_CONFIG[name]]));
 })();
 const PRESET_HOVER_BACKGROUNDS = PRESET_HOVER_BACKGROUNDS$1;
-const PRESET_CONTENT_COLORS = PRESET_CONTENT_COLORS$1;
+const PRESET_TEXT_COLORS = PRESET_TEXT_COLORS$1;
+const PRESET_ICON_COLORS = PRESET_ICON_COLORS$1;
 const PRESET_BORDER_COLORS = PRESET_BORDER_COLORS$1;
 const PRESET_DIVIDER_COLORS = {
     primary: buttonTokens.button.dropdown.brand.strong.split,
@@ -142,11 +143,12 @@ const DROPDOWN_CHEVRON_ICON_SIZE = {
 };
 const DROPDOWN_DISABLED_BACKGROUND = buttonTokens.button.bg.disabled;
 const DROPDOWN_DISABLED_TEXT = buttonTokens.button.text.disabled;
+const DROPDOWN_DISABLED_ICON = buttonTokens.button.icon.disabled;
 const DROPDOWN_DISABLED_BORDER = buttonTokens.button.border.disabled;
 const isDropdownButtonName = (value) => value in DROPDOWN_BUTTON_CONFIG;
 const getDropdownButtonPreset = (value) => getPresetName(value);
 
-const sdDropdownButtonCss = () => `sd-dropdown-button{display:inline-flex;width:fit-content;height:fit-content}.sd-dropdown-button{display:inline-flex;position:relative}.sd-dropdown-button__trigger{--sd-dropdown-button-height:var(--sd-button-button-md-height, 36px);--sd-dropdown-button-padding-x:var(--sd-button-button-md-padding-x, 20px);--sd-dropdown-button-gap:var(--sd-button-button-md-gap, 8px);--sd-dropdown-button-font-family:var(--sd-button-button-md-typography-font-family, inherit);--sd-dropdown-button-font-size:var(--sd-button-button-md-typography-font-size, 12px);--sd-dropdown-button-font-weight:var(--sd-button-button-md-typography-font-weight, 500);--sd-dropdown-button-text-decoration:var(--sd-button-button-md-typography-text-decoration, none);--sd-dropdown-button-bg:#025497;--sd-dropdown-button-bg-hover:#004177;--sd-dropdown-button-border:transparent;--sd-dropdown-button-content:#FFFFFF;--sd-dropdown-button-current-content:var(--sd-dropdown-button-content);--sd-dropdown-button-divider:#006AC1;--sd-dropdown-button-accent:#0075FF;--sd-dropdown-button-disabled-bg:var(--sd-button-button-bg-disabled, #E1E1E1);--sd-dropdown-button-disabled-content:var(--sd-button-button-text-disabled, #888888);--sd-dropdown-button-disabled-border:var(--sd-button-button-border-disabled, #CCCCCC);display:inline-flex;align-items:stretch;justify-content:space-between;min-height:var(--sd-dropdown-button-height);padding:0;border:var(--sd-button-button-border-width-default, 1px) solid var(--sd-dropdown-button-border);border-radius:var(--sd-button-button-radius-sm, 4px);background:var(--sd-dropdown-button-bg);color:var(--sd-dropdown-button-current-content);cursor:pointer;box-sizing:border-box;font-family:var(--sd-dropdown-button-font-family);font-size:var(--sd-dropdown-button-font-size);font-weight:var(--sd-dropdown-button-font-weight);line-height:1;text-decoration:var(--sd-dropdown-button-text-decoration);transition:background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;white-space:nowrap}.sd-dropdown-button__trigger:hover:not(.sd-dropdown-button__trigger--disabled){background:var(--sd-dropdown-button-bg-hover)}.sd-dropdown-button__trigger:focus-visible{outline:0;box-shadow:0 0 0 2px var(--sd-dropdown-button-accent)}.sd-dropdown-button__trigger--xs{--sd-dropdown-button-height:var(--sd-button-button-xs-height, 24px);--sd-dropdown-button-padding-x:var(--sd-button-button-xs-padding-x, 8px);--sd-dropdown-button-gap:var(--sd-button-button-xs-gap, 4px);--sd-dropdown-button-font-family:var(--sd-button-button-xs-typography-font-family, inherit);--sd-dropdown-button-font-size:var(--sd-button-button-xs-typography-font-size, 12px);--sd-dropdown-button-font-weight:var(--sd-button-button-xs-typography-font-weight, 500);--sd-dropdown-button-text-decoration:var(     --sd-button-button-xs-typography-text-decoration,     none   )}.sd-dropdown-button__trigger--sm{--sd-dropdown-button-height:var(--sd-button-button-sm-height, 28px);--sd-dropdown-button-padding-x:var(--sd-button-button-sm-padding-x, 12px);--sd-dropdown-button-gap:var(--sd-button-button-sm-gap, 6px);--sd-dropdown-button-font-family:var(--sd-button-button-sm-typography-font-family, inherit);--sd-dropdown-button-font-size:var(--sd-button-button-sm-typography-font-size, 12px);--sd-dropdown-button-font-weight:var(--sd-button-button-sm-typography-font-weight, 500);--sd-dropdown-button-text-decoration:var(     --sd-button-button-sm-typography-text-decoration,     none   )}.sd-dropdown-button__trigger--md{--sd-dropdown-button-height:var(--sd-button-button-md-height, 36px);--sd-dropdown-button-padding-x:var(--sd-button-button-md-padding-x, 20px);--sd-dropdown-button-gap:var(--sd-button-button-md-gap, 8px);--sd-dropdown-button-font-family:var(--sd-button-button-md-typography-font-family, inherit);--sd-dropdown-button-font-size:var(--sd-button-button-md-typography-font-size, 16px);--sd-dropdown-button-font-weight:var(--sd-button-button-md-typography-font-weight, 500);--sd-dropdown-button-text-decoration:var(     --sd-button-button-md-typography-text-decoration,     none   );border-radius:var(--sd-button-button-radius-md, 6px)}.sd-dropdown-button__trigger--disabled{border-color:var(--sd-dropdown-button-disabled-border);background:var(--sd-dropdown-button-disabled-bg);--sd-dropdown-button-current-content:var(--sd-dropdown-button-disabled-content);cursor:not-allowed}.sd-dropdown-button:not(.sd-dropdown-button--split) .sd-dropdown-button__trigger{gap:var(--sd-dropdown-button-gap);padding:0 var(--sd-dropdown-button-padding-x)}.sd-dropdown-button:not(.sd-dropdown-button--split) .sd-dropdown-button__trigger-label{padding:0}.sd-dropdown-button:not(.sd-dropdown-button--split) .sd-dropdown-button__trigger-icon{min-width:0;padding:0}.sd-dropdown-button--split{display:inline-flex;align-items:stretch}.sd-dropdown-button--split .sd-dropdown-button__trigger--label-part{border-top-right-radius:0;border-bottom-right-radius:0;border-right-width:0}.sd-dropdown-button--split .sd-dropdown-button__trigger--chevron-part{border-top-left-radius:0;border-bottom-left-radius:0;border-left:var(--sd-button-button-border-width-default, 1px) solid var(--sd-dropdown-button-divider)}.sd-dropdown-button--split .sd-dropdown-button__trigger--chevron-part.sd-dropdown-button__trigger--disabled{border-left-color:var(--sd-dropdown-button-disabled-border)}.sd-dropdown-button__trigger-label,.sd-dropdown-button__trigger-icon{display:inline-flex;align-items:center;justify-content:center}.sd-dropdown-button__trigger-label{flex:1 1 auto;min-width:0;padding:0 var(--sd-dropdown-button-padding-x)}.sd-dropdown-button__trigger-icon{flex:0 0 auto;min-width:calc(var(--sd-dropdown-button-height) - 2px);padding:0 calc(var(--sd-dropdown-button-gap) + 2px);transition:transform 0.2s ease}.sd-dropdown-button__trigger-icon--open{transform:rotate(180deg)}.sd-dropdown-button__menu{position:relative;display:grid;width:max-content;min-width:var(--sd-dropdown-button-menu-min-width, max-content);max-width:calc(100vw - 24px);padding:4px 0;border:0;border-radius:4px;background:#FFFFFF;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1019607843);box-sizing:border-box;overflow:hidden}.sd-dropdown-button__menu-item{--sd-dropdown-button-menu-item-current-color:var(--sd-dropdown-button-menu-item-color);display:inline-flex;align-items:center;gap:8px;min-height:28px;width:100%;padding:0 12px;border:0;border-radius:0;background:transparent;color:var(--sd-dropdown-button-menu-item-current-color);cursor:pointer;box-sizing:border-box;font:inherit;text-align:left;transition:background-color 0.15s ease, color 0.15s ease}.sd-dropdown-button__menu-item--active{background:var(--sd-dropdown-button-menu-item-active-bg);--sd-dropdown-button-menu-item-current-color:var(--sd-dropdown-button-menu-item-active-color)}.sd-dropdown-button__menu-item--disabled{--sd-dropdown-button-menu-item-current-color:var(--sd-dropdown-button-disabled-content);cursor:not-allowed}.sd-dropdown-button__menu-item-icon{flex:0 0 auto}.sd-dropdown-button__menu-item-label{display:inline-flex;align-items:center;min-width:0;white-space:nowrap;font-size:12px}`;
+const sdDropdownButtonCss = () => `sd-dropdown-button{display:inline-flex;width:fit-content;height:fit-content}.sd-dropdown-button{display:inline-flex;position:relative}.sd-dropdown-button__trigger{--sd-dropdown-button-height:var(--sd-button-button-md-height, 36px);--sd-dropdown-button-padding-x:var(--sd-button-button-md-padding-x, 20px);--sd-dropdown-button-gap:var(--sd-button-button-md-gap, 8px);--sd-dropdown-button-font-family:var(--sd-button-button-md-typography-font-family, inherit);--sd-dropdown-button-font-size:var(--sd-button-button-md-typography-font-size, 12px);--sd-dropdown-button-font-weight:var(--sd-button-button-md-typography-font-weight, 500);--sd-dropdown-button-text-decoration:var(--sd-button-button-md-typography-text-decoration, none);--sd-dropdown-button-bg:#025497;--sd-dropdown-button-bg-hover:#004177;--sd-dropdown-button-border:transparent;--sd-dropdown-button-content:#FFFFFF;--sd-dropdown-button-icon:var(--sd-dropdown-button-content);--sd-dropdown-button-current-content:var(--sd-dropdown-button-content);--sd-dropdown-button-current-icon:var(--sd-dropdown-button-icon);--sd-dropdown-button-divider:#006AC1;--sd-dropdown-button-accent:#0075FF;--sd-dropdown-button-disabled-bg:var(--sd-button-button-bg-disabled, #E1E1E1);--sd-dropdown-button-disabled-content:var(--sd-button-button-text-disabled, #888888);--sd-dropdown-button-disabled-icon:var(--sd-button-button-icon-disabled, #BBBBBB);--sd-dropdown-button-disabled-border:var(--sd-button-button-border-disabled, #CCCCCC);display:inline-flex;align-items:stretch;justify-content:space-between;min-height:var(--sd-dropdown-button-height);padding:0;border:var(--sd-button-button-border-width-default, 1px) solid var(--sd-dropdown-button-border);border-radius:var(--sd-button-button-radius-sm, 4px);background:var(--sd-dropdown-button-bg);color:var(--sd-dropdown-button-current-content);cursor:pointer;box-sizing:border-box;font-family:var(--sd-dropdown-button-font-family);font-size:var(--sd-dropdown-button-font-size);font-weight:var(--sd-dropdown-button-font-weight);line-height:1;text-decoration:var(--sd-dropdown-button-text-decoration);transition:background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;white-space:nowrap}.sd-dropdown-button__trigger:hover:not(.sd-dropdown-button__trigger--disabled){background:var(--sd-dropdown-button-bg-hover)}.sd-dropdown-button__trigger:focus-visible{outline:0;box-shadow:0 0 0 2px var(--sd-dropdown-button-accent)}.sd-dropdown-button__trigger--xs{--sd-dropdown-button-height:var(--sd-button-button-xs-height, 24px);--sd-dropdown-button-padding-x:var(--sd-button-button-xs-padding-x, 8px);--sd-dropdown-button-gap:var(--sd-button-button-xs-gap, 4px);--sd-dropdown-button-font-family:var(--sd-button-button-xs-typography-font-family, inherit);--sd-dropdown-button-font-size:var(--sd-button-button-xs-typography-font-size, 12px);--sd-dropdown-button-font-weight:var(--sd-button-button-xs-typography-font-weight, 500);--sd-dropdown-button-text-decoration:var(     --sd-button-button-xs-typography-text-decoration,     none   )}.sd-dropdown-button__trigger--sm{--sd-dropdown-button-height:var(--sd-button-button-sm-height, 28px);--sd-dropdown-button-padding-x:var(--sd-button-button-sm-padding-x, 12px);--sd-dropdown-button-gap:var(--sd-button-button-sm-gap, 6px);--sd-dropdown-button-font-family:var(--sd-button-button-sm-typography-font-family, inherit);--sd-dropdown-button-font-size:var(--sd-button-button-sm-typography-font-size, 12px);--sd-dropdown-button-font-weight:var(--sd-button-button-sm-typography-font-weight, 500);--sd-dropdown-button-text-decoration:var(     --sd-button-button-sm-typography-text-decoration,     none   )}.sd-dropdown-button__trigger--md{--sd-dropdown-button-height:var(--sd-button-button-md-height, 36px);--sd-dropdown-button-padding-x:var(--sd-button-button-md-padding-x, 20px);--sd-dropdown-button-gap:var(--sd-button-button-md-gap, 8px);--sd-dropdown-button-font-family:var(--sd-button-button-md-typography-font-family, inherit);--sd-dropdown-button-font-size:var(--sd-button-button-md-typography-font-size, 16px);--sd-dropdown-button-font-weight:var(--sd-button-button-md-typography-font-weight, 500);--sd-dropdown-button-text-decoration:var(     --sd-button-button-md-typography-text-decoration,     none   );border-radius:var(--sd-button-button-radius-md, 6px)}.sd-dropdown-button__trigger--disabled{border-color:var(--sd-dropdown-button-disabled-border);background:var(--sd-dropdown-button-disabled-bg);--sd-dropdown-button-current-content:var(--sd-dropdown-button-disabled-content);--sd-dropdown-button-current-icon:var(--sd-dropdown-button-disabled-icon);cursor:not-allowed}.sd-dropdown-button:not(.sd-dropdown-button--split) .sd-dropdown-button__trigger{gap:var(--sd-dropdown-button-gap);padding:0 var(--sd-dropdown-button-padding-x)}.sd-dropdown-button:not(.sd-dropdown-button--split) .sd-dropdown-button__trigger-label{padding:0}.sd-dropdown-button:not(.sd-dropdown-button--split) .sd-dropdown-button__trigger-icon{min-width:0;padding:0}.sd-dropdown-button--split{display:inline-flex;align-items:stretch}.sd-dropdown-button--split .sd-dropdown-button__trigger--label-part{border-top-right-radius:0;border-bottom-right-radius:0;border-right-width:0}.sd-dropdown-button--split .sd-dropdown-button__trigger--chevron-part{border-top-left-radius:0;border-bottom-left-radius:0;border-left:var(--sd-button-button-border-width-default, 1px) solid var(--sd-dropdown-button-divider)}.sd-dropdown-button--split .sd-dropdown-button__trigger--chevron-part.sd-dropdown-button__trigger--disabled{border-left-color:var(--sd-dropdown-button-disabled-border)}.sd-dropdown-button__trigger-label,.sd-dropdown-button__trigger-icon{display:inline-flex;align-items:center;justify-content:center}.sd-dropdown-button__trigger-label{flex:1 1 auto;min-width:0;padding:0 var(--sd-dropdown-button-padding-x)}.sd-dropdown-button__trigger-icon{flex:0 0 auto;min-width:calc(var(--sd-dropdown-button-height) - 2px);padding:0 calc(var(--sd-dropdown-button-gap) + 2px);transition:transform 0.2s ease}.sd-dropdown-button__trigger-icon--open{transform:rotate(180deg)}.sd-dropdown-button__menu{position:relative;display:grid;width:max-content;min-width:var(--sd-dropdown-button-menu-min-width, max-content);max-width:calc(100vw - 24px);padding:4px 0;border:0;border-radius:4px;background:#FFFFFF;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1019607843);box-sizing:border-box;overflow:hidden}.sd-dropdown-button__menu-item{--sd-dropdown-button-menu-item-current-color:var(--sd-dropdown-button-menu-item-color);display:inline-flex;align-items:center;gap:8px;min-height:28px;width:100%;padding:0 12px;border:0;border-radius:0;background:transparent;color:var(--sd-dropdown-button-menu-item-current-color);cursor:pointer;box-sizing:border-box;font:inherit;text-align:left;transition:background-color 0.15s ease, color 0.15s ease}.sd-dropdown-button__menu-item--active{background:var(--sd-dropdown-button-menu-item-active-bg);--sd-dropdown-button-menu-item-current-color:var(--sd-dropdown-button-menu-item-active-color)}.sd-dropdown-button__menu-item--disabled{--sd-dropdown-button-menu-item-current-color:var(--sd-dropdown-button-disabled-content);cursor:not-allowed}.sd-dropdown-button__menu-item-icon{flex:0 0 auto}.sd-dropdown-button__menu-item-label{display:inline-flex;align-items:center;min-width:0;white-space:nowrap;font-size:12px}`;
 
 const SdDropdownButton = class extends BaseDropdownEvent {
     constructor(hostRef) {
@@ -324,11 +326,13 @@ const SdDropdownButton = class extends BaseDropdownEvent {
             '--sd-dropdown-button-bg': config.color,
             '--sd-dropdown-button-bg-hover': PRESET_HOVER_BACKGROUNDS[preset],
             '--sd-dropdown-button-border': PRESET_BORDER_COLORS[preset],
-            '--sd-dropdown-button-content': PRESET_CONTENT_COLORS[preset],
+            '--sd-dropdown-button-content': PRESET_TEXT_COLORS[preset],
+            '--sd-dropdown-button-icon': PRESET_ICON_COLORS[preset],
             '--sd-dropdown-button-divider': PRESET_DIVIDER_COLORS[preset],
             '--sd-dropdown-button-accent': BUTTON_FOCUS_RING_COLOR,
             '--sd-dropdown-button-disabled-bg': DROPDOWN_DISABLED_BACKGROUND,
             '--sd-dropdown-button-disabled-content': DROPDOWN_DISABLED_TEXT,
+            '--sd-dropdown-button-disabled-icon': DROPDOWN_DISABLED_ICON,
             '--sd-dropdown-button-disabled-border': DROPDOWN_DISABLED_BORDER,
         };
     }
@@ -367,7 +371,7 @@ const SdDropdownButton = class extends BaseDropdownEvent {
         return (h("span", { class: {
                 'sd-dropdown-button__trigger-icon': true,
                 'sd-dropdown-button__trigger-icon--open': this.isOpen && !this.split,
-            }, "aria-hidden": "true" }, h("sd-icon", { name: iconName, size: DROPDOWN_CHEVRON_ICON_SIZE[size], color: "var(--sd-dropdown-button-current-content)" })));
+            }, "aria-hidden": "true" }, h("sd-icon", { name: iconName, size: DROPDOWN_CHEVRON_ICON_SIZE[size], color: "var(--sd-dropdown-button-current-icon)" })));
     }
     render() {
         const { config, preset } = this.resolvedConfig;

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

@@ -39,6 +39,7 @@ const FORM_PARENT_TAGS = [
     'sd-file-picker',
     'sd-date-picker',
     'sd-date-range-picker',
+    'sd-chip-input',
 ];
 const SdField = class {
     constructor(hostRef) {
@@ -204,21 +205,21 @@ const SdField = class {
                     : {}),
             }
             : {};
-        return (h("div", { key: 'c6d4bc9d09982d65c31596319569590df9b994b1', class: {
+        return (h("div", { key: 'b2a4122378dd725d8b392b89ae44669f097ff767', 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: '24f3e7702b3d3be42f8236988e1d64e26a31840e', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: '7c45edce014adee7e2eb91296779896d9fd9fcc3', class: "sd-field__main", style: this.width !== '' && this.width !== 0
+            }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars } }, h("div", { key: 'ae6ead740a745248f89a3b9049480954091f5991', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: '42699ddc5eb366d035986274dcf3ae7c17396e9c', class: "sd-field__main", style: this.width !== '' && this.width !== 0
                 ? {
                     width: typeof this.width === 'number' ? `${this.width}px` : this.width,
                     flex: 'none',
                 }
-                : {} }, h("div", { key: '13c99702bf11e4ff76332141a9eaff93185882d3', class: {
+                : {} }, h("div", { key: 'f8c058d44411d27997e90bf3627a4b905f1a6112', class: {
                 'sd-field__control': true,
                 'sd-field__control--has-addon': addon !== '',
-            } }, addon && (h("div", { key: '461170360e26e24051fab4507a22e932f5a37244', class: "sd-field__addon" }, this.icon && (h("sd-icon", { key: 'c8b63273a253da7911e5d8a6f57143a9cc909853', name: this.icon.name, size: this.icon.size ??
-                Number(FIELD_LABEL_SIZE_MAP[(this.size in FIELD_LABEL_SIZE_MAP ? this.size : 'sm')].icon), color: this.icon.color, rotate: this.icon.rotate })), addon)), h("slot", { key: '3c4a72a6152c50d525df972a2a4c4d6840240116' })), this.errorMsg !== '' || this.errorMessage !== '' ? (h("div", { class: "sd-field__error-message" }, this.errorMsg !== '' ? this.errorMsg : this.errorMessage)) : (this.hint !== '' && h("div", { class: "sd-field__hint" }, this.hint))))));
+            } }, addon && (h("div", { key: '86592d8a5046853eef3392e598c23d6348313e56', class: "sd-field__addon" }, this.icon && (h("sd-icon", { key: '147082f30f173615e9a4253e99eabae868960f6f', name: this.icon.name, size: this.icon.size ??
+                Number(FIELD_LABEL_SIZE_MAP[(this.size in FIELD_LABEL_SIZE_MAP ? this.size : 'sm')].icon), color: this.icon.color, rotate: this.icon.rotate })), addon)), h("slot", { key: 'a91c7c8ab0075f0cc1d2169b201bf37900872b99' })), this.errorMsg !== '' || this.errorMessage !== '' ? (h("div", { class: "sd-field__error-message" }, this.errorMsg !== '' ? this.errorMsg : this.errorMessage)) : (this.hint !== '' && h("div", { class: "sd-field__hint" }, this.hint))))));
     }
     renderLabel(label) {
         if (label == null || label === '')
@@ -389,7 +390,7 @@ const SdFloatingPopover = class {
         }
     }
     render() {
-        return h("slot", { key: 'df97046860db0225724f9768428063a3390c5f6e' });
+        return h("slot", { key: '7153fca24fbba922c0dd667bc3bf2314a551f750' });
     }
 };
 SdFloatingPopover.style = sdFloatingPortalCss();
@@ -507,14 +508,14 @@ const SdTooltip = class {
         const hasLabel = this.label !== undefined && this.label !== '';
         const divTrigger = trigger === 'hover' ? hoverTrigger : hasLabel ? {} : { onClick: toggleTooltip };
         const buttonClickTrigger = trigger === 'click' && hasLabel ? { onSdClick: toggleTooltip } : {};
-        return (h(Fragment, { key: '01a51171ec82765f97d0d93733266ccddb5f3ce5' }, h("div", { key: 'fa1629b94e21a9906c5e9af3fa33e5c4b5dc5d9a', class: `sd-tooltip-trigger ${this.sdClass !== undefined && this.sdClass !== '' ? this.sdClass : ''}`, ...divTrigger }, hasLabel ? (h("sd-button", { ref: el => (this.buttonEl = el), name: this.name ?? 'primary_sm', label: this.label, icon: icon, rightIcon: this.rightIcon, ariaLabel: this.ariaLabel, disabled: this.disabled, type: this.type ?? 'button', class: "sd-tooltip", ...buttonClickTrigger })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (h("sd-floating-portal", { key: '081120a9eaf030f5ffe2d677be1ab8ca6142f041', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.tooltipOffset }, h("div", { key: '1645e29961ef0a5f11a66966dc3a9c384b2a3217', ref: el => (this.menuEl = el), class: {
+        return (h(Fragment, { key: 'dab010e285f9cf77097b2d18115d1c8dbb462933' }, h("div", { key: 'c49d1f8d55898cedc462fd321ab47d8a82360ae8', class: `sd-tooltip-trigger ${this.sdClass !== undefined && this.sdClass !== '' ? this.sdClass : ''}`, ...divTrigger }, hasLabel ? (h("sd-button", { ref: el => (this.buttonEl = el), name: this.name ?? 'primary_sm', label: this.label, icon: icon, rightIcon: this.rightIcon, ariaLabel: this.ariaLabel, disabled: this.disabled, type: this.type ?? 'button', class: "sd-tooltip", ...buttonClickTrigger })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (h("sd-floating-portal", { key: '53dbdd7df43e2eacf23c2e1b97bf901b225eab1e', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.tooltipOffset }, h("div", { key: '3130ace8e25b783d49fde3b682249a8cf1783cde', ref: el => (this.menuEl = el), class: {
                 'sd-floating-menu': true,
                 [`sd-floating-menu--${tooltipType}`]: true,
                 [`sd-floating-menu--${placement}`]: true,
             }, style: {
                 '--sd-floating-bg': typeConfig.bg,
                 '--sd-floating-content': typeConfig.content,
-            }, onMouseEnter: () => this.show(), onMouseLeave: () => this.startHideTimer() }, h("i", { key: '8be5ae308d3c90cd9e2f4b066a880be903cc27da', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, h(TooltipArrow, { key: '2417f58db36c4c9f92114a6849e7dd71e39a64f5' })), h("div", { key: '2232a1d4f0ac1cb7466daf14a7eec6ca967cee22', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }))))));
+            }, onMouseEnter: () => this.show(), onMouseLeave: () => this.startHideTimer() }, h("i", { key: '2120f9056ef18218b2ba55d5c921fef9c9a04d67', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, h(TooltipArrow, { key: '557f9ae13f101416d962a84438690078fa7bd16f' })), h("div", { key: '54fb0f3cf0f228184f2eca54a5f3364084b6f834', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }))))));
     }
 };
 SdTooltip.style = sdTooltipCss();

package/dist/esm/sd-ghost-button_2.entry.js

@@ -0,0 +1,404 @@
+import { r as registerInstance, c as createEvent, h } from './index-BpO2YWvq.js';
+
+const ghostButton = {
+	xxs: {
+		size: "16",
+		icon: "12"
+	},
+	xs: {
+		size: "24",
+		icon: "16"
+	},
+	sm: {
+		size: "28",
+		icon: "20"
+	},
+	md: {
+		size: "36",
+		icon: "24"
+	},
+	lg: {
+		size: "62",
+		icon: "32"
+	},
+	radius: {
+		sm: "4",
+		md: "6"
+	},
+	hover: {
+		opacity: "5%"
+	},
+	icon: {
+		disabled: "#BBBBBB"
+	},
+	"default": {
+		content: "#888888",
+		hover: {
+			bg: "#222222"
+		}
+	},
+	danger: {
+		content: "#E30000",
+		hover: {
+			bg: "#E30000"
+		}
+	},
+	action: {
+		content: "#025497",
+		hover: {
+			bg: "#0075FF"
+		}
+	},
+	inverse: {
+		content: "#FFFFFF",
+		disabled: "#E1E1E1",
+		hover: {
+			bg: "#FFFFFF"
+		}
+	}
+};
+var ghostButtonTokens = {
+	ghostButton: ghostButton
+};
+
+const GHOST_BUTTON_FOCUS_RING_COLOR = '#0075FF';
+const GHOST_BUTTON_SIZES = {
+    xxs: {
+        size: Number(ghostButtonTokens.ghostButton.xxs.size),
+        icon: Number(ghostButtonTokens.ghostButton.xxs.icon),
+    },
+    xs: {
+        size: Number(ghostButtonTokens.ghostButton.xs.size),
+        icon: Number(ghostButtonTokens.ghostButton.xs.icon),
+    },
+    sm: {
+        size: Number(ghostButtonTokens.ghostButton.sm.size),
+        icon: Number(ghostButtonTokens.ghostButton.sm.icon),
+    },
+    md: {
+        size: Number(ghostButtonTokens.ghostButton.md.size),
+        icon: Number(ghostButtonTokens.ghostButton.md.icon),
+    },
+    lg: {
+        size: Number(ghostButtonTokens.ghostButton.lg.size),
+        icon: Number(ghostButtonTokens.ghostButton.lg.icon),
+    },
+};
+const GHOST_BUTTON_RADIUS = {
+    xxs: Number(ghostButtonTokens.ghostButton.radius.sm),
+    xs: Number(ghostButtonTokens.ghostButton.radius.sm),
+    sm: Number(ghostButtonTokens.ghostButton.radius.sm),
+    md: Number(ghostButtonTokens.ghostButton.radius.md),
+    lg: Number(ghostButtonTokens.ghostButton.radius.md),
+};
+const GHOST_BUTTON_HOVER_OPACITY = ghostButtonTokens.ghostButton.hover.opacity;
+const GHOST_BUTTON_CONTENT_COLORS = {
+    default: ghostButtonTokens.ghostButton.default.content,
+    danger: ghostButtonTokens.ghostButton.danger.content,
+    action: ghostButtonTokens.ghostButton.action.content,
+    inverse: ghostButtonTokens.ghostButton.inverse.content,
+};
+const GHOST_BUTTON_HOVER_BG_COLORS = {
+    default: ghostButtonTokens.ghostButton.default.hover.bg,
+    danger: ghostButtonTokens.ghostButton.danger.hover.bg,
+    action: ghostButtonTokens.ghostButton.action.hover.bg,
+    inverse: ghostButtonTokens.ghostButton.inverse.hover.bg,
+};
+const GHOST_BUTTON_DISABLED_ICON = ghostButtonTokens.ghostButton.icon.disabled;
+const GHOST_BUTTON_DISABLED_COLORS = {
+    default: GHOST_BUTTON_DISABLED_ICON,
+    danger: GHOST_BUTTON_DISABLED_ICON,
+    action: GHOST_BUTTON_DISABLED_ICON,
+    inverse: ghostButtonTokens.ghostButton.inverse.disabled,
+};
+
+const sdGhostButtonCss = () => `sd-ghost-button{display:inline-flex;width:fit-content;height:fit-content}.sd-ghost-button{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--sd-ghost-button-size);height:var(--sd-ghost-button-size);padding:0;border:none;border-radius:var(--sd-ghost-button-radius);background:transparent;cursor:pointer;box-sizing:border-box;transition:box-shadow 0.2s ease;-webkit-user-select:none;user-select:none}.sd-ghost-button::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--sd-ghost-button-hover-bg);opacity:0;transition:opacity 0.2s ease;pointer-events:none}.sd-ghost-button:hover:not(.sd-ghost-button--disabled)::before{opacity:var(--sd-ghost-button-hover-opacity)}.sd-ghost-button:focus-visible{outline:0;box-shadow:0 0 0 2px var(--sd-ghost-button-accent)}.sd-ghost-button--disabled{cursor:not-allowed}.sd-ghost-button__tooltip{position:absolute;left:50%;bottom:calc(100% + 4px);transform:translateX(-50%) translateY(4px);z-index:1;display:inline-flex;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease}.sd-ghost-button--with-tooltip:hover:not(.sd-ghost-button--disabled) .sd-ghost-button__tooltip,.sd-ghost-button--with-tooltip:focus-visible:not(.sd-ghost-button--disabled) .sd-ghost-button__tooltip{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}`;
+
+const SdGhostButton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.click = createEvent(this, "sdClick", 7);
+    }
+    icon;
+    size = 'sm';
+    intent = 'default';
+    ariaLabel = '';
+    tooltipLabel = '';
+    disabled = false;
+    click;
+    hasWarnedMissingAriaLabel = false;
+    componentWillLoad() {
+        this.size ??= 'sm';
+        this.intent ??= 'default';
+        this.ariaLabel ??= '';
+        this.tooltipLabel ??= '';
+    }
+    handleClick = (event) => {
+        if (this.disabled) {
+            event.preventDefault();
+            return;
+        }
+        this.click.emit(event);
+    };
+    componentWillRender() {
+        this.warnIfMissingAriaLabel();
+    }
+    warnIfMissingAriaLabel() {
+        const missing = (this.ariaLabel ?? '').trim() === '';
+        if (!missing) {
+            this.hasWarnedMissingAriaLabel = false;
+            return;
+        }
+        if (this.hasWarnedMissingAriaLabel)
+            return;
+        console.warn(`[sd-ghost-button] icon-only buttons require \`ariaLabel\`. Received icon="${this.icon}".`);
+        this.hasWarnedMissingAriaLabel = true;
+    }
+    render() {
+        const size = this.size ?? 'sm';
+        const intent = this.intent ?? 'default';
+        const sizeConfig = GHOST_BUTTON_SIZES[size] ?? GHOST_BUTTON_SIZES.sm;
+        const contentColor = this.disabled
+            ? GHOST_BUTTON_DISABLED_COLORS[intent]
+            : GHOST_BUTTON_CONTENT_COLORS[intent];
+        const accessibleName = (this.ariaLabel ?? '').trim() || undefined;
+        const tooltipLabel = (this.tooltipLabel ?? '').trim();
+        const hasTooltip = tooltipLabel.length > 0;
+        return (h("button", { key: 'fafdeaa60205f0190cc592ac8fdacbf140e28d6c', class: {
+                'sd-ghost-button': true,
+                'sd-ghost-button--disabled': this.disabled,
+                'sd-ghost-button--with-tooltip': hasTooltip,
+            }, type: "button", disabled: this.disabled, "aria-label": accessibleName, style: {
+                '--sd-ghost-button-size': `${sizeConfig.size}px`,
+                '--sd-ghost-button-radius': `${GHOST_BUTTON_RADIUS[size]}px`,
+                '--sd-ghost-button-hover-bg': GHOST_BUTTON_HOVER_BG_COLORS[intent],
+                '--sd-ghost-button-hover-opacity': GHOST_BUTTON_HOVER_OPACITY,
+                '--sd-ghost-button-accent': GHOST_BUTTON_FOCUS_RING_COLOR,
+            }, onClick: this.handleClick }, hasTooltip && (h("span", { key: '57425145ccc76a0bf960377cb13ba06e37195fa3', class: "sd-ghost-button__tooltip", "aria-hidden": "true" }, h("sd-tag", { key: '9d097c96d701431ac92aa7fb305c418bb570bc16', name: "square_xs_grey", label: tooltipLabel }))), h("sd-icon", { key: '4b186b2fd33c70f4b47a2c736a53e1ac37bc2ebc', name: this.icon, size: sizeConfig.icon, color: contentColor })));
+    }
+};
+SdGhostButton.style = sdGhostButtonCss();
+
+const tag = {
+	xs: {
+		height: "20",
+		paddingX: "8",
+		gap: "4",
+		typography: {
+			fontSize: "11",
+			fontWeight: "500",
+			lineHeight: "18"},
+		radius: "6"
+	},
+	sm: {
+		height: "24",
+		paddingX: "8",
+		gap: "4",
+		typography: {
+			fontSize: "12",
+			fontWeight: "700",
+			lineHeight: "20"
+		},
+		radius: "6"
+	},
+	md: {
+		height: "28",
+		paddingX: "12",
+		gap: "6",
+		typography: {
+			fontSize: "14",
+			fontWeight: "700",
+			lineHeight: "24"},
+		radius: "8"
+	},
+	red: {
+		content: "#FB4444",
+		bg: "#FCEFEF"
+	},
+	orange: {
+		content: "#FF6B00",
+		bg: "#FEF1EA"
+	},
+	yellow: {
+		content: "#916C0D",
+		bg: "#FFF7DD"
+	},
+	green: {
+		content: "#00973C",
+		bg: "#E8F9EF"
+	},
+	blue: {
+		content: "#0075FF",
+		bg: "#E6F1FF"
+	},
+	darkblue: {
+		content: "#006AC1",
+		bg: "#EAF5FE"
+	},
+	indigo: {
+		content: "#004290",
+		bg: "#EFF6FF"
+	},
+	grey: {
+		content: "#737373",
+		bg: "#EEEEEE"
+	}
+};
+var tagTokens = {
+	tag: tag
+};
+
+const TAG_SHAPES = ['square', 'pill'];
+const TAG_SIZES = ['xs', 'sm', 'md'];
+const TAG_COLORS = [
+    'grey',
+    'red',
+    'orange',
+    'yellow',
+    'green',
+    'blue',
+    'darkblue',
+    'indigo',
+];
+const TAG_COLOR_CONFIG = {
+    grey: {
+        background: tagTokens.tag.grey.bg,
+        content: tagTokens.tag.grey.content,
+        icon: tagTokens.tag.grey.content,
+    },
+    red: {
+        background: tagTokens.tag.red.bg,
+        content: tagTokens.tag.red.content,
+        icon: tagTokens.tag.red.content,
+    },
+    orange: {
+        background: tagTokens.tag.orange.bg,
+        content: tagTokens.tag.orange.content,
+        icon: tagTokens.tag.orange.content,
+    },
+    yellow: {
+        background: tagTokens.tag.yellow.bg,
+        content: tagTokens.tag.yellow.content,
+        icon: tagTokens.tag.yellow.content,
+    },
+    green: {
+        background: tagTokens.tag.green.bg,
+        content: tagTokens.tag.green.content,
+        icon: tagTokens.tag.green.content,
+    },
+    blue: {
+        background: tagTokens.tag.blue.bg,
+        content: tagTokens.tag.blue.content,
+        icon: tagTokens.tag.blue.content,
+    },
+    darkblue: {
+        background: tagTokens.tag.darkblue.bg,
+        content: tagTokens.tag.darkblue.content,
+        icon: tagTokens.tag.darkblue.content,
+    },
+    indigo: {
+        background: tagTokens.tag.indigo.bg,
+        content: tagTokens.tag.indigo.content,
+        icon: tagTokens.tag.indigo.content,
+    },
+};
+const SQUARE_SIZE_CONFIG = {
+    xs: {
+        height: `${tagTokens.tag.xs.height}px`,
+        paddingX: `${tagTokens.tag.xs.paddingX}px`,
+        gap: `${tagTokens.tag.xs.gap}px`,
+        fontSize: `${tagTokens.tag.xs.typography.fontSize}px`,
+        fontWeight: tagTokens.tag.xs.typography.fontWeight,
+        lineHeight: `${tagTokens.tag.xs.typography.lineHeight}px`,
+        iconSize: 12,
+        radius: `${tagTokens.tag.xs.radius}px`,
+    },
+    sm: {
+        height: `${tagTokens.tag.sm.height}px`,
+        paddingX: `${tagTokens.tag.sm.paddingX}px`,
+        gap: `${tagTokens.tag.sm.gap}px`,
+        fontSize: `${tagTokens.tag.sm.typography.fontSize}px`,
+        fontWeight: tagTokens.tag.sm.typography.fontWeight,
+        lineHeight: `${tagTokens.tag.sm.typography.lineHeight}px`,
+        iconSize: 16,
+        radius: `${tagTokens.tag.sm.radius}px`,
+    },
+    md: {
+        height: `${tagTokens.tag.md.height}px`,
+        paddingX: `${tagTokens.tag.md.paddingX}px`,
+        gap: `${tagTokens.tag.md.gap}px`,
+        fontSize: `${tagTokens.tag.md.typography.fontSize}px`,
+        fontWeight: tagTokens.tag.md.typography.fontWeight,
+        lineHeight: `${tagTokens.tag.md.typography.lineHeight}px`,
+        iconSize: 16,
+        radius: `${tagTokens.tag.md.radius}px`,
+    },
+};
+const PILL_SIZE_CONFIG = {
+    xs: { ...SQUARE_SIZE_CONFIG.xs, radius: '999px' },
+    sm: { ...SQUARE_SIZE_CONFIG.sm, radius: '999px' },
+    md: { ...SQUARE_SIZE_CONFIG.md, radius: '999px' },
+};
+const TAG_CONFIG = Object.fromEntries(TAG_SHAPES.flatMap(shape => TAG_SIZES.flatMap(size => TAG_COLORS.map(color => {
+    const sizeConfig = shape === 'square' ? SQUARE_SIZE_CONFIG[size] : PILL_SIZE_CONFIG[size];
+    return [
+        `${shape}_${size}_${color}`,
+        {
+            shape,
+            size,
+            color,
+            ...sizeConfig,
+            ...TAG_COLOR_CONFIG[color],
+        },
+    ];
+}))));
+const isTagName = (value) => Object.prototype.hasOwnProperty.call(TAG_CONFIG, value);
+
+const sdTagCss = () => `sd-tag{display:inline-flex;width:fit-content;height:fit-content}.sd-tag{display:inline-flex;align-items:center;justify-content:center;gap:var(--sd-tag-gap, 5px);min-height:var(--sd-tag-height, 24px);padding:0 var(--sd-tag-padding-x, 8px);border-radius:var(--sd-tag-radius, 4px);background:var(--sd-tag-background, #f3f3f3);color:var(--sd-tag-content, #7a7a7a);box-sizing:border-box;white-space:nowrap;-webkit-user-select:none;user-select:none}.sd-tag__icon{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center}.sd-tag__label{display:inline-flex;align-items:center;justify-content:center;min-width:0;font-size:var(--sd-tag-font-size, 12px);font-weight:var(--sd-tag-font-weight, 700);line-height:var(--sd-tag-line-height, 20px)}`;
+
+const SdTag = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    name = 'square_sm_grey';
+    label = '';
+    icon;
+    // 아이콘이 좌측 배치되는 게 자연스러운 default. prop 이름 변경(isRight 등)은 public API breaking 이라 별도 이슈로 분리.
+    // eslint-disable-next-line stencil/ban-default-true
+    isLeft = true;
+    componentWillLoad() {
+        this.name = this.name ?? 'square_sm_grey';
+    }
+    get resolvedName() {
+        if (!isTagName(this.name)) {
+            throw new Error(`Invalid sd-tag name: "${this.name}"`);
+        }
+        return this.name;
+    }
+    get resolvedConfig() {
+        return TAG_CONFIG[this.resolvedName];
+    }
+    renderIcon(color, size) {
+        if (this.icon == null)
+            return null;
+        return h("sd-icon", { class: "sd-tag__icon", name: this.icon, size: size, color: color });
+    }
+    render() {
+        const config = this.resolvedConfig;
+        const iconNode = this.renderIcon(config.icon, config.iconSize);
+        return (h("span", { key: 'f5dd5e267ffdde104f36ec7f19390357dbf03610', class: "sd-tag", style: {
+                '--sd-tag-background': config.background,
+                '--sd-tag-content': config.content,
+                '--sd-tag-height': config.height,
+                '--sd-tag-padding-x': config.paddingX,
+                '--sd-tag-gap': config.gap,
+                '--sd-tag-font-size': config.fontSize,
+                '--sd-tag-font-weight': config.fontWeight,
+                '--sd-tag-line-height': config.lineHeight,
+                '--sd-tag-radius': config.radius,
+            }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, h("span", { key: '53c649171b1bba53bf71bbf8f382c0678f1a3a6f', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
+    }
+};
+SdTag.style = sdTagCss();
+
+export { SdGhostButton as sd_ghost_button, SdTag as sd_tag };

package/dist/esm/sd-linear-progress.entry.js

@@ -47,7 +47,7 @@ const SdLinearProgress = class {
             clipPath: `inset(0 ${100 - this.clampedValue}% 0 0)`,
         };
         const valueText = `${Math.round(this.clampedValue)}%`;
-        return (h(Host, { key: '41d89c01b35a6edba09a3ef9f848458d284d491a', style: hostStyle }, h("div", { key: '79d7490c934437aa0075e39aea0f352dec61eae0', class: 'sd-linear-progress__track' }, h("div", { key: 'd6743f9b4f5a086e11a368989fd0f52a10bdc2ef', class: 'sd-linear-progress__fill', style: fillStyle }), !this.indeterminate && (h("span", { key: '2d013c7cdf438e069d00c6fcddfca12ff55490e6', class: 'sd-linear-progress__value sd-linear-progress__value--on-track' }, valueText)), !this.indeterminate && (h("span", { key: '4f473a670cab7b0d104f9c455c28e415d5863a86', class: 'sd-linear-progress__value sd-linear-progress__value--on-fill', style: valueOnFillStyle }, valueText))), this.label && h("span", { key: '6581d326a1d05413587b44715613a4d878e4f658', class: 'sd-linear-progress__label' }, this.label)));
+        return (h(Host, { key: '49452751b0aaf5e6b49d809272620cf4b198ecc1', style: hostStyle }, h("div", { key: 'aec62dae8fa8d4a9d6e64e305fadc63836a1fef6', class: 'sd-linear-progress__track' }, h("div", { key: '0f7cce4cf0ebe6ce40cc127ab8b91fdaf88440cc', class: 'sd-linear-progress__fill', style: fillStyle }), !this.indeterminate && (h("span", { key: 'af2f415ba6cc27c209eed2ff38b02ce58f81a861', class: 'sd-linear-progress__value sd-linear-progress__value--on-track' }, valueText)), !this.indeterminate && (h("span", { key: '2c21c62faf93ee809ae6fa098f7bf88e20447ca8', class: 'sd-linear-progress__value sd-linear-progress__value--on-fill', style: valueOnFillStyle }, valueText))), this.label && h("span", { key: '571c78db5fc8d7a6e4db2ed78e8c75c8be953e2f', class: 'sd-linear-progress__label' }, this.label)));
     }
 };
 SdLinearProgress.style = sdLinearProgressCss();

package/dist/esm/sd-loading-container.entry.js

@@ -16,10 +16,10 @@ const SdLoadingContainer = class {
         this.visible = false;
     }
     render() {
-        return (h("div", { key: '99c6d9e798862f41142f246f371a357cd604aa44', class: {
+        return (h("div", { key: '314f23e9da2ec850d62b4d4e347055669841c1fe', class: {
                 'sd-loading-container': true,
                 'sd-loading-container--visible': this.visible,
-            }, "aria-hidden": this.visible ? 'false' : 'true' }, h("div", { key: 'b836c7d283113e57d0947a178035591521dc8ee2', class: "sd-loading-container__backdrop" }), h("div", { key: '02f1ae9b17eedb29f24d0170c65ef4217f38a5b5', class: "sd-loading-container__content" }, h("sd-circle-progress", { key: '3d9c1b33693e823c4c55967d00a63eff8a2a805e', indeterminate: true, type: "inverse" }), this.message && (h("p", { key: '46c060f444506a9771507b09fd0867f763a95680', class: "sd-loading-container__message" }, this.message)))));
+            }, "aria-hidden": this.visible ? 'false' : 'true' }, h("div", { key: '541eb68218969c73e52bc8cbdb79171ee0ba908e', class: "sd-loading-container__backdrop" }), h("div", { key: '95192e0c936419248c46a57acb4c5ab63465a2f5', class: "sd-loading-container__content" }, h("sd-circle-progress", { key: '5584a90aa595d3eaffc3597604a9dc359b22bcaf', indeterminate: true, type: "inverse" }), this.message && (h("p", { key: 'e9dc0afbe43a318d7e776dd2f0bafa68ebe8536e', class: "sd-loading-container__message" }, this.message)))));
     }
 };
 SdLoadingContainer.style = sdLoadingContainerCss();

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

@@ -152,13 +152,13 @@ const SdPagination = class {
             '--sd-pagination-bg-selected': PAGINATION_COLORS.bgSelected,
             '--sd-pagination-item-width': `${this.buttonWidth}px`,
         };
-        return (h("div", { key: '36a334a05ade253a6345e82d57647a4bab0c94cf', class: {
+        return (h("div", { key: 'abfac6b075ce59ac37f747bf15729bf3879b1749', class: {
                 'sd-pagination': true,
                 'sd-pagination--simple': this.simple,
-            }, style: cssVars }, h("div", { key: '50963e0cdf4da3078020207c0115ccebfe1881d6', class: "sd-pagination__group sd-pagination__group--prev" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "sd-pagination__info" }, h("span", { class: "sd-pagination__current" }, this.currentPage), h("span", { class: "sd-pagination__divider" }, "/"), h("span", { class: "sd-pagination__last" }, this.lastPage))) : (h("div", { class: "sd-pagination__numbers" }, this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
+            }, style: cssVars }, h("div", { key: '6c8a3eb2ad708649054068a671cf156fe154fae3', class: "sd-pagination__group sd-pagination__group--prev" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "sd-pagination__info" }, h("span", { class: "sd-pagination__current" }, this.currentPage), h("span", { class: "sd-pagination__divider" }, "/"), h("span", { class: "sd-pagination__last" }, this.lastPage))) : (h("div", { class: "sd-pagination__numbers" }, this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
                 'sd-pagination__item': true,
                 'sd-pagination__item--selected': this.currentPage === n,
-            }, onClick: () => this.handlePageChange(n) }, n))))), h("div", { key: 'a0d0b565cd2b5108c997888b2536ee740b167367', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n))))), h("div", { key: 'f0013d0057e6addb6a7fae39ebddd2c4f7af5bd0', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
     }
 };
 SdPagination.style = sdPaginationCss();
@@ -213,9 +213,9 @@ const SdTbody = class {
         }
     }
     render() {
-        return (h(Host, { key: '835dc8ccba601a916fdd8466176a8ad8896c2bf7', slot: `${this.tableId}-body` }, h("tbody", { key: 'e2013dde727695abc366e4e3a1660c8a5835fe67', class: { tbody: true } }, [
+        return (h(Host, { key: 'bc05db24c914d72f0480e0d6d9b594e21cf03153', slot: `${this.tableId}-body` }, h("tbody", { key: 'ba4eb8fcbc184bcd245f47093ca5acfacc3aebf3', class: { tbody: true } }, [
             this.topSpacerHeight > 0 && (h("tr", { key: "spacer-top", class: "tbody__spacer", style: { height: `${this.topSpacerHeight}px`, display: 'block' } })),
-            h("slot", { key: '1d75d1880a9b8e0c646b93443cf708c7d4e399c7' }),
+            h("slot", { key: '3c9d25b226dfb20b044a718416d3cdda13eff798' }),
             this.bottomSpacerHeight > 0 && (h("tr", { key: "spacer-bottom", class: "tbody__spacer", style: { height: `${this.bottomSpacerHeight}px`, display: 'block' } })),
         ])));
     }
@@ -390,16 +390,16 @@ const SdThead = class {
             '--table-border-color': TABLE_BORDER.color,
             '--table-border-width': `${TABLE_BORDER.width}px`,
         };
-        return (h(Host, { key: '6984dbdc0ac520bda1aff4dcb3468d88ba4f5f47', slot: `${this.tableId}-head`, style: headStyle }, h("thead", { key: 'e2c83c062219727f33ae8b7d67c54910a2d907a0', class: {
+        return (h(Host, { key: '822abd0e5ff71d9e55b6478d56c9277009983deb', slot: `${this.tableId}-head`, style: headStyle }, h("thead", { key: '7c690c49eb0d9be48637b8a6e92287fac22bf377', class: {
                 'thead': true,
                 'thead--sticky': this._stickyHeader,
-            } }, h("tr", { key: '43ff9b8c3c7c6c2941a87defcc296936300664c8', class: "tr" }, this._selectable && (h("th", { key: '5126c20814657af0731b18359ac160717439a388', class: {
+            } }, h("tr", { key: '81c64bb5b06d7e8525ebceaf6a229034e90f7a48', class: "tr" }, this._selectable && (h("th", { key: 'fe00535fb5cd54d053c17b3d3a6fa8869d483b8b', 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: '39777a1e26376d9ed4c59ae3fcf1d6190b9007eb', value: this.getIsAllChecked(), disabled: safeRows.length === 0, onSdUpdate: (e) => this.handleSelectAll(e.detail) }), h("div", { key: 'd4212b9d4e2905cd5dfd57046e4455d12d09988d', class: "th__bar" }))), stickyLeftCols.map((col, idx) => (h("th", { key: col.name, class: {
+            }, style: { '--sticky-left-offset': '0px' } }, h("sd-checkbox", { key: 'de1a3ddf9b3df06d8cc9b85431c31ff84b7b8218', value: this.getIsAllChecked(), disabled: safeRows.length === 0, onSdUpdate: (e) => this.handleSelectAll(e.detail) }), h("div", { key: 'afe516ce212b24abcb075b6e6eb661ffcb6ce297', class: "th__bar" }))), stickyLeftCols.map((col, idx) => (h("th", { key: col.name, class: {
                 'th': true,
                 [`${col.thClass}`]: Boolean(col.thClass),
                 'sticky-left': true,

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

@@ -103,7 +103,7 @@ const SdPopup = class {
             ...DEFAULT_SUBMIT_BUTTON_PROPS,
             ...this.submitButtonProps,
         };
-        return (h("div", { key: '77379698e76b000368df2d2b7345010cde3df7ba', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, h("header", { key: 'e00d2292b718bfd21e491a09e5ea8c18fbb1a2c8', class: "sd-popup__header" }, h("h2", { key: 'b8bac8f58f7f916a3b6fe40a66d21318da45d4d3', class: "sd-popup__title" }, this.popupTitle)), h("div", { key: '56e5b653539752b9fd0fa4694f7342914cd7abc6', class: "sd-popup__body" }, h("slot", { key: '183fafa8179a3350817ec6e3dea12281860f7639' })), this.useFooter && (h("footer", { key: 'd1b7fe2d67e5f3ad3b3f8e20408271fdaab86d93', class: "sd-popup__footer" }, h("div", { key: '7cc5d0bd9d314942d8d5f982f1f459c56fde4bc0', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, h("slot", { key: 'ffb52c9d679e4ddf9e50e012f8a9aa02b0cb1f95', name: "footer-left" })), h("sd-button", { key: '3ab8061bf4119a9351921a41c3d9cb942c00b5d1', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
+        return (h("div", { key: 'ea933af50e1ad1a29cf8d73ce70222e2f44c0bb5', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, h("header", { key: '50f1773d911175182888a98a0759b8d3d8829d2f', class: "sd-popup__header" }, h("h2", { key: '4e21a73a6e26388c6b1c814a91ee8a79bf57c576', class: "sd-popup__title" }, this.popupTitle)), h("div", { key: 'dd6ace33c6d8b3e20c0c85c95580efbf8ad6747c', class: "sd-popup__body" }, h("slot", { key: 'e40fbea5b93016131df544f32b74676d2892204e' })), this.useFooter && (h("footer", { key: '96b27f465a804859a15e9105fcd64c7205bc2143', class: "sd-popup__footer" }, h("div", { key: '6715ba330610850ea235ddde5f2da00584204286', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, h("slot", { key: '092aca3ad212b7218ce4ba247b78b7b45d9e4299', name: "footer-left" })), h("sd-button", { key: '290cd49879cc4868be69ceb60567eab57b5f26fe', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
     }
 };
 SdPopup.style = sdPopupCss();