@sellmate/design-system 1.25.1 → 1.26.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (194) hide show
  1. package/dist/cjs/design-system.cjs.js +1 -1
  2. package/dist/cjs/loader.cjs.js +1 -1
  3. package/dist/cjs/sd-calendar_2.cjs.entry.js +2 -2
  4. package/dist/cjs/sd-chip-input.cjs.entry.js +48 -31
  5. package/dist/cjs/sd-circle-progress.cjs.entry.js +1 -1
  6. package/dist/cjs/sd-confirm-modal_2.cjs.entry.js +3 -3
  7. package/dist/cjs/sd-date-picker_7.cjs.entry.js +9 -9
  8. package/dist/cjs/sd-date-range-picker-calendar.cjs.entry.js +1 -1
  9. package/dist/cjs/sd-divider.cjs.entry.js +1 -1
  10. package/dist/cjs/sd-field_3.cjs.entry.js +7 -7
  11. package/dist/cjs/sd-ghost-button_3.cjs.entry.js +12 -4
  12. package/dist/cjs/sd-linear-progress.cjs.entry.js +1 -1
  13. package/dist/cjs/sd-loading-container.cjs.entry.js +2 -2
  14. package/dist/cjs/sd-pagination_4.cjs.entry.js +8 -8
  15. package/dist/cjs/sd-popup.cjs.entry.js +1 -1
  16. package/dist/cjs/sd-select-list-item_2.cjs.entry.js +6 -6
  17. package/dist/cjs/sd-select_3.cjs.entry.js +8 -8
  18. package/dist/cjs/sd-switch.cjs.entry.js +1 -1
  19. package/dist/cjs/sd-table.cjs.entry.js +6 -6
  20. package/dist/cjs/sd-tabs.cjs.entry.js +1 -1
  21. package/dist/cjs/sd-td.cjs.entry.js +1 -1
  22. package/dist/cjs/sd-toast-container.cjs.entry.js +1 -1
  23. package/dist/cjs/sd-toast.cjs.entry.js +2 -2
  24. package/dist/cjs/sd-toggle.cjs.entry.js +1 -1
  25. package/dist/collection/components/sd-chip-input/sd-chip-input.css +3 -0
  26. package/dist/collection/components/sd-chip-input/sd-chip-input.js +66 -30
  27. package/dist/collection/components/sd-circle-progress/sd-circle-progress.js +1 -1
  28. package/dist/collection/components/sd-confirm-modal/sd-confirm-modal.js +2 -2
  29. package/dist/collection/components/sd-date-picker/sd-date-picker-trigger/sd-date-picker-trigger.js +2 -2
  30. package/dist/collection/components/sd-date-picker/sd-date-picker.js +2 -2
  31. package/dist/collection/components/sd-date-range-picker/sd-date-range-picker-calendar/sd-date-range-picker-calendar.js +1 -1
  32. package/dist/collection/components/sd-divider/sd-divider.js +1 -1
  33. package/dist/collection/components/sd-field/sd-field.js +4 -4
  34. package/dist/collection/components/sd-floating-portal/sd-floating-portal.js +1 -1
  35. package/dist/collection/components/sd-input/sd-input.js +2 -2
  36. package/dist/collection/components/sd-linear-progress/sd-linear-progress.js +1 -1
  37. package/dist/collection/components/sd-loading-container/sd-loading-container.js +2 -2
  38. package/dist/collection/components/sd-loading-modal/sd-loading-modal.js +1 -1
  39. package/dist/collection/components/sd-number-input/sd-number-input.js +4 -4
  40. package/dist/collection/components/sd-pagination/sd-pagination.js +3 -3
  41. package/dist/collection/components/sd-popup/sd-popup.js +1 -1
  42. package/dist/collection/components/sd-portal/sd-portal.js +1 -1
  43. package/dist/collection/components/sd-select/sd-select-list-item/sd-select-list-item.js +2 -2
  44. package/dist/collection/components/sd-select/sd-select-list-item-search/sd-select-list-item-search.js +4 -4
  45. package/dist/collection/components/sd-select/sd-select-listbox/sd-select-listbox.js +2 -2
  46. package/dist/collection/components/sd-select/sd-select-trigger/sd-select-trigger.js +2 -2
  47. package/dist/collection/components/sd-select/sd-select.js +4 -4
  48. package/dist/collection/components/sd-switch/sd-switch.js +1 -1
  49. package/dist/collection/components/sd-table/sd-table.js +6 -6
  50. package/dist/collection/components/sd-table/sd-tbody/sd-tbody.js +2 -2
  51. package/dist/collection/components/sd-table/sd-td/sd-td.js +1 -1
  52. package/dist/collection/components/sd-table/sd-thead/sd-thead.js +3 -3
  53. package/dist/collection/components/sd-tabs/sd-tabs.js +1 -1
  54. package/dist/collection/components/sd-tag/sd-tag.css +2 -1
  55. package/dist/collection/components/sd-tag/sd-tag.js +31 -3
  56. package/dist/collection/components/sd-textarea/sd-textarea.js +1 -1
  57. package/dist/collection/components/sd-toast/sd-toast.js +2 -2
  58. package/dist/collection/components/sd-toast-container/sd-toast-container.js +1 -1
  59. package/dist/collection/components/sd-toggle/sd-toggle.js +1 -1
  60. package/dist/collection/components/sd-tooltip/sd-tooltip.js +2 -2
  61. package/dist/components/{p-Dny4KukK.js → p-346Z6-KH.js} +1 -1
  62. package/dist/components/{p-BGpxtouI.js → p-B90EQBEX.js} +1 -1
  63. package/dist/components/{p-BuuIkYiY.js → p-BBRQlkBM.js} +1 -1
  64. package/dist/components/{p-PMD-Col0.js → p-BNxNJ3CK.js} +1 -1
  65. package/dist/components/{p-BZUlNC0d.js → p-BOTW76OV.js} +1 -1
  66. package/dist/components/{p-CtNDxhxx.js → p-BSnINeoq.js} +1 -1
  67. package/dist/components/{p-BoH7ykYx.js → p-BTWJkT9Y.js} +1 -1
  68. package/dist/components/{p-CQLezwlh.js → p-BVVYrEje.js} +1 -1
  69. package/dist/components/{p-BlN03Cqm.js → p-B_12VhSA.js} +1 -1
  70. package/dist/components/{p-BAsjJuJJ.js → p-BxiJsH7Z.js} +1 -1
  71. package/dist/components/{p-0U99W-3Z.js → p-C3rAloxT.js} +1 -1
  72. package/dist/components/{p-DBw58vNP.js → p-C4Vfr3RI.js} +1 -1
  73. package/dist/components/{p-B8uvCE1e.js → p-D6AroYk-.js} +1 -1
  74. package/dist/components/{p-CqivNcjh.js → p-D9tjoBhH.js} +1 -1
  75. package/dist/components/{p-CNwoxvpg.js → p-DGBRubiD.js} +1 -1
  76. package/dist/components/p-DLZRxIKh.js +1 -0
  77. package/dist/components/{p-d3KpOGRC.js → p-DUHiXyfJ.js} +1 -1
  78. package/dist/components/{p-BckY1cBy.js → p-DhgwAPO4.js} +1 -1
  79. package/dist/components/p-DiJvHjSG.js +1 -0
  80. package/dist/components/{p-1fgPu1BU.js → p-DlBZuGIN.js} +1 -1
  81. package/dist/components/{p-Dxye4-ZY.js → p-DlROb9xa.js} +1 -1
  82. package/dist/components/{p-BzrpKueg.js → p-DoJxhlz2.js} +1 -1
  83. package/dist/components/{p-h9_f4fUW.js → p-DsZ3vasC.js} +1 -1
  84. package/dist/components/{p-DpYG9T3S.js → p-Dz70SQco.js} +1 -1
  85. package/dist/components/{p-lGr865w2.js → p-UIytIOVz.js} +1 -1
  86. package/dist/components/{p-I-9rJnxk.js → p-c9mdxFTZ.js} +1 -1
  87. package/dist/components/{p-DMvWCQfX.js → p-h-EFBJM4.js} +1 -1
  88. package/dist/components/{p-BW-I-6Id.js → p-j1n74q9u.js} +1 -1
  89. package/dist/components/{p-DbbdfMAF.js → p-k89ztBz6.js} +1 -1
  90. package/dist/components/sd-action-modal.js +1 -1
  91. package/dist/components/sd-barcode-input.js +1 -1
  92. package/dist/components/sd-calendar.js +1 -1
  93. package/dist/components/sd-chip-input.js +1 -1
  94. package/dist/components/sd-chip.js +1 -1
  95. package/dist/components/sd-circle-progress.js +1 -1
  96. package/dist/components/sd-confirm-modal.js +1 -1
  97. package/dist/components/sd-date-picker-trigger.js +1 -1
  98. package/dist/components/sd-date-picker.js +1 -1
  99. package/dist/components/sd-date-range-picker-calendar.js +1 -1
  100. package/dist/components/sd-date-range-picker.js +1 -1
  101. package/dist/components/sd-divider.js +1 -1
  102. package/dist/components/sd-dropdown-button.js +1 -1
  103. package/dist/components/sd-field.js +1 -1
  104. package/dist/components/sd-file-picker.js +1 -1
  105. package/dist/components/sd-floating-portal.js +1 -1
  106. package/dist/components/sd-ghost-button.js +1 -1
  107. package/dist/components/sd-guide.js +1 -1
  108. package/dist/components/sd-input.js +1 -1
  109. package/dist/components/sd-key-value-table.js +1 -1
  110. package/dist/components/sd-linear-progress.js +1 -1
  111. package/dist/components/sd-loading-container.js +1 -1
  112. package/dist/components/sd-loading-modal.js +1 -1
  113. package/dist/components/sd-modal-container.js +1 -1
  114. package/dist/components/sd-number-input.js +1 -1
  115. package/dist/components/sd-pagination.js +1 -1
  116. package/dist/components/sd-popover.js +1 -1
  117. package/dist/components/sd-popup.js +1 -1
  118. package/dist/components/sd-portal.js +1 -1
  119. package/dist/components/sd-select-list-item-search.js +1 -1
  120. package/dist/components/sd-select-list-item.js +1 -1
  121. package/dist/components/sd-select-listbox.js +1 -1
  122. package/dist/components/sd-select-trigger.js +1 -1
  123. package/dist/components/sd-select.js +1 -1
  124. package/dist/components/sd-switch.js +1 -1
  125. package/dist/components/sd-table.js +1 -1
  126. package/dist/components/sd-tabs.js +1 -1
  127. package/dist/components/sd-tag.js +1 -1
  128. package/dist/components/sd-tbody.js +1 -1
  129. package/dist/components/sd-td.js +1 -1
  130. package/dist/components/sd-text-link.js +1 -1
  131. package/dist/components/sd-textarea.js +1 -1
  132. package/dist/components/sd-thead.js +1 -1
  133. package/dist/components/sd-toast-container.js +1 -1
  134. package/dist/components/sd-toast.js +1 -1
  135. package/dist/components/sd-toggle.js +1 -1
  136. package/dist/components/sd-tooltip.js +1 -1
  137. package/dist/design-system/design-system.esm.js +1 -1
  138. package/dist/design-system/{p-9ea2fbec.entry.js → p-0fcb6fb3.entry.js} +1 -1
  139. package/dist/design-system/{p-5a67c40d.entry.js → p-1680b427.entry.js} +1 -1
  140. package/dist/design-system/{p-f1e0ba30.entry.js → p-20bb91ed.entry.js} +1 -1
  141. package/dist/design-system/{p-84b415d7.entry.js → p-250b8e5d.entry.js} +1 -1
  142. package/dist/design-system/{p-8862e3e3.entry.js → p-25a11d7d.entry.js} +1 -1
  143. package/dist/design-system/{p-0d5d2723.entry.js → p-3064d7c6.entry.js} +1 -1
  144. package/dist/design-system/{p-6b20c76b.entry.js → p-352a72ef.entry.js} +1 -1
  145. package/dist/design-system/{p-43d521c4.entry.js → p-3f16f44b.entry.js} +1 -1
  146. package/dist/design-system/{p-a8d69ab2.entry.js → p-43c47cd5.entry.js} +1 -1
  147. package/dist/design-system/{p-cb63d4cf.entry.js → p-6e702726.entry.js} +1 -1
  148. package/dist/design-system/{p-c0198e3a.entry.js → p-7cf2305b.entry.js} +1 -1
  149. package/dist/design-system/{p-9afc1f7c.entry.js → p-89c8585f.entry.js} +1 -1
  150. package/dist/design-system/p-8be26652.entry.js +1 -0
  151. package/dist/design-system/{p-a505459f.entry.js → p-8c5451f2.entry.js} +1 -1
  152. package/dist/design-system/{p-3b71d1d4.entry.js → p-992f9509.entry.js} +1 -1
  153. package/dist/design-system/{p-74e605c0.entry.js → p-a0349edd.entry.js} +1 -1
  154. package/dist/design-system/p-a32704bc.entry.js +1 -0
  155. package/dist/design-system/{p-b4df75b9.entry.js → p-a76a8463.entry.js} +1 -1
  156. package/dist/design-system/{p-c7ff7bc8.entry.js → p-c4e0c490.entry.js} +1 -1
  157. package/dist/design-system/{p-a1438f7d.entry.js → p-eb1233ff.entry.js} +1 -1
  158. package/dist/design-system/p-f089fc54.entry.js +1 -0
  159. package/dist/design-system/{p-6f77fc76.entry.js → p-f910d33f.entry.js} +1 -1
  160. package/dist/esm/design-system.js +1 -1
  161. package/dist/esm/loader.js +1 -1
  162. package/dist/esm/sd-calendar_2.entry.js +2 -2
  163. package/dist/esm/sd-chip-input.entry.js +48 -31
  164. package/dist/esm/sd-circle-progress.entry.js +1 -1
  165. package/dist/esm/sd-confirm-modal_2.entry.js +3 -3
  166. package/dist/esm/sd-date-picker_7.entry.js +9 -9
  167. package/dist/esm/sd-date-range-picker-calendar.entry.js +1 -1
  168. package/dist/esm/sd-divider.entry.js +1 -1
  169. package/dist/esm/sd-field_3.entry.js +7 -7
  170. package/dist/esm/sd-ghost-button_3.entry.js +13 -5
  171. package/dist/esm/sd-linear-progress.entry.js +1 -1
  172. package/dist/esm/sd-loading-container.entry.js +2 -2
  173. package/dist/esm/sd-pagination_4.entry.js +8 -8
  174. package/dist/esm/sd-popup.entry.js +1 -1
  175. package/dist/esm/sd-select-list-item_2.entry.js +6 -6
  176. package/dist/esm/sd-select_3.entry.js +8 -8
  177. package/dist/esm/sd-switch.entry.js +1 -1
  178. package/dist/esm/sd-table.entry.js +6 -6
  179. package/dist/esm/sd-tabs.entry.js +1 -1
  180. package/dist/esm/sd-td.entry.js +1 -1
  181. package/dist/esm/sd-toast-container.entry.js +1 -1
  182. package/dist/esm/sd-toast.entry.js +2 -2
  183. package/dist/esm/sd-toggle.entry.js +1 -1
  184. package/dist/types/components/sd-chip-input/sd-chip-input.d.ts +3 -0
  185. package/dist/types/components/sd-tag/sd-tag.d.ts +3 -0
  186. package/dist/types/components.d.ts +20 -0
  187. package/hydrate/index.js +126 -99
  188. package/hydrate/index.mjs +126 -99
  189. package/package.json +1 -1
  190. package/dist/components/p-D6noGX38.js +0 -1
  191. package/dist/components/p-D8T1XeGP.js +0 -1
  192. package/dist/design-system/p-21d8f192.entry.js +0 -1
  193. package/dist/design-system/p-662ce409.entry.js +0 -1
  194. package/dist/design-system/p-ad822c82.entry.js +0 -1
