@sellmate/design-system 1.0.0 → 1.0.1

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

@@ -4,52 +4,24 @@ export class SdRadioGroup {
     radioOptions = [];
     direction = 'vertical';
     disabled = false;
-    name;
-    selectedValue;
+    groupName;
     change;
-    componentWillLoad() {
-        if (this.value) {
-            this.selectedValue = this.value;
-        }
-    }
     valueChanged(newValue) {
-        this.selectedValue = newValue;
+        this.value = newValue;
     }
-    handleRadioChange = (optionValue, optionDisabled) => {
-        if (this.disabled || optionDisabled)
+    handleRadioChange = (optionValue) => {
+        if (this.disabled)
             return;
-        this.selectedValue = optionValue;
         this.value = optionValue;
-        this.change.emit(optionValue);
+        this.change?.emit(optionValue);
     };
-    isOptionSelected(option) {
-        return this.selectedValue === option.value;
-    }
-    isOptionDisabled(option) {
-        return this.disabled || !!option.disabled;
-    }
-    getRadioClasses(option) {
-        const classes = [
-            'sd-radio-group__option',
-            this.isOptionSelected(option)
-                ? 'sd-radio-group__option--selected'
-                : 'sd-radio-group__option--unselected',
-        ];
-        if (this.isOptionDisabled(option)) {
-            classes.push('sd-radio-group__option--disabled');
-        }
-        return classes.join(' ');
-    }
     getGroupClasses() {
         const classes = ['sd-radio-group', `sd-radio-group--${this.direction}`];
         return classes.join(' ');
     }
     render() {
-        const groupName = this.name || `sd-radio-group-${Math.random().toString(36).substring(2, 11)}`;
-        return (h("div", { key: '9599dded7410ed41178f6cbf93aa24897cc9b030', class: this.getGroupClasses(), role: "radiogroup" }, 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)));
+        return (h("div", { key: '264fed43fa10c8869762dab2b0530989e7901178', class: this.getGroupClasses(), role: "radiogroup" }, this.radioOptions.map(option => {
+            return (h("sd-radio", { key: `radio-${option.value}`, val: String(option.value), value: this.value, label: option.label, disabled: this.disabled || !!option.disabled, onSdUpdate: ({ detail }) => this.handleRadioChange(detail) }));
         })));
     }
     static get is() { return "sd-radio-group"; }
@@ -73,9 +45,9 @@ export class SdRadioGroup {
                     "resolved": "boolean | number | string",
                     "references": {
                         "RadioValue": {
-                            "location": "local",
-                            "path": "/Users/meijing/Documents/sellmate/frontend/design-system/packages/stencil/src/components/sd-radio-group/sd-radio-group.tsx",
-                            "id": "src/components/sd-radio-group/sd-radio-group.tsx::RadioValue"
+                            "location": "import",
+                            "path": "../sd-radio/sd-radio",
+                            "id": "src/components/sd-radio/sd-radio.tsx::RadioValue"
                         }
                     }
                 },
@@ -118,8 +90,8 @@ export class SdRadioGroup {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'horizonal' | 'vertical'",
-                    "resolved": "\"horizonal\" | \"vertical\"",
+                    "original": "'horizontal' | 'vertical'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
                     "references": {}
                 },
                 "required": false,
@@ -154,7 +126,7 @@ export class SdRadioGroup {
                 "attribute": "disabled",
                 "defaultValue": "false"
             },
-            "name": {
+            "groupName": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -171,15 +143,10 @@ export class SdRadioGroup {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "name"
+                "attribute": "group-name"
             }
         };
     }
