@sellmate/design-system 1.0.63 → 1.0.64

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 (112) 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-barcode-input.cjs.entry.js +2 -1
  4. package/dist/cjs/sd-button_4.cjs.entry.js +11 -5
  5. package/dist/cjs/sd-date-picker.cjs.entry.js +3 -2
  6. package/dist/cjs/sd-date-range-picker.cjs.entry.js +3 -2
  7. package/dist/cjs/sd-file-picker.cjs.entry.js +2 -1
  8. package/dist/cjs/sd-input_2.cjs.entry.js +3 -2
  9. package/dist/cjs/sd-number-input.cjs.entry.js +4 -3
  10. package/dist/cjs/sd-pagination_2.cjs.entry.js +4 -3
  11. package/dist/cjs/sd-select-group.cjs.entry.js +2 -1
  12. package/dist/cjs/sd-select-multiple-group.cjs.entry.js +2 -1
  13. package/dist/cjs/sd-select-multiple.cjs.entry.js +2 -1
  14. package/dist/cjs/sd-select.cjs.entry.js +2 -1
  15. package/dist/cjs/sd-textarea.cjs.entry.js +2 -1
  16. package/dist/collection/components/sd-barcode-input/sd-barcode-input.js +22 -1
  17. package/dist/collection/components/sd-date-picker/sd-date-picker.js +23 -2
  18. package/dist/collection/components/sd-date-range-picker/sd-date-range-picker.js +23 -2
  19. package/dist/collection/components/sd-field/sd-field.css +7 -0
  20. package/dist/collection/components/sd-field/sd-field.js +30 -4
  21. package/dist/collection/components/sd-file-picker/sd-file-picker.js +22 -1
  22. package/dist/collection/components/sd-input/sd-input.js +23 -2
  23. package/dist/collection/components/sd-number-input/sd-number-input.js +24 -3
  24. package/dist/collection/components/sd-select/sd-select.js +22 -1
  25. package/dist/collection/components/sd-select-group/sd-select-group.js +22 -1
  26. package/dist/collection/components/sd-select-multiple/sd-select-multiple.js +22 -1
  27. package/dist/collection/components/sd-select-multiple-group/sd-select-multiple-group.js +22 -1
  28. package/dist/collection/components/sd-select-v2/sd-select-v2.js +24 -3
  29. package/dist/collection/components/sd-textarea/sd-textarea.js +22 -1
  30. package/dist/components/p-BjjrNz4C.js +1 -0
  31. package/dist/components/{p-DUqX35W_.js → p-BkUclgga.js} +1 -1
  32. package/dist/components/p-CKU8CeW3.js +1 -0
  33. package/dist/components/p-DC9KYl3L.js +1 -0
  34. package/dist/components/{p-DgYBr7xb.js → p-xmvTLf74.js} +1 -1
  35. package/dist/components/sd-barcode-input.js +1 -1
  36. package/dist/components/sd-date-picker.js +1 -1
  37. package/dist/components/sd-date-range-picker.js +1 -1
  38. package/dist/components/sd-field.js +1 -1
  39. package/dist/components/sd-file-picker.js +1 -1
  40. package/dist/components/sd-input.js +1 -1
  41. package/dist/components/sd-number-input.js +1 -1
  42. package/dist/components/sd-select-dropdown.js +1 -1
  43. package/dist/components/sd-select-group.js +1 -1
  44. package/dist/components/sd-select-multiple-group.js +1 -1
  45. package/dist/components/sd-select-multiple.js +1 -1
  46. package/dist/components/sd-select-search-input.js +1 -1
  47. package/dist/components/sd-select-v2.js +1 -1
  48. package/dist/components/sd-select.js +1 -1
  49. package/dist/components/sd-table.js +1 -1
  50. package/dist/components/sd-textarea.js +1 -1
  51. package/dist/design-system/design-system.esm.js +1 -1
  52. package/dist/design-system/p-010e4f47.entry.js +1 -0
  53. package/dist/design-system/p-2ae97b1c.entry.js +1 -0
  54. package/dist/design-system/p-6644c4a0.entry.js +1 -0
  55. package/dist/design-system/p-96b14db1.entry.js +1 -0
  56. package/dist/design-system/p-a983560d.entry.js +1 -0
  57. package/dist/design-system/p-b3279f07.entry.js +1 -0
  58. package/dist/design-system/p-b81e0493.entry.js +1 -0
  59. package/dist/design-system/p-cb65a9e4.entry.js +1 -0
  60. package/dist/design-system/p-cf1156cb.entry.js +1 -0
  61. package/dist/design-system/p-d040ec6f.entry.js +1 -0
  62. package/dist/design-system/p-d8eb17a8.entry.js +1 -0
  63. package/dist/design-system/p-ed61fe19.entry.js +1 -0
  64. package/dist/design-system/p-f3d082c8.entry.js +1 -0
  65. package/dist/esm/design-system.js +1 -1
  66. package/dist/esm/loader.js +1 -1
  67. package/dist/esm/sd-barcode-input.entry.js +2 -1
  68. package/dist/esm/sd-button_4.entry.js +11 -5
  69. package/dist/esm/sd-date-picker.entry.js +3 -2
  70. package/dist/esm/sd-date-range-picker.entry.js +3 -2
  71. package/dist/esm/sd-file-picker.entry.js +2 -1
  72. package/dist/esm/sd-input_2.entry.js +3 -2
  73. package/dist/esm/sd-number-input.entry.js +4 -3
  74. package/dist/esm/sd-pagination_2.entry.js +4 -3
  75. package/dist/esm/sd-select-group.entry.js +2 -1
  76. package/dist/esm/sd-select-multiple-group.entry.js +2 -1
  77. package/dist/esm/sd-select-multiple.entry.js +2 -1
  78. package/dist/esm/sd-select.entry.js +2 -1
  79. package/dist/esm/sd-textarea.entry.js +2 -1
  80. package/dist/types/components/sd-barcode-input/sd-barcode-input.d.ts +1 -0
  81. package/dist/types/components/sd-date-picker/sd-date-picker.d.ts +1 -0
  82. package/dist/types/components/sd-date-range-picker/sd-date-range-picker.d.ts +1 -0
  83. package/dist/types/components/sd-field/sd-field.d.ts +1 -0
  84. package/dist/types/components/sd-file-picker/sd-file-picker.d.ts +1 -0
  85. package/dist/types/components/sd-input/sd-input.d.ts +1 -0
  86. package/dist/types/components/sd-number-input/sd-number-input.d.ts +1 -0
  87. package/dist/types/components/sd-select/sd-select.d.ts +1 -0
  88. package/dist/types/components/sd-select-group/sd-select-group.d.ts +1 -0
  89. package/dist/types/components/sd-select-multiple/sd-select-multiple.d.ts +1 -0
  90. package/dist/types/components/sd-select-multiple-group/sd-select-multiple-group.d.ts +1 -0
  91. package/dist/types/components/sd-select-v2/sd-select-v2.d.ts +1 -0
  92. package/dist/types/components/sd-textarea/sd-textarea.d.ts +1 -0
  93. package/dist/types/components.d.ts +117 -0
  94. package/hydrate/index.js +55 -24
  95. package/hydrate/index.mjs +55 -24
  96. package/package.json +1 -1
  97. package/dist/components/p-aC4HJHug.js +0 -1
  98. package/dist/components/p-e35Du7-7.js +0 -1
  99. package/dist/components/p-e8HA30H_.js +0 -1
  100. package/dist/design-system/p-0ca594a4.entry.js +0 -1
  101. package/dist/design-system/p-1b9e427e.entry.js +0 -1
  102. package/dist/design-system/p-1cbe4b22.entry.js +0 -1
  103. package/dist/design-system/p-656acb07.entry.js +0 -1
  104. package/dist/design-system/p-748ece8e.entry.js +0 -1
  105. package/dist/design-system/p-9af7e19a.entry.js +0 -1
  106. package/dist/design-system/p-a24c3431.entry.js +0 -1
  107. package/dist/design-system/p-c2f3470f.entry.js +0 -1
  108. package/dist/design-system/p-c98ed6ae.entry.js +0 -1
  109. package/dist/design-system/p-ca80379a.entry.js +0 -1
  110. package/dist/design-system/p-e9f24d23.entry.js +0 -1
  111. package/dist/design-system/p-ec79fefd.entry.js +0 -1
  112. package/dist/design-system/p-f3a60f61.entry.js +0 -1
