@sellmate/design-system 1.9.0 → 1.11.0

package/dist/esm/sd-date-range-picker-calendar.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment } from './index-BpO2YWvq.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment } from './index-D3yCWQNg.js';
 import { u as useDatePicker, t as today, W as WEEK_LABELS, C as CALENDAR_LAYOUT } from './useDatePicker-DoUg--aq.js';
 import { d as datepickerTokens } from './component.datepicker-laVsm9VM.js';
 
@@ -265,7 +265,7 @@ const SdDateRangePickerCalendar = class {
             '--range-panel-gap': `${RANGE_LAYOUT.panelGap}px`,
             '--range-divider': RANGE_LAYOUT.divider,
         };
-        return (h(Fragment, { key: 'a9e5bc8198cfda50227069661812341e7a19b21d' }, h("div", { key: 'a2c5bf6ae806fc24f421cb6b52323f4e92bfc255', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), h("div", { key: '2575175fa3537e010e1c7d573428d5c8ebfae488', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), h("span", { key: 'bd43ac98b88665dbe85804c8b6345c19dca7d9fa', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
+        return (h(Fragment, { key: '91ba95cf0786d59363ac6b72e9c8f91d1802feee' }, h("div", { key: '98f66737a15e5c3129dd20f674736115a4fad42e', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), h("div", { key: 'd9f326b485864484ed786cb172d3bd33136987ea', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), h("span", { key: 'df7d835ac0da6788f08c7963ed04ed98b7fd6091', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
     }
     static get watchers() { return {
         "value": [{

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-BpO2YWvq.js';
+import { r as registerInstance, h, H as Host } from './index-D3yCWQNg.js';
 import { s as systemTokens } from './system-j2khhcHY.js';
 
 const DIVIDER_COLORS = {
@@ -17,7 +17,7 @@ const SdDivider = class {
         const hostStyle = {
             '--sd-divider-color': DIVIDER_COLORS.default,
         };
-        return (h(Host, { key: '92e9f5ef8d6d382e1e2a62f3421feaf1bc27aab7', style: hostStyle }, h("hr", { key: '40827e6308a258e6de4a438c53d4de9465a6d0a1', "aria-orientation": this.vertical ? 'vertical' : 'horizontal' })));
+        return (h(Host, { key: '8282aae8e5cd26630c54f4347cd26f544672d15d', style: hostStyle }, h("hr", { key: '94df7dc7465b05ecad6527da2c008a4ff503f034', "aria-orientation": this.vertical ? 'vertical' : 'horizontal' })));
     }
 };
 SdDivider.style = sdDividerCss();

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 { r as registerInstance, c as createEvent, a as getElement, h } from './index-D3yCWQNg.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

@@ -1,6 +1,6 @@
-import { r as registerInstance, a as getElement, h, c as createEvent, F as Fragment } from './index-BpO2YWvq.js';
+import { r as registerInstance, a as getElement, h, c as createEvent, F as Fragment } from './index-D3yCWQNg.js';
 import { f as fieldTokens } from './component.field-BOJJ_sQS.js';
-import { T as TooltipArrow } from './tooltipArrow-DrrY_fPj.js';
+import { T as TooltipArrow } from './tooltipArrow-CUCfrch1.js';
 
 const FIELD_ADDON_ALIGN_MAP = {
     start: 'flex-start',
@@ -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-form.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-BpO2YWvq.js';
+import { r as registerInstance, c as createEvent, h } from './index-D3yCWQNg.js';
 
 const SdForm = class {
     constructor(hostRef) {

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

@@ -0,0 +1,404 @@
+import { r as registerInstance, c as createEvent, h } from './index-D3yCWQNg.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-guide.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, a as getElement, h } from './index-BpO2YWvq.js';
+import { r as registerInstance, a as getElement, h } from './index-D3yCWQNg.js';
 import { s as systemTokens } from './system-j2khhcHY.js';
 import { s as sanitizeInlineHtml } from './sanitize-inline-html-BE4tnQ2Z.js';
 

package/dist/esm/sd-key-value-table.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-BpO2YWvq.js';
+import { r as registerInstance, c as createEvent, h } from './index-D3yCWQNg.js';
 import { s as systemTokens } from './system-j2khhcHY.js';
 import { t as tableTokens } from './component.table-D6GUzecR.js';
 

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-BpO2YWvq.js';
+import { r as registerInstance, h, H as Host } from './index-D3yCWQNg.js';
 import { p as progressTokens } from './component.progress-D1vaasIp.js';
 import { s as systemTokens } from './system-j2khhcHY.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();