-    static get states() {
-        return {
-            "selectedValue": {}
-        };
-    }
     static get events() {
         return [{
                 "method": "change",
@@ -196,9 +163,9 @@ export class SdRadioGroup {
                     "resolved": "boolean | number | string",
                     "references": {
                         "RadioValue": {
-                            "location": "local",
-                            "path": "/Users/meijing/Documents/sellmate/frontend/design-system/packages/stencil/src/components/sd-radio-group/sd-radio-group.tsx",
-                            "id": "src/components/sd-radio-group/sd-radio-group.tsx::RadioValue"
+                            "location": "import",
+                            "path": "../sd-radio/sd-radio",
+                            "id": "src/components/sd-radio/sd-radio.tsx::RadioValue"
                         }
                     }
                 }

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

@@ -1 +1 @@
-{"version":3,"file":"sd-radio-group.js","sourceRoot":"","sources":["../../../src/components/sd-radio-group/sd-radio-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, EventEmitter, Event, State, Watch } from '@stencil/core';\n\nexport type RadioValue = string | number | boolean;\nexport type RadioOption = {\n label: string;\n value: RadioValue;\n disabled?: boolean;\n};\n\n@Component({\n tag: 'sd-radio-group',\n styleUrl: 'sd-radio-group.scss',\n})\nexport class SdRadioGroup {\n @Prop({ mutable: true, reflect: true }) value!: RadioValue;\n\n @Prop({ mutable: true }) radioOptions: RadioOption[] = [];\n\n @Prop() direction: 'horizonal' | 'vertical' = 'vertical';\n\n @Prop() disabled: boolean = false;\n\n @Prop() name?: string;\n\n @State() private selectedValue!: RadioValue;\n\n @Event({ eventName: 'sdUpdate' })\n change!: EventEmitter<RadioValue>;\n\n componentWillLoad() {\n  if (this.value) {\n   this.selectedValue = this.value;\n  }\n }\n\n @Watch('value')\n valueChanged(newValue: RadioValue) {\n  this.selectedValue = newValue;\n }\n\n private handleRadioChange = (optionValue: RadioValue, optionDisabled?: boolean) => {\n  if (this.disabled || optionDisabled) return;\n  this.selectedValue = optionValue;\n  this.value = optionValue;\n  this.change.emit(optionValue);\n };\n\n private isOptionSelected(option: RadioOption): boolean {\n  return this.selectedValue === option.value;\n }\n\n private isOptionDisabled(option: RadioOption): boolean {\n  return this.disabled || !!option.disabled;\n }\n\n private getRadioClasses(option: RadioOption): string {\n  const classes = [\n   'sd-radio-group__option',\n   this.isOptionSelected(option)\n    ? 'sd-radio-group__option--selected'\n    : 'sd-radio-group__option--unselected',\n  ];\n\n  if (this.isOptionDisabled(option)) {\n   classes.push('sd-radio-group__option--disabled');\n  }\n\n  return classes.join(' ');\n }\n\n private getGroupClasses(): string {\n  const classes = ['sd-radio-group', `sd-radio-group--${this.direction}`];\n  return classes.join(' ');\n }\n\n render() {\n  const groupName = this.name || `sd-radio-group-${Math.random().toString(36).substring(2, 11)}`;\n\n  return (\n   <div\n    class={this.getGroupClasses()}\n    role=\"radiogroup\"\n    // aria-disabled={this.disabled.toString()}\n   >\n    {this.radioOptions.map((option, index) => {\n     const isSelected = this.isOptionSelected(option);\n     const isDisabled = this.isOptionDisabled(option);\n\n     return (\n      <label\n       key={`radio-${index}`}\n       class={this.getRadioClasses(option)}\n       role=\"radio\"\n       aria-checked={isSelected.toString()}\n       aria-disabled={isDisabled.toString()}\n       aria-label={option.label || 'radio option'}\n      >\n       <input\n        type=\"radio\"\n        name={groupName}\n        value={option.value.toString()}\n        checked={isSelected}\n        disabled={isDisabled}\n        onInput={() => this.handleRadioChange(option.value, option.disabled)}\n       />\n       {option.label && <span class=\"sd-radio-group__label\">{option.label}</span>}\n      </label>\n     );\n    })}\n   </div>\n  );\n }\n}\n"]}
+{"version":3,"file":"sd-radio-group.js","sourceRoot":"","sources":["../../../src/components/sd-radio-group/sd-radio-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAgB,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAa/E,MAAM,OAAO,YAAY;IACgB,KAAK,CAAc;IAElC,YAAY,GAAkB,EAAE,CAAC;IAElD,SAAS,GAA8B,UAAU,CAAC;IAElD,QAAQ,GAAY,KAAK,CAAC;IAE1B,SAAS,CAAU;IAG3B,MAAM,CAA4B;IAGlC,YAAY,CAAC,QAAoB;QAChC,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;IACvB,CAAC;IAEO,iBAAiB,GAAG,CAAC,WAAuB,EAAE,EAAE;QACvD,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAE1B,IAAI,CAAC,KAAK,GAAG,WAAW,CAAC;QACzB,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;IAChC,CAAC,CAAC;IAEM,eAAe;QACtB,MAAM,OAAO,GAAG,CAAC,gBAAgB,EAAE,mBAAmB,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC;QACxE,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC1B,CAAC;IAED,MAAM;QACL,OAAO,CACN,4DAAK,KAAK,EAAE,IAAI,CAAC,eAAe,EAAE,EAAE,IAAI,EAAC,YAAY,IACnD,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;YAC/B,OAAO,CACN,gBACC,GAAG,EAAE,SAAS,MAAM,CAAC,KAAK,EAAE,EAC5B,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,EACzB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,CAAC,MAAM,CAAC,QAAQ,EAC5C,UAAU,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,GACzD,CACF,CAAC;QACH,CAAC,CAAC,CACG,CACN,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Prop, h, EventEmitter, Event, Watch } from '@stencil/core';\nimport { RadioValue } from '../sd-radio/sd-radio';\n\nexport type RadioOption = {\n label: string;\n value: RadioValue;\n disabled?: boolean;\n};\n\n@Component({\n tag: 'sd-radio-group',\n styleUrl: 'sd-radio-group.scss',\n})\nexport class SdRadioGroup {\n @Prop({ mutable: true, reflect: true }) value!: RadioValue;\n\n @Prop({ mutable: true }) radioOptions: RadioOption[] = [];\n\n @Prop() direction: 'horizontal' | 'vertical' = 'vertical';\n\n @Prop() disabled: boolean = false;\n\n @Prop() groupName?: string;\n\n @Event({ eventName: 'sdUpdate' })\n change!: EventEmitter<RadioValue>;\n\n @Watch('value')\n valueChanged(newValue: RadioValue) {\n  this.value = newValue;\n }\n\n private handleRadioChange = (optionValue: RadioValue) => {\n  if (this.disabled) return;\n\n  this.value = optionValue;\n  this.change?.emit(optionValue);\n };\n\n private getGroupClasses(): string {\n  const classes = ['sd-radio-group', `sd-radio-group--${this.direction}`];\n  return classes.join(' ');\n }\n\n render() {\n  return (\n   <div class={this.getGroupClasses()} role=\"radiogroup\">\n    {this.radioOptions.map(option => {\n     return (\n      <sd-radio\n       key={`radio-${option.value}`}\n       val={String(option.value)}\n       value={this.value}\n       label={option.label}\n       disabled={this.disabled || !!option.disabled}\n       onSdUpdate={({ detail }) => this.handleRadioChange(detail)}\n      />\n     );\n    })}\n   </div>\n  );\n }\n}\n"]}

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

@@ -144,10 +144,10 @@ export class SdSelectDropdown {
         this.isScrolled = scrollTop > 0;
     };
     render() {
-        return (h(Host, { key: 'de06f67bf93dce6db12fee6bce3c6b11b7ee375f', style: this.dropdownSize }, h("div", { key: '42510dd6a21f1aa224f5141555c02729d09a6baf', class: {
+        return (h(Host, { key: 'bfb74ca8fece27f39c48185cd087ee1efaf52cd9', style: this.dropdownSize }, h("div", { key: 'c1c9f7cf52432c48e080969d2324676310d7e7f9', class: {
                 'sd-select-dropdown': true,
                 'sd-select-dropdown--ready': this.isDropdownReady,
-            }, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (h("sd-select-search-input", { key: '2177a7ad0dc3ea5ded63103a55e03b9b0d4d3913', ref: el => (this.searchRef = el), isScrolled: this.isScrolled, searchText: this.searchText, onSdSearchInput: (event) => (this.searchText = event.detail || ''), onSdSearchFocus: () => (this.itemIndex = -1) })), this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index) => (h("slot", { name: `option-${option.value}` }, h("sd-select-option", { option: option, index: index, isSelected: this.isOptionSelected(option.value), isFocused: index === this.itemIndex, onOptionClick: ({ detail }) => this.optionClick.emit(detail), useCheckbox: this.useCheckbox }))))) : (h("slot", { name: "option-placeholder" }, h("div", { class: 'sd-select-option-placeholder' }, this.optionPlaceholder))))));
+            }, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (h("sd-select-search-input", { key: 'c5d42ef925fba369b5b0361b7327fa3a1954d602', ref: el => (this.searchRef = el), isScrolled: this.isScrolled, searchText: this.searchText, onSdSearchInput: (event) => (this.searchText = event.detail || ''), onSdSearchFocus: () => (this.itemIndex = -1) })), this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index) => (h("slot", { name: `option-${option.value}` }, h("sd-select-option", { option: option, index: index, isSelected: this.isOptionSelected(option.value), isFocused: index === this.itemIndex, onOptionClick: ({ detail }) => this.optionClick.emit(detail), useCheckbox: this.useCheckbox }))))) : (h("slot", { name: "option-placeholder" }, h("div", { class: 'sd-select-option-placeholder' }, this.optionPlaceholder))))));
     }
     static get is() { return "sd-select-dropdown"; }
     static get originalStyleUrls() {

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

@@ -24,7 +24,7 @@ export class SdSelectOption {
         }
     };
     render() {
-        return (h(Host, { key: '33542be792e3345ee693a6064f9398ecd1fceda1' }, h("div", { key: '408d402f5e4a845ebb896f78a557ac93ca414eaa', class: {
+        return (h(Host, { key: '8324a5b292d922c4ba1104fe245863321fd222d4' }, h("div", { key: 'ead9b6abf8193019d3f97dd5a1ea67ea9a735c01', class: {
                 'sd-select__option': true,
                 'sd-select__option--selected': this.isSelected,
                 'sd-select__option--disabled': !!this.option.disabled,

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

@@ -16,17 +16,17 @@ export class SdSelectSearchInput {
         input?.focus({ preventScroll: true });
     }
     render() {
-        return (h("div", { key: '199b6bdb1da143241f5e2cf797cc0f484b38aac0', class: {
+        return (h("div", { key: '82fd2b838c46c47b51b93a23e5a837708fb944b1', class: {
                 'sd-select-search-input': true,
                 'sd-select-search-input--scrolled': !!this.isScrolled,
-            }, onClick: event => event.stopPropagation() }, h("sd-input", { key: 'c768d0a2324f3ea40cff3eb049ddfad3cddcb882', ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdUpdate: event => {
+            }, onClick: event => event.stopPropagation() }, h("sd-input", { key: 'fc0821ce63f445bed3dfce51668ece1831914f86', ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdUpdate: event => {
                 this.searchInput.emit(String(event?.detail));
             }, onSdFocus: () => {
                 this.searchFocus.emit();
             }, onKeyDown: event => {
                 if (event.code === 'Enter')
                     event.stopPropagation();
-            } }, h("sd-icon", { key: '21062cf3032b5488487b61a08753de01a5de7b98', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
+            } }, h("sd-icon", { key: '6a9b19f5910132be045e3a2cc33546307e3d5cb9', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
     }
     static get is() { return "sd-select-search-input"; }
     static get originalStyleUrls() {

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

@@ -137,7 +137,7 @@ export class SdSelect extends BaseDropdownEvent {
         }
     };
     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,

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

@@ -146,7 +146,7 @@ export class SdSelectMultiple extends BaseDropdownEvent {
         this.handleOptionSelection(option);
     };
     render() {
-        return (h("sd-field", { key: 'cc40c09b8c1ea2aa049d12857c6cc80cd5a5966b', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, useLabelRequired: this.useLabelRequired, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, h("div", { key: '0d90b8368287d7e67a384234a976da5d387b065b', class: {
+        return (h("sd-field", { key: '67a0bebbd4ad8ae405db1c9c1d0b9701a9b904f8', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, useLabelRequired: this.useLabelRequired, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, h("div", { key: 'aa86839508c103bbe70287877020ec3eb82b7190', class: {
                 'sd-select-multiple': true,
                 'sd-select-multiple--open': this.isOpen,
                 'sd-select-multiple--disabled': this.disabled,

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

@@ -388,7 +388,7 @@ export class SdSelectMultipleGroup extends BaseDropdownEvent {
         });
     }
     render() {
-        return (h("sd-field", { key: '7ec71405f801265b0abf2d381491a65454c540cd', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, useLabelRequired: this.useLabelRequired, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, h("div", { key: '80c1db9cd2c47e4acfece06a9b23896cc0acef88', class: {
+        return (h("sd-field", { key: 'd809854ea5ad2aeebe2c6ffbedba19d6b62bb7be', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, useLabelRequired: this.useLabelRequired, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, h("div", { key: '9db18413433f62c0530c6189cbcd6e11e12fc8ae', class: {
                 'sd-select-multiple-group': true,
                 'sd-select-multiple-group--open': this.isOpen,
                 'sd-select-multiple-group--disabled': this.disabled,

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

@@ -39,7 +39,7 @@ export class SdSelectOptionGroup {
         }
     };
     render() {
-        return (h("div", { key: '9ba2c1d9963ae5b20d8823ed4e1054f4b1ea1164', class: {
+        return (h("div", { key: 'd9b8a7728bd175b90cf39a8d293ab86010e39302', class: {
                 'sd-select__option-group': true,
                 'sd-select__option-group--selected': !!this.isSelected,
                 'sd-select__option-group--disabled': !!this.option.disabled,
@@ -48,10 +48,10 @@ export class SdSelectOptionGroup {
                 'sd-select__option-group--group': this.option.type === 'group',
                 'sd-select__option-group--subgroup': this.option.type === 'subgroup',
                 'sd-select__option-group--item': this.option.type === 'item',
-            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, h("div", { key: '6576ff206863a28062566b816cd81955f1890ec2', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (h("sd-checkbox", { key: 'ad1367ec16aff35a09bc1ca62d4981a29ad0c20e', value: this.isSelected, disabled: this.option.disabled, onClick: e => {
+            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, h("div", { key: '9c4d02a88c42f2cd7c84bf9a44bc871bb021a26b', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (h("sd-checkbox", { key: '7a40633ffff063a0a75359127a1ccd4d86b4a163', value: this.isSelected, disabled: this.option.disabled, onClick: e => {
                 e.preventDefault();
                 this.handleClick(this.option, this.isSelected, e);
-            } })), h("span", { key: 'a51e3950353966056edd756259d3224bd588c78b', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (h("span", { key: 'ed003ff2d7616096a4759b253718e5fc5a09c007', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
+            } })), h("span", { key: '825638fd80e7cc41b7c0ba7af39b34df453ef729', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (h("span", { key: 'fe7149a3e3a8bc94bf434b065133ba26a1698778', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
     }
     static get is() { return "sd-select-option-group"; }
     static get originalStyleUrls() {

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

@@ -636,16 +636,16 @@ export class SdTable {
             }, "aria-hidden": "true" }, h("div", { class: "sd-table__skeleton-cell" })));
     }
     render() {
-        return (h(Host, { key: 'e6ec01e7493b69bab1bf2766d9c322cee388b274' }, h("div", { key: 'cc717d111a6ce64c34b6a23b1feb9cc8933a0438', class: "sd-table__wrapper", style: {
+        return (h(Host, { key: 'd9944a23c05504be55e6ac1926c0982967ea26c3' }, h("div", { key: 'ab16b21be017394b9be38c65c31ffafcfb5d1699', class: "sd-table__wrapper", style: {
                 '--table-width': this.width,
                 '--table-height': this.height,
-            } }, h("div", { key: '0c89a798a475bb25c10c5959b5e50c81f01503c4', class: "sd-table__container", style: {
+            } }, h("div", { key: 'fe5bc2a359a2c100432213679e897b01b5c14c52', class: "sd-table__container", style: {
                 '--table-container-height': `calc(${this.height} - ${this.pagination && this.innerRows.length > 0 ? 48 : 0}px)`,
-            } }, h("div", { key: 'e83ee499928d95e719ffca0411a422deeed162d0', class: {
+            } }, h("div", { key: '61a7e17e93ce3427c65fc9e3dece30838720640d', class: {
                 'sd-table__middle': true,
                 'sd-table__middle--scrollable': this.paginatedRows.length > 0,
                 'sd-table__middle--loading': this.isLoading,
-            } }, this.isLoading && (h("div", { key: '30d8283122a21484e0029128e637fdd9a5c6ae8c', class: "sd-table__middle--loading__spinner" }, h("sd-loading-spinner", { key: '92911a08fa4d0776712e8c30be2f16d59d512cbc' }))), h("table", { key: '209eb39f61bb46e9027046be619da492be2b080e', part: "table", class: this.sdTableClasses }, this.renderHead(), this.renderBody())), !this.paginatedRows.length && (h("div", { key: 'cb1fccb96bb51a4e14d40c2ff286f17d8bc8ce11', class: "sd-table__bottom" }, h("div", { key: '9149ee50257114145d14e0666239f72dcfc5b01a', class: "sd-table__no-data" }, h("slot", { key: 'a5ead23bc5a2e32418473f6f6737f3b156177842', name: "no-data" }, this.noDataLabel))))), this.pagination && this.innerRows.length > 0 && (h("div", { key: 'd5482e1bb04d20579a88841bf8d885d08c1593b1', class: "sd-table__pagination" }, h("sd-pagination", { key: '65425eff37a1f2c1add27b8923cd86fe8d98ba98', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (h("sd-select", { key: 'dfb3ba8654e33dc334392f37189f422d6a1f1416', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdUpdate: (e) => this.changeRowsPerPage(e.detail.value) })))))));
+            } }, this.isLoading && (h("div", { key: 'ad87480a5c5e62330fe21a03d16b4d2c61f144dc', class: "sd-table__middle--loading__spinner" }, h("sd-loading-spinner", { key: 'd1232190a8b326504f6d016fb72ac706a25a3697' }))), h("table", { key: 'a24fe9f8fca8fac2f80c23662311baf332abe508', part: "table", class: this.sdTableClasses }, this.renderHead(), this.renderBody())), !this.paginatedRows.length && (h("div", { key: '6efc9f3210295cd98b2a3ce550df4c9af99d8d2a', class: "sd-table__bottom" }, h("div", { key: 'c568913f977026f3be8c7bec8a6ee448ad1e5a33', class: "sd-table__no-data" }, h("slot", { key: '5906d9ad73bb4ab7311ab5b78b91d877653e2031', name: "no-data" }, this.noDataLabel))))), this.pagination && this.innerRows.length > 0 && (h("div", { key: 'f736e90da9697044655d02dc0f2bfa2c19538d50', class: "sd-table__pagination" }, h("sd-pagination", { key: '2f4cda699cecb5289f5de73c72038a4b4ae316e7', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (h("sd-select", { key: '9b7853ce859b3b5129fb459dddfea97fc75ffe78', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdUpdate: (e) => this.changeRowsPerPage(e.detail.value) })))))));
     }
     static get is() { return "sd-table"; }
     static get originalStyleUrls() {

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

@@ -42,7 +42,7 @@ export class SdTabs {
         return { bgColor: '#E5E5E5', textColor: '#737373' };
     }
     render() {
-        return (h("div", { key: '1f9b39d82a7a98bb9dffd522d9f703b41682ae71', class: this.getContainerClasses() }, this.tabs.map((tab, index) => {
+        return (h("div", { key: '94f5cca8addf2b30907ba17a1b729c4904fd42cf', class: this.getContainerClasses() }, this.tabs.map((tab, index) => {
             const badgeColors = this.getBadgeColors(tab);
             return (h("div", { key: `tab-${index}`, class: this.getTabClasses(tab), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab.value) }, h("span", { "data-label": tab.label, class: "sd-tabs__label" }, tab.label), tab.badge && (h("sd-tag", { size: this.size, label: tab.badge.toString(), bgColor: badgeColors.bgColor, textColor: badgeColors.textColor, rounded: false }))));
         })));

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

@@ -37,7 +37,7 @@ export class SdTag {
     }
     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()));

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

@@ -81,10 +81,10 @@ export class SdTextarea {
             }
             : {};
         const maxLengthCounter = this.getMaxLengthCounter();
-        return (h(Host, { key: 'db95720b6b96d950d6435b1881f95d58c6bc4637', style: textareaWidth, class: {
+        return (h(Host, { key: 'e7dcaad4d684e27a8407bb8f577f8b77be9af07c', style: textareaWidth, class: {
                 'sd-textarea': true,
                 [this.getTextareaStatus()]: true,
-            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("div", { key: '3dae36a9b56837fa7d770f295359d8ed9aa2a3e4', class: "sd-textarea__content" }, h("textarea", { key: 'b9e4ff3cffc1b06e4ef6e5ffee240579c80c6d94', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, autofocus: this.autoFocus, maxLength: this.maxLength, onInput: this.handleInput.bind(this), onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) })), this.hasFooter() && (h("div", { key: 'b0de9e449897f2a8d1e6a7204d2383551d3ae2e4', class: "sd-textarea__footer" }, this.helpText !== undefined && h("span", { key: 'b4528beb70095d70a030a70f451c59e511865fcb', class: "sd-textarea__help-text" }, this.helpText), maxLengthCounter !== null && h("span", { key: 'ce2d33888c7bd85ea240ce00851aec7ecd945adc', class: "sd-textarea__counter" }, maxLengthCounter)))));
+            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("div", { key: '8c7eb8c3859467d50455a6158db3f06940233d5e', class: "sd-textarea__content" }, h("textarea", { key: 'e0f6d9157c8742d6c7936576e0790c8d468768c3', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, autofocus: this.autoFocus, maxLength: this.maxLength, onInput: this.handleInput.bind(this), onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) })), this.hasFooter() && (h("div", { key: '4638ad00f1101c84614c9eb3cc0eb31e539d3e03', class: "sd-textarea__footer" }, this.helpText !== undefined && h("span", { key: '6761ae655b4298a6b4154e4f2b8a8883b1eeaa70', class: "sd-textarea__help-text" }, this.helpText), maxLengthCounter !== null && h("span", { key: 'dc74b623c8469312b805970c42d0c38c9b2d95ad', class: "sd-textarea__counter" }, maxLengthCounter)))));
     }
     static get is() { return "sd-textarea"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-toast-message/sd-toast-message.js

@@ -39,10 +39,10 @@ export class SdToastMessage {
             background: resolveColor(colorTokens.background),
             text: resolveColor(colorTokens.text),
         };
-        return (h(Host, { key: 'edd60b2a74bae15c88131baedaa3e913dc5326ae', style: {
+        return (h(Host, { key: '6b1a8a827b4e1a09ef648f83ef707a7020b953ee', style: {
                 '--sd-toast-bg': colors.background,
                 '--sd-toast-text': colors.text,
-            } }, h("div", { key: 'b41ad15e9fe7520ee8fbf683f6d95e327c59ac6c', class: this.getContainerClasses(), role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (h("div", { key: 'def78fc8bc05ead9b97144dccc4f105fad953477', class: "sd-toast-message__icon" }, h("sd-icon", { key: 'a01368892d295aee0339fa027663bffe31fb2c2b', name: this.icon, size: 16, color: colors.text }))), h("div", { key: 'f0c6d32da360c2135aee2374b1091c27bddf4d22', class: "sd-toast-message__content" }, h("span", { key: '0f1f7d81154470ad9bcc3d8d4c1ed0c0994da7bb', class: "sd-toast-message__message" }, this.message)), this.link && (h("a", { key: '2a4f7b21940e2234653a18e8a677aba9586d18e3', href: this.link, class: "sd-toast-message__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (h("sd-button", { key: 'd399961349429bee81fa395c555879fabef86136', class: `sd-toast-message__button ${this.type === 'basicLight' ? 'text-white' : ''}`, label: this.buttonLabel, variant: "primary", color: this.type === 'basicLight' ? 'oceanblue_75' : 'white', size: "sm", onClick: this.handleButtonClick, style: this.type !== 'basicLight' ? { '--button-text-color': resolveColor('grey_95') } : {} })), this.useClose && (h("button", { key: '4bfae7573d5a5204c29d5ef0e2dc71e9a7622d62', type: "button", class: "sd-toast-message__close", onClick: this.handleClose, "aria-label": "Close", title: "Close" }, h("sd-icon", { key: '7ac20a34965ee46c8af76c6c862a69269a73f1a2', name: "close", size: 12, color: colors.text }))))));
+            } }, h("div", { key: 'd442a1ae33c605af863d014e61eaf0a26ba991f7', class: this.getContainerClasses(), role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (h("div", { key: '477651acf80d39aecf5b47d79955aaa990815821', class: "sd-toast-message__icon" }, h("sd-icon", { key: '8563a3a93cdf4e42df02b2e42305f0cba843b6e0', name: this.icon, size: 16, color: colors.text }))), h("div", { key: 'ff283cf84d91688ab29a70c96e19122d3c2a48bf', class: "sd-toast-message__content" }, h("span", { key: '96fa4dbf914710e1dbd5df0df860bb3b912370d9', class: "sd-toast-message__message" }, this.message)), this.link && (h("a", { key: '824c896f3483d19bf6d0e1f233576101a45a123b', href: this.link, class: "sd-toast-message__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (h("sd-button", { key: '74797bcfb36d5f04bcfead15cb431c709ec4654e', class: `sd-toast-message__button ${this.type === 'basicLight' ? 'text-white' : ''}`, label: this.buttonLabel, variant: "primary", color: this.type === 'basicLight' ? 'oceanblue_75' : 'white', size: "sm", onClick: this.handleButtonClick, style: this.type !== 'basicLight' ? { '--button-text-color': resolveColor('grey_95') } : {} })), this.useClose && (h("button", { key: '1aa66861462bd07f5cc76e8fdaa4e24d2adeff25', type: "button", class: "sd-toast-message__close", onClick: this.handleClose, "aria-label": "Close", title: "Close" }, h("sd-icon", { key: '8b8ecf1a65ae6c4ac0f8132d1f19800960244828', name: "close", size: 12, color: colors.text }))))));
     }
     static get is() { return "sd-toast-message"; }
     static get encapsulation() { return "scoped"; }

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

@@ -28,7 +28,7 @@ export class SdToggle {
         this.change.emit(newValue);
     };
     render() {
-        return (h("label", { key: 'ca85bc0493aff9ff17108696ddb8af29734b00f5', "aria-label": this.label || 'toggle', class: this.toggleClasses }, h("input", { key: 'b99a4fa0d557968e50b302332778faaf1b46f8cc', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), this.label && h("span", { key: 'e62ca806b95463c7807f82ace61b4aa0affec962', class: "sd-toggle__label" }, this.label), h("div", { key: '6923da9a043df0d0d7fc0ecf2fe175857279e9b3', class: "sd-toggle__track" }, h("div", { key: '090dfbcf308f26b8e200d0e2cd69d44b0f5cb8bf', class: "sd-toggle__thumb" }))));
+        return (h("label", { key: 'c874dbaa2a3f3743b7f3c93a6af4efd63660f3b2', "aria-label": this.label || 'toggle', class: this.toggleClasses }, h("input", { key: 'da204ac9048128501f68b3dac55c9b30bbc0cd83', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), this.label && h("span", { key: '5eeb06d12bf94610a10e6000a7d0f3c750bb918f', class: "sd-toggle__label" }, this.label), h("div", { key: 'bf0dd0fab7ced78f4a5728d4d1b9c8995ad1130a', class: "sd-toggle__track" }, h("div", { key: '92c08a823a1b9d28814e812b7660d33ea7238a32', class: "sd-toggle__thumb" }))));
     }
     static get is() { return "sd-toggle"; }
     static get originalStyleUrls() {

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

@@ -32,7 +32,7 @@ export class SdToggleButton {
         this.change.emit(newValue);
     };
     render() {
-        return (h("label", { key: '9eb4abcfe8f3894198c8d8643150daa507e6f0e9', class: this.buttonClasses, "aria-label": this.label || 'toggle button' }, this.label, h("input", { key: 'e3d952af461da0fac978b8ce6bd55a6990907fb3', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (h("label", { key: '56d11c1aad1514aa11919403e81d8b4959b1bf82', class: this.buttonClasses, "aria-label": this.label || 'toggle button' }, this.label, h("input", { key: 'c4316f336ea6f27b90b437e39f0410f3da052a79', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
     static get is() { return "sd-toggle-button"; }
     static get originalStyleUrls() {

package/dist/components/{p-CdGD6AqM.js → p-B-HVIIWo.js}

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h, t as transformTag } from './p-YLoygqPr.js';
 import { r as resolveColor } from './p-DcGvp3RM.js';
-import { d as defineCustomElement$1 } from './p-DnQF6htq.js';
+import { d as defineCustomElement$1 } from './p-Sw7TJWkF.js';
 
 const sdButtonCss = () => `sd-button{display:inline-flex;width:fit-content;height:fit-content}.sd-button{text-decoration:none;cursor:pointer;border-radius:4px;transition:all 0.2s ease-in-out;position:relative;overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;border:none}.sd-button--xs{padding:0 8px;font-size:12px;font-weight:500;line-height:20px;min-height:24px}.sd-button--sm{padding:0 12px;font-size:12px;font-weight:500;line-height:20px;min-height:28px}.sd-button--md{padding:0 20px;font-size:16px;font-weight:500;line-height:26px;min-height:34px}.sd-button--lg{padding:0 28px;font-size:18px;font-weight:500;line-height:30px;min-height:62px}.sd-button--primary{background-color:var(--button-color);color:white;transition:filter 0.2s ease}.sd-button--primary::before{content:"";position:absolute;inset:0;background:#000000;opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--primary:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.25}.sd-button--outline{background:white;border:1px solid var(--button-color);color:var(--button-color)}.sd-button--outline::before{content:"";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--outline:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--outline .sd-button__content{position:relative;z-index:1}.sd-button--ghost{background-color:transparent;color:var(--button-color);border-color:transparent}.sd-button--ghost::before{content:"";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--ghost:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--ghost .sd-button__content{position:relative;z-index:1}.sd-button--disabled{border:1px solid #cccccc;background:#e1e1e1;color:#888888;cursor:not-allowed !important}.sd-button--icon-only{padding:0;width:fit-content;height:fit-content;aspect-ratio:1/1}.sd-button--no-hover:hover::before{opacity:0 !important}.sd-button .sd-button__content{display:inline-flex;align-items:center;justify-content:center;gap:4px;z-index:1;font-weight:500}`;
 
@@ -87,6 +87,6 @@ function defineCustomElement() {
 }
 
 export { SdButton as S, defineCustomElement as d };
-//# sourceMappingURL=p-CdGD6AqM.js.map
+//# sourceMappingURL=p-B-HVIIWo.js.map
 
-//# sourceMappingURL=p-CdGD6AqM.js.map
+//# sourceMappingURL=p-B-HVIIWo.js.map

package/dist/components/{p-CdGD6AqM.js.map → p-B-HVIIWo.js.map}

@@ -1 +1 @@
-{"file":"p-CdGD6AqM.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-button/sd-button.scss?tag=sd-button","src/components/sd-button/sd-button.tsx"],"sourcesContent":["@import 'variables';\n\nsd-button {\n display: inline-flex;\n width: fit-content;\n height: fit-content;\n}\n\n.sd-button {\n text-decoration: none;\n cursor: pointer;\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 display: inline-flex;\n align-items: center;\n justify-content: center;\n border: none;\n &--xs {\n  padding: 0 8px;\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 20px;\n  min-height: 24px;\n }\n &--sm {\n  padding: 0 12px;\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 20px;\n  min-height: 28px;\n }\n &--md {\n  padding: 0 20px;\n  font-size: 16px;\n  font-weight: 500;\n  line-height: 26px;\n  min-height: 34px;\n }\n &--lg {\n  padding: 0 28px;\n  font-size: 18px;\n  font-weight: 500;\n  line-height: 30px;\n  min-height: 62px;\n }\n &--primary {\n  background-color: var(--button-color);\n  color: white;\n  transition: filter 0.2s ease;\n\n  &::before {\n   content: '';\n   position: absolute;\n   inset: 0;\n   background: #000000;\n   opacity: 0;\n   transition: opacity 0.2s ease;\n   z-index: 0;\n  }\n\n  &:hover:not(.sd-button--disabled):not(.sd-button--loading)::before {\n   opacity: 0.25;\n  }\n }\n\n &--outline {\n  background: white;\n  border: 1px solid var(--button-color);\n  color: var(--button-color);\n\n  &::before {\n   content: '';\n   position: absolute;\n   inset: 0;\n   background: var(--button-color);\n   opacity: 0;\n   transition: opacity 0.2s ease;\n   z-index: 0;\n  }\n\n  &:hover:not(.sd-button--disabled):not(.sd-button--loading)::before {\n   opacity: 0.15;\n  }\n\n  .sd-button__content {\n   position: relative;\n   z-index: 1;\n  }\n }\n &--ghost {\n  background-color: transparent;\n  color: var(--button-color);\n  border-color: transparent;\n\n  &::before {\n   content: '';\n   position: absolute;\n   inset: 0;\n   background: var(--button-color);\n   opacity: 0;\n   transition: opacity 0.2s ease;\n   z-index: 0;\n  }\n\n  &:hover:not(.sd-button--disabled):not(.sd-button--loading)::before {\n   opacity: 0.15;\n  }\n\n  .sd-button__content {\n   position: relative;\n   z-index: 1;\n  }\n }\n &--disabled {\n  border: 1px solid $grey_45;\n  background: $grey_30;\n  color: $grey_65;\n  cursor: not-allowed !important;\n }\n &--icon-only {\n  padding: 0;\n  width: fit-content;\n  height: fit-content;\n  aspect-ratio: 1 / 1;\n }\n &--no-hover {\n  &:hover::before {\n   opacity: 0 !important;\n  }\n }\n\n .sd-button__content {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n\n  z-index: 1;\n  font-weight: 500;\n }\n}\n\n// /* Focus styles */\n// .sd-button:focus-visible {\n//  outline: 2px solid $primary;\n//  outline-offset: 2px;\n// }\n\n// /* High contrast mode support */\n// @media (prefers-contrast: high) {\n//  .sd-button {\n//   border-width: 2px;\n//  }\n// }\n","import { Component, Prop, h, Element } from '@stencil/core';\nimport { resolveColor } from '../../utils/color';\n\nexport type ButtonVariant = 'primary' | 'outline' | 'ghost';\nexport type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';\n\nconst ICON_SIZES: { [key in ButtonSize]: number } = {\n xs: 12,\n sm: 16,\n md: 20,\n lg: 24,\n};\n\n@Component({\n tag: 'sd-button',\n styleUrl: 'sd-button.scss',\n})\nexport class SdButton {\n @Element() el!: HTMLElement;\n\n @Prop() variant?: ButtonVariant = 'primary';\n @Prop() size: ButtonSize = 'sm';\n @Prop() color: string = '#025497';\n @Prop() label: string = '';\n @Prop() disabled: boolean = false;\n @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n @Prop() icon?: IconName;\n @Prop() iconColor?: string;\n @Prop() iconSize?: number;\n @Prop() iconRight?: IconName;\n @Prop() noHover: boolean = false;\n @Prop() class: string = '';\n\n private getButtonClasses(): string {\n  const classes = ['sd-button'];\n\n  classes.push(`sd-button--${this.variant}`);\n  classes.push(`sd-button--${this.size}`);\n  classes.push(`sd-button--color-${this.color}`);\n\n  if (this.disabled) {\n   classes.push('sd-button--disabled');\n  }\n\n  if (!this.label && (this.icon || this.iconRight)) {\n   classes.push('sd-button--icon-only');\n  }\n\n  if (this.noHover) {\n   classes.push('sd-button--no-hover');\n  }\n\n  return classes.join(' ');\n }\n\n render() {\n  const buttonClasses = this.getButtonClasses();\n  // 유틸로 색상 키 -> HEX 매핑 (없으면 원본 그대로)\n  const resolvedColor = resolveColor(this.color);\n\n  return (\n   <button\n    class={`${buttonClasses} ${this.class}`}\n    type={this.type}\n    disabled={this.disabled}\n    style={{ '--button-color': resolvedColor }}\n   >\n    <div class=\"sd-button__content\">\n     {this.icon && (\n      <sd-icon\n       class=\"sd-button__icon sd-button__icon--left\"\n       name={this.icon}\n       size={this.iconSize ?? ICON_SIZES[this.size!]}\n       color={this.iconColor ?? (this.variant === 'primary' ? '#fff' : resolvedColor)}\n      ></sd-icon>\n     )}\n\n     {this.label && <div class=\"sd-button__label\">{this.label}</div>}\n\n     {this.iconRight && (\n      <sd-icon\n       class=\"sd-button__icon sd-button__icon--right\"\n       name={this.iconRight}\n       size={ICON_SIZES[this.size!]}\n       color={this.variant === 'primary' ? '#fff' : resolvedColor}\n      ></sd-icon>\n     )}\n    </div>\n   </button>\n  );\n }\n}\n"],"version":3}
+{"file":"p-B-HVIIWo.js","mappings":";;;;AAAA,MAAM,WAAW,GAAG,MAAM,CAAC,0sEAA0sE,CAAC;;ACMtuE,MAAM,UAAU,GAAoC;AACnD,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;CACN;MAMY,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;;;;;;;;IAGZ,OAAO,GAAmB,SAAS;IACnC,IAAI,GAAe,IAAI;IACvB,KAAK,GAAW,SAAS;IACzB,KAAK,GAAW,EAAE;IAClB,QAAQ,GAAY,KAAK;IACzB,IAAI,GAAkC,QAAQ;AAC9C,IAAA,IAAI;AACJ,IAAA,SAAS;AACT,IAAA,QAAQ;AACR,IAAA,SAAS;IACT,OAAO,GAAY,KAAK;IACxB,KAAK,GAAW,EAAE;IAElB,gBAAgB,GAAA;AACvB,QAAA,MAAM,OAAO,GAAG,CAAC,WAAW,CAAC;QAE7B,OAAO,CAAC,IAAI,CAAC,CAAA,WAAA,EAAc,IAAI,CAAC,OAAO,CAAE,CAAA,CAAC;QAC1C,OAAO,CAAC,IAAI,CAAC,CAAA,WAAA,EAAc,IAAI,CAAC,IAAI,CAAE,CAAA,CAAC;QACvC,OAAO,CAAC,IAAI,CAAC,CAAA,iBAAA,EAAoB,IAAI,CAAC,KAAK,CAAE,CAAA,CAAC;AAE9C,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AAClB,YAAA,OAAO,CAAC,IAAI,CAAC,qBAAqB,CAAC;;AAGpC,QAAA,IAAI,CAAC,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,SAAS,CAAC,EAAE;AACjD,YAAA,OAAO,CAAC,IAAI,CAAC,sBAAsB,CAAC;;AAGrC,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;AACjB,YAAA,OAAO,CAAC,IAAI,CAAC,qBAAqB,CAAC;;AAGpC,QAAA,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;;IAGzB,MAAM,GAAA;AACL,QAAA,MAAM,aAAa,GAAG,IAAI,CAAC,gBAAgB,EAAE;;QAE7C,MAAM,aAAa,GAAG,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC;QAE9C,QACC,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACC,KAAK,EAAE,CAAA,EAAG,aAAa,CAAI,CAAA,EAAA,IAAI,CAAC,KAAK,CAAA,CAAE,EACvC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,EAAE,gBAAgB,EAAE,aAAa,EAAE,EAAA,EAE1C,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,EAC7B,IAAI,CAAC,IAAI,KACT,gEACC,KAAK,EAAC,uCAAuC,EAC7C,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,QAAQ,IAAI,UAAU,CAAC,IAAI,CAAC,IAAK,CAAC,EAC7C,KAAK,EAAE,IAAI,CAAC,SAAS,KAAK,IAAI,CAAC,OAAO,KAAK,SAAS,GAAG,MAAM,GAAG,aAAa,CAAC,EAAA,CACpE,CACX,EAEA,IAAI,CAAC,KAAK,IAAI,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAE,EAAA,IAAI,CAAC,KAAK,CAAO,EAE9D,IAAI,CAAC,SAAS,KACd,gEACC,KAAK,EAAC,wCAAwC,EAC9C,IAAI,EAAE,IAAI,CAAC,SAAS,EACpB,IAAI,EAAE,UAAU,CAAC,IAAI,CAAC,IAAK,CAAC,EAC5B,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS,GAAG,MAAM,GAAG,aAAa,EAAA,CAChD,CACX,CACI,CACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-button/sd-button.scss?tag=sd-button","src/components/sd-button/sd-button.tsx"],"sourcesContent":["@import 'variables';\n\nsd-button {\n display: inline-flex;\n width: fit-content;\n height: fit-content;\n}\n\n.sd-button {\n text-decoration: none;\n cursor: pointer;\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 display: inline-flex;\n align-items: center;\n justify-content: center;\n border: none;\n &--xs {\n  padding: 0 8px;\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 20px;\n  min-height: 24px;\n }\n &--sm {\n  padding: 0 12px;\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 20px;\n  min-height: 28px;\n }\n &--md {\n  padding: 0 20px;\n  font-size: 16px;\n  font-weight: 500;\n  line-height: 26px;\n  min-height: 34px;\n }\n &--lg {\n  padding: 0 28px;\n  font-size: 18px;\n  font-weight: 500;\n  line-height: 30px;\n  min-height: 62px;\n }\n &--primary {\n  background-color: var(--button-color);\n  color: white;\n  transition: filter 0.2s ease;\n\n  &::before {\n   content: '';\n   position: absolute;\n   inset: 0;\n   background: #000000;\n   opacity: 0;\n   transition: opacity 0.2s ease;\n   z-index: 0;\n  }\n\n  &:hover:not(.sd-button--disabled):not(.sd-button--loading)::before {\n   opacity: 0.25;\n  }\n }\n\n &--outline {\n  background: white;\n  border: 1px solid var(--button-color);\n  color: var(--button-color);\n\n  &::before {\n   content: '';\n   position: absolute;\n   inset: 0;\n   background: var(--button-color);\n   opacity: 0;\n   transition: opacity 0.2s ease;\n   z-index: 0;\n  }\n\n  &:hover:not(.sd-button--disabled):not(.sd-button--loading)::before {\n   opacity: 0.15;\n  }\n\n  .sd-button__content {\n   position: relative;\n   z-index: 1;\n  }\n }\n &--ghost {\n  background-color: transparent;\n  color: var(--button-color);\n  border-color: transparent;\n\n  &::before {\n   content: '';\n   position: absolute;\n   inset: 0;\n   background: var(--button-color);\n   opacity: 0;\n   transition: opacity 0.2s ease;\n   z-index: 0;\n  }\n\n  &:hover:not(.sd-button--disabled):not(.sd-button--loading)::before {\n   opacity: 0.15;\n  }\n\n  .sd-button__content {\n   position: relative;\n   z-index: 1;\n  }\n }\n &--disabled {\n  border: 1px solid $grey_45;\n  background: $grey_30;\n  color: $grey_65;\n  cursor: not-allowed !important;\n }\n &--icon-only {\n  padding: 0;\n  width: fit-content;\n  height: fit-content;\n  aspect-ratio: 1 / 1;\n }\n &--no-hover {\n  &:hover::before {\n   opacity: 0 !important;\n  }\n }\n\n .sd-button__content {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n\n  z-index: 1;\n  font-weight: 500;\n }\n}\n\n// /* Focus styles */\n// .sd-button:focus-visible {\n//  outline: 2px solid $primary;\n//  outline-offset: 2px;\n// }\n\n// /* High contrast mode support */\n// @media (prefers-contrast: high) {\n//  .sd-button {\n//   border-width: 2px;\n//  }\n// }\n","import { Component, Prop, h, Element } from '@stencil/core';\nimport { resolveColor } from '../../utils/color';\n\nexport type ButtonVariant = 'primary' | 'outline' | 'ghost';\nexport type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';\n\nconst ICON_SIZES: { [key in ButtonSize]: number } = {\n xs: 12,\n sm: 16,\n md: 20,\n lg: 24,\n};\n\n@Component({\n tag: 'sd-button',\n styleUrl: 'sd-button.scss',\n})\nexport class SdButton {\n @Element() el!: HTMLElement;\n\n @Prop() variant?: ButtonVariant = 'primary';\n @Prop() size: ButtonSize = 'sm';\n @Prop() color: string = '#025497';\n @Prop() label: string = '';\n @Prop() disabled: boolean = false;\n @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n @Prop() icon?: IconName;\n @Prop() iconColor?: string;\n @Prop() iconSize?: number;\n @Prop() iconRight?: IconName;\n @Prop() noHover: boolean = false;\n @Prop() class: string = '';\n\n private getButtonClasses(): string {\n  const classes = ['sd-button'];\n\n  classes.push(`sd-button--${this.variant}`);\n  classes.push(`sd-button--${this.size}`);\n  classes.push(`sd-button--color-${this.color}`);\n\n  if (this.disabled) {\n   classes.push('sd-button--disabled');\n  }\n\n  if (!this.label && (this.icon || this.iconRight)) {\n   classes.push('sd-button--icon-only');\n  }\n\n  if (this.noHover) {\n   classes.push('sd-button--no-hover');\n  }\n\n  return classes.join(' ');\n }\n\n render() {\n  const buttonClasses = this.getButtonClasses();\n  // 유틸로 색상 키 -> HEX 매핑 (없으면 원본 그대로)\n  const resolvedColor = resolveColor(this.color);\n\n  return (\n   <button\n    class={`${buttonClasses} ${this.class}`}\n    type={this.type}\n    disabled={this.disabled}\n    style={{ '--button-color': resolvedColor }}\n   >\n    <div class=\"sd-button__content\">\n     {this.icon && (\n      <sd-icon\n       class=\"sd-button__icon sd-button__icon--left\"\n       name={this.icon}\n       size={this.iconSize ?? ICON_SIZES[this.size!]}\n       color={this.iconColor ?? (this.variant === 'primary' ? '#fff' : resolvedColor)}\n      ></sd-icon>\n     )}\n\n     {this.label && <div class=\"sd-button__label\">{this.label}</div>}\n\n     {this.iconRight && (\n      <sd-icon\n       class=\"sd-button__icon sd-button__icon--right\"\n       name={this.iconRight}\n       size={ICON_SIZES[this.size!]}\n       color={this.variant === 'primary' ? '#fff' : resolvedColor}\n      ></sd-icon>\n     )}\n    </div>\n   </button>\n  );\n }\n}\n"],"version":3}

package/dist/components/p-BBVGfsbU.js

@@ -0,0 +1,62 @@
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host, t as transformTag } from './p-YLoygqPr.js';
+
+const sdRadioCss = () => `sd-radio{display:inline-flex}sd-radio.sd-radio{cursor:pointer}sd-radio.sd-radio label{display:flex;align-items:center;gap:8px;cursor:pointer}sd-radio.sd-radio label input{position:relative;appearance:none;margin:0;width:16px;height:16px;border:1px solid #888888;border-radius:50%;accent-color:#0075ff;background-color:white;cursor:pointer}sd-radio.sd-radio label input:checked{border-color:#0075ff;background-color:white}sd-radio.sd-radio label 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.sd-radio label input:disabled{border-color:#cccccc;background-color:#eeeeee}sd-radio.sd-radio label input:disabled:checked::before{background-color:#cccccc}sd-radio.sd-radio label input:not(:disabled):hover{border-color:#0075ff;background-color:#d9eaff}sd-radio.sd-radio--disabled{cursor:not-allowed !important}sd-radio.sd-radio--disabled label{cursor:not-allowed !important}sd-radio.sd-radio--disabled label input{cursor:not-allowed !important}`;
+
+const SdRadio = /*@__PURE__*/ proxyCustomElement(class SdRadio extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.update = createEvent(this, "sdUpdate");
+    }
+    value;
+    disabled = false;
+    val;
+    label;
+    update;
+    getRadioClasses() {
+        const classes = [
+            'sd-radio',
+            String(this.val) === String(this.value) ? 'sd-radio--selected' : 'sd-radio--unselected',
+        ];
+        if (this.disabled) {
+            classes.push('sd-radio--disabled');
+        }
+        return classes.join(' ');
+    }
+    handleRadioChange(detail) {
+        if (this.disabled)
+            return;
+        console.log('detail', detail);
+        this.value = this.val;
+        this.update.emit(this.value);
+    }
+    render() {
+        return (h(Host, { key: 'f288b8077193d0c1614b3c25fb9f3ebbedf0f9be', "aria-label": this.val || 'radio option', "aria-checked": String(this.val) === String(this.value) ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', class: this.getRadioClasses() }, h("label", { key: `radio-${this.val}` }, h("input", { key: '0f5e1cad59ec2a2c20247bec1341e58b11477699', type: "radio", name: this.val, value: String(this.val), checked: String(this.val) === String(this.value), disabled: this.disabled, onInput: ({ detail }) => this.handleRadioChange(detail) }), this.val && h("span", { key: '47fd723d1ec6c6124d01341f7edbe945061dc348', class: "sd-radio-group__label" }, this.label || this.val))));
+    }
+    static get style() { return sdRadioCss(); }
+}, [768, "sd-radio", {
+        "value": [1544],
+        "disabled": [4],
+        "val": [1],
+        "label": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["sd-radio"];
+    components.forEach(tagName => { switch (tagName) {
+        case "sd-radio":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), SdRadio);
+            }
+            break;
+    } });
+}
+
+export { SdRadio as S, defineCustomElement as d };
+//# sourceMappingURL=p-BBVGfsbU.js.map
+
+//# sourceMappingURL=p-BBVGfsbU.js.map

package/dist/components/p-BBVGfsbU.js.map

@@ -0,0 +1 @@
+{"file":"p-BBVGfsbU.js","mappings":";;AAAA,MAAM,UAAU,GAAG,MAAM,CAAC,yiCAAyiC,CAAC;;MCQvjC,OAAO,iBAAAA,kBAAA,CAAA,MAAA,OAAA,SAAAC,CAAA,CAAA;;;;;;;;AACqB,IAAA,KAAK;IAErC,QAAQ,GAAY,KAAK;AAEzB,IAAA,GAAG;AAEH,IAAA,KAAK;AAEqB,IAAA,MAAM;IAEhC,eAAe,GAAA;AACtB,QAAA,MAAM,OAAO,GAAG;YACf,UAAU;AACV,YAAA,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,oBAAoB,GAAG,sBAAsB;SACvF;AAED,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AAClB,YAAA,OAAO,CAAC,IAAI,CAAC,oBAAoB,CAAC;;AAGnC,QAAA,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;;AAGjB,IAAA,iBAAiB,CAAC,MAAW,EAAA;QACpC,IAAI,IAAI,CAAC,QAAQ;YAAE;AAEnB,QAAA,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,MAAM,CAAC;AAE7B,QAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAI;QACtB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;;IAG7B,MAAM,GAAA;AACL,QAAA,QACC,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,YAAA,EACQ,IAAI,CAAC,GAAG,IAAI,cAAc,EACxB,cAAA,EAAA,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,MAAM,GAAG,OAAO,EACzD,eAAA,EAAA,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,EAC/C,KAAK,EAAE,IAAI,CAAC,eAAe,EAAE,EAAA,EAE7B,CAAA,CAAA,OAAA,EAAA,EAAO,GAAG,EAAE,CAAA,MAAA,EAAS,IAAI,CAAC,GAAG,EAAE,EAAA,EAC9B,CACC,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,CAAC,GAAG,EACd,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,EACvB,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAChD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,EACtD,CAAA,EACD,IAAI,CAAC,GAAG,IAAI,6DAAM,KAAK,EAAC,uBAAuB,EAAE,EAAA,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,CAAQ,CACzE,CACF;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-radio/sd-radio.scss?tag=sd-radio","src/components/sd-radio/sd-radio.tsx"],"sourcesContent":["@import 'variables';\n\nsd-radio {\n display: inline-flex;\n\n &.sd-radio {\n  cursor: pointer;\n\n  label {\n   display: flex;\n   align-items: center;\n   gap: 8px;\n   cursor: pointer;\n\n   input {\n    position: relative;\n    appearance: none;\n    margin: 0;\n    width: 16px;\n    height: 16px;\n    border: 1px solid $grey_65;\n    border-radius: 50%;\n    accent-color: $brilliantblue_75;\n    background-color: white;\n    cursor: pointer;\n\n    &:checked {\n     border-color: $brilliantblue_75;\n     background-color: white;\n    }\n\n    &:checked::before {\n     content: '';\n     position: absolute;\n     top: 50%;\n     left: 50%;\n     transform: translate(-50%, -50%);\n     width: 10px;\n     height: 10px;\n     border-radius: 50%;\n     background-color: $brilliantblue_75;\n    }\n\n    &:disabled {\n     border-color: $grey_45;\n     background-color: $grey_20;\n    }\n\n    &:disabled:checked::before {\n     background-color: $grey_45;\n    }\n\n    &:not(:disabled):hover {\n     border-color: $brilliantblue_75;\n     background-color: $brilliantblue_25;\n    }\n   }\n  }\n }\n\n &.sd-radio--disabled {\n  cursor: not-allowed !important;\n\n  label {\n   cursor: not-allowed !important;\n   input {\n    cursor: not-allowed !important;\n   }\n  }\n }\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\nexport type RadioValue = string | number | boolean;\n\n@Component({\n tag: 'sd-radio',\n styleUrl: 'sd-radio.scss',\n})\nexport class SdRadio {\n @Prop({ mutable: true, reflect: true }) value!: RadioValue;\n\n @Prop() disabled: boolean = false;\n\n @Prop() val!: string;\n\n @Prop() label?: string;\n\n @Event({ eventName: 'sdUpdate' }) update!: EventEmitter<RadioValue>;\n\n private getRadioClasses(): string {\n  const classes = [\n   'sd-radio',\n   String(this.val) === String(this.value) ? 'sd-radio--selected' : 'sd-radio--unselected',\n  ];\n\n  if (this.disabled) {\n   classes.push('sd-radio--disabled');\n  }\n\n  return classes.join(' ');\n }\n\n private handleRadioChange(detail: any) {\n  if (this.disabled) return;\n\n  console.log('detail', detail);\n\n  this.value = this.val!;\n  this.update.emit(this.value);\n }\n\n render() {\n  return (\n   <Host\n    aria-label={this.val || 'radio option'}\n    aria-checked={String(this.val) === String(this.value) ? 'true' : 'false'}\n    aria-disabled={this.disabled ? 'true' : 'false'}\n    class={this.getRadioClasses()}\n   >\n    <label key={`radio-${this.val}`}>\n     <input\n      type=\"radio\"\n      name={this.val}\n      value={String(this.val)}\n      checked={String(this.val) === String(this.value)}\n      disabled={this.disabled}\n      onInput={({ detail }) => this.handleRadioChange(detail)}\n     />\n     {this.val && <span class=\"sd-radio-group__label\">{this.label || this.val}</span>}\n    </label>\n   </Host>\n  );\n }\n}\n"],"version":3}

package/dist/components/{p-RhBqdixM.js → p-BfHejNRG.js}

@@ -1,10 +1,10 @@
 import { p as proxyCustomElement, H, d as createEvent, h, t as transformTag } from './p-YLoygqPr.js';
-import { d as defineCustomElement$6 } from './p-CdGD6AqM.js';
-import { d as defineCustomElement$5 } from './p-CpRkV7pg.js';
-import { d as defineCustomElement$4 } from './p-CVMprLsE.js';
-import { d as defineCustomElement$3 } from './p-DnQF6htq.js';
-import { d as defineCustomElement$2 } from './p-D54IEoI6.js';
-import { d as defineCustomElement$1 } from './p-7xekTQRB.js';
+import { d as defineCustomElement$6 } from './p-B-HVIIWo.js';
+import { d as defineCustomElement$5 } from './p-FVxa2OYe.js';
+import { d as defineCustomElement$4 } from './p-CmghyzXg.js';
+import { d as defineCustomElement$3 } from './p-Sw7TJWkF.js';
+import { d as defineCustomElement$2 } from './p-Cp2TqeFd.js';
+import { d as defineCustomElement$1 } from './p-Dtljyq_t.js';
 
 const sdSelectSearchInputCss = () => `sd-select-search-input{position:sticky;top:0;display:flex;width:100%;background-color:white;align-items:center}sd-select-search-input .sd-select-search-input{position:sticky;top:0;display:flex;width:100%;background-color:white;align-items:center;padding:4px 8px}sd-select-search-input .sd-select-search-input sd-input{width:100%}sd-select-search-input .sd-select-search-input--scrolled{box-shadow:2px 2px 8px 2px rgba(0, 0, 0, 0.2)}`;
 
@@ -33,17 +33,17 @@ const SdSelectSearchInput = /*@__PURE__*/ proxyCustomElement(class SdSelectSearc
         input?.focus({ preventScroll: true });
     }
     render() {
-        return (h("div", { key: '199b6bdb1da143241f5e2cf797cc0f484b38aac0', class: {
+        return (h("div", { key: '82fd2b838c46c47b51b93a23e5a837708fb944b1', class: {
                 'sd-select-search-input': true,
                 'sd-select-search-input--scrolled': !!this.isScrolled,
-            }, onClick: event => event.stopPropagation() }, h("sd-input", { key: 'c768d0a2324f3ea40cff3eb049ddfad3cddcb882', ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdUpdate: event => {
+            }, onClick: event => event.stopPropagation() }, h("sd-input", { key: 'fc0821ce63f445bed3dfce51668ece1831914f86', ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdUpdate: event => {
                 this.searchInput.emit(String(event?.detail));
             }, onSdFocus: () => {
                 this.searchFocus.emit();
             }, onKeyDown: event => {
                 if (event.code === 'Enter')
                     event.stopPropagation();
-            } }, h("sd-icon", { key: '21062cf3032b5488487b61a08753de01a5de7b98', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
+            } }, h("sd-icon", { key: '6a9b19f5910132be045e3a2cc33546307e3d5cb9', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
     }
     static get style() { return sdSelectSearchInputCss(); }
 }, [768, "sd-select-search-input", {
@@ -97,6 +97,6 @@ function defineCustomElement() {
 }
 
 export { SdSelectSearchInput as S, defineCustomElement as d };
-//# sourceMappingURL=p-RhBqdixM.js.map
+//# sourceMappingURL=p-BfHejNRG.js.map
 
-//# sourceMappingURL=p-RhBqdixM.js.map
+//# sourceMappingURL=p-BfHejNRG.js.map

package/dist/components/{p-RhBqdixM.js.map → p-BfHejNRG.js.map}

@@ -1 +1 @@
-{"file":"p-RhBqdixM.js","mappings":";;;;;;;;AAAA,MAAM,sBAAsB,GAAG,MAAM,CAAC,gbAAgb,CAAC;;MCM1c,mBAAmB,iBAAAA,kBAAA,CAAA,MAAA,mBAAA,SAAAC,CAAA,CAAA;;;;;;;;;IACvB,UAAU,GAAa,KAAK;IAC5B,UAAU,GAAkB,EAAE;AAEC,IAAA,WAAW;AACX,IAAA,WAAW;AAE1C,IAAA,SAAS;AAGjB,IAAA,MAAM,kBAAkB,GAAA;AACvB,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;AACnB,YAAA,OAAO,IAAI,CAAC,SAAS,CAAC,kBAAkB,EAAE;;AAE3C,QAAA,OAAO,IAAI;;AAIZ,IAAA,MAAM,kBAAkB,GAAA;AACvB,QAAA,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,kBAAkB,EAAE;QAC7C,KAAK,EAAE,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC;;IAGtC,MAAM,GAAA;QACL,QACC,CACC,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;AACN,gBAAA,wBAAwB,EAAE,IAAI;AAC9B,gBAAA,kCAAkC,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU;AACrD,aAAA,EACD,OAAO,EAAE,KAAK,IAAI,KAAK,CAAC,eAAe,EAAE,EAAA,EAEzC,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACC,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC,EAChC,KAAK,EAAE,IAAI,CAAC,UAAU,EACtB,WAAW,EAAC,cAAI,EAChB,SAAS,QACT,UAAU,EAAE,EAAE,cAAc,EAAE,KAAK,EAAE,EACrC,SAAS,EAAA,IAAA,EACT,UAAU,EAAE,KAAK,IAAG;AACnB,gBAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;AAC7C,aAAC,EACD,SAAS,EAAE,MAAK;AACf,gBAAA,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE;AACxB,aAAC,EACD,SAAS,EAAE,KAAK,IAAG;AAClB,gBAAA,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO;oBAAE,KAAK,CAAC,eAAe,EAAE;AACpD,aAAC,EAAA,EAED,CACC,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,EAAE,EACR,KAAK,EAAC,SAAS,EACf,KAAK,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,EAC7B,IAAI,EAAC,QAAQ,EACH,CAAA,CACD,CACN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-select/sd-select-search-input/sd-select-search-input.scss?tag=sd-select-search-input","src/components/sd-select/sd-select-search-input/sd-select-search-input.tsx"],"sourcesContent":["@import 'variables';\n\nsd-select-search-input {\n position: sticky;\n top: 0;\n display: flex;\n width: 100%;\n background-color: white;\n align-items: center;\n .sd-select-search-input {\n  position: sticky;\n  top: 0;\n  display: flex;\n  width: 100%;\n  background-color: white;\n  align-items: center;\n  padding: 4px 8px;\n\n  sd-input {\n   width: 100%;\n  }\n\n  &--scrolled {\n   box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.2);\n  }\n }\n}\n","import { h, Component, Prop, Method, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'sd-select-search-input',\n styleUrl: 'sd-select-search-input.scss',\n})\nexport class SdSelectSearchInput {\n @Prop() isScrolled?: boolean = false;\n @Prop() searchText: string | null = '';\n\n @Event({ eventName: 'sdSearchInput' }) searchInput!: EventEmitter<string>;\n @Event({ eventName: 'sdSearchFocus' }) searchFocus!: EventEmitter<void>;\n\n private searchRef?: HTMLSdInputElement;\n\n @Method()\n async sdGetNativeElement(): Promise<HTMLInputElement | null> {\n  if (this.searchRef) {\n   return this.searchRef.sdGetNativeElement();\n  }\n  return null;\n }\n\n @Method()\n async sdSearchInputFocus() {\n  const input = await this.sdGetNativeElement();\n  input?.focus({ preventScroll: true });\n }\n\n render() {\n  return (\n   <div\n    class={{\n     'sd-select-search-input': true,\n     'sd-select-search-input--scrolled': !!this.isScrolled,\n    }}\n    onClick={event => event.stopPropagation()}\n   >\n    <sd-input\n     ref={el => (this.searchRef = el)}\n     value={this.searchText}\n     placeholder=\"검색\"\n     clearable\n     inputStyle={{ 'padding-left': '8px' }}\n     autofocus\n     onSdUpdate={event => {\n      this.searchInput.emit(String(event?.detail));\n     }}\n     onSdFocus={() => {\n      this.searchFocus.emit();\n     }}\n     onKeyDown={event => {\n      if (event.code === 'Enter') event.stopPropagation();\n     }}\n    >\n     <sd-icon\n      name=\"search\"\n      size={16}\n      color=\"#737373\"\n      style={{ marginRight: '4px' }}\n      slot=\"prefix\"\n     ></sd-icon>\n    </sd-input>\n   </div>\n  );\n }\n}\n"],"version":3}
+{"file":"p-BfHejNRG.js","mappings":";;;;;;;;AAAA,MAAM,sBAAsB,GAAG,MAAM,CAAC,gbAAgb,CAAC;;MCM1c,mBAAmB,iBAAAA,kBAAA,CAAA,MAAA,mBAAA,SAAAC,CAAA,CAAA;;;;;;;;;IACvB,UAAU,GAAa,KAAK;IAC5B,UAAU,GAAkB,EAAE;AAEC,IAAA,WAAW;AACX,IAAA,WAAW;AAE1C,IAAA,SAAS;AAGjB,IAAA,MAAM,kBAAkB,GAAA;AACvB,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;AACnB,YAAA,OAAO,IAAI,CAAC,SAAS,CAAC,kBAAkB,EAAE;;AAE3C,QAAA,OAAO,IAAI;;AAIZ,IAAA,MAAM,kBAAkB,GAAA;AACvB,QAAA,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,kBAAkB,EAAE;QAC7C,KAAK,EAAE,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC;;IAGtC,MAAM,GAAA;QACL,QACC,CACC,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;AACN,gBAAA,wBAAwB,EAAE,IAAI;AAC9B,gBAAA,kCAAkC,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU;AACrD,aAAA,EACD,OAAO,EAAE,KAAK,IAAI,KAAK,CAAC,eAAe,EAAE,EAAA,EAEzC,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACC,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC,EAChC,KAAK,EAAE,IAAI,CAAC,UAAU,EACtB,WAAW,EAAC,cAAI,EAChB,SAAS,QACT,UAAU,EAAE,EAAE,cAAc,EAAE,KAAK,EAAE,EACrC,SAAS,EAAA,IAAA,EACT,UAAU,EAAE,KAAK,IAAG;AACnB,gBAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;AAC7C,aAAC,EACD,SAAS,EAAE,MAAK;AACf,gBAAA,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE;AACxB,aAAC,EACD,SAAS,EAAE,KAAK,IAAG;AAClB,gBAAA,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO;oBAAE,KAAK,CAAC,eAAe,EAAE;AACpD,aAAC,EAAA,EAED,CACC,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,EAAE,EACR,KAAK,EAAC,SAAS,EACf,KAAK,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,EAC7B,IAAI,EAAC,QAAQ,EACH,CAAA,CACD,CACN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-select/sd-select-search-input/sd-select-search-input.scss?tag=sd-select-search-input","src/components/sd-select/sd-select-search-input/sd-select-search-input.tsx"],"sourcesContent":["@import 'variables';\n\nsd-select-search-input {\n position: sticky;\n top: 0;\n display: flex;\n width: 100%;\n background-color: white;\n align-items: center;\n .sd-select-search-input {\n  position: sticky;\n  top: 0;\n  display: flex;\n  width: 100%;\n  background-color: white;\n  align-items: center;\n  padding: 4px 8px;\n\n  sd-input {\n   width: 100%;\n  }\n\n  &--scrolled {\n   box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.2);\n  }\n }\n}\n","import { h, Component, Prop, Method, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'sd-select-search-input',\n styleUrl: 'sd-select-search-input.scss',\n})\nexport class SdSelectSearchInput {\n @Prop() isScrolled?: boolean = false;\n @Prop() searchText: string | null = '';\n\n @Event({ eventName: 'sdSearchInput' }) searchInput!: EventEmitter<string>;\n @Event({ eventName: 'sdSearchFocus' }) searchFocus!: EventEmitter<void>;\n\n private searchRef?: HTMLSdInputElement;\n\n @Method()\n async sdGetNativeElement(): Promise<HTMLInputElement | null> {\n  if (this.searchRef) {\n   return this.searchRef.sdGetNativeElement();\n  }\n  return null;\n }\n\n @Method()\n async sdSearchInputFocus() {\n  const input = await this.sdGetNativeElement();\n  input?.focus({ preventScroll: true });\n }\n\n render() {\n  return (\n   <div\n    class={{\n     'sd-select-search-input': true,\n     'sd-select-search-input--scrolled': !!this.isScrolled,\n    }}\n    onClick={event => event.stopPropagation()}\n   >\n    <sd-input\n     ref={el => (this.searchRef = el)}\n     value={this.searchText}\n     placeholder=\"검색\"\n     clearable\n     inputStyle={{ 'padding-left': '8px' }}\n     autofocus\n     onSdUpdate={event => {\n      this.searchInput.emit(String(event?.detail));\n     }}\n     onSdFocus={() => {\n      this.searchFocus.emit();\n     }}\n     onKeyDown={event => {\n      if (event.code === 'Enter') event.stopPropagation();\n     }}\n    >\n     <sd-icon\n      name=\"search\"\n      size={16}\n      color=\"#737373\"\n      style={{ marginRight: '4px' }}\n      slot=\"prefix\"\n     ></sd-icon>\n    </sd-input>\n   </div>\n  );\n }\n}\n"],"version":3}