@@ -127,9 +127,9 @@ const SdDatePicker = class {
127
127
  '--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
128
128
  '--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
129
129
  };
130
- return (h("sd-field", { key: 'd40168072c744016d87e7e812b781f7cfeacbc0f', 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: '75a6029631b17e71ce9ba984cb0804d4f0e4b003', class: "sd-date-picker", ref: el => {
130
+ return (h("sd-field", { key: '4359c9ce80bfc919088774a4458c730c427aa3f5', 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: '638f4e59c9a7c5c841428c424181b3d2320857eb', class: "sd-date-picker", ref: el => {
131
131
  this.triggerRef = el;
132
- } }, h("sd-date-picker-trigger", { key: '50239daa174a49c306cd79633fc2b26756650b39', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '6b2bc9b10b5337b24ba2403a1a3dc29cf8c49007', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-calendar", { key: '04274e5bd12c2a3a9c0b6879c49fae4b547e5670', elevated: true, value: this.value, selectable: this.selectable, onSdUpdate: this.handleSelect, onSdViewChange: this.handleViewChange })))));
132
+ } }, h("sd-date-picker-trigger", { key: 'cbfe2bee0fdea1f089860cf3a7da9b7e35327c87', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: 'a348437c5f9f53180cc7f74d5b275e4f3fbedea6', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-calendar", { key: '7dd08053b3a24d25e6149d4bc751c75eff94f752', elevated: true, value: this.value, selectable: this.selectable, onSdUpdate: this.handleSelect, onSdViewChange: this.handleViewChange })))));
133
133
  }
134
134
  static get watchers() { return {
135
135
  "isOpen": [{
@@ -766,12 +766,12 @@ const SdInput = class {
766
766
  '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
767
767
  '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
768
768
  };
769
- return (h("sd-field", { key: '6dda00aedca8b7020960de585e27477b7ee104e7', 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: 'ee4b9368d04388c5679943df7c380c879130a07d', class: "sd-input__content" }, h("slot", { key: 'ba1737093bb22f790ab9ea4677966daf718cae01', name: "prefix" }), h("input", { key: '94961d388267f7b84ac9b5c1e7a5b10a803266c7', 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: '1d5a1319d8f216d637eb546665e16be4dab1f2a8', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && !this.readonly && (h("sd-ghost-button", { key: '901716b67a34eefc41bb497b86bb658207f79046', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
769
+ return (h("sd-field", { key: 'b29a9d582bd8993bd5c31c70bab02ff553f2e167', 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: '1a6ad118628ab8cb9282953c618ca61898cf241a', class: "sd-input__content" }, h("slot", { key: '4de06d36b71ce2cad70a735e7620c2d320973962', name: "prefix" }), h("input", { key: '11c448201927a769c56fd1500ba8dd164d1b695a', 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: '4ac88a21df8e2feaa67a68cab9fca4e24985d17d', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && !this.readonly && (h("sd-ghost-button", { key: '0985e2ed631ee746793563a22d766545a34d1562', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
770
770
  if (this.disabled || this.readonly)
771
771
  return;
772
772
  this.internalValue = '';
773
773
  await this.formField?.sdValidate();
774
- } })), this.type === 'password' && (h("sd-ghost-button", { key: '5b7e03060d88fee8256cdf9aba66d3e3eed36cdc', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled || this.readonly, class: "sd-input__password-icon", onClick: () => {
774
+ } })), this.type === 'password' && (h("sd-ghost-button", { key: '16300e673a9c93209c403ec788217ba301c1d2e6', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled || this.readonly, class: "sd-input__password-icon", onClick: () => {
775
775
  if (this.disabled || this.readonly)
776
776
  return;
777
777
  this.passwordVisible = !this.passwordVisible;
@@ -1196,15 +1196,15 @@ const SdNumberInput = class {
1196
1196
  '--sd-textinput-input-hint-typography-line-height': `${NUMBER_INPUT_HINT.typography.lineHeight}px`,
1197
1197
  '--sd-textinput-input-contents-gap': `${NUMBER_INPUT_CONTENTS_GAP}px`,
1198
1198
  };
1199
- return (h("sd-field", { key: 'c50811d15f4b698d889132ac8e4527df72059a0d', 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: 'c36595fc48eeb88090cfdeeda3da0e51a86d814e', class: {
1199
+ return (h("sd-field", { key: '581504f245674e1644f672aa77dd22f710a3c766', 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: 'f17872e37d0b0369061deb508d44ce7ae4943c5b', class: {
1200
1200
  'sd-number-input__content': true,
1201
1201
  'sd-number-input__content--no-stepper': !this.useButton,
1202
- } }, this.useButton && (h("button", { key: '89a68f1264907284d8718c59c42cbcc0d06ec29d', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: '9e9c5f4d33eadf088c6e8c428dd97d2c717905b3', name: "minus", size: iconSize, color: this.isDecrementDisabled()
1202
+ } }, this.useButton && (h("button", { key: 'b513ee5c44e2475ab751dae3a333e95405c9a319', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: '172dcff1a3559008183bed32c30ec02d98c12664', name: "minus", size: iconSize, color: this.isDecrementDisabled()
1203
1203
  ? NUMBER_INPUT_STEPPER.icon.disabled
1204
- : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && h("span", { key: 'b5d2bef21242c1dc65d10f6dcb3b4c50380804d2', class: "sd-number-input__prefix" }, this.inputPrefix), h("input", { key: '2f1d5c24a3462ae5aded71d645317ad84ca2dd6b', 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: {
1204
+ : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && h("span", { key: '24d631ea8330ed6e90f2aa77e46707867ff57539', class: "sd-number-input__prefix" }, this.inputPrefix), h("input", { key: 'ed0c70a534f1f6e246a407073aee9efa3a222b01', 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: {
1205
1205
  textAlign: this.useButton ? 'center' : 'right',
1206
1206
  ...this.inputStyle,
1207
- } }), this.inputSuffix && h("span", { key: '53391ecdede9630774be6891412835dad3975186', class: "sd-number-input__suffix" }, this.inputSuffix), this.useButton && (h("button", { key: '9383cf29b0688252023b6bc9e10189c70f049ccf', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: 'a380dce8f2cf42c2f312657ea8304e94b9af8fe7', name: "add", size: iconSize, color: this.isIncrementDisabled()
1207
+ } }), this.inputSuffix && h("span", { key: '7129df3b5cf544301cadaf5111e98ddcf3e7a340', class: "sd-number-input__suffix" }, this.inputSuffix), this.useButton && (h("button", { key: 'd5cb9acd77be94e494fb4af3b78001cd22dbfe3c', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: 'dba88711bda7f5522425d96187bce402c8516fff', name: "add", size: iconSize, color: this.isIncrementDisabled()
1208
1208
  ? NUMBER_INPUT_STEPPER.icon.disabled
1209
1209
  : NUMBER_INPUT_STEPPER.icon.default }))))));
1210
1210
  }
@@ -1426,7 +1426,7 @@ const SdTextarea = class {
1426
1426
  '--sd-system-size-field-sm-height': 'auto',
1427
1427
  '--sd-system-radius-field-sm': `${TEXTAREA_TOKENS.radius}px`,
1428
1428
  };
1429
- return (h("sd-field", { key: '08375e678b02c61a201b70214772e8a354280601', 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, 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: '5c9462b2b0c8f0078c34b044b8cd626dfd9f18be', class: "sd-textarea__content" }, h("textarea", { key: 'a5f0d448791be4b75388c02e8a356486c0487d78', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readOnly: this.readonly, autofocus: this.autoFocus, maxLength: this.maxLength, rows: this.rows, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.textareaStyle }))));
1429
+ return (h("sd-field", { key: 'dfa331524cbbac728c961c7a27d6c8dbd83853f4', 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, 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: 'bd2d6d4b537364e28992971279d3278021b1ab5a', class: "sd-textarea__content" }, h("textarea", { key: '270d55c84255a43153ed5f5cfdeed586c38d0cf1', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readOnly: this.readonly, autofocus: this.autoFocus, maxLength: this.maxLength, rows: this.rows, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.textareaStyle }))));
1430
1430
  }
1431
1431
  static get watchers() { return {
1432
1432
  "value": [{
@@ -270,7 +270,7 @@ const SdDateRangePickerCalendar = class {
270
270
  '--range-panel-gap': `${RANGE_LAYOUT.panelGap}px`,
271
271
  '--range-divider': RANGE_LAYOUT.divider,
272
272
  };
273
- return (h(Fragment, { key: 'a32cc455c1d5fda2754a64374daa6cd664ccf811' }, h("div", { key: 'beaaa15519e87cf3543981c4b902fe000c945d57', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), h("div", { key: '54ac87b736bd35236b900ca0b34940a82017b0ec', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), h("span", { key: 'f4b585c6a6b680591de74c0f31801578df6629c9', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
273
+ return (h(Fragment, { key: '4502cc08eb9df7c24cdc9f22564fb2a4a0b2736e' }, h("div", { key: '9da4356920cbce83c548a4c5f40cb2af9e36a257', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), h("div", { key: 'a8117206cd3d9368a86f4cc307037461c1314aad', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), h("span", { key: '0f6cbaf53781429b3de08aa992a45f2c26444625', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
274
274
  }
275
275
  static get watchers() { return {
276
276
  "value": [{
@@ -17,7 +17,7 @@ const SdDivider = class {
17
17
  const hostStyle = {
18
18
  '--sd-divider-color': DIVIDER_COLORS.default,
19
19
  };
20
- return (h(Host, { key: '2708ce362531fa5f3658280ba77733c5f9fb8fa6', style: hostStyle }, h("hr", { key: 'e38476a897aa2bae6500316d5961fc9d6d18780d', "aria-orientation": this.vertical ? 'vertical' : 'horizontal' })));
20
+ return (h(Host, { key: '73be9d4cc38b230e4cff7f8ebcdc81bd2d56e0e7', style: hostStyle }, h("hr", { key: 'a4da09faca453df8cb6ea3ed00609d4e0c238a7a', "aria-orientation": this.vertical ? 'vertical' : 'horizontal' })));
21
21
  }
22
22
  };
23
23
  SdDivider.style = sdDividerCss();
@@ -237,18 +237,18 @@ const SdField = class {
237
237
  : {}),
238
238
  }
239
239
  : {};
240
- return (h("div", { key: '45a5353fb451aa829092ca34f3212d6e62f1843a', class: {
240
+ return (h("div", { key: '7673ab0d94a03bcfa42381c961e749cd083d7af0', class: {
241
241
  'sd-field': true,
242
242
  'sd-field--has-label': this.label !== '',
243
243
  'sd-field--has-addon': addon !== '',
244
244
  [this.fieldStatus]: this.fieldStatus !== '',
245
- }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars, ...messageCssVars } }, h("div", { key: '75f3be0dae03f292b66980b7c92d574bd0bda988', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: '0c3bdc72f11481a94bdfef65ac1152c93403f926', class: "sd-field__main" }, h("div", { key: '707215e7087f8bfee3cf53f415caaaed2d37254d', class: {
245
+ }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars, ...messageCssVars } }, h("div", { key: '00c5056105b72f143a8c4249b8cd3b6a60fb6d1d', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: 'e99461246fa8ceadaf7a43f1c62c474caa160972', class: "sd-field__main" }, h("div", { key: '6bf754d3a167b1ca4f23d2e1d260643e278e85f6', class: {
246
246
  'sd-field__control': true,
247
247
  'sd-field__control--has-addon': addon !== '',
248
248
  }, style: this.width !== '' && this.width !== 0
249
249
  ? { width: typeof this.width === 'number' ? `${this.width}px` : this.width }
250
- : {} }, addon && (h("div", { key: '4b96766a728f23d50effc7c4032b12e9fdb2f16d', class: "sd-field__addon" }, this.icon && (h("sd-icon", { key: 'f34105536690750f8b96d50e6a2b1c3c03a6b248', name: this.icon.name, size: this.icon.size ??
251
- 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: '3f7139b64e0f94ff29a3f27b03ae35b3fbfe0202' })), 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))))));
250
+ : {} }, addon && (h("div", { key: '2d9acde5ecaeb32a94e1ba33c408160a2f2da46f', class: "sd-field__addon" }, this.icon && (h("sd-icon", { key: 'a0916124710c29478feffef96efdaffe599d4bc7', name: this.icon.name, size: this.icon.size ??
251
+ 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: '2e4690a4678ca40deb9e023baae24a44fd4da959' })), 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))))));
252
252
  }
253
253
  renderLabel(label) {
254
254
  if (label == null || label === '')
@@ -439,7 +439,7 @@ const SdFloatingPopover = class {
439
439
  }
440
440
  }
441
441
  render() {
442
- return h("slot", { key: 'a560d8d46ef03688ce16a984c54ae23f740e7ef8' });
442
+ return h("slot", { key: '56deedcae378d170d9debca4cf1a07599f31dfc5' });
443
443
  }
444
444
  };
445
445
  SdFloatingPopover.style = sdFloatingPortalCss();
@@ -615,7 +615,7 @@ const SdTooltip = class {
615
615
  const bodyHTML = this.message && this.message.length > 0
616
616
  ? this.message.map(line => `<div>${line}</div>`).join('')
617
617
  : this.slotContentHTML;
618
- return (h(Fragment, { key: '81d582c4c8847a0f57abf632d975461cdf07b535' }, h("div", { key: 'c7515fb866fa85749405bb10512e27575850eb27', ref: el => (this.triggerEl = el), class: triggerClasses, ...divTrigger }, anchorMode ? (h("slot", { name: "anchor" })) : 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: '903aaa3723a119687e5af8120d54fb1b9e43c584', parentRef: anchorMode ? this.triggerEl : this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.tooltipOffset }, h("div", { key: '813e1dbf7f2d8e0378f4fcac1225341aafbd9948', ref: el => (this.menuEl = el), class: {
618
+ return (h(Fragment, { key: 'cd0c166191a9f83a11891786cd246a268d50b349' }, h("div", { key: '9e2872936629b886b779852c51f57874466edfb5', ref: el => (this.triggerEl = el), class: triggerClasses, ...divTrigger }, anchorMode ? (h("slot", { name: "anchor" })) : 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: '2db92e0d56a1a6cee04ab5f23f6bbe00fc279351', parentRef: anchorMode ? this.triggerEl : this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.tooltipOffset }, h("div", { key: 'a4635141d3e9aa630be80b2b6071a5ba16de257d', ref: el => (this.menuEl = el), class: {
619
619
  'sd-floating-menu': true,
620
620
  [`sd-floating-menu--${tooltipType}`]: true,
621
621
  [`sd-floating-menu--${placement}`]: true,
@@ -623,7 +623,7 @@ const SdTooltip = class {
623
623
  }, style: {
624
624
  '--sd-floating-bg': typeConfig.bg,
625
625
  '--sd-floating-content': typeConfig.content,
626
- }, onMouseEnter: () => this.openTooltip(), onMouseLeave: () => !this.useClose && this.startHideTimer() }, h("i", { key: 'd74071d3d236382bc952ad03a05ebd77219b4ddb', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, h(TooltipArrow, { key: '91c35bd2bc22294b7e7998965930219a43799310' })), h("div", { key: '16edd2fc6e9ad02b646c05c6404d3eb79e2a7a71', class: "sd-floating-menu__content", innerHTML: bodyHTML }), this.useClose && (h("sd-ghost-button", { key: 'd234906f7a4a603a8e18cef6da49f9d893adb731', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xxs", onClick: () => this.closeTooltip() })))))));
626
+ }, onMouseEnter: () => this.openTooltip(), onMouseLeave: () => !this.useClose && this.startHideTimer() }, h("i", { key: 'cf7f3186dd7c9cbf001700bd29de05480e807533', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, h(TooltipArrow, { key: '4aca7fbbc159bf61c9488a38431e0bcc40172446' })), h("div", { key: 'ffa09626b16742e6d774944bf8536def2b250519', class: "sd-floating-menu__content", innerHTML: bodyHTML }), this.useClose && (h("sd-ghost-button", { key: '934529cc6c8c4a46a09b7dd03baec6666029f169', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xxs", onClick: () => this.closeTooltip() })))))));
627
627
  }
628
628
  };
629
629
  SdTooltip.style = sdTooltipCss();
@@ -1,4 +1,4 @@
1
- import { r as registerInstance, c as createEvent, a as getElement, h } from './index-BZ5lcC25.js';
1
+ import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-BZ5lcC25.js';
2
2
 
3
3
  const ghostButton = {
4
4
  xxs: {
@@ -471,7 +471,7 @@ const SdPortal = class {
471
471
  this.close.emit();
472
472
  }
473
473
  render() {
474
- return h("slot", { key: '0b01050e7c1ab2b648bf1118aec27140ff1aed4c' });
474
+ return h("slot", { key: '623ee5423b145701ba9dd801d44874214f7a76e3' });
475
475
  }
476
476
  static get watchers() { return {
477
477
  "open": [{
@@ -656,7 +656,7 @@ const TAG_CONFIG = Object.fromEntries(TAG_SHAPES.flatMap(shape => TAG_SIZES.flat
656
656
  }))));
657
657
  const isTagName = (value) => Object.prototype.hasOwnProperty.call(TAG_CONFIG, value);
658
658
 
659
- 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)}`;
659
+ const sdTagCss = () => `sd-tag{display:inline-flex;width:var(--sd-tag-width, fit-content);height:fit-content}.sd-tag{display:inline-flex;width:100%;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)}`;
660
660
 
661
661
  const SdTag = class {
662
662
  constructor(hostRef) {
@@ -671,6 +671,8 @@ const SdTag = class {
671
671
  // 아이콘이 좌측 배치되는 게 자연스러운 default. prop 이름 변경(isRight 등)은 public API breaking 이라 별도 이슈로 분리.
672
672
  /** true이면 아이콘을 레이블 왼쪽에 배치 */
673
673
  isLeft = true;
674
+ /** 태그 너비 (숫자면 px, 문자열이면 그대로 적용). 미지정 시 콘텐츠 크기(fit-content) */
675
+ width = '';
674
676
  componentWillLoad() {
675
677
  this.name = this.name ?? 'square_sm_grey';
676
678
  }
@@ -688,10 +690,16 @@ const SdTag = class {
688
690
  return null;
689
691
  return h("sd-icon", { class: "sd-tag__icon", name: this.icon, size: size, color: color });
690
692
  }
693
+ get resolvedWidth() {
694
+ if (this.width === '' || this.width === 0)
695
+ return undefined;
696
+ return typeof this.width === 'number' ? `${this.width}px` : this.width;
697
+ }
691
698
  render() {
692
699
  const config = this.resolvedConfig;
693
700
  const iconNode = this.renderIcon(config.icon, config.iconSize);
694
- return (h("span", { key: '6cbf6fb37f0e926e604b24d482c8d648079b41dd', class: "sd-tag", style: {
701
+ const width = this.resolvedWidth;
702
+ return (h(Host, { key: '37bb1fefd51f583b0a9dde9fe46cf843a48e8e13', style: width != null ? { '--sd-tag-width': width } : undefined }, h("span", { key: 'e996471849834802eaeff02abaadee1a2addac4f', class: "sd-tag", style: {
695
703
  '--sd-tag-background': config.background,
696
704
  '--sd-tag-content': config.content,
697
705
  '--sd-tag-height': config.height,
@@ -701,7 +709,7 @@ const SdTag = class {
701
709
  '--sd-tag-font-weight': config.fontWeight,
702
710
  '--sd-tag-line-height': config.lineHeight,
703
711
  '--sd-tag-radius': config.radius,
704
- }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, h("span", { key: 'e0e9410afe716341dc7fb7891bb46c85cde9d51b', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
712
+ }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, h("span", { key: '2e63073d1950046747521071ba5db5f9a404acef', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode)));
705
713
  }
706
714
  };
707
715
  SdTag.style = sdTagCss();
@@ -50,7 +50,7 @@ const SdLinearProgress = class {
50
50
  clipPath: `inset(0 ${100 - this.clampedValue}% 0 0)`,
51
51
  };
52
52
  const valueText = `${Math.round(this.clampedValue)}%`;
53
- return (h(Host, { key: '8ca7707d3d3da0e761b6534c1301dde83ee82cf5', style: hostStyle }, h("div", { key: '0cee50f047b64cb4bdf0512aaa00cbfe2257bd8b', class: "sd-linear-progress__track" }, h("div", { key: 'f9e6c3f21edfcf583d2254f72a2f33359b5cc0b6', class: "sd-linear-progress__fill", style: fillStyle }), !this.indeterminate && (h("span", { key: '6586b4d39c2e8535dfee352ce78f0ab7f82c8c52', class: "sd-linear-progress__value sd-linear-progress__value--on-track" }, valueText)), !this.indeterminate && (h("span", { key: '9e35001008fb5c38094dcb22c0961c072e9603a4', class: "sd-linear-progress__value sd-linear-progress__value--on-fill", style: valueOnFillStyle }, valueText))), this.label && h("span", { key: '800e17a8a527e45134e8d4049bb133960bc0219d', class: "sd-linear-progress__label" }, this.label)));
53
+ return (h(Host, { key: '2c2024fc61418c73913dc0333ddef93e667fa6f0', style: hostStyle }, h("div", { key: '44fac7a5a5795451ab8fc7c5538161cb974c3b4f', class: "sd-linear-progress__track" }, h("div", { key: '050f19c7c2ae6f14f744a1a33f933b97d9d5d448', class: "sd-linear-progress__fill", style: fillStyle }), !this.indeterminate && (h("span", { key: '70233788c6f8b5d89ec1123e40cc97c89a9d20c4', class: "sd-linear-progress__value sd-linear-progress__value--on-track" }, valueText)), !this.indeterminate && (h("span", { key: 'f2df0a4d96ca1224b902a360f4f1ef4856405ed6', class: "sd-linear-progress__value sd-linear-progress__value--on-fill", style: valueOnFillStyle }, valueText))), this.label && h("span", { key: '00d72060f073ad6e046d7c68f248df6622f87088', class: "sd-linear-progress__label" }, this.label)));
54
54
  }
55
55
  };
56
56
  SdLinearProgress.style = sdLinearProgressCss();
@@ -18,10 +18,10 @@ const SdLoadingContainer = class {
18
18
  this.visible = false;
19
19
  }
20
20
  render() {
21
- return (h("div", { key: '19729567b6041e3220c11c569be814f51b31c388', class: {
21
+ return (h("div", { key: 'be8150fa2321621b2761f886fe96dc4a9177de64', class: {
22
22
  'sd-loading-container': true,
23
23
  'sd-loading-container--visible': this.visible,
24
- }, "aria-hidden": this.visible ? 'false' : 'true' }, h("div", { key: '50e6ac53e4515dc305e7a840362f2beb30714674', class: "sd-loading-container__backdrop" }), h("div", { key: '2f0943599188cb0800139f5ab543bab679f3bfee', class: "sd-loading-container__content" }, h("sd-circle-progress", { key: 'a5977418272a167fe76073734be5a36ffa3136ab', indeterminate: true, type: "inverse" }), this.message && h("p", { key: '9285adc663909fafb762e84ad5dd108c6ba2c972', class: "sd-loading-container__message" }, this.message))));
24
+ }, "aria-hidden": this.visible ? 'false' : 'true' }, h("div", { key: '268f97c036ab8a15c465469ee467aa6a962e9bf0', class: "sd-loading-container__backdrop" }), h("div", { key: 'e7f8fcbffdfe462890706e896a476de7f734166e', class: "sd-loading-container__content" }, h("sd-circle-progress", { key: '60e52996e7ba895a0375f344431e721c8bd34753', indeterminate: true, type: "inverse" }), this.message && h("p", { key: 'c7cbf5b183a22a3b9f693bb427057d3fa9611724', class: "sd-loading-container__message" }, this.message))));
25
25
  }
26
26
  };
27
27
  SdLoadingContainer.style = sdLoadingContainerCss();
@@ -156,13 +156,13 @@ const SdPagination = class {
156
156
  '--sd-pagination-bg-selected': PAGINATION_COLORS.bgSelected,
157
157
  '--sd-pagination-item-width': `${this.buttonWidth}px`,
158
158
  };
159
- return (h("div", { key: '5a1ebb6aeb6732cd3b6133cedba47aeedf620291', class: {
159
+ return (h("div", { key: '1ab90aa479a2ec1985a79efbcb48f0453ce670a9', class: {
160
160
  'sd-pagination': true,
161
161
  'sd-pagination--simple': this.simple,
162
- }, style: cssVars }, h("div", { key: 'a4856d8ffde66402eae909ad9f636f3b13f1b5d7', 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: {
162
+ }, style: cssVars }, h("div", { key: 'd5e9fdd9f221536f5eb404095b2b6d052aaa6a9e', 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: {
163
163
  'sd-pagination__item': true,
164
164
  'sd-pagination__item--selected': this.currentPage === n,
165
- }, onClick: () => this.handlePageChange(n) }, n))))), h("div", { key: 'fd1d6d0ba1c143ca4f9692f1c604f0e0fc0730db', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
165
+ }, onClick: () => this.handlePageChange(n) }, n))))), h("div", { key: 'a48d39b7db769a39f58e4b399aa7bb1d15748934', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
166
166
  }
167
167
  };
168
168
  SdPagination.style = sdPaginationCss();
@@ -218,9 +218,9 @@ const SdTbody = class {
218
218
  }
219
219
  }
220
220
  render() {
221
- return (h(Host, { key: 'af02c942fe83b515e2065840ff3b83ad22fd5542', slot: `${this.tableId}-body` }, h("tbody", { key: '6f1b771c2a21ff087b5feb32b19e0fb4b0abed35', class: { tbody: true } }, [
221
+ return (h(Host, { key: 'e8d3873248658b9899e4daf1d6ffb1c60ad658e4', slot: `${this.tableId}-body` }, h("tbody", { key: 'ae9617a588e45bce5ffaa50bc300fdd038b1db1e', class: { tbody: true } }, [
222
222
  this.topSpacerHeight > 0 && (h("tr", { key: "spacer-top", class: "tbody__spacer", style: { height: `${this.topSpacerHeight}px`, display: 'block' } })),
223
- h("slot", { key: '0c7c439b269527f9bfbb00bf60a1aec10646da56' }),
223
+ h("slot", { key: '1bd8ca3179ad36584813c14e1df1c1c175fcf77b' }),
224
224
  this.bottomSpacerHeight > 0 && (h("tr", { key: "spacer-bottom", class: "tbody__spacer", style: { height: `${this.bottomSpacerHeight}px`, display: 'block' } })),
225
225
  ])));
226
226
  }
@@ -478,16 +478,16 @@ const SdThead = class {
478
478
  '--table-border-color': TABLE_BORDER.color,
479
479
  '--table-border-width': `${TABLE_BORDER.width}px`,
480
480
  };
481
- return (h(Host, { key: '521fa63c751f74ba620aad7355127c7d7fe8217c', slot: `${this.tableId}-head`, style: headStyle }, h("thead", { key: '226911deb4a0a0898e064875fbba7aa1d326634b', class: {
481
+ return (h(Host, { key: '89bb8a5873c480544cc6a298ca9738577469ae43', slot: `${this.tableId}-head`, style: headStyle }, h("thead", { key: '390aad02b5e42bc39c9eb72091b1bcb54eae8098', class: {
482
482
  'thead': true,
483
483
  'thead--sticky': this._stickyHeader,
484
- } }, h("tr", { key: 'f60653ae5dc8b773b73ab05f9631358272e90df5', class: "tr" }, this._selectable && (h("th", { key: '7826b9c1fa8ec84f83825f8380e7bcd014d3782a', class: {
484
+ } }, h("tr", { key: 'a5889ed5b9fe810590f1c1d869aa6b72dabe195b', class: "tr" }, this._selectable && (h("th", { key: '8cf6b81cd5b02cf08597b1b4f8d1b858f10d9403', class: {
485
485
  'th': true,
486
486
  'th--selected': true,
487
487
  'sticky-left': true,
488
488
  'sticky-left-edge': stickyLeftCount === 0,
489
489
  'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
490
- }, style: { '--sticky-left-offset': '0px' } }, h("sd-checkbox", { key: '412a9ee49954014dc45dd0a2444642a549782d8e', value: this.getIsAllChecked(), disabled: safeRows.length === 0, onSdUpdate: (e) => this.handleSelectAll(e.detail) }), h("div", { key: '116b6c2a55cc7553090b39338e251101c1de057b', class: "th__bar" }))), stickyLeftCols.map((col, idx) => (h("th", { key: col.name, class: {
490
+ }, style: { '--sticky-left-offset': '0px' } }, h("sd-checkbox", { key: '94b92d786fde6d5382e7955f97e54915597c04ad', value: this.getIsAllChecked(), disabled: safeRows.length === 0, onSdUpdate: (e) => this.handleSelectAll(e.detail) }), h("div", { key: 'fefd1a1de41b524e0525e60684bec2fb85ac9db6', class: "th__bar" }))), stickyLeftCols.map((col, idx) => (h("th", { key: col.name, class: {
491
491
  'th': true,
492
492
  [`${col.thClass}`]: Boolean(col.thClass),
493
493
  'sticky-left': true,
@@ -107,7 +107,7 @@ const SdPopup = class {
107
107
  ...DEFAULT_SUBMIT_BUTTON_PROPS,
108
108
  ...this.submitButtonProps,
109
109
  };
110
- return (h("div", { key: '9138fc14fe3accf97fe3a5bae4dd089d658a2198', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, h("header", { key: '545591be690bc16f8b78875548dcd13ffaaaa521', class: "sd-popup__header" }, h("h2", { key: '2a9e959ecac6a0be2bd97019e74bee23ab0c2ecc', class: "sd-popup__title" }, this.popupTitle)), h("div", { key: 'f6e1053a8af7b1c87cb4adab5f8f5d51f970bc82', class: "sd-popup__body" }, h("slot", { key: '9f66b2873cb0a8e7409709a400d91fc569da12b5' })), this.useFooter && (h("footer", { key: 'fce908fd8f5bab94fee22184287072debce1b3ba', class: "sd-popup__footer" }, h("div", { key: 'c4db14ca27f56154cfb01728133bd3cdbd1ce7e7', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, h("slot", { key: '7b9e920b1c322eb28de40fb2e9b02f03aa9b64e8', name: "footer-left" })), h("sd-button", { key: '87cb9bcbc9fb1657d1021609ce855118bd7c9b96', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
110
+ return (h("div", { key: '5593e53ba5d8c098c3a3fea4a4ca20769457e322', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, h("header", { key: 'e940d310e28c6b5ec34cc46b1a0aa3c8d7c37aed', class: "sd-popup__header" }, h("h2", { key: '367b21377987bb85ff453d05f314ac2cd76ac6be', class: "sd-popup__title" }, this.popupTitle)), h("div", { key: '58c31c4d783cf957a6e84bc17f63a2ccb188c1e0', class: "sd-popup__body" }, h("slot", { key: '712ccc5b1e2e3ba24757e8a0d258b8af40a1dcc8' })), this.useFooter && (h("footer", { key: 'ff34ebe19afaceb1594726296245ec2a12ce2eec', class: "sd-popup__footer" }, h("div", { key: 'cfefab877abd29701e17ed7381ace27db0198ab6', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, h("slot", { key: '2947626fed14fba3778ddede7e1c8a868b7aba4a', name: "footer-left" })), h("sd-button", { key: 'ed0b0d43812d5d2ca28993b0f8ff2363684a9016', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
111
111
  }
112
112
  };
113
113
  SdPopup.style = sdPopupCss();
@@ -86,7 +86,7 @@ const SdSelectListItem = class {
86
86
  return (
87
87
  // 키보드 네비게이션은 부모 listbox 의 ArrowUp/Down + Enter 가 담당. 항목 자체는 role=option, tabindex=-1 으로 표시.
88
88
  // eslint-disable-next-line jsx-a11y/click-events-have-key-events
89
- h("div", { key: '2bec32f64859ef0e39928d4288cba3c727e16cf1', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
89
+ h("div", { key: 'ffd420e1d1a6ff395ed3fff94cbaba66f71644ac', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
90
90
  'sd-select-list-item': true,
91
91
  'sd-select-list-item--group': isGroup,
92
92
  'sd-select-list-item--depth1-group': isDepth1Group,
@@ -96,7 +96,7 @@ const SdSelectListItem = class {
96
96
  'sd-select-list-item--focused': this.isFocused,
97
97
  'sd-select-list-item--selectable': this.isSelectable && !this.option.disabled,
98
98
  'sd-select-list-item--disabled': !!this.option.disabled,
99
- }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (h("sd-checkbox", { key: 'fb6d2ed50e6d24d0491200b5be2cb3ab97df1b04', 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: '52162297e94d672128ea0a2343c6baf6e04ee78c', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
99
+ }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (h("sd-checkbox", { key: '4bc492e2021f255cb87344bd0498023b50d89c8a', 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: '34a7671fa3f6ec1bff7c302f02bb4bfd7a113ce5', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
100
100
  }
101
101
  };
102
102
  SdSelectListItem.style = sdSelectListItemCss();
@@ -153,15 +153,15 @@ const SdSelectListItemSearch = class {
153
153
  clearTimeout(this.debounceTimer);
154
154
  }
155
155
  render() {
156
- return (h("div", { key: '4b0eefc35e86aa2f320ce9410185b64323d60e45', class: {
156
+ return (h("div", { key: 'e18205c606d8a47de3cd98be6ddad0c9a1ed4f5a', class: {
157
157
  'sd-select-list-item-search': true,
158
158
  'sd-select-list-item-search--scrolled': this.isScrolled,
159
- } }, h("div", { key: 'b724cb790c3f8d5eb2ecb899c28dbddf9acad631', class: "sd-select-list-item-search__inner" }, h("sd-icon", { key: '18ba78adbc46e9cc0f3a4e355996dba25fc1c8e9', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), h("input", { key: 'c2a2df9bc2dfe692b1f5732706ce1208a005aab4', ref: el => {
159
+ } }, h("div", { key: '220a830db70628b4a240d19791db5090c6112cbf', class: "sd-select-list-item-search__inner" }, h("sd-icon", { key: 'f7680be3c49045f318887a2cd955e84ee4ea6646', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), h("input", { key: '94face3b593e33db6230ede587de77e5cb158774', ref: el => {
160
160
  this.inputEl = el;
161
- }, type: "text", class: "sd-select-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), h("button", { key: '7d9d3e924a24ddecbeb4bf5316c2c791913ac782', type: "button", class: {
161
+ }, type: "text", class: "sd-select-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), h("button", { key: '38f9de8c7ebf98aea2ef03ce9ddbb03cb9f29f81', type: "button", class: {
162
162
  'sd-select-list-item-search__clear': true,
163
163
  'sd-select-list-item-search__clear--hidden': this.searchText === '',
164
- }, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, h("sd-icon", { key: '80d52b79d989e51513653655adf6604f352c43b0', name: "close", size: 12, color: "#888888" })))));
164
+ }, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, h("sd-icon", { key: 'fe32e9e44afbaa0f7ad07db665022839facbaf83', name: "close", size: 12, color: "#888888" })))));
165
165
  }
166
166
  };
167
167
  SdSelectListItemSearch.style = sdSelectListItemSearchCss();
@@ -294,15 +294,15 @@ const SdSelect = class {
294
294
  this.closeDropdown();
295
295
  },
296
296
  };
297
- return (h("sd-field", { key: '5dceeb2361339527e65657f66966a5b843f7a03b', 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, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
297
+ return (h("sd-field", { key: '0864fe68a337d4bab526fa61570e856c8eff6d1c', 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, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
298
298
  this.hovered = true;
299
299
  }, onMouseLeave: () => {
300
300
  this.hovered = false;
301
- } }, h("div", { key: '2fe78a384fef6083a08709fa72d98d2b2e399580', class: "sd-select", ref: el => {
301
+ } }, h("div", { key: '781819ed75f47395e96fd6808766e6bb8c246fa5', class: "sd-select", ref: el => {
302
302
  this.triggerRef = el;
303
- } }, h("sd-select-trigger", { key: 'be647e0ba29295be5a888d92cb18c273980ec38f', ref: el => {
303
+ } }, h("sd-select-trigger", { key: '8cebad98f0cd4b333954a55857aec3fbb6f3d283', ref: el => {
304
304
  this.triggerComponentRef = el;
305
- }, displayText: this.displayText, placeholder: this.placeholder ?? '선택', disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '2d519a9957ff7201519502a2053785cc669642c2', ...portalProps }, h("sd-select-listbox", { key: '33377475b06c3be1f6ba7e6909a9bfb938144b3a', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, useSearch: this.useSearch, useSelectAll: this.useSelectAll, triggerWidth: this.dropdownWidth || this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
305
+ }, displayText: this.displayText, placeholder: this.placeholder ?? '선택', disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: 'fe68f0b01256e1c1d3200f9f5fd17c2adf97f0e0', ...portalProps }, h("sd-select-listbox", { key: '98368524ef06a6d752f2313756a89ae6e8c05955', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, useSearch: this.useSearch, useSelectAll: this.useSelectAll, triggerWidth: this.dropdownWidth || this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
306
306
  }
307
307
  static get watchers() { return {
308
308
  "isOpen": [{
@@ -679,9 +679,9 @@ const SdSelectListbox = class {
679
679
  '--listbox-max-height': this.maxHeight ?? '260px',
680
680
  '--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
681
681
  };
682
- return (h("div", { key: 'df4d19f8807ce87384cad18ca981e0792da35682', class: "sd-select-listbox", style: cssVars }, this.showSearch && (h("sd-select-list-item-search", { key: 'b950890a9138fa5ab7f0df7c1d07bbea65140e67', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), h("div", { key: '1aeaf552893becedf8394c1e9af8ef7119e70fdb', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
682
+ return (h("div", { key: 'bb8c7f22a164d29e30d2f9da7740883daef4fc27', class: "sd-select-listbox", style: cssVars }, this.showSearch && (h("sd-select-list-item-search", { key: 'ac1b06b12ec20d2b9d57ca3b4074b3752b5da5e1', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), h("div", { key: '2c7735e7098090762f573d63c2673d6face702c1', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
683
683
  this.listEl = el;
684
- } }, this.showSelectAll && (h("sd-select-list-item", { key: '83329f2d454d116d64155ef8a83c076e27cdc7b0', option: SdSelectListbox.SELECT_ALL_OPTION, depth: 1, isSelected: this.selectAllState, isFocused: this.isOptionFocused(SdSelectListbox.SELECT_ALL_OPTION), useCheckbox: true, onSdListItemClick: this.handleSelectAllClick, onMouseEnter: () => this.handleOptionHover(SdSelectListbox.SELECT_ALL_OPTION) })), this.isEmpty ? (h("div", { class: "sd-select-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (h("sd-select-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) })))))));
684
+ } }, this.showSelectAll && (h("sd-select-list-item", { key: '5377511fd55f0d34056ad64707265dd2cc86afc4', option: SdSelectListbox.SELECT_ALL_OPTION, depth: 1, isSelected: this.selectAllState, isFocused: this.isOptionFocused(SdSelectListbox.SELECT_ALL_OPTION), useCheckbox: true, onSdListItemClick: this.handleSelectAllClick, onMouseEnter: () => this.handleOptionHover(SdSelectListbox.SELECT_ALL_OPTION) })), this.isEmpty ? (h("div", { class: "sd-select-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (h("sd-select-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) })))))));
685
685
  }
686
686
  static get watchers() { return {
687
687
  "searchKeyword": [{
@@ -749,7 +749,7 @@ const SdSelectTrigger = class {
749
749
  ? SELECT_COLORS.icon.disabled
750
750
  : SELECT_COLORS.icon.default,
751
751
  };
752
- return (h("div", { key: 'bd967efa32ed0692512e549db9f852c7c08d5dcd', ref: el => {
752
+ return (h("div", { key: 'b2f140907d6e4454a3adfb9d3dd9babd9058c178', ref: el => {
753
753
  this.triggerEl = el;
754
754
  }, role: "button", "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', tabindex: this.disabled ? -1 : 0, class: {
755
755
  'sd-select-trigger': true,
@@ -760,7 +760,7 @@ const SdSelectTrigger = class {
760
760
  e.preventDefault();
761
761
  this.handleClick();
762
762
  }
763
- }, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("div", { key: '04a8568ac5d109f0635d3474a394030d630f441e', class: "sd-select-trigger__content" }, hasValue && isHtmlLabel(this.displayText) ? (h("span", { class: "sd-select-trigger__text", ref: el => el && (el.innerHTML = sanitizeInlineHtml(this.displayText)) })) : (h("span", { class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택'))), h("sd-icon", { key: 'ba256d1a780f7805c81330a6ba4e010c458be57e', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
763
+ }, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("div", { key: '6803bc50c5f62dce1b1e9d874559f8ca5fca7b75', class: "sd-select-trigger__content" }, hasValue && isHtmlLabel(this.displayText) ? (h("span", { class: "sd-select-trigger__text", ref: el => el && (el.innerHTML = sanitizeInlineHtml(this.displayText)) })) : (h("span", { class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택'))), h("sd-icon", { key: '397264b3179fb6699c1ee5454f76ac9d0779488c', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
764
764
  'sd-select-trigger__icon': true,
765
765
  'sd-select-trigger__icon--open': this.isOpen,
766
766
  } }))));
@@ -107,7 +107,7 @@ const SdSwitch = class {
107
107
  '--sd-switch-line-height': `${SWITCH_TYPOGRAPHY.lineHeight}px`,
108
108
  '--sd-switch-text-decoration': SWITCH_TYPOGRAPHY.textDecoration,
109
109
  };
110
- return (h("label", { key: 'f63559e7ee0523e475e26e80bc568d9b79f03c2a', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, h("input", { key: 'f1d0697ba500514923aeb6d514761641e34e6080', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), h("div", { key: '988ccaf702365c76c76e11246e5de7035509cfa0', class: "sd-switch__track" }, h("div", { key: '5a413a7e89054f5f93821f098f4d3173c09ce180', class: "sd-switch__knob" })), this.label && h("span", { key: 'b1674d9039d0d1e9dc9c01525fc2e6b97c139ed1', class: "sd-switch__label" }, this.label)));
110
+ return (h("label", { key: 'ae476f0bb6600cdb10bafd1a06ced3e60d50a2f6', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, h("input", { key: '765320376e0cd0ec82b980a264b979c381907f75', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), h("div", { key: 'f00db86513aa3da5c17a5a7e13d5928806a6fc0a', class: "sd-switch__track" }, h("div", { key: '12f2f817acace26a8cbfc9075e0319f3e5c2ada4', class: "sd-switch__knob" })), this.label && h("span", { key: '24598221b90e8ea9504ff80a464a10e3e5310e98', class: "sd-switch__label" }, this.label)));
111
111
  }
112
112
  };
113
113
  SdSwitch.style = sdSwitchCss();
@@ -878,25 +878,25 @@ const SdTable = class {
878
878
  '--table-selectable-width': `${TABLE_SELECTABLE_COLUMN_WIDTH}px`,
879
879
  '--table-host-height': hostHeight,
880
880
  };
881
- return (h(Host, { key: '288633055ee4be465a96964b11d6c032fecd603f', style: hostStyle }, h("div", { key: 'ab9878f8515bddc3058aafb1806310677fc9f360', class: "sd-table__container", style: {
881
+ return (h(Host, { key: 'd080b561e43c55d34a5f1f6571991183ebdd39b7', style: hostStyle }, h("div", { key: '0ef7831905dca8fde2bb8eb6cde81e1fd9706074', class: "sd-table__container", style: {
882
882
  '--table-width': this.width,
883
883
  '--pagination-height': `${paginationHeight}px`,
884
- } }, h("div", { key: '9f7f16a5cbf27f32a2209586f5b2604066bba4b4', class: {
884
+ } }, h("div", { key: 'c6a836574f4b4c3cd72a3718061dcf727d1ec823', class: {
885
885
  'sd-table__wrapper': true,
886
886
  'sd-table__wrapper--radius-useTop': this.radius === 'useTop',
887
887
  'sd-table__wrapper--radius-full': this.radius === 'full',
888
- } }, h("div", { key: 'c16e48a6dc55ddcf398a7053a93d6e1595fc83da', class: {
888
+ } }, h("div", { key: '8343d8c82c4575733254ad92c968fbbb1588af1f', class: {
889
889
  'sd-table__scroll-container': true,
890
890
  'sd-table__scroll-container--loading': this.isLoading,
891
891
  'sd-table__scroll-container--no-data': isNoData,
892
- } }, this.isLoading && (h("div", { key: '1bc3cd25cbd34d912aee00dc43ad961f442a8d2a', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, h("sd-circle-progress", { key: '3c157990784d6f9e58fef6ff0e6b36ffd87d3a0d', indeterminate: true }))), isNoData && (h(h.Fragment, null, h("div", { key: 'ebb3e4560cc9729d496110e4f159a25737e26bca', class: "sd-table__no-data-header-overlay" }), h("div", { key: 'c9b02b2aef01542a2fe5be0578d31ce72566bff6', class: "sd-table__no-data" }, h("div", { key: '6ab6d9b90ef703b4865eedbf19deff2a04e9d278', class: "sd-table__no-data-content", ref: el => {
892
+ } }, this.isLoading && (h("div", { key: 'a6e049c2c1f5f825d874f25e184efb1915713074', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, h("sd-circle-progress", { key: 'ea110a9e185c3af02c9d0da3c2c36bd675952696', indeterminate: true }))), isNoData && (h(h.Fragment, null, h("div", { key: '56861d20b5bd57ed3f43f5774e67cc4ae7e6c947', class: "sd-table__no-data-header-overlay" }), h("div", { key: '19e463e0524b09ca72ba457b66f97dfd97fddf95', class: "sd-table__no-data" }, h("div", { key: 'ed0c669a55a562772d37d89f7f332759a73fbab6', class: "sd-table__no-data-content", ref: el => {
893
893
  this.noDataContentEl = el;
894
894
  if (el)
895
895
  this.syncNoDataContentObserver();
896
- } }, h("slot", { key: '072b90261f1a0817ccc20d8d5d5346bdcd223304', name: "no-data" }, h("span", { key: 'bbef2b4c13f8cf7736f02b11d149fe00af3cb567' }, this.resolvedNoDataLabel)))))), h("table", { key: '2d7beab7b8fd42f5bfc4b2b5c9538e6cd7a08b2a', class: this.tableClasses }, this.autoThead ? (h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }, h("sd-thead", { rows: this.rows ?? [] }))) : (h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange })), this.autoTbody ? (h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }, h("sd-tbody", { rows: this.rows ?? [] }, this.renderAutoRows()))) : (h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }))))), this.pagination &&
896
+ } }, h("slot", { key: '06998e931804fb94b95df49a5c4b6c5976cefe41', name: "no-data" }, h("span", { key: '4f639ae85d63f516f593f2d88d788f96ba7c538f' }, this.resolvedNoDataLabel)))))), h("table", { key: 'a32058798111bfa84bf81279bcf424d2423cebfa', class: this.tableClasses }, this.autoThead ? (h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }, h("sd-thead", { rows: this.rows ?? [] }))) : (h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange })), this.autoTbody ? (h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }, h("sd-tbody", { rows: this.rows ?? [] }, this.renderAutoRows()))) : (h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }))))), this.pagination &&
897
897
  this.pagination.rowsPerPage > 0 &&
898
898
  this.rowCount > 0 &&
899
- !this.useVirtualScroll && (h("div", { key: 'ee81359d024a466a2730c2e7df7a4a0f2b319de3', class: "sd-table__pagination" }, h("sd-pagination", { key: '069c72080181324d82c9ef207398e11d7766cb34', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (h("sd-select", { key: 'ce1798a0c99cff78318087d25bfc1ece86993e4a', value: this.useInternalPagination
899
+ !this.useVirtualScroll && (h("div", { key: '9d1c500b147c2b11ea2df7cb095d9b28527b6902', class: "sd-table__pagination" }, h("sd-pagination", { key: 'c476d8326991890de9fd82311b0c90f0d4b92bb0', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (h("sd-select", { key: '275dfb2c4c3bb4c76ce71c123795d967aa155bf8', value: this.useInternalPagination
900
900
  ? this.innerRowsPerPage
901
901
  : this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", emitValue: true, onSdUpdate: e => {
902
902
  if (!this.isRowsPerPageValue(e.detail))
@@ -205,7 +205,7 @@ const SdTabs = class {
205
205
  };
206
206
  }
207
207
  render() {
208
- return (h("div", { key: 'c824bcceda28b2591d57e713ae49f5f8260043c4', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
208
+ return (h("div", { key: 'f43d5e2e441e11b57d488f8fe612a4e555006c2e', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
209
209
  const badgeName = this.getBadgeName(tab);
210
210
  return (h("div", { key: `tab-${index}`, role: "tab", tabindex: 0, "aria-selected": tab.value === this.value ? 'true' : 'false', class: this.getTabClasses(tab), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab), onKeyDown: e => {
211
211
  if (e.key === 'Enter' || e.key === ' ') {
@@ -165,7 +165,7 @@ const SdTd = class {
165
165
  }
166
166
  }
167
167
  render() {
168
- return (h(Host, { key: 'a8b2ea05cfaa821b1e4766657cce6a2b7a399881', class: { [`align-${this.align}`]: Boolean(this.align) } }, h("slot", { key: '7fa181915d15192257bc38500787207810ec2739' })));
168
+ return (h(Host, { key: '28d45d8cd629c6cdd826834cbae719fd7c851511', class: { [`align-${this.align}`]: Boolean(this.align) } }, h("slot", { key: '0bab0005e4513464ad18698c111a55eb684434e9' })));
169
169
  }
170
170
  static get watchers() { return {
171
171
  "field": [{
@@ -241,7 +241,7 @@ const SdToastContainer = class {
241
241
  const activeToasts = toasts.filter(t => t.state !== 'exiting').reverse();
242
242
  const indexMap = new Map();
243
243
  activeToasts.forEach((t, i) => indexMap.set(t.id, i));
244
- return (h("div", { key: '6a6db296cca6ee2b3f1f5ba1b2014f3787fd6ee0', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
244
+ return (h("div", { key: '1e9af4dd46dd901ba903518c1425ce0bc723e4b4', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
245
245
  this.expanded = true;
246
246
  this.pauseTimers();
247
247
  }, onMouseLeave: () => {
@@ -91,12 +91,12 @@ const SdToast = class {
91
91
  const linkColor = typeConfig.linkColor ?? typeConfig.content;
92
92
  const useDefaultCloseIntent = ['default', 'caution', 'info'].includes(this.type);
93
93
  const buttonName = TOAST_BUTTON_NAME_BY_TYPE[this.type] ?? TOAST_BUTTON_NAME_BY_TYPE.default;
94
- return (h("div", { key: '240ed7553fa03d18bb4384b1192d16a821be5832', style: {
94
+ return (h("div", { key: '3d7a3fe3647010a8a96246ef3cdbfdf1550c0a91', style: {
95
95
  '--sd-toast-bg': typeConfig.bg,
96
96
  '--sd-toast-text': typeConfig.content,
97
97
  '--sd-toast-icon': iconColor,
98
98
  '--sd-toast-link': linkColor,
99
- } }, h("div", { key: 'bdb9a45473dcab86e2dd8bb6321e7b717f93b784', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (h("div", { key: '2a02e47336cd6a46c7cc3560f3f82d4f10a3d211', class: "sd-toast__icon" }, h("sd-icon", { key: '872cfb213c3a080fc1e5458ce53efa04c1fa8840', name: this.icon, size: iconSize, color: iconColor }))), h("div", { key: '3a22f7518f63676e22c4faeb76873c31d6cf6b11', class: "sd-toast__content" }, h("span", { key: 'dd6a533b60c07bdcbdc80090d61bdf29b8879609', class: "sd-toast__message" }, this.message)), this.link && (h("a", { key: '45efddf62b906e8f0b2136ad3d1131204d0b9125', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (h("sd-button", { key: '3729f4f21ba7e59c2702137053de946e284b226a', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (h("sd-ghost-button", { key: 'd7f0f670aef527be6253cd70bd2b19a900ccaddd', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
99
+ } }, h("div", { key: 'a863ff763bced7656cedc69f3598b3371fc13059', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (h("div", { key: '7606930ad68ab81543a719db8abb61055fdaf97d', class: "sd-toast__icon" }, h("sd-icon", { key: '9b75fb05ab26ddab43b677482a026b5860613e07', name: this.icon, size: iconSize, color: iconColor }))), h("div", { key: '5fb10f690ad560f0be74b5bf6afd288318e22082', class: "sd-toast__content" }, h("span", { key: 'c474a5e1f215a19e47a89ba154f6149e0a875f61', class: "sd-toast__message" }, this.message)), this.link && (h("a", { key: 'a0dcbba791c123776ccb6de62e169359777b3bd2', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (h("sd-button", { key: 'b85f734cbe429207c028602b29bd5f7fa78f7910', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (h("sd-ghost-button", { key: '09cb6b946c18c1c079b036799272d7bc7bdb6480', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
100
100
  }
101
101
  };
102
102
  SdToast.style = sdToastCss();
@@ -122,7 +122,7 @@ const SdToggle = class {
122
122
  '--sd-toggle-content-select': TOGGLE_COLORS.content.select,
123
123
  '--sd-toggle-content-disabled': TOGGLE_COLORS.content.disabled,
124
124
  };
125
- return (h("label", { key: 'f5bc6364e15bfd720d639959d4b8eca1faf022ff', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, h("input", { key: 'e6046c1887bac5fc46dfe94d065c4e782090997f', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
125
+ return (h("label", { key: 'b25e66cadfeee2714f137504ad49c8bf66622f60', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, h("input", { key: '276f7411899bcb14db93a6f2b93cc51b5363e1c9', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
126
126
  }
127
127
  };
128
128
  SdToggle.style = sdToggleCss();
@@ -37,6 +37,8 @@ export declare class SdChipInput {
37
37
  recommendedItems: string[];
38
38
  /** 추천 항목 로딩 중 여부 */
39
39
  loadingRecommendedItems: boolean;
40
+ /** 자동완성 드롭다운 최소 너비 (숫자면 px, 문자열이면 그대로 적용. 없으면 입력 필드 너비를 사용) */
41
+ autocompleteMinWidth?: string | number;
40
42
  /** 레이블 텍스트 */
41
43
  label?: string;
42
44
  /** 레이블 너비 */
@@ -66,6 +68,7 @@ export declare class SdChipInput {
66
68
  private inputEl?;
67
69
  private formField?;
68
70
  private chipInputRef?;
71
+ private fieldRef?;
69
72
  get value(): string[];
70
73
  valuesChanged(newValues: string[]): void;
71
74
  errorsChanged(newErrors: boolean[] | ((value: string) => boolean)): void;
@@ -8,9 +8,12 @@ export declare class SdTag {
8
8
  icon?: IconName;
9
9
  /** true이면 아이콘을 레이블 왼쪽에 배치 */
10
10
  isLeft: boolean;
11
+ /** 태그 너비 (숫자면 px, 문자열이면 그대로 적용). 미지정 시 콘텐츠 크기(fit-content) */
12
+ width: string | number;
11
13
  componentWillLoad(): void;
12
14
  private get resolvedName();
13
15
  private get resolvedConfig();
14
16
  private renderIcon;
17
+ private get resolvedWidth();
15
18
  render(): any;
16
19
  }