@sellmate/design-system 1.8.0 → 1.10.0

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

@@ -27,7 +27,7 @@ export class SdCircleProgress {
         }
         const c = CIRCLE_PROGRESS_VIEWBOX_SIZE / 2;
         const showPercent = !this.indeterminate;
-        return (h(Host, { key: '9a4424e79b095c240b2dd53c8655b9a4cccaf581', style: hostStyle }, h("svg", { key: '37ca87d4c4aa6ab6b84a4301225d775f1998c0c1', class: "sd-circle-progress", viewBox: `0 0 ${CIRCLE_PROGRESS_VIEWBOX_SIZE} ${CIRCLE_PROGRESS_VIEWBOX_SIZE}`, xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: '372f7031310dddba431323b0527c273311a498e3', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), h("circle", { key: 'def6ff7573e4c4a08648f35f7cb545d6b8064f6d', class: "sd-circle-progress__arc", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH, "stroke-linecap": "round", style: arcStyle })), showPercent && (h("span", { key: '13d6345672fdafaf6a1e1eef9f5987179a99c3ae', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && h("span", { key: 'c42e2fa2826284017e530e967975e45277ae9ee3', class: "sd-circle-progress__label" }, this.label)));
+        return (h(Host, { key: '46d74c0edb5a5e8cd0472c83efc45a0efaf353b4', style: hostStyle }, h("svg", { key: '34117c89eb180370a215807e614ad08f4f72b517', class: "sd-circle-progress", viewBox: `0 0 ${CIRCLE_PROGRESS_VIEWBOX_SIZE} ${CIRCLE_PROGRESS_VIEWBOX_SIZE}`, xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: '08ac6f011b6a4b6744ddcf437b1e0a5b96abfc6e', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), h("circle", { key: '5ae0a53ce10bd5a8b2f316ebd00d3ee28c4336d6', class: "sd-circle-progress__arc", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH, "stroke-linecap": "round", style: arcStyle })), showPercent && (h("span", { key: 'fd52ee1947d41b2117c9ea6e4cc9a448799342e3', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && h("span", { key: 'a58776c4ef67eb900eba97ff4fed138c8f5e8452', class: "sd-circle-progress__label" }, this.label)));
     }
     static get is() { return "sd-circle-progress"; }
     static get originalStyleUrls() {

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

@@ -73,9 +73,9 @@ export class SdConfirmModal {
         const type = this.resolvedType;
         const iconName = CONFIRM_MODAL_ICON_MAP[type];
         const iconColor = CONFIRM_MODAL_ICON_COLOR[type];
-        return (h("div", { key: 'c41a58f13b95da7f1f0aea3620abf239dcb116b6', class: "sd-confirm-modal" }, h("sd-ghost-button", { key: 'bdc1bc374934c2f9745f567b4e6ffd55ec3675ce', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (h("sd-icon", { key: 'ff16ebde448157e657eb74e1b0c5f4a331cf396a', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), h("h2", { key: 'd718b2ae6f6e92f8c77ec821b78924ffbe267d12', class: `sd-confirm-modal__title ${this.titleClass ?? ''}` }, this.modalTitle), h("div", { key: 'a3909abde84c4d6987c9036a705cba4aa7d01ea6', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (h("div", { key: '29a4bf80ab75d973544c0a29c87133c9ef8a5aab', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) }))))), this.showContentBox && (h("div", { key: '93eb2c75728cf26969a229a876f9217b4e00c63a', class: "sd-confirm-modal__content-box" }, this.tagContents ? (h("div", { class: "sd-confirm-modal__custom-content", ref: el => {
+        return (h("div", { key: '4d3ce0662b2d860a4ed6ae3c8177ae75dae4fb92', class: "sd-confirm-modal" }, h("sd-ghost-button", { key: '7c406d59c2470b610a187bf45aa5cd4ab5c6b26b', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (h("sd-icon", { key: '10e3d2c8a87a728df4e3f3be7dfab96475738e2b', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), h("h2", { key: '9cc844c8cefb2fd0dc96871b55fc1c7c6e41c526', class: `sd-confirm-modal__title ${this.titleClass ?? ''}` }, this.modalTitle), h("div", { key: 'bbaa81a02c067d66c4cc19cf805b7a6939231311', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (h("div", { key: '31734f096eee6e6a9be770eafa43066c8e763608', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) }))))), this.showContentBox && (h("div", { key: 'a10838fb7c7081fdaa85cdaa33f92ef30c00a888', class: "sd-confirm-modal__content-box" }, this.tagContents ? (h("div", { class: "sd-confirm-modal__custom-content", ref: el => {
                 this.customContentRef = el;
-            } })) : (h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && (h("sd-tag", { name: this.tagPreset ?? 'square_sm_grey', label: this.tagLabel })), this.slotLabel && (h("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (h("div", { key: '730fd073ade9b8788de77d36fc4aeddd0b304c07', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) })))))), h("div", { key: '059fd87fb39b8e2976fcb671c7dd78310324119f', class: "sd-confirm-modal__button" }, this.subButtonLabel && (h("sd-button", { key: '6b320645505c099783a4a6704e96e9261054c7dc', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), h("sd-button", { key: 'd6a4554a7db861ae7afc610a629591224946d990', name: this.resolvedMainButton, label: this.mainButtonLabel ?? '확인', onSdClick: () => this.ok.emit() }))));
+            } })) : (h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && (h("sd-tag", { name: this.tagPreset ?? 'square_sm_grey', label: this.tagLabel })), this.slotLabel && (h("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (h("div", { key: '540f3bb73aa61a1a2a041eba9a22a198c7772914', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) })))))), h("div", { key: '1944aeb4d140c779d0af1304160a86c5056335a8', class: "sd-confirm-modal__button" }, this.subButtonLabel && (h("sd-button", { key: 'efd463686d98e9d2edc3e1cd7b4f54d8da4fef56', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), h("sd-button", { key: 'b9033fb98acf3de36b7fb3e1969ccf5a7becef39', name: this.resolvedMainButton, label: this.mainButtonLabel ?? '확인', onSdClick: () => this.ok.emit() }))));
     }
     static get is() { return "sd-confirm-modal"; }
     static get originalStyleUrls() {

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

@@ -33,7 +33,7 @@ export class SdDatePickerTrigger {
                 ? DATEPICKER_COLORS.icon.disabled
                 : DATEPICKER_COLORS.icon.default,
         };
-        return (h("div", { key: '8a41444172b2d9aa54fa6efe09c4440705d55e06', role: "button", tabindex: this.disabled ? -1 : 0, class: {
+        return (h("div", { key: '87ada0414ffc6404b27cf4a41ba7c9cb9903f498', role: "button", tabindex: this.disabled ? -1 : 0, class: {
                 'sd-date-picker-trigger': true,
                 'sd-date-picker-trigger--disabled': this.disabled,
             }, style: cssVars, onClick: this.handleClick, onKeyDown: e => {
@@ -41,7 +41,7 @@ export class SdDatePickerTrigger {
                     e.preventDefault();
                     this.handleClick();
                 }
-            } }, h("sd-icon", { key: '74613a1b65814a1f73d00c67d7c1f01019961511', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), h("span", { key: '118733548ddee2bc20ccdc92785ada3bbc765303', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
+            } }, h("sd-icon", { key: 'e8eee3ed97ab7344e7658b7b22bc91f11aa0b068', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), h("span", { key: 'ea25a13a72d00ca31fcddaf0183b520175ef7d93', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
     }
     static get is() { return "sd-date-picker-trigger"; }
     static get originalStyleUrls() {

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

@@ -1,4 +1,5 @@
 import datepickerTokens from "../../tokens/generated/component.datepicker.json";
+import fieldTokens from "../../tokens/generated/component.field.json";
 const sm = datepickerTokens.datepicker.sm;
 const md = datepickerTokens.datepicker.md;
 export const DATEPICKER_SIZE_MAP = {
@@ -27,5 +28,8 @@ export const DATEPICKER_COLORS = {
     border: datepickerTokens.datepicker.border,
     bg: datepickerTokens.datepicker.bg,
     icon: datepickerTokens.datepicker.icon,
-    text: datepickerTokens.datepicker.text,
+    text: {
+        ...datepickerTokens.datepicker.text,
+        hint: fieldTokens.field.hint.color,
+    },
 };

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

@@ -93,9 +93,9 @@ export class SdDatePicker {
             '--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
             '--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
         };
-        return (h("sd-field", { key: '12d77a181caa4a6a9125db8a5c823149386ee059', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: '2abc775817955caf06dd721d7b91c65d1bfd54de', class: "sd-date-picker", ref: el => {
+        return (h("sd-field", { key: 'baa957e5534b6587da2ef067ecad4a0934693800', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: '652f9f5c6bd5c6ee58f3c89eee45325a98234ac0', class: "sd-date-picker", ref: el => {
                 this.triggerRef = el;
-            } }, h("sd-date-picker-trigger", { key: 'c8c041a503785e35ac4a14d902eeef0a20fa2dd7', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '2c3bf831068ca090247fa4494fac6c2ce3b20e81', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-calendar", { key: '52df44d23b85540cbca17c352aba5568ff43685d', elevated: true, value: this.value, selectable: this.selectable, onSdUpdate: this.handleSelect, onSdViewChange: this.handleViewChange })))));
+            } }, h("sd-date-picker-trigger", { key: '7b0f81badbcf7ca283afd274b4572e4a6eaa590b', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '65fbe892e4cdd9d643b5000d69220b5e28972902', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-calendar", { key: 'e9187264f336295907f1d5574810df4a07a0f114', elevated: true, value: this.value, selectable: this.selectable, onSdUpdate: this.handleSelect, onSdViewChange: this.handleViewChange })))));
     }
     static get is() { return "sd-date-picker"; }
     static get originalStyleUrls() {

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

@@ -239,7 +239,7 @@ export class SdDateRangePickerCalendar {
             '--range-panel-gap': `${RANGE_LAYOUT.panelGap}px`,
             '--range-divider': RANGE_LAYOUT.divider,
         };
-        return (h(Fragment, { key: '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 is() { return "sd-date-range-picker-calendar"; }
     static get originalStyleUrls() {

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

@@ -7,7 +7,7 @@ export class SdDivider {
         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' })));
     }
     static get is() { return "sd-divider"; }
     static get originalStyleUrls() {

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

@@ -1,6 +1,6 @@
 import buttonTokens from "../../tokens/generated/component.button.json";
 import systemTokens from "../../tokens/generated/system.json";
-import { BUTTON_CONFIG, PRESET_BORDER_COLORS as BUTTON_PRESET_BORDER_COLORS, PRESET_CONTENT_COLORS as BUTTON_PRESET_CONTENT_COLORS, PRESET_HOVER_BACKGROUNDS as BUTTON_PRESET_HOVER_BACKGROUNDS, getPresetName, } from "../sd-button/sd-button.config";
+import { BUTTON_CONFIG, PRESET_BORDER_COLORS as BUTTON_PRESET_BORDER_COLORS, PRESET_TEXT_COLORS as BUTTON_PRESET_TEXT_COLORS, PRESET_ICON_COLORS as BUTTON_PRESET_ICON_COLORS, PRESET_HOVER_BACKGROUNDS as BUTTON_PRESET_HOVER_BACKGROUNDS, getPresetName, } from "../sd-button/sd-button.config";
 // lazy IIFE 로 평가를 한 단계 안으로 옮겨 ban-side-effects 룰의 top-level call 검출을 회피한다.
 // (런타임 동작은 동일하다 — 모듈 로딩 시점에 한 번 실행됨.)
 export const DROPDOWN_BUTTON_CONFIG = (() => {
@@ -8,7 +8,8 @@ export const DROPDOWN_BUTTON_CONFIG = (() => {
     return Object.fromEntries(names.map(name => [name, BUTTON_CONFIG[name]]));
 })();
 export const PRESET_HOVER_BACKGROUNDS = BUTTON_PRESET_HOVER_BACKGROUNDS;
-export const PRESET_CONTENT_COLORS = BUTTON_PRESET_CONTENT_COLORS;
+export const PRESET_TEXT_COLORS = BUTTON_PRESET_TEXT_COLORS;
+export const PRESET_ICON_COLORS = BUTTON_PRESET_ICON_COLORS;
 export const PRESET_BORDER_COLORS = BUTTON_PRESET_BORDER_COLORS;
 export const PRESET_DIVIDER_COLORS = {
     primary: buttonTokens.button.dropdown.brand.strong.split,

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

@@ -21,11 +21,14 @@ sd-dropdown-button {
   --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;
@@ -94,6 +97,7 @@ sd-dropdown-button {
   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;
 }
 

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

@@ -2,7 +2,7 @@ import { h, } from "@stencil/core";
 import { BaseDropdownEvent } from "../../utils/base-dropdown-event";
 import { sanitizeInlineHtml } from "../../utils/html/sanitize-inline-html";
 import { BUTTON_FOCUS_RING_COLOR } from "../sd-button/sd-button.config";
-import { DROPDOWN_BUTTON_CONFIG, DROPDOWN_CHEVRON_ICON_SIZE, DROPDOWN_DISABLED_BACKGROUND, DROPDOWN_DISABLED_BORDER, DROPDOWN_DISABLED_TEXT, getDropdownButtonPreset, isDropdownButtonName, PRESET_BORDER_COLORS, PRESET_CONTENT_COLORS, PRESET_DIVIDER_COLORS, PRESET_HOVER_BACKGROUNDS, PRESET_MENU_ITEM_ACTIVE_BACKGROUNDS, PRESET_MENU_ITEM_ACTIVE_COLORS, PRESET_MENU_ITEM_COLORS, } from "./sd-dropdown-button.config";
+import { DROPDOWN_BUTTON_CONFIG, DROPDOWN_CHEVRON_ICON_SIZE, DROPDOWN_DISABLED_BACKGROUND, DROPDOWN_DISABLED_BORDER, DROPDOWN_DISABLED_ICON, DROPDOWN_DISABLED_TEXT, getDropdownButtonPreset, isDropdownButtonName, PRESET_BORDER_COLORS, PRESET_TEXT_COLORS, PRESET_ICON_COLORS, PRESET_DIVIDER_COLORS, PRESET_HOVER_BACKGROUNDS, PRESET_MENU_ITEM_ACTIVE_BACKGROUNDS, PRESET_MENU_ITEM_ACTIVE_COLORS, PRESET_MENU_ITEM_COLORS, } from "./sd-dropdown-button.config";
 export class SdDropdownButton extends BaseDropdownEvent {
     constructor() {
         super();
@@ -175,11 +175,13 @@ export class SdDropdownButton 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,
         };
     }
@@ -218,7 +220,7 @@ export class SdDropdownButton 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/collection/components/sd-field/sd-field.js

@@ -10,6 +10,7 @@ const FORM_PARENT_TAGS = [
     'sd-file-picker',
     'sd-date-picker',
     'sd-date-range-picker',
+    'sd-chip-input',
 ];
 export class SdField {
     el;
@@ -172,21 +173,21 @@ export class SdField {
                     : {}),
             }
             : {};
-        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 === '')

package/dist/collection/components/sd-file-picker/sd-file-picker.config.js

@@ -1,16 +1,17 @@
 import filePickerTokens from "../../tokens/generated/component.filepicker.json";
+import fieldTokens from "../../tokens/generated/component.field.json";
 const fp = filePickerTokens.filepicker;
 export const FILE_PICKER_LAYOUT = {
-    height: fp.height,
-    paddingX: fp.paddingX,
-    gap: fp.gap,
-    radius: fp.radius,
-    borderWidth: fp.borderWidth,
-    fontSize: fp.typography.fontSize,
-    lineHeight: fp.typography.lineHeight,
-    fontWeight: fp.typography.fontWeight,
-    iconSize: fp.size.icon,
-    contentsGap: fp.contents.gap,
+    height: fp.sm.height,
+    paddingX: fp.sm.paddingX,
+    gap: fp.sm.gap,
+    radius: fp.sm.radius,
+    borderWidth: fp.sm.borderWidth,
+    fontSize: fp.sm.typography.fontSize,
+    lineHeight: fp.sm.typography.lineHeight,
+    fontWeight: fp.sm.typography.fontWeight,
+    iconSize: fp.sm.icon,
+    contentsGap: fieldTokens.field.contents.gap,
 };
 export const FILE_PICKER_COLORS = {
     border: fp.border,

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

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

package/dist/collection/components/sd-ghost-button/sd-ghost-button.css

@@ -40,4 +40,25 @@ sd-ghost-button {
 }
 .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);
 }

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

@@ -5,6 +5,7 @@ export class SdGhostButton {
     size = 'sm';
     intent = 'default';
     ariaLabel = '';
+    tooltipLabel = '';
     disabled = false;
     click;
     hasWarnedMissingAriaLabel = false;
@@ -12,6 +13,7 @@ export class SdGhostButton {
         this.size ??= 'sm';
         this.intent ??= 'default';
         this.ariaLabel ??= '';
+        this.tooltipLabel ??= '';
     }
     handleClick = (event) => {
         if (this.disabled) {
@@ -42,16 +44,19 @@ export class SdGhostButton {
             ? GHOST_BUTTON_DISABLED_COLORS[intent]
             : GHOST_BUTTON_CONTENT_COLORS[intent];
         const accessibleName = (this.ariaLabel ?? '').trim() || undefined;
-        return (h("button", { key: '7bf9f8b8d487be0b66a969668308fd451faeb442', class: {
+        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 }, h("sd-icon", { key: '4b6b05d186f8c38d2f05415fa24960349dd6c453', name: this.icon, size: sizeConfig.icon, color: contentColor })));
+            }, 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 })));
     }
     static get is() { return "sd-ghost-button"; }
     static get originalStyleUrls() {
@@ -164,6 +169,26 @@ export class SdGhostButton {
                 "attribute": "aria-label",
                 "defaultValue": "''"
             },
+            "tooltipLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tooltip-label",
+                "defaultValue": "''"
+            },
             "disabled": {
                 "type": "boolean",
                 "mutable": false,

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

@@ -112,12 +112,12 @@ export class SdInput {
             '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
             '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
         };
-        return (h("sd-field", { key: '184bd0b614071b1c26d0ef3588db8eea1ac519cb', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("label", { key: '599d757b62bd61be0ba5c2dde2e1030b4d6f2973', class: "sd-input__content" }, h("slot", { key: '8b71b1449225e51cbab4204e34c077d83101e09e', name: "prefix" }), h("input", { key: 'ed48cf8544adc9e3475229b03129ace0af0e6d4e', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : (this.type ?? 'text'), value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: 'f084df7c3174756111c6eeb824202e26273d369a', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && !this.readonly && (h("sd-ghost-button", { key: '62f87c780b971ef43ec9bd15ae47d1f773ec18ca', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
+        return (h("sd-field", { key: 'fce402fae267b5700501e44935f23bebc28efb62', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("label", { key: 'f7d8f95cf5ee38a7aa2e44940ba39b9eb001064c', class: "sd-input__content" }, h("slot", { key: '23f1f770a268a0798293420ce0df9e5cc94e07b2', name: "prefix" }), h("input", { key: 'b8c041cc4a8761cf1cf93a8d1af139cd7720d2d8', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : (this.type ?? 'text'), value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: '5a288d50726b21c156da480937b9759e6c76d33a', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && !this.readonly && (h("sd-ghost-button", { key: 'b5315624a6fd5fdcb70526b1abea4fbac83641c1', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
                 if (this.disabled || this.readonly)
                     return;
                 this.internalValue = '';
                 await this.formField?.sdValidate();
-            } })), this.type === 'password' && (h("sd-ghost-button", { key: '83f511acdc0db74f6d7745e4a47c731f9bcf9bb5', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled || this.readonly, class: "sd-input__password-icon", onClick: () => {
+            } })), this.type === 'password' && (h("sd-ghost-button", { key: '5ae70d65c531db0bc57d17f85c328a275f7aab2b', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled || this.readonly, class: "sd-input__password-icon", onClick: () => {
                 if (this.disabled || this.readonly)
                     return;
                 this.passwordVisible = !this.passwordVisible;

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

@@ -28,7 +28,7 @@ export class SdLinearProgress {
             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)));
     }
     static get is() { return "sd-linear-progress"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-loading-container/sd-loading-container.js

@@ -10,10 +10,10 @@ export class SdLoadingContainer {
         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)))));
     }
     static get is() { return "sd-loading-container"; }
     static get originalStyleUrls() {

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

@@ -46,7 +46,7 @@ export class SdLoadingModal {
             '--sd-loading-modal-width': this.toCssSize(this.width) ?? `${LOADING_MODAL_LAYOUT.minWidth}px`,
             '--sd-loading-modal-height': this.toCssSize(this.height) ?? `${LOADING_MODAL_LAYOUT.minHeight}px`,
         };
-        return (h(Host, { key: 'e1161a16a56cddedc8e4bb76370bdf456d90e15a', style: hostStyle }, h("div", { key: 'e01979e4636465afa4b960ffdb9722f645386dca', class: "sd-loading-modal" }, h("div", { key: '1c1ecc05d20f58084c0d6f8048b17cd84f446edb', class: "sd-loading-modal__content" }, this.resolvedState === 'loading' ? (this.progress !== undefined ? (h("sd-circle-progress", { value: this.progress })) : (h("sd-circle-progress", { indeterminate: true }))) : (h("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), h("div", { key: '6793b86562b67699c59fd83fb0d6ee7378f6d991', class: "sd-loading-modal__message-wrapper" }, Array.isArray(this.resolvedMessage) ? (this.resolvedMessage.map(message => (h("p", { class: "sd-loading-modal__message" }, message)))) : (h("p", { class: "sd-loading-modal__message" }, this.resolvedMessage))), this.useButton && (h("div", { key: '75036f7d88be636987de2fe999c00d338fa352d5', class: "sd-loading-modal__button" }, h("sd-button", { key: '91f30470702df2be7256d451cc80d27e86510d2e', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
+        return (h(Host, { key: '17636253239532d90e596f20d84795fe2e65508d', style: hostStyle }, h("div", { key: '2f925afceca4102049d7876ab4d1e33fa1ef5ef7', class: "sd-loading-modal" }, h("div", { key: '0598cff340210ca9ec5e28fb1992cbbc1b8e5a06', class: "sd-loading-modal__content" }, this.resolvedState === 'loading' ? (this.progress !== undefined ? (h("sd-circle-progress", { value: this.progress })) : (h("sd-circle-progress", { indeterminate: true }))) : (h("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), h("div", { key: '3d699238c19ee66fd3afc72194133a865501cc08', class: "sd-loading-modal__message-wrapper" }, Array.isArray(this.resolvedMessage) ? (this.resolvedMessage.map(message => (h("p", { class: "sd-loading-modal__message" }, message)))) : (h("p", { class: "sd-loading-modal__message" }, this.resolvedMessage))), this.useButton && (h("div", { key: 'd454a168360cd23a3e71482d67ee81d8eabdec58', class: "sd-loading-modal__button" }, h("sd-button", { key: '0aa26dc830d1c4827f2ee0ca0bfdf4bb8cd2c9f5', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
     }
     static get is() { return "sd-loading-modal"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-number-input/sd-number-input.config.js

@@ -1,4 +1,5 @@
 import numberInputTokens from "../../tokens/generated/component.numberInput.json";
+import fieldTokens from "../../tokens/generated/component.field.json";
 const sm = numberInputTokens.numberInput.sm;
 const md = numberInputTokens.numberInput.md;
 export const NUMBER_INPUT_SIZE_MAP = {
@@ -31,7 +32,7 @@ export const NUMBER_INPUT_STEPPER = {
     bg: numberInputTokens.numberInput.stepper.bg,
     icon: numberInputTokens.numberInput.stepper.icon,
 };
-export const NUMBER_INPUT_HINT = numberInputTokens.numberInput.hint;
-export const NUMBER_INPUT_ERROR_MESSAGE = numberInputTokens.numberInput.errorMessage;
-export const NUMBER_INPUT_CONTENTS_GAP = numberInputTokens.numberInput.contents.gap;
+export const NUMBER_INPUT_HINT = fieldTokens.field.hint;
+export const NUMBER_INPUT_ERROR_MESSAGE = fieldTokens.field.errorMessage;
+export const NUMBER_INPUT_CONTENTS_GAP = fieldTokens.field.contents.gap;
 export const NUMBER_INPUT_BORDER_WIDTH = numberInputTokens.numberInput.borderWidth;

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

@@ -275,15 +275,15 @@ export class SdNumberInput {
             '--sd-textinput-input-hint-typography-line-height': `${NUMBER_INPUT_HINT.typography.lineHeight}px`,
             '--sd-textinput-input-contents-gap': `${NUMBER_INPUT_CONTENTS_GAP}px`,
         };
-        return (h("sd-field", { key: '36525cd069e57fc9177e25065381f722d1afa66e', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: '47e0981ffcd5dd5182fa5586fda0014be865da9e', class: {
+        return (h("sd-field", { key: '53c6935bbf98ed1eb0f28d6bed675ea369b0b2bc', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: '8f0da8b179cd3946d625ab6b525a2ffd614a5333', class: {
                 'sd-number-input__content': true,
                 'sd-number-input__content--no-stepper': !this.useButton,
-            } }, this.useButton && (h("button", { key: '7f5afc1ded2c889ccf7d689f4ee058cb171571d9', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: 'fd980fd4e568feaaebb19621ca837201bea519dd', name: "minus", size: iconSize, color: this.isDecrementDisabled()
+            } }, this.useButton && (h("button", { key: '1be42c16d5e671c567d4768f505c2c17c50f1b60', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: 'dc074328208c8da2ee43ea2cb03dbc838b7d46c9', name: "minus", size: iconSize, color: this.isDecrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
-                : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && h("span", { key: '2af6450d437cc765697e0bb4c8a0fcb58a9abd2f', class: "sd-number-input__prefix" }, this.inputPrefix), h("input", { key: '21396363bd0e08f1639cd5a56b0bb7d5c9acd6c1', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__native ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
+                : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && h("span", { key: '84896d40d79e936480052ab45d618cd73550ee87', class: "sd-number-input__prefix" }, this.inputPrefix), h("input", { key: 'f2c8995b6c059c2a4130018b2ff0c7eabcd7abfb', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__native ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
                 textAlign: this.useButton ? 'center' : 'right',
                 ...this.inputStyle,
-            } }), this.inputSuffix && h("span", { key: 'd3cd84cd41e0161cfe0b13ed44b412991e498a92', class: "sd-number-input__suffix" }, this.inputSuffix), this.useButton && (h("button", { key: '0a1fdf262b953ce79515ab9771d3177560e11eed', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: '5ffd93512d528309a9051d01f59bb31f1b1f9bb8', name: "add", size: iconSize, color: this.isIncrementDisabled()
+            } }), this.inputSuffix && h("span", { key: 'd6b1ca9f5991f1b2382dd4a35ae4f20832192e3c', class: "sd-number-input__suffix" }, this.inputSuffix), this.useButton && (h("button", { key: '56a59f94ca27e8ef4255cabdd5fe003c602bb8d6', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: '1b8fca91e893b5ade47ed63db4d4d54933c94e53', name: "add", size: iconSize, color: this.isIncrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
                 : NUMBER_INPUT_STEPPER.icon.default }))))));
     }

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

@@ -83,13 +83,13 @@ export class SdPagination {
             '--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())));
     }
     static get is() { return "sd-pagination"; }
     static get originalStyleUrls() {

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

@@ -53,17 +53,17 @@ export class SdPopover {
         const leftLink = this.leftLink;
         const button = this.button;
         const hasFooter = !!leftLink || !!button;
-        return (h(Fragment, { key: 'f0b7cc015ab688e21d6df2a797c3964808965934' }, this.label !== '' ? (h("sd-button", { ref: el => (this.buttonEl = el), name: this.name ?? 'primary_sm', label: this.label, icon: icon, rightIcon: this.rightIcon, ariaLabel: this.ariaLabel || this.label || icon || 'Open popover', disabled: this.disabled, type: this.type ?? 'button', class: "sd-popover", onSdClick: () => this.setShow(!this.show) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: iconSize, color: color, class: "sd-popover", onClick: () => this.setShow(!this.show) })), this.show && (h("sd-floating-portal", { key: '3b8ad8010a7d74fb519f0ad9ff504c0c0fa32941', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.popoverOffset }, h("div", { key: '8fba73c8cf2718258a176dac2033fb3b33a8a618', class: {
+        return (h(Fragment, { key: '649e07ee45d3e7e5f72a438ef2939bfe6d3c56e4' }, this.label !== '' ? (h("sd-button", { ref: el => (this.buttonEl = el), name: this.name ?? 'primary_sm', label: this.label, icon: icon, rightIcon: this.rightIcon, ariaLabel: this.ariaLabel || this.label || icon || 'Open popover', disabled: this.disabled, type: this.type ?? 'button', class: "sd-popover", onSdClick: () => this.setShow(!this.show) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: iconSize, color: color, class: "sd-popover", onClick: () => this.setShow(!this.show) })), this.show && (h("sd-floating-portal", { key: '486d1859387b0c8cc82646ab5e7b6800792ca2be', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.popoverOffset }, h("div", { key: '4418e064c76478a5b4dfd2fb69d11e1603a22530', class: {
                 'sd-floating-menu': true,
                 'sd-floating-menu--popover': true,
                 [`sd-floating-menu--${placement}`]: true,
                 [menuClass]: menuClass !== '',
             }, style: {
-                '--sd-floating-bg': popoverTokens.popover.bg,
-            } }, h("i", { key: '1cef252c66b1c350ea43849e552faced5a53fec0', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, h(TooltipArrow, { key: '755246fe5fbf9b203509f8d45d2bcbeead0c02c6' })), h("div", { key: 'cbefa421598f83f692533d4abf8cfc584b4e02e1', class: "sd-floating-menu__content" }, this.menuTitle && h("div", { key: '0f1dfbaf65236416ba00e5f87cb60e2e98971995', class: "sd-floating-menu__title" }, this.menuTitle), this.slotContentHTML && (h("div", { key: '38ef67a38921e3fbd1e8bee95892655fc57d124c', class: "sd-floating-menu__messages", innerHTML: this.slotContentHTML })), hasFooter && (h("div", { key: '6b3f297563e3b7aa17ace0e20c4423d09b528b32', class: {
+                '--sd-floating-bg': popoverTokens.popover.default.bg,
+            } }, h("i", { key: 'a181ce40ae957e77be7c8f9b10e6f1fe8190cd52', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, h(TooltipArrow, { key: '323bca17c3c245063cbd1ac55ed64bf6f6df9e3e' })), h("div", { key: '06e98cf6e888dc66a6a700710669c61ac9d9c494', class: "sd-floating-menu__content" }, this.menuTitle && h("div", { key: '831ca9893ccafcad8e0858fb28269428ebac6a07', class: "sd-floating-menu__title" }, this.menuTitle), this.slotContentHTML && (h("div", { key: 'cdd2eafe18d5b0b44f10dbebbb68ed9d010173b1', class: "sd-floating-menu__messages", innerHTML: this.slotContentHTML })), hasFooter && (h("div", { key: '8149044a08de968ef38f432ee3303d969b49eace', class: {
                 'sd-floating-menu__buttons': true,
                 'sd-floating-menu__buttons--with-link': !!leftLink,
-            } }, leftLink && (h("sd-text-link", { key: '6ff83b0aefa24ac3bbae7f1399fdaaa1028b4e75', class: "sd-floating-menu__left-link", label: leftLink.label, icon: leftLink.icon ?? '', iconColor: leftLink.iconColor ?? '', useArrow: !!leftLink.useArrow, underline: !!leftLink.underline, disabled: !!leftLink.disabled, onSdClick: leftLink.onClick })), button && (h("sd-button", { key: 'b8b75cd68c55b16b5eb0e4635c16b784381ced78', name: button.name ?? 'secondary_xs', label: button.label, icon: button.icon, rightIcon: button.rightIcon, ariaLabel: button.ariaLabel || button.label || button.icon || 'Open popover', disabled: button.disabled, type: button.type, onSdClick: button.onClick }))))), h("sd-ghost-button", { key: '246ab053d1109d7b999e63c3aa5a1048d6096583', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xs", onClick: this.handleClose }))))));
+            } }, leftLink && (h("sd-text-link", { key: '4c7e9c2b4fe8664b3af375a3c89b1cd50d64a9c3', class: "sd-floating-menu__left-link", label: leftLink.label, icon: leftLink.icon ?? '', iconColor: leftLink.iconColor ?? '', rightArrow: leftLink.rightArrow ?? 'none', underline: !!leftLink.underline, disabled: !!leftLink.disabled, onSdClick: leftLink.onClick })), button && (h("sd-button", { key: '730d867339257f168c11d7d1417c9d28a408f462', name: button.name ?? 'secondary_xs', label: button.label, icon: button.icon, rightIcon: button.rightIcon, ariaLabel: button.ariaLabel || button.label || button.icon || 'Open popover', disabled: button.disabled, type: button.type, onSdClick: button.onClick }))))), h("sd-ghost-button", { key: '7a1f2edf0a601c0dfa91b4a02405c815d3257214', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xs", onClick: this.handleClose }))))));
     }
     static get is() { return "sd-popover"; }
     static get originalStyleUrls() {
@@ -345,7 +345,7 @@ export class SdPopover {
                 "mutable": false,
                 "complexType": {
                     "original": "PopoverLink",
-                    "resolved": "(Partial<Pick<SdTextLink, \"disabled\" | \"underline\" | \"icon\" | \"iconColor\" | \"useArrow\">> & { label: string; onClick?: ((e: Event) => void) | undefined; }) | undefined",
+                    "resolved": "(Partial<Pick<SdTextLink, \"disabled\" | \"underline\" | \"icon\" | \"iconColor\" | \"rightArrow\">> & { label: string; onClick?: ((e: Event) => void) | undefined; }) | undefined",
                     "references": {
                         "PopoverLink": {
                             "location": "local",

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

@@ -36,7 +36,7 @@ export class SdPopup {
             ...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() })))));
     }
     static get is() { return "sd-popup"; }
     static get originalStyleUrls() {

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

@@ -220,7 +220,7 @@ export class SdPortal {
         this.close.emit();
     }
     render() {
-        return h("slot", { key: '87fb9bf3f15d09321c6c02a1f7b4ed9084516a04' });
+        return h("slot", { key: 'f7b160cb574608fa16f6edd27d259b85787e6144' });
     }
     static get is() { return "sd-portal"; }
     static get properties() {

package/dist/collection/components/sd-select/sd-select-list-item/sd-select-list-item.js

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
-import { LIST_ITEM_LAYOUT, LIST_ITEM_TYPOGRAPHY, LIST_ITEM_COLORS, } from "../sd-select.config";
+import { LIST_ITEM_LAYOUT, LIST_ITEM_TYPOGRAPHY, LIST_ITEM_COLORS, isHtmlLabel, } from "../sd-select.config";
+import { sanitizeInlineHtml } from "../../../utils/html/sanitize-inline-html";
 export class SdSelectListItem {
     option;
     depth = 1;
@@ -70,7 +71,7 @@ export class SdSelectListItem {
         return (
         // 키보드 네비게이션은 부모 listbox 의 ArrowUp/Down + Enter 가 담당. 항목 자체는 role=option, tabindex=-1 으로 표시.
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-        h("div", { key: '33f5d4383d2bfac91507d72d98b8a73b380a70e8', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
+        h("div", { key: '55ebe094653cb89d5c70916c3e0a2f4ccb5551f8', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
                 'sd-select-list-item': true,
                 'sd-select-list-item--group': isGroup,
                 'sd-select-list-item--depth1-group': isDepth1Group,
@@ -80,7 +81,7 @@ export class SdSelectListItem {
                 'sd-select-list-item--focused': this.isFocused,
                 'sd-select-list-item--selectable': this.isSelectable && !this.option.disabled,
                 'sd-select-list-item--disabled': !!this.option.disabled,
-            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (h("sd-checkbox", { key: 'a93dec7a45e140d7f715a6fc823c4438c58cdd8f', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, inverse: this.isFocused && this.isSelected !== false, class: "sd-select-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), h("span", { key: '81b0bfdd0825b795f2638d6529e8c5fb346be6db', class: "sd-select-list-item__label" }, this.option.label), this.countInfo && (h("span", { key: '2e1425a5d6ab9082a30b4d9079be1d4104d95fc2', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
+            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (h("sd-checkbox", { key: 'f636931bc20264db98e521b11b819610cda764cd', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, inverse: this.isFocused && this.isSelected !== false, class: "sd-select-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), isHtmlLabel(this.option.label) ? (h("span", { class: "sd-select-list-item__label", ref: el => el && (el.innerHTML = sanitizeInlineHtml(this.option.label)) })) : (h("span", { class: "sd-select-list-item__label" }, this.option.label)), this.countInfo && (h("span", { key: '89750bc08c03915b738da390f4255e7451aa9d6d', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
     }
     static get is() { return "sd-select-list-item"; }
     static get originalStyleUrls() {