@sellmate/design-system 0.0.52 → 0.0.53

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

@@ -0,0 +1,136 @@
+import { h } from "@stencil/core";
+export class SdToggleButton {
+    value = false;
+    label = '';
+    disabled = false;
+    isActive = false;
+    sdChange;
+    componentWillLoad() {
+        this.updateActiveState(this.value);
+    }
+    componentWillRender() {
+        this.updateActiveState(this.value);
+    }
+    updateActiveState(value) {
+        this.isActive = value;
+    }
+    get buttonClasses() {
+        const classes = ['sd-toggle-button'];
+        if (this.isActive) {
+            classes.push('sd-toggle-button--active');
+        }
+        if (this.disabled) {
+            classes.push('sd-toggle-button--disabled');
+        }
+        return classes.join(' ');
+    }
+    handleChange = () => {
+        if (this.disabled)
+            return;
+        const newValue = !this.value;
+        this.value = newValue;
+        this.sdChange.emit(newValue);
+    };
+    render() {
+        return (h("label", { key: 'ffa8699908132e9865ccd5b0dffafe6aa1265d8f', class: this.buttonClasses, role: "button", "aria-pressed": this.isActive.toString(), "aria-disabled": this.disabled.toString(), "aria-label": this.label || 'toggle button' }, this.label, h("input", { key: '772f24705287a4e7efac5f736b784dd3d9c0bf4d', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+    }
+    static get is() { return "sd-toggle-button"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sd-toggle-button.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sd-toggle-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value",
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isActive": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "sdChange",
+                "name": "sdChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=sd-toggle-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sd-toggle-button.js","sourceRoot":"","sources":["../../../src/components/sd-toggle-button/sd-toggle-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,KAAK,EAAE,MAAM,eAAe,CAAC;AAM/E,MAAM,OAAO,cAAc;IACc,KAAK,GAAY,KAAK,CAAC;IAEvD,KAAK,GAAW,EAAE,CAAC;IAEnB,QAAQ,GAAY,KAAK,CAAC;IAEjB,QAAQ,GAAY,KAAK,CAAC;IAElC,QAAQ,CAAyB;IAE1C,iBAAiB;QAChB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACpC,CAAC;IAED,mBAAmB;QAClB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACpC,CAAC;IAEO,iBAAiB,CAAC,KAAc;QACvC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;IACvB,CAAC;IAED,IAAY,aAAa;QACxB,MAAM,OAAO,GAAG,CAAC,kBAAkB,CAAC,CAAC;QAErC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,OAAO,CAAC,IAAI,CAAC,0BAA0B,CAAC,CAAC;QAC1C,CAAC;QAED,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,OAAO,CAAC,IAAI,CAAC,4BAA4B,CAAC,CAAC;QAC5C,CAAC;QAED,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC1B,CAAC;IAEO,YAAY,GAAG,GAAG,EAAE;QAC3B,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAE1B,MAAM,QAAQ,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC;QAC7B,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;QACtB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC9B,CAAC,CAAC;IAEF,MAAM;QACL,OAAO,CACN,8DACC,KAAK,EAAE,IAAI,CAAC,aAAa,EACzB,IAAI,EAAC,QAAQ,kBACC,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,mBACvB,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,gBAC3B,IAAI,CAAC,KAAK,IAAI,eAAe;YAExC,IAAI,CAAC,KAAK;YACX,8DAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,IAAI,EAAC,UAAU,EAAC,OAAO,EAAE,IAAI,CAAC,YAAY,GAAI,CAC1E,CACR,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Prop, h, Event, EventEmitter, State } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'sd-toggle-button',\r\n styleUrl: 'sd-toggle-button.scss',\r\n})\r\nexport class SdToggleButton {\r\n @Prop({ mutable: true, reflect: true }) value: boolean = false;\r\n\r\n @Prop() label: string = '';\r\n\r\n @Prop() disabled: boolean = false;\r\n\r\n @State() private isActive: boolean = false;\r\n\r\n @Event() sdChange!: EventEmitter<boolean>;\r\n\r\n componentWillLoad() {\r\n  this.updateActiveState(this.value);\r\n }\r\n\r\n componentWillRender() {\r\n  this.updateActiveState(this.value);\r\n }\r\n\r\n private updateActiveState(value: boolean) {\r\n  this.isActive = value;\r\n }\r\n\r\n private get buttonClasses(): string {\r\n  const classes = ['sd-toggle-button'];\r\n\r\n  if (this.isActive) {\r\n   classes.push('sd-toggle-button--active');\r\n  }\r\n\r\n  if (this.disabled) {\r\n   classes.push('sd-toggle-button--disabled');\r\n  }\r\n\r\n  return classes.join(' ');\r\n }\r\n\r\n private handleChange = () => {\r\n  if (this.disabled) return;\r\n\r\n  const newValue = !this.value;\r\n  this.value = newValue;\r\n  this.sdChange.emit(newValue);\r\n };\r\n\r\n render() {\r\n  return (\r\n   <label\r\n    class={this.buttonClasses}\r\n    role=\"button\"\r\n    aria-pressed={this.isActive.toString()}\r\n    aria-disabled={this.disabled.toString()}\r\n    aria-label={this.label || 'toggle button'}\r\n   >\r\n    {this.label}\r\n    <input style={{ display: 'none' }} type=\"checkbox\" onInput={this.handleChange} />\r\n   </label>\r\n  );\r\n }\r\n}\r\n"]}

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

@@ -43,20 +43,20 @@ export class SdTooltip {
             : {
                 onClick: () => (this.showTooltip = !this.showTooltip),
             };
-        return (h(Fragment, { key: '44ccb9c1a2e9113160ccb516e62fbd175e139f50' }, 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-tooltip", ...handleTrigger })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (h("sd-tooltip-portal", { key: '83f82f27164df34a1a8e0d1d8975b4f89a82691a', parentRef: this.buttonEl, onSdClose: () => this.handleClose(), placement: this.placement }, h("div", { key: '544085a133cdbbe707ec0c2be35a9a42cd2372bc', class: {
+        return (h(Fragment, { key: 'a4cd9f882795ef5b39a877b004e7d51fccecbfcb' }, 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-tooltip", ...handleTrigger })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (h("sd-tooltip-portal", { key: 'b9128e35e1f28869d0d163088f54b631c9104bf9', parentRef: this.buttonEl, onSdClose: () => this.handleClose(), placement: this.placement }, h("div", { key: '0a6db1e8478f25fd43735ac0cd8977ce2bce5ef6', class: {
                 'sd-tooltip-menu': true,
                 [`sd-tooltip-menu--${this.type}`]: true,
                 [`sd-tooltip-menu--${this.placement}`]: true,
                 'sd-tooltip-menu--with-close': this.useClose,
                 [`bg-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,
                 [`text-${SdTooltip.COLOR_OF_TYPE[this.type].text}`]: true,
-            } }, h("i", { key: '4b335754d346d6ae244e83ccdcae25edf05a306a', class: `sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '567fc901e95b918fb0883f9c241836a10e1e58e9', class: {
+            } }, h("i", { key: '176b79ce7db54479f2690aca9ae98252e1dfacd4', class: `sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: 'aa1f0d7da5135713d1d51ed2852210895d707931', class: {
                 [`text-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,
-            } })), h("div", { key: '1475d6f5d76f4e3860e2524cb571eb2704460203', class: "sd-tooltip-menu__content", ref: el => {
+            } })), h("div", { key: '147d42745d18180e92a81ed60404697afd6ea1e5', class: "sd-tooltip-menu__content", ref: el => {
                 if (el && this.slotContent && !el.hasChildNodes()) {
                     el.appendChild(this.slotContent.cloneNode(true));
                 }
-            } }, !this.slotContent && h("span", { key: 'f821b0aa74de05c7728b06a2bd78367e43703684' }, this.el.textContent)), this.useClose && (h("div", { key: '2068c369ef957cb25b9ec74e22e2c78f9ffa6232', class: "sd-tooltip-menu__close-button" }, h("button", { key: 'f61156a86ce1b3fd4f2fb97e507711f9602ac157', type: "button", "aria-label": "Close tooltip", title: "Close tooltip", onClick: () => this.handleClose() }, h("sd-icon", { key: '3ba6f3f4dc5379eb2d13aecb9ec1d5d6fdf20dec', name: "close", size: "12", color: "#AAAAAA" })))))))));
+            } }, !this.slotContent && h("span", { key: '6204dc0ed996aa8c70cbb12a1388ed8ebce20552' }, this.el.textContent)), this.useClose && (h("div", { key: '7cb4aebb0077b2b17b78e2b2f82cfd90711cfc5f', class: "sd-tooltip-menu__close-button" }, h("button", { key: 'f14b75687492169c4c24e7840c9e0907b2161ea2', type: "button", "aria-label": "Close tooltip", title: "Close tooltip", onClick: () => this.handleClose() }, h("sd-icon", { key: 'fcf6ca6fa0c2a349ef0a6710399ab27e5ceffd3f', name: "close", size: "12", color: "#AAAAAA" })))))))));
     }
     static get is() { return "sd-tooltip"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-tooltip-portal/sd-tooltip-portal.js

@@ -144,7 +144,7 @@ export class SdTooltipPortal {
         this.sdClose.emit();
     }
     render() {
-        return h("slot", { key: '912ff6aba4bae810c40c95325ffb1109ddcfddbb' });
+        return h("slot", { key: 'e6c37c753808b41beeeefa5f04bdf543a48eaa05' });
     }
     static get is() { return "sd-tooltip-portal"; }
     static get encapsulation() { return "shadow"; }

package/dist/components/index.js

@@ -1,4 +1,4 @@
-export { g as getAssetPath, r as render, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-TFWJruz2.js';
+export { g as getAssetPath, r as render, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-CQBrru3e.js';
 
 function format(first, middle, last) {
     return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');

package/dist/components/p-71Aop19u.js

@@ -0,0 +1,109 @@
+import { p as proxyCustomElement, H, d as createEvent, h, t as transformTag } from './p-CQBrru3e.js';
+import { d as defineCustomElement$2 } from './p-C7kMNSz9.js';
+import { d as defineCustomElement$1 } from './p-CV5tKC24.js';
+
+const sdSelectOptionGroupCss = () => `sd-select-option-group{display:block;height:fit-content}sd-select-option-group .sd-select__option-group{display:flex;padding:4px 12px;padding-left:12px;font-size:12px;line-height:20px;cursor:pointer}sd-select-option-group .sd-select__option-group.sd-select__option-group--group:not(.sd-select__option-group--use-checkbox),sd-select-option-group .sd-select__option-group.sd-select__option-group--subgroup:not(.sd-select__option-group--use-checkbox){cursor:default !important}sd-select-option-group .sd-select__option-group.sd-select__option-group--group{background-color:#f5faff !important;color:#333333 !important;font-weight:700}sd-select-option-group .sd-select__option-group.sd-select__option-group--subgroup{padding-left:20px;background-color:#f9f9f9 !important;color:#333333 !important;font-weight:500}sd-select-option-group .sd-select__option-group.sd-select__option-group--item{padding-left:28px}sd-select-option-group .sd-select__option-group sd-checkbox__bg{border-color:#888888}sd-select-option-group .sd-select__option-group__label-wrapper{display:flex;width:100%;column-gap:8px;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}sd-select-option-group .sd-select__option-group__label-wrapper sd-checkbox{flex-shrink:0}sd-select-option-group .sd-select__option-group__label-wrapper .sd-select__option-group-label{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}sd-select-option-group .sd-select__option-group__label-wrapper .sd-select__option-group__count-indicator{width:fit-content;flex-shrink:0;font-size:12px;font-weight:500;color:#888888}sd-select-option-group .sd-select__option-group--focused{background-color:#e6f1ff}sd-select-option-group .sd-select__option-group--selected.sd-select__option-group--item:not(:hover):not(.sd-select__option-group--use-checkbox),sd-select-option-group .sd-select__option-group--focused.sd-select__option-group--item:not(:hover):not(.sd-select__option-group--use-checkbox){color:#0075ff;font-weight:700}sd-select-option-group .sd-select__option-group--disabled{color:#aaaaaa;cursor:not-allowed}sd-select-option-group .sd-select__option-group:hover:not(.sd-select__option-group--disabled){background-color:#0075ff;color:white}sd-select-option-group .sd-select__option-group:hover.sd-select__option-group--selected:not(.sd-select__option-group--group):not(.sd-select__option-group--subgroup) sd-checkbox .sd-checkbox__bg{border-color:white !important}`;
+
+const SdSelectOptionGroup = /*@__PURE__*/ proxyCustomElement(class SdSelectOptionGroup extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.optionClick = createEvent(this, "optionClick");
+    }
+    get el() { return this; }
+    option;
+    index;
+    isSelected = false;
+    isFocused = false;
+    optionStyle;
+    disabled = false;
+    useCheckbox = false;
+    useIndicator = true;
+    countInfo = {
+        selectedCount: 0,
+        totalCount: 0,
+    };
+    isHovered = false;
+    async isDisabled() {
+        return !!this.option.disabled || this.option.type === 'group' || this.option.type === 'subgroup';
+    }
+    optionClick;
+    handleClick = (option, isSelected, event) => {
+        event.stopPropagation();
+        if (option.type === 'group' || option.type === 'subgroup') {
+            this.optionClick.emit({
+                option: this.option,
+                isSelected,
+                index: this.index,
+                event,
+            });
+            return;
+        }
+        if (!this.option.disabled && !this.disabled) {
+            this.optionClick.emit({
+                option: this.option,
+                isSelected,
+                index: this.index,
+                event,
+            });
+        }
+    };
+    render() {
+        return (h("div", { key: 'db08c9cdb5179cccfa040fa03e06f286231bc83f', class: {
+                'sd-select__option-group': true,
+                'sd-select__option-group--selected': !!this.isSelected,
+                'sd-select__option-group--disabled': !!this.option.disabled,
+                'sd-select__option-group--focused': this.isFocused,
+                'sd-select__option-group--use-checkbox': this.useCheckbox,
+                '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: 'b723d71ef120c5d51f0ab859177d67814411ceaa', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (h("sd-checkbox", { key: '1630dfc22fb2ec65c186282f499ec4e6f93a228d', checked: this.isSelected, disabled: this.option.disabled, onClick: e => {
+                e.preventDefault();
+                this.handleClick(this.option, this.isSelected, e);
+            } })), h("span", { key: '97802250891eca095172dae897bb957e49f9b5e3', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (h("span", { key: '96fe449b31bce677693f2ad325a6529fc4b264e3', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
+    }
+    static get style() { return sdSelectOptionGroupCss(); }
+}, [768, "sd-select-option-group", {
+        "option": [16],
+        "index": [2],
+        "isSelected": [4, "is-selected"],
+        "isFocused": [4, "is-focused"],
+        "optionStyle": [16],
+        "disabled": [4],
+        "useCheckbox": [4, "use-checkbox"],
+        "useIndicator": [4, "use-indicator"],
+        "countInfo": [16],
+        "isHovered": [32],
+        "isDisabled": [64]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["sd-select-option-group", "sd-checkbox", "sd-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "sd-select-option-group":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), SdSelectOptionGroup);
+            }
+            break;
+        case "sd-checkbox":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$2();
+            }
+            break;
+        case "sd-icon":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { SdSelectOptionGroup as S, defineCustomElement as d };
+//# sourceMappingURL=p-71Aop19u.js.map
+
+//# sourceMappingURL=p-71Aop19u.js.map

package/dist/{design-system/sd-select-option-group.entry.esm.js.map → components/p-71Aop19u.js.map}

@@ -1 +1 @@
-{"version":3,"file":"sd-select-option-group.entry.esm.js","sources":["src/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.scss?tag=sd-select-option-group","src/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.tsx"],"sourcesContent":["@import 'variables';\r\n\r\nsd-select-option-group {\r\n display: block;\r\n height: fit-content;\r\n .sd-select__option-group {\r\n  display: flex;\r\n  padding: 4px 12px;\r\n  padding-left: 12px;\r\n  font-size: 12px;\r\n  line-height: 20px;\r\n  cursor: pointer;\r\n\r\n  &.sd-select__option-group--group,\r\n  &.sd-select__option-group--subgroup {\r\n   &:not(.sd-select__option-group--use-checkbox) {\r\n    cursor: default !important;\r\n   }\r\n  }\r\n\r\n  &.sd-select__option-group--group {\r\n   background-color: $brilliantblue_05 !important;\r\n   color: $grey_90 !important;\r\n   font-weight: 700;\r\n  }\r\n\r\n  &.sd-select__option-group--subgroup {\r\n   padding-left: 20px;\r\n   background-color: $grey_05 !important;\r\n   color: $grey_90 !important;\r\n   font-weight: 500;\r\n  }\r\n\r\n  &.sd-select__option-group--item {\r\n   padding-left: 28px;\r\n  }\r\n\r\n  sd-checkbox {\r\n   &__bg {\r\n    border-color: $grey_65;\r\n   }\r\n  }\r\n\r\n  &__label-wrapper {\r\n   display: flex;\r\n   width: 100%;\r\n   column-gap: 8px;\r\n   align-items: center;\r\n   overflow: hidden;\r\n   white-space: nowrap;\r\n   text-overflow: ellipsis;\r\n\r\n   sd-checkbox {\r\n    flex-shrink: 0;\r\n   }\r\n\r\n   .sd-select__option-group-label {\r\n    flex: 0 1 auto;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n    white-space: nowrap;\r\n   }\r\n\r\n   .sd-select__option-group__count-indicator {\r\n    width: fit-content;\r\n    flex-shrink: 0;\r\n    font-size: 12px;\r\n    font-weight: 500;\r\n    color: $grey_65;\r\n   }\r\n  }\r\n\r\n  &--focused {\r\n   background-color: $brilliantblue_20;\r\n  }\r\n\r\n  &--selected,\r\n  &--focused {\r\n   &.sd-select__option-group--item:not(:hover):not(.sd-select__option-group--use-checkbox) {\r\n    color: $brilliantblue_75;\r\n    font-weight: 700;\r\n   }\r\n  }\r\n\r\n  &--disabled {\r\n   color: $grey_55;\r\n   cursor: not-allowed;\r\n  }\r\n\r\n  &:hover {\r\n   &:not(.sd-select__option-group--disabled) {\r\n    background-color: $brilliantblue_75;\r\n    color: white;\r\n   }\r\n\r\n   &.sd-select__option-group--selected {\r\n    &:not(.sd-select__option-group--group):not(.sd-select__option-group--subgroup) {\r\n     sd-checkbox {\r\n      .sd-checkbox__bg {\r\n       border-color: white !important;\r\n      }\r\n     }\r\n    }\r\n   }\r\n  }\r\n }\r\n}\r\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\r\nimport { SelectOptionGroup } from '../../sd-select/sd-select';\r\n\r\n@Component({\r\n tag: 'sd-select-option-group',\r\n styleUrl: 'sd-select-option-group.scss',\r\n})\r\nexport class SdSelectOptionGroup {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() option!: SelectOptionGroup;\r\n @Prop() index!: number;\r\n @Prop() isSelected: boolean | null = false;\r\n @Prop() isFocused: boolean = false;\r\n @Prop() optionStyle?: { [key: string]: string };\r\n @Prop() disabled: boolean = false;\r\n @Prop() useCheckbox: boolean = false;\r\n @Prop() useIndicator?: boolean = true;\r\n @Prop() countInfo?: { selectedCount: number; totalCount: number } = {\r\n  selectedCount: 0,\r\n  totalCount: 0,\r\n };\r\n\r\n @State() isHovered: boolean = false;\r\n\r\n @Method()\r\n async isDisabled(): Promise<boolean> {\r\n  return !!this.option.disabled || this.option.type === 'group' || this.option.type === 'subgroup';\r\n }\r\n\r\n @Event() optionClick!: EventEmitter<{\r\n  option: SelectOptionGroup;\r\n  isSelected: boolean | null;\r\n  index: number;\r\n  event: MouseEvent;\r\n }>;\r\n\r\n private handleClick = (\r\n  option: SelectOptionGroup,\r\n  isSelected: boolean | null,\r\n  event: MouseEvent,\r\n ) => {\r\n  event.stopPropagation();\r\n\r\n  if (option.type === 'group' || option.type === 'subgroup') {\r\n   this.optionClick.emit({\r\n    option: this.option,\r\n    isSelected,\r\n    index: this.index,\r\n    event,\r\n   });\r\n   return;\r\n  }\r\n\r\n  if (!this.option.disabled && !this.disabled) {\r\n   this.optionClick.emit({\r\n    option: this.option,\r\n    isSelected,\r\n    index: this.index,\r\n    event,\r\n   });\r\n  }\r\n };\r\n\r\n render() {\r\n  return (\r\n   <div\r\n    class={{\r\n     'sd-select__option-group': true,\r\n     'sd-select__option-group--selected': !!this.isSelected,\r\n     'sd-select__option-group--disabled': !!this.option.disabled,\r\n     'sd-select__option-group--focused': this.isFocused,\r\n     'sd-select__option-group--use-checkbox': this.useCheckbox,\r\n     'sd-select__option-group--group': this.option.type === 'group',\r\n     'sd-select__option-group--subgroup': this.option.type === 'subgroup',\r\n     'sd-select__option-group--item': this.option.type === 'item',\r\n    }}\r\n    onMouseEnter={() => (this.isHovered = true)}\r\n    onMouseLeave={() => (this.isHovered = false)}\r\n    style={this.optionStyle}\r\n    data-index={this.index}\r\n    onClick={event => this.handleClick(this.option, this.isSelected, event)}\r\n   >\r\n    <div class=\"sd-select__option-group__label-wrapper\">\r\n     {this.useCheckbox && (\r\n      <sd-checkbox\r\n       checked={this.isSelected}\r\n       disabled={this.option.disabled}\r\n       onClick={e => {\r\n        e.preventDefault();\r\n        this.handleClick(this.option, this.isSelected, e);\r\n       }}\r\n      ></sd-checkbox>\r\n     )}\r\n     <span class=\"sd-select__option-group-label\">{this.option.label}</span>\r\n     {this.useIndicator && this.option.type !== 'item' && (\r\n      <span class=\"sd-select__option-group__count-indicator\">{`(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`}</span>\r\n     )}\r\n    </div>\r\n   </div>\r\n  );\r\n }\r\n}\r\n"],"names":[],"mappings":";;AAAA,MAAM,sBAAsB,GAAG,m5EAAm5E;;MCOr6E,mBAAmB,GAAA,MAAA;;;;;;AAGvB,IAAA,MAAM;AACN,IAAA,KAAK;IACL,UAAU,GAAmB,KAAK;IAClC,SAAS,GAAY,KAAK;AAC1B,IAAA,WAAW;IACX,QAAQ,GAAY,KAAK;IACzB,WAAW,GAAY,KAAK;IAC5B,YAAY,GAAa,IAAI;AAC7B,IAAA,SAAS,GAAmD;AACnE,QAAA,aAAa,EAAE,CAAC;AAChB,QAAA,UAAU,EAAE,CAAC;KACb;IAEQ,SAAS,GAAY,KAAK;AAGnC,IAAA,MAAM,UAAU,GAAA;QACf,OAAO,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,KAAK,OAAO,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,KAAK,UAAU;;AAGxF,IAAA,WAAW;IAOZ,WAAW,GAAG,CACrB,MAAyB,EACzB,UAA0B,EAC1B,KAAiB,KACd;QACH,KAAK,CAAC,eAAe,EAAE;AAEvB,QAAA,IAAI,MAAM,CAAC,IAAI,KAAK,OAAO,IAAI,MAAM,CAAC,IAAI,KAAK,UAAU,EAAE;AAC1D,YAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;gBACrB,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,UAAU;gBACV,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,KAAK;AACL,aAAA,CAAC;YACF;;AAGD,QAAA,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAC5C,YAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;gBACrB,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,UAAU;gBACV,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,KAAK;AACL,aAAA,CAAC;;AAEJ,KAAC;IAED,MAAM,GAAA;QACL,QACC,CACC,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;AACN,gBAAA,yBAAyB,EAAE,IAAI;AAC/B,gBAAA,mCAAmC,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU;AACtD,gBAAA,mCAAmC,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ;gBAC3D,kCAAkC,EAAE,IAAI,CAAC,SAAS;gBAClD,uCAAuC,EAAE,IAAI,CAAC,WAAW;AACzD,gBAAA,gCAAgC,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,KAAK,OAAO;AAC9D,gBAAA,mCAAmC,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,KAAK,UAAU;AACpE,gBAAA,+BAA+B,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,KAAK,MAAM;aAC5D,EACD,YAAY,EAAE,OAAO,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAC3C,YAAY,EAAE,OAAO,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,EAC5C,KAAK,EAAE,IAAI,CAAC,WAAW,EAAA,YAAA,EACX,IAAI,CAAC,KAAK,EACtB,OAAO,EAAE,KAAK,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,UAAU,EAAE,KAAK,CAAC,EAAA,EAEvE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wCAAwC,EAAA,EACjD,IAAI,CAAC,WAAW,KAChB,oEACC,OAAO,EAAE,IAAI,CAAC,UAAU,EACxB,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ,EAC9B,OAAO,EAAE,CAAC,IAAG;gBACZ,CAAC,CAAC,cAAc,EAAE;AAClB,gBAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC;AAClD,aAAC,GACa,CACf,EACD,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,+BAA+B,EAAA,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,CAAQ,EACrE,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,KAAK,MAAM,KAChD,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,0CAA0C,EAAA,EAAE,CAAA,CAAA,EAAI,IAAI,CAAC,SAAS,EAAE,aAAa,CAAA,CAAA,EAAI,IAAI,CAAC,SAAS,EAAE,UAAU,GAAG,CAAQ,CAClI,CACI,CACD;;;;;;;"}
+{"file":"p-71Aop19u.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.scss?tag=sd-select-option-group","src/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.tsx"],"sourcesContent":["@import 'variables';\r\n\r\nsd-select-option-group {\r\n display: block;\r\n height: fit-content;\r\n .sd-select__option-group {\r\n  display: flex;\r\n  padding: 4px 12px;\r\n  padding-left: 12px;\r\n  font-size: 12px;\r\n  line-height: 20px;\r\n  cursor: pointer;\r\n\r\n  &.sd-select__option-group--group,\r\n  &.sd-select__option-group--subgroup {\r\n   &:not(.sd-select__option-group--use-checkbox) {\r\n    cursor: default !important;\r\n   }\r\n  }\r\n\r\n  &.sd-select__option-group--group {\r\n   background-color: $brilliantblue_05 !important;\r\n   color: $grey_90 !important;\r\n   font-weight: 700;\r\n  }\r\n\r\n  &.sd-select__option-group--subgroup {\r\n   padding-left: 20px;\r\n   background-color: $grey_05 !important;\r\n   color: $grey_90 !important;\r\n   font-weight: 500;\r\n  }\r\n\r\n  &.sd-select__option-group--item {\r\n   padding-left: 28px;\r\n  }\r\n\r\n  sd-checkbox {\r\n   &__bg {\r\n    border-color: $grey_65;\r\n   }\r\n  }\r\n\r\n  &__label-wrapper {\r\n   display: flex;\r\n   width: 100%;\r\n   column-gap: 8px;\r\n   align-items: center;\r\n   overflow: hidden;\r\n   white-space: nowrap;\r\n   text-overflow: ellipsis;\r\n\r\n   sd-checkbox {\r\n    flex-shrink: 0;\r\n   }\r\n\r\n   .sd-select__option-group-label {\r\n    flex: 0 1 auto;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n    white-space: nowrap;\r\n   }\r\n\r\n   .sd-select__option-group__count-indicator {\r\n    width: fit-content;\r\n    flex-shrink: 0;\r\n    font-size: 12px;\r\n    font-weight: 500;\r\n    color: $grey_65;\r\n   }\r\n  }\r\n\r\n  &--focused {\r\n   background-color: $brilliantblue_20;\r\n  }\r\n\r\n  &--selected,\r\n  &--focused {\r\n   &.sd-select__option-group--item:not(:hover):not(.sd-select__option-group--use-checkbox) {\r\n    color: $brilliantblue_75;\r\n    font-weight: 700;\r\n   }\r\n  }\r\n\r\n  &--disabled {\r\n   color: $grey_55;\r\n   cursor: not-allowed;\r\n  }\r\n\r\n  &:hover {\r\n   &:not(.sd-select__option-group--disabled) {\r\n    background-color: $brilliantblue_75;\r\n    color: white;\r\n   }\r\n\r\n   &.sd-select__option-group--selected {\r\n    &:not(.sd-select__option-group--group):not(.sd-select__option-group--subgroup) {\r\n     sd-checkbox {\r\n      .sd-checkbox__bg {\r\n       border-color: white !important;\r\n      }\r\n     }\r\n    }\r\n   }\r\n  }\r\n }\r\n}\r\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\r\nimport { SelectOptionGroup } from '../../sd-select/sd-select';\r\n\r\n@Component({\r\n tag: 'sd-select-option-group',\r\n styleUrl: 'sd-select-option-group.scss',\r\n})\r\nexport class SdSelectOptionGroup {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() option!: SelectOptionGroup;\r\n @Prop() index!: number;\r\n @Prop() isSelected: boolean | null = false;\r\n @Prop() isFocused: boolean = false;\r\n @Prop() optionStyle?: { [key: string]: string };\r\n @Prop() disabled: boolean = false;\r\n @Prop() useCheckbox: boolean = false;\r\n @Prop() useIndicator?: boolean = true;\r\n @Prop() countInfo?: { selectedCount: number; totalCount: number } = {\r\n  selectedCount: 0,\r\n  totalCount: 0,\r\n };\r\n\r\n @State() isHovered: boolean = false;\r\n\r\n @Method()\r\n async isDisabled(): Promise<boolean> {\r\n  return !!this.option.disabled || this.option.type === 'group' || this.option.type === 'subgroup';\r\n }\r\n\r\n @Event() optionClick!: EventEmitter<{\r\n  option: SelectOptionGroup;\r\n  isSelected: boolean | null;\r\n  index: number;\r\n  event: MouseEvent;\r\n }>;\r\n\r\n private handleClick = (\r\n  option: SelectOptionGroup,\r\n  isSelected: boolean | null,\r\n  event: MouseEvent,\r\n ) => {\r\n  event.stopPropagation();\r\n\r\n  if (option.type === 'group' || option.type === 'subgroup') {\r\n   this.optionClick.emit({\r\n    option: this.option,\r\n    isSelected,\r\n    index: this.index,\r\n    event,\r\n   });\r\n   return;\r\n  }\r\n\r\n  if (!this.option.disabled && !this.disabled) {\r\n   this.optionClick.emit({\r\n    option: this.option,\r\n    isSelected,\r\n    index: this.index,\r\n    event,\r\n   });\r\n  }\r\n };\r\n\r\n render() {\r\n  return (\r\n   <div\r\n    class={{\r\n     'sd-select__option-group': true,\r\n     'sd-select__option-group--selected': !!this.isSelected,\r\n     'sd-select__option-group--disabled': !!this.option.disabled,\r\n     'sd-select__option-group--focused': this.isFocused,\r\n     'sd-select__option-group--use-checkbox': this.useCheckbox,\r\n     'sd-select__option-group--group': this.option.type === 'group',\r\n     'sd-select__option-group--subgroup': this.option.type === 'subgroup',\r\n     'sd-select__option-group--item': this.option.type === 'item',\r\n    }}\r\n    onMouseEnter={() => (this.isHovered = true)}\r\n    onMouseLeave={() => (this.isHovered = false)}\r\n    style={this.optionStyle}\r\n    data-index={this.index}\r\n    onClick={event => this.handleClick(this.option, this.isSelected, event)}\r\n   >\r\n    <div class=\"sd-select__option-group__label-wrapper\">\r\n     {this.useCheckbox && (\r\n      <sd-checkbox\r\n       checked={this.isSelected}\r\n       disabled={this.option.disabled}\r\n       onClick={e => {\r\n        e.preventDefault();\r\n        this.handleClick(this.option, this.isSelected, e);\r\n       }}\r\n      ></sd-checkbox>\r\n     )}\r\n     <span class=\"sd-select__option-group-label\">{this.option.label}</span>\r\n     {this.useIndicator && this.option.type !== 'item' && (\r\n      <span class=\"sd-select__option-group__count-indicator\">{`(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`}</span>\r\n     )}\r\n    </div>\r\n   </div>\r\n  );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/{p-DiehM5Y0.js → p-B05GJor3.js}

@@ -1,8 +1,8 @@
-import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-TFWJruz2.js';
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host, t as transformTag } from './p-CQBrru3e.js';
 import { r as resolveColor } from './p-BYf-ybt2.js';
-import { d as defineCustomElement$1 } from './p-BsyfatBe.js';
+import { d as defineCustomElement$1 } from './p-CV5tKC24.js';
 
-const sdButtonCss = "sd-button{display:inline-block;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}.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}";
+const sdButtonCss = () => `sd-button{display:inline-block;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}.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}`;
 
 const ICON_SIZES = {
     xs: 12,
@@ -62,7 +62,7 @@ const SdButton = /*@__PURE__*/ proxyCustomElement(class SdButton extends H {
         const resolvedColor = resolveColor(this.color);
         return (h(Host, { key: 'b30c8006e2f187fb971bcd47f8ce4a91d1dc47a6', style: { '--button-color': resolvedColor } }, h("button", { key: 'f494c93fc0b9d55537b468f5c6458569df962633', class: `${buttonClasses} ${this.class}`, type: this.type, disabled: this.disabled, onClick: this.handleClick }, h("div", { key: '7d64a6526baeac8569cccc60d9befacef3e3777d', class: "sd-button__content" }, this.icon && (h("sd-icon", { key: '9439e9456783aa5b057d383252a6b0c45a44b588', class: "sd-button__icon sd-button__icon--left", name: this.icon, size: this.iconSize ? this.iconSize : ICON_SIZES[this.size], color: this.iconColor ? this.iconColor : this.variant === 'primary' ? '#fff' : resolvedColor })), this.label && h("div", { key: '324371a6f8864c444cda39e7b349b4c9ec19b7f6', class: "sd-button__label" }, this.label), this.iconRight && (h("sd-icon", { key: '733790ceda6e1822c71911b17e66f527936b15a2', class: "sd-button__icon sd-button__icon--right", name: this.iconRight, size: ICON_SIZES[this.size], color: this.variant === 'primary' ? '#fff' : resolvedColor }))))));
     }
-    static get style() { return sdButtonCss; }
+    static get style() { return sdButtonCss(); }
 }, [768, "sd-button", {
         "variant": [1],
         "size": [1],
@@ -84,12 +84,12 @@ function defineCustomElement() {
     const components = ["sd-button", "sd-icon"];
     components.forEach(tagName => { switch (tagName) {
         case "sd-button":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SdButton);
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), SdButton);
             }
             break;
         case "sd-icon":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$1();
             }
             break;
@@ -97,6 +97,6 @@ function defineCustomElement() {
 }
 
 export { SdButton as S, defineCustomElement as d };
-//# sourceMappingURL=p-DiehM5Y0.js.map
+//# sourceMappingURL=p-B05GJor3.js.map
 
-//# sourceMappingURL=p-DiehM5Y0.js.map
+//# sourceMappingURL=p-B05GJor3.js.map

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

@@ -0,0 +1 @@
+{"file":"p-B05GJor3.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';\r\n\r\nsd-button {\r\n display: inline-block;\r\n width: fit-content;\r\n height: fit-content;\r\n}\r\n\r\n.sd-button {\r\n text-decoration: none;\r\n cursor: pointer;\r\n border-radius: 4px;\r\n transition: all 0.2s ease-in-out;\r\n position: relative;\r\n overflow: hidden;\r\n white-space: nowrap;\r\n -webkit-user-select: none;\r\n user-select: none;\r\n box-sizing: border-box;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n &--xs {\r\n  padding: 0 8px;\r\n  font-size: 12px;\r\n  font-weight: 500;\r\n  line-height: 20px;\r\n  min-height: 24px;\r\n }\r\n &--sm {\r\n  padding: 0 12px;\r\n  font-size: 12px;\r\n  font-weight: 500;\r\n  line-height: 20px;\r\n  min-height: 28px;\r\n }\r\n &--md {\r\n  padding: 0 20px;\r\n  font-size: 16px;\r\n  font-weight: 500;\r\n  line-height: 26px;\r\n  min-height: 34px;\r\n }\r\n &--lg {\r\n  padding: 0 28px;\r\n  font-size: 18px;\r\n  font-weight: 500;\r\n  line-height: 30px;\r\n  min-height: 62px;\r\n }\r\n &--primary {\r\n  background-color: var(--button-color);\r\n  color: white;\r\n  transition: filter 0.2s ease;\r\n\r\n  &::before {\r\n   content: '';\r\n   position: absolute;\r\n   inset: 0;\r\n   background: #000000;\r\n   opacity: 0;\r\n   transition: opacity 0.2s ease;\r\n   z-index: 0;\r\n  }\r\n\r\n  &:hover:not(.sd-button--disabled):not(.sd-button--loading)::before {\r\n   opacity: 0.25;\r\n  }\r\n }\r\n\r\n &--outline {\r\n  background: white;\r\n  border: 1px solid var(--button-color);\r\n  color: var(--button-color);\r\n\r\n  &::before {\r\n   content: '';\r\n   position: absolute;\r\n   inset: 0;\r\n   background: var(--button-color);\r\n   opacity: 0;\r\n   transition: opacity 0.2s ease;\r\n   z-index: 0;\r\n  }\r\n\r\n  &:hover:not(.sd-button--disabled):not(.sd-button--loading)::before {\r\n   opacity: 0.15;\r\n  }\r\n\r\n  .sd-button__content {\r\n   position: relative;\r\n   z-index: 1;\r\n  }\r\n }\r\n &--ghost {\r\n  background-color: transparent;\r\n  color: var(--button-color);\r\n  border-color: transparent;\r\n\r\n  &::before {\r\n   content: '';\r\n   position: absolute;\r\n   inset: 0;\r\n   background: var(--button-color);\r\n   opacity: 0;\r\n   transition: opacity 0.2s ease;\r\n   z-index: 0;\r\n  }\r\n\r\n  &:hover:not(.sd-button--disabled):not(.sd-button--loading)::before {\r\n   opacity: 0.15;\r\n  }\r\n\r\n  .sd-button__content {\r\n   position: relative;\r\n   z-index: 1;\r\n  }\r\n }\r\n &--disabled {\r\n  border: 1px solid $grey_45;\r\n  background: $grey_30;\r\n  color: $grey_65;\r\n  cursor: not-allowed !important;\r\n }\r\n &--icon-only {\r\n  padding: 0;\r\n  width: fit-content;\r\n  height: fit-content;\r\n  aspect-ratio: 1 / 1;\r\n }\r\n &--no-hover {\r\n  &:hover::before {\r\n   opacity: 0 !important;\r\n  }\r\n }\r\n\r\n .sd-button__content {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 4px;\r\n\r\n  z-index: 1;\r\n  font-weight: 500;\r\n }\r\n}\r\n\r\n// /* Focus styles */\r\n// .sd-button:focus-visible {\r\n//  outline: 2px solid $primary;\r\n//  outline-offset: 2px;\r\n// }\r\n\r\n// /* High contrast mode support */\r\n// @media (prefers-contrast: high) {\r\n//  .sd-button {\r\n//   border-width: 2px;\r\n//  }\r\n// }\r\n","import { Component, Prop, h, Element, Event, EventEmitter, Host } from '@stencil/core';\r\nimport { resolveColor } from '../../utils/color';\r\n\r\nexport type ButtonVariant = 'primary' | 'outline' | 'ghost';\r\nexport type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';\r\n\r\nconst ICON_SIZES: { [key in ButtonSize]: number } = {\r\n xs: 12,\r\n sm: 16,\r\n md: 20,\r\n lg: 24,\r\n};\r\n\r\n@Component({\r\n tag: 'sd-button',\r\n styleUrl: 'sd-button.scss',\r\n})\r\nexport class SdButton {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() variant?: ButtonVariant = 'primary';\r\n @Prop() size: ButtonSize = 'sm';\r\n @Prop() color: string = '#025497';\r\n @Prop() label: string = '';\r\n @Prop() disabled: boolean = false;\r\n @Prop() type: 'button' | 'submit' | 'reset' = 'button';\r\n @Prop() icon?: IconName;\r\n @Prop() iconColor?: string;\r\n @Prop() iconSize?: number;\r\n @Prop() iconRight?: IconName;\r\n @Prop() noHover: boolean = false;\r\n @Prop() class: string = '';\r\n @Event() sdClick!: EventEmitter<MouseEvent>;\r\n\r\n private handleClick = (event: MouseEvent) => {\r\n  if (this.disabled) {\r\n   event.preventDefault();\r\n   event.stopPropagation();\r\n   return;\r\n  }\r\n  this.sdClick.emit(event);\r\n };\r\n\r\n private getButtonClasses(): string {\r\n  const classes = ['sd-button'];\r\n\r\n  classes.push(`sd-button--${this.variant}`);\r\n  classes.push(`sd-button--${this.size}`);\r\n  classes.push(`sd-button--color-${this.color}`);\r\n\r\n  if (this.disabled) {\r\n   classes.push('sd-button--disabled');\r\n  }\r\n\r\n  if (!this.label && (this.icon || this.iconRight)) {\r\n   classes.push('sd-button--icon-only');\r\n  }\r\n\r\n  if (this.noHover) {\r\n   classes.push('sd-button--no-hover');\r\n  }\r\n\r\n  return classes.join(' ');\r\n }\r\n\r\n render() {\r\n  const buttonClasses = this.getButtonClasses();\r\n  // 유틸로 색상 키 -> HEX 매핑 (없으면 원본 그대로)\r\n  const resolvedColor = resolveColor(this.color);\r\n\r\n  return (\r\n   <Host style={{ '--button-color': resolvedColor }}>\r\n    <button\r\n     class={`${buttonClasses} ${this.class}`}\r\n     type={this.type}\r\n     disabled={this.disabled}\r\n     onClick={this.handleClick}\r\n    >\r\n     <div class=\"sd-button__content\">\r\n      {this.icon && (\r\n       <sd-icon\r\n        class=\"sd-button__icon sd-button__icon--left\"\r\n        name={this.icon}\r\n        size={this.iconSize ? this.iconSize : ICON_SIZES[this.size!]}\r\n        color={\r\n         this.iconColor ? this.iconColor : this.variant === 'primary' ? '#fff' : resolvedColor\r\n        }\r\n       ></sd-icon>\r\n      )}\r\n\r\n      {this.label && <div class=\"sd-button__label\">{this.label}</div>}\r\n\r\n      {this.iconRight && (\r\n       <sd-icon\r\n        class=\"sd-button__icon sd-button__icon--right\"\r\n        name={this.iconRight}\r\n        size={ICON_SIZES[this.size!]}\r\n        color={this.variant === 'primary' ? '#fff' : resolvedColor}\r\n       ></sd-icon>\r\n      )}\r\n     </div>\r\n    </button>\r\n   </Host>\r\n  );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/{p-9kN1E6Ra.js → p-B13lOU0D.js}

@@ -1,12 +1,12 @@
-import { p as proxyCustomElement, d as createEvent, h, c as Host } from './p-TFWJruz2.js';
-import { B as BaseDropdownEvent, S as SelectKeyboardNavigation } from './p-BpNH68jy.js';
-import { d as defineCustomElement$5 } from './p-CkKxyn_K.js';
-import { d as defineCustomElement$4 } from './p-BsyfatBe.js';
-import { d as defineCustomElement$3 } from './p-C6tAa8Q4.js';
-import { d as defineCustomElement$2 } from './p-Dgxczhd0.js';
-import { d as defineCustomElement$1 } from './p-DyGUXuvD.js';
+import { p as proxyCustomElement, d as createEvent, h, c as Host, t as transformTag } from './p-CQBrru3e.js';
+import { B as BaseDropdownEvent, S as SelectKeyboardNavigation } from './p-B3H_uLbl.js';
+import { d as defineCustomElement$5 } from './p-C7kMNSz9.js';
+import { d as defineCustomElement$4 } from './p-CV5tKC24.js';
+import { d as defineCustomElement$3 } from './p-DY9yCaP9.js';
+import { d as defineCustomElement$2 } from './p-CYadUxId.js';
+import { d as defineCustomElement$1 } from './p-j-ZEdgz4.js';
 
-const sdSelectCss = ".sd-select__dropdown{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-select__dropdown::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-select__dropdown::-webkit-scrollbar:horizontal{height:8px}.sd-select__dropdown::-webkit-scrollbar:vertical{width:8px}.sd-select__dropdown::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-select__dropdown::-webkit-scrollbar-track{background-color:transparent}.sd-select{display:flex;width:var(--select-width, 200px);height:28px;position:relative;color:#333333;cursor:pointer;user-select:none;border:1px solid #aaaaaa;border-radius:4px;background-color:white}.sd-select:hover:not(.sd-select--disabled){background:#f6f6f6}.sd-select.sd-select--disabled{cursor:not-allowed;background-color:#eeeeee;border-color:#cccccc}.sd-select.sd-select--disabled .sd-select__label{border-right:1px solid #cccccc}.sd-select.sd-select--disabled .sd-select__trigger{color:#888888}.sd-select.sd-select--disabled .sd-select__trigger:focus,.sd-select.sd-select--disabled .sd-select__trigger:focus-visible,.sd-select.sd-select--disabled .sd-select__trigger:focus-within{outline:none !important}.sd-select__label{font-size:12px;line-height:20px;font-weight:500;color:#333333;padding:4px 12px;border-right:1px solid #cccccc;border-radius:4px 0 0 4px;background-color:#f6f6f6;display:inline-block;white-space:nowrap}.sd-select__container{position:relative;width:100%;display:flex}.sd-select__container .sd-select__trigger{padding:4px 20px 4px 12px;display:flex;width:100%;align-items:center}.sd-select__container .sd-select__trigger .sd-select__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400;text-align:left}.sd-select__container .sd-select__trigger .sd-select__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}.sd-select__container .sd-select__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease}.sd-select__container .sd-select__arrow--open{transform:rotate(180deg)}.sd-select__dropdown{width:var(--select-dropdown-width, 200px);max-height:var(--select-dropdown-height, 260px);padding-bottom:2px;background-color:white;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);border-radius:4px;overflow-y:auto;color:#333333;display:flex;flex-direction:column}.sd-select__dropdown .sd-select__search-container{position:sticky;top:0;display:flex;width:100%;background-color:white;align-items:center;padding:4px 8px}.sd-select__dropdown .sd-select__search-container--scrolled{box-shadow:2px 2px 8px 2px rgba(0, 0, 0, 0.2)}.sd-select__dropdown .sd-select__option-placeholder{padding:4px 12px;font-size:12px;line-height:20px;text-align:left}";
+const sdSelectCss = () => `.sd-select__dropdown{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-select__dropdown::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-select__dropdown::-webkit-scrollbar:horizontal{height:8px}.sd-select__dropdown::-webkit-scrollbar:vertical{width:8px}.sd-select__dropdown::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-select__dropdown::-webkit-scrollbar-track{background-color:transparent}.sd-select{display:flex;width:var(--select-width, 200px);height:28px;position:relative;color:#333333;cursor:pointer;user-select:none;border:1px solid #aaaaaa;border-radius:4px;background-color:white}.sd-select:hover:not(.sd-select--disabled){background:#f6f6f6}.sd-select.sd-select--disabled{cursor:not-allowed;background-color:#eeeeee;border-color:#cccccc}.sd-select.sd-select--disabled .sd-select__label{border-right:1px solid #cccccc}.sd-select.sd-select--disabled .sd-select__trigger{color:#888888}.sd-select.sd-select--disabled .sd-select__trigger:focus,.sd-select.sd-select--disabled .sd-select__trigger:focus-visible,.sd-select.sd-select--disabled .sd-select__trigger:focus-within{outline:none !important}.sd-select__label{font-size:12px;line-height:20px;font-weight:500;color:#333333;padding:4px 12px;border-right:1px solid #cccccc;border-radius:4px 0 0 4px;background-color:#f6f6f6;display:inline-block;white-space:nowrap}.sd-select__container{position:relative;width:100%;display:flex}.sd-select__container .sd-select__trigger{padding:4px 20px 4px 12px;display:flex;width:100%;align-items:center}.sd-select__container .sd-select__trigger .sd-select__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400;text-align:left}.sd-select__container .sd-select__trigger .sd-select__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}.sd-select__container .sd-select__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease}.sd-select__container .sd-select__arrow--open{transform:rotate(180deg)}.sd-select__dropdown{width:var(--select-dropdown-width, 200px);max-height:var(--select-dropdown-height, 260px);padding-bottom:2px;background-color:white;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);border-radius:4px;overflow-y:auto;color:#333333;display:flex;flex-direction:column}.sd-select__dropdown .sd-select__search-container{position:sticky;top:0;display:flex;width:100%;background-color:white;align-items:center;padding:4px 8px}.sd-select__dropdown .sd-select__search-container--scrolled{box-shadow:2px 2px 8px 2px rgba(0, 0, 0, 0.2)}.sd-select__dropdown .sd-select__option-placeholder{padding:4px 12px;font-size:12px;line-height:20px;text-align:left}`;
 
 const SdSelect = /*@__PURE__*/ proxyCustomElement(class SdSelect extends BaseDropdownEvent {
     constructor(registerHost) {
@@ -44,6 +44,9 @@ const SdSelect = /*@__PURE__*/ proxyCustomElement(class SdSelect extends BaseDro
     searchRef;
     optionRef;
     dropdownRef;
+    async open() {
+        this.isOpen = true;
+    }
     valueChanged() {
         const selectedOption = this.getSelectedOption();
         this.sdChange?.emit({ value: selectedOption?.value || null, option: selectedOption || null });
@@ -59,7 +62,7 @@ const SdSelect = /*@__PURE__*/ proxyCustomElement(class SdSelect extends BaseDro
         if (this.searchable) {
             const searchInput = await this.getNativeInputElement();
             if (this.itemIndex === -1) {
-                searchInput?.focus();
+                searchInput?.focus({ preventScroll: true });
                 return;
             }
             else if (searchInput?.matches(':focus')) {
@@ -104,7 +107,7 @@ const SdSelect = /*@__PURE__*/ proxyCustomElement(class SdSelect extends BaseDro
         const currentItem = optionElements?.[this.itemIndex];
         if (this.searchable) {
             const searchInput = await this.getNativeInputElement();
-            searchInput?.focus();
+            searchInput?.focus({ preventScroll: true });
         }
         if (!currentItem)
             return;
@@ -212,11 +215,11 @@ const SdSelect = /*@__PURE__*/ proxyCustomElement(class SdSelect extends BaseDro
             '--select-width': this.width || '200px',
             '--select-dropdown-height': this.dropdownHeight || '260px',
         };
-        return (h(Host, { key: 'a99d2903e6156a30aa834dea2344829edbde67cb', style: style }, h("div", { key: '39862875a121d9add2c0101d81e223d475d14abb', class: {
+        return (h(Host, { key: 'ba065b311487ea934dc46736fd633d4d1a13f2e4', style: style }, h("div", { key: '904d988d274e7827d5c969ba45643648ba0a61b3', class: {
                 'sd-select': true,
                 'sd-select--open': this.isOpen,
                 'sd-select--disabled': this.disabled,
-            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), h("div", { key: '6a7e4ffc442e4edfe508e60c8b578f8c8fb5e409', class: "sd-select__container" }, this.renderTrigger(), this.renderDropdown()))));
+            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), h("div", { key: '66fe35a68fa18cf97b4db110572f86faefa59207', class: "sd-select__container" }, this.renderTrigger(), this.renderDropdown()))));
     }
     renderLabel(label) {
         if (!label)
@@ -253,7 +256,7 @@ const SdSelect = /*@__PURE__*/ proxyCustomElement(class SdSelect extends BaseDro
         "itemIndex": ["itemIndexChanged"],
         "isOpen": ["isOpenChanged"]
     }; }
-    static get style() { return sdSelectCss; }
+    static get style() { return sdSelectCss(); }
 }, [772, "sd-select", {
         "value": [1032],
         "label": [1],
@@ -270,7 +273,8 @@ const SdSelect = /*@__PURE__*/ proxyCustomElement(class SdSelect extends BaseDro
         "isOpen": [32],
         "searchText": [32],
         "itemIndex": [32],
-        "isScrolled": [32]
+        "isScrolled": [32],
+        "open": [64]
     }, undefined, {
         "value": ["valueChanged"],
         "options": ["optionsChanged"],
@@ -285,32 +289,32 @@ function defineCustomElement() {
     const components = ["sd-select", "sd-checkbox", "sd-icon", "sd-input", "sd-portal", "sd-select-option"];
     components.forEach(tagName => { switch (tagName) {
         case "sd-select":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SdSelect);
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), SdSelect);
             }
             break;
         case "sd-checkbox":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$5();
             }
             break;
         case "sd-icon":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$4();
             }
             break;
         case "sd-input":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$3();
             }
             break;
         case "sd-portal":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$2();
             }
             break;
         case "sd-select-option":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$1();
             }
             break;
@@ -318,6 +322,6 @@ function defineCustomElement() {
 }
 
 export { SdSelect as S, defineCustomElement as d };
-//# sourceMappingURL=p-9kN1E6Ra.js.map
+//# sourceMappingURL=p-B13lOU0D.js.map
 
-//# sourceMappingURL=p-9kN1E6Ra.js.map
+//# sourceMappingURL=p-B13lOU0D.js.map