@sellmate/design-system 1.0.0 → 1.0.1

package/dist/components/{p-DssRJcAn.js → p-VrppUi4Q.js}

@@ -47,7 +47,7 @@ const SdTag = /*@__PURE__*/ proxyCustomElement(class SdTag extends H {
     }
     render() {
         const tagClasses = this.getTagClasses();
-        return (h("span", { key: '2a25443d15ad9d0c9205455e80cf236d02cec6d9', class: tagClasses, style: {
+        return (h("span", { key: '44457ea67e6c6bc78f134df71beb8d16cc069f41', class: tagClasses, style: {
                 '--tag-bg-color': this.bgColor,
                 '--tag-text-color': this.textColor,
             }, "aria-label": this.label || 'tag' }, this.renderContent()));
@@ -76,6 +76,6 @@ function defineCustomElement() {
 }
 
 export { SdTag as S, defineCustomElement as d };
-//# sourceMappingURL=p-DssRJcAn.js.map
+//# sourceMappingURL=p-VrppUi4Q.js.map
 
-//# sourceMappingURL=p-DssRJcAn.js.map
+//# sourceMappingURL=p-VrppUi4Q.js.map

package/dist/components/{p-DssRJcAn.js.map → p-VrppUi4Q.js.map}

@@ -1 +1 @@
-{"file":"p-DssRJcAn.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,MAAM,CAAC,q+BAAq+B,CAAC;;ACc9/B,MAAM,UAAU,GAAG;AAClB,IAAA,IAAI,EAAE,yBAAyB;AAC/B,IAAA,GAAG,EAAE,uBAAuB;AAC5B,IAAA,MAAM,EAAE,6BAA6B;AACrC,IAAA,MAAM,EAAE,6BAA6B;AACrC,IAAA,KAAK,EAAE,2BAA2B;AAClC,IAAA,IAAI,EAAE,2CAA2C;AACjD,IAAA,QAAQ,EAAE,mCAAmC;AAC7C,IAAA,MAAM,EAAE,2CAA2C;CACnD;MAOY,KAAK,iBAAAA,kBAAA,CAAA,MAAA,KAAA,SAAAC,CAAA,CAAA;;;;;;;;;IAGT,IAAI,GAAY,IAAI;IACpB,KAAK,GAAa,MAAM;IACxB,OAAO,GAAY,KAAK;IACxB,KAAK,GAAW,EAAE;AAClB,IAAA,OAAO;AACP,IAAA,SAAS;IAET,aAAa,GAAA;QACpB,MAAM,OAAO,GAAG,CAAC,QAAQ,EAAE,CAAW,QAAA,EAAA,IAAI,CAAC,IAAI,CAAE,CAAA,CAAC;AAElD,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;AACjB,YAAA,OAAO,CAAC,IAAI,CAAC,iBAAiB,CAAC;;AAGhC,QAAA,IAAI,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;YACnD,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;;QAGrC,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS,EAAE;AACnC,YAAA,OAAO,CAAC,IAAI,CAAC,sBAAsB,CAAC;;AAGrC,QAAA,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;;IAGjB,aAAa,GAAA;QACpB,OAAO;AACN,YAAA,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC5B,CAAA,CAAA,MAAA,EAAA,IAAA,EAAO,IAAI,CAAC,KAAK,CAAQ,CACnB;SACP;;IAGF,MAAM,GAAA;AACL,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,EAAE;AAEvC,QAAA,QACC,CACC,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,UAAU,EACjB,KAAK,EAAE;gBACN,gBAAgB,EAAE,IAAI,CAAC,OAAO;gBAC9B,kBAAkB,EAAE,IAAI,CAAC,SAAS;AAClC,aAAA,EAAA,YAAA,EACW,IAAI,CAAC,KAAK,IAAI,KAAK,EAAA,EAE9B,IAAI,CAAC,aAAa,EAAE,CACf;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-tag/sd-tag.scss?tag=sd-tag&encapsulation=shadow","src/components/sd-tag/sd-tag.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\n:host([full-width]) {\n display: block;\n}\n\n.sd-tag {\n display: inline-flex;\n width: 100%;\n align-items: center;\n justify-content: center;\n gap: 8px;\n text-decoration: none;\n border: 1px solid transparent;\n border-radius: 4px;\n transition: all 0.2s ease-in-out;\n position: relative;\n overflow: hidden;\n white-space: nowrap;\n -webkit-user-select: none;\n user-select: none;\n box-sizing: border-box;\n\n &__content {\n  display: inline-block;\n  width: 100%;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n }\n\n &--custom-color {\n  background: var(--tag-bg-color);\n  color: var(--tag-text-color);\n }\n\n &--sm {\n  padding: 0 6px;\n  font-size: 11px;\n  line-height: 18px;\n  height: 20px;\n  border-radius: 4px;\n }\n &--md {\n  padding: 0 8px;\n  font-size: 12px;\n  font-weight: 700;\n  line-height: 20px;\n  height: 24px;\n  border-radius: 4px;\n }\n &--lg {\n  padding: 0 10px;\n  font-size: 14px;\n  font-weight: 700;\n  line-height: 24px;\n  min-height: 28px;\n  border-radius: 5px;\n }\n &--rounded {\n  &.sd-tag--sm {\n   border-radius: 20px;\n  }\n  &.sd-tag--md {\n   border-radius: 20px;\n  }\n  &.sd-tag--lg {\n   border-radius: 15px;\n  }\n }\n}\n","import { Component, Prop, h, Element } from '@stencil/core';\n\nexport type TagColor =\n | 'grey'\n | 'red'\n | 'orange'\n | 'yellow'\n | 'green'\n | 'blue'\n | 'darkblue'\n | 'indigo';\n\nexport type TagSize = 'sm' | 'md' | 'lg';\n\nconst TAG_COLORS = {\n grey: 'bg-grey_20 text-grey_70',\n red: 'bg-red_15 text-red_70',\n orange: 'bg-orange_10 text-orange_65',\n yellow: 'bg-yellow_10 text-yellow_70',\n green: 'bg-green_15 text-green_75',\n blue: 'bg-brilliantblue_20 text-brilliantblue_75',\n darkblue: 'bg-oceanblue_15 text-oceanblue_70',\n indigo: 'bg-brilliantblue_10 text-brilliantblue_85',\n};\n\n@Component({\n tag: 'sd-tag',\n styleUrl: 'sd-tag.scss',\n shadow: true,\n})\nexport class SdTag {\n @Element() el!: HTMLElement;\n\n @Prop() size: TagSize = 'md';\n @Prop() color: TagColor = 'grey';\n @Prop() rounded: boolean = false;\n @Prop() label: string = '';\n @Prop() bgColor?: string;\n @Prop() textColor?: string;\n\n private getTagClasses(): string {\n  const classes = ['sd-tag', `sd-tag--${this.size}`];\n\n  if (this.rounded) {\n   classes.push('sd-tag--rounded');\n  }\n\n  if (this.color && !this.bgColor && !this.textColor) {\n   classes.push(TAG_COLORS[this.color]);\n  }\n\n  if (this.bgColor || this.textColor) {\n   classes.push('sd-tag--custom-color');\n  }\n\n  return classes.join(' ');\n }\n\n private renderContent() {\n  return [\n   <span class=\"sd-tag__content\">\n    <slot>{this.label}</slot>\n   </span>,\n  ];\n }\n\n render() {\n  const tagClasses = this.getTagClasses();\n\n  return (\n   <span\n    class={tagClasses}\n    style={{\n     '--tag-bg-color': this.bgColor,\n     '--tag-text-color': this.textColor,\n    }}\n    aria-label={this.label || 'tag'}\n   >\n    {this.renderContent()}\n   </span>\n  );\n }\n}\n"],"version":3}
+{"file":"p-VrppUi4Q.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,MAAM,CAAC,q+BAAq+B,CAAC;;ACc9/B,MAAM,UAAU,GAAG;AAClB,IAAA,IAAI,EAAE,yBAAyB;AAC/B,IAAA,GAAG,EAAE,uBAAuB;AAC5B,IAAA,MAAM,EAAE,6BAA6B;AACrC,IAAA,MAAM,EAAE,6BAA6B;AACrC,IAAA,KAAK,EAAE,2BAA2B;AAClC,IAAA,IAAI,EAAE,2CAA2C;AACjD,IAAA,QAAQ,EAAE,mCAAmC;AAC7C,IAAA,MAAM,EAAE,2CAA2C;CACnD;MAOY,KAAK,iBAAAA,kBAAA,CAAA,MAAA,KAAA,SAAAC,CAAA,CAAA;;;;;;;;;IAGT,IAAI,GAAY,IAAI;IACpB,KAAK,GAAa,MAAM;IACxB,OAAO,GAAY,KAAK;IACxB,KAAK,GAAW,EAAE;AAClB,IAAA,OAAO;AACP,IAAA,SAAS;IAET,aAAa,GAAA;QACpB,MAAM,OAAO,GAAG,CAAC,QAAQ,EAAE,CAAW,QAAA,EAAA,IAAI,CAAC,IAAI,CAAE,CAAA,CAAC;AAElD,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;AACjB,YAAA,OAAO,CAAC,IAAI,CAAC,iBAAiB,CAAC;;AAGhC,QAAA,IAAI,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;YACnD,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;;QAGrC,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS,EAAE;AACnC,YAAA,OAAO,CAAC,IAAI,CAAC,sBAAsB,CAAC;;AAGrC,QAAA,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;;IAGjB,aAAa,GAAA;QACpB,OAAO;AACN,YAAA,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC5B,CAAA,CAAA,MAAA,EAAA,IAAA,EAAO,IAAI,CAAC,KAAK,CAAQ,CACnB;SACP;;IAGF,MAAM,GAAA;AACL,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,EAAE;AAEvC,QAAA,QACC,CACC,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,UAAU,EACjB,KAAK,EAAE;gBACN,gBAAgB,EAAE,IAAI,CAAC,OAAO;gBAC9B,kBAAkB,EAAE,IAAI,CAAC,SAAS;AAClC,aAAA,EAAA,YAAA,EACW,IAAI,CAAC,KAAK,IAAI,KAAK,EAAA,EAE9B,IAAI,CAAC,aAAa,EAAE,CACf;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-tag/sd-tag.scss?tag=sd-tag&encapsulation=shadow","src/components/sd-tag/sd-tag.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\n:host([full-width]) {\n display: block;\n}\n\n.sd-tag {\n display: inline-flex;\n width: 100%;\n align-items: center;\n justify-content: center;\n gap: 8px;\n text-decoration: none;\n border: 1px solid transparent;\n border-radius: 4px;\n transition: all 0.2s ease-in-out;\n position: relative;\n overflow: hidden;\n white-space: nowrap;\n -webkit-user-select: none;\n user-select: none;\n box-sizing: border-box;\n\n &__content {\n  display: inline-block;\n  width: 100%;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n }\n\n &--custom-color {\n  background: var(--tag-bg-color);\n  color: var(--tag-text-color);\n }\n\n &--sm {\n  padding: 0 6px;\n  font-size: 11px;\n  line-height: 18px;\n  height: 20px;\n  border-radius: 4px;\n }\n &--md {\n  padding: 0 8px;\n  font-size: 12px;\n  font-weight: 700;\n  line-height: 20px;\n  height: 24px;\n  border-radius: 4px;\n }\n &--lg {\n  padding: 0 10px;\n  font-size: 14px;\n  font-weight: 700;\n  line-height: 24px;\n  min-height: 28px;\n  border-radius: 5px;\n }\n &--rounded {\n  &.sd-tag--sm {\n   border-radius: 20px;\n  }\n  &.sd-tag--md {\n   border-radius: 20px;\n  }\n  &.sd-tag--lg {\n   border-radius: 15px;\n  }\n }\n}\n","import { Component, Prop, h, Element } from '@stencil/core';\n\nexport type TagColor =\n | 'grey'\n | 'red'\n | 'orange'\n | 'yellow'\n | 'green'\n | 'blue'\n | 'darkblue'\n | 'indigo';\n\nexport type TagSize = 'sm' | 'md' | 'lg';\n\nconst TAG_COLORS = {\n grey: 'bg-grey_20 text-grey_70',\n red: 'bg-red_15 text-red_70',\n orange: 'bg-orange_10 text-orange_65',\n yellow: 'bg-yellow_10 text-yellow_70',\n green: 'bg-green_15 text-green_75',\n blue: 'bg-brilliantblue_20 text-brilliantblue_75',\n darkblue: 'bg-oceanblue_15 text-oceanblue_70',\n indigo: 'bg-brilliantblue_10 text-brilliantblue_85',\n};\n\n@Component({\n tag: 'sd-tag',\n styleUrl: 'sd-tag.scss',\n shadow: true,\n})\nexport class SdTag {\n @Element() el!: HTMLElement;\n\n @Prop() size: TagSize = 'md';\n @Prop() color: TagColor = 'grey';\n @Prop() rounded: boolean = false;\n @Prop() label: string = '';\n @Prop() bgColor?: string;\n @Prop() textColor?: string;\n\n private getTagClasses(): string {\n  const classes = ['sd-tag', `sd-tag--${this.size}`];\n\n  if (this.rounded) {\n   classes.push('sd-tag--rounded');\n  }\n\n  if (this.color && !this.bgColor && !this.textColor) {\n   classes.push(TAG_COLORS[this.color]);\n  }\n\n  if (this.bgColor || this.textColor) {\n   classes.push('sd-tag--custom-color');\n  }\n\n  return classes.join(' ');\n }\n\n private renderContent() {\n  return [\n   <span class=\"sd-tag__content\">\n    <slot>{this.label}</slot>\n   </span>,\n  ];\n }\n\n render() {\n  const tagClasses = this.getTagClasses();\n\n  return (\n   <span\n    class={tagClasses}\n    style={{\n     '--tag-bg-color': this.bgColor,\n     '--tag-text-color': this.textColor,\n    }}\n    aria-label={this.label || 'tag'}\n   >\n    {this.renderContent()}\n   </span>\n  );\n }\n}\n"],"version":3}

package/dist/components/{p-D2movWkD.js → p-iBNSlotR.js}

@@ -1,16 +1,16 @@
 import { p as proxyCustomElement, d as createEvent, h, t as transformTag } from './p-YLoygqPr.js';
 import { B as BaseDropdownEvent, S as SelectKeyboardNavigation } from './p-Dt-KAeBx.js';
-import { d as defineCustomElement$b } from './p-CdGD6AqM.js';
-import { d as defineCustomElement$a } from './p-UZEmuyIR.js';
-import { d as defineCustomElement$9 } from './p-CpRkV7pg.js';
-import { d as defineCustomElement$8 } from './p-CVMprLsE.js';
-import { d as defineCustomElement$7 } from './p-DnQF6htq.js';
-import { d as defineCustomElement$6 } from './p-D54IEoI6.js';
-import { d as defineCustomElement$5 } from './p-DbebUQwg.js';
-import { d as defineCustomElement$4 } from './p-s4Mg_xSz.js';
-import { d as defineCustomElement$3 } from './p-JF61vPAh.js';
-import { d as defineCustomElement$2 } from './p-RhBqdixM.js';
-import { d as defineCustomElement$1 } from './p-7xekTQRB.js';
+import { d as defineCustomElement$b } from './p-B-HVIIWo.js';
+import { d as defineCustomElement$a } from './p-ldcuoYNT.js';
+import { d as defineCustomElement$9 } from './p-FVxa2OYe.js';
+import { d as defineCustomElement$8 } from './p-CmghyzXg.js';
+import { d as defineCustomElement$7 } from './p-Sw7TJWkF.js';
+import { d as defineCustomElement$6 } from './p-Cp2TqeFd.js';
+import { d as defineCustomElement$5 } from './p-o-oFeHDX.js';
+import { d as defineCustomElement$4 } from './p-DD16YjVA.js';
+import { d as defineCustomElement$3 } from './p-BsBjOh8u.js';
+import { d as defineCustomElement$2 } from './p-BfHejNRG.js';
+import { d as defineCustomElement$1 } from './p-Dtljyq_t.js';
 
 const sdSelectCss = () => `sd-select{display:inline-flex;flex-flow:column nowrap;width:fit-content;height:fit-content}sd-select *:focus,sd-select *:focus-visible,sd-select *:focus-within{outline:none !important}sd-select .sd-select{width:100%}sd-select .sd-select .sd-select__trigger{padding:4px 28px 4px 12px;display:flex;width:100%;height:100%;align-items:center}sd-select .sd-select .sd-select__trigger .sd-select__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 .sd-select .sd-select__trigger .sd-select__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}sd-select .sd-select .sd-select__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease;margin-left:8px}sd-select .sd-select .sd-select__arrow--open{transform:rotate(180deg)}`;
 
@@ -155,7 +155,7 @@ const SdSelect = /*@__PURE__*/ proxyCustomElement(class SdSelect extends BaseDro
         }
     };
     render() {
-        return (h("sd-field", { key: '507736637b3b7acee4bfef07eac7175c5e196c86', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, useLabelRequired: this.useLabelRequired, insideLabel: this.insideLabel, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, h("div", { key: 'd905202201f5977d04a929af507653900af3ee75', class: {
+        return (h("sd-field", { key: '5c638efb68498690a30a855e3a337fac0e6e7810', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, useLabelRequired: this.useLabelRequired, insideLabel: this.insideLabel, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, h("div", { key: 'e14a4f235235fdafa94f645eac0c18091080c8e9', class: {
                 'sd-select': true,
                 'sd-select--disabled': this.disabled,
                 'sd-select--error': !!this.error,
@@ -284,6 +284,6 @@ function defineCustomElement() {
 }
 
 export { SdSelect as S, defineCustomElement as d };
-//# sourceMappingURL=p-D2movWkD.js.map
+//# sourceMappingURL=p-iBNSlotR.js.map
 
-//# sourceMappingURL=p-D2movWkD.js.map
+//# sourceMappingURL=p-iBNSlotR.js.map

package/dist/components/{p-D2movWkD.js.map → p-iBNSlotR.js.map}

@@ -1 +1 @@
-{"file":"p-D2movWkD.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/sd-select/sd-select.scss?tag=sd-select","src/components/sd-select/sd-select.tsx"],"sourcesContent":["@import 'variables';\n@import 'extend';\n\nsd-select {\n display: inline-flex;\n flex-flow: column nowrap;\n width: fit-content;\n height: fit-content;\n\n *:focus,\n *:focus-visible,\n *:focus-within {\n  outline: none !important;\n }\n\n .sd-select {\n  width: 100%;\n\n  .sd-select__trigger {\n   padding: 4px 28px 4px 12px;\n   display: flex;\n   width: 100%;\n   height: 100%;\n   align-items: center;\n\n   .sd-select__value {\n    flex: 1;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    line-height: 20px;\n    font-size: 12px;\n    font-weight: 400;\n    text-align: left;\n   }\n\n   .sd-select__clear {\n    margin: 0 4px;\n    width: 8px;\n    height: 8px;\n    background-color: transparent;\n    outline: none;\n    border: none;\n   }\n  }\n\n  .sd-select__arrow {\n   position: absolute;\n   top: 8px;\n   right: 8px;\n   width: 12px;\n   height: 12px;\n   color: $grey_65;\n   transition: transform 0.3s ease;\n   margin-left: 8px;\n\n   &--open {\n    transform: rotate(180deg);\n   }\n  }\n }\n}\n","import {\n Component,\n Event,\n EventEmitter,\n Prop,\n State,\n h,\n Element,\n Watch,\n Method,\n} from '@stencil/core';\nimport { BaseDropdownEvent } from '../../utils/base-dropdown-event';\nimport { SelectKeyboardNavigation } from '../../utils/select-keyboard-navigation';\nimport { SdTooltipProps } from '../sd-tooltip/sd-tooltip';\nimport { Rule } from '../../components';\n\nexport interface SelectOption {\n value: string | number;\n label: string;\n disabled?: boolean;\n}\n\nexport type SelectGroupOptionType = 'group' | 'subgroup' | 'item' | 'all';\n\nexport interface SelectOptionGroup extends SelectOption {\n type: SelectGroupOptionType;\n parent?: string;\n}\n\nexport interface SelectStyleProps {\n containerStyle?: { [key: string]: string };\n triggerStyle?: { [key: string]: string };\n dropdownStyle?: { [key: string]: string };\n optionStyle?: { [key: string]: string };\n labelStyle?: { [key: string]: string };\n}\n\nexport interface SelectEvents {\n sdUpdate: {\n  value: string | number | null;\n  option: SelectOption | null;\n };\n dropDownShow: { isOpen: boolean };\n}\n\nexport interface SelectMultipleEvents extends Pick<SelectEvents, 'dropDownShow' | 'dropDownShow'> {\n sdUpdate: SelectOption[] | null;\n}\n\n@Component({\n tag: 'sd-select',\n styleUrl: 'sd-select.scss',\n})\nexport class SdSelect extends BaseDropdownEvent {\n @Element() el!: HTMLElement;\n\n // props\n @Prop({ mutable: true }) value: string | number | null = null;\n @Prop({ mutable: true }) options: SelectOption[] = [];\n @Prop() placeholder: string = '선택';\n @Prop() optionPlaceholder: string = '옵션이 없습니다.';\n @Prop() width: string = '200px';\n @Prop() dropdownHeight: string = '260px';\n @Prop() autoFocus: boolean = false;\n @Prop() disabled: boolean = false;\n @Prop() clearable: boolean = false;\n @Prop() searchable: boolean = false;\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 // props - form\n @Prop() name?: string;\n @Prop() rules?: Rule[] = [];\n @Prop() error?: boolean = false;\n\n // props - custom slots\n @Prop() optionRenderer?: (option: SelectOption, index: number, isSelected: boolean) => any;\n\n // states\n @State() isOpen: boolean = false;\n @State() itemIndex: number = -1;\n @State() isScrolled: boolean = false;\n\n // events\n @Event({ eventName: 'sdUpdate' }) update?: EventEmitter<SelectEvents['sdUpdate']>;\n @Event({ eventName: 'sdDropDownShow' }) dropDownShow?: EventEmitter<SelectEvents['dropDownShow']>;\n\n private selectRef?: HTMLElement;\n private triggerRef?: HTMLElement;\n private formField?: HTMLSdFieldElement;\n private filteredOptions = this.options;\n private dropDownWidth: string = this.width;\n\n @Method()\n async sdOpen() {\n  this.isOpen = true;\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 @Watch('value')\n async valueChanged() {\n  const selectedOption = this.getSelectedOption();\n  this.update?.emit({ value: selectedOption?.value || null, option: selectedOption || null });\n }\n\n @Watch('isOpen')\n async isOpenChanged() {\n  // Base class의 이벤트 관리 호출 - 다른 select와의 이벤트 충돌 방지\n  this.onDropdownToggle(this.isOpen);\n  this.dropDownShow?.emit({ isOpen: this.isOpen });\n\n  if (this.isOpen === false) {\n   await this.formField?.sdValidate();\n  }\n }\n\n componentWillLoad() {\n  this.initializeEvent(); // global dropdown Manager에 등록 + 이벤트 핸들러 초기화\n }\n\n componentDidLoad() {\n  if (this.autoFocus) {\n   this.selectRef?.focus();\n  }\n }\n\n // render 이후 label을 제외한 trigger의 너비를 기준으로 dropdown 너비 설정\n componentDidRender() {\n  const trigger = this.triggerRef;\n  const rect = trigger?.getBoundingClientRect();\n  this.dropDownWidth = rect?.width ? `${rect.width}px` : this.width;\n }\n\n disconnectedCallback() {\n  this.cleanupEvent(); // global dropdown Manager에서 제거 + 이벤트 정리\n }\n\n protected handleDocumentClick(event: Event): void {\n  if (!this.selectRef?.contains(event.target as Node)) {\n   this.isOpen = false;\n  }\n }\n\n protected handleDocumentKeydown(keyboardEvent: KeyboardEvent): void {\n  keyboardEvent.stopPropagation();\n  const targetKey = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];\n  if (!targetKey.includes(keyboardEvent.key)) return;\n\n  keyboardEvent.preventDefault();\n  switch (keyboardEvent.key) {\n   case 'ArrowDown':\n   case 'ArrowUp':\n    const keyboardNavigation = new SelectKeyboardNavigation(this.searchable, this.filteredOptions);\n    const nextIndex = keyboardNavigation.getNextIndex(this.itemIndex, keyboardEvent.key);\n    this.itemIndex = nextIndex;\n    break;\n   case 'Enter':\n    const selectedOption = this.filteredOptions[this.itemIndex];\n    if (selectedOption && !selectedOption.disabled) {\n     this.value = selectedOption.value;\n     this.isOpen = false;\n    }\n    break;\n   case 'Escape':\n    this.isOpen = false;\n    break;\n  }\n }\n\n private getSelectedOption(): SelectOption | undefined {\n  return this.options.find(option => option.value === this.value);\n }\n\n closeDropdown() {\n  this.isOpen = false;\n }\n\n handleTriggerClick = (event: Event) => {\n  event.stopPropagation();\n\n  if (!this.disabled) {\n   this.isOpen = !this.isOpen;\n   this.dropDownShow?.emit({ isOpen: this.isOpen });\n  }\n };\n\n handleOptionClick = (detail: { option: SelectOption; event: Event }) => {\n  const { option, event } = detail;\n  event.stopPropagation();\n\n  if (!option.disabled) {\n   this.value = option.value;\n   this.isOpen = false;\n  }\n };\n\n render() {\n  return (\n   <sd-field\n    label={this.label}\n    name={this.name}\n    rules={this.rules}\n    error={this.error}\n    disabled={this.disabled}\n    useLabelRequired={this.useLabelRequired}\n    insideLabel={this.insideLabel}\n    labelTooltip={this.labelTooltip}\n    labelTooltipProps={this.labelTooltipProps}\n    ref={el => (this.formField = el)}\n    style={{ '--field-width': this.width || '200px' }}\n   >\n    <div\n     class={{\n      'sd-select': true,\n      'sd-select--disabled': this.disabled,\n      'sd-select--error': !!this.error,\n      'sd-select--label': !!this.label,\n     }}\n     ref={el => (this.selectRef = el)}\n    >\n     {this.renderTrigger()}\n     {this.renderDropdown()}\n    </div>\n   </sd-field>\n  );\n }\n\n private renderTrigger() {\n  const selectedOption = this.getSelectedOption();\n  return (\n   <div\n    class=\"sd-select__trigger\"\n    tabindex={this.disabled ? -1 : 0}\n    onClick={this.handleTriggerClick}\n    ref={el => (this.triggerRef = el)}\n   >\n    <span class=\"sd-select__value\">{selectedOption ? selectedOption.label : this.placeholder}</span>\n    {this.clearable && selectedOption && !this.disabled && (\n     <sd-icon\n      key=\"clear-icon\"\n      name=\"close\"\n      size={10}\n      color=\"#888\"\n      class=\"sd-select__clear\"\n      onClick={async event => {\n       event.stopPropagation();\n       this.value = null;\n       await this.formField?.sdValidate();\n      }}\n     ></sd-icon>\n    )}\n\n    <sd-icon\n     key=\"arrow-icon\"\n     name=\"arrowDown\"\n     color=\"#888\"\n     class={{ 'sd-select__arrow': true, 'sd-select__arrow--open': this.isOpen }}\n    ></sd-icon>\n   </div>\n  );\n }\n\n private renderDropdown() {\n  if (this.isOpen === false) return null;\n\n  const parentRef = (this.selectRef?.querySelector('.sd-select__trigger') ||\n   this.selectRef) as HTMLElement;\n\n  return (\n   <sd-portal open={this.isOpen} parentRef={parentRef} onSdClose={this.closeDropdown}>\n    <sd-select-dropdown\n     value={this.value}\n     options={this.options}\n     itemIndex={this.itemIndex}\n     width={this.dropDownWidth}\n     dropdownHeight={this.dropdownHeight}\n     searchable={this.searchable}\n     optionPlaceholder={this.optionPlaceholder}\n     onSdOptionClick={({ detail }) => this.handleOptionClick(detail)}\n     onSdOptionFiltered={({ detail }) => (this.filteredOptions = detail)}\n    ></sd-select-dropdown>\n   </sd-portal>\n  );\n }\n}\n"],"version":3}
+{"file":"p-iBNSlotR.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/sd-select/sd-select.scss?tag=sd-select","src/components/sd-select/sd-select.tsx"],"sourcesContent":["@import 'variables';\n@import 'extend';\n\nsd-select {\n display: inline-flex;\n flex-flow: column nowrap;\n width: fit-content;\n height: fit-content;\n\n *:focus,\n *:focus-visible,\n *:focus-within {\n  outline: none !important;\n }\n\n .sd-select {\n  width: 100%;\n\n  .sd-select__trigger {\n   padding: 4px 28px 4px 12px;\n   display: flex;\n   width: 100%;\n   height: 100%;\n   align-items: center;\n\n   .sd-select__value {\n    flex: 1;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    line-height: 20px;\n    font-size: 12px;\n    font-weight: 400;\n    text-align: left;\n   }\n\n   .sd-select__clear {\n    margin: 0 4px;\n    width: 8px;\n    height: 8px;\n    background-color: transparent;\n    outline: none;\n    border: none;\n   }\n  }\n\n  .sd-select__arrow {\n   position: absolute;\n   top: 8px;\n   right: 8px;\n   width: 12px;\n   height: 12px;\n   color: $grey_65;\n   transition: transform 0.3s ease;\n   margin-left: 8px;\n\n   &--open {\n    transform: rotate(180deg);\n   }\n  }\n }\n}\n","import {\n Component,\n Event,\n EventEmitter,\n Prop,\n State,\n h,\n Element,\n Watch,\n Method,\n} from '@stencil/core';\nimport { BaseDropdownEvent } from '../../utils/base-dropdown-event';\nimport { SelectKeyboardNavigation } from '../../utils/select-keyboard-navigation';\nimport { SdTooltipProps } from '../sd-tooltip/sd-tooltip';\nimport { Rule } from '../../components';\n\nexport interface SelectOption {\n value: string | number;\n label: string;\n disabled?: boolean;\n}\n\nexport type SelectGroupOptionType = 'group' | 'subgroup' | 'item' | 'all';\n\nexport interface SelectOptionGroup extends SelectOption {\n type: SelectGroupOptionType;\n parent?: string;\n}\n\nexport interface SelectStyleProps {\n containerStyle?: { [key: string]: string };\n triggerStyle?: { [key: string]: string };\n dropdownStyle?: { [key: string]: string };\n optionStyle?: { [key: string]: string };\n labelStyle?: { [key: string]: string };\n}\n\nexport interface SelectEvents {\n sdUpdate: {\n  value: string | number | null;\n  option: SelectOption | null;\n };\n dropDownShow: { isOpen: boolean };\n}\n\nexport interface SelectMultipleEvents extends Pick<SelectEvents, 'dropDownShow' | 'dropDownShow'> {\n sdUpdate: SelectOption[] | null;\n}\n\n@Component({\n tag: 'sd-select',\n styleUrl: 'sd-select.scss',\n})\nexport class SdSelect extends BaseDropdownEvent {\n @Element() el!: HTMLElement;\n\n // props\n @Prop({ mutable: true }) value: string | number | null = null;\n @Prop({ mutable: true }) options: SelectOption[] = [];\n @Prop() placeholder: string = '선택';\n @Prop() optionPlaceholder: string = '옵션이 없습니다.';\n @Prop() width: string = '200px';\n @Prop() dropdownHeight: string = '260px';\n @Prop() autoFocus: boolean = false;\n @Prop() disabled: boolean = false;\n @Prop() clearable: boolean = false;\n @Prop() searchable: boolean = false;\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 // props - form\n @Prop() name?: string;\n @Prop() rules?: Rule[] = [];\n @Prop() error?: boolean = false;\n\n // props - custom slots\n @Prop() optionRenderer?: (option: SelectOption, index: number, isSelected: boolean) => any;\n\n // states\n @State() isOpen: boolean = false;\n @State() itemIndex: number = -1;\n @State() isScrolled: boolean = false;\n\n // events\n @Event({ eventName: 'sdUpdate' }) update?: EventEmitter<SelectEvents['sdUpdate']>;\n @Event({ eventName: 'sdDropDownShow' }) dropDownShow?: EventEmitter<SelectEvents['dropDownShow']>;\n\n private selectRef?: HTMLElement;\n private triggerRef?: HTMLElement;\n private formField?: HTMLSdFieldElement;\n private filteredOptions = this.options;\n private dropDownWidth: string = this.width;\n\n @Method()\n async sdOpen() {\n  this.isOpen = true;\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 @Watch('value')\n async valueChanged() {\n  const selectedOption = this.getSelectedOption();\n  this.update?.emit({ value: selectedOption?.value || null, option: selectedOption || null });\n }\n\n @Watch('isOpen')\n async isOpenChanged() {\n  // Base class의 이벤트 관리 호출 - 다른 select와의 이벤트 충돌 방지\n  this.onDropdownToggle(this.isOpen);\n  this.dropDownShow?.emit({ isOpen: this.isOpen });\n\n  if (this.isOpen === false) {\n   await this.formField?.sdValidate();\n  }\n }\n\n componentWillLoad() {\n  this.initializeEvent(); // global dropdown Manager에 등록 + 이벤트 핸들러 초기화\n }\n\n componentDidLoad() {\n  if (this.autoFocus) {\n   this.selectRef?.focus();\n  }\n }\n\n // render 이후 label을 제외한 trigger의 너비를 기준으로 dropdown 너비 설정\n componentDidRender() {\n  const trigger = this.triggerRef;\n  const rect = trigger?.getBoundingClientRect();\n  this.dropDownWidth = rect?.width ? `${rect.width}px` : this.width;\n }\n\n disconnectedCallback() {\n  this.cleanupEvent(); // global dropdown Manager에서 제거 + 이벤트 정리\n }\n\n protected handleDocumentClick(event: Event): void {\n  if (!this.selectRef?.contains(event.target as Node)) {\n   this.isOpen = false;\n  }\n }\n\n protected handleDocumentKeydown(keyboardEvent: KeyboardEvent): void {\n  keyboardEvent.stopPropagation();\n  const targetKey = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];\n  if (!targetKey.includes(keyboardEvent.key)) return;\n\n  keyboardEvent.preventDefault();\n  switch (keyboardEvent.key) {\n   case 'ArrowDown':\n   case 'ArrowUp':\n    const keyboardNavigation = new SelectKeyboardNavigation(this.searchable, this.filteredOptions);\n    const nextIndex = keyboardNavigation.getNextIndex(this.itemIndex, keyboardEvent.key);\n    this.itemIndex = nextIndex;\n    break;\n   case 'Enter':\n    const selectedOption = this.filteredOptions[this.itemIndex];\n    if (selectedOption && !selectedOption.disabled) {\n     this.value = selectedOption.value;\n     this.isOpen = false;\n    }\n    break;\n   case 'Escape':\n    this.isOpen = false;\n    break;\n  }\n }\n\n private getSelectedOption(): SelectOption | undefined {\n  return this.options.find(option => option.value === this.value);\n }\n\n closeDropdown() {\n  this.isOpen = false;\n }\n\n handleTriggerClick = (event: Event) => {\n  event.stopPropagation();\n\n  if (!this.disabled) {\n   this.isOpen = !this.isOpen;\n   this.dropDownShow?.emit({ isOpen: this.isOpen });\n  }\n };\n\n handleOptionClick = (detail: { option: SelectOption; event: Event }) => {\n  const { option, event } = detail;\n  event.stopPropagation();\n\n  if (!option.disabled) {\n   this.value = option.value;\n   this.isOpen = false;\n  }\n };\n\n render() {\n  return (\n   <sd-field\n    label={this.label}\n    name={this.name}\n    rules={this.rules}\n    error={this.error}\n    disabled={this.disabled}\n    useLabelRequired={this.useLabelRequired}\n    insideLabel={this.insideLabel}\n    labelTooltip={this.labelTooltip}\n    labelTooltipProps={this.labelTooltipProps}\n    ref={el => (this.formField = el)}\n    style={{ '--field-width': this.width || '200px' }}\n   >\n    <div\n     class={{\n      'sd-select': true,\n      'sd-select--disabled': this.disabled,\n      'sd-select--error': !!this.error,\n      'sd-select--label': !!this.label,\n     }}\n     ref={el => (this.selectRef = el)}\n    >\n     {this.renderTrigger()}\n     {this.renderDropdown()}\n    </div>\n   </sd-field>\n  );\n }\n\n private renderTrigger() {\n  const selectedOption = this.getSelectedOption();\n  return (\n   <div\n    class=\"sd-select__trigger\"\n    tabindex={this.disabled ? -1 : 0}\n    onClick={this.handleTriggerClick}\n    ref={el => (this.triggerRef = el)}\n   >\n    <span class=\"sd-select__value\">{selectedOption ? selectedOption.label : this.placeholder}</span>\n    {this.clearable && selectedOption && !this.disabled && (\n     <sd-icon\n      key=\"clear-icon\"\n      name=\"close\"\n      size={10}\n      color=\"#888\"\n      class=\"sd-select__clear\"\n      onClick={async event => {\n       event.stopPropagation();\n       this.value = null;\n       await this.formField?.sdValidate();\n      }}\n     ></sd-icon>\n    )}\n\n    <sd-icon\n     key=\"arrow-icon\"\n     name=\"arrowDown\"\n     color=\"#888\"\n     class={{ 'sd-select__arrow': true, 'sd-select__arrow--open': this.isOpen }}\n    ></sd-icon>\n   </div>\n  );\n }\n\n private renderDropdown() {\n  if (this.isOpen === false) return null;\n\n  const parentRef = (this.selectRef?.querySelector('.sd-select__trigger') ||\n   this.selectRef) as HTMLElement;\n\n  return (\n   <sd-portal open={this.isOpen} parentRef={parentRef} onSdClose={this.closeDropdown}>\n    <sd-select-dropdown\n     value={this.value}\n     options={this.options}\n     itemIndex={this.itemIndex}\n     width={this.dropDownWidth}\n     dropdownHeight={this.dropdownHeight}\n     searchable={this.searchable}\n     optionPlaceholder={this.optionPlaceholder}\n     onSdOptionClick={({ detail }) => this.handleOptionClick(detail)}\n     onSdOptionFiltered={({ detail }) => (this.filteredOptions = detail)}\n    ></sd-select-dropdown>\n   </sd-portal>\n  );\n }\n}\n"],"version":3}

package/dist/components/{p-UZEmuyIR.js → p-ldcuoYNT.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, d as createEvent, h, t as transformTag } from './p-YLoygqPr.js';
-import { d as defineCustomElement$1 } from './p-DnQF6htq.js';
+import { d as defineCustomElement$1 } from './p-Sw7TJWkF.js';
 
 const sdCheckboxCss = () => `sd-checkbox{display:block;height:20px;line-height:0}sd-checkbox .sd-checkbox{cursor:pointer;display:inline-flex;align-items:center;gap:8px;height:20px;max-height:20px}sd-checkbox .sd-checkbox>input{display:none}sd-checkbox .sd-checkbox:hover.sd-checkbox--checked .sd-checkbox__bg,sd-checkbox .sd-checkbox:hover.sd-checkbox--indeterminate .sd-checkbox__bg{border-color:#005cc9;background:#005cc9}sd-checkbox .sd-checkbox:hover.sd-checkbox--unchecked .sd-checkbox__bg{border:1px solid #0075ff;background:#d9eaff}sd-checkbox .sd-checkbox:hover.sd-checkbox--disabled .sd-checkbox__bg{border:1px solid transparent;background:#eeeeee}sd-checkbox .sd-checkbox__bg{width:16px;height:16px;border-radius:2px;border:1px solid #888888;box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;overflow:hidden;line-height:0}sd-checkbox .sd-checkbox__label{font-size:12px;color:#333333;line-height:20px}sd-checkbox .sd-checkbox--checked.sd-checkbox--disabled .sd-checkbox__bg,sd-checkbox .sd-checkbox--indeterminate.sd-checkbox--disabled .sd-checkbox__bg{background:#eeeeee;border:1px solid #cccccc !important}sd-checkbox .sd-checkbox--checked .sd-checkbox__bg,sd-checkbox .sd-checkbox--indeterminate .sd-checkbox__bg{border:1px solid #0075ff;background:#0075ff}sd-checkbox .sd-checkbox--unchecked .sd-checkbox__bg{background:white}sd-checkbox .sd-checkbox--disabled{cursor:not-allowed}sd-checkbox .sd-checkbox--disabled .sd-checkbox__bg{background:#eeeeee;border:1px solid #cccccc !important}`;
 
@@ -114,6 +114,6 @@ function defineCustomElement() {
 }
 
 export { SdCheckbox as S, defineCustomElement as d };
-//# sourceMappingURL=p-UZEmuyIR.js.map
+//# sourceMappingURL=p-ldcuoYNT.js.map
 
-//# sourceMappingURL=p-UZEmuyIR.js.map
+//# sourceMappingURL=p-ldcuoYNT.js.map

package/dist/components/{p-UZEmuyIR.js.map → p-ldcuoYNT.js.map}

@@ -1 +1 @@
-{"file":"p-UZEmuyIR.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-checkbox/sd-checkbox.scss?tag=sd-checkbox","src/components/sd-checkbox/sd-checkbox.tsx"],"sourcesContent":["@import 'variables';\n\nsd-checkbox {\n display: block;\n height: 20px;\n line-height: 0;\n\n .sd-checkbox {\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  height: 20px;\n  max-height: 20px;\n\n  > input {\n   display: none;\n  }\n\n  &:hover {\n   &.sd-checkbox--checked,\n   &.sd-checkbox--indeterminate {\n    .sd-checkbox__bg {\n     border-color: $brilliantblue_80;\n     background: $brilliantblue_80;\n    }\n   }\n\n   &.sd-checkbox--unchecked {\n    .sd-checkbox__bg {\n     border: 1px solid $brilliantblue_75;\n     background: $brilliantblue_25;\n    }\n   }\n\n   &.sd-checkbox--disabled {\n    .sd-checkbox__bg {\n     border: 1px solid transparent;\n     background: $grey_20;\n    }\n   }\n  }\n\n  &__bg {\n   width: 16px;\n   height: 16px;\n   border-radius: 2px;\n   border: 1px solid $grey_65;\n   box-sizing: border-box;\n   display: inline-flex;\n   justify-content: center;\n   align-items: center;\n   overflow: hidden;\n   line-height: 0;\n  }\n\n  &__label {\n   font-size: 12px;\n   color: $grey_90;\n   line-height: 20px;\n  }\n\n  &--checked,\n  &--indeterminate {\n   &.sd-checkbox--disabled {\n    .sd-checkbox__bg {\n     background: $grey_20;\n     border: 1px solid $grey_45 !important;\n    }\n   }\n\n   .sd-checkbox__bg {\n    border: 1px solid $brilliantblue_75;\n    background: $brilliantblue_75;\n   }\n  }\n\n  &--unchecked {\n   .sd-checkbox__bg {\n    background: white;\n   }\n  }\n\n  &--disabled {\n   cursor: not-allowed;\n   .sd-checkbox__bg {\n    background: $grey_20;\n    border: 1px solid $grey_45 !important;\n   }\n  }\n }\n}\n","import { Component, Prop, h, Element, Event, EventEmitter, State, Watch } from '@stencil/core';\n\nexport type CheckedType = boolean | any[] | null;\n\n@Component({\n tag: 'sd-checkbox',\n styleUrl: 'sd-checkbox.scss',\n})\nexport class SdCheckbox {\n @Element() el!: HTMLElement;\n\n /** 현재 선택 상태 또는 배열 형태의 값 */\n @Prop({ mutable: true }) value!: CheckedType;\n\n /** 배열 모드에서의 개별 값 */\n @Prop() val?: any;\n\n /** 비활성화 여부 */\n @Prop() disabled: boolean = false;\n\n /** 표시할 라벨 텍스트 */\n @Prop() label: string = '';\n\n /** 내부 체크 상태 */\n @State() private isChecked: boolean | null = false;\n\n /** 값 변경 이벤트 */\n @Event({ eventName: 'sdUpdate' }) update!: EventEmitter<CheckedType>;\n\n componentWillLoad() {\n  this.updateCheckedState(this.value);\n }\n\n componentWillRender() {\n  this.updateCheckedState(this.value);\n }\n\n @Watch('value')\n watchValueHandler(newValue: CheckedType) {\n  this.updateCheckedState(newValue);\n }\n\n private get checkboxClasses(): string {\n  const classes = [\n   'sd-checkbox',\n   `sd-checkbox--${\n    this.isChecked ? 'checked' : this.isChecked === null ? 'indeterminate' : 'unchecked'\n   }`,\n  ];\n\n  if (this.disabled) {\n   classes.push('sd-checkbox--disabled');\n  }\n\n  return classes.join(' ');\n }\n\n private updateCheckedState(value: CheckedType) {\n  if (value === null) {\n   this.isChecked = null;\n  } else if (typeof value === 'boolean') {\n   this.isChecked = value;\n  } else if (Array.isArray(value)) {\n   this.isChecked = this.val !== undefined && value.includes(this.val);\n  } else {\n   this.isChecked = false;\n  }\n }\n\n private handleChange = () => {\n  if (this.disabled) return;\n\n  let newValue: CheckedType;\n\n  if (typeof this.value === 'boolean') {\n   newValue = !this.value;\n  } else if (Array.isArray(this.value)) {\n   if (this.val === undefined) {\n    console.warn('A \"val\" property is required when using an array for the \"value\" property.');\n   }\n\n   const valueSet = new Set(this.value);\n   valueSet.has(this.val) ? valueSet.delete(this.val) : valueSet.add(this.val);\n   newValue = Array.from(valueSet);\n  } else {\n   newValue = !this.isChecked;\n  }\n\n  this.value = newValue;\n  this.update.emit(newValue);\n };\n\n render() {\n  return (\n   <label aria-label={this.label || 'checkbox'} class={this.checkboxClasses}>\n    <input\n     type=\"checkbox\"\n     value={this.val}\n     checked={!!this.isChecked}\n     disabled={this.disabled}\n     onChange={this.handleChange}\n     name={this.label || 'checkbox'}\n    />\n    <div class=\"sd-checkbox__bg\">\n     {this.isChecked !== false ? (\n      <sd-icon\n       name={this.isChecked === true ? 'check' : 'minus'}\n       size={12}\n       color={this.disabled ? '#888888' : 'white'}\n      />\n     ) : null}\n    </div>\n    {this.label && <span class=\"sd-checkbox__label\">{this.label}</span>}\n   </label>\n  );\n }\n}\n"],"version":3}
+{"file":"p-ldcuoYNT.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-checkbox/sd-checkbox.scss?tag=sd-checkbox","src/components/sd-checkbox/sd-checkbox.tsx"],"sourcesContent":["@import 'variables';\n\nsd-checkbox {\n display: block;\n height: 20px;\n line-height: 0;\n\n .sd-checkbox {\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  height: 20px;\n  max-height: 20px;\n\n  > input {\n   display: none;\n  }\n\n  &:hover {\n   &.sd-checkbox--checked,\n   &.sd-checkbox--indeterminate {\n    .sd-checkbox__bg {\n     border-color: $brilliantblue_80;\n     background: $brilliantblue_80;\n    }\n   }\n\n   &.sd-checkbox--unchecked {\n    .sd-checkbox__bg {\n     border: 1px solid $brilliantblue_75;\n     background: $brilliantblue_25;\n    }\n   }\n\n   &.sd-checkbox--disabled {\n    .sd-checkbox__bg {\n     border: 1px solid transparent;\n     background: $grey_20;\n    }\n   }\n  }\n\n  &__bg {\n   width: 16px;\n   height: 16px;\n   border-radius: 2px;\n   border: 1px solid $grey_65;\n   box-sizing: border-box;\n   display: inline-flex;\n   justify-content: center;\n   align-items: center;\n   overflow: hidden;\n   line-height: 0;\n  }\n\n  &__label {\n   font-size: 12px;\n   color: $grey_90;\n   line-height: 20px;\n  }\n\n  &--checked,\n  &--indeterminate {\n   &.sd-checkbox--disabled {\n    .sd-checkbox__bg {\n     background: $grey_20;\n     border: 1px solid $grey_45 !important;\n    }\n   }\n\n   .sd-checkbox__bg {\n    border: 1px solid $brilliantblue_75;\n    background: $brilliantblue_75;\n   }\n  }\n\n  &--unchecked {\n   .sd-checkbox__bg {\n    background: white;\n   }\n  }\n\n  &--disabled {\n   cursor: not-allowed;\n   .sd-checkbox__bg {\n    background: $grey_20;\n    border: 1px solid $grey_45 !important;\n   }\n  }\n }\n}\n","import { Component, Prop, h, Element, Event, EventEmitter, State, Watch } from '@stencil/core';\n\nexport type CheckedType = boolean | any[] | null;\n\n@Component({\n tag: 'sd-checkbox',\n styleUrl: 'sd-checkbox.scss',\n})\nexport class SdCheckbox {\n @Element() el!: HTMLElement;\n\n /** 현재 선택 상태 또는 배열 형태의 값 */\n @Prop({ mutable: true }) value!: CheckedType;\n\n /** 배열 모드에서의 개별 값 */\n @Prop() val?: any;\n\n /** 비활성화 여부 */\n @Prop() disabled: boolean = false;\n\n /** 표시할 라벨 텍스트 */\n @Prop() label: string = '';\n\n /** 내부 체크 상태 */\n @State() private isChecked: boolean | null = false;\n\n /** 값 변경 이벤트 */\n @Event({ eventName: 'sdUpdate' }) update!: EventEmitter<CheckedType>;\n\n componentWillLoad() {\n  this.updateCheckedState(this.value);\n }\n\n componentWillRender() {\n  this.updateCheckedState(this.value);\n }\n\n @Watch('value')\n watchValueHandler(newValue: CheckedType) {\n  this.updateCheckedState(newValue);\n }\n\n private get checkboxClasses(): string {\n  const classes = [\n   'sd-checkbox',\n   `sd-checkbox--${\n    this.isChecked ? 'checked' : this.isChecked === null ? 'indeterminate' : 'unchecked'\n   }`,\n  ];\n\n  if (this.disabled) {\n   classes.push('sd-checkbox--disabled');\n  }\n\n  return classes.join(' ');\n }\n\n private updateCheckedState(value: CheckedType) {\n  if (value === null) {\n   this.isChecked = null;\n  } else if (typeof value === 'boolean') {\n   this.isChecked = value;\n  } else if (Array.isArray(value)) {\n   this.isChecked = this.val !== undefined && value.includes(this.val);\n  } else {\n   this.isChecked = false;\n  }\n }\n\n private handleChange = () => {\n  if (this.disabled) return;\n\n  let newValue: CheckedType;\n\n  if (typeof this.value === 'boolean') {\n   newValue = !this.value;\n  } else if (Array.isArray(this.value)) {\n   if (this.val === undefined) {\n    console.warn('A \"val\" property is required when using an array for the \"value\" property.');\n   }\n\n   const valueSet = new Set(this.value);\n   valueSet.has(this.val) ? valueSet.delete(this.val) : valueSet.add(this.val);\n   newValue = Array.from(valueSet);\n  } else {\n   newValue = !this.isChecked;\n  }\n\n  this.value = newValue;\n  this.update.emit(newValue);\n };\n\n render() {\n  return (\n   <label aria-label={this.label || 'checkbox'} class={this.checkboxClasses}>\n    <input\n     type=\"checkbox\"\n     value={this.val}\n     checked={!!this.isChecked}\n     disabled={this.disabled}\n     onChange={this.handleChange}\n     name={this.label || 'checkbox'}\n    />\n    <div class=\"sd-checkbox__bg\">\n     {this.isChecked !== false ? (\n      <sd-icon\n       name={this.isChecked === true ? 'check' : 'minus'}\n       size={12}\n       color={this.disabled ? '#888888' : 'white'}\n      />\n     ) : null}\n    </div>\n    {this.label && <span class=\"sd-checkbox__label\">{this.label}</span>}\n   </label>\n  );\n }\n}\n"],"version":3}

package/dist/components/{p-DbebUQwg.js → p-o-oFeHDX.js}

@@ -121,7 +121,7 @@ const SdPortal = /*@__PURE__*/ proxyCustomElement(class SdPortal extends H {
         this.close.emit();
     }
     render() {
-        return h("slot", { key: '180911ce3dbda3a8e2576facbf0ab16b5cb0b61f' });
+        return h("slot", { key: '6181685d61b1e95116316b72208702597bba2b8e' });
     }
 }, [772, "sd-portal", {
         "to": [1],
@@ -145,6 +145,6 @@ function defineCustomElement() {
 }
 
 export { SdPortal as S, defineCustomElement as d };
-//# sourceMappingURL=p-DbebUQwg.js.map
+//# sourceMappingURL=p-o-oFeHDX.js.map
 
-//# sourceMappingURL=p-DbebUQwg.js.map
+//# sourceMappingURL=p-o-oFeHDX.js.map

package/dist/components/{p-DbebUQwg.js.map → p-o-oFeHDX.js.map}

@@ -1 +1 @@
-{"file":"p-DbebUQwg.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-portal/sd-portal.tsx"],"sourcesContent":["import { Component, Element, Event, EventEmitter, Listen, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'sd-portal',\n shadow: false,\n})\nexport class SdPortal {\n @Element() hostEl!: HTMLElement;\n @Prop() to: HTMLElement | string = 'body';\n @Prop() parentRef: HTMLElement | null = null;\n @Prop() offset: [number, number] = [0, 4];\n @Prop() zIndex: number = 9999;\n @Prop() open: boolean = false;\n\n @Event({ eventName: 'sdClose' }) close!: EventEmitter<void>;\n\n private container?: HTMLElement;\n private wrapper?: HTMLElement;\n private rafId?: number;\n private isInsideClick = false;\n\n private resizeObserver?: ResizeObserver;\n private mutationObserver?: MutationObserver;\n\n componentDidLoad() {\n  this.container = this.resolveContainer();\n  this.createWrapper();\n  this.moveSlotContent();\n  this.updatePosition();\n  this.observeParent();\n }\n\n componentDidRender() {\n  if (!this.wrapper) return;\n  this.wrapper.style.display = this.open ? 'block' : 'none';\n  if (this.open) this.updatePosition();\n }\n\n disconnectedCallback() {\n  this.unobserveParent();\n  this.wrapper?.remove();\n }\n\n private resolveContainer(): HTMLElement {\n  const el = typeof this.to === 'string' ? document.querySelector(this.to) : this.to;\n  return el instanceof HTMLElement ? el : document.body;\n }\n\n private createWrapper() {\n  this.wrapper = document.createElement('div');\n  Object.assign(this.wrapper.style, {\n   position: 'absolute',\n   zIndex: this.zIndex.toString(),\n   transition: 'opacity 0.4s',\n  });\n  this.container!.appendChild(this.wrapper);\n }\n\n private moveSlotContent() {\n  if (!this.wrapper) return;\n  const nodes = Array.from(this.hostEl.childNodes).filter(n => n.nodeType !== Node.COMMENT_NODE);\n  nodes.forEach(n => this.wrapper!.appendChild(n));\n }\n\n // 위치 갱신 (scroll / resize)\n @Listen('scroll', { target: 'window' })\n @Listen('resize', { target: 'window' })\n updatePosition() {\n  if (this.rafId) cancelAnimationFrame(this.rafId);\n  this.rafId = requestAnimationFrame(() => {\n   if (!this.parentRef || !this.wrapper) return;\n\n   const parentRect = this.parentRef.getBoundingClientRect();\n   const wrapperRect = this.wrapper.getBoundingClientRect();\n   const viewport = {\n    width: window.innerWidth,\n    height: window.innerHeight,\n   };\n\n   let top = parentRect.bottom + window.scrollY + this.offset[1];\n   let left = parentRect.left + window.scrollX + this.offset[0];\n\n   // 화면 상하단 넘어갈 시 반전\n   if (parentRect.bottom + wrapperRect.height + this.offset[1] > viewport.height) {\n    top = parentRect.top + window.scrollY - wrapperRect.height - this.offset[1];\n   }\n   if (top < window.scrollY) {\n    top = parentRect.bottom + window.scrollY + this.offset[1];\n   }\n\n   // 화면 좌우측 넘어갈 시 반전\n   if (parentRect.left + wrapperRect.width + this.offset[0] > viewport.width) {\n    left = parentRect.right + window.scrollX - wrapperRect.width - this.offset[0];\n   }\n   if (left < 0) {\n    left = this.offset[0];\n   }\n\n   this.wrapper.style.top = `${top}px`;\n   this.wrapper.style.left = `${left}px`;\n  });\n }\n\n // parentRef의 이동 / 크기변경 감지\n private observeParent() {\n  if (!this.parentRef) return;\n\n  this.resizeObserver = new ResizeObserver(() => this.updatePosition());\n  this.resizeObserver.observe(this.parentRef);\n\n  this.mutationObserver = new MutationObserver(() => this.updatePosition());\n  this.mutationObserver.observe(document.body, {\n   childList: true,\n   subtree: true,\n  });\n }\n\n private unobserveParent() {\n  this.resizeObserver?.disconnect();\n  this.mutationObserver?.disconnect();\n }\n\n // 외부 클릭 감지\n @Listen('mousedown', { target: 'window' })\n handleMouseDown(e: MouseEvent) {\n  this.isInsideClick = !!(this.wrapper && this.wrapper.contains(e.target as Node));\n }\n\n @Listen('click', { target: 'window' })\n handleWindowClick(e: MouseEvent) {\n  if (this.isInsideClick) {\n   this.isInsideClick = false;\n   return;\n  }\n  if (this.wrapper?.contains(e.target as Node)) return;\n  this.close.emit();\n }\n\n render() {\n  return <slot></slot>;\n }\n}\n"],"version":3}
+{"file":"p-o-oFeHDX.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-portal/sd-portal.tsx"],"sourcesContent":["import { Component, Element, Event, EventEmitter, Listen, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'sd-portal',\n shadow: false,\n})\nexport class SdPortal {\n @Element() hostEl!: HTMLElement;\n @Prop() to: HTMLElement | string = 'body';\n @Prop() parentRef: HTMLElement | null = null;\n @Prop() offset: [number, number] = [0, 4];\n @Prop() zIndex: number = 9999;\n @Prop() open: boolean = false;\n\n @Event({ eventName: 'sdClose' }) close!: EventEmitter<void>;\n\n private container?: HTMLElement;\n private wrapper?: HTMLElement;\n private rafId?: number;\n private isInsideClick = false;\n\n private resizeObserver?: ResizeObserver;\n private mutationObserver?: MutationObserver;\n\n componentDidLoad() {\n  this.container = this.resolveContainer();\n  this.createWrapper();\n  this.moveSlotContent();\n  this.updatePosition();\n  this.observeParent();\n }\n\n componentDidRender() {\n  if (!this.wrapper) return;\n  this.wrapper.style.display = this.open ? 'block' : 'none';\n  if (this.open) this.updatePosition();\n }\n\n disconnectedCallback() {\n  this.unobserveParent();\n  this.wrapper?.remove();\n }\n\n private resolveContainer(): HTMLElement {\n  const el = typeof this.to === 'string' ? document.querySelector(this.to) : this.to;\n  return el instanceof HTMLElement ? el : document.body;\n }\n\n private createWrapper() {\n  this.wrapper = document.createElement('div');\n  Object.assign(this.wrapper.style, {\n   position: 'absolute',\n   zIndex: this.zIndex.toString(),\n   transition: 'opacity 0.4s',\n  });\n  this.container!.appendChild(this.wrapper);\n }\n\n private moveSlotContent() {\n  if (!this.wrapper) return;\n  const nodes = Array.from(this.hostEl.childNodes).filter(n => n.nodeType !== Node.COMMENT_NODE);\n  nodes.forEach(n => this.wrapper!.appendChild(n));\n }\n\n // 위치 갱신 (scroll / resize)\n @Listen('scroll', { target: 'window' })\n @Listen('resize', { target: 'window' })\n updatePosition() {\n  if (this.rafId) cancelAnimationFrame(this.rafId);\n  this.rafId = requestAnimationFrame(() => {\n   if (!this.parentRef || !this.wrapper) return;\n\n   const parentRect = this.parentRef.getBoundingClientRect();\n   const wrapperRect = this.wrapper.getBoundingClientRect();\n   const viewport = {\n    width: window.innerWidth,\n    height: window.innerHeight,\n   };\n\n   let top = parentRect.bottom + window.scrollY + this.offset[1];\n   let left = parentRect.left + window.scrollX + this.offset[0];\n\n   // 화면 상하단 넘어갈 시 반전\n   if (parentRect.bottom + wrapperRect.height + this.offset[1] > viewport.height) {\n    top = parentRect.top + window.scrollY - wrapperRect.height - this.offset[1];\n   }\n   if (top < window.scrollY) {\n    top = parentRect.bottom + window.scrollY + this.offset[1];\n   }\n\n   // 화면 좌우측 넘어갈 시 반전\n   if (parentRect.left + wrapperRect.width + this.offset[0] > viewport.width) {\n    left = parentRect.right + window.scrollX - wrapperRect.width - this.offset[0];\n   }\n   if (left < 0) {\n    left = this.offset[0];\n   }\n\n   this.wrapper.style.top = `${top}px`;\n   this.wrapper.style.left = `${left}px`;\n  });\n }\n\n // parentRef의 이동 / 크기변경 감지\n private observeParent() {\n  if (!this.parentRef) return;\n\n  this.resizeObserver = new ResizeObserver(() => this.updatePosition());\n  this.resizeObserver.observe(this.parentRef);\n\n  this.mutationObserver = new MutationObserver(() => this.updatePosition());\n  this.mutationObserver.observe(document.body, {\n   childList: true,\n   subtree: true,\n  });\n }\n\n private unobserveParent() {\n  this.resizeObserver?.disconnect();\n  this.mutationObserver?.disconnect();\n }\n\n // 외부 클릭 감지\n @Listen('mousedown', { target: 'window' })\n handleMouseDown(e: MouseEvent) {\n  this.isInsideClick = !!(this.wrapper && this.wrapper.contains(e.target as Node));\n }\n\n @Listen('click', { target: 'window' })\n handleWindowClick(e: MouseEvent) {\n  if (this.isInsideClick) {\n   this.isInsideClick = false;\n   return;\n  }\n  if (this.wrapper?.contains(e.target as Node)) return;\n  this.close.emit();\n }\n\n render() {\n  return <slot></slot>;\n }\n}\n"],"version":3}

package/dist/components/sd-badge.js

@@ -15,7 +15,7 @@ const SdBadge$1 = /*@__PURE__*/ proxyCustomElement(class SdBadge extends H {
     label = '';
     render() {
         const resolvedColor = resolveColor(this.color);
-        return (h(Host, { key: '8e74db398e9dafb57d276ef22ee8ab5891526e15', style: { '--sd-badge-color': resolvedColor } }, h("div", { key: '23d4800224630f028e26b43e672ec6a33b4d2f28', class: `sd-badge sd-badge--${this.size}` }, h("div", { key: '376446696e366a9b6e1f816a45fcf073ef967c6d', class: "sd-badge__dot" }), h("div", { key: '750ab1c9792fa8174cf5ecdeb0c709bfaff2294a', class: "sd-badge__label" }, this.label))));
+        return (h(Host, { key: '8eb13329f88c90812a23ba041a5700380094bacc', style: { '--sd-badge-color': resolvedColor } }, h("div", { key: 'aab9f3bf7db3938719b67caca19bc8df9afceb95', class: `sd-badge sd-badge--${this.size}` }, h("div", { key: '0ecea50ca06c4c9925ccb4bcde1faa0f85289c29', class: "sd-badge__dot" }), h("div", { key: '8458b333558c33d7950ccb4354a7207e4d059671', class: "sd-badge__label" }, this.label))));
     }
     static get style() { return sdBadgeCss(); }
 }, [768, "sd-badge", {

package/dist/components/sd-button.js

@@ -1,4 +1,4 @@
-import { S as SdButton$1, d as defineCustomElement$1 } from './p-CdGD6AqM.js';
+import { S as SdButton$1, d as defineCustomElement$1 } from './p-B-HVIIWo.js';
 
 const SdButton = SdButton$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sd-card.js

@@ -12,7 +12,7 @@ const SdCard$1 = /*@__PURE__*/ proxyCustomElement(class SdCard extends H {
     bordered = true;
     cardClassName = '';
     render() {
-        return (h(Host, { key: 'f7012e01206131628820f41ede93ce68cb121fe4', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.cardClassName}` }, h("slot", { key: '5b978729afb2cf6fef8a8ad696029ef09dbb0dd9' })));
+        return (h(Host, { key: '3182001dcfc5347e3995a31d8e333e01f285df5a', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.cardClassName}` }, h("slot", { key: 'e2824b9cd65b9c4ba668f7f3ba933a361405b822' })));
     }
     static get style() { return sdCardCss(); }
 }, [772, "sd-card", {

package/dist/components/sd-checkbox.js

@@ -1,4 +1,4 @@
-import { S as SdCheckbox$1, d as defineCustomElement$1 } from './p-UZEmuyIR.js';
+import { S as SdCheckbox$1, d as defineCustomElement$1 } from './p-ldcuoYNT.js';
 
 const SdCheckbox = SdCheckbox$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,13 +1,13 @@
 import { p as proxyCustomElement, H, d as createEvent, h, c as Host, t as transformTag } from './p-YLoygqPr.js';
 import { u as useDatePicker, t as today } from './p-QZbqqKSO.js';
-import { d as defineCustomElement$9 } from './p-CdGD6AqM.js';
+import { d as defineCustomElement$9 } from './p-B-HVIIWo.js';
 import { d as defineCustomElement$8 } from './p-DlJtPR_C.js';
-import { d as defineCustomElement$7 } from './p-CpRkV7pg.js';
-import { d as defineCustomElement$6 } from './p-CVMprLsE.js';
-import { d as defineCustomElement$5 } from './p-DnQF6htq.js';
-import { d as defineCustomElement$4 } from './p-D54IEoI6.js';
-import { d as defineCustomElement$3 } from './p-DbebUQwg.js';
-import { d as defineCustomElement$2 } from './p-7xekTQRB.js';
+import { d as defineCustomElement$7 } from './p-FVxa2OYe.js';
+import { d as defineCustomElement$6 } from './p-CmghyzXg.js';
+import { d as defineCustomElement$5 } from './p-Sw7TJWkF.js';
+import { d as defineCustomElement$4 } from './p-Cp2TqeFd.js';
+import { d as defineCustomElement$3 } from './p-o-oFeHDX.js';
+import { d as defineCustomElement$2 } from './p-Dtljyq_t.js';
 
 const sdDatePickerCss = () => `.sd-date-picker.sc-sd-date-picker{width:100%;display:inline-block}.sd-date-picker.sc-sd-date-picker .sd-date-picker--disabled.sc-sd-date-picker .date-icon.sc-sd-date-picker{cursor:not-allowed !important;color:#888888 !important}.sd-date-picker.sc-sd-date-picker .sd-date-picker__input.sc-sd-date-picker{text-align:center !important}.sd-date-picker__menu.sc-sd-date-picker{width:304px;box-sizing:border-box;border-radius:8px;padding:24px 19px;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2);background:white}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__header.sc-sd-date-picker{display:flex;flex-flow:row nowrap;align-items:center;gap:20px;font-size:14px;padding:0 5px;height:24px;line-height:24px}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__header.sc-sd-date-picker .year-nav.sc-sd-date-picker,.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__header.sc-sd-date-picker .month-nav.sc-sd-date-picker{display:flex;flex-flow:row nowrap;align-items:center;gap:12px}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__header.sc-sd-date-picker .year-nav.sc-sd-date-picker button.sc-sd-date-picker,.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__header.sc-sd-date-picker .month-nav.sc-sd-date-picker button.sc-sd-date-picker{background:none;border:none;cursor:pointer;margin:0;padding:0}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__header.sc-sd-date-picker .year-nav__current.sc-sd-date-picker{width:40px;text-align:center}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__header.sc-sd-date-picker .month-nav__current.sc-sd-date-picker{width:100px;text-align:center}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__days.sc-sd-date-picker{margin-top:8px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));column-gap:10px;padding:0 5px}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__days.sc-sd-date-picker .day.sc-sd-date-picker{width:28px;height:20px;font-size:12px;line-height:20px;text-align:center;color:#888888}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__body.sc-sd-date-picker{margin-top:12px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr))}`;
 
@@ -93,7 +93,7 @@ const SdDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class SdDatePicker exten
         this.isOpen = false;
     };
     render() {
-        return (h(Host, { key: '4eccf6134d01546c9a47ddc3806233dd68195a8a', class: { 'sd-date-picker': true, 'sd-date-picker--disabled': this.disabled } }, h("sd-input", { key: 'f1c015db2efd3801792266d7abb6391e2751c225', ref: el => (this.inputEl = el), value: this.value, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-picker__input", onClick: () => this.openMenu() }, h("sd-icon", { key: '671f3d5166618228d2018477b4b9f1b3c13fa312', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: 'ca295d75db67328d189fefd16e3598f0a4b1b5fe', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: 'c9b0d87465936760ecf0453cfb5dad00247b7612', class: "sd-date-picker__menu" }, h("div", { key: 'fac0f5d91634d394cecda4c1a149103e12e210c6', class: "sd-date-picker__header" }, h("div", { key: '2f55a9ec84e74135a7c1f8c1925f557ad85e43a8', class: "year-nav" }, h("button", { key: '811d3eab71e03c23214d3da2e829d62af73c8828', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, h("sd-icon", { key: '60bb560ea0aedc61a6ba7565b4f8daf95a33c9cf', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: '976c256e704793d39e98a3e80ac0eb536a32b361', class: "year-nav__current" }, this.currentYear), h("button", { key: '32ecf743b29434b1aeb9ef72d49a2254acd4e514', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, h("sd-icon", { key: 'a70f679e27d00db53047b387fa9d16520cb0369f', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '1d5e17dd8b4c0081a2cda2991e8e0055f0c4d24d', class: "month-nav" }, h("button", { key: '3fa7edc4eb796e298b12ea64ac1aa0d83bf6ddb1', type: "button", name: "prev-month", title: "Previous       ", onClick: () => this.handleUpdateMonth('prev') }, h("sd-icon", { key: '3d6ed03bb28a1ccb711c97d31ff6d667ada8c410', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: '5b3b1c05eb303ff7cb4a7ad599abd45747822589', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), h("button", { key: '6718f389605d55f7c08934360171b61a28e2646d', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, h("sd-icon", { key: '8216564c82d61220f8d99bc9759a83994839a836', name: "arrowRight", size: "12", color: "#CCCCCC" })))), h("div", { key: 'd3e9f16ec52b5ba82af3c5349966402c271ddb00', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("div", { key: day, class: "day" }, day)))), h("div", { key: 'a2b2b56fefcecc67a06b5db9ae0a7767cca163f5', class: "sd-date-picker__body" }, [
+        return (h(Host, { key: '9e98df6d7c18ca302385b2305ad1224819f51a48', class: { 'sd-date-picker': true, 'sd-date-picker--disabled': this.disabled } }, h("sd-input", { key: '647c796797c4fca9d1d7560258acb0ad0529aa4b', ref: el => (this.inputEl = el), value: this.value, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-picker__input", onClick: () => this.openMenu() }, h("sd-icon", { key: 'ee168dc3a5494de5140f524bacf65cfe8b92c666', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '9edef448710cb08c9c80ce5d70e23fc286eff656', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: 'f717e1a9505ebe9b991707f45fc374cf456dfb87', class: "sd-date-picker__menu" }, h("div", { key: '597e7523a0ee808e13c7ce54983abb391f27b259', class: "sd-date-picker__header" }, h("div", { key: 'f46e44f7336d6332190d5c92b654faa34da71fcb', class: "year-nav" }, h("button", { key: 'c2e849c39d6ffcc144fb5cac20224f497f3698b8', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, h("sd-icon", { key: '454a351069797007019657f1239aab5f2b0be482', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: '7cd18da8a3e2220b583f0cb35eca4096f8770275', class: "year-nav__current" }, this.currentYear), h("button", { key: 'd589b992604fcd958a342de1cfa548a2cee51c36', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, h("sd-icon", { key: 'fca1aecf9cfcfe0aa350cfe7a39837524aeebf4f', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '2d62f23c487d673e0efcfa8bacff56f8076c90de', class: "month-nav" }, h("button", { key: '83149c7f67f68972b662981464db444e75cf3513', type: "button", name: "prev-month", title: "Previous       ", onClick: () => this.handleUpdateMonth('prev') }, h("sd-icon", { key: '039d63c5770614e29305ecda288d7f26ec2f74cc', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: '97be0d41c505853e6ebb3f5481b81e6f3f1694c2', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), h("button", { key: '02f53526b005c29a7118f3a7bf93691262c57421', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, h("sd-icon", { key: '16552dcf8dea941badad716f90c86f968cfdf312', name: "arrowRight", size: "12", color: "#CCCCCC" })))), h("div", { key: 'c4e35720676d4fc0bd7b8903082f24f00b34036d', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("div", { key: day, class: "day" }, day)))), h("div", { key: 'b69032b67e0bcc6885a789c2ce1b181abf68979a', class: "sd-date-picker__body" }, [
             ...this.calendar.prevMonthDays,
             ...this.calendar.days,
             ...this.calendar.afterMonthDays,

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

@@ -1,13 +1,13 @@
 import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, c as Host, t as transformTag } from './p-YLoygqPr.js';
 import { u as useDatePicker, t as today } from './p-QZbqqKSO.js';
-import { d as defineCustomElement$9 } from './p-CdGD6AqM.js';
+import { d as defineCustomElement$9 } from './p-B-HVIIWo.js';
 import { d as defineCustomElement$8 } from './p-DlJtPR_C.js';
-import { d as defineCustomElement$7 } from './p-CpRkV7pg.js';
-import { d as defineCustomElement$6 } from './p-CVMprLsE.js';
-import { d as defineCustomElement$5 } from './p-DnQF6htq.js';
-import { d as defineCustomElement$4 } from './p-D54IEoI6.js';
-import { d as defineCustomElement$3 } from './p-DbebUQwg.js';
-import { d as defineCustomElement$2 } from './p-7xekTQRB.js';
+import { d as defineCustomElement$7 } from './p-FVxa2OYe.js';
+import { d as defineCustomElement$6 } from './p-CmghyzXg.js';
+import { d as defineCustomElement$5 } from './p-Sw7TJWkF.js';
+import { d as defineCustomElement$4 } from './p-Cp2TqeFd.js';
+import { d as defineCustomElement$3 } from './p-o-oFeHDX.js';
+import { d as defineCustomElement$2 } from './p-Dtljyq_t.js';
 
 const addDays = (inputDate, days) => {
     const [year, month, day] = inputDate.split('-').map(Number);
@@ -184,10 +184,10 @@ const SdDateRangePicker$1 = /*@__PURE__*/ proxyCustomElement(class SdDateRangePi
         this.setHoverDate(hoverDate);
     }
     render() {
-        return (h(Host, { key: '1ac991910d1613bf142520081212be747bbeafd4', class: {
+        return (h(Host, { key: '475b3135158233bce6f200f47c860790b3b68933', class: {
                 'sd-date-range-picker': true,
                 'sd-date-range-picker--disabled': this.disabled,
-            } }, h("sd-input", { key: 'a9088dd29923544f749e09678856376dc8606f7d', ref: el => (this.inputEl = el), value: !!this.dateRange[0] ? `${this.dateRange[0]} ~ ${this.dateRange[1]}` : '', label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-range-picker__input", onClick: () => this.openMenu() }, h("sd-icon", { key: '866ba94372f088fab53a01e0f13fc883356f6586', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '95ab0375cf56201bd285c522844d7fa387ae7fc9', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.closeMenu }, h("div", { key: 'fc7bb357b66b7e70ce3351ab6861b778a00eb6d8', class: "sd-date-range-picker__menu" }, h("div", { key: '852ff12fdb66c008b92d7c2e828a6a7a952e7afe', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, h("button", { key: '980cb27f0c9e1629b5cf85060b47845db0e1f9b7', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, h("sd-icon", { key: '7bc19cc051ff2af8fadf4eb7b389456fae03f060', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("div", { key: '4836b382280bf948afa7ed85eeb024052fd86aab', class: "header-label" }, this.prevYear), h("button", { key: 'fe7b4f50bb0515c8dd294274792dbbe3baca3af7', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, h("sd-icon", { key: '2f86e0b14db96213954cf17282bcc66ed0b80ded', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '0d63ed5aef2ede30dd88dd25b3314e4ec8ae79ce', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index) => (h(Fragment, null, index === 1 && h("div", { class: "separator" }), h("div", { key: index, class: "calendar-container" }, h("div", { class: "calendar-header" }, h("button", { type: "button", name: "month", title: "Month", class: index === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index === 0 ? 'prev' : 'next') }, h("sd-icon", { name: index === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index === 0
+            } }, h("sd-input", { key: 'c6cd9405fbcc12fc772720a64b979b6ad88fe51c', ref: el => (this.inputEl = el), value: !!this.dateRange[0] ? `${this.dateRange[0]} ~ ${this.dateRange[1]}` : '', label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-range-picker__input", onClick: () => this.openMenu() }, h("sd-icon", { key: '75abee918222b6e5123d3aef220f1f54cbcd63eb', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '87025f908882e4199336c053f8d80de32e43764b', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.closeMenu }, h("div", { key: '28c20713fe1c90610a85ca957a3cf11eb919f322', class: "sd-date-range-picker__menu" }, h("div", { key: '3bfdbd8cbdc09ea4b63bf8d90e90f9b41411d2e6', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, h("button", { key: 'a553069fe691b3a2498c2d4d6479746eac6e57de', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, h("sd-icon", { key: '8781d59f7a8e5f3207f989c54bd5dbfcec53c616', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("div", { key: '9453881cff191a277235e99a1f7c1846ddb4fb27', class: "header-label" }, this.prevYear), h("button", { key: '0dcd78e180e6c57cdc6be30cd5715beec902b826', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, h("sd-icon", { key: '84165b81ceba4f9da6858cea81ca0c166acc5709', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '7f57af4b26543946d4cddd2a8dff4e679c8e84da', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index) => (h(Fragment, null, index === 1 && h("div", { class: "separator" }), h("div", { key: index, class: "calendar-container" }, h("div", { class: "calendar-header" }, h("button", { type: "button", name: "month", title: "Month", class: index === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index === 0 ? 'prev' : 'next') }, h("sd-icon", { name: index === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index === 0
             ? `${this.prevYear}.${String(this.prevMonth).padStart(2, '0')}`
             : `${this.nextYear}.${String(this.nextMonth).padStart(2, '0')}`), h("div", { class: "calendar-days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("sd-date-box", { key: day, date: day, disabled: true, class: "day" })))), h("div", { class: "calendar-body mt-12pxr grid grid-cols-7 gap-y-8pxr" }, [...calendar.prevMonthDays, ...calendar.days, ...calendar.afterMonthDays].map((day, idx) => (h("sd-date-box", { key: `prev${day}_${idx}`, date: !day ? '' : Number(day), selected: this.dateRange.some(date => date === this.formatDate(index, Number(day))), type: this.getDateBoxType(this.formatDate(index, Number(day))), isToday: today === this.formatDate(index, Number(day)), disabled: !day ? true : this.isDisabledDate(this.formatDate(index, Number(day))), inRange: this.isDateInRange(this.formatDate(index, Number(day))), isStartDate: this.dateRange[0] === this.formatDate(index, Number(day)), isEndDate: this.dateRange[1] === this.formatDate(index, Number(day)), onClick: () => this.handleDateClick(index, Number(day)), onMouseOver: () => this.handleDateHover(index, Number(day)) }))))))))))))));
     }

package/dist/components/sd-field.js

@@ -1,4 +1,4 @@
-import { S as SdField$1, d as defineCustomElement$1 } from './p-CpRkV7pg.js';
+import { S as SdField$1, d as defineCustomElement$1 } from './p-FVxa2OYe.js';
 
 const SdField = SdField$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, d as createEvent, h, t as transformTag } from './p-YLoygqPr.js';
-import { d as defineCustomElement$2 } from './p-DnQF6htq.js';
+import { d as defineCustomElement$2 } from './p-Sw7TJWkF.js';
 
-const sdFilePickerCss = () => `sd-file-picker{display:inline-flex}.sd-file-picker{display:inline-flex;align-items:center;max-width:var(--picker-width, 100%);height:28px;gap:8px;padding:4px 8px;border:1px solid #aaaaaa;border-radius:4px;background-color:#ffffff;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;vertical-align:middle}.sd-file-picker__text{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:400;font-size:12px;line-height:20px;color:#aaaaaa}.sd-file-picker__text--active{color:#222222}.sd-file-picker__text--placeholder{color:#aaaaaa}.sd-file-picker__icon{flex-shrink:0}.sd-file-picker__clear-icon{flex-shrink:0;cursor:pointer;transition:opacity 0.2s ease}.sd-file-picker__clear-icon:hover{opacity:0.7}.sd-file-picker__input{display:none}.sd-file-picker__tooltip{position:absolute;top:calc(100% - 4px);left:50%;transform:translate(-50%);z-index:1000;white-space:nowrap;padding:8px 12px;background:rgba(0, 0, 0, 0.8);color:white;font-size:12px;line-height:18px;border-radius:4px;pointer-events:none}.sd-file-picker:hover:not(.sd-file-picker--inline):not(.sd-file-picker--disabled){background-color:#f6f6f6}.sd-file-picker--active:not(.sd-file-picker--inline):not(.sd-file-picker--disabled){background-color:#ffffff}.sd-file-picker--active:not(.sd-file-picker--inline):not(.sd-file-picker--disabled) .sd-file-picker__text{color:#222222}.sd-file-picker--disabled:not(.sd-file-picker--inline){background-color:#eeeeee;border-color:#cccccc;cursor:not-allowed !important}.sd-file-picker--disabled:not(.sd-file-picker--inline) .sd-file-picker__text{color:#888888}.sd-file-picker--inline{border:none;background-color:transparent;padding:0;height:auto}.sd-file-picker--inline .sd-file-picker__text{color:#aaaaaa}.sd-file-picker--inline:hover:not(.sd-file-picker--disabled) .sd-file-picker__text{color:#737373}.sd-file-picker--inline.sd-file-picker--active:not(.sd-file-picker--disabled) .sd-file-picker__text--active{color:#222222}.sd-file-picker--inline.sd-file-picker--disabled .sd-file-picker__text{color:#cccccc}`;
+const sdFilePickerCss = () => `sd-file-picker{display:inline-flex;width:100%}.sd-file-picker{display:inline-flex;width:100%;align-items:center;max-width:var(--picker-width, 100%);height:28px;gap:8px;padding:4px 8px;border:1px solid #aaaaaa;border-radius:4px;background-color:#ffffff;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;vertical-align:middle}.sd-file-picker__text{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:400;font-size:12px;line-height:20px;color:#aaaaaa}.sd-file-picker__text--active{color:#222222}.sd-file-picker__text--placeholder{color:#aaaaaa}.sd-file-picker__icon{flex-shrink:0}.sd-file-picker__clear-icon{flex-shrink:0;cursor:pointer;transition:opacity 0.2s ease}.sd-file-picker__clear-icon:hover{opacity:0.7}.sd-file-picker__input{display:none}.sd-file-picker__tooltip{position:absolute;top:calc(100% - 4px);left:50%;transform:translate(-50%);z-index:1000;white-space:nowrap;padding:8px 12px;background:rgba(0, 0, 0, 0.8);color:white;font-size:12px;line-height:18px;border-radius:4px;pointer-events:none}.sd-file-picker:hover:not(.sd-file-picker--inline):not(.sd-file-picker--disabled){background-color:#f6f6f6}.sd-file-picker--active:not(.sd-file-picker--inline):not(.sd-file-picker--disabled){background-color:#ffffff}.sd-file-picker--active:not(.sd-file-picker--inline):not(.sd-file-picker--disabled) .sd-file-picker__text{color:#222222}.sd-file-picker--disabled:not(.sd-file-picker--inline){background-color:#eeeeee;border-color:#cccccc;cursor:not-allowed !important}.sd-file-picker--disabled:not(.sd-file-picker--inline) .sd-file-picker__text{color:#888888}.sd-file-picker--inline{border:none;background-color:transparent;padding:0;height:auto}.sd-file-picker--inline .sd-file-picker__text{color:#aaaaaa}.sd-file-picker--inline:hover:not(.sd-file-picker--disabled) .sd-file-picker__text{color:#737373}.sd-file-picker--inline.sd-file-picker--active:not(.sd-file-picker--disabled) .sd-file-picker__text--active{color:#222222}.sd-file-picker--inline.sd-file-picker--disabled .sd-file-picker__text{color:#cccccc}`;
 
 const SdFilePicker$1 = /*@__PURE__*/ proxyCustomElement(class SdFilePicker extends H {
     constructor(registerHost) {
@@ -18,7 +18,6 @@ const SdFilePicker$1 = /*@__PURE__*/ proxyCustomElement(class SdFilePicker exten
     inline = false;
     multiple = false;
     accept;
-    width;
     internalValue = null;
     hovered = false;
     showTooltip = false;
@@ -103,15 +102,15 @@ const SdFilePicker$1 = /*@__PURE__*/ proxyCustomElement(class SdFilePicker exten
     render() {
         const hasFiles = this.hasFiles();
         const displayText = this.getDisplayText();
-        return (h("div", { key: 'dac7726e25ba3bf4afa0da022cb3e472a8891cec', class: {
+        return (h("div", { key: 'a41d17071dc1c54af38a25c143f7df3a2f8d8f83', class: {
                 'sd-file-picker': true,
                 [this.getStatusClass()]: true,
                 'sd-file-picker--inline': this.inline,
-            }, onClick: this.handleClick, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("input", { key: '1ab733ebf6d98ad792b7b6d06f562b014504a2fe', ref: el => (this.fileInputRef = el), type: "file", class: "sd-file-picker__input", disabled: this.disabled, multiple: this.multiple, accept: this.accept, onInput: this.handleFileChange, "aria-label": this.placeholder }), h("sd-icon", { key: 'c82214c83107f01314de1eb380a421fc80af043f', name: "attachFile", size: 16, color: this.getIconColor(), class: "sd-file-picker__icon" }), h("div", { key: '11f5bfca6d50fd4e78c902ddc52995b3ed399b21', ref: el => (this.fileNamesRef = el), class: {
+            }, onClick: this.handleClick, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("input", { key: '31bd3ccd4fc132037b67d189478af6dcb5bf9c4a', ref: el => (this.fileInputRef = el), type: "file", class: "sd-file-picker__input", disabled: this.disabled, multiple: this.multiple, accept: this.accept, onInput: this.handleFileChange, "aria-label": this.placeholder }), h("sd-icon", { key: 'a422d6902ec05313365d2832f1f77e7100dcf9c7', name: "attachFile", size: 16, color: this.getIconColor(), class: "sd-file-picker__icon" }), h("div", { key: 'c0ef65e1d2f5e2eea86d4047b990932d711e68bb', ref: el => (this.fileNamesRef = el), class: {
                 'sd-file-picker__text': true,
                 'sd-file-picker__text--placeholder': !hasFiles,
                 'sd-file-picker__text--active': hasFiles,
-            } }, displayText), !this.disabled && hasFiles && (h("sd-icon", { key: 'e429e10a285f12e16d1fa362e51903f12119bf3b', name: "close", size: 12, color: "#888888", class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (h("div", { key: '1a7c924eed094fdb070ed5711a9b09aeea8f3c56', class: "sd-file-picker__tooltip" }, displayText))));
+            } }, displayText), !this.disabled && hasFiles && (h("sd-icon", { key: 'b57318271a1282655a6c7f90247f6e6a1813bceb', name: "close", size: 12, color: "#888888", class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (h("div", { key: 'cc913b203d72fb0240ea22d7d266953c5ef31476', class: "sd-file-picker__tooltip" }, displayText))));
     }
     static get watchers() { return {
         "value": ["valueChanged"]
@@ -124,7 +123,6 @@ const SdFilePicker$1 = /*@__PURE__*/ proxyCustomElement(class SdFilePicker exten
         "inline": [4],
         "multiple": [4],
         "accept": [1],
-        "width": [8],
         "internalValue": [32],
         "hovered": [32],
         "showTooltip": [32]

package/dist/components/sd-file-picker.js.map

@@ -1 +1 @@
-{"file":"sd-file-picker.js","mappings":"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","names":["SdFilePicker","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-file-picker/sd-file-picker.scss?tag=sd-file-picker","src/components/sd-file-picker/sd-file-picker.tsx"],"sourcesContent":["@import 'variables';\n\nsd-file-picker {\n display: inline-flex;\n}\n.sd-file-picker {\n display: inline-flex;\n align-items: center;\n max-width: var(--picker-width, 100%);\n height: 28px;\n gap: 8px;\n padding: 4px 8px;\n border: 1px solid $grey_55;\n border-radius: 4px;\n background-color: $white;\n cursor: pointer;\n -webkit-user-select: none;\n user-select: none;\n position: relative;\n vertical-align: middle;\n\n &__text {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  font-weight: 400;\n  font-size: 12px;\n  line-height: 20px;\n  color: $grey_55;\n\n  &--active {\n   color: $grey_95;\n  }\n\n  &--placeholder {\n   color: $grey_55;\n  }\n }\n\n &__icon {\n  flex-shrink: 0;\n }\n\n &__clear-icon {\n  flex-shrink: 0;\n  cursor: pointer;\n  transition: opacity 0.2s ease;\n\n  &:hover {\n   opacity: 0.7;\n  }\n }\n\n &__input {\n  display: none;\n }\n\n &__tooltip {\n  position: absolute;\n  top: calc(100% - 4px);\n  left: 50%;\n  transform: translate(-50%);\n  z-index: 1000;\n  white-space: nowrap;\n  padding: 8px 12px;\n  background: rgba(0, 0, 0, 0.8);\n  color: white;\n  font-size: 12px;\n  line-height: 18px;\n  border-radius: 4px;\n  pointer-events: none;\n }\n\n &:hover:not(&--inline):not(&--disabled) {\n  background-color: $grey_10;\n }\n\n &--active:not(&--inline):not(&--disabled) {\n  background-color: $white;\n\n  .sd-file-picker__text {\n   color: $grey_95;\n  }\n }\n\n &--disabled:not(&--inline) {\n  background-color: $grey_20;\n  border-color: $grey_45;\n  cursor: not-allowed !important;\n\n  .sd-file-picker__text {\n   color: $grey_65;\n  }\n }\n\n &--inline {\n  border: none;\n  background-color: transparent;\n  padding: 0;\n  height: auto;\n\n  .sd-file-picker__text {\n   color: $grey_55;\n  }\n\n  &:hover:not(.sd-file-picker--disabled) {\n   .sd-file-picker__text {\n    color: $grey_70;\n   }\n  }\n\n  &.sd-file-picker--active:not(.sd-file-picker--disabled) {\n   .sd-file-picker__text--active {\n    color: $grey_95;\n   }\n  }\n\n  &.sd-file-picker--disabled {\n   .sd-file-picker__text {\n    color: $grey_45;\n   }\n  }\n }\n}\n","import {\n ComponentInterface,\n Component,\n Element,\n Prop,\n State,\n Event,\n EventEmitter,\n Watch,\n h,\n} from '@stencil/core';\n\n@Component({\n tag: 'sd-file-picker',\n styleUrl: 'sd-file-picker.scss',\n})\nexport class SdFilePicker implements ComponentInterface {\n @Element() el!: HTMLElement;\n\n @Prop({ mutable: true }) value?: File[] | File | null = null;\n @Prop() placeholder: string = 'Click to upload';\n @Prop() disabled: boolean = false;\n @Prop() inline: boolean = false;\n @Prop() multiple: boolean = false;\n @Prop() accept?: string;\n @Prop() width?: number | string;\n\n @State() private internalValue: File[] | File | null = null;\n @State() private hovered: boolean = false;\n @State() private showTooltip: boolean = false;\n\n private fileInputRef?: HTMLInputElement;\n private fileNamesRef?: HTMLElement;\n\n @Event({ eventName: 'sdUpdate' }) update!: EventEmitter<File[] | File | null>;\n\n @Watch('value')\n valueChanged(newValue: File[] | File | null) {\n  this.internalValue = newValue;\n }\n\n componentDidLoad() {\n  this.checkOverflow();\n }\n\n componentDidUpdate() {\n  this.checkOverflow();\n }\n\n private handleFileChange = (event: Event) => {\n  const input = event.target as HTMLInputElement;\n  const files = input.files;\n\n  if (!files || files.length === 0) {\n   return;\n  }\n\n  const fileArray = Array.from(files);\n\n  if (this.multiple) {\n   this.internalValue = fileArray;\n  } else {\n   this.internalValue = fileArray[0];\n  }\n  this.value = this.internalValue;\n  this.update?.emit(this.value);\n };\n\n private handleClear = (event: Event) => {\n  event.stopPropagation();\n  const clearedValue = this.multiple ? [] : null;\n  this.value = clearedValue;\n  this.internalValue = clearedValue;\n  this.update?.emit(clearedValue);\n\n  if (this.fileInputRef) {\n   this.fileInputRef.value = '';\n  }\n };\n\n private handleClick = () => {\n  if (this.disabled) return;\n  this.fileInputRef?.click();\n };\n\n private getStatusClass(): string {\n  if (this.disabled) return 'sd-file-picker--disabled';\n  if (this.hasFiles()) return 'sd-file-picker--active';\n  return '';\n }\n\n private hasFiles(): boolean {\n  if (!this.internalValue) return false;\n  if (Array.isArray(this.internalValue)) {\n   return this.internalValue.length > 0;\n  }\n  return true;\n }\n\n private getDisplayText(): string {\n  if (!this.hasFiles()) return this.placeholder;\n\n  if (Array.isArray(this.internalValue)) {\n   return this.internalValue.map(f => f.name).join(', ');\n  }\n\n  return this.internalValue?.name || this.placeholder;\n }\n\n private checkOverflow() {\n  if (!this.fileNamesRef) return;\n  const isOverflowing = this.fileNamesRef.scrollWidth > this.fileNamesRef.clientWidth;\n  this.showTooltip = isOverflowing;\n }\n\n private getIconColor(): string {\n  if (this.disabled) {\n   return this.inline ? 'grey_45' : 'grey_55';\n  }\n  return 'grey_70';\n }\n\n render() {\n  const hasFiles = this.hasFiles();\n  const displayText = this.getDisplayText();\n\n  return (\n   <div\n    class={{\n     'sd-file-picker': true,\n     [this.getStatusClass()]: true,\n     'sd-file-picker--inline': this.inline,\n    }}\n    onClick={this.handleClick}\n    onMouseEnter={() => (this.hovered = true)}\n    onMouseLeave={() => (this.hovered = false)}\n   >\n    <input\n     ref={el => (this.fileInputRef = el as HTMLInputElement)}\n     type=\"file\"\n     class=\"sd-file-picker__input\"\n     disabled={this.disabled}\n     multiple={this.multiple}\n     accept={this.accept}\n     onInput={this.handleFileChange}\n     aria-label={this.placeholder}\n    />\n\n    <sd-icon name=\"attachFile\" size={16} color={this.getIconColor()} class=\"sd-file-picker__icon\" />\n\n    <div\n     ref={el => (this.fileNamesRef = el as HTMLElement)}\n     class={{\n      'sd-file-picker__text': true,\n      'sd-file-picker__text--placeholder': !hasFiles,\n      'sd-file-picker__text--active': hasFiles,\n     }}\n    >\n     {displayText}\n    </div>\n\n    {!this.disabled && hasFiles && (\n     <sd-icon\n      name=\"close\"\n      size={12}\n      color=\"#888888\"\n      class=\"sd-file-picker__clear-icon\"\n      onClick={this.handleClear}\n     />\n    )}\n\n    {this.showTooltip && hasFiles && this.hovered && (\n     <div class=\"sd-file-picker__tooltip\">{displayText}</div>\n    )}\n   </div>\n  );\n }\n}\n"],"version":3}
+{"file":"sd-file-picker.js","mappings":"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","names":["SdFilePicker","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-file-picker/sd-file-picker.scss?tag=sd-file-picker","src/components/sd-file-picker/sd-file-picker.tsx"],"sourcesContent":["@import 'variables';\n\nsd-file-picker {\n display: inline-flex;\n width: 100%;\n}\n\n.sd-file-picker {\n display: inline-flex;\n width: 100%;\n align-items: center;\n max-width: var(--picker-width, 100%);\n height: 28px;\n gap: 8px;\n padding: 4px 8px;\n border: 1px solid $grey_55;\n border-radius: 4px;\n background-color: $white;\n cursor: pointer;\n -webkit-user-select: none;\n user-select: none;\n position: relative;\n vertical-align: middle;\n\n &__text {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  font-weight: 400;\n  font-size: 12px;\n  line-height: 20px;\n  color: $grey_55;\n\n  &--active {\n   color: $grey_95;\n  }\n\n  &--placeholder {\n   color: $grey_55;\n  }\n }\n\n &__icon {\n  flex-shrink: 0;\n }\n\n &__clear-icon {\n  flex-shrink: 0;\n  cursor: pointer;\n  transition: opacity 0.2s ease;\n\n  &:hover {\n   opacity: 0.7;\n  }\n }\n\n &__input {\n  display: none;\n }\n\n &__tooltip {\n  position: absolute;\n  top: calc(100% - 4px);\n  left: 50%;\n  transform: translate(-50%);\n  z-index: 1000;\n  white-space: nowrap;\n  padding: 8px 12px;\n  background: rgba(0, 0, 0, 0.8);\n  color: white;\n  font-size: 12px;\n  line-height: 18px;\n  border-radius: 4px;\n  pointer-events: none;\n }\n\n &:hover:not(&--inline):not(&--disabled) {\n  background-color: $grey_10;\n }\n\n &--active:not(&--inline):not(&--disabled) {\n  background-color: $white;\n\n  .sd-file-picker__text {\n   color: $grey_95;\n  }\n }\n\n &--disabled:not(&--inline) {\n  background-color: $grey_20;\n  border-color: $grey_45;\n  cursor: not-allowed !important;\n\n  .sd-file-picker__text {\n   color: $grey_65;\n  }\n }\n\n &--inline {\n  border: none;\n  background-color: transparent;\n  padding: 0;\n  height: auto;\n\n  .sd-file-picker__text {\n   color: $grey_55;\n  }\n\n  &:hover:not(.sd-file-picker--disabled) {\n   .sd-file-picker__text {\n    color: $grey_70;\n   }\n  }\n\n  &.sd-file-picker--active:not(.sd-file-picker--disabled) {\n   .sd-file-picker__text--active {\n    color: $grey_95;\n   }\n  }\n\n  &.sd-file-picker--disabled {\n   .sd-file-picker__text {\n    color: $grey_45;\n   }\n  }\n }\n}","import {\n ComponentInterface,\n Component,\n Element,\n Prop,\n State,\n Event,\n EventEmitter,\n Watch,\n h,\n} from '@stencil/core';\n\n@Component({\n tag: 'sd-file-picker',\n styleUrl: 'sd-file-picker.scss',\n})\nexport class SdFilePicker implements ComponentInterface {\n @Element() el!: HTMLElement;\n\n @Prop({ mutable: true }) value?: File[] | File | null = null;\n @Prop() placeholder: string = 'Click to upload';\n @Prop() disabled: boolean = false;\n @Prop() inline: boolean = false;\n @Prop() multiple: boolean = false;\n @Prop() accept?: string;\n\n @State() private internalValue: File[] | File | null = null;\n @State() private hovered: boolean = false;\n @State() private showTooltip: boolean = false;\n\n private fileInputRef?: HTMLInputElement;\n private fileNamesRef?: HTMLElement;\n\n @Event({ eventName: 'sdUpdate' }) update!: EventEmitter<File[] | File | null>;\n\n @Watch('value')\n valueChanged(newValue: File[] | File | null) {\n  this.internalValue = newValue;\n }\n\n componentDidLoad() {\n  this.checkOverflow();\n }\n\n componentDidUpdate() {\n  this.checkOverflow();\n }\n\n private handleFileChange = (event: Event) => {\n  const input = event.target as HTMLInputElement;\n  const files = input.files;\n\n  if (!files || files.length === 0) {\n   return;\n  }\n\n  const fileArray = Array.from(files);\n\n  if (this.multiple) {\n   this.internalValue = fileArray;\n  } else {\n   this.internalValue = fileArray[0];\n  }\n  this.value = this.internalValue;\n  this.update?.emit(this.value);\n };\n\n private handleClear = (event: Event) => {\n  event.stopPropagation();\n  const clearedValue = this.multiple ? [] : null;\n  this.value = clearedValue;\n  this.internalValue = clearedValue;\n  this.update?.emit(clearedValue);\n\n  if (this.fileInputRef) {\n   this.fileInputRef.value = '';\n  }\n };\n\n private handleClick = () => {\n  if (this.disabled) return;\n  this.fileInputRef?.click();\n };\n\n private getStatusClass(): string {\n  if (this.disabled) return 'sd-file-picker--disabled';\n  if (this.hasFiles()) return 'sd-file-picker--active';\n  return '';\n }\n\n private hasFiles(): boolean {\n  if (!this.internalValue) return false;\n  if (Array.isArray(this.internalValue)) {\n   return this.internalValue.length > 0;\n  }\n  return true;\n }\n\n private getDisplayText(): string {\n  if (!this.hasFiles()) return this.placeholder;\n\n  if (Array.isArray(this.internalValue)) {\n   return this.internalValue.map(f => f.name).join(', ');\n  }\n\n  return this.internalValue?.name || this.placeholder;\n }\n\n private checkOverflow() {\n  if (!this.fileNamesRef) return;\n  const isOverflowing = this.fileNamesRef.scrollWidth > this.fileNamesRef.clientWidth;\n  this.showTooltip = isOverflowing;\n }\n\n private getIconColor(): string {\n  if (this.disabled) {\n   return this.inline ? 'grey_45' : 'grey_55';\n  }\n  return 'grey_70';\n }\n\n render() {\n  const hasFiles = this.hasFiles();\n  const displayText = this.getDisplayText();\n\n  return (\n   <div\n    class={{\n     'sd-file-picker': true,\n     [this.getStatusClass()]: true,\n     'sd-file-picker--inline': this.inline,\n    }}\n    onClick={this.handleClick}\n    onMouseEnter={() => (this.hovered = true)}\n    onMouseLeave={() => (this.hovered = false)}\n   >\n    <input\n     ref={el => (this.fileInputRef = el as HTMLInputElement)}\n     type=\"file\"\n     class=\"sd-file-picker__input\"\n     disabled={this.disabled}\n     multiple={this.multiple}\n     accept={this.accept}\n     onInput={this.handleFileChange}\n     aria-label={this.placeholder}\n    />\n\n    <sd-icon name=\"attachFile\" size={16} color={this.getIconColor()} class=\"sd-file-picker__icon\" />\n\n    <div\n     ref={el => (this.fileNamesRef = el as HTMLElement)}\n     class={{\n      'sd-file-picker__text': true,\n      'sd-file-picker__text--placeholder': !hasFiles,\n      'sd-file-picker__text--active': hasFiles,\n     }}\n    >\n     {displayText}\n    </div>\n\n    {!this.disabled && hasFiles && (\n     <sd-icon\n      name=\"close\"\n      size={12}\n      color=\"#888888\"\n      class=\"sd-file-picker__clear-icon\"\n      onClick={this.handleClear}\n     />\n    )}\n\n    {this.showTooltip && hasFiles && this.hovered && (\n     <div class=\"sd-file-picker__tooltip\">{displayText}</div>\n    )}\n   </div>\n  );\n }\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
-import { S as SdFloatingPopover, d as defineCustomElement$1 } from './p-CVMprLsE.js';
+import { S as SdFloatingPopover, d as defineCustomElement$1 } from './p-CmghyzXg.js';
 
 const SdFloatingPortal = SdFloatingPopover;
 const defineCustomElement = defineCustomElement$1;