package/hydrate/index.js CHANGED
@@ -5618,6 +5618,7 @@ class SdBarcodeInput {
5618
5618
  hovered = false;
5619
5619
  // props - label
5620
5620
  label = '';
5621
+ labelWidth = '';
5621
5622
  icon = undefined;
5622
5623
  labelTooltip = '';
5623
5624
  labelTooltipProps = null;
@@ -5696,7 +5697,7 @@ class SdBarcodeInput {
5696
5697
  '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
5697
5698
  '--sd-system-color-field-bg-default': BARCODE_INPUT_COLORS.bg.barcode,
5698
5699
  };
5699
- return (hAsync("sd-field", { key: 'ea17ae1c54890e57be4f582b3e993f370646b81a', name: this.name, label: this.label, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, 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 }, hAsync("label", { key: 'c96462ac8db261a31681744585a4f396b6561abb', class: "sd-barcode-input__content" }, hAsync("slot", { key: 'fde26b71059c79ef6911ab7a185bacda19b2800a', name: "prefix" }), hAsync("input", { key: 'a015944a0396a2fc3ab1c1ea401f79f25a260764', name: this.name, ref: el => (this.nativeEl = el), class: `sd-barcode-input__native ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), hAsync("slot", { key: '45958b98d96ad527cfb9b59491e48e6f5c75e990', name: "suffix" }), this.clearable && this.internalValue && (hAsync("sd-ghost-button", { key: '7bf3f5e3ffcb35def3576e5f07d2af6392ce0c59', icon: "close", ariaLabel: "close", size: "xxs", disabled: this.disabled, class: "sd-barcode-input__clear-icon", onClick: async () => {
5700
+ return (hAsync("sd-field", { key: 'bba439856e0cbaedc7b54411dac904f9c845b50c', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, 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 }, hAsync("label", { key: '8553cfb4b5ef9535608abc1f2987ce08970c318a', class: "sd-barcode-input__content" }, hAsync("slot", { key: '93db2b38e8d674230f48e3b9496a7221d8477da6', name: "prefix" }), hAsync("input", { key: '30997bea593052322a2d29fc1e517b00cf19b1fb', name: this.name, ref: el => (this.nativeEl = el), class: `sd-barcode-input__native ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), hAsync("slot", { key: '690daa6c1daa6058713ee09b0efe976557cde3ab', name: "suffix" }), this.clearable && this.internalValue && (hAsync("sd-ghost-button", { key: '8ab4e45a23d1b06dc415d969e25ed5ea59540643', icon: "close", ariaLabel: "close", size: "xxs", disabled: this.disabled, class: "sd-barcode-input__clear-icon", onClick: async () => {
5700
5701
  if (this.disabled)
5701
5702
  return;
5702
5703
  this.internalValue = '';
@@ -5734,6 +5735,7 @@ class SdBarcodeInput {
5734
5735
  "focused": [1028],
5735
5736
  "hovered": [1028],
5736
5737
  "label": [1],
5738
+ "labelWidth": [8, "label-width"],
5737
5739
  "icon": [16],
5738
5740
  "labelTooltip": [1, "label-tooltip"],
5739
5741
  "labelTooltipProps": [16],
@@ -7346,6 +7348,7 @@ class SdDatePicker {
7346
7348
  width = '';
7347
7349
  // sd-field 공통 props
7348
7350
  label = '';
7351
+ labelWidth = '';
7349
7352
  addonLabel = '';
7350
7353
  hint = '';
7351
7354
  errorMessage = '';
@@ -7425,9 +7428,9 @@ class SdDatePicker {
7425
7428
  '--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
7426
7429
  '--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
7427
7430
  };
7428
- return (hAsync("sd-field", { key: 'cfbaa89a7e07ff2d8994f3e8faa16bc55decce0f', name: this.fieldName || this.internalName, label: this.label, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, 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 }, hAsync("div", { key: '674cc78bc3a3cda15a1cff07c36d0d5adbcfa2ef', class: "sd-date-picker", ref: el => {
7431
+ return (hAsync("sd-field", { key: '693c0c75e6b0a9ee8323f4be7ec101592e586372', name: this.fieldName || this.internalName, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, 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 }, hAsync("div", { key: 'ea7f506f0163119fac0c660ef1bef5781780a118', class: "sd-date-picker", ref: el => {
7429
7432
  this.triggerRef = el;
7430
- } }, hAsync("sd-date-picker-trigger", { key: '1491cea4ff657631b3dc197fa39981c2c4df96c7', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: '9a759a3470bc077a52efbd4718cf11f3b67ef477', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, hAsync("sd-date-picker-calendar", { key: 'a14a447fbf28d95173eca5fae3baa73319c0bc37', value: this.value, selectable: this.selectable, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
7433
+ } }, hAsync("sd-date-picker-trigger", { key: '0109eb0326655018bc02cc373e766ffdada85ff0', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: '65a628af43ae036a752f3511341fd8c9c82303a1', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, hAsync("sd-date-picker-calendar", { key: '21f574fc9551f9aaccfcb5d49a81952dbba72d7a', value: this.value, selectable: this.selectable, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
7431
7434
  }
7432
7435
  static get watchers() { return {
7433
7436
  "isOpen": [{
@@ -7446,6 +7449,7 @@ class SdDatePicker {
7446
7449
  "disabled": [516],
7447
7450
  "width": [8],
7448
7451
  "label": [1],
7452
+ "labelWidth": [8, "label-width"],
7449
7453
  "addonLabel": [1, "addon-label"],
7450
7454
  "hint": [1],
7451
7455
  "errorMessage": [1, "error-message"],
@@ -7725,6 +7729,7 @@ class SdDateRangePicker {
7725
7729
  width = '';
7726
7730
  // sd-field 공통 props
7727
7731
  label = '';
7732
+ labelWidth = '';
7728
7733
  addonLabel = '';
7729
7734
  hint = '';
7730
7735
  errorMessage = '';
@@ -7809,9 +7814,9 @@ class SdDateRangePicker {
7809
7814
  '--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
7810
7815
  '--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
7811
7816
  };
7812
- return (hAsync("sd-field", { key: 'c3ce7e19d317939c193b6d1481b78ce599b0ffb1', name: this.fieldName || this.internalName, label: this.label, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, 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 }, hAsync("div", { key: 'a3b48e2f79359620aabe01cfb32ac6a066acf567', class: "sd-date-range-picker", ref: el => {
7817
+ return (hAsync("sd-field", { key: '95ec666c91635d6b6b749d660b4495b7ebe48e6a', name: this.fieldName || this.internalName, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, 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 }, hAsync("div", { key: '3051fda66e94d51208347ae2053173570d5f1ca9', class: "sd-date-range-picker", ref: el => {
7813
7818
  this.triggerRef = el;
7814
- } }, hAsync("sd-date-picker-trigger", { key: '3b2a963d29e93fe2ef82d1cd466ebd079c31ee30', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: '5e51463ffdaf21c67a796b8a4418a287b48f7528', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, hAsync("sd-date-range-picker-calendar", { key: '820176f7e03e9aab97e8b1f7752a535385918e46', value: this.value, selectable: this.selectable, maxRange: this.maxRange, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
7819
+ } }, hAsync("sd-date-picker-trigger", { key: '71693b5a4cec562169d9427a4e19aed4d8b19a45', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: '75b9f1c1ebdabcd1c1a33cad51189ba132274bb1', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, hAsync("sd-date-range-picker-calendar", { key: 'f158eead4f44bc452bf102b3324721df84fc3b0c', value: this.value, selectable: this.selectable, maxRange: this.maxRange, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
7815
7820
  }
7816
7821
  static get watchers() { return {
7817
7822
  "isOpen": [{
@@ -7831,6 +7836,7 @@ class SdDateRangePicker {
7831
7836
  "disabled": [516],
7832
7837
  "width": [8],
7833
7838
  "label": [1],
7839
+ "labelWidth": [8, "label-width"],
7834
7840
  "addonLabel": [1, "addon-label"],
7835
7841
  "hint": [1],
7836
7842
  "errorMessage": [1, "error-message"],
@@ -8569,7 +8575,7 @@ const FIELD_LABEL_SIZE_MAP = {
8569
8575
  },
8570
8576
  };
8571
8577
 
8572
- const sdFieldCss = () => `sd-field{display:inline-flex;flex-flow:column nowrap;height:fit-content;width:100%}sd-field .sd-field *:focus,sd-field .sd-field *:focus-visible,sd-field .sd-field *:focus-within{outline:none !important}sd-field .sd-field.sd-field--disabled{cursor:not-allowed}sd-field .sd-field.sd-field--disabled .sd-field__wrapper{cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__label-inside{border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__control{background-color:#E1E1E1;border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label{display:flex;align-items:center;height:var(--sd-field-label-height);margin-right:var(--sd-field-label-margin-right)}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__icon{margin-right:var(--sd-field-label-gap)}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__text{font-size:var(--sd-field-label-font-size);line-height:var(--sd-field-label-line-height);font-weight:var(--sd-field-label-font-weight);color:var(--sd-system-color-field-text-default);white-space:nowrap}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__tooltip{margin-left:var(--sd-field-label-gap)}sd-field .sd-field--has-addon .sd-field__control .sd-field__addon{display:flex;gap:var(--sd-field-addon-gap);align-items:center;white-space:nowrap;padding:0 var(--sd-field-addon-padding-x);font-size:var(--sd-field-addon-font-size);line-height:var(--sd-field-addon-line-height);font-weight:var(--sd-field-addon-font-weight);background:var(--sd-field-addon-bg);border-right:var(--sd-field-addon-border-width) solid var(--sd-field-addon-border-color);border-radius:calc(var(--sd-field-control-radius) - 1px) 0 0 calc(var(--sd-field-control-radius) - 1px)}sd-field .sd-field__wrapper{width:100%;display:flex;align-items:flex-start;flex-flow:row nowrap;position:relative;color:var(--sd-system-color-field-text-default);-webkit-user-select:none;user-select:none}sd-field .sd-field__wrapper .sd-field__main{flex:1;min-width:0;display:flex;flex-direction:column}sd-field .sd-field__wrapper .sd-field__control{position:relative;height:var(--sd-field-wrapper-height);display:flex;min-width:0;border:1px solid var(--sd-system-color-field-border-default);border-radius:var(--sd-field-control-radius);background:var(--sd-system-color-field-bg-default)}sd-field .sd-field--error .sd-field__wrapper .sd-field__control:not(:hover){border:1px solid var(--sd-system-color-field-border-danger) !important}sd-field .sd-field.sd-field--pass .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-success) !important}sd-field .sd-field:not(.sd-field--disabled) .sd-field__wrapper .sd-field__control:hover{border:1px solid var(--sd-system-color-field-border-focus) !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field.sd-field--focus .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-focus) !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field .sd-field__error-message{color:var(--sd-textinput-textinput-text-error-message);font-size:var(--sd-textinput-textinput-error-message-typography-font-size);line-height:var(--sd-textinput-textinput-error-message-typography-line-height);margin-top:var(--sd-textinput-textinput-contents-gap)}sd-field .sd-field .sd-field__hint{color:var(--sd-textinput-textinput-text-hint);font-size:var(--sd-textinput-textinput-hint-typography-font-size);line-height:var(--sd-textinput-textinput-hint-typography-line-height);margin-top:var(--sd-textinput-textinput-contents-gap)}`;
8578
+ const sdFieldCss = () => `sd-field{display:inline-flex;flex-flow:column nowrap;height:fit-content;width:100%}sd-field .sd-field *:focus,sd-field .sd-field *:focus-visible,sd-field .sd-field *:focus-within{outline:none !important}sd-field .sd-field.sd-field--disabled{cursor:not-allowed}sd-field .sd-field.sd-field--disabled .sd-field__wrapper{cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__label-inside{border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__control{background-color:#E1E1E1;border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label{display:flex;align-items:center;flex-shrink:0;width:var(--sd-field-label-width, auto);height:var(--sd-field-label-height);margin-right:var(--sd-field-label-margin-right)}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__icon{margin-right:var(--sd-field-label-gap);flex-shrink:0}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__text{font-size:var(--sd-field-label-font-size);line-height:var(--sd-field-label-line-height);font-weight:var(--sd-field-label-font-weight);color:var(--sd-system-color-field-text-default);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__tooltip{margin-left:var(--sd-field-label-gap);flex-shrink:0}sd-field .sd-field--has-addon .sd-field__control .sd-field__addon{display:flex;gap:var(--sd-field-addon-gap);align-items:center;white-space:nowrap;padding:0 var(--sd-field-addon-padding-x);font-size:var(--sd-field-addon-font-size);line-height:var(--sd-field-addon-line-height);font-weight:var(--sd-field-addon-font-weight);background:var(--sd-field-addon-bg);border-right:var(--sd-field-addon-border-width) solid var(--sd-field-addon-border-color);border-radius:calc(var(--sd-field-control-radius) - 1px) 0 0 calc(var(--sd-field-control-radius) - 1px)}sd-field .sd-field__wrapper{width:100%;display:flex;align-items:flex-start;flex-flow:row nowrap;position:relative;color:var(--sd-system-color-field-text-default);-webkit-user-select:none;user-select:none}sd-field .sd-field__wrapper .sd-field__main{flex:1;min-width:0;display:flex;flex-direction:column}sd-field .sd-field__wrapper .sd-field__control{position:relative;height:var(--sd-field-wrapper-height);display:flex;min-width:0;border:1px solid var(--sd-system-color-field-border-default);border-radius:var(--sd-field-control-radius);background:var(--sd-system-color-field-bg-default)}sd-field .sd-field--error .sd-field__wrapper .sd-field__control:not(:hover){border:1px solid var(--sd-system-color-field-border-danger) !important}sd-field .sd-field.sd-field--pass .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-success) !important}sd-field .sd-field:not(.sd-field--disabled) .sd-field__wrapper .sd-field__control:hover{border:1px solid var(--sd-system-color-field-border-focus) !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field.sd-field--focus .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-focus) !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field .sd-field__error-message{color:var(--sd-textinput-textinput-text-error-message);font-size:var(--sd-textinput-textinput-error-message-typography-font-size);line-height:var(--sd-textinput-textinput-error-message-typography-line-height);margin-top:var(--sd-textinput-textinput-contents-gap)}sd-field .sd-field .sd-field__hint{color:var(--sd-textinput-textinput-text-hint);font-size:var(--sd-textinput-textinput-hint-typography-font-size);line-height:var(--sd-textinput-textinput-hint-typography-line-height);margin-top:var(--sd-textinput-textinput-contents-gap)}`;
8573
8579
 
8574
8580
  const FORM_PARENT_TAGS = [
8575
8581
  'sd-select',
@@ -8602,6 +8608,7 @@ class SdField {
8602
8608
  size = 'sm';
8603
8609
  // props - label
8604
8610
  label = '';
8611
+ labelWidth = '';
8605
8612
  addonLabel = '';
8606
8613
  icon = undefined;
8607
8614
  labelTooltip = '';
@@ -8714,6 +8721,11 @@ class SdField {
8714
8721
  '--sd-field-label-font-size': `${labelTokens.fontSize}px`,
8715
8722
  '--sd-field-label-line-height': `${labelTokens.lineHeight}px`,
8716
8723
  '--sd-field-label-font-weight': labelTokens.fontWeight,
8724
+ ...(this.labelWidth
8725
+ ? {
8726
+ '--sd-field-label-width': typeof this.labelWidth === 'number' ? `${this.labelWidth}px` : this.labelWidth,
8727
+ }
8728
+ : {}),
8717
8729
  }
8718
8730
  : {};
8719
8731
  const addonCssVars = addon
@@ -8730,20 +8742,20 @@ class SdField {
8730
8742
  '--sd-field-addon-border-width': `${addonTokens.border.width}px`,
8731
8743
  }
8732
8744
  : {};
8733
- return (hAsync("div", { key: '72ffdb42c88b90eb60637b10c1330dc509ece812', class: {
8745
+ return (hAsync("div", { key: 'f12b2e13ac8152d1e688f903a60a8fa670e99065', class: {
8734
8746
  'sd-field': true,
8735
8747
  'sd-field--has-label': !!this.label,
8736
8748
  'sd-field--has-addon': !!addon,
8737
8749
  [this.fieldStatus]: !!this.fieldStatus,
8738
- }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars } }, hAsync("div", { key: 'fb5d90aea5a4988ec58984b4a85ed609f032549e', class: "sd-field__wrapper" }, this.renderLabel(this.label), hAsync("div", { key: 'c0372be3a39ca1d6cebfe5e765d120751e39d03e', class: "sd-field__main", style: this.width
8750
+ }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars } }, hAsync("div", { key: '79f7a40b5e1ee95bb9075b0855e22261cd8adc6a', class: "sd-field__wrapper" }, this.renderLabel(this.label), hAsync("div", { key: '54b5bbfbe18df48c40cc30ec3d6761ccd8e446cc', class: "sd-field__main", style: this.width
8739
8751
  ? {
8740
8752
  width: typeof this.width === 'number' ? `${this.width}px` : this.width,
8741
8753
  flex: 'none',
8742
8754
  }
8743
- : {} }, hAsync("div", { key: 'd203154db0eef4e73908d78ba3667710c51b6595', class: {
8755
+ : {} }, hAsync("div", { key: '39542908287175ade4d6e0f1acd2cb1f03c9e2a1', class: {
8744
8756
  'sd-field__control': true,
8745
8757
  'sd-field__control--has-addon': !!addon,
8746
- } }, addon && hAsync("div", { key: '851b996010c4f0402df8b6bfe9ced0c8444bc591', class: "sd-field__addon" }, addon), hAsync("slot", { key: '081b95a99090c3c1d2d28170500ac7be15452876' })), this.errorMsg || this.errorMessage ? (hAsync("div", { class: "sd-field__error-message" }, this.errorMsg || this.errorMessage)) : (this.hint && hAsync("div", { class: "sd-field__hint" }, this.hint))))));
8758
+ } }, addon && hAsync("div", { key: '236650de53d1d1951f26586aa0d22f0f267fc411', class: "sd-field__addon" }, addon), hAsync("slot", { key: '41df3dca21aa68d3324617891f2555f1c488a61b' })), this.errorMsg || this.errorMessage ? (hAsync("div", { class: "sd-field__error-message" }, this.errorMsg || this.errorMessage)) : (this.hint && hAsync("div", { class: "sd-field__hint" }, this.hint))))));
8747
8759
  }
8748
8760
  renderLabel(label) {
8749
8761
  if (!label)
@@ -8767,6 +8779,7 @@ class SdField {
8767
8779
  "width": [8],
8768
8780
  "size": [513],
8769
8781
  "label": [1],
8782
+ "labelWidth": [8, "label-width"],
8770
8783
  "addonLabel": [1, "addon-label"],
8771
8784
  "icon": [16],
8772
8785
  "labelTooltip": [1, "label-tooltip"],
@@ -8847,6 +8860,7 @@ class SdFilePicker {
8847
8860
  // sd-field 패스스루 props
8848
8861
  name = '';
8849
8862
  label = '';
8863
+ labelWidth = '';
8850
8864
  addonLabel = '';
8851
8865
  hint = '';
8852
8866
  errorMessage = '';
@@ -9009,7 +9023,7 @@ class SdFilePicker {
9009
9023
  'sd-file-picker--inline-disabled': this.disabled,
9010
9024
  }, style: cssVars, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, content));
9011
9025
  }
9012
- return (hAsync("sd-field", { name: this.name, label: this.label, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, content));
9026
+ return (hAsync("sd-field", { name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, content));
9013
9027
  }
9014
9028
  static get watchers() { return {
9015
9029
  "value": [{
@@ -9032,6 +9046,7 @@ class SdFilePicker {
9032
9046
  "maxFiles": [8, "max-files"],
9033
9047
  "name": [1],
9034
9048
  "label": [1],
9049
+ "labelWidth": [8, "label-width"],
9035
9050
  "addonLabel": [1, "addon-label"],
9036
9051
  "hint": [1],
9037
9052
  "errorMessage": [1, "error-message"],
@@ -10169,6 +10184,7 @@ class SdInput {
10169
10184
  hovered = false;
10170
10185
  // props - label
10171
10186
  label = '';
10187
+ labelWidth = '';
10172
10188
  icon = undefined;
10173
10189
  labelTooltip = '';
10174
10190
  labelTooltipProps = null;
@@ -10250,12 +10266,12 @@ class SdInput {
10250
10266
  '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
10251
10267
  '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
10252
10268
  };
10253
- return (hAsync("sd-field", { key: 'a96aaa54fe54c9d9ee5ab31537e1b6fb7b612c8f', name: this.name, label: this.label, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, 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 }, hAsync("label", { key: 'd806549d41156ab414d04664e6887075ef97f307', class: "sd-input__content" }, hAsync("slot", { key: '29f447128f6211792742a252d1ea087b5a5b413e', name: "prefix" }), hAsync("input", { key: 'e1870c7573268e97eac820d7508e134c13c32b40', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : this.type, 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 }), hAsync("slot", { key: 'f12b87b5d30878a55e1224abf789b924c1fd3a0c', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && (hAsync("sd-ghost-button", { key: 'dad4be5dc6e8239dedc094fe0eb02a2587dd9f9c', icon: "close", ariaLabel: "close", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
10269
+ return (hAsync("sd-field", { key: 'a72ce8674fb761de7cd188e99cc19d5f3731a899', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, 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 }, hAsync("label", { key: 'e5cbdbc2b233bda57488ead19401d277891301ae', class: "sd-input__content" }, hAsync("slot", { key: 'a327005770df94ef61f2e08071e77407a24b7b5c', name: "prefix" }), hAsync("input", { key: '36301cd586151b8c607e14715b26fca467f68c13', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : this.type, 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 }), hAsync("slot", { key: '532e201860db0709572502aa4275fc9251e1aeb1', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && (hAsync("sd-ghost-button", { key: 'cc6132852c65f0597cbe25751c7246b1cdad3096', icon: "close", ariaLabel: "close", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
10254
10270
  if (this.disabled)
10255
10271
  return;
10256
10272
  this.internalValue = '';
10257
10273
  await this.formField?.sdValidate();
10258
- } })), this.type === 'password' && (hAsync("sd-ghost-button", { key: '71c5cf7565ad13f08173fc10e828ddf5f8f546b8', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled, class: "sd-input__password-icon", onClick: () => {
10274
+ } })), this.type === 'password' && (hAsync("sd-ghost-button", { key: 'fd3d567346cf5771ec28c73f15cdf0db15835766', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled, class: "sd-input__password-icon", onClick: () => {
10259
10275
  if (this.disabled)
10260
10276
  return;
10261
10277
  this.passwordVisible = !this.passwordVisible;
@@ -10299,6 +10315,7 @@ class SdInput {
10299
10315
  "focused": [1028],
10300
10316
  "hovered": [1028],
10301
10317
  "label": [1],
10318
+ "labelWidth": [8, "label-width"],
10302
10319
  "icon": [16],
10303
10320
  "labelTooltip": [1, "label-tooltip"],
10304
10321
  "labelTooltipProps": [16],
@@ -10875,6 +10892,7 @@ class SdNumberInput {
10875
10892
  useDecimal = false;
10876
10893
  value = null;
10877
10894
  label;
10895
+ labelWidth = '';
10878
10896
  addonLabel = '';
10879
10897
  placeholder = '입력해 주세요.';
10880
10898
  disabled = false;
@@ -11134,12 +11152,12 @@ class SdNumberInput {
11134
11152
  '--sd-textinput-input-hint-typography-line-height': `${NUMBER_INPUT_HINT.typography.lineHeight}px`,
11135
11153
  '--sd-textinput-input-contents-gap': `${NUMBER_INPUT_CONTENTS_GAP}px`,
11136
11154
  };
11137
- return (hAsync("sd-field", { key: 'e05cc16f4dde4fd82d11a811b578723af2f5b092', name: this.name, label: this.label, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: 'db4f02b5f882acfe481698745ca374874643efbd', class: "sd-number-input__content" }, this.useButton && (hAsync("button", { key: 'c83df0e915849792427b2f3609937bb0b62aae15', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, hAsync("sd-icon", { key: 'b7ea0704c9d114b5e1b8eca29a408efb5e532b7e', name: "minus", size: iconSize, color: this.isDecrementDisabled()
11155
+ return (hAsync("sd-field", { key: 'f81b01b27960130cbf6b37a29fc0ddc11750768e', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: '0f9b5a0b966c7d51d5913c61a585ff789fa4973f', class: "sd-number-input__content" }, this.useButton && (hAsync("button", { key: 'b037ee3062253bf229f9639dd04c7475657fabb6', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, hAsync("sd-icon", { key: '39a9f73a15008a481e758e663e027cd4f6454146', name: "minus", size: iconSize, color: this.isDecrementDisabled()
11138
11156
  ? NUMBER_INPUT_STEPPER.icon.disabled
11139
- : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && (hAsync("span", { key: '57ed4229c30d52b6925ebaccd816cd8496ab60c0', class: "sd-number-input__prefix" }, this.inputPrefix)), hAsync("input", { key: 'b018a810ca085218beb7acbba0187543c8369236', 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: {
11157
+ : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && (hAsync("span", { key: '050334ce25bb767e7f11dca886d4aeecaa1ed3dc', class: "sd-number-input__prefix" }, this.inputPrefix)), hAsync("input", { key: 'a72697d136eeee52ef23fee6ee2017b6dd37e54c', 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: {
11140
11158
  textAlign: this.useButton ? 'center' : 'right',
11141
11159
  ...this.inputStyle,
11142
- } }), this.inputSuffix && (hAsync("span", { key: '5db549a3cc81b98123cdec69b866b25d961f210f', class: "sd-number-input__suffix" }, this.inputSuffix)), this.useButton && (hAsync("button", { key: '8b0b8c4ba46cf1cc5fba21f7fa8c113ca215b265', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, hAsync("sd-icon", { key: '77012f79ba5a3a5550af844149bb35fa1e165533', name: "add", size: iconSize, color: this.isIncrementDisabled()
11160
+ } }), this.inputSuffix && (hAsync("span", { key: '845202622b3377add18782d96d0af0c49caf95ec', class: "sd-number-input__suffix" }, this.inputSuffix)), this.useButton && (hAsync("button", { key: '208c976c1b755bec0cd7efb5ceacb3e07dce3a7d', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, hAsync("sd-icon", { key: 'fe9848c8f044d01378dc183a80d3f81eb56a67f9', name: "add", size: iconSize, color: this.isIncrementDisabled()
11143
11161
  ? NUMBER_INPUT_STEPPER.icon.disabled
11144
11162
  : NUMBER_INPUT_STEPPER.icon.default }))))));
11145
11163
  }
@@ -11164,6 +11182,7 @@ class SdNumberInput {
11164
11182
  "useDecimal": [4, "use-decimal"],
11165
11183
  "value": [1032],
11166
11184
  "label": [1],
11185
+ "labelWidth": [8, "label-width"],
11167
11186
  "addonLabel": [1, "addon-label"],
11168
11187
  "placeholder": [1],
11169
11188
  "disabled": [4],
@@ -12155,6 +12174,7 @@ class SdSelect extends BaseDropdownEvent {
12155
12174
  searchable = false;
12156
12175
  // props - label
12157
12176
  label = '';
12177
+ labelWidth = '';
12158
12178
  addonLabel = '';
12159
12179
  icon = undefined;
12160
12180
  labelTooltip = '';
@@ -12273,7 +12293,7 @@ class SdSelect extends BaseDropdownEvent {
12273
12293
  }
12274
12294
  };
12275
12295
  render() {
12276
- return (hAsync("sd-field", { key: '33f8a4e75ab20389213be5643f479b806e8e78c3', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, addonLabel: this.addonLabel, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, hAsync("div", { key: '148f21e1a19cf4f4b9e61b4192d631d85dbc57a4', class: {
12296
+ return (hAsync("sd-field", { key: 'd96961fe4c425c3f0fcb1c2f438c8b70c510b632', label: this.label, labelWidth: this.labelWidth, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, addonLabel: this.addonLabel, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, hAsync("div", { key: '0113ffb76ea79cbe3b77dff85d8186a5b994e7b6', class: {
12277
12297
  'sd-select': true,
12278
12298
  'sd-select--disabled': this.disabled,
12279
12299
  'sd-select--error': !!this.error,
@@ -12316,6 +12336,7 @@ class SdSelect extends BaseDropdownEvent {
12316
12336
  "clearable": [4],
12317
12337
  "searchable": [4],
12318
12338
  "label": [1],
12339
+ "labelWidth": [8, "label-width"],
12319
12340
  "addonLabel": [1, "addon-label"],
12320
12341
  "icon": [16],
12321
12342
  "labelTooltip": [1, "label-tooltip"],
@@ -12558,6 +12579,7 @@ class SdSelectGroup extends BaseDropdownEvent {
12558
12579
  searchable = false;
12559
12580
  // props - label
12560
12581
  label = '';
12582
+ labelWidth = '';
12561
12583
  addonLabel = '';
12562
12584
  icon = undefined;
12563
12585
  labelTooltip = '';
@@ -12805,7 +12827,7 @@ class SdSelectGroup extends BaseDropdownEvent {
12805
12827
  });
12806
12828
  }
12807
12829
  render() {
12808
- return (hAsync("sd-field", { key: 'b1b62a2e99fda1f0fbc4f8b3ede5af95a9ed09aa', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, addonLabel: this.addonLabel, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, hAsync("div", { key: '91f30fd84c70010030813f2d0cd9e86939e185d7', class: {
12830
+ return (hAsync("sd-field", { key: '1e6a0f9947f5d137bb65844fe666c07b4eefb2f7', label: this.label, labelWidth: this.labelWidth, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, addonLabel: this.addonLabel, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, hAsync("div", { key: '62dcd2f37c2eda0e51f2e77de36ece6ab592c4ce', class: {
12809
12831
  'sd-select-group': true,
12810
12832
  'sd-select-group--open': this.isOpen,
12811
12833
  'sd-select-group--disabled': this.disabled,
@@ -12870,6 +12892,7 @@ class SdSelectGroup extends BaseDropdownEvent {
12870
12892
  "clearable": [4],
12871
12893
  "searchable": [4],
12872
12894
  "label": [1],
12895
+ "labelWidth": [8, "label-width"],
12873
12896
  "addonLabel": [1, "addon-label"],
12874
12897
  "icon": [16],
12875
12898
  "labelTooltip": [1, "label-tooltip"],
@@ -12929,6 +12952,7 @@ class SdSelectMultiple extends BaseDropdownEvent {
12929
12952
  useCheckbox = false;
12930
12953
  // props - label
12931
12954
  label = '';
12955
+ labelWidth = '';
12932
12956
  icon = undefined;
12933
12957
  labelTooltip = '';
12934
12958
  labelTooltipProps = null;
@@ -13053,7 +13077,7 @@ class SdSelectMultiple extends BaseDropdownEvent {
13053
13077
  this.handleOptionSelection(option);
13054
13078
  };
13055
13079
  render() {
13056
- return (hAsync("sd-field", { key: 'e372aab1dafc730f22c6d58cbd39d651e65a66dc', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, hAsync("div", { key: 'a73dc6abd9a05f888c39d2176f72275a329ccae0', class: {
13080
+ return (hAsync("sd-field", { key: 'f5dda40563661955aa194d841ca89628afd496cb', label: this.label, labelWidth: this.labelWidth, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, hAsync("div", { key: '81541d9adabfea7c3af1c22ed419036f56e1a353', class: {
13057
13081
  'sd-select-multiple': true,
13058
13082
  'sd-select-multiple--open': this.isOpen,
13059
13083
  'sd-select-multiple--disabled': this.disabled,
@@ -13100,6 +13124,7 @@ class SdSelectMultiple extends BaseDropdownEvent {
13100
13124
  "useAll": [4, "use-all"],
13101
13125
  "useCheckbox": [4, "use-checkbox"],
13102
13126
  "label": [1],
13127
+ "labelWidth": [8, "label-width"],
13103
13128
  "icon": [16],
13104
13129
  "labelTooltip": [1, "label-tooltip"],
13105
13130
  "labelTooltipProps": [16],
@@ -13150,6 +13175,7 @@ class SdSelectMultipleGroup extends BaseDropdownEvent {
13150
13175
  allCheckOptionLabel = '전체';
13151
13176
  // props - label
13152
13177
  label = '';
13178
+ labelWidth = '';
13153
13179
  icon = undefined;
13154
13180
  labelTooltip = '';
13155
13181
  labelTooltipProps = null;
@@ -13516,7 +13542,7 @@ class SdSelectMultipleGroup extends BaseDropdownEvent {
13516
13542
  });
13517
13543
  }
13518
13544
  render() {
13519
- return (hAsync("sd-field", { key: '3cc9e5b2f1062e216a0dd738dff6918084c5e3b4', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, hAsync("div", { key: '60be94c561be252d6cc822e6be60a5e31390a15f', class: {
13545
+ return (hAsync("sd-field", { key: 'e7d00571a19a83e8d243d0c4f7433d931d4a2304', label: this.label, labelWidth: this.labelWidth, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, hAsync("div", { key: '8c7288d853fed5bb829f1ef90af5e96a512c11b3', class: {
13520
13546
  'sd-select-multiple-group': true,
13521
13547
  'sd-select-multiple-group--open': this.isOpen,
13522
13548
  'sd-select-multiple-group--disabled': this.disabled,
@@ -13589,6 +13615,7 @@ class SdSelectMultipleGroup extends BaseDropdownEvent {
13589
13615
  "allCheckedLabel": [1, "all-checked-label"],
13590
13616
  "allCheckOptionLabel": [1, "all-check-option-label"],
13591
13617
  "label": [1],
13618
+ "labelWidth": [8, "label-width"],
13592
13619
  "icon": [16],
13593
13620
  "labelTooltip": [1, "label-tooltip"],
13594
13621
  "labelTooltipProps": [16],
@@ -13844,6 +13871,7 @@ class SdSelectV2 {
13844
13871
  dropdownHeight = '260px';
13845
13872
  disabled = false;
13846
13873
  label = '';
13874
+ labelWidth = '';
13847
13875
  addonLabel = '';
13848
13876
  error = false;
13849
13877
  hint = '';
@@ -14037,13 +14065,13 @@ class SdSelectV2 {
14037
14065
  this.closeDropdown();
14038
14066
  },
14039
14067
  };
14040
- return (hAsync("sd-field", { key: 'b2a7f6ff2b4844069703400d68e9e736689d130a', name: this.fieldName || this.internalName, label: this.label, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
14068
+ return (hAsync("sd-field", { key: 'c9f08598c8f9852ab4000f056621dfef238e16de', name: this.fieldName || this.internalName, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
14041
14069
  this.hovered = true;
14042
14070
  }, onMouseLeave: () => {
14043
14071
  this.hovered = false;
14044
- } }, hAsync("div", { key: 'f832e4df90c6874c56e1f0ec5b109a7a77f3d0d1', class: "sd-select-v2", ref: el => {
14072
+ } }, hAsync("div", { key: '302103a425963e5d577b01ad179d5af82e6f30b1', class: "sd-select-v2", ref: el => {
14045
14073
  this.triggerRef = el;
14046
- } }, hAsync("sd-select-v2-trigger", { key: '9f2eaff8ca1ece8bec8fe635372e961a42ec0f80', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: '2b8c31b66ac81a51dbd7657d5bbeeeaeb3ff0c83', ...portalProps }, hAsync("sd-select-v2-listbox", { key: '8d16190fff39d403c74966e197c09afb55e9b9f8', name: this.name, options: this.options, value: this.value, emitValue: this.emitValue, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
14074
+ } }, hAsync("sd-select-v2-trigger", { key: 'a22bca400e5d10ee29e569da04d36b9291a1dade', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: '0df4ad35bb284298708a0c1e11ce0e3c28d16ed8', ...portalProps }, hAsync("sd-select-v2-listbox", { key: '90c18612d553342be091a30e05194bab91407c76', name: this.name, options: this.options, value: this.value, emitValue: this.emitValue, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
14047
14075
  }
14048
14076
  static get watchers() { return {
14049
14077
  "isOpen": [{
@@ -14063,6 +14091,7 @@ class SdSelectV2 {
14063
14091
  "dropdownHeight": [1, "dropdown-height"],
14064
14092
  "disabled": [4],
14065
14093
  "label": [1],
14094
+ "labelWidth": [8, "label-width"],
14066
14095
  "addonLabel": [1, "addon-label"],
14067
14096
  "error": [1028],
14068
14097
  "hint": [1],
@@ -16103,6 +16132,7 @@ class SdTextarea {
16103
16132
  width = '';
16104
16133
  // props - sd-field
16105
16134
  label = '';
16135
+ labelWidth = '';
16106
16136
  addonLabel = '';
16107
16137
  hint = '';
16108
16138
  errorMessage = '';
@@ -16190,7 +16220,7 @@ class SdTextarea {
16190
16220
  '--sd-system-size-field-sm-height': 'auto',
16191
16221
  '--sd-system-radius-field-sm': `${TEXTAREA_TOKENS.radius}px`,
16192
16222
  };
16193
- return (hAsync("sd-field", { key: '4525a68094b0655721c1d8679ee32bc041cf9677', name: this.name, label: this.label, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: '8a7724f1ff423b44dd9017f0446cfeb1220fda95', class: "sd-textarea__content" }, hAsync("textarea", { key: '3eb2bafbbd31cd36ba5626aa9e0069d24d4634ec', 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 }))));
16223
+ return (hAsync("sd-field", { key: '6b2360f01a356db14659e1ebc53d8c4d8c4f671f', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: 'f43279ee861d3502c9130f1de0c47cba61ad0866', class: "sd-textarea__content" }, hAsync("textarea", { key: '0600b577417019ae36a0daba637168ebc5685220', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, autofocus: this.autoFocus, maxLength: this.maxLength, rows: this.rows, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.textareaStyle }))));
16194
16224
  }
16195
16225
  static get watchers() { return {
16196
16226
  "value": [{
@@ -16217,6 +16247,7 @@ class SdTextarea {
16217
16247
  "spellcheck": [4],
16218
16248
  "width": [8],
16219
16249
  "label": [1],
16250
+ "labelWidth": [8, "label-width"],
16220
16251
  "addonLabel": [1, "addon-label"],
16221
16252
  "hint": [1],
16222
16253
  "errorMessage": [1, "error-message"],