@sellmate/design-system 0.0.52 → 0.0.54

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

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

package/dist/components/sd-pagination.js

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

package/dist/components/sd-popover.js

@@ -1,10 +1,10 @@
-import { p as proxyCustomElement, H, h, F as Fragment } from './p-TFWJruz2.js';
-import { T as TooltipArrow } from './p-gnOKrd57.js';
-import { d as defineCustomElement$4 } from './p-DiehM5Y0.js';
-import { d as defineCustomElement$3 } from './p-BsyfatBe.js';
-import { d as defineCustomElement$2 } from './p-CJ0qTKU7.js';
+import { p as proxyCustomElement, H, h, F as Fragment, t as transformTag } from './p-CQBrru3e.js';
+import { T as TooltipArrow } from './p-BDkKpeVz.js';
+import { d as defineCustomElement$4 } from './p-B05GJor3.js';
+import { d as defineCustomElement$3 } from './p-CV5tKC24.js';
+import { d as defineCustomElement$2 } from './p-Cx3euWvk.js';
 
-const sdPopoverCss = ".sd-popover{position:relative;cursor:pointer;display:inline-block}";
+const sdPopoverCss = () => `.sd-popover{position:relative;cursor:pointer;display:inline-block}`;
 
 const SdPopover$1 = /*@__PURE__*/ proxyCustomElement(class SdPopover extends H {
     constructor(registerHost) {
@@ -43,16 +43,16 @@ const SdPopover$1 = /*@__PURE__*/ proxyCustomElement(class SdPopover extends H {
         this.showPopover = false;
     };
     render() {
-        return (h(Fragment, { key: '8c7efcbf49754c518a6a9cf492b300c07ef980f5' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })), this.showPopover && (h("sd-tooltip-portal", { key: 'c61e5138ebba94a31d621ff1b3439d3c37ceb629', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, h("div", { key: 'c88706aa4e7aec4a105459e429a8cfa9313c7aa8', class: {
+        return (h(Fragment, { key: '1300f5f84d96ef65840d8daec85dc53dba2c407c' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })), this.showPopover && (h("sd-tooltip-portal", { key: '73b7feb032125495c7df8bbcecee042b59c91886', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, h("div", { key: 'b6209c9654fe11e148206ef49c8a304b1f72f068', class: {
                 'sd-popover-menu': true,
                 [`sd-popover-menu--${this.placement}`]: true,
                 [this.menuClass]: !!this.menuClass,
-            } }, h("i", { key: 'f79cb7d4784bc70d89ed5a3d5fa63af3ffb94921', class: `sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: 'e5e6148d67858f972b00ec55e174685cd87c6608' })), h("div", { key: '17d4f8a35d85bf48a6155bf0581f37530c5ea492', class: "sd-popover-menu__content" }, this.menuTitle && h("div", { key: '26d5195b0cde90c8b9251622180021eb33027f6b', class: "sd-popover-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: 'd1eca72d7d97d16a6caa6a9094c93555ea0cbd53', class: "sd-popover-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: '2c8258470a30a604398f680b5d02527303d3b6c7', class: `sd-popover-menu__buttons sd-popover-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (h("sd-button", { ...button })))))), this.useClose && (h("button", { key: '480f0a2b1e9aa0f6d31257f1a13fe441c3685e2b', class: "sd-popover-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: '73d77f0e344a86c4a81c0aab4289b6fb5d3603c2', name: "close", size: "12", color: "#AAAAAA" }))))))));
+            } }, h("i", { key: 'c788234f854fe0704ffffdc89dd297277916e7f1', class: `sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '5d5b4aa3815b815ebe4bebc81f307ba62f781af1' })), h("div", { key: '6305c611f72e1e57ff90562a05568777ff3e5db0', class: "sd-popover-menu__content" }, this.menuTitle && h("div", { key: 'da81708c8925e82c6b28b2d582f17d588f9fceae', class: "sd-popover-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: 'd0d00ce577b6de6efd546fadafc5d487f5e9b0b9', class: "sd-popover-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: '3ce2714f038a72ffd1017e00521bf2c05fe8730c', class: `sd-popover-menu__buttons sd-popover-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (h("sd-button", { ...button })))))), this.useClose && (h("button", { key: '4c551c170b13797cb725e3e0ae42623dc983286a', class: "sd-popover-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: '1c4620527b33feba50d06709ed0c9185be4094b4', name: "close", size: "12", color: "#AAAAAA" }))))))));
     }
     static get watchers() { return {
         "show": ["watchShowHandler"]
     }; }
-    static get style() { return sdPopoverCss; }
+    static get style() { return sdPopoverCss(); }
 }, [769, "sd-popover", {
         "show": [1028],
         "placement": [513],
@@ -80,22 +80,22 @@ function defineCustomElement$1() {
     const components = ["sd-popover", "sd-button", "sd-icon", "sd-tooltip-portal"];
     components.forEach(tagName => { switch (tagName) {
         case "sd-popover":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SdPopover$1);
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), SdPopover$1);
             }
             break;
         case "sd-button":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$4();
             }
             break;
         case "sd-icon":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$3();
             }
             break;
         case "sd-tooltip-portal":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$2();
             }
             break;

package/dist/components/sd-popover.js.map

@@ -1 +1 @@
-{"file":"sd-popover.js","mappings":"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","names":["SdPopover","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-popover/sd-popover.scss?tag=sd-popover&encapsulation=shadow","src/components/sd-popover/sd-popover.tsx"],"sourcesContent":["@import 'variables';\r\n\r\n.sd-popover {\r\n position: relative;\r\n cursor: pointer;\r\n display: inline-block;\r\n}\r\n","import { Component, Element, Fragment, Prop, State, Watch, h } from '@stencil/core';\r\nimport { ButtonSize, ButtonVariant } from '../sd-button/sd-button';\r\nimport { TooltipArrow } from '../assets/tooltipArrow';\r\n\r\n@Component({\r\n tag: 'sd-popover',\r\n styleUrl: 'sd-popover.scss',\r\n shadow: true,\r\n})\r\nexport class SdPopover {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop({ mutable: true }) show: boolean = false;\r\n\r\n @Prop({ reflect: true }) placement: 'top' | 'bottom' | 'left' | 'right' = 'bottom';\r\n @Prop({ reflect: true }) color: string = '#01BB4B';\r\n\r\n @Prop({ reflect: true }) icon: IconName = 'helpOutline';\r\n @Prop({ reflect: true }) iconSize: number = 12;\r\n\r\n @Prop() label: string = '';\r\n @Prop({ reflect: true }) buttonSize: ButtonSize = 'sm';\r\n @Prop({ reflect: true }) buttonVariant: ButtonVariant = 'primary';\r\n\r\n @Prop({ attribute: 'title', reflect: true }) menuTitle?: string;\r\n @Prop({ reflect: true }) messages: string[] = [];\r\n @Prop({ reflect: true }) buttons: {\r\n  [key: string]: any;\r\n }[] = [];\r\n @Prop() menuClass: string = '';\r\n\r\n @Prop() noHover: boolean = true;\r\n\r\n @Prop() useClose: boolean = false;\r\n\r\n @State() showPopover: boolean = false;\r\n @State() slotContent: string = '';\r\n\r\n @Watch('show')\r\n watchShowHandler(newValue: boolean) {\r\n  this.showPopover = newValue;\r\n }\r\n\r\n componentWillLoad() {\r\n  this.showPopover = this.show;\r\n\r\n  this.slotContent = this.el.innerHTML;\r\n }\r\n\r\n private buttonEl?: HTMLElement;\r\n\r\n private handleClose = () => {\r\n  this.showPopover = false;\r\n };\r\n\r\n render() {\r\n  return (\r\n   <Fragment>\r\n    {this.label ? (\r\n     <sd-button\r\n      ref={el => (this.buttonEl = el as unknown as HTMLElement)}\r\n      label={this.label}\r\n      icon={this.icon}\r\n      size={this.buttonSize}\r\n      color={this.color}\r\n      variant={this.buttonVariant}\r\n      class=\"sd-popover\"\r\n      onClick={() => (this.showPopover = !this.showPopover)}\r\n     ></sd-button>\r\n    ) : (\r\n     <sd-icon\r\n      ref={el => (this.buttonEl = el as unknown as HTMLElement)}\r\n      name={this.icon}\r\n      size={this.iconSize}\r\n      color={this.color}\r\n      class=\"sd-popover\"\r\n      onClick={() => (this.showPopover = !this.showPopover)}\r\n     ></sd-icon>\r\n    )}\r\n\r\n    {this.showPopover && (\r\n     <sd-tooltip-portal\r\n      parentRef={this.buttonEl}\r\n      onSdClose={this.handleClose}\r\n      placement={this.placement}\r\n     >\r\n      <div\r\n       class={{\r\n        'sd-popover-menu': true,\r\n        [`sd-popover-menu--${this.placement}`]: true,\r\n        [this.menuClass]: !!this.menuClass,\r\n       }}\r\n      >\r\n       <i class={`sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}`}>\r\n        <TooltipArrow></TooltipArrow>\r\n       </i>\r\n\r\n       <div class=\"sd-popover-menu__content\">\r\n        {this.menuTitle && <div class=\"sd-popover-menu__title\">{this.menuTitle}</div>}\r\n\r\n        {this.messages.length > 0 && (\r\n         <div class=\"sd-popover-menu__messages\">\r\n          {this.messages.map(message => (\r\n           <div>{message}</div>\r\n          ))}\r\n         </div>\r\n        )}\r\n\r\n        {this.buttons.length > 0 && (\r\n         <div class={`sd-popover-menu__buttons sd-popover-menu__buttons--${this.buttons.length}`}>\r\n          {this.buttons.map(button => (\r\n           <sd-button {...button} />\r\n          ))}\r\n         </div>\r\n        )}\r\n       </div>\r\n\r\n       {this.useClose && (\r\n        <button class=\"sd-popover-menu__close-button\" onClick={() => this.handleClose()}>\r\n         <sd-icon name=\"close\" size=\"12\" color=\"#AAAAAA\"></sd-icon>\r\n        </button>\r\n       )}\r\n      </div>\r\n     </sd-tooltip-portal>\r\n    )}\r\n   </Fragment>\r\n  );\r\n }\r\n}\r\n"],"version":3}
+{"file":"sd-popover.js","mappings":"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","names":["SdPopover","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-popover/sd-popover.scss?tag=sd-popover&encapsulation=shadow","src/components/sd-popover/sd-popover.tsx"],"sourcesContent":["@import 'variables';\r\n\r\n.sd-popover {\r\n position: relative;\r\n cursor: pointer;\r\n display: inline-block;\r\n}\r\n","import { Component, Element, Fragment, Prop, State, Watch, h } from '@stencil/core';\r\nimport { ButtonSize, ButtonVariant } from '../sd-button/sd-button';\r\nimport { TooltipArrow } from '../assets/tooltipArrow';\r\n\r\n@Component({\r\n tag: 'sd-popover',\r\n styleUrl: 'sd-popover.scss',\r\n shadow: true,\r\n})\r\nexport class SdPopover {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop({ mutable: true }) show: boolean = false;\r\n\r\n @Prop({ reflect: true }) placement: 'top' | 'bottom' | 'left' | 'right' = 'bottom';\r\n @Prop({ reflect: true }) color: string = '#01BB4B';\r\n\r\n @Prop({ reflect: true }) icon: IconName = 'helpOutline';\r\n @Prop({ reflect: true }) iconSize: number = 12;\r\n\r\n @Prop() label: string = '';\r\n @Prop({ reflect: true }) buttonSize: ButtonSize = 'sm';\r\n @Prop({ reflect: true }) buttonVariant: ButtonVariant = 'primary';\r\n\r\n @Prop({ attribute: 'title', reflect: true }) menuTitle?: string;\r\n @Prop({ reflect: true }) messages: string[] = [];\r\n @Prop({ reflect: true }) buttons: {\r\n  [key: string]: any;\r\n }[] = [];\r\n @Prop() menuClass: string = '';\r\n\r\n @Prop() noHover: boolean = true;\r\n\r\n @Prop() useClose: boolean = false;\r\n\r\n @State() showPopover: boolean = false;\r\n @State() slotContent: string = '';\r\n\r\n @Watch('show')\r\n watchShowHandler(newValue: boolean) {\r\n  this.showPopover = newValue;\r\n }\r\n\r\n componentWillLoad() {\r\n  this.showPopover = this.show;\r\n\r\n  this.slotContent = this.el.innerHTML;\r\n }\r\n\r\n private buttonEl?: HTMLElement;\r\n\r\n private handleClose = () => {\r\n  this.showPopover = false;\r\n };\r\n\r\n render() {\r\n  return (\r\n   <Fragment>\r\n    {this.label ? (\r\n     <sd-button\r\n      ref={el => (this.buttonEl = el as unknown as HTMLElement)}\r\n      label={this.label}\r\n      icon={this.icon}\r\n      size={this.buttonSize}\r\n      color={this.color}\r\n      variant={this.buttonVariant}\r\n      class=\"sd-popover\"\r\n      onClick={() => (this.showPopover = !this.showPopover)}\r\n     ></sd-button>\r\n    ) : (\r\n     <sd-icon\r\n      ref={el => (this.buttonEl = el as unknown as HTMLElement)}\r\n      name={this.icon}\r\n      size={this.iconSize}\r\n      color={this.color}\r\n      class=\"sd-popover\"\r\n      onClick={() => (this.showPopover = !this.showPopover)}\r\n     ></sd-icon>\r\n    )}\r\n\r\n    {this.showPopover && (\r\n     <sd-tooltip-portal\r\n      parentRef={this.buttonEl}\r\n      onSdClose={this.handleClose}\r\n      placement={this.placement}\r\n     >\r\n      <div\r\n       class={{\r\n        'sd-popover-menu': true,\r\n        [`sd-popover-menu--${this.placement}`]: true,\r\n        [this.menuClass]: !!this.menuClass,\r\n       }}\r\n      >\r\n       <i class={`sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}`}>\r\n        <TooltipArrow></TooltipArrow>\r\n       </i>\r\n\r\n       <div class=\"sd-popover-menu__content\">\r\n        {this.menuTitle && <div class=\"sd-popover-menu__title\">{this.menuTitle}</div>}\r\n\r\n        {this.messages.length > 0 && (\r\n         <div class=\"sd-popover-menu__messages\">\r\n          {this.messages.map(message => (\r\n           <div>{message}</div>\r\n          ))}\r\n         </div>\r\n        )}\r\n\r\n        {this.buttons.length > 0 && (\r\n         <div class={`sd-popover-menu__buttons sd-popover-menu__buttons--${this.buttons.length}`}>\r\n          {this.buttons.map(button => (\r\n           <sd-button {...button} />\r\n          ))}\r\n         </div>\r\n        )}\r\n       </div>\r\n\r\n       {this.useClose && (\r\n        <button class=\"sd-popover-menu__close-button\" onClick={() => this.handleClose()}>\r\n         <sd-icon name=\"close\" size=\"12\" color=\"#AAAAAA\"></sd-icon>\r\n        </button>\r\n       )}\r\n      </div>\r\n     </sd-tooltip-portal>\r\n    )}\r\n   </Fragment>\r\n  );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/sd-portal.js

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

package/dist/components/sd-progress.js

@@ -1,6 +1,6 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-TFWJruz2.js';
+import { p as proxyCustomElement, H, h, c as Host, t as transformTag } from './p-CQBrru3e.js';
 
-const sdProgressCss = "sd-progress{display:block}sd-progress .sd-progress__bar{position:relative;width:360px;height:20px;overflow:hidden;border-radius:4px;background-color:#eeeeee;text-align:center}sd-progress .sd-progress__bar__percent{width:var(--progress-percentage);height:100%;border-radius:4px;background-color:var(--progress-color, #0075ff);transition:all 0.5s}sd-progress .sd-progress__bar__percent.proceed{border-top-right-radius:50%}sd-progress .sd-progress__bar__indicator{position:absolute;left:0;top:0;height:20px;width:100%;background-color:#eeeeee;line-height:21px;z-index:1}sd-progress .sd-progress__bar__indicator--left{color:var(--progress-color, #0075ff);clip-path:inset(0 0 0 var(--progress-percentage))}sd-progress .sd-progress__bar__indicator--right{color:white;background-color:var(--progress-color, #0075ff);clip-path:inset(0 calc(100% - var(--progress-percentage)) 0 0)}sd-progress .sd-progress__spinner{display:flex;flex-direction:column;align-items:center;justify-content:center}sd-progress .sd-progress__spinner svg{transform:rotate(-90deg)}sd-progress .sd-progress__spinner__label{margin-top:8px;font-size:16px;color:var(--progress-color, #0075ff)}sd-progress .sd-progress__label{margin-top:4px;font-size:12px;color:#222222;text-align:center}";
+const sdProgressCss = () => `sd-progress{display:block}sd-progress .sd-progress__bar{position:relative;width:360px;height:20px;overflow:hidden;border-radius:4px;background-color:#eeeeee;text-align:center}sd-progress .sd-progress__bar__percent{width:var(--progress-percentage);height:100%;border-radius:4px;background-color:var(--progress-color, #0075ff);transition:all 0.5s}sd-progress .sd-progress__bar__percent.proceed{border-top-right-radius:50%}sd-progress .sd-progress__bar__indicator{position:absolute;left:0;top:0;height:20px;width:100%;background-color:#eeeeee;line-height:21px;z-index:1}sd-progress .sd-progress__bar__indicator--left{color:var(--progress-color, #0075ff);clip-path:inset(0 0 0 var(--progress-percentage))}sd-progress .sd-progress__bar__indicator--right{color:white;background-color:var(--progress-color, #0075ff);clip-path:inset(0 calc(100% - var(--progress-percentage)) 0 0)}sd-progress .sd-progress__spinner{display:flex;flex-direction:column;align-items:center;justify-content:center}sd-progress .sd-progress__spinner svg{transform:rotate(-90deg)}sd-progress .sd-progress__spinner__label{margin-top:8px;font-size:16px;color:var(--progress-color, #0075ff)}sd-progress .sd-progress__label{margin-top:4px;font-size:12px;color:#222222;text-align:center}`;
 
 const SdProgress$1 = /*@__PURE__*/ proxyCustomElement(class SdProgress extends H {
     constructor(registerHost) {
@@ -22,10 +22,10 @@ const SdProgress$1 = /*@__PURE__*/ proxyCustomElement(class SdProgress extends H
         error: '#FB4444',
     };
     render() {
-        return (h(Host, { key: 'd491ac2f5e734f653a991afa1c9e25ceb9947335', style: {
+        return (h(Host, { key: '351f3fda014f276d22b02b09f92ed7895a43ea85', style: {
                 '--progress-color': this.statusColor[this.status],
                 '--progress-percentage': `${this.percentage}%`,
-            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && h("div", { key: '0741e3f5492c4f870cc9657e27d3d1a1d73bee10', class: "sd-progress__label" }, this.label)));
+            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && h("div", { key: '3b41b3fdb26fdf283792172de45fbcff37e1c90e', class: "sd-progress__label" }, this.label)));
     }
     renderBarProgress() {
         return (h("div", { class: `sd-progress__bar sd-progress__bar--${this.status}` }, h("div", { class: ['sd-progress__bar__percent', this.percentage < 100 ? 'proceed' : ''].join(' ') }), h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--left" }, this.percentage, "%"), h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--right" }, this.percentage, "%")));
@@ -38,7 +38,7 @@ const SdProgress$1 = /*@__PURE__*/ proxyCustomElement(class SdProgress extends H
         const progressSize = `${this.size / 2}px`;
         return (h("div", { class: `sd-progress__spinner sd-progress__spinner--${this.status}` }, h("svg", { width: progressBgSize, height: progressBgSize }, h("circle", { cx: progressSize, cy: progressSize, r: radius, stroke: "#EEEEEE", "stroke-width": this.strokeWidth, fill: "transparent" }), h("circle", { cx: progressSize, cy: progressSize, r: radius, stroke: this.statusColor[this.status], "stroke-width": this.strokeWidth, fill: "transparent", "stroke-dasharray": circumference, "stroke-dashoffset": offset, "stroke-linecap": "round", class: "transition-all duration-500" })), h("strong", { class: "sd-progress__spinner__label" }, this.percentage, " %")));
     }
-    static get style() { return sdProgressCss; }
+    static get style() { return sdProgressCss(); }
 }, [768, "sd-progress", {
         "type": [1],
         "status": [1],
@@ -54,8 +54,8 @@ function defineCustomElement$1() {
     const components = ["sd-progress"];
     components.forEach(tagName => { switch (tagName) {
         case "sd-progress":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SdProgress$1);
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), SdProgress$1);
             }
             break;
     } });

package/dist/components/sd-progress.js.map

@@ -1 +1 @@
-{"file":"sd-progress.js","mappings":"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","names":["SdProgress","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-progress/sd-progress.scss?tag=sd-progress","src/components/sd-progress/sd-progress.tsx"],"sourcesContent":["@import 'variables';\r\n\r\nsd-progress {\r\n display: block;\r\n\r\n .sd-progress__bar {\r\n  position: relative;\r\n  width: 360px;\r\n  height: 20px;\r\n  overflow: hidden;\r\n  border-radius: 4px;\r\n  background-color: $grey_20;\r\n  text-align: center;\r\n\r\n  &__percent {\r\n   width: var(--progress-percentage);\r\n   height: 100%;\r\n   border-radius: 4px;\r\n   background-color: var(--progress-color, $brilliantblue_75);\r\n   transition: all 0.5s;\r\n   &.proceed {\r\n    border-top-right-radius: 50%;\r\n   }\r\n  }\r\n  &__indicator {\r\n   position: absolute;\r\n   left: 0;\r\n   top: 0;\r\n   height: 20px;\r\n   width: 100%;\r\n   background-color: $grey_20;\r\n   line-height: 21px;\r\n   z-index: 1;\r\n  }\r\n\r\n  &__indicator--left {\r\n   color: var(--progress-color, $brilliantblue_75);\r\n   clip-path: inset(0 0 0 var(--progress-percentage));\r\n  }\r\n\r\n  &__indicator--right {\r\n   color: white;\r\n   background-color: var(--progress-color, $brilliantblue_75);\r\n   clip-path: inset(0 calc(100% - var(--progress-percentage)) 0 0);\r\n  }\r\n }\r\n\r\n .sd-progress__spinner {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  svg {\r\n   transform: rotate(-90deg);\r\n  }\r\n\r\n  &__label {\r\n   margin-top: 8px;\r\n   font-size: 16px;\r\n   color: var(--progress-color, $brilliantblue_75);\r\n  }\r\n }\r\n\r\n .sd-progress__label {\r\n  margin-top: 4px;\r\n  font-size: 12px;\r\n  color: $grey_95;\r\n  text-align: center;\r\n }\r\n}\r\n","import { Component, Host, Prop, h } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'sd-progress',\r\n styleUrl: 'sd-progress.scss',\r\n})\r\nexport class SdProgress {\r\n @Prop() type: 'bar' | 'spinner' = 'bar';\r\n @Prop() status: 'default' | 'progress' | 'complete' | 'error' = 'default';\r\n @Prop() percentage: number = 0;\r\n @Prop() size: number = 80;\r\n @Prop() strokeWidth: number = 12;\r\n @Prop() label?: string;\r\n\r\n private statusColor = {\r\n  default: '#aaaaaa',\r\n  progress: '#0075ff',\r\n  complete: '#12B553',\r\n  error: '#FB4444',\r\n };\r\n\r\n render() {\r\n  return (\r\n   <Host\r\n    style={{\r\n     '--progress-color': this.statusColor[this.status],\r\n     '--progress-percentage': `${this.percentage}%`,\r\n    }}\r\n   >\r\n    {this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress()}\r\n    {this.label && <div class=\"sd-progress__label\">{this.label}</div>}\r\n   </Host>\r\n  );\r\n }\r\n\r\n renderBarProgress() {\r\n  return (\r\n   <div class={`sd-progress__bar sd-progress__bar--${this.status}`}>\r\n    <div\r\n     class={['sd-progress__bar__percent', this.percentage < 100 ? 'proceed' : ''].join(' ')}\r\n    ></div>\r\n    <div class=\"sd-progress__bar__indicator sd-progress__bar__indicator--left\">\r\n     {this.percentage}%\r\n    </div>\r\n    <div class=\"sd-progress__bar__indicator sd-progress__bar__indicator--right\">\r\n     {this.percentage}%\r\n    </div>\r\n   </div>\r\n  );\r\n }\r\n\r\n renderSpinnerProgress() {\r\n  const radius = (this.size - this.strokeWidth) / 2; // 원의 반지름\r\n  const circumference = 2 * Math.PI * radius; // 원의 둘레\r\n  const offset = circumference - (this.percentage / 100) * circumference; // 진행률에 따른 offset\r\n  const progressBgSize = `${this.size}px`;\r\n  const progressSize = `${this.size / 2}px`;\r\n\r\n  return (\r\n   <div class={`sd-progress__spinner sd-progress__spinner--${this.status}`}>\r\n    <svg width={progressBgSize} height={progressBgSize}>\r\n     <circle\r\n      cx={progressSize}\r\n      cy={progressSize}\r\n      r={radius}\r\n      stroke=\"#EEEEEE\"\r\n      stroke-width={this.strokeWidth}\r\n      fill=\"transparent\"\r\n     />\r\n     <circle\r\n      cx={progressSize}\r\n      cy={progressSize}\r\n      r={radius}\r\n      stroke={this.statusColor[this.status]}\r\n      stroke-width={this.strokeWidth}\r\n      fill=\"transparent\"\r\n      stroke-dasharray={circumference}\r\n      stroke-dashoffset={offset}\r\n      stroke-linecap=\"round\"\r\n      class=\"transition-all duration-500\"\r\n     />\r\n    </svg>\r\n    <strong class=\"sd-progress__spinner__label\">{this.percentage} %</strong>\r\n   </div>\r\n  );\r\n }\r\n}\r\n\r\n//  <sd-progress id=\"sd-progress-1\"></sd-progress>\r\n//  <sd-progress id=\"sd-progress-2\" type=\"spinner\"></sd-progress>\r\n//  <sd-progress id=\"sd-progress-3\" type=\"spinner\"></sd-progress>\r\n// <script>\r\n//  document.addEventListener('DOMContentLoaded', event => {\r\n//   progress = document.getElementById('sd-progress-1');\r\n//   progress2 = document.getElementById('sd-progress-2');\r\n//   progress3 = document.getElementById('sd-progress-3');\r\n//   progress2.label = 'test label...';\r\n//   progress3.percentage = 50;\r\n//   progress3.status = 'error';\r\n//   let percentage = 0;\r\n//   const interval = setInterval(() => {\r\n//    if (percentage >= 100) {\r\n//     clearInterval(interval);\r\n//     progress.status = 'complete';\r\n//     progress2.status = 'complete';\r\n//     return;\r\n//    }\r\n//    percentage += 10;\r\n//    progress.status = 'progress';\r\n//    progress.percentage = percentage;\r\n//    progress2.status = 'progress';\r\n//    progress2.percentage = percentage;\r\n//   }, 500);\r\n//  });\r\n// </script>\r\n"],"version":3}
+{"file":"sd-progress.js","mappings":"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","names":["SdProgress","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-progress/sd-progress.scss?tag=sd-progress","src/components/sd-progress/sd-progress.tsx"],"sourcesContent":["@import 'variables';\r\n\r\nsd-progress {\r\n display: block;\r\n\r\n .sd-progress__bar {\r\n  position: relative;\r\n  width: 360px;\r\n  height: 20px;\r\n  overflow: hidden;\r\n  border-radius: 4px;\r\n  background-color: $grey_20;\r\n  text-align: center;\r\n\r\n  &__percent {\r\n   width: var(--progress-percentage);\r\n   height: 100%;\r\n   border-radius: 4px;\r\n   background-color: var(--progress-color, $brilliantblue_75);\r\n   transition: all 0.5s;\r\n   &.proceed {\r\n    border-top-right-radius: 50%;\r\n   }\r\n  }\r\n  &__indicator {\r\n   position: absolute;\r\n   left: 0;\r\n   top: 0;\r\n   height: 20px;\r\n   width: 100%;\r\n   background-color: $grey_20;\r\n   line-height: 21px;\r\n   z-index: 1;\r\n  }\r\n\r\n  &__indicator--left {\r\n   color: var(--progress-color, $brilliantblue_75);\r\n   clip-path: inset(0 0 0 var(--progress-percentage));\r\n  }\r\n\r\n  &__indicator--right {\r\n   color: white;\r\n   background-color: var(--progress-color, $brilliantblue_75);\r\n   clip-path: inset(0 calc(100% - var(--progress-percentage)) 0 0);\r\n  }\r\n }\r\n\r\n .sd-progress__spinner {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  svg {\r\n   transform: rotate(-90deg);\r\n  }\r\n\r\n  &__label {\r\n   margin-top: 8px;\r\n   font-size: 16px;\r\n   color: var(--progress-color, $brilliantblue_75);\r\n  }\r\n }\r\n\r\n .sd-progress__label {\r\n  margin-top: 4px;\r\n  font-size: 12px;\r\n  color: $grey_95;\r\n  text-align: center;\r\n }\r\n}\r\n","import { Component, Host, Prop, h } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'sd-progress',\r\n styleUrl: 'sd-progress.scss',\r\n})\r\nexport class SdProgress {\r\n @Prop() type: 'bar' | 'spinner' = 'bar';\r\n @Prop() status: 'default' | 'progress' | 'complete' | 'error' = 'default';\r\n @Prop() percentage: number = 0;\r\n @Prop() size: number = 80;\r\n @Prop() strokeWidth: number = 12;\r\n @Prop() label?: string;\r\n\r\n private statusColor = {\r\n  default: '#aaaaaa',\r\n  progress: '#0075ff',\r\n  complete: '#12B553',\r\n  error: '#FB4444',\r\n };\r\n\r\n render() {\r\n  return (\r\n   <Host\r\n    style={{\r\n     '--progress-color': this.statusColor[this.status],\r\n     '--progress-percentage': `${this.percentage}%`,\r\n    }}\r\n   >\r\n    {this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress()}\r\n    {this.label && <div class=\"sd-progress__label\">{this.label}</div>}\r\n   </Host>\r\n  );\r\n }\r\n\r\n renderBarProgress() {\r\n  return (\r\n   <div class={`sd-progress__bar sd-progress__bar--${this.status}`}>\r\n    <div\r\n     class={['sd-progress__bar__percent', this.percentage < 100 ? 'proceed' : ''].join(' ')}\r\n    ></div>\r\n    <div class=\"sd-progress__bar__indicator sd-progress__bar__indicator--left\">\r\n     {this.percentage}%\r\n    </div>\r\n    <div class=\"sd-progress__bar__indicator sd-progress__bar__indicator--right\">\r\n     {this.percentage}%\r\n    </div>\r\n   </div>\r\n  );\r\n }\r\n\r\n renderSpinnerProgress() {\r\n  const radius = (this.size - this.strokeWidth) / 2; // 원의 반지름\r\n  const circumference = 2 * Math.PI * radius; // 원의 둘레\r\n  const offset = circumference - (this.percentage / 100) * circumference; // 진행률에 따른 offset\r\n  const progressBgSize = `${this.size}px`;\r\n  const progressSize = `${this.size / 2}px`;\r\n\r\n  return (\r\n   <div class={`sd-progress__spinner sd-progress__spinner--${this.status}`}>\r\n    <svg width={progressBgSize} height={progressBgSize}>\r\n     <circle\r\n      cx={progressSize}\r\n      cy={progressSize}\r\n      r={radius}\r\n      stroke=\"#EEEEEE\"\r\n      stroke-width={this.strokeWidth}\r\n      fill=\"transparent\"\r\n     />\r\n     <circle\r\n      cx={progressSize}\r\n      cy={progressSize}\r\n      r={radius}\r\n      stroke={this.statusColor[this.status]}\r\n      stroke-width={this.strokeWidth}\r\n      fill=\"transparent\"\r\n      stroke-dasharray={circumference}\r\n      stroke-dashoffset={offset}\r\n      stroke-linecap=\"round\"\r\n      class=\"transition-all duration-500\"\r\n     />\r\n    </svg>\r\n    <strong class=\"sd-progress__spinner__label\">{this.percentage} %</strong>\r\n   </div>\r\n  );\r\n }\r\n}\r\n\r\n//  <sd-progress id=\"sd-progress-1\"></sd-progress>\r\n//  <sd-progress id=\"sd-progress-2\" type=\"spinner\"></sd-progress>\r\n//  <sd-progress id=\"sd-progress-3\" type=\"spinner\"></sd-progress>\r\n// <script>\r\n//  document.addEventListener('DOMContentLoaded', event => {\r\n//   progress = document.getElementById('sd-progress-1');\r\n//   progress2 = document.getElementById('sd-progress-2');\r\n//   progress3 = document.getElementById('sd-progress-3');\r\n//   progress2.label = 'test label...';\r\n//   progress3.percentage = 50;\r\n//   progress3.status = 'error';\r\n//   let percentage = 0;\r\n//   const interval = setInterval(() => {\r\n//    if (percentage >= 100) {\r\n//     clearInterval(interval);\r\n//     progress.status = 'complete';\r\n//     progress2.status = 'complete';\r\n//     return;\r\n//    }\r\n//    percentage += 10;\r\n//    progress.status = 'progress';\r\n//    progress.percentage = percentage;\r\n//    progress2.status = 'progress';\r\n//    progress2.percentage = percentage;\r\n//   }, 500);\r\n//  });\r\n// </script>\r\n"],"version":3}

package/dist/components/sd-radio-button-group.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SdRadioButtonGroup extends Components.SdRadioButtonGroup, HTMLElement {}
+export const SdRadioButtonGroup: {
+    prototype: SdRadioButtonGroup;
+    new (): SdRadioButtonGroup;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/sd-radio-button-group.js

@@ -0,0 +1,99 @@
+import { p as proxyCustomElement, H, d as createEvent, h, t as transformTag } from './p-CQBrru3e.js';
+
+const sdRadioButtonGroupCss = () => `sd-radio-button-group{display:inline-block}sd-radio-button-group .sd-radio-button-group{display:flex;flex-direction:row;gap:0}sd-radio-button-group .sd-radio-button-group__option{display:flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid #cccccc;background-color:white;color:#333333;font-weight:400;transition:all 0.2s ease;position:relative;user-select:none}sd-radio-button-group .sd-radio-button-group__option input{display:none}sd-radio-button-group .sd-radio-button-group__option:not(:first-child){margin-left:-1px}sd-radio-button-group .sd-radio-button-group__option:first-child{border-radius:4px 0 0 4px}sd-radio-button-group .sd-radio-button-group__option:last-child{border-radius:0 4px 4px 0}sd-radio-button-group .sd-radio-button-group__option:only-child{border-radius:4px}sd-radio-button-group .sd-radio-button-group__option:not(sd-radio-button-group .sd-radio-button-group__option--disabled):not(sd-radio-button-group .sd-radio-button-group__option--selected):hover{background-color:#0075ff;color:white;font-weight:500;border-color:#0075ff;z-index:2}sd-radio-button-group .sd-radio-button-group__option--selected{border-color:#0075ff;color:#0075ff;background-color:white;z-index:1}sd-radio-button-group .sd-radio-button-group__option--disabled{background-color:#e1e1e1;border-color:#cccccc;color:#888888;cursor:not-allowed}sd-radio-button-group .sd-radio-button-group__option:has(input:disabled){cursor:not-allowed}sd-radio-button-group .sd-radio-button-group__label{user-select:none}sd-radio-button-group .sd-radio-button-group--sm .sd-radio-button-group__option{padding:4px 12px;font-size:12px;line-height:20px}sd-radio-button-group .sd-radio-button-group--md .sd-radio-button-group__option{padding:4px 20px;font-size:16px;line-height:26px}`;
+
+const SdRadioButtonGroup$1 = /*@__PURE__*/ proxyCustomElement(class SdRadioButtonGroup extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.sdChange = createEvent(this, "sdChange");
+    }
+    value;
+    radioOptions = [];
+    size = 'md';
+    disabled = false;
+    name;
+    selectedValue;
+    sdChange;
+    componentWillLoad() {
+        if (this.value !== undefined && this.value !== null) {
+            this.selectedValue = this.value;
+        }
+    }
+    valueChanged(newValue) {
+        this.selectedValue = newValue;
+    }
+    handleRadioChange = (optionValue, optionDisabled) => {
+        if (this.disabled || optionDisabled)
+            return;
+        this.selectedValue = optionValue;
+        this.value = optionValue;
+        this.sdChange.emit(optionValue);
+    };
+    isOptionSelected(option) {
+        return this.selectedValue === option.value;
+    }
+    isOptionDisabled(option) {
+        return this.disabled || !!option.disabled;
+    }
+    getButtonClasses(option) {
+        const classes = [
+            'sd-radio-button-group__option',
+            this.isOptionSelected(option)
+                ? 'sd-radio-button-group__option--selected'
+                : 'sd-radio-button-group__option--unselected',
+        ];
+        if (this.isOptionDisabled(option)) {
+            classes.push('sd-radio-button-group__option--disabled');
+        }
+        return classes.join(' ');
+    }
+    getGroupClasses() {
+        const classes = ['sd-radio-button-group', `sd-radio-button-group--${this.size}`];
+        return classes.join(' ');
+    }
+    render() {
+        const groupName = this.name || `sd-radio-button-group-${Math.random().toString(36).substring(2, 11)}`;
+        return (h("div", { key: '11b2fa2d7c019ea5d1c535e8f36ac488169e11e9', class: this.getGroupClasses(), role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.radioOptions.map((option, index) => {
+            const isSelected = this.isOptionSelected(option);
+            const isDisabled = this.isOptionDisabled(option);
+            return (h("label", { key: `radio-${index}`, class: this.getButtonClasses(option), role: "radio", "aria-checked": isSelected.toString(), "aria-disabled": isDisabled.toString(), "aria-label": option.label || 'radio option' }, h("input", { type: "radio", name: groupName, value: option.value.toString(), checked: isSelected, disabled: isDisabled, onInput: () => this.handleRadioChange(option.value, option.disabled) }), option.label && h("span", { class: "sd-radio-button-group__label" }, option.label)));
+        })));
+    }
+    static get watchers() { return {
+        "value": ["valueChanged"]
+    }; }
+    static get style() { return sdRadioButtonGroupCss(); }
+}, [768, "sd-radio-button-group", {
+        "value": [1544],
+        "radioOptions": [1040],
+        "size": [1],
+        "disabled": [4],
+        "name": [1],
+        "selectedValue": [32]
+    }, undefined, {
+        "value": ["valueChanged"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["sd-radio-button-group"];
+    components.forEach(tagName => { switch (tagName) {
+        case "sd-radio-button-group":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), SdRadioButtonGroup$1);
+            }
+            break;
+    } });
+}
+
+const SdRadioButtonGroup = SdRadioButtonGroup$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SdRadioButtonGroup, defineCustomElement };
+//# sourceMappingURL=sd-radio-button-group.js.map
+
+//# sourceMappingURL=sd-radio-button-group.js.map

package/dist/components/sd-radio-button-group.js.map

@@ -0,0 +1 @@
+{"file":"sd-radio-button-group.js","mappings":"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","names":["SdRadioButtonGroup","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-radio-button-group/sd-radio-button-group.scss?tag=sd-radio-button-group","src/components/sd-radio-button-group/sd-radio-button-group.tsx"],"sourcesContent":["@import 'variables';\r\n\r\nsd-radio-button-group {\r\n  display: inline-block;\r\n\r\n  .sd-radio-button-group {\r\n    display: flex;\r\n    flex-direction: row;\r\n    gap: 0; // No gaps between buttons\r\n\r\n    &__option {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      cursor: pointer;\r\n      border: 1px solid $grey_45;\r\n      background-color: white;\r\n      color: $grey_90;\r\n      font-weight: 400;\r\n      transition: all 0.2s ease;\r\n      position: relative;\r\n      user-select: none;\r\n\r\n      // Hide the native radio input\r\n      input {\r\n        display: none;\r\n      }\r\n\r\n      // Border collapse: overlap adjacent borders\r\n      &:not(:first-child) {\r\n        margin-left: -1px;\r\n      }\r\n\r\n      // First button: left border-radius only\r\n      &:first-child {\r\n        border-radius: 4px 0 0 4px;\r\n      }\r\n\r\n      // Last button: right border-radius only\r\n      &:last-child {\r\n        border-radius: 0 4px 4px 0;\r\n      }\r\n\r\n      // Single button: all corners rounded\r\n      &:only-child {\r\n        border-radius: 4px;\r\n      }\r\n\r\n      // Hover state (non-disabled, non-selected)\r\n      &:not(&--disabled):not(&--selected):hover {\r\n        background-color: $brilliantblue_75;\r\n        color: white;\r\n        font-weight: 500;\r\n        border-color: $brilliantblue_75;\r\n        z-index: 2; // Bring to front to show full border\r\n      }\r\n\r\n      // Selected/Active state\r\n      &--selected {\r\n        border-color: $brilliantblue_75;\r\n        color: $brilliantblue_75;\r\n        background-color: white;\r\n        z-index: 1; // Above non-selected, below hover\r\n      }\r\n\r\n      // Disabled state\r\n      &--disabled {\r\n        background-color: $grey_30;\r\n        border-color: $grey_45;\r\n        color: $grey_65;\r\n        cursor: not-allowed;\r\n      }\r\n\r\n      &:has(input:disabled) {\r\n        cursor: not-allowed;\r\n      }\r\n    }\r\n\r\n    &__label {\r\n      user-select: none;\r\n    }\r\n\r\n    // Size: Small\r\n    &--sm {\r\n      .sd-radio-button-group__option {\r\n        padding: 4px 12px;\r\n        font-size: 12px;\r\n        line-height: 20px;\r\n      }\r\n    }\r\n\r\n    // Size: Medium\r\n    &--md {\r\n      .sd-radio-button-group__option {\r\n        padding: 4px 20px;\r\n        font-size: 16px;\r\n        line-height: 26px;\r\n      }\r\n    }\r\n  }\r\n}\r\n","import { Component, Prop, h, EventEmitter, Event, State, Watch } from '@stencil/core';\r\n\r\nexport type RadioValue = string | number | boolean;\r\nexport type RadioOption = {\r\n  label: string;\r\n  value: RadioValue;\r\n  disabled?: boolean;\r\n};\r\n\r\n@Component({\r\n  tag: 'sd-radio-button-group',\r\n  styleUrl: 'sd-radio-button-group.scss',\r\n})\r\nexport class SdRadioButtonGroup {\r\n  @Prop({ mutable: true, reflect: true }) value!: RadioValue;\r\n\r\n  @Prop({ mutable: true }) radioOptions: RadioOption[] = [];\r\n\r\n  @Prop() size: 'sm' | 'md' = 'md';\r\n\r\n  @Prop() disabled: boolean = false;\r\n\r\n  @Prop() name?: string;\r\n\r\n  @State() private selectedValue!: RadioValue;\r\n\r\n  @Event()\r\n  sdChange!: EventEmitter<RadioValue>;\r\n\r\n  componentWillLoad() {\r\n    if (this.value !== undefined && this.value !== null) {\r\n      this.selectedValue = this.value;\r\n    }\r\n  }\r\n\r\n  @Watch('value')\r\n  valueChanged(newValue: RadioValue) {\r\n    this.selectedValue = newValue;\r\n  }\r\n\r\n  private handleRadioChange = (optionValue: RadioValue, optionDisabled?: boolean) => {\r\n    if (this.disabled || optionDisabled) return;\r\n    this.selectedValue = optionValue;\r\n    this.value = optionValue;\r\n    this.sdChange.emit(optionValue);\r\n  };\r\n\r\n  private isOptionSelected(option: RadioOption): boolean {\r\n    return this.selectedValue === option.value;\r\n  }\r\n\r\n  private isOptionDisabled(option: RadioOption): boolean {\r\n    return this.disabled || !!option.disabled;\r\n  }\r\n\r\n  private getButtonClasses(option: RadioOption): string {\r\n    const classes = [\r\n      'sd-radio-button-group__option',\r\n      this.isOptionSelected(option)\r\n        ? 'sd-radio-button-group__option--selected'\r\n        : 'sd-radio-button-group__option--unselected',\r\n    ];\r\n\r\n    if (this.isOptionDisabled(option)) {\r\n      classes.push('sd-radio-button-group__option--disabled');\r\n    }\r\n\r\n    return classes.join(' ');\r\n  }\r\n\r\n  private getGroupClasses(): string {\r\n    const classes = ['sd-radio-button-group', `sd-radio-button-group--${this.size}`];\r\n    return classes.join(' ');\r\n  }\r\n\r\n  render() {\r\n    const groupName = this.name || `sd-radio-button-group-${Math.random().toString(36).substring(2, 11)}`;\r\n\r\n    return (\r\n      <div class={this.getGroupClasses()} role=\"radiogroup\" aria-disabled={this.disabled.toString()}>\r\n        {this.radioOptions.map((option, index) => {\r\n          const isSelected = this.isOptionSelected(option);\r\n          const isDisabled = this.isOptionDisabled(option);\r\n\r\n          return (\r\n            <label\r\n              key={`radio-${index}`}\r\n              class={this.getButtonClasses(option)}\r\n              role=\"radio\"\r\n              aria-checked={isSelected.toString()}\r\n              aria-disabled={isDisabled.toString()}\r\n              aria-label={option.label || 'radio option'}\r\n            >\r\n              <input\r\n                type=\"radio\"\r\n                name={groupName}\r\n                value={option.value.toString()}\r\n                checked={isSelected}\r\n                disabled={isDisabled}\r\n                onInput={() => this.handleRadioChange(option.value, option.disabled)}\r\n              />\r\n              {option.label && <span class=\"sd-radio-button-group__label\">{option.label}</span>}\r\n            </label>\r\n          );\r\n        })}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/sd-radio-group.js

@@ -1,6 +1,6 @@
-import { p as proxyCustomElement, H, d as createEvent, h } from './p-TFWJruz2.js';
+import { p as proxyCustomElement, H, d as createEvent, h, t as transformTag } from './p-CQBrru3e.js';
 
-const sdRadioGroupCss = "sd-radio-group{display:inline-block}sd-radio-group .sd-radio-group{display:flex}sd-radio-group .sd-radio-group--vertical{flex-direction:column;gap:8px}sd-radio-group .sd-radio-group--horizontal{flex-direction:row;align-items:center;gap:20px}sd-radio-group .sd-radio-group__option{width:fit-content;display:flex;align-items:center;gap:8px;font-weight:400;font-size:12px;line-height:20px;cursor:pointer}sd-radio-group .sd-radio-group__option:has(input:disabled){cursor:default}sd-radio-group .sd-radio-group__option input{position:relative;appearance:none;margin:0;width:16px;height:16px;border:1px solid #888888;border-radius:50%;cursor:pointer;accent-color:#0075ff;background-color:white}sd-radio-group .sd-radio-group__option input:checked{border-color:#0075ff;background-color:white}sd-radio-group .sd-radio-group__option input:checked::before{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:10px;height:10px;border-radius:50%;background-color:#0075ff}sd-radio-group .sd-radio-group__option input:disabled{cursor:default;border-color:#cccccc;background-color:#eeeeee}sd-radio-group .sd-radio-group__option input:disabled:checked::before{background-color:#cccccc}sd-radio-group .sd-radio-group__option input:not(:disabled):hover{border-color:#0075ff;background-color:#d9eaff}sd-radio-group .sd-radio-group__label{font-size:12px;color:#333333;line-height:20px;user-select:none}sd-radio-group .sd-radio-group__option--disabled .sd-radio-group__label{color:#888888}";
+const sdRadioGroupCss = () => `sd-radio-group{display:inline-block}sd-radio-group .sd-radio-group{display:flex}sd-radio-group .sd-radio-group--vertical{flex-direction:column;gap:8px}sd-radio-group .sd-radio-group--horizontal{flex-direction:row;align-items:center;gap:20px}sd-radio-group .sd-radio-group__option{width:fit-content;display:flex;align-items:center;gap:8px;font-weight:400;font-size:12px;line-height:20px;cursor:pointer}sd-radio-group .sd-radio-group__option:has(input:disabled){cursor:default}sd-radio-group .sd-radio-group__option input{position:relative;appearance:none;margin:0;width:16px;height:16px;border:1px solid #888888;border-radius:50%;cursor:pointer;accent-color:#0075ff;background-color:white}sd-radio-group .sd-radio-group__option input:checked{border-color:#0075ff;background-color:white}sd-radio-group .sd-radio-group__option input:checked::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:10px;height:10px;border-radius:50%;background-color:#0075ff}sd-radio-group .sd-radio-group__option input:disabled{cursor:default;border-color:#cccccc;background-color:#eeeeee}sd-radio-group .sd-radio-group__option input:disabled:checked::before{background-color:#cccccc}sd-radio-group .sd-radio-group__option input:not(:disabled):hover{border-color:#0075ff;background-color:#d9eaff}sd-radio-group .sd-radio-group__label{font-size:12px;color:#333333;line-height:20px;user-select:none}sd-radio-group .sd-radio-group__option--disabled .sd-radio-group__label{color:#888888}`;
 
 const SdRadioGroup$1 = /*@__PURE__*/ proxyCustomElement(class SdRadioGroup extends H {
     constructor(registerHost) {
@@ -56,7 +56,7 @@ const SdRadioGroup$1 = /*@__PURE__*/ proxyCustomElement(class SdRadioGroup exten
     }
     render() {
         const groupName = this.name || `sd-radio-group-${Math.random().toString(36).substring(2, 11)}`;
-        return (h("div", { key: 'f817ced0e784c418c09c6c3e1cd6d9e045d32598', class: this.getGroupClasses(), role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.radioOptions.map((option, index) => {
+        return (h("div", { key: '41a5801484b12c0688d34d7225b07ce4ac8073fa', class: this.getGroupClasses(), role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.radioOptions.map((option, index) => {
             const isSelected = this.isOptionSelected(option);
             const isDisabled = this.isOptionDisabled(option);
             return (h("label", { key: `radio-${index}`, class: this.getRadioClasses(option), role: "radio", "aria-checked": isSelected.toString(), "aria-disabled": isDisabled.toString(), "aria-label": option.label || 'radio option' }, h("input", { type: "radio", name: groupName, value: option.value.toString(), checked: isSelected, disabled: isDisabled, onInput: () => this.handleRadioChange(option.value, option.disabled) }), option.label && h("span", { class: "sd-radio-group__label" }, option.label)));
@@ -65,7 +65,7 @@ const SdRadioGroup$1 = /*@__PURE__*/ proxyCustomElement(class SdRadioGroup exten
     static get watchers() { return {
         "value": ["valueChanged"]
     }; }
-    static get style() { return sdRadioGroupCss; }
+    static get style() { return sdRadioGroupCss(); }
 }, [768, "sd-radio-group", {
         "value": [1544],
         "radioOptions": [1040],
@@ -83,8 +83,8 @@ function defineCustomElement$1() {
     const components = ["sd-radio-group"];
     components.forEach(tagName => { switch (tagName) {
         case "sd-radio-group":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SdRadioGroup$1);
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), SdRadioGroup$1);
             }
             break;
     } });

package/dist/components/sd-radio-group.js.map

@@ -1 +1 @@
-{"file":"sd-radio-group.js","mappings":"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","names":["SdRadioGroup","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-radio-group/sd-radio-group.scss?tag=sd-radio-group","src/components/sd-radio-group/sd-radio-group.tsx"],"sourcesContent":["@import 'variables';\r\n\r\nsd-radio-group {\r\n display: inline-block;\r\n\r\n .sd-radio-group {\r\n  display: flex;\r\n\r\n  &--vertical {\r\n   flex-direction: column;\r\n   gap: 8px;\r\n  }\r\n\r\n  &--horizontal {\r\n   flex-direction: row;\r\n   align-items: center;\r\n   gap: 20px;\r\n  }\r\n\r\n  &__option {\r\n   width: fit-content;\r\n   display: flex;\r\n   align-items: center;\r\n   gap: 8px;\r\n   font-weight: 400;\r\n   font-size: 12px;\r\n   line-height: 20px;\r\n   cursor: pointer;\r\n\r\n   &:has(input:disabled) {\r\n    cursor: default;\r\n   }\r\n\r\n   input {\r\n    position: relative;\r\n    appearance: none;\r\n    margin: 0;\r\n    width: 16px;\r\n    height: 16px;\r\n    border: 1px solid $grey_65;\r\n    border-radius: 50%;\r\n    cursor: pointer;\r\n    accent-color: $brilliantblue_75;\r\n    background-color: white;\r\n\r\n    &:checked {\r\n     border-color: $brilliantblue_75;\r\n     background-color: white;\r\n    }\r\n\r\n    &:checked::before {\r\n     content: '';\r\n     position: absolute;\r\n     top: 50%;\r\n     left: 50%;\r\n     transform: translate(-50%, -50%);\r\n     width: 10px;\r\n     height: 10px;\r\n     border-radius: 50%;\r\n     background-color: $brilliantblue_75;\r\n    }\r\n\r\n    &:disabled {\r\n     cursor: default;\r\n     border-color: $grey_45;\r\n     background-color: $grey_20;\r\n    }\r\n\r\n    &:disabled:checked::before {\r\n     background-color: $grey_45;\r\n    }\r\n\r\n    &:not(:disabled):hover {\r\n     border-color: $brilliantblue_75;\r\n     background-color: $brilliantblue_25;\r\n    }\r\n   }\r\n  }\r\n\r\n  &__label {\r\n   font-size: 12px;\r\n   color: $grey_90;\r\n   line-height: 20px;\r\n   user-select: none;\r\n  }\r\n\r\n  &__option--disabled {\r\n   .sd-radio-group__label {\r\n    color: $grey_65;\r\n   }\r\n  }\r\n }\r\n}","import { Component, Prop, h, EventEmitter, Event, State, Watch } from '@stencil/core';\r\n\r\nexport type RadioValue = string | number | boolean;\r\nexport type RadioOption = {\r\n label: string;\r\n value: RadioValue;\r\n disabled?: boolean;\r\n};\r\n\r\n@Component({\r\n tag: 'sd-radio-group',\r\n styleUrl: 'sd-radio-group.scss',\r\n})\r\nexport class SdRadioGroup {\r\n @Prop({ mutable: true, reflect: true }) value!: RadioValue;\r\n\r\n @Prop({ mutable: true }) radioOptions: RadioOption[] = [];\r\n\r\n @Prop() direction: 'horizonal' | 'vertical' = 'vertical';\r\n\r\n @Prop() disabled: boolean = false;\r\n\r\n @Prop() name?: string;\r\n\r\n @State() private selectedValue!: RadioValue;\r\n\r\n @Event()\r\n sdChange!: EventEmitter<RadioValue>;\r\n\r\n componentWillLoad() {\r\n  if (this.value) {\r\n   this.selectedValue = this.value;\r\n  }\r\n }\r\n\r\n @Watch('value')\r\n valueChanged(newValue: RadioValue) {\r\n  this.selectedValue = newValue;\r\n }\r\n\r\n private handleRadioChange = (optionValue: RadioValue, optionDisabled?: boolean) => {\r\n  if (this.disabled || optionDisabled) return;\r\n  this.selectedValue = optionValue;\r\n  this.value = optionValue;\r\n  this.sdChange.emit(optionValue);\r\n };\r\n\r\n private isOptionSelected(option: RadioOption): boolean {\r\n  return this.selectedValue === option.value;\r\n }\r\n\r\n private isOptionDisabled(option: RadioOption): boolean {\r\n  return this.disabled || !!option.disabled;\r\n }\r\n\r\n private getRadioClasses(option: RadioOption): string {\r\n  const classes = [\r\n   'sd-radio-group__option',\r\n   this.isOptionSelected(option)\r\n    ? 'sd-radio-group__option--selected'\r\n    : 'sd-radio-group__option--unselected',\r\n  ];\r\n\r\n  if (this.isOptionDisabled(option)) {\r\n   classes.push('sd-radio-group__option--disabled');\r\n  }\r\n\r\n  return classes.join(' ');\r\n }\r\n\r\n private getGroupClasses(): string {\r\n  const classes = ['sd-radio-group', `sd-radio-group--${this.direction}`];\r\n  return classes.join(' ');\r\n }\r\n\r\n render() {\r\n  const groupName = this.name || `sd-radio-group-${Math.random().toString(36).substring(2, 11)}`;\r\n\r\n  return (\r\n   <div class={this.getGroupClasses()} role=\"radiogroup\" aria-disabled={this.disabled.toString()}>\r\n    {this.radioOptions.map((option, index) => {\r\n     const isSelected = this.isOptionSelected(option);\r\n     const isDisabled = this.isOptionDisabled(option);\r\n\r\n     return (\r\n      <label\r\n       key={`radio-${index}`}\r\n       class={this.getRadioClasses(option)}\r\n       role=\"radio\"\r\n       aria-checked={isSelected.toString()}\r\n       aria-disabled={isDisabled.toString()}\r\n       aria-label={option.label || 'radio option'}\r\n      >\r\n       <input\r\n        type=\"radio\"\r\n        name={groupName}\r\n        value={option.value.toString()}\r\n        checked={isSelected}\r\n        disabled={isDisabled}\r\n        onInput={() => this.handleRadioChange(option.value, option.disabled)}\r\n       />\r\n       {option.label && <span class=\"sd-radio-group__label\">{option.label}</span>}\r\n      </label>\r\n     );\r\n    })}\r\n   </div>\r\n  );\r\n }\r\n}\r\n"],"version":3}
+{"file":"sd-radio-group.js","mappings":"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","names":["SdRadioGroup","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-radio-group/sd-radio-group.scss?tag=sd-radio-group","src/components/sd-radio-group/sd-radio-group.tsx"],"sourcesContent":["@import 'variables';\r\n\r\nsd-radio-group {\r\n display: inline-block;\r\n\r\n .sd-radio-group {\r\n  display: flex;\r\n\r\n  &--vertical {\r\n   flex-direction: column;\r\n   gap: 8px;\r\n  }\r\n\r\n  &--horizontal {\r\n   flex-direction: row;\r\n   align-items: center;\r\n   gap: 20px;\r\n  }\r\n\r\n  &__option {\r\n   width: fit-content;\r\n   display: flex;\r\n   align-items: center;\r\n   gap: 8px;\r\n   font-weight: 400;\r\n   font-size: 12px;\r\n   line-height: 20px;\r\n   cursor: pointer;\r\n\r\n   &:has(input:disabled) {\r\n    cursor: default;\r\n   }\r\n\r\n   input {\r\n    position: relative;\r\n    appearance: none;\r\n    margin: 0;\r\n    width: 16px;\r\n    height: 16px;\r\n    border: 1px solid $grey_65;\r\n    border-radius: 50%;\r\n    cursor: pointer;\r\n    accent-color: $brilliantblue_75;\r\n    background-color: white;\r\n\r\n    &:checked {\r\n     border-color: $brilliantblue_75;\r\n     background-color: white;\r\n    }\r\n\r\n    &:checked::before {\r\n     content: '';\r\n     position: absolute;\r\n     top: 50%;\r\n     left: 50%;\r\n     transform: translate(-50%, -50%);\r\n     width: 10px;\r\n     height: 10px;\r\n     border-radius: 50%;\r\n     background-color: $brilliantblue_75;\r\n    }\r\n\r\n    &:disabled {\r\n     cursor: default;\r\n     border-color: $grey_45;\r\n     background-color: $grey_20;\r\n    }\r\n\r\n    &:disabled:checked::before {\r\n     background-color: $grey_45;\r\n    }\r\n\r\n    &:not(:disabled):hover {\r\n     border-color: $brilliantblue_75;\r\n     background-color: $brilliantblue_25;\r\n    }\r\n   }\r\n  }\r\n\r\n  &__label {\r\n   font-size: 12px;\r\n   color: $grey_90;\r\n   line-height: 20px;\r\n   user-select: none;\r\n  }\r\n\r\n  &__option--disabled {\r\n   .sd-radio-group__label {\r\n    color: $grey_65;\r\n   }\r\n  }\r\n }\r\n}","import { Component, Prop, h, EventEmitter, Event, State, Watch } from '@stencil/core';\r\n\r\nexport type RadioValue = string | number | boolean;\r\nexport type RadioOption = {\r\n label: string;\r\n value: RadioValue;\r\n disabled?: boolean;\r\n};\r\n\r\n@Component({\r\n tag: 'sd-radio-group',\r\n styleUrl: 'sd-radio-group.scss',\r\n})\r\nexport class SdRadioGroup {\r\n @Prop({ mutable: true, reflect: true }) value!: RadioValue;\r\n\r\n @Prop({ mutable: true }) radioOptions: RadioOption[] = [];\r\n\r\n @Prop() direction: 'horizonal' | 'vertical' = 'vertical';\r\n\r\n @Prop() disabled: boolean = false;\r\n\r\n @Prop() name?: string;\r\n\r\n @State() private selectedValue!: RadioValue;\r\n\r\n @Event()\r\n sdChange!: EventEmitter<RadioValue>;\r\n\r\n componentWillLoad() {\r\n  if (this.value) {\r\n   this.selectedValue = this.value;\r\n  }\r\n }\r\n\r\n @Watch('value')\r\n valueChanged(newValue: RadioValue) {\r\n  this.selectedValue = newValue;\r\n }\r\n\r\n private handleRadioChange = (optionValue: RadioValue, optionDisabled?: boolean) => {\r\n  if (this.disabled || optionDisabled) return;\r\n  this.selectedValue = optionValue;\r\n  this.value = optionValue;\r\n  this.sdChange.emit(optionValue);\r\n };\r\n\r\n private isOptionSelected(option: RadioOption): boolean {\r\n  return this.selectedValue === option.value;\r\n }\r\n\r\n private isOptionDisabled(option: RadioOption): boolean {\r\n  return this.disabled || !!option.disabled;\r\n }\r\n\r\n private getRadioClasses(option: RadioOption): string {\r\n  const classes = [\r\n   'sd-radio-group__option',\r\n   this.isOptionSelected(option)\r\n    ? 'sd-radio-group__option--selected'\r\n    : 'sd-radio-group__option--unselected',\r\n  ];\r\n\r\n  if (this.isOptionDisabled(option)) {\r\n   classes.push('sd-radio-group__option--disabled');\r\n  }\r\n\r\n  return classes.join(' ');\r\n }\r\n\r\n private getGroupClasses(): string {\r\n  const classes = ['sd-radio-group', `sd-radio-group--${this.direction}`];\r\n  return classes.join(' ');\r\n }\r\n\r\n render() {\r\n  const groupName = this.name || `sd-radio-group-${Math.random().toString(36).substring(2, 11)}`;\r\n\r\n  return (\r\n   <div class={this.getGroupClasses()} role=\"radiogroup\" aria-disabled={this.disabled.toString()}>\r\n    {this.radioOptions.map((option, index) => {\r\n     const isSelected = this.isOptionSelected(option);\r\n     const isDisabled = this.isOptionDisabled(option);\r\n\r\n     return (\r\n      <label\r\n       key={`radio-${index}`}\r\n       class={this.getRadioClasses(option)}\r\n       role=\"radio\"\r\n       aria-checked={isSelected.toString()}\r\n       aria-disabled={isDisabled.toString()}\r\n       aria-label={option.label || 'radio option'}\r\n      >\r\n       <input\r\n        type=\"radio\"\r\n        name={groupName}\r\n        value={option.value.toString()}\r\n        checked={isSelected}\r\n        disabled={isDisabled}\r\n        onInput={() => this.handleRadioChange(option.value, option.disabled)}\r\n       />\r\n       {option.label && <span class=\"sd-radio-group__label\">{option.label}</span>}\r\n      </label>\r\n     );\r\n    })}\r\n   </div>\r\n  );\r\n }\r\n}\r\n"],"version":3}