@sellmate/design-system 1.0.14 → 1.0.16

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

@@ -1,7 +1,12 @@
 import { p as proxyCustomElement, H, c as createEvent, h, t as transformTag } from './p-CR2Jbl0B.js';
-import { d as defineCustomElement$2 } from './p-zvhzq4Sw.js';
+import { n as nanoid } from './p-CCwNgVmC.js';
+import { d as defineCustomElement$6 } from './p-lbT0o9hE.js';
+import { d as defineCustomElement$5 } from './p-C2pN-_wD.js';
+import { d as defineCustomElement$4 } from './p-BdgLMKjb.js';
+import { d as defineCustomElement$3 } from './p-zvhzq4Sw.js';
+import { d as defineCustomElement$2 } from './p-CiNjpVRK.js';
 
-const sdNumberInputCss = () => `sd-icon{display:inline-block;line-height:0}sd-icon .sd-icon--rotate-90{transform:rotate(90deg)}sd-icon .sd-icon--rotate-180{transform:rotate(180deg)}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;width:var(--input-width, 100%);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%;height:20px;line-height:20px;border:none;outline:none;background:transparent;font-size:inherit;color:#333333;margin-left:4px;margin-right:4px;padding-block:0;padding-inline:0;text-align:right}sd-number-input .sd-number-input .sd-number-input__input::placeholder{font-size:12px;height:20px;line-height:20px;color:#aaaaaa}sd-number-input .sd-number-input .sd-number-input__clear-icon{cursor:pointer;margin-left:8px}sd-number-input .sd-number-input .sd-number-input__buttons{padding:4px;display:flex;justify-content:space-between;align-items:center;position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity 0.2s ease}sd-number-input .sd-number-input .sd-number-input__button{width:20px;height:20px;border:none;border-radius:2px;background-color:#eff6ff;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;margin:0;transition:background-color 0.2s ease}sd-number-input .sd-number-input .sd-number-input__button:hover:not(:disabled){background-color:#e6f1ff}sd-number-input .sd-number-input .sd-number-input__button:disabled{background-color:#eeeeee;cursor:not-allowed}sd-number-input .sd-number-input .sd-number-input__button--decrement{border-bottom-left-radius:0;border-bottom-right-radius:0}sd-number-input .sd-number-input .sd-number-input__button--increment{border-top-left-radius:0;border-top-right-radius:0}sd-number-input .sd-number-input .sd-number-input__label{margin-bottom:8px;font-weight:500;color:#333333}sd-number-input:focus-within .sd-number-input__buttons{opacity:1;pointer-events:auto}sd-number-input:focus-within .sd-number-input{border-color:#0075ff;box-shadow:0 0 4px 0 rgba(0, 113, 255, 0.4)}`;
+const sdNumberInputCss = () => `sd-icon{display:inline-block;line-height:0}sd-icon .sd-icon--rotate-90{transform:rotate(90deg)}sd-icon .sd-icon--rotate-180{transform:rotate(180deg)}sd-icon .sd-icon--rotate-270{transform:rotate(270deg)}sd-number-input .sd-number-input{box-sizing:border-box;display:flex;width:var(--input-width, 100%);align-items:center;height:28px;padding:4px 8px;border-radius:4px;color:#333333;font-size:12px;line-height:20px;position:relative}sd-number-input .sd-number-input .sd-number-input__input{display:block;width:100%;height:20px;line-height:20px;border:none;outline:none;background:transparent;font-size:inherit;color:#333333;margin-left:4px;margin-right:4px;padding-block:0;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;line-height:20px;color:#aaaaaa}sd-number-input .sd-number-input .sd-number-input__clear-icon{cursor:pointer;margin-left:8px}sd-number-input .sd-number-input .sd-number-input__buttons{padding:4px;display:flex;justify-content:space-between;align-items:center;position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity 0.2s ease}sd-number-input .sd-number-input .sd-number-input__button{width:20px;height:20px;border:none;border-radius:2px;background-color:#eff6ff;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;margin:0;transition:background-color 0.2s ease}sd-number-input .sd-number-input .sd-number-input__button:hover:not(:disabled){background-color:#e6f1ff}sd-number-input .sd-number-input .sd-number-input__button:disabled{background-color:#eeeeee;cursor:not-allowed}sd-number-input .sd-number-input .sd-number-input__button--decrement{border-bottom-left-radius:0;border-bottom-right-radius:0}sd-number-input .sd-number-input .sd-number-input__button--increment{border-top-left-radius:0;border-top-right-radius:0}sd-number-input .sd-number-input .sd-number-input__label{margin-bottom:8px;font-weight:500;color:#333333}sd-number-input:focus-within .sd-number-input__buttons{opacity:1;pointer-events:auto}sd-number-input:focus-within .sd-number-input{border-color:#0075ff;box-shadow:0 0 4px 0 rgba(0, 113, 255, 0.4)}`;
 
 const SdNumberInput$1 = /*@__PURE__*/ proxyCustomElement(class SdNumberInput extends H {
     constructor(registerHost) {
@@ -21,20 +26,24 @@ const SdNumberInput$1 = /*@__PURE__*/ proxyCustomElement(class SdNumberInput ext
     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;
@@ -105,16 +114,18 @@ const SdNumberInput$1 = /*@__PURE__*/ proxyCustomElement(class SdNumberInput ext
             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) {
@@ -177,11 +188,15 @@ const SdNumberInput$1 = /*@__PURE__*/ proxyCustomElement(class SdNumberInput ext
     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) => {
@@ -241,17 +256,17 @@ const SdNumberInput$1 = /*@__PURE__*/ proxyCustomElement(class SdNumberInput ext
         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 watchers() { return {
         "value": ["valueChanged"],
@@ -266,6 +281,7 @@ const SdNumberInput$1 = /*@__PURE__*/ proxyCustomElement(class SdNumberInput ext
         "useDecimal": [4, "use-decimal"],
         "value": [1032],
         "label": [1],
+        "insideLabel": [4, "inside-label"],
         "placeholder": [1],
         "disabled": [4],
         "width": [8],
@@ -275,10 +291,15 @@ const SdNumberInput$1 = /*@__PURE__*/ proxyCustomElement(class SdNumberInput ext
         "inputClass": [1, "input-class"],
         "readonly": [4],
         "inputStyle": [16],
+        "error": [1028],
+        "focused": [1028],
+        "hovered": [1028],
         "internalValue": [32],
         "displayValue": [32],
-        "hovered": [32],
-        "error": [32],
+        "sdValidate": [64],
+        "sdReset": [64],
+        "sdResetValidate": [64],
+        "sdFocus": [64],
         "sdGetNativeElement": [64]
     }, undefined, {
         "value": ["valueChanged"],
@@ -288,14 +309,34 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["sd-number-input", "sd-icon"];
+    const components = ["sd-number-input", "sd-button", "sd-field", "sd-floating-portal", "sd-icon", "sd-tooltip"];
     components.forEach(tagName => { switch (tagName) {
         case "sd-number-input":
             if (!customElements.get(transformTag(tagName))) {
                 customElements.define(transformTag(tagName), SdNumberInput$1);
             }
             break;
+        case "sd-button":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$6();
+            }
+            break;
+        case "sd-field":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$5();
+            }
+            break;
+        case "sd-floating-portal":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$4();
+            }
+            break;
         case "sd-icon":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$3();
+            }
+            break;
+        case "sd-tooltip":
             if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$2();
             }

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

@@ -1 +1 @@
-{"file":"sd-number-input.js","mappings":"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","names":["SdNumberInput","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-number-input/sd-number-input.scss?tag=sd-number-input","src/components/sd-number-input/sd-number-input.tsx"],"sourcesContent":["@import 'variables';\n@import '../sd-icon/sd-icon.scss';\n\nsd-number-input {\n .sd-number-input-container {\n  display: inline-flex;\n }\n .sd-number-input {\n  box-sizing: border-box;\n  display: flex;\n  width: var(--input-width, 100%);\n  align-items: center;\n  height: 28px;\n  padding: 4px 8px;\n  border: 1px solid $grey_55;\n  border-radius: 4px;\n  color: $grey_90;\n  font-size: 12px;\n  line-height: 20px;\n  background: white;\n  position: relative;\n\n  &--hovered {\n   border-color: $brilliantblue_75;\n   box-shadow: 0 0 4px 0 #0071ff66;\n  }\n\n  &.sd-number-input--error {\n   border-color: $red_70;\n  }\n\n  &.sd-number-input--pass {\n   border-color: $green_65;\n  }\n\n  &.sd-number-input--disabled {\n   background-color: $grey_20 !important;\n   border-color: $grey_45 !important;\n   cursor: not-allowed !important;\n   box-shadow: none !important;\n\n   .sd-number-input__input {\n    color: $grey_65 !important;\n    cursor: not-allowed !important;\n   }\n  }\n\n  .sd-number-input__input {\n   display: block;\n   width: 100%;\n   height: 20px;\n   line-height: 20px;\n   border: none;\n   outline: none;\n   background: transparent;\n   font-size: inherit;\n   color: $grey_90;\n   margin-left: 4px;\n   margin-right: 4px;\n   padding-block: 0;\n   padding-inline: 0;\n   text-align: right;\n\n   &::placeholder {\n    font-size: 12px;\n    height: 20px;\n    line-height: 20px;\n    color: $grey_55;\n   }\n  }\n\n  .sd-number-input__clear-icon {\n   cursor: pointer;\n   margin-left: 8px;\n  }\n\n  .sd-number-input__buttons {\n   padding: 4px;\n   display: flex;\n   justify-content: space-between;\n   align-items: center;\n   position: absolute;\n   inset: 0;\n   opacity: 0;\n   pointer-events: none;\n   transition: opacity 0.2s ease;\n  }\n\n  .sd-number-input__button {\n   width: 20px;\n   height: 20px;\n   border: none;\n   border-radius: 2px;\n   background-color: $brilliantblue_10;\n   cursor: pointer;\n   display: flex;\n   align-items: center;\n   justify-content: center;\n   padding: 0;\n   margin: 0;\n   transition: background-color 0.2s ease;\n\n   &:hover:not(:disabled) {\n    background-color: $brilliantblue_20;\n   }\n\n   &:disabled {\n    background-color: $grey_20;\n    cursor: not-allowed;\n   }\n\n   &--decrement {\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n   }\n\n   &--increment {\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n   }\n  }\n\n  .sd-number-input__label {\n   margin-bottom: 8px;\n   font-weight: 500;\n   color: $grey_90;\n  }\n }\n\n &:focus-within {\n  .sd-number-input__buttons {\n   opacity: 1;\n   pointer-events: auto;\n  }\n\n  .sd-number-input {\n   border-color: $brilliantblue_75;\n   box-shadow: 0 0 4px 0 #0071ff66;\n  }\n }\n}\n","import {\n Component,\n Element,\n Prop,\n State,\n Watch,\n Event,\n EventEmitter,\n h,\n Method,\n} from '@stencil/core';\n\n@Component({\n tag: 'sd-number-input',\n styleUrl: 'sd-number-input.scss',\n})\nexport class SdNumberInput {\n @Element() el!: HTMLElement;\n\n @Prop() min: number = Number.NEGATIVE_INFINITY;\n @Prop() max: number = Number.POSITIVE_INFINITY;\n @Prop() step: number = 1;\n @Prop() useButton: boolean = false;\n @Prop() useDecimal: boolean = false;\n\n @Prop({ mutable: true }) value?: string | number | null = null;\n @Prop() label?: string;\n @Prop() placeholder: string = '입력해 주세요.';\n @Prop() disabled: boolean = false;\n @Prop() width?: number | string;\n @Prop() rules?: Array<(value: string | number | null) => boolean | string>;\n @Prop() autoFocus: boolean = false;\n @Prop() status?: 'default' | 'pass' | 'error';\n @Prop() inputClass: string = '';\n @Prop() readonly: boolean = false;\n @Prop() inputStyle: { [key: string]: string } = {};\n\n @State() private internalValue: number | null = null;\n @State() private displayValue: string = '';\n @State() private hovered: boolean = false;\n @State() private error: boolean = false;\n\n private nativeEl: HTMLInputElement | undefined = undefined;\n\n @Event({ eventName: 'sdUpdate' }) update?: EventEmitter<number | null>;\n @Event({ eventName: 'sdFocus' }) focus?: EventEmitter<Event>;\n @Event({ eventName: 'sdBlur' }) blur?: EventEmitter<Event>;\n\n private formatWithCommas(value: number | null): string {\n  if (value === null || value === undefined) return '';\n\n  const isNegative = value < 0;\n  const absValue = Math.abs(value);\n\n  const [intPart, decPart] = absValue.toString().split('.');\n  const formatted = (+intPart).toLocaleString();\n\n  const result = isNegative ? '-' + formatted : formatted;\n  return decPart ? result + '.' + decPart : String(result);\n }\n\n private parseInput(input: string): number | null {\n  if (!input || input.trim() === '') return null;\n\n  const cleaned = input.replace(/,/g, '').trim();\n\n  // -로 시작을 할 수 있을 수 있고, 소수점 0.n | .n\n  if (!/^-?(\\d+\\.?\\d*|\\d*\\.\\d+)$/.test(cleaned)) {\n   return null;\n  }\n\n  const parsed = parseFloat(cleaned);\n\n  if (isNaN(parsed)) return null;\n\n  // 소수점 사용 하지 않는데 . 이 있는 경우\n  if (!this.useDecimal && cleaned.includes('.')) {\n   return null;\n  }\n\n  return parsed;\n }\n\n private clampMinMax(value: number): number {\n  return Math.min(Math.max(value, this.min), this.max);\n }\n\n private updateDisplay() {\n  this.displayValue = this.formatWithCommas(this.internalValue);\n }\n\n private isIncrementDisabled(): boolean {\n  if (this.disabled || this.readonly) return true;\n  if (this.internalValue !== null) {\n   return this.internalValue >= this.max;\n  }\n  return false;\n }\n\n private isDecrementDisabled(): boolean {\n  if (this.disabled || this.readonly) return true;\n  if (this.internalValue !== null) {\n   return this.internalValue <= this.min;\n  }\n  return false;\n }\n\n @Watch('value')\n valueChanged(newValue: string | number | null) {\n  if (newValue === null || newValue === '') {\n   this.internalValue = null;\n  } else {\n   const parsed = typeof newValue === 'string' ? this.parseInput(newValue) : newValue;\n   if (parsed !== null) {\n    this.internalValue = this.clampMinMax(parsed);\n   }\n  }\n  this.updateDisplay();\n }\n\n @Watch('internalValue')\n internalValueChanged(newValue: number | null) {\n  this.updateDisplay();\n\n  if (newValue !== this.value) {\n   this.value = newValue;\n   this.update?.emit(newValue);\n  }\n\n  if (!this.rules || this.rules.length === 0) return;\n  this.error = false;\n  for (const rule of this.rules) {\n   const result = rule(newValue);\n   if (result !== true) {\n    this.error = true;\n    break;\n   }\n  }\n }\n\n componentWillLoad() {\n  if (this.value !== null && this.value !== undefined) {\n   const parsed = typeof this.value === 'string' ? this.parseInput(this.value) : this.value;\n   if (parsed !== null) {\n    this.internalValue = this.clampMinMax(parsed);\n   }\n  }\n  this.updateDisplay();\n }\n\n // TODO: 현재 숫자를 크게 넣어서 숫자e+21등의 형식으로 변환되면 값이 바뀌지않음 수정 필요\n private handleInput = (event: Event) => {\n  const target = event.target as HTMLInputElement;\n  const inputValue = target.value;\n\n  if (inputValue === '') {\n   this.internalValue = null;\n   this.displayValue = '';\n   return;\n  }\n\n  const commasRemoved = inputValue.replace(/,/g, '');\n\n  // 만약에 소수점 (.) 이 여러개 일 경우\n  const decimalCount = (commasRemoved.match(/\\./g) || []).length;\n  if (decimalCount > 1) {\n   target.value = this.displayValue;\n   return;\n  }\n\n  // 가능: \"-\", \".\", \"-.\" (단순 기호만 있는 경우)\n  if (commasRemoved === '-' || commasRemoved === '.' || commasRemoved === '-.') {\n   target.value = commasRemoved;\n   return;\n  }\n\n  // 숫자 뒤에 . 이 있는 경우 (예: \"1000.\") -> 콤마 포맷 적용 + . 유지\n  if (commasRemoved.endsWith('.') && decimalCount === 1) {\n   const numberPart = commasRemoved.slice(0, -1);\n   const parsed = this.parseInput(numberPart);\n   if (parsed !== null) {\n    const formatted = this.formatWithCommas(parsed);\n    target.value = formatted + '.';\n    return;\n   }\n  }\n\n  const parsed = this.parseInput(commasRemoved);\n\n  if (parsed !== null) {\n   if (parsed < this.min) {\n    target.value = this.displayValue;\n    return;\n   }\n\n   if (parsed > this.max) {\n    target.value = this.displayValue;\n    return;\n   }\n\n   this.internalValue = parsed;\n   this.displayValue = this.formatWithCommas(parsed);\n   target.value = this.displayValue;\n  } else {\n   target.value = this.displayValue;\n  }\n };\n\n private handleFocus = (event: Event) => {\n  this.focus?.emit(event);\n };\n\n private handleBlur = (event: Event) => {\n  this.updateDisplay();\n  if (this.nativeEl) {\n   this.nativeEl.value = this.displayValue;\n  }\n  this.blur?.emit(event);\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n  if (event.key === 'ArrowUp') {\n   event.preventDefault();\n   this.handleIncrement();\n  } else if (event.key === 'ArrowDown') {\n   event.preventDefault();\n   this.handleDecrement();\n  }\n };\n\n private handleIncrement = () => {\n  if (this.isIncrementDisabled()) return;\n\n  const currentVal = this.internalValue ?? this.min ?? 0;\n  let nextVal = currentVal + this.step;\n\n  if (nextVal > this.max) {\n   nextVal = this.max;\n  }\n\n  if (nextVal === currentVal) return;\n\n  this.internalValue = nextVal;\n };\n\n private handleDecrement = () => {\n  if (this.isDecrementDisabled()) return;\n\n  const currentVal = this.internalValue ?? this.min ?? 0;\n  let nextVal = currentVal - this.step;\n\n  if (nextVal < this.min) {\n   nextVal = this.min;\n  }\n\n  if (nextVal === currentVal) return;\n\n  this.internalValue = nextVal;\n };\n\n @Method()\n async sdGetNativeElement(): Promise<HTMLInputElement | null> {\n  return this.nativeEl || null;\n }\n\n getInputStatus() {\n  if (this.disabled) return 'sd-number-input--disabled';\n  if (this.hovered) return 'sd-number-input--hovered';\n  if (this.status) return `sd-number-input--${this.status}`;\n  if (this.error) return 'sd-number-input--error';\n  return '';\n }\n\n render() {\n  const inputWidth = this.width\n   ? {\n      '--input-width': typeof this.width === 'number' ? `${this.width}px` : this.width,\n     }\n   : {};\n\n  const inputStyles = {\n   textAlign: this.useButton ? 'center' : 'right',\n  };\n\n  return (\n   <div\n    class=\"sd-number-input-container\"\n    style={inputWidth}\n    onFocus={this.handleFocus}\n    onBlur={this.handleBlur}\n   >\n    {this.label && <div class=\"sd-number-input__label\">{this.label}</div>}\n    <label\n     class={{\n      'sd-number-input': true,\n      [this.getInputStatus()]: true,\n      'sd-number-input--with-buttons': this.useButton,\n     }}\n     onMouseEnter={() => (this.hovered = true)}\n     onMouseLeave={() => (this.hovered = false)}\n     style={this.inputStyle}\n    >\n     <input\n      ref={el => (this.nativeEl = el)}\n      class={`sd-number-input__input ${this.inputClass}`}\n      type=\"text\"\n      inputMode=\"numeric\"\n      value={this.displayValue}\n      placeholder={this.placeholder}\n      disabled={this.disabled}\n      readonly={this.readonly}\n      autofocus={this.autoFocus}\n      onInput={this.handleInput}\n      onKeyDown={this.handleKeyDown}\n      style={inputStyles}\n     />\n\n     {this.useButton && (\n      <div class=\"sd-number-input__buttons\">\n       <button\n        type=\"button\"\n        class={{\n         'sd-number-input__button': true,\n         'sd-number-input__button--decrement': true,\n        }}\n        disabled={this.isDecrementDisabled()}\n        onClick={this.handleDecrement}\n        tabindex={-1}\n       >\n        <sd-icon\n         name=\"minus\"\n         size={12}\n         color={this.isDecrementDisabled() ? 'grey_45' : 'brilliantblue_70'}\n        />\n       </button>\n       <button\n        type=\"button\"\n        class={{\n         'sd-number-input__button': true,\n         'sd-number-input__button--increment': true,\n        }}\n        disabled={this.isIncrementDisabled()}\n        onClick={this.handleIncrement}\n        tabindex={-1}\n       >\n        <sd-icon\n         name=\"add\"\n         size={12}\n         color={this.isIncrementDisabled() ? 'grey_45' : 'brilliantblue_70'}\n        />\n       </button>\n      </div>\n     )}\n    </label>\n   </div>\n  );\n }\n}\n"],"version":3}
+{"file":"sd-number-input.js","mappings":"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","names":["SdNumberInput","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-number-input/sd-number-input.scss?tag=sd-number-input","src/components/sd-number-input/sd-number-input.tsx"],"sourcesContent":["@import 'variables';\n@import '../sd-icon/sd-icon.scss';\n\nsd-number-input {\n .sd-number-input {\n  box-sizing: border-box;\n  display: flex;\n  width: var(--input-width, 100%);\n  align-items: center;\n  height: 28px;\n  padding: 4px 8px;\n  border-radius: 4px;\n  color: $grey_90;\n  font-size: 12px;\n  line-height: 20px;\n  position: relative;\n\n  .sd-number-input__input {\n   display: block;\n   width: 100%;\n   height: 20px;\n   line-height: 20px;\n   border: none;\n   outline: none;\n   background: transparent;\n   font-size: inherit;\n   color: $grey_90;\n   margin-left: 4px;\n   margin-right: 4px;\n   padding-block: 0;\n   padding-inline: 0;\n   text-align: right;\n\n   &[disabled] {\n    cursor: not-allowed;\n    color: $grey_65;\n   }\n\n   &::placeholder {\n    font-size: 12px;\n    height: 20px;\n    line-height: 20px;\n    color: $grey_55;\n   }\n  }\n\n  .sd-number-input__clear-icon {\n   cursor: pointer;\n   margin-left: 8px;\n  }\n\n  .sd-number-input__buttons {\n   padding: 4px;\n   display: flex;\n   justify-content: space-between;\n   align-items: center;\n   position: absolute;\n   inset: 0;\n   opacity: 0;\n   pointer-events: none;\n   transition: opacity 0.2s ease;\n  }\n\n  .sd-number-input__button {\n   width: 20px;\n   height: 20px;\n   border: none;\n   border-radius: 2px;\n   background-color: $brilliantblue_10;\n   cursor: pointer;\n   display: flex;\n   align-items: center;\n   justify-content: center;\n   padding: 0;\n   margin: 0;\n   transition: background-color 0.2s ease;\n\n   &:hover:not(:disabled) {\n    background-color: $brilliantblue_20;\n   }\n\n   &:disabled {\n    background-color: $grey_20;\n    cursor: not-allowed;\n   }\n\n   &--decrement {\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n   }\n\n   &--increment {\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n   }\n  }\n\n  .sd-number-input__label {\n   margin-bottom: 8px;\n   font-weight: 500;\n   color: $grey_90;\n  }\n }\n\n &:focus-within {\n  .sd-number-input__buttons {\n   opacity: 1;\n   pointer-events: auto;\n  }\n\n  .sd-number-input {\n   border-color: $brilliantblue_75;\n   box-shadow: 0 0 4px 0 #0071ff66;\n  }\n }\n}\n","import {\n Component,\n Element,\n Prop,\n State,\n Watch,\n Event,\n EventEmitter,\n h,\n Method,\n} from '@stencil/core';\n\nimport { Rule } from '../../types/form';\nimport { nanoid } from 'nanoid/non-secure';\n\n@Component({\n tag: 'sd-number-input',\n styleUrl: 'sd-number-input.scss',\n})\nexport class SdNumberInput {\n @Element() el!: HTMLElement;\n\n @Prop() min: number = Number.NEGATIVE_INFINITY;\n @Prop() max: number = Number.POSITIVE_INFINITY;\n @Prop() step: number = 1;\n @Prop() useButton: boolean = false;\n @Prop() useDecimal: boolean = false;\n\n @Prop({ mutable: true }) value?: string | number | null = null;\n @Prop() label?: string;\n @Prop() insideLabel: boolean = false;\n @Prop() placeholder: string = '입력해 주세요.';\n @Prop() disabled: boolean = false;\n @Prop() width?: number | string;\n @Prop() rules?: Rule[] = [];\n @Prop() autoFocus: boolean = false;\n @Prop() status?: 'default' | 'pass' | 'error';\n @Prop() inputClass: string = '';\n @Prop() readonly: boolean = false;\n @Prop() inputStyle: { [key: string]: string } = {};\n\n @Prop({ mutable: true }) error: boolean = false;\n @Prop({ mutable: true }) focused: boolean = false;\n @Prop({ mutable: true }) hovered: boolean = false;\n\n @State() private internalValue: number | null = null;\n @State() private displayValue: string = '';\n\n private nativeEl: HTMLInputElement | undefined = undefined;\n private formField?: HTMLSdFieldElement;\n name = nanoid();\n\n @Event({ eventName: 'sdUpdate' }) update?: EventEmitter<number | null>;\n @Event({ eventName: 'sdFocus' }) focus?: EventEmitter<Event>;\n @Event({ eventName: 'sdBlur' }) blur?: EventEmitter<Event>;\n\n private formatWithCommas(value: number | null): string {\n  if (value === null || value === undefined) return '';\n\n  const isNegative = value < 0;\n  const absValue = Math.abs(value);\n\n  const [intPart, decPart] = absValue.toString().split('.');\n  const formatted = (+intPart).toLocaleString();\n\n  const result = isNegative ? '-' + formatted : formatted;\n  return decPart ? result + '.' + decPart : String(result);\n }\n\n private parseInput(input: string): number | null {\n  if (!input || input.trim() === '') return null;\n\n  const cleaned = input.replace(/,/g, '').trim();\n\n  // -로 시작을 할 수 있을 수 있고, 소수점 0.n | .n\n  if (!/^-?(\\d+\\.?\\d*|\\d*\\.\\d+)$/.test(cleaned)) {\n   return null;\n  }\n\n  const parsed = parseFloat(cleaned);\n\n  if (isNaN(parsed)) return null;\n\n  // 소수점 사용 하지 않는데 . 이 있는 경우\n  if (!this.useDecimal && cleaned.includes('.')) {\n   return null;\n  }\n\n  return parsed;\n }\n\n private clampMinMax(value: number): number {\n  return Math.min(Math.max(value, this.min), this.max);\n }\n\n private updateDisplay() {\n  this.displayValue = this.formatWithCommas(this.internalValue);\n }\n\n private isIncrementDisabled(): boolean {\n  if (this.disabled || this.readonly) return true;\n  if (this.internalValue !== null) {\n   return this.internalValue >= this.max;\n  }\n  return false;\n }\n\n private isDecrementDisabled(): boolean {\n  if (this.disabled || this.readonly) return true;\n  if (this.internalValue !== null) {\n   return this.internalValue <= this.min;\n  }\n  return false;\n }\n\n @Watch('value')\n valueChanged(newValue: string | number | null) {\n  if (newValue === null || newValue === '') {\n   this.internalValue = null;\n  } else {\n   const parsed = typeof newValue === 'string' ? this.parseInput(newValue) : newValue;\n   if (parsed !== null) {\n    this.internalValue = this.clampMinMax(parsed);\n   }\n  }\n  this.updateDisplay();\n }\n\n @Watch('internalValue')\n internalValueChanged(newValue: number | null) {\n  this.updateDisplay();\n\n  if (newValue !== this.value) {\n   this.value = newValue;\n   this.update?.emit(newValue);\n  }\n }\n\n @Method()\n async sdValidate() {\n  this.formField?.sdValidate();\n }\n\n @Method()\n async sdReset() {\n  this.formField?.sdReset();\n }\n\n @Method()\n async sdResetValidate() {\n  this.formField?.sdResetValidation();\n }\n\n @Method()\n async sdFocus() {\n  this.formField?.sdFocus();\n }\n\n componentWillLoad() {\n  if (this.value !== null && this.value !== undefined) {\n   const parsed = typeof this.value === 'string' ? this.parseInput(this.value) : this.value;\n   if (parsed !== null) {\n    this.internalValue = this.clampMinMax(parsed);\n   }\n  }\n  this.updateDisplay();\n }\n\n // TODO: 현재 숫자를 크게 넣어서 숫자e+21등의 형식으로 변환되면 값이 바뀌지않음 수정 필요\n private handleInput = (event: Event) => {\n  const target = event.target as HTMLInputElement;\n  const inputValue = target.value;\n\n  if (inputValue === '') {\n   this.internalValue = null;\n   this.displayValue = '';\n   return;\n  }\n\n  const commasRemoved = inputValue.replace(/,/g, '');\n\n  // 만약에 소수점 (.) 이 여러개 일 경우\n  const decimalCount = (commasRemoved.match(/\\./g) || []).length;\n  if (decimalCount > 1) {\n   target.value = this.displayValue;\n   return;\n  }\n\n  // 가능: \"-\", \".\", \"-.\" (단순 기호만 있는 경우)\n  if (commasRemoved === '-' || commasRemoved === '.' || commasRemoved === '-.') {\n   target.value = commasRemoved;\n   return;\n  }\n\n  // 숫자 뒤에 . 이 있는 경우 (예: \"1000.\") -> 콤마 포맷 적용 + . 유지\n  if (commasRemoved.endsWith('.') && decimalCount === 1) {\n   const numberPart = commasRemoved.slice(0, -1);\n   const parsed = this.parseInput(numberPart);\n   if (parsed !== null) {\n    const formatted = this.formatWithCommas(parsed);\n    target.value = formatted + '.';\n    return;\n   }\n  }\n\n  const parsed = this.parseInput(commasRemoved);\n\n  if (parsed !== null) {\n   if (parsed < this.min) {\n    target.value = this.displayValue;\n    return;\n   }\n\n   if (parsed > this.max) {\n    target.value = this.displayValue;\n    return;\n   }\n\n   this.internalValue = parsed;\n   this.displayValue = this.formatWithCommas(parsed);\n   target.value = this.displayValue;\n  } else {\n   target.value = this.displayValue;\n  }\n };\n\n private handleFocus = (event: Event) => {\n  this.focus?.emit(event);\n };\n\n private handleBlur = async (event: Event) => {\n  this.updateDisplay();\n  if (this.nativeEl) {\n   this.nativeEl.value = this.displayValue;\n  }\n\n  if (this.rules && this.rules.length > 0) {\n   await this.formField?.sdValidate();\n  }\n\n  this.focused = false;\n  this.blur?.emit(event);\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n  if (event.key === 'ArrowUp') {\n   event.preventDefault();\n   this.handleIncrement();\n  } else if (event.key === 'ArrowDown') {\n   event.preventDefault();\n   this.handleDecrement();\n  }\n };\n\n private handleIncrement = () => {\n  if (this.isIncrementDisabled()) return;\n\n  const currentVal = this.internalValue ?? this.min ?? 0;\n  let nextVal = currentVal + this.step;\n\n  if (nextVal > this.max) {\n   nextVal = this.max;\n  }\n\n  if (nextVal === currentVal) return;\n\n  this.internalValue = nextVal;\n };\n\n private handleDecrement = () => {\n  if (this.isDecrementDisabled()) return;\n\n  const currentVal = this.internalValue ?? this.min ?? 0;\n  let nextVal = currentVal - this.step;\n\n  if (nextVal < this.min) {\n   nextVal = this.min;\n  }\n\n  if (nextVal === currentVal) return;\n\n  this.internalValue = nextVal;\n };\n\n @Method()\n async sdGetNativeElement(): Promise<HTMLInputElement | null> {\n  return this.nativeEl || null;\n }\n\n getInputStatus() {\n  if (this.disabled) return 'sd-number-input--disabled';\n  if (this.hovered) return 'sd-number-input--hovered';\n  if (this.status) return `sd-number-input--${this.status}`;\n  if (this.error) return 'sd-number-input--error';\n  return '';\n }\n\n render() {\n  const inputWidth = this.width\n   ? {\n      '--input-width': typeof this.width === 'number' ? `${this.width}px` : this.width,\n     }\n   : {};\n\n  const inputStyles = {\n   textAlign: this.useButton ? 'center' : 'right',\n  };\n\n  return (\n   <sd-field\n    name={this.name}\n    label={this.label}\n    insideLabel={this.insideLabel}\n    rules={this.rules}\n    error={this.error}\n    disabled={this.disabled}\n    focused={this.focused}\n    hovered={this.hovered}\n    status={this.status}\n    ref={el => (this.formField = el)}\n    style={inputWidth}\n   >\n    <label\n     class={{\n      'sd-number-input': true,\n      [this.getInputStatus()]: true,\n      'sd-number-input--with-buttons': this.useButton,\n     }}\n     onMouseEnter={() => (this.hovered = true)}\n     onMouseLeave={() => (this.hovered = false)}\n     style={this.inputStyle}\n    >\n     <input\n      name={this.name}\n      ref={el => (this.nativeEl = el)}\n      class={`sd-number-input__input ${this.inputClass}`}\n      type=\"text\"\n      inputMode=\"numeric\"\n      value={this.displayValue}\n      placeholder={this.placeholder}\n      disabled={this.disabled}\n      readonly={this.readonly}\n      autofocus={this.autoFocus}\n      onInput={this.handleInput}\n      onKeyDown={this.handleKeyDown}\n      style={inputStyles}\n      onFocus={this.handleFocus}\n      onBlur={this.handleBlur}\n     />\n\n     {this.useButton && (\n      <div class=\"sd-number-input__buttons\">\n       <button\n        type=\"button\"\n        class={{\n         'sd-number-input__button': true,\n         'sd-number-input__button--decrement': true,\n        }}\n        disabled={this.isDecrementDisabled()}\n        onClick={this.handleDecrement}\n        tabindex={-1}\n       >\n        <sd-icon\n         name=\"minus\"\n         size={12}\n         color={this.isDecrementDisabled() ? 'grey_45' : 'brilliantblue_70'}\n        />\n       </button>\n       <button\n        type=\"button\"\n        class={{\n         'sd-number-input__button': true,\n         'sd-number-input__button--increment': true,\n        }}\n        disabled={this.isIncrementDisabled()}\n        onClick={this.handleIncrement}\n        tabindex={-1}\n       >\n        <sd-icon\n         name=\"add\"\n         size={12}\n         color={this.isIncrementDisabled() ? 'grey_45' : 'brilliantblue_70'}\n        />\n       </button>\n      </div>\n     )}\n    </label>\n   </sd-field>\n  );\n }\n}\n"],"version":3}

package/dist/components/sd-pagination.js

@@ -1,4 +1,4 @@
-import { S as SdPagination$1, d as defineCustomElement$1 } from './p-wRu9w6Gl.js';
+import { S as SdPagination$1, d as defineCustomElement$1 } from './p-DUh9r-hn.js';
 
 const SdPagination = SdPagination$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sd-popover.js

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

package/dist/components/sd-portal.js

@@ -1,4 +1,4 @@
-import { S as SdPortal$1, d as defineCustomElement$1 } from './p-CbEUJ3R6.js';
+import { S as SdPortal$1, d as defineCustomElement$1 } from './p-D16-dM6f.js';
 
 const SdPortal = SdPortal$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sd-progress.js

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

package/dist/components/sd-select-dropdown.js

@@ -1,4 +1,4 @@
-import { S as SdSelectDropdown$1, d as defineCustomElement$1 } from './p-CXyVUgP3.js';
+import { S as SdSelectDropdown$1, d as defineCustomElement$1 } from './p-CkzAorp3.js';
 
 const SdSelectDropdown = SdSelectDropdown$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sd-select-multiple-group.js

@@ -2,13 +2,13 @@ import { p as proxyCustomElement, c as createEvent, h, F as Fragment, t as trans
 import { B as BaseDropdownEvent, S as SelectKeyboardNavigation } from './p-CXuU38Gz.js';
 import { d as defineCustomElement$b } from './p-lbT0o9hE.js';
 import { d as defineCustomElement$a } from './p-Cd145I-2.js';
-import { d as defineCustomElement$9 } from './p-SUihbngJ.js';
+import { d as defineCustomElement$9 } from './p-C2pN-_wD.js';
 import { d as defineCustomElement$8 } from './p-BdgLMKjb.js';
 import { d as defineCustomElement$7 } from './p-zvhzq4Sw.js';
-import { d as defineCustomElement$6 } from './p-DQE5-tOR.js';
-import { d as defineCustomElement$5 } from './p-CbEUJ3R6.js';
-import { d as defineCustomElement$4 } from './p-Bgf0RnXW.js';
-import { d as defineCustomElement$3 } from './p-CYr3YYfa.js';
+import { d as defineCustomElement$6 } from './p-xfqZA_70.js';
+import { d as defineCustomElement$5 } from './p-D16-dM6f.js';
+import { d as defineCustomElement$4 } from './p-B-8YfRUg.js';
+import { d as defineCustomElement$3 } from './p-CFHNnfIq.js';
 import { d as defineCustomElement$2 } from './p-CiNjpVRK.js';
 
 const sdSelectMultipleGroupCss = () => `.sd-select-multiple-group__dropdown{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-select-multiple-group__dropdown::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-select-multiple-group__dropdown::-webkit-scrollbar:horizontal{height:8px}.sd-select-multiple-group__dropdown::-webkit-scrollbar:vertical{width:8px}.sd-select-multiple-group__dropdown::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-select-multiple-group__dropdown::-webkit-scrollbar-track{background-color:transparent}.sd-select-multiple-group__dropdown .sd-select-multiple-group__option-placeholder{height:48px;display:flex;align-items:center;padding:8px 16px;font-size:12px;line-height:0;text-align:left;color:#888888}sd-select-multiple-group{display:inline-flex;flex-flow:column nowrap;width:fit-content;height:fit-content}sd-select-multiple-group:focus,sd-select-multiple-group:focus-visible,sd-select-multiple-group:focus-within{outline:none !important}sd-select-multiple-group .sd-select-multiple-group{width:100%}sd-select-multiple-group .sd-select-multiple-group .sd-select-multiple-group__trigger{padding:4px 20px 4px 12px;display:flex;width:100%;align-items:center}sd-select-multiple-group .sd-select-multiple-group .sd-select-multiple-group__trigger .sd-select-multiple-group__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400}sd-select-multiple-group .sd-select-multiple-group .sd-select-multiple-group__trigger .sd-select-multiple-group__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}sd-select-multiple-group .sd-select-multiple-group .sd-select-multiple-group__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease}sd-select-multiple-group .sd-select-multiple-group .sd-select-multiple-group__arrow--open{transform:rotate(180deg)}.sd-select-multiple-group__dropdown{width:var(--select-width, 200px);max-height:var(--select-dropdown-height, 260px);padding-bottom:2px;background-color:white;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);border-radius:4px;overflow-y:auto;color:#333333;opacity:0.5;transition:opacity 0.15s ease-in}.sd-select-multiple-group__dropdown--ready{opacity:1}`;

package/dist/components/sd-select-multiple.js

@@ -2,14 +2,14 @@ import { p as proxyCustomElement, c as createEvent, h, t as transformTag } from
 import { B as BaseDropdownEvent, S as SelectKeyboardNavigation } from './p-CXuU38Gz.js';
 import { d as defineCustomElement$c } from './p-lbT0o9hE.js';
 import { d as defineCustomElement$b } from './p-Cd145I-2.js';
-import { d as defineCustomElement$a } from './p-SUihbngJ.js';
+import { d as defineCustomElement$a } from './p-C2pN-_wD.js';
 import { d as defineCustomElement$9 } from './p-BdgLMKjb.js';
 import { d as defineCustomElement$8 } from './p-zvhzq4Sw.js';
-import { d as defineCustomElement$7 } from './p-DQE5-tOR.js';
-import { d as defineCustomElement$6 } from './p-CbEUJ3R6.js';
-import { d as defineCustomElement$5 } from './p-CXyVUgP3.js';
-import { d as defineCustomElement$4 } from './p-CYYaSMIB.js';
-import { d as defineCustomElement$3 } from './p-CYr3YYfa.js';
+import { d as defineCustomElement$7 } from './p-xfqZA_70.js';
+import { d as defineCustomElement$6 } from './p-D16-dM6f.js';
+import { d as defineCustomElement$5 } from './p-CkzAorp3.js';
+import { d as defineCustomElement$4 } from './p-Dv4dN3Y5.js';
+import { d as defineCustomElement$3 } from './p-CFHNnfIq.js';
 import { d as defineCustomElement$2 } from './p-CiNjpVRK.js';
 
 const sdSelectMultipleCss = () => `sd-select-multiple{display:inline-flex;flex-flow:column nowrap;height:fit-content}sd-select-multiple *:focus,sd-select-multiple *:focus-visible,sd-select-multiple *:focus-within{outline:none !important}sd-select-multiple .sd-select-multiple{width:100%}sd-select-multiple .sd-select-multiple .sd-select-multiple__trigger{padding:4px 28px 4px 12px;display:flex;width:100%;align-items:center}sd-select-multiple .sd-select-multiple .sd-select-multiple__trigger .sd-select-multiple__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400;text-align:left}sd-select-multiple .sd-select-multiple .sd-select-multiple__trigger .sd-select-multiple__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}sd-select-multiple .sd-select-multiple__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease;margin-left:8px}sd-select-multiple .sd-select-multiple__arrow--open{transform:rotate(180deg)}`;
@@ -162,7 +162,7 @@ const SdSelectMultiple$1 = /*@__PURE__*/ proxyCustomElement(class SdSelectMultip
         this.handleOptionSelection(option);
     };
     render() {
-        return (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) }, h("div", { key: 'f1ecb7cab58c82ddba3fde97e2a139d966927891', class: {
+        return (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) }, h("div", { key: 'fda63e4e8dcc72aa0147b2981b49b7e28e377ee8', class: {
                 'sd-select-multiple': true,
                 'sd-select-multiple--open': this.isOpen,
                 'sd-select-multiple--disabled': this.disabled,

package/dist/components/sd-select-option-group.js

@@ -1,4 +1,4 @@
-import { S as SdSelectOptionGroup$1, d as defineCustomElement$1 } from './p-Bgf0RnXW.js';
+import { S as SdSelectOptionGroup$1, d as defineCustomElement$1 } from './p-B-8YfRUg.js';
 
 const SdSelectOptionGroup = SdSelectOptionGroup$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sd-select-option.js

@@ -1,4 +1,4 @@
-import { S as SdSelectOption$1, d as defineCustomElement$1 } from './p-CYYaSMIB.js';
+import { S as SdSelectOption$1, d as defineCustomElement$1 } from './p-Dv4dN3Y5.js';
 
 const SdSelectOption = SdSelectOption$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sd-select-search-input.js

@@ -1,4 +1,4 @@
-import { S as SdSelectSearchInput$1, d as defineCustomElement$1 } from './p-CYr3YYfa.js';
+import { S as SdSelectSearchInput$1, d as defineCustomElement$1 } from './p-CFHNnfIq.js';
 
 const SdSelectSearchInput = SdSelectSearchInput$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sd-select.js

@@ -1,4 +1,4 @@
-import { S as SdSelect$1, d as defineCustomElement$1 } from './p-B0HvHSm3.js';
+import { S as SdSelect$1, d as defineCustomElement$1 } from './p-DjZ8vXCq.js';
 
 const SdSelect = SdSelect$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sd-table.js

@@ -1,17 +1,17 @@
 import { p as proxyCustomElement, H, c as createEvent, d as readTask, h, F as Fragment, t as transformTag } from './p-CR2Jbl0B.js';
 import { d as defineCustomElement$f } from './p-lbT0o9hE.js';
 import { d as defineCustomElement$e } from './p-Cd145I-2.js';
-import { d as defineCustomElement$d } from './p-SUihbngJ.js';
+import { d as defineCustomElement$d } from './p-C2pN-_wD.js';
 import { d as defineCustomElement$c } from './p-BdgLMKjb.js';
 import { d as defineCustomElement$b } from './p-zvhzq4Sw.js';
-import { d as defineCustomElement$a } from './p-DQE5-tOR.js';
+import { d as defineCustomElement$a } from './p-xfqZA_70.js';
 import { d as defineCustomElement$9 } from './p-GS-rEltm.js';
-import { d as defineCustomElement$8 } from './p-wRu9w6Gl.js';
-import { d as defineCustomElement$7 } from './p-CbEUJ3R6.js';
-import { d as defineCustomElement$6 } from './p-B0HvHSm3.js';
-import { d as defineCustomElement$5 } from './p-CXyVUgP3.js';
-import { d as defineCustomElement$4 } from './p-CYYaSMIB.js';
-import { d as defineCustomElement$3 } from './p-CYr3YYfa.js';
+import { d as defineCustomElement$8 } from './p-DUh9r-hn.js';
+import { d as defineCustomElement$7 } from './p-D16-dM6f.js';
+import { d as defineCustomElement$6 } from './p-DjZ8vXCq.js';
+import { d as defineCustomElement$5 } from './p-CkzAorp3.js';
+import { d as defineCustomElement$4 } from './p-Dv4dN3Y5.js';
+import { d as defineCustomElement$3 } from './p-CFHNnfIq.js';
 import { d as defineCustomElement$2 } from './p-CiNjpVRK.js';
 
 const sdTableCss = () => `.sd-table__wrapper .sd-table__container .sd-table__middle{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar:horizontal{height:8px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar:vertical{width:8px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-track{background-color:transparent}.sd-table__wrapper{height:var(--table-height, auto);width:var(--table-width, 100%);color:#222222}.sd-table__wrapper .sd-table__container{width:100%;height:var(--table-container-height, auto);display:flex;flex-direction:column;position:relative;border:1px solid #e1e1e1;border-radius:8px;font-size:12px;overflow:hidden;background:#ffffff}.sd-table__wrapper .sd-table__container .sd-table__middle{overflow:auto;will-change:scroll-position;min-height:var(--table-container-height, auto)}.sd-table__wrapper .sd-table__container .sd-table__middle--scrollable{height:var(--table-container-height, auto)}.sd-table__wrapper .sd-table__container .sd-table__middle--loading{overflow:hidden !important;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__middle--loading__spinner{position:absolute;top:0;left:0;width:100%;height:var(--table-container-height, 100%);min-height:var(--table-container-height, 100%);background:rgba(255, 255, 255, 0.6);z-index:200;display:flex;align-items:center;justify-content:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table{background-color:white;display:table;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll{position:relative;height:var(--total-virtual-height, --table-container-height, auto)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll tr:not([aria-hidden=true]){width:100%}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll tr[aria-hidden=true]{padding:0;border:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll tr[aria-hidden=true]:not(.sd-table__virtual-row-spacer) td{display:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable td.sd-td--selected,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable th.sd-th--selected{position:relative;width:52px !important;max-width:52px !important;min-width:52px !important;padding:0 10px 0 24px;text-align:left}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable td.sd-td--selected sd-checkbox label,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable th.sd-th--selected sd-checkbox label{position:relative}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable td.sd-td--selected sd-checkbox label:before,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable th.sd-th--selected sd-checkbox label:before{content:"";position:absolute;inset:-6px}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-header thead{position:sticky;top:0;z-index:120}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-left,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-right{position:sticky;background-color:#f5faff;z-index:110 !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-left,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-right{position:sticky;background-color:white;z-index:100 !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-left{left:var(--sticky-left-offset, 0)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-right{right:var(--sticky-right-offset, 0)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-cell{position:sticky;z-index:102;background-color:#f5faff}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-cell{position:sticky;z-index:101;background-color:white}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge{overflow:visible}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge:after,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge:after{content:"";position:absolute;top:0;left:100%;right:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset 12px 0 20px -25px;opacity:1;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge{overflow:visible}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge:after,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge:after{content:"";position:absolute;top:0;left:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset -12px 0 20px -25px;opacity:1;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--no-data thead{opacity:0.4}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--no-data thead tr th.sd-th{border-bottom:1px solid rgba(225, 225, 225, 0.4) !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-td,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-th,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table .sd-th__content--label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead{height:36px}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr{width:100%}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th{background:#f5faff;height:36px;padding:0 16px;font-weight:500;vertical-align:middle;border-bottom:1px solid #e1e1e1;-webkit-user-select:none;user-select:none;position:relative}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content{display:flex;flex-flow:row nowrap;align-items:center;gap:4px}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--left{justify-content:flex-start}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--center{justify-content:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--right{justify-content:flex-end}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__resizer{position:absolute;top:50%;right:0;transform:translateY(-50%);width:4px;height:16px;cursor:col-resize;z-index:3;border-left:1px solid #cccccc;border-right:1px solid #cccccc}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td{height:44px;padding:0 16px;border-bottom:1px solid #e1e1e1;background:white;vertical-align:middle}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--left{text-align:left}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--center{text-align:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--right{text-align:right}.sd-table__wrapper .sd-table__container .sd-table__bottom{background:transparent;text-align:center;display:flex;align-items:center;justify-content:center;flex:1;min-height:240px;translate:0 -10%;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__bottom .sd-table__no-data{font-size:12px;color:#888888}.sd-table__wrapper .sd-table__pagination{position:relative;background:#f9f9f9;height:48px;display:flex;align-items:center;justify-content:center;border:1px solid #e1e1e1;border-top:none;border-radius:8px}.sd-table__wrapper .sd-table__pagination sd-select{position:absolute;right:10px;top:50%;transform:translateY(-50%)}.sd-table__wrapper .sd-table__virtual-spacer,.sd-table__wrapper .sd-table__virtual-row-spacer{padding:0 !important}.sd-table__wrapper .sd-table__virtual-spacer td,.sd-table__wrapper .sd-table__virtual-row-spacer td{padding:0 !important;border:none}.sd-table__wrapper .sd-table__virtual-spacer .sd-table__skeleton,.sd-table__wrapper .sd-table__virtual-row-spacer .sd-table__skeleton{width:100%;height:100%;background-image:repeating-linear-gradient(0deg, rgba(246, 246, 246, 0.3) 0px, rgba(225, 225, 225, 0.5) calc(var(--row-height, 44px) / 2), rgba(246, 246, 246, 0.3) var(--row-height, 44px));background-size:100% 200%;animation:skeleton-loading 1.5s ease-in-out infinite;position:relative}.sd-table__wrapper .sd-table__virtual-spacer .sd-table__skeleton::before,.sd-table__wrapper .sd-table__virtual-row-spacer .sd-table__skeleton::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-image:repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--row-height, 44px) - 1px), #e1e1e1 calc(var(--row-height, 44px) - 1px), #e1e1e1 var(--row-height, 44px));pointer-events:none}.sd-table__wrapper .sd-table__skeleton-cell{width:100%;height:20px;background:linear-gradient(90deg, rgba(246, 246, 246, 0.3) 0%, rgba(225, 225, 225, 0.5) 50%, rgba(246, 246, 246, 0.3) 100%);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px}@keyframes skeleton-loading{0%{background-position:0% 0%}50%{background-position:100% 100%}100%{background-position:0% 0%}}`;

package/dist/components/sd-textarea.js

@@ -87,10 +87,10 @@ const SdTextarea$1 = /*@__PURE__*/ proxyCustomElement(class SdTextarea extends H
     }
     render() {
         const maxLengthCounter = this.getMaxLengthCounter();
-        return (h("div", { key: 'a5c69ab99ae634450f45211158ecc7aaf4ae7ed5', class: {
+        return (h("div", { key: '888d11be57629e83e1215daddab63351a323672f', class: {
                 'sd-textarea': true,
                 [this.getTextareaStatus()]: true,
-            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("div", { key: '805bcdc30afbc6d91ae1ece93935ef3b95458c4d', class: "sd-textarea__content" }, h("textarea", { key: '9bacae67219729f46c8e05e2d3c5a8b3dda05447', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, autofocus: this.autoFocus, maxLength: this.maxLength, onInput: this.handleInput.bind(this), onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) })), this.hasFooter() && (h("div", { key: '394681f2a6b62747b29fd2d4561ffca93fc482d7', class: "sd-textarea__footer" }, this.helpText !== undefined && h("span", { key: '2740dc673980d558d460e0caa100365ec0c10587', class: "sd-textarea__help-text" }, this.helpText), maxLengthCounter !== null && h("span", { key: 'f7100c74718da4aa705d3213dbcbaf200bb0d6d5', class: "sd-textarea__counter" }, maxLengthCounter)))));
+            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("div", { key: '1f91a1e435b2dba1817ce181f91bdf3829142682', class: "sd-textarea__content" }, h("textarea", { key: 'd883f4cdfd56220cf4382893f94a469f7afd7ff2', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, autofocus: this.autoFocus, maxLength: this.maxLength, onInput: this.handleInput.bind(this), onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) })), this.hasFooter() && (h("div", { key: 'e9350d8e49eb87b2caddfc24079ece0d59c79739', class: "sd-textarea__footer" }, this.helpText !== undefined && h("span", { key: 'cda9e2b8b0c15fbc7356597d4363d438688c8e4e', class: "sd-textarea__help-text" }, this.helpText), maxLengthCounter !== null && h("span", { key: '491e990142e07837169e84a3fcc3e80c00bc7153', class: "sd-textarea__counter" }, maxLengthCounter)))));
     }
     static get watchers() { return {
         "value": ["valueChanged"],

package/dist/components/sd-toggle-button.js

@@ -42,7 +42,7 @@ const SdToggleButton$1 = /*@__PURE__*/ proxyCustomElement(class SdToggleButton e
         this.change.emit(newValue);
     };
     render() {
-        return (h("label", { key: '9eb4abcfe8f3894198c8d8643150daa507e6f0e9', class: this.buttonClasses, "aria-label": this.label || 'toggle button' }, this.label, h("input", { key: 'e3d952af461da0fac978b8ce6bd55a6990907fb3', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (h("label", { key: '6f8d9e738490ef344ff26a4026b9de17af68041e', class: this.buttonClasses, "aria-label": this.label || 'toggle button' }, this.label, h("input", { key: '6d9d45c451301c4635e610fd70280be1fe65b316', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
     static get style() { return sdToggleButtonCss(); }
 }, [768, "sd-toggle-button", {

package/dist/components/sd-toggle.js

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