@sellmate/design-system 1.0.14 → 1.0.16

package/dist/cjs/sd-popover.cjs.entry.js

@@ -38,11 +38,11 @@ const SdPopover = class {
         this.showPopover = false;
     };
     render() {
-        return (index.h(index.Fragment, { key: '2a61062e200ac3ca2704756d7d1f6f16977c48f7' }, this.label ? (index.h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })) : (index.h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })), this.showPopover && (index.h("sd-floating-portal", { key: '2d624846b0c7cef09f303437989653c7320a832c', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, index.h("div", { key: 'f71d28238094e82c43d00e1ab4933b6945f5df4d', class: {
+        return (index.h(index.Fragment, { key: '883bea0d5ef88bb63b4a1a2d778aedf0bce6f000' }, this.label ? (index.h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })) : (index.h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })), this.showPopover && (index.h("sd-floating-portal", { key: '748b76d151dce05cffdd97d9803a96f14554ad3b', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, index.h("div", { key: '36bd2a265c89589b13e67107d57e8045a87d6b40', class: {
                 'sd-floating-menu': true,
                 [`sd-floating-menu--${this.placement}`]: true,
                 [this.menuClass]: !!this.menuClass,
-            } }, index.h("i", { key: '9173ac0cadb39409fee25809542420423e4a327c', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, index.h(tooltipArrow.TooltipArrow, { key: '137ffab11643f153b52bd4a068b597fd98fd7698' })), index.h("div", { key: '283f18867bd48ca58ca9621f46637f78aea108b7', class: "sd-floating-menu__content" }, this.menuTitle && index.h("div", { key: '58c8799e22cd93294d44f9320a07b4d9b51df001', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (index.h("div", { key: 'b8ef358d0e952024e361e93cc56f315fd7fa37e5', class: "sd-floating-menu__messages" }, this.messages.map(message => (index.h("div", null, message))))), this.buttons.length > 0 && (index.h("div", { key: '53abc6fde61026b2e42cdd9aa3914b86047ac1c8', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (index.h("sd-button", { ...button })))))), this.useClose && (index.h("button", { key: 'a39ea568a1cb13be87c350f646b0a519fc3f94d7', title: "close", class: "sd-floating-menu__close-button", onClick: () => this.handleClose() }, index.h("sd-icon", { key: 'a00c0ffe7b173471e4ecdb9b98116f4993745bba', name: "close", size: "12", color: "gery_55" }))))))));
+            } }, index.h("i", { key: 'cd9b298e666ce898c83576c869e60e1e5e0bb38f', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, index.h(tooltipArrow.TooltipArrow, { key: '79012e2c547a71e2084958925445ac26a8bbf7fe' })), index.h("div", { key: '0664419fe24318ced7cbca2da1b9e0741c48f333', class: "sd-floating-menu__content" }, this.menuTitle && index.h("div", { key: 'a3f9238db85a7ca245cb5f794e1a9249742c3b42', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (index.h("div", { key: '56696f99a5400276c099a8ca69f904b4a932802c', class: "sd-floating-menu__messages" }, this.messages.map(message => (index.h("div", null, message))))), this.buttons.length > 0 && (index.h("div", { key: 'cbdf8231857ccb20156d25758dbe2d1809e28656', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (index.h("sd-button", { ...button })))))), this.useClose && (index.h("button", { key: 'a2f249d05c6cd40d24005307d78aea95a841b0b8', title: "close", class: "sd-floating-menu__close-button", onClick: () => this.handleClose() }, index.h("sd-icon", { key: '13ba057c4acf7ae65cfe8d722fe8bdb69ce506ac', name: "close", size: "12", color: "gery_55" }))))))));
     }
     static get watchers() { return {
         "show": ["watchShowHandler"]

package/dist/cjs/sd-progress.cjs.entry.js

@@ -41,10 +41,10 @@ const SdProgress = class {
         return this.statusColor[this.progressStatus];
     }
     render() {
-        return (index.h("div", { key: '22105314465e3bc788e018884a68b4fe9050535b', style: {
+        return (index.h("div", { key: '43da9dac67e760bfe53b8db11c27eef7ef0d8b3b', style: {
                 '--progress-color': this.progressColor,
                 '--progress-percentage': `${this.progressPercentage}%`,
-            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && index.h("div", { key: '2434c60a8412993b3637e48d2c34c8c1010f6358', class: "sd-progress__label" }, this.label)));
+            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && index.h("div", { key: 'af4b1c44f655546fede8ad548bddc6afb7810d2b', class: "sd-progress__label" }, this.label)));
     }
     renderBarProgress() {
         return (index.h("div", { class: `sd-progress__bar sd-progress__bar--${this.progressStatus}` }, index.h("div", { class: ['sd-progress__bar__percent', this.progressPercentage < 100 ? 'proceed' : ''].join(' ') }), index.h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--left" }, this.progressPercentage, "%"), index.h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--right" }, this.progressPercentage, "%")));

package/dist/cjs/sd-select-multiple.cjs.entry.js

@@ -151,7 +151,7 @@ const SdSelectMultiple = class extends selectKeyboardNavigation.BaseDropdownEven
         this.handleOptionSelection(option);
     };
     render() {
-        return (index.h("sd-field", { key: '34ce2172ced7175b985b636bd5a65c98ed7b2765', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, useLabelRequired: this.useLabelRequired, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, index.h("div", { key: 'f1ecb7cab58c82ddba3fde97e2a139d966927891', class: {
+        return (index.h("sd-field", { key: 'a70e7fefb98428e616d2f124923dfa7ee7a7c2e2', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, useLabelRequired: this.useLabelRequired, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, index.h("div", { key: 'fda63e4e8dcc72aa0147b2981b49b7e28e377ee8', class: {
                 'sd-select-multiple': true,
                 'sd-select-multiple--open': this.isOpen,
                 'sd-select-multiple--disabled': this.disabled,

package/dist/cjs/sd-select-option-group.cjs.entry.js

@@ -48,7 +48,7 @@ const SdSelectOptionGroup = class {
         }
     };
     render() {
-        return (index.h("div", { key: '9ba2c1d9963ae5b20d8823ed4e1054f4b1ea1164', class: {
+        return (index.h("div", { key: '8e88aacd2c3122a563fcf78bcbe9731b6a29d8c5', class: {
                 'sd-select__option-group': true,
                 'sd-select__option-group--selected': !!this.isSelected,
                 'sd-select__option-group--disabled': !!this.option.disabled,
@@ -57,10 +57,10 @@ const SdSelectOptionGroup = class {
                 'sd-select__option-group--group': this.option.type === 'group',
                 'sd-select__option-group--subgroup': this.option.type === 'subgroup',
                 'sd-select__option-group--item': this.option.type === 'item',
-            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, index.h("div", { key: '6576ff206863a28062566b816cd81955f1890ec2', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (index.h("sd-checkbox", { key: 'ad1367ec16aff35a09bc1ca62d4981a29ad0c20e', value: this.isSelected, disabled: this.option.disabled, onClick: e => {
+            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, index.h("div", { key: 'be4bc7f2867ea5c86505bc9284ac3de46f7077f9', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (index.h("sd-checkbox", { key: '00063ab3a6f1d4f44671ac82dd05524968bec668', value: this.isSelected, disabled: this.option.disabled, onClick: e => {
                 e.preventDefault();
                 this.handleClick(this.option, this.isSelected, e);
-            } })), index.h("span", { key: 'a51e3950353966056edd756259d3224bd588c78b', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (index.h("span", { key: 'ed003ff2d7616096a4759b253718e5fc5a09c007', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
+            } })), index.h("span", { key: '802c908d44bf1c0db5d64bf4c8d4bab4ebe2b87c', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (index.h("span", { key: 'efd26a2d6e4e2662410de3755b70a2a2585ad0c4', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
     }
 };
 SdSelectOptionGroup.style = sdSelectOptionGroupCss();

package/dist/cjs/sd-toggle-button.cjs.entry.js

@@ -41,7 +41,7 @@ const SdToggleButton = class {
         this.change.emit(newValue);
     };
     render() {
-        return (index.h("label", { key: '9eb4abcfe8f3894198c8d8643150daa507e6f0e9', class: this.buttonClasses, "aria-label": this.label || 'toggle button' }, this.label, index.h("input", { key: 'e3d952af461da0fac978b8ce6bd55a6990907fb3', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (index.h("label", { key: '6f8d9e738490ef344ff26a4026b9de17af68041e', class: this.buttonClasses, "aria-label": this.label || 'toggle button' }, this.label, index.h("input", { key: '6d9d45c451301c4635e610fd70280be1fe65b316', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
 };
 SdToggleButton.style = sdToggleButtonCss();

package/dist/cjs/sd-toggle.cjs.entry.js

@@ -37,7 +37,7 @@ const SdToggle = class {
         this.change.emit(newValue);
     };
     render() {
-        return (index.h("label", { key: 'ca85bc0493aff9ff17108696ddb8af29734b00f5', "aria-label": this.label || 'toggle', class: this.toggleClasses }, index.h("input", { key: 'b99a4fa0d557968e50b302332778faaf1b46f8cc', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), this.label && index.h("span", { key: 'e62ca806b95463c7807f82ace61b4aa0affec962', class: "sd-toggle__label" }, this.label), index.h("div", { key: '6923da9a043df0d0d7fc0ecf2fe175857279e9b3', class: "sd-toggle__track" }, index.h("div", { key: '090dfbcf308f26b8e200d0e2cd69d44b0f5cb8bf', class: "sd-toggle__thumb" }))));
+        return (index.h("label", { key: 'c0fcd12c231fdb995b5edae756157c58b352fd0f', "aria-label": this.label || 'toggle', class: this.toggleClasses }, index.h("input", { key: 'e50042ae04830f4c276d8140725ab62cc2d0490d', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), this.label && index.h("span", { key: '99f9506a2dcea8cfd85aabf6b71243c116a2bf11', class: "sd-toggle__label" }, this.label), index.h("div", { key: '424e1ae78d5684051bd7a2b3ba89f6760f773f1c', class: "sd-toggle__track" }, index.h("div", { key: '29aab89e58022ce22f026fb694bb9b1e4531d8cf', class: "sd-toggle__thumb" }))));
     }
 };
 SdToggle.style = sdToggleCss();

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

@@ -5,6 +5,7 @@ const FORM_PARENT_TAGS = [
     'sd-select-multiple-group',
     'sd-input',
     'sd-textarea',
+    'sd-number-input',
 ];
 export class SdField {
     el;
@@ -113,15 +114,15 @@ export class SdField {
         }
     }
     render() {
-        return (h("div", { key: 'd37aff590a1721b0dfe06698566721534b81b9cb', class: {
+        return (h("div", { key: '3c69abe493110b5665795706a9ae0e525f213aca', class: {
                 'sd-field': true,
                 'sd-field--has-label': !!this.label,
                 'sd-field--has-label-inside': !!this.label && this.insideLabel,
                 [this.fieldStatus]: !!this.fieldStatus,
-            } }, h("div", { key: 'e10b6410261ed2589c7c6a691debcdb7fda696af', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: '398930ec704a709af85a30b9fe5c03acaf014959', class: {
+            } }, h("div", { key: 'decc6821b7172f5ecc2343472014c08674725904', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: 'ca5e93f049db10ecaaaab091fdf394ac4b55e292', class: {
                 'sd-field__control': true,
                 'sd-field__control--label-inside ': !!this.label && this.insideLabel,
-            } }, h("slot", { key: 'b4fc8cf7d8fefc437e6201ad1926c1583a96bdf1' }))), this.errorMsg && h("div", { key: '0fde078aeaa157f0d9e4760324cd4b89b12d5656', class: "sd-field__error-message" }, this.errorMsg)));
+            } }, h("slot", { key: '7ee38983d32985f4b4a035830bcdca0e14b2cf71' }))), this.errorMsg && h("div", { key: 'c2d6ef860ced48657b906806f2618594b094ea79', class: "sd-field__error-message" }, this.errorMsg)));
     }
     renderLabel(label) {
         if (!label)

package/dist/collection/components/sd-field/sd-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"sd-field.js","sourceRoot":"","sources":["../../../src/components/sd-field/sd-field.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h, Component, Element, Prop, State, Method } from '@stencil/core';\nimport { ValidatableField } from '../sd-form/sd-form';\nimport { Rule } from '../../types/form';\nimport { SdTooltipProps } from '../sd-tooltip/sd-tooltip';\n\nconst FORM_PARENT_TAGS = [\n 'sd-select',\n 'sd-select-multiple',\n 'sd-select-multiple-group',\n 'sd-input',\n 'sd-textarea',\n];\n\ninterface FormHostElement extends HTMLElement {\n value: any;\n error?: boolean;\n errorMsg?: string;\n}\n\n@Component({ tag: 'sd-field', styleUrl: 'sd-field.scss' })\nexport class SdField implements ValidatableField {\n @Element() el!: HTMLElement;\n\n @Prop() name: string = '';\n @Prop() rules?: Rule[] = [];\n\n @Prop({ mutable: true }) error?: boolean = false;\n @Prop({ mutable: true }) disabled?: boolean = false;\n @Prop({ mutable: true }) hovered?: boolean = false;\n @Prop({ mutable: true }) focused?: boolean = false;\n @Prop() status?: 'default' | 'pass' | 'error';\n\n // props - label\n @Prop() label: string = '';\n @Prop() insideLabel: boolean = false;\n @Prop() useLabelRequired: boolean = false;\n @Prop() labelTooltip: string = '';\n @Prop() labelTooltipProps: SdTooltipProps | null = null;\n\n @State() errorMsg: string = '';\n\n private hostElement: FormHostElement | null = null;\n\n get value() {\n  return this.hostElement?.value ?? null;\n }\n\n get fieldStatus() {\n  let status = '';\n\n  if (!!this.disabled) {\n   status = 'disabled';\n   return `sd-field--${status}`;\n  }\n\n  if (!!this.focused) {\n   status = 'focus';\n   return `sd-field--${status}`;\n  }\n\n  if (!!this.hovered) status = 'hover';\n  if (!!this.status) status = this.status;\n  if (!!this.error) status = 'error';\n  return status ? `sd-field--${status}` : '';\n }\n\n componentDidLoad() {\n  this.hostElement = this.findHostElement();\n  this.registerToForm();\n }\n\n disconnectedCallback() {\n  this.unregisterFromForm();\n }\n\n private findHostElement(): FormHostElement | null {\n  for (const tag of FORM_PARENT_TAGS) {\n   const parent = this.el.closest<FormHostElement>(tag);\n   if (parent && 'value' in parent) {\n    return parent;\n   }\n  }\n  return null;\n }\n\n private registerToForm() {\n  // if (!this.rules || this.rules.length === 0) {\n  //  console.warn('[sd-form-field] rules prop is required for sd-form integration');\n  //  return;\n  // }\n\n  const formEl = this.el.closest<HTMLSdFormElement>('sd-form');\n  if (!formEl) return;\n\n  formEl.componentOnReady().then(form => {\n   form.sdRegisterField(this);\n  });\n }\n\n private unregisterFromForm() {\n  if (!this.name) return;\n\n  const formEl = this.el.closest<HTMLSdFormElement>('sd-form');\n  formEl?.componentOnReady().then(form => {\n   form.sdUnregisterField(this.name);\n  });\n }\n\n @Method()\n async sdValidate(): Promise<boolean> {\n  if (!this.rules || this.rules.length === 0) return true;\n\n  for (const rule of this.rules) {\n   const result = rule(this.value ?? '');\n   if (result !== true) {\n    this.setError(true, result);\n    return false;\n   }\n  }\n  this.setError(false, '');\n  return true;\n }\n\n @Method()\n async sdReset() {\n  if (this.hostElement) {\n   this.hostElement.value = null;\n  }\n  this.setError(false, '');\n }\n\n @Method()\n async sdResetValidation() {\n  this.setError(false, '');\n }\n\n @Method()\n async sdFocus() {\n  this.hostElement?.focus?.();\n  this.hostElement?.scrollIntoView({ behavior: 'smooth', block: 'center' });\n }\n\n private setError(error: boolean, errorMsg: string) {\n  this.errorMsg = errorMsg;\n\n  if (this.hostElement) {\n   this.hostElement.error = error;\n  }\n }\n\n render() {\n  return (\n   <div\n    class={{\n     'sd-field': true,\n     'sd-field--has-label': !!this.label,\n     'sd-field--has-label-inside': !!this.label && this.insideLabel,\n     [this.fieldStatus]: !!this.fieldStatus,\n    }}\n   >\n    <div class=\"sd-field__wrapper\">\n     {this.renderLabel(this.label)}\n     <div\n      class={{\n       'sd-field__control': true,\n       'sd-field__control--label-inside ': !!this.label && this.insideLabel,\n      }}\n     >\n      <slot></slot>\n     </div>\n    </div>\n    {this.errorMsg && <div class=\"sd-field__error-message\">{this.errorMsg}</div>}\n   </div>\n  );\n }\n\n private renderLabel(label?: string) {\n  if (!label) return null;\n\n  return (\n   <label class={{ 'sd-field__label': true, 'sd-field__label-inside': this.insideLabel }}>\n    {this.useLabelRequired && (\n     <sd-icon\n      name=\"star\"\n      size=\"10\"\n      color=\"brilliantblue_75\"\n      class=\"sd-field__label__required-icon\"\n     ></sd-icon>\n    )}\n    <div class=\"sd-field__label__text\">{label}</div>\n    {this.labelTooltip && (\n     <sd-tooltip class=\"sd-field__label__tooltip\" {...this.labelTooltipProps}>\n      <div slot=\"content\">{this.labelTooltip}</div>\n     </sd-tooltip>\n    )}\n   </label>\n  );\n }\n}\n"]}
+{"version":3,"file":"sd-field.js","sourceRoot":"","sources":["../../../src/components/sd-field/sd-field.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h, Component, Element, Prop, State, Method } from '@stencil/core';\nimport { ValidatableField } from '../sd-form/sd-form';\nimport { Rule } from '../../types/form';\nimport { SdTooltipProps } from '../sd-tooltip/sd-tooltip';\n\nconst FORM_PARENT_TAGS = [\n 'sd-select',\n 'sd-select-multiple',\n 'sd-select-multiple-group',\n 'sd-input',\n 'sd-textarea',\n 'sd-number-input',\n];\n\ninterface FormHostElement extends HTMLElement {\n value: any;\n error?: boolean;\n errorMsg?: string;\n}\n\n@Component({ tag: 'sd-field', styleUrl: 'sd-field.scss' })\nexport class SdField implements ValidatableField {\n @Element() el!: HTMLElement;\n\n @Prop() name: string = '';\n @Prop() rules?: Rule[] = [];\n\n @Prop({ mutable: true }) error?: boolean = false;\n @Prop({ mutable: true }) disabled?: boolean = false;\n @Prop({ mutable: true }) hovered?: boolean = false;\n @Prop({ mutable: true }) focused?: boolean = false;\n @Prop() status?: 'default' | 'pass' | 'error';\n\n // props - label\n @Prop() label: string = '';\n @Prop() insideLabel: boolean = false;\n @Prop() useLabelRequired: boolean = false;\n @Prop() labelTooltip: string = '';\n @Prop() labelTooltipProps: SdTooltipProps | null = null;\n\n @State() errorMsg: string = '';\n\n private hostElement: FormHostElement | null = null;\n\n get value() {\n  return this.hostElement?.value ?? null;\n }\n\n get fieldStatus() {\n  let status = '';\n\n  if (!!this.disabled) {\n   status = 'disabled';\n   return `sd-field--${status}`;\n  }\n\n  if (!!this.focused) {\n   status = 'focus';\n   return `sd-field--${status}`;\n  }\n\n  if (!!this.hovered) status = 'hover';\n  if (!!this.status) status = this.status;\n  if (!!this.error) status = 'error';\n  return status ? `sd-field--${status}` : '';\n }\n\n componentDidLoad() {\n  this.hostElement = this.findHostElement();\n  this.registerToForm();\n }\n\n disconnectedCallback() {\n  this.unregisterFromForm();\n }\n\n private findHostElement(): FormHostElement | null {\n  for (const tag of FORM_PARENT_TAGS) {\n   const parent = this.el.closest<FormHostElement>(tag);\n   if (parent && 'value' in parent) {\n    return parent;\n   }\n  }\n  return null;\n }\n\n private registerToForm() {\n  // if (!this.rules || this.rules.length === 0) {\n  //  console.warn('[sd-form-field] rules prop is required for sd-form integration');\n  //  return;\n  // }\n\n  const formEl = this.el.closest<HTMLSdFormElement>('sd-form');\n  if (!formEl) return;\n\n  formEl.componentOnReady().then(form => {\n   form.sdRegisterField(this);\n  });\n }\n\n private unregisterFromForm() {\n  if (!this.name) return;\n\n  const formEl = this.el.closest<HTMLSdFormElement>('sd-form');\n  formEl?.componentOnReady().then(form => {\n   form.sdUnregisterField(this.name);\n  });\n }\n\n @Method()\n async sdValidate(): Promise<boolean> {\n  if (!this.rules || this.rules.length === 0) return true;\n\n  for (const rule of this.rules) {\n   const result = rule(this.value ?? '');\n   if (result !== true) {\n    this.setError(true, result);\n    return false;\n   }\n  }\n  this.setError(false, '');\n  return true;\n }\n\n @Method()\n async sdReset() {\n  if (this.hostElement) {\n   this.hostElement.value = null;\n  }\n  this.setError(false, '');\n }\n\n @Method()\n async sdResetValidation() {\n  this.setError(false, '');\n }\n\n @Method()\n async sdFocus() {\n  this.hostElement?.focus?.();\n  this.hostElement?.scrollIntoView({ behavior: 'smooth', block: 'center' });\n }\n\n private setError(error: boolean, errorMsg: string) {\n  this.errorMsg = errorMsg;\n\n  if (this.hostElement) {\n   this.hostElement.error = error;\n  }\n }\n\n render() {\n  return (\n   <div\n    class={{\n     'sd-field': true,\n     'sd-field--has-label': !!this.label,\n     'sd-field--has-label-inside': !!this.label && this.insideLabel,\n     [this.fieldStatus]: !!this.fieldStatus,\n    }}\n   >\n    <div class=\"sd-field__wrapper\">\n     {this.renderLabel(this.label)}\n     <div\n      class={{\n       'sd-field__control': true,\n       'sd-field__control--label-inside ': !!this.label && this.insideLabel,\n      }}\n     >\n      <slot></slot>\n     </div>\n    </div>\n    {this.errorMsg && <div class=\"sd-field__error-message\">{this.errorMsg}</div>}\n   </div>\n  );\n }\n\n private renderLabel(label?: string) {\n  if (!label) return null;\n\n  return (\n   <label class={{ 'sd-field__label': true, 'sd-field__label-inside': this.insideLabel }}>\n    {this.useLabelRequired && (\n     <sd-icon\n      name=\"star\"\n      size=\"10\"\n      color=\"brilliantblue_75\"\n      class=\"sd-field__label__required-icon\"\n     ></sd-icon>\n    )}\n    <div class=\"sd-field__label__text\">{label}</div>\n    {this.labelTooltip && (\n     <sd-tooltip class=\"sd-field__label__tooltip\" {...this.labelTooltipProps}>\n      <div slot=\"content\">{this.labelTooltip}</div>\n     </sd-tooltip>\n    )}\n   </label>\n  );\n }\n}\n"]}

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

@@ -6,13 +6,7 @@ export class SdModalCard {
     useCloseButton = true;
     modalTitle = 'normal';
     buttonFlexDirection = 'row';
-    buttonProps = [
-        {
-            label: '확인',
-            color: 'grey_80',
-            size: 'md',
-        },
-    ];
+    buttonProps;
     message = [];
     modalClass = '';
     close;
@@ -36,7 +30,7 @@ export class SdModalCard {
         return modalClass;
     }
     render() {
-        return (h("div", { key: '763beaa5cb19d7717ddf0a713ab5db30dee806f8', class: this.getModalClass, style: { '--point-color': this.pointColor } }, this.useCloseButton && (h("sd-icon", { key: '6b8f9326515d246f4552eceb73186022bc6ed7d7', class: "sd-modal-card__close-button", name: "close", size: "20", color: "grey_65", onClick: () => this.close.emit() })), this.type !== 'normal' && (h("sd-icon", { key: '170e999a39f8552d35714689adb75ae1aa3c1c39', class: "sd-modal-card__icon", name: this.type === 'info' ? 'notificationOutline' : 'warningOutline', size: "32", color: this.type === 'info' ? 'brilliantblue_75' : 'red_75' })), h("h2", { key: '3be3ed2fe087983cf0fa10f1b1e757110ac4983d', class: "sd-modal-card__title" }, this.modalTitle), h("slot", { key: 'f6d282734446c3a61362b1a50631595b5522f6df' }, h("div", { key: '3dd7a418947511dcd19e4c0d2dcb5cd65db6aad2', class: `sd-modal-card__message-container` }, this.message.map(msg => (h("p", { class: "sd-modal-card__message" }, msg))))), h("div", { key: '400478d5e06528b5c08fac83519a993d37a6204e', class: `sd-modal-card__button-container flex-${this.buttonFlexDirection}` }, this.buttonProps.map(button => (h("sd-button", { class: 'sd-modal-card__button', variant: button.variant ? button.variant : 'outline', label: button.label, color: button.color, size: button.size, onClick: () => !button.type || button.type === 'confirm' ? this.confirm.emit() : this.close.emit(), ...(button.class && { class: button.class }) }))))));
+        return (h("div", { key: '7374943ac733d43b7d6c027f074c2dfdfd859e51', class: this.getModalClass, style: { '--point-color': this.pointColor } }, this.useCloseButton && (h("sd-icon", { key: '75fd15b1241d8b4829372377a8212556828ef2f9', class: "sd-modal-card__close-button", name: "close", size: "20", color: "grey_65", onClick: () => this.close.emit() })), this.type !== 'normal' && (h("sd-icon", { key: '54619f342718bb9dd0589d5963ad390f1b792843', class: "sd-modal-card__icon", name: this.type === 'info' ? 'notificationOutline' : 'warningOutline', size: "32", color: this.type === 'info' ? 'brilliantblue_75' : 'red_75' })), h("h2", { key: '4197761d82baa632c67ff238388aa3162592d9ed', class: "sd-modal-card__title" }, this.modalTitle), h("slot", { key: '586ee3e295b2091d657d54f17945d4ac12541932' }, h("div", { key: 'dad5890bd4d0dfcfca45811ae58fe3e67d29e226', class: `sd-modal-card__message-container` }, this.message.map(msg => (h("p", { class: "sd-modal-card__message" }, msg))))), h("div", { key: '3af309aaa37574e5a3e74cbb3c9047216c1b74a8', class: `sd-modal-card__button-container flex-${this.buttonFlexDirection}` }, this.buttonProps?.map(button => (h("sd-button", { class: 'sd-modal-card__button', variant: button.variant ? button.variant : 'outline', label: button.label, color: button.color, size: button.size, onClick: () => !button.type || button.type === 'confirm' ? this.confirm.emit() : this.close.emit(), ...(button.class && { class: button.class }) }))))));
     }
     static get is() { return "sd-modal-card"; }
     static get originalStyleUrls() {
@@ -156,7 +150,7 @@ export class SdModalCard {
                 "mutable": false,
                 "complexType": {
                     "original": "SdModalCardButtonProps[]",
-                    "resolved": "SdModalCardButtonProps[]",
+                    "resolved": "SdModalCardButtonProps[] | undefined",
                     "references": {
                         "SdModalCardButtonProps": {
                             "location": "local",
@@ -166,14 +160,13 @@ export class SdModalCard {
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
                 "getter": false,
-                "setter": false,
-                "defaultValue": "[\n  {\n   label: '\uD655\uC778',\n   color: 'grey_80',\n   size: 'md',\n  },\n ]"
+                "setter": false
             },
             "message": {
                 "type": "unknown",

package/dist/collection/components/sd-modal-card/sd-modal-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"sd-modal-card.js","sourceRoot":"","sources":["../../../src/components/sd-modal-card/sd-modal-card.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, Prop, h } from '@stencil/core';\nimport { resolveColor } from '../../utils/color';\nimport { ButtonSize, ButtonVariant } from '../sd-button/sd-button';\n\nexport interface SdModalCardButtonProps {\n label: string;\n color: string;\n size: ButtonSize;\n variant?: ButtonVariant;\n class?: string;\n type?: 'confirm' | 'cancel';\n}\n\n@Component({\n tag: 'sd-modal-card',\n styleUrl: 'sd-modal-card.scss',\n})\nexport class SdModalCard {\n @Prop() type: 'info' | 'warning' | 'normal' = 'info';\n @Prop() system: 'normal' | 'positive' | 'negative' = 'normal';\n @Prop() useCloseButton: boolean = true;\n @Prop() modalTitle: string = 'normal';\n @Prop() buttonFlexDirection: 'row' | 'column' = 'row';\n @Prop() buttonProps: SdModalCardButtonProps[] = [\n  {\n   label: '확인',\n   color: 'grey_80',\n   size: 'md',\n  },\n ];\n @Prop() message: string[] = [];\n @Prop()\n modalClass: string = '';\n\n @Event({ eventName: 'sdClose' }) close!: EventEmitter<MouseEvent>;\n @Event({ eventName: 'sdConfirm' }) confirm!: EventEmitter<MouseEvent>;\n\n private get pointColor(): string {\n  if (this.type !== 'normal') {\n   return 'grey_95';\n  }\n\n  switch (this.system) {\n   case 'positive':\n    return resolveColor('brilliantblue_75');\n   case 'negative':\n    return resolveColor('red_75');\n   default:\n    return resolveColor('grey_95');\n  }\n }\n\n private get getModalClass(): string {\n  let modalClass = `sd-modal-card ${this.modalClass}`;\n  modalClass += ' ' + `sd-modal-card-${this.system}`;\n  return modalClass;\n }\n\n render() {\n  return (\n   <div class={this.getModalClass} style={{ '--point-color': this.pointColor }}>\n    {this.useCloseButton && (\n     <sd-icon\n      class=\"sd-modal-card__close-button\"\n      name=\"close\"\n      size=\"20\"\n      color=\"grey_65\"\n      onClick={() => this.close.emit()}\n     />\n    )}\n    {this.type !== 'normal' && (\n     <sd-icon\n      class=\"sd-modal-card__icon\"\n      name={this.type === 'info' ? 'notificationOutline' : 'warningOutline'}\n      size=\"32\"\n      color={this.type === 'info' ? 'brilliantblue_75' : 'red_75'}\n     />\n    )}\n    <h2 class=\"sd-modal-card__title\">{this.modalTitle}</h2>\n    <slot>\n     <div class={`sd-modal-card__message-container`}>\n      {this.message.map(msg => (\n       <p class=\"sd-modal-card__message\">{msg}</p>\n      ))}\n     </div>\n    </slot>\n    <div class={`sd-modal-card__button-container flex-${this.buttonFlexDirection}`}>\n     {this.buttonProps.map(button => (\n      <sd-button\n       class={'sd-modal-card__button'}\n       variant={button.variant ? button.variant : 'outline'}\n       label={button.label}\n       color={button.color}\n       size={button.size}\n       onClick={() =>\n        !button.type || button.type === 'confirm' ? this.confirm.emit() : this.close.emit()\n       }\n       {...(button.class && { class: button.class })}\n      ></sd-button>\n     ))}\n    </div>\n   </div>\n  );\n }\n}\n"]}
+{"version":3,"file":"sd-modal-card.js","sourceRoot":"","sources":["../../../src/components/sd-modal-card/sd-modal-card.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, Prop, h } from '@stencil/core';\nimport { resolveColor } from '../../utils/color';\nimport { ButtonSize, ButtonVariant } from '../sd-button/sd-button';\n\nexport interface SdModalCardButtonProps {\n label: string;\n color: string;\n size: ButtonSize;\n variant?: ButtonVariant;\n class?: string;\n type?: 'confirm' | 'cancel';\n}\n\n@Component({\n tag: 'sd-modal-card',\n styleUrl: 'sd-modal-card.scss',\n})\nexport class SdModalCard {\n @Prop() type: 'info' | 'warning' | 'normal' = 'info';\n @Prop() system: 'normal' | 'positive' | 'negative' = 'normal';\n @Prop() useCloseButton: boolean = true;\n @Prop() modalTitle: string = 'normal';\n @Prop() buttonFlexDirection: 'row' | 'column' = 'row';\n @Prop() buttonProps?: SdModalCardButtonProps[];\n @Prop() message: string[] = [];\n @Prop()\n modalClass: string = '';\n\n @Event({ eventName: 'sdClose' }) close!: EventEmitter<MouseEvent>;\n @Event({ eventName: 'sdConfirm' }) confirm!: EventEmitter<MouseEvent>;\n\n private get pointColor(): string {\n  if (this.type !== 'normal') {\n   return 'grey_95';\n  }\n\n  switch (this.system) {\n   case 'positive':\n    return resolveColor('brilliantblue_75');\n   case 'negative':\n    return resolveColor('red_75');\n   default:\n    return resolveColor('grey_95');\n  }\n }\n\n private get getModalClass(): string {\n  let modalClass = `sd-modal-card ${this.modalClass}`;\n  modalClass += ' ' + `sd-modal-card-${this.system}`;\n  return modalClass;\n }\n\n render() {\n  return (\n   <div class={this.getModalClass} style={{ '--point-color': this.pointColor }}>\n    {this.useCloseButton && (\n     <sd-icon\n      class=\"sd-modal-card__close-button\"\n      name=\"close\"\n      size=\"20\"\n      color=\"grey_65\"\n      onClick={() => this.close.emit()}\n     />\n    )}\n    {this.type !== 'normal' && (\n     <sd-icon\n      class=\"sd-modal-card__icon\"\n      name={this.type === 'info' ? 'notificationOutline' : 'warningOutline'}\n      size=\"32\"\n      color={this.type === 'info' ? 'brilliantblue_75' : 'red_75'}\n     />\n    )}\n    <h2 class=\"sd-modal-card__title\">{this.modalTitle}</h2>\n    <slot>\n     <div class={`sd-modal-card__message-container`}>\n      {this.message.map(msg => (\n       <p class=\"sd-modal-card__message\">{msg}</p>\n      ))}\n     </div>\n    </slot>\n    <div class={`sd-modal-card__button-container flex-${this.buttonFlexDirection}`}>\n     {this.buttonProps?.map(button => (\n      <sd-button\n       class={'sd-modal-card__button'}\n       variant={button.variant ? button.variant : 'outline'}\n       label={button.label}\n       color={button.color}\n       size={button.size}\n       onClick={() =>\n        !button.type || button.type === 'confirm' ? this.confirm.emit() : this.close.emit()\n       }\n       {...(button.class && { class: button.class })}\n      ></sd-button>\n     ))}\n    </div>\n   </div>\n  );\n }\n}\n"]}

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

@@ -12,9 +12,6 @@ sd-icon .sd-icon--rotate-270 {
   transform: rotate(270deg);
 }
 
-sd-number-input .sd-number-input-container {
-  display: inline-flex;
-}
 sd-number-input .sd-number-input {
   box-sizing: border-box;
   display: flex;
@@ -22,34 +19,12 @@ sd-number-input .sd-number-input {
   align-items: center;
   height: 28px;
   padding: 4px 8px;
-  border: 1px solid #aaaaaa;
   border-radius: 4px;
   color: #333333;
   font-size: 12px;
   line-height: 20px;
-  background: white;
   position: relative;
 }
-sd-number-input .sd-number-input--hovered {
-  border-color: #0075ff;
-  box-shadow: 0 0 4px 0 rgba(0, 113, 255, 0.4);
-}
-sd-number-input .sd-number-input.sd-number-input--error {
-  border-color: #fb4444;
-}
-sd-number-input .sd-number-input.sd-number-input--pass {
-  border-color: #2bce6c;
-}
-sd-number-input .sd-number-input.sd-number-input--disabled {
-  background-color: #eeeeee !important;
-  border-color: #cccccc !important;
-  cursor: not-allowed !important;
-  box-shadow: none !important;
-}
-sd-number-input .sd-number-input.sd-number-input--disabled .sd-number-input__input {
-  color: #888888 !important;
-  cursor: not-allowed !important;
-}
 sd-number-input .sd-number-input .sd-number-input__input {
   display: block;
   width: 100%;
@@ -66,6 +41,10 @@ sd-number-input .sd-number-input .sd-number-input__input {
   padding-inline: 0;
   text-align: right;
 }
+sd-number-input .sd-number-input .sd-number-input__input[disabled] {
+  cursor: not-allowed;
+  color: #888888;
+}
 sd-number-input .sd-number-input .sd-number-input__input::placeholder {
   font-size: 12px;
   height: 20px;

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

@@ -1,4 +1,5 @@
 import { h, } from "@stencil/core";
+import { nanoid } from "nanoid/non-secure";
 export class SdNumberInput {
     el;
     min = Number.NEGATIVE_INFINITY;
@@ -8,20 +9,24 @@ export class SdNumberInput {
     useDecimal = false;
     value = null;
     label;
+    insideLabel = false;
     placeholder = '입력해 주세요.';
     disabled = false;
     width;
-    rules;
+    rules = [];
     autoFocus = false;
     status;
     inputClass = '';
     readonly = false;
     inputStyle = {};
+    error = false;
+    focused = false;
+    hovered = false;
     internalValue = null;
     displayValue = '';
-    hovered = false;
-    error = false;
     nativeEl = undefined;
+    formField;
+    name = nanoid();
     update;
     focus;
     blur;
@@ -92,16 +97,18 @@ export class SdNumberInput {
             this.value = newValue;
             this.update?.emit(newValue);
         }
-        if (!this.rules || this.rules.length === 0)
-            return;
-        this.error = false;
-        for (const rule of this.rules) {
-            const result = rule(newValue);
-            if (result !== true) {
-                this.error = true;
-                break;
-            }
-        }
+    }
+    async sdValidate() {
+        this.formField?.sdValidate();
+    }
+    async sdReset() {
+        this.formField?.sdReset();
+    }
+    async sdResetValidate() {
+        this.formField?.sdResetValidation();
+    }
+    async sdFocus() {
+        this.formField?.sdFocus();
     }
     componentWillLoad() {
         if (this.value !== null && this.value !== undefined) {
@@ -164,11 +171,15 @@ export class SdNumberInput {
     handleFocus = (event) => {
         this.focus?.emit(event);
     };
-    handleBlur = (event) => {
+    handleBlur = async (event) => {
         this.updateDisplay();
         if (this.nativeEl) {
             this.nativeEl.value = this.displayValue;
         }
+        if (this.rules && this.rules.length > 0) {
+            await this.formField?.sdValidate();
+        }
+        this.focused = false;
         this.blur?.emit(event);
     };
     handleKeyDown = (event) => {
@@ -228,17 +239,17 @@ export class SdNumberInput {
         const inputStyles = {
             textAlign: this.useButton ? 'center' : 'right',
         };
-        return (h("div", { key: 'b46cd55c205c9d0f0b7e4af181cbef7cc558f464', class: "sd-number-input-container", style: inputWidth, onFocus: this.handleFocus, onBlur: this.handleBlur }, this.label && h("div", { key: 'f2e0ef64df2132b0efca4bd5d50441f191fcc307', class: "sd-number-input__label" }, this.label), h("label", { key: '98920eb7ee7e07ad4719069201beffdeb3c8510a', class: {
+        return (h("sd-field", { key: 'ea231ae67c1e209d4c9adca87bd9760bcd28ec51', name: this.name, label: this.label, insideLabel: this.insideLabel, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, ref: el => (this.formField = el), style: inputWidth }, h("label", { key: '76bbc2fb1e36d25887ac0559ff7f34617a35883e', class: {
                 'sd-number-input': true,
                 [this.getInputStatus()]: true,
                 'sd-number-input--with-buttons': this.useButton,
-            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, h("input", { key: 'b8ffd42e1a1d3936f6f8b5bf2351b46d31a193ad', ref: el => (this.nativeEl = el), class: `sd-number-input__input ${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, style: inputStyles }), this.useButton && (h("div", { key: 'b94de21e7b6b1020daac92cfefe9215444704a43', class: "sd-number-input__buttons" }, h("button", { key: '0a96725cc1c469db6c7520d21df06f757d20ffc6', type: "button", class: {
+            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, h("input", { key: '7978c4e8383017b9a8213e827f92c2d9ccc7b275', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__input ${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, style: inputStyles, onFocus: this.handleFocus, onBlur: this.handleBlur }), this.useButton && (h("div", { key: 'aff328615ab939724ee0f77f4b7ac8b046eb16d1', class: "sd-number-input__buttons" }, h("button", { key: 'a27a592cc4e74b3272e3473988dbd877e9d0afd3', type: "button", class: {
                 'sd-number-input__button': true,
                 'sd-number-input__button--decrement': true,
-            }, disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: '598f637e2ad3cb46f4c881552dc2812c86964c68', name: "minus", size: 12, color: this.isDecrementDisabled() ? 'grey_45' : 'brilliantblue_70' })), h("button", { key: '03532b7f895aaa6b616739c1a2272c0a517a2140', type: "button", class: {
+            }, disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: '79853e0a9ab38cfaafbd8027dae1a0732702d5bc', name: "minus", size: 12, color: this.isDecrementDisabled() ? 'grey_45' : 'brilliantblue_70' })), h("button", { key: '0993c22719cdbdf3982dea138653ba1f2f6aa523', type: "button", class: {
                 'sd-number-input__button': true,
                 'sd-number-input__button--increment': true,
-            }, disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: 'bd9d565d790305f4153e52a4323dce18559df970', name: "add", size: 12, color: this.isIncrementDisabled() ? 'grey_45' : 'brilliantblue_70' })))))));
+            }, disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: '6da02951a443a1a46fd44f6bd7c1a7ed41af0b01', name: "add", size: 12, color: this.isIncrementDisabled() ? 'grey_45' : 'brilliantblue_70' })))))));
     }
     static get is() { return "sd-number-input"; }
     static get originalStyleUrls() {
@@ -392,6 +403,26 @@ export class SdNumberInput {
                 "reflect": false,
                 "attribute": "label"
             },
+            "insideLabel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "inside-label",
+                "defaultValue": "false"
+            },
             "placeholder": {
                 "type": "string",
                 "mutable": false,
@@ -455,12 +486,13 @@ export class SdNumberInput {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "Array<(value: string | number | null) => boolean | string>",
-                    "resolved": "(((value: string | number | null) => string | boolean)[]) | undefined",
+                    "original": "Rule[]",
+                    "resolved": "Rule[] | undefined",
                     "references": {
-                        "Array": {
-                            "location": "global",
-                            "id": "global::Array"
+                        "Rule": {
+                            "location": "import",
+                            "path": "../../types/form",
+                            "id": "src/types/form.d.ts::Rule"
                         }
                     }
                 },
@@ -471,7 +503,8 @@ export class SdNumberInput {
                     "text": ""
                 },
                 "getter": false,
-                "setter": false
+                "setter": false,
+                "defaultValue": "[]"
             },
             "autoFocus": {
                 "type": "boolean",
@@ -569,15 +602,73 @@ export class SdNumberInput {
                 "getter": false,
                 "setter": false,
                 "defaultValue": "{}"
+            },
+            "error": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error",
+                "defaultValue": "false"
+            },
+            "focused": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "focused",
+                "defaultValue": "false"
+            },
+            "hovered": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hovered",
+                "defaultValue": "false"
             }
         };
     }
     static get states() {
         return {
             "internalValue": {},
-            "displayValue": {},
-            "hovered": {},
-            "error": {}
+            "displayValue": {}
         };
     }
     static get events() {
@@ -642,6 +733,74 @@ export class SdNumberInput {
     }
     static get methods() {
         return {
+            "sdValidate": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "sdReset": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "sdResetValidate": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "sdFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
             "sdGetNativeElement": {
                 "complexType": {
                     "signature": "() => Promise<HTMLInputElement | null>",