@sellmate/design-system 0.0.52 → 0.0.54

package/dist/components/{p-9kN1E6Ra.js → p-C5T02a4h.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-BBNolp5g.js';
+import { d as defineCustomElement$1 } from './p-GHGGjwP3.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-C5T02a4h.js.map
 
-//# sourceMappingURL=p-9kN1E6Ra.js.map
+//# sourceMappingURL=p-C5T02a4h.js.map

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

@@ -0,0 +1 @@
+{"file":"p-C5T02a4h.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/sd-select/sd-select.scss?tag=sd-select","src/components/sd-select/sd-select.tsx"],"sourcesContent":["@import 'variables';\r\n@import 'extend';\r\n\r\n.sd-select {\r\n display: flex;\r\n width: var(--select-width, 200px);\r\n height: 28px;\r\n position: relative;\r\n color: $grey_90;\r\n cursor: pointer;\r\n user-select: none;\r\n border: 1px solid $grey_55;\r\n border-radius: 4px;\r\n background-color: white;\r\n\r\n &:hover:not(.sd-select--disabled) {\r\n  background: $grey_10;\r\n }\r\n\r\n &.sd-select--disabled {\r\n  cursor: not-allowed;\r\n  background-color: $grey_20;\r\n  border-color: $grey_45;\r\n\r\n  .sd-select__label {\r\n   border-right: 1px solid $grey_45;\r\n  }\r\n\r\n  .sd-select__trigger {\r\n   color: $grey_65;\r\n   &:focus,\r\n   &:focus-visible,\r\n   &:focus-within {\r\n    outline: none !important;\r\n   }\r\n  }\r\n }\r\n\r\n &__label {\r\n  font-size: 12px;\r\n  line-height: 20px;\r\n  font-weight: 500;\r\n  color: $grey_90;\r\n  padding: 4px 12px;\r\n  border-right: 1px solid $grey_45;\r\n  border-radius: 4px 0 0 4px;\r\n  background-color: $grey_10;\r\n  display: inline-block;\r\n  white-space: nowrap;\r\n }\r\n\r\n &__container {\r\n  position: relative;\r\n  width: 100%;\r\n  display: flex;\r\n\r\n  .sd-select__trigger {\r\n   padding: 4px 20px 4px 12px;\r\n   display: flex;\r\n   width: 100%;\r\n   align-items: center;\r\n\r\n   .sd-select__value {\r\n    flex: 1;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n    white-space: nowrap;\r\n    line-height: 20px;\r\n    font-size: 12px;\r\n    font-weight: 400;\r\n    text-align: left;\r\n   }\r\n\r\n   .sd-select__clear {\r\n    margin: 0 4px;\r\n    width: 8px;\r\n    height: 8px;\r\n    background-color: transparent;\r\n    outline: none;\r\n    border: none;\r\n   }\r\n  }\r\n\r\n  .sd-select__arrow {\r\n   position: absolute;\r\n   top: 8px;\r\n   right: 8px;\r\n   width: 12px;\r\n   height: 12px;\r\n   color: $grey_65;\r\n   transition: transform 0.3s ease;\r\n\r\n   &--open {\r\n    transform: rotate(180deg);\r\n   }\r\n  }\r\n }\r\n}\r\n\r\n.sd-select__dropdown {\r\n @extend %scrollBar;\r\n width: var(--select-dropdown-width, 200px);\r\n max-height: var(--select-dropdown-height, 260px);\r\n padding-bottom: 2px;\r\n background-color: white;\r\n box-shadow: 2px 2px 12px 2px rgba(0, 0, 0, 0.1);\r\n border-radius: 4px;\r\n overflow-y: auto;\r\n color: $grey_90;\r\n display: flex;\r\n flex-direction: column;\r\n\r\n .sd-select__search-container {\r\n  position: sticky;\r\n  top: 0;\r\n  display: flex;\r\n  width: 100%;\r\n  background-color: white;\r\n  align-items: center;\r\n  padding: 4px 8px;\r\n\r\n  &--scrolled {\r\n   box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.2);\r\n  }\r\n }\r\n\r\n .sd-select__option-placeholder {\r\n  padding: 4px 12px;\r\n  font-size: 12px;\r\n  line-height: 20px;\r\n  text-align: left;\r\n }\r\n}\r\n","import {\r\n Component,\r\n Event,\r\n EventEmitter,\r\n Host,\r\n Prop,\r\n State,\r\n h,\r\n Element,\r\n Watch,\r\n Method,\r\n} from '@stencil/core';\r\nimport { BaseDropdownEvent } from '../../utils/base-dropdown-event';\r\nimport { SelectKeyboardNavigation } from '../../utils/select-keyboard-navigation';\r\n\r\nexport interface SelectOption {\r\n value: string | number;\r\n label: string;\r\n disabled?: boolean;\r\n}\r\n\r\nexport type SelectGroupOptionType = 'group' | 'subgroup' | 'item' | 'all';\r\n\r\nexport interface SelectOptionGroup extends SelectOption {\r\n type: SelectGroupOptionType;\r\n parent?: string;\r\n}\r\n\r\nexport interface SelectStyleProps {\r\n containerStyle?: { [key: string]: string };\r\n triggerStyle?: { [key: string]: string };\r\n dropdownStyle?: { [key: string]: string };\r\n optionStyle?: { [key: string]: string };\r\n labelStyle?: { [key: string]: string };\r\n}\r\n\r\nexport interface SelectEvents {\r\n sdChange: {\r\n  value: string | number | null;\r\n  option: SelectOption | null;\r\n };\r\n dropDownShow: { isOpen: boolean };\r\n}\r\n\r\nexport interface SelectMultipleEvents extends Pick<SelectEvents, 'dropDownShow' | 'dropDownShow'> {\r\n sdChange: SelectOption[] | null;\r\n}\r\n\r\n@Component({\r\n tag: 'sd-select',\r\n styleUrl: 'sd-select.scss',\r\n})\r\nexport class SdSelect extends BaseDropdownEvent {\r\n @Element() el!: HTMLElement;\r\n\r\n // props\r\n @Prop({ mutable: true }) value: string | number | null = null;\r\n @Prop() label: string = '';\r\n @Prop({ mutable: true }) options: SelectOption[] = [];\r\n @Prop() placeholder: string = '선택';\r\n @Prop() optionPlaceholder: string = '옵션이 없습니다.';\r\n @Prop() width: string = '200px';\r\n @Prop() dropdownHeight: string = '260px';\r\n @Prop() disabled: boolean = false;\r\n @Prop() clearable: boolean = false;\r\n @Prop() searchable: boolean = false;\r\n\r\n // props - custom slots\r\n @Prop() optionRenderer?: (option: SelectOption, index: number, isSelected: boolean) => any;\r\n\r\n // states\r\n @State() filteredOptions = this.options;\r\n @State() isOpen: boolean = false;\r\n @State() searchText: string | null = null;\r\n @State() itemIndex: number = -1;\r\n @State() isScrolled: boolean = false;\r\n\r\n // events\r\n @Event() sdChange?: EventEmitter<SelectEvents['sdChange']>;\r\n @Event() dropDownShow?: EventEmitter<SelectEvents['dropDownShow']>;\r\n\r\n private selectRef?: HTMLElement;\r\n private searchRef?: HTMLSdInputElement;\r\n private optionRef?: HTMLSdSelectOptionElement;\r\n private dropdownRef?: HTMLElement;\r\n\r\n @Method()\r\n async open() {\r\n  this.isOpen = true;\r\n }\r\n\r\n @Watch('value')\r\n valueChanged() {\r\n  const selectedOption = this.getSelectedOption();\r\n  this.sdChange?.emit({ value: selectedOption?.value || null, option: selectedOption || null });\r\n }\r\n\r\n @Watch('options')\r\n optionsChanged() {\r\n  this.filteredOptions = this.options;\r\n  this.filterOptions();\r\n }\r\n\r\n @Watch('searchText')\r\n searchTextChanged() {\r\n  this.filterOptions();\r\n }\r\n\r\n @Watch('itemIndex')\r\n async itemIndexChanged(newIndex: number, oldIndex: number) {\r\n  if (this.searchable) {\r\n   const searchInput = await this.getNativeInputElement();\r\n   if (this.itemIndex === -1) {\r\n    searchInput?.focus({ preventScroll: true });\r\n    return;\r\n   } else if (searchInput?.matches(':focus')) {\r\n    searchInput?.blur();\r\n   }\r\n  }\r\n\r\n  const optionElements =\r\n   this.dropdownRef?.querySelectorAll('.sd-select__dropdown sd-select-option') || [];\r\n  const currentItem = optionElements?.[this.itemIndex];\r\n\r\n  if (!currentItem || !this.isOpen) return;\r\n\r\n  this.optionRef = currentItem as HTMLSdSelectOptionElement;\r\n  const isOptionDisabled = await this.optionRef.isDisabled();\r\n\r\n  if (isOptionDisabled) {\r\n   newIndex > oldIndex ? this.itemIndex++ : this.itemIndex--;\r\n   return;\r\n  }\r\n\r\n  this.scrollToOption(currentItem as HTMLElement);\r\n }\r\n\r\n componentWillLoad() {\r\n  // props가 모두 설정된 후에 실행되므로 올바른 options 값을 가져올 수 있음\r\n  this.filteredOptions = this.options;\r\n  this.initializeEvent(); // global dropdown Manager에 등록 + 이벤트 핸들러 초기화\r\n }\r\n\r\n disconnectedCallback() {\r\n  this.cleanupEvent(); // global dropdown Manager에서 제거 + 이벤트 정리\r\n }\r\n\r\n @Watch('isOpen')\r\n async isOpenChanged() {\r\n  // Base class의 이벤트 관리 호출 - 다른 select와의 이벤트 충돌 방지\r\n  this.onDropdownToggle(this.isOpen);\r\n\r\n  const selectedOption = this.getSelectedOption();\r\n  if (!selectedOption) {\r\n   this.itemIndex = /* this.searchable ?  */ -1 /* : 0 */;\r\n  } else {\r\n   this.itemIndex = this.options.indexOf(selectedOption);\r\n  }\r\n\r\n  this.dropDownShow?.emit({ isOpen: this.isOpen });\r\n\r\n  if (this.isOpen === false) return;\r\n\r\n  await new Promise(resolve => setTimeout(resolve, 10));\r\n\r\n  const optionElements =\r\n   this.dropdownRef?.querySelectorAll('.sd-select__dropdown sd-select-option') || [];\r\n\r\n  const currentItem = optionElements?.[this.itemIndex];\r\n\r\n  if (this.searchable) {\r\n   const searchInput = await this.getNativeInputElement();\r\n   searchInput?.focus({ preventScroll: true });\r\n  }\r\n\r\n  if (!currentItem) return;\r\n\r\n  await new Promise(resolve => setTimeout(resolve, 10));\r\n  this.scrollToOption(currentItem as HTMLElement);\r\n }\r\n\r\n protected handleDocumentClick(event: Event): void {\r\n  if (!this.selectRef?.contains(event.target as Node)) {\r\n   this.isOpen = false;\r\n  }\r\n }\r\n\r\n protected handleDocumentKeydown(keyboardEvent: KeyboardEvent): void {\r\n  keyboardEvent.stopPropagation();\r\n  const targetKey = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];\r\n  if (!targetKey.includes(keyboardEvent.key)) return;\r\n\r\n  keyboardEvent.preventDefault();\r\n  switch (keyboardEvent.key) {\r\n   case 'ArrowDown':\r\n   case 'ArrowUp':\r\n    const keyboardNavigation = new SelectKeyboardNavigation(this.searchable, this.filteredOptions);\r\n    const nextIndex = keyboardNavigation.getNextIndex(this.itemIndex, keyboardEvent.key);\r\n    this.itemIndex = nextIndex;\r\n    break;\r\n   case 'Enter':\r\n    const selectedOption = this.filteredOptions[this.itemIndex];\r\n    if (selectedOption && !selectedOption.disabled) {\r\n     this.value = selectedOption.value;\r\n     this.searchText = null;\r\n     this.isOpen = false;\r\n    }\r\n    break;\r\n   case 'Escape':\r\n    this.isOpen = false;\r\n    break;\r\n  }\r\n }\r\n\r\n // closeDropdown 메서드 구현 (Manager에서 호출됨)\r\n closeDropdown() {\r\n  this.isOpen = false;\r\n }\r\n\r\n // event handlers\r\n handleTriggerClick = (event: Event) => {\r\n  event.stopPropagation();\r\n\r\n  if (!this.disabled) {\r\n   this.isOpen = !this.isOpen;\r\n   this.dropDownShow?.emit({ isOpen: this.isOpen });\r\n  }\r\n };\r\n\r\n handleOptionClick = (detail: { option: SelectOption; event: Event }) => {\r\n  const { option, event } = detail;\r\n  event.stopPropagation();\r\n\r\n  if (!option.disabled) {\r\n   this.value = option.value;\r\n   this.isOpen = false;\r\n  }\r\n };\r\n\r\n private filterOptions() {\r\n  if (!this.searchText || this.searchText.trim() === '') {\r\n   // 검색어가 없으면 전체 옵션 표시\r\n   this.filteredOptions = this.options;\r\n  } else {\r\n   // 검색어가 있으면 필터링\r\n   this.filteredOptions = this.options.filter(option =>\r\n    option.label.toLowerCase().includes(this.searchText!.toLowerCase()),\r\n   );\r\n  }\r\n }\r\n\r\n private getSelectedOption(): SelectOption | undefined {\r\n  return this.options.find(option => option.value === this.value);\r\n }\r\n\r\n private handleDropdownScroll = (event: Event) => {\r\n  const target = event.target as HTMLElement;\r\n  const scrollTop = target.scrollTop;\r\n\r\n  // 스크롤이 조금이라도 되면 그림자 표시\r\n  this.isScrolled = scrollTop > 0;\r\n };\r\n\r\n private async getNativeInputElement(): Promise<HTMLInputElement | null> {\r\n  if (this.searchRef) {\r\n   return this.searchRef.getNativeElement();\r\n  }\r\n  return null;\r\n }\r\n\r\n private scrollToOption(optionElement: HTMLElement) {\r\n  if (!this.dropdownRef || !optionElement) return;\r\n\r\n  const dropdown = this.dropdownRef;\r\n  const optionTop = optionElement.offsetTop;\r\n  const optionHeight = optionElement.offsetHeight;\r\n  const dropdownScrollTop = dropdown.scrollTop;\r\n  const dropdownHeight = dropdown.clientHeight;\r\n\r\n  const searchContainer = dropdown.querySelector('.sd-select__search-container');\r\n  const searchOffset = searchContainer ? (searchContainer as HTMLElement).offsetHeight : 0;\r\n\r\n  const visibleTop = dropdownScrollTop + searchOffset;\r\n  const visibleBottom = dropdownScrollTop + dropdownHeight;\r\n\r\n  if (optionTop < visibleTop) {\r\n   dropdown.scrollTop = optionTop - searchOffset;\r\n  } else if (optionTop + optionHeight > visibleBottom) {\r\n   dropdown.scrollTop = optionTop + optionHeight - dropdownHeight + searchOffset;\r\n  }\r\n }\r\n\r\n // render method\r\n render() {\r\n  const style = {\r\n   '--select-width': this.width || '200px',\r\n   '--select-dropdown-height': this.dropdownHeight || '260px',\r\n  };\r\n\r\n  return (\r\n   <Host style={style}>\r\n    <div\r\n     class={{\r\n      'sd-select': true,\r\n      'sd-select--open': this.isOpen,\r\n      'sd-select--disabled': this.disabled,\r\n     }}\r\n     ref={el => (this.selectRef = el)}\r\n    >\r\n     {this.renderLabel(this.label)}\r\n     <div class=\"sd-select__container\">\r\n      {this.renderTrigger()}\r\n      {this.renderDropdown()}\r\n     </div>\r\n    </div>\r\n   </Host>\r\n  );\r\n }\r\n\r\n private renderLabel(label?: string) {\r\n  if (!label) return null;\r\n\r\n  return <label class=\"sd-select__label\">{label}</label>;\r\n }\r\n\r\n private renderTrigger() {\r\n  const selectedOption = this.getSelectedOption();\r\n  return (\r\n   <div\r\n    class=\"sd-select__trigger\"\r\n    tabindex={this.disabled ? -1 : 0}\r\n    onClick={this.handleTriggerClick}\r\n   >\r\n    <span class=\"sd-select__value\">{selectedOption ? selectedOption.label : this.placeholder}</span>\r\n    {this.clearable && selectedOption && !this.disabled && (\r\n     <sd-icon\r\n      key=\"clear-icon\"\r\n      name=\"close\"\r\n      size={10}\r\n      color=\"#888\"\r\n      class=\"sd-select__clear\"\r\n      onClick={event => {\r\n       event.stopPropagation();\r\n       this.value = null;\r\n      }}\r\n     ></sd-icon>\r\n    )}\r\n\r\n    <sd-icon\r\n     key=\"arrow-icon\"\r\n     name=\"arrowDown\"\r\n     color=\"#888\"\r\n     class={{ 'sd-select__arrow': true, 'sd-select__arrow--open': this.isOpen }}\r\n    ></sd-icon>\r\n   </div>\r\n  );\r\n }\r\n\r\n private renderDropdown() {\r\n  const style = {\r\n   '--select-dropdown-width': this.width || '200px',\r\n   '--select-dropdown-height': this.dropdownHeight || '260px',\r\n  };\r\n  if (this.isOpen === false) return null;\r\n\r\n  return (\r\n   <sd-portal open={this.isOpen} parentRef={this.selectRef} onSdClose={this.closeDropdown}>\r\n    <div\r\n     class=\"sd-select__dropdown\"\r\n     style={style}\r\n     onScroll={this.handleDropdownScroll}\r\n     ref={el => (this.dropdownRef = el)}\r\n    >\r\n     {this.searchable && (\r\n      <div\r\n       class={{\r\n        'sd-select__search-container': true,\r\n        'sd-select__search-container--scrolled': this.isScrolled,\r\n       }}\r\n       onClick={event => event.stopPropagation()}\r\n      >\r\n       <sd-input\r\n        ref={el => (this.searchRef = el)}\r\n        value={this.searchText}\r\n        placeholder=\"검색\"\r\n        clearable\r\n        inputStyle={{ 'padding-left': '8px' }}\r\n        autofocus\r\n        onSdInput={event => {\r\n         this.searchText = String(event?.detail);\r\n        }}\r\n        onSdFocus={() => {\r\n         this.itemIndex = -1;\r\n        }}\r\n       >\r\n        <sd-icon\r\n         name=\"search\"\r\n         size={16}\r\n         color=\"#737373\"\r\n         style={{ marginRight: '4px' }}\r\n         slot=\"prefix\"\r\n        ></sd-icon>\r\n       </sd-input>\r\n      </div>\r\n     )}\r\n     {this.filteredOptions.length > 0 ? (\r\n      this.filteredOptions.map((option, index) => (\r\n       <slot name={`option-${option.value}`}>\r\n        <sd-select-option\r\n         option={option}\r\n         index={index}\r\n         isSelected={option.value === this.value}\r\n         isFocused={index === this.itemIndex}\r\n         onOptionClick={({ detail }) => this.handleOptionClick(detail)}\r\n        ></sd-select-option>\r\n       </slot>\r\n      ))\r\n     ) : (\r\n      <slot name=\"option-placeholder\">\r\n       <div class={'sd-select__option-placeholder'}>{this.optionPlaceholder}</div>\r\n      </slot>\r\n     )}\r\n    </div>\r\n   </sd-portal>\r\n  );\r\n }\r\n}\r\n\r\n{\r\n /*\r\n  <sd-select id=\"select-1\">\r\n    <!-- <div slot=\"option-placeholder\">옵션이 없습니다.</div> -->\r\n   </sd-select>\r\n   <sd-select id=\"select-2\"> </sd-select>\r\n   <sd-select id=\"select-3\" searchable clearable>\r\n    <div slot=\"option-3\">test</div>\r\n   </sd-select>\r\n\r\n    <script>\r\n  document.addEventListener('DOMContentLoaded', () => {\r\n   const select1 = document.getElementById('select-1');\r\n   const select2 = document.getElementById('select-2');\r\n   const select3 = document.getElementById('select-3');\r\n   const select = document.querySelector('sd-select slot[name=\"option-3\"]');\r\n   select1.optionPlaceholder = 'No options available';\r\n\r\n   const options = [\r\n    { label: 'Option 1', value: '1' },\r\n    { label: 'Option 2', value: '2' },\r\n    { label: 'Option 3', value: '3', disabled: true },\r\n    { label: 'Option 4', value: '4' },\r\n    { label: 'Option 5', value: '5' },\r\n    { label: 'Option 6', value: '6' },\r\n    { label: 'Option 7', value: '7', disabled: true },\r\n    { label: 'Option 8', value: '8' },\r\n    { label: 'Option 9', value: '9' },\r\n    { label: 'Option 10', value: '10' },\r\n    { label: 'Option 11', value: '11', disabled: true },\r\n    { label: 'Option 12', value: '12' },\r\n    { label: 'Option 13', value: '13' },\r\n    { label: 'Option 14', value: '14' },\r\n    { label: 'Option 15', value: '15', disabled: true },\r\n    { label: 'Option 16', value: '16' },\r\n    { label: 'Option 17', value: '17' },\r\n    { label: 'Option 18', value: '18' },\r\n    { label: 'Option 19', value: '19', disabled: true },\r\n    { label: 'Option 20', value: '20' },\r\n    { label: 'Option 21', value: '21' },\r\n    { label: 'Option 22', value: '22' },\r\n    { label: 'Option 23', value: '23', disabled: true },\r\n    { label: 'Option 24', value: '24' },\r\n   ];\r\n\r\n   select2.options = options;\r\n   select3.options = options;\r\n  });\r\n </script>\r\n\r\n */\r\n}\r\n"],"version":3}

package/dist/components/{p-CkKxyn_K.js → p-C7kMNSz9.js}

@@ -1,7 +1,7 @@
-import { p as proxyCustomElement, H, d as createEvent, h } from './p-TFWJruz2.js';
-import { d as defineCustomElement$1 } from './p-BsyfatBe.js';
+import { p as proxyCustomElement, H, d as createEvent, h, t as transformTag } from './p-CQBrru3e.js';
+import { d as defineCustomElement$1 } from './p-CV5tKC24.js';
 
-const sdCheckboxCss = "sd-checkbox{display:inline-block;height:20px;line-height:0}sd-checkbox .sd-checkbox{cursor:pointer;display:inline-flex;align-items:center;gap:8px;height:20px;max-height:20px}sd-checkbox .sd-checkbox>input{display:none}sd-checkbox .sd-checkbox:hover.sd-checkbox--checked .sd-checkbox__bg,sd-checkbox .sd-checkbox:hover.sd-checkbox--indeterminate .sd-checkbox__bg{border-color:#005cc9;background:#005cc9}sd-checkbox .sd-checkbox:hover.sd-checkbox--unchecked .sd-checkbox__bg{border:1px solid #0075ff;background:#d9eaff}sd-checkbox .sd-checkbox:hover.sd-checkbox--disabled .sd-checkbox__bg{border:1px solid transparent;background:#eeeeee}sd-checkbox .sd-checkbox__bg{width:16px;height:16px;border-radius:2px;border:1px solid #888888;box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;overflow:hidden;line-height:0}sd-checkbox .sd-checkbox__label{font-size:12px;color:#333333;line-height:20px}sd-checkbox .sd-checkbox--checked.sd-checkbox--disabled .sd-checkbox__bg,sd-checkbox .sd-checkbox--indeterminate.sd-checkbox--disabled .sd-checkbox__bg{background:#eeeeee;border:1px solid #cccccc !important}sd-checkbox .sd-checkbox--checked .sd-checkbox__bg,sd-checkbox .sd-checkbox--indeterminate .sd-checkbox__bg{border:1px solid #0075ff;background:#0075ff}sd-checkbox .sd-checkbox--unchecked .sd-checkbox__bg{background:white}sd-checkbox .sd-checkbox--disabled{cursor:not-allowed}sd-checkbox .sd-checkbox--disabled .sd-checkbox__bg{background:#eeeeee;border:1px solid #cccccc !important}";
+const sdCheckboxCss = () => `sd-checkbox{display:inline-block;height:20px;line-height:0}sd-checkbox .sd-checkbox{cursor:pointer;display:inline-flex;align-items:center;gap:8px;height:20px;max-height:20px}sd-checkbox .sd-checkbox>input{display:none}sd-checkbox .sd-checkbox:hover.sd-checkbox--checked .sd-checkbox__bg,sd-checkbox .sd-checkbox:hover.sd-checkbox--indeterminate .sd-checkbox__bg{border-color:#005cc9;background:#005cc9}sd-checkbox .sd-checkbox:hover.sd-checkbox--unchecked .sd-checkbox__bg{border:1px solid #0075ff;background:#d9eaff}sd-checkbox .sd-checkbox:hover.sd-checkbox--disabled .sd-checkbox__bg{border:1px solid transparent;background:#eeeeee}sd-checkbox .sd-checkbox__bg{width:16px;height:16px;border-radius:2px;border:1px solid #888888;box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;overflow:hidden;line-height:0}sd-checkbox .sd-checkbox__label{font-size:12px;color:#333333;line-height:20px}sd-checkbox .sd-checkbox--checked.sd-checkbox--disabled .sd-checkbox__bg,sd-checkbox .sd-checkbox--indeterminate.sd-checkbox--disabled .sd-checkbox__bg{background:#eeeeee;border:1px solid #cccccc !important}sd-checkbox .sd-checkbox--checked .sd-checkbox__bg,sd-checkbox .sd-checkbox--indeterminate .sd-checkbox__bg{border:1px solid #0075ff;background:#0075ff}sd-checkbox .sd-checkbox--unchecked .sd-checkbox__bg{background:white}sd-checkbox .sd-checkbox--disabled{cursor:not-allowed}sd-checkbox .sd-checkbox--disabled .sd-checkbox__bg{background:#eeeeee;border:1px solid #cccccc !important}`;
 
 const SdCheckbox = /*@__PURE__*/ proxyCustomElement(class SdCheckbox extends H {
     constructor(registerHost) {
@@ -83,7 +83,7 @@ const SdCheckbox = /*@__PURE__*/ proxyCustomElement(class SdCheckbox extends H {
     static get watchers() { return {
         "checked": ["watchValueHandler"]
     }; }
-    static get style() { return sdCheckboxCss; }
+    static get style() { return sdCheckboxCss(); }
 }, [768, "sd-checkbox", {
         "checked": [4],
         "val": [8],
@@ -100,12 +100,12 @@ function defineCustomElement() {
     const components = ["sd-checkbox", "sd-icon"];
     components.forEach(tagName => { switch (tagName) {
         case "sd-checkbox":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SdCheckbox);
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), SdCheckbox);
             }
             break;
         case "sd-icon":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$1();
             }
             break;
@@ -113,6 +113,6 @@ function defineCustomElement() {
 }
 
 export { SdCheckbox as S, defineCustomElement as d };
-//# sourceMappingURL=p-CkKxyn_K.js.map
+//# sourceMappingURL=p-C7kMNSz9.js.map
 
-//# sourceMappingURL=p-CkKxyn_K.js.map
+//# sourceMappingURL=p-C7kMNSz9.js.map

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

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

package/dist/components/{p-BSUHSOXX.js → p-CEDtmtIo.js}

@@ -1,6 +1,6 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-TFWJruz2.js';
+import { p as proxyCustomElement, H, h, c as Host, t as transformTag } from './p-CQBrru3e.js';
 
-const sdTbodyCss = "sd-tbody{display:table-row-group}";
+const sdTbodyCss = () => `sd-tbody{display:table-row-group}`;
 
 const SdTbody = /*@__PURE__*/ proxyCustomElement(class SdTbody extends H {
     constructor(registerHost) {
@@ -10,9 +10,9 @@ const SdTbody = /*@__PURE__*/ proxyCustomElement(class SdTbody extends H {
         }
     }
     render() {
-        return (h(Host, { key: 'aa5030bb9713c355685de66e15db8b702744c0bc' }, h("slot", { key: '2bfed556b78fc92f8f6b4c574f976a7f0a3c36a8' })));
+        return (h(Host, { key: '7636f7ff23e8aa3c83ace885c5f2ad3fa1e57a45' }, h("slot", { key: '9cdae57011b78e861dab1c16144642c534aaa9e4' })));
     }
-    static get style() { return sdTbodyCss; }
+    static get style() { return sdTbodyCss(); }
 }, [260, "sd-tbody"]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
@@ -21,14 +21,14 @@ function defineCustomElement() {
     const components = ["sd-tbody"];
     components.forEach(tagName => { switch (tagName) {
         case "sd-tbody":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SdTbody);
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), SdTbody);
             }
             break;
     } });
 }
 
 export { SdTbody as S, defineCustomElement as d };
-//# sourceMappingURL=p-BSUHSOXX.js.map
+//# sourceMappingURL=p-CEDtmtIo.js.map
 
-//# sourceMappingURL=p-BSUHSOXX.js.map
+//# sourceMappingURL=p-CEDtmtIo.js.map

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

@@ -0,0 +1 @@
+{"file":"p-CEDtmtIo.js","mappings":";;AAAA,MAAM,UAAU,GAAG,MAAM,CAAC,iCAAiC,CAAC;;MCM/C,OAAO,iBAAAA,kBAAA,CAAA,MAAA,OAAA,SAAAC,CAAA,CAAA;;;;;;;IACnB,MAAM,GAAA;QACL,QACC,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACJ,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACP;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-table/sd-tbody/sd-tbody.scss?tag=sd-tbody","src/components/sd-table/sd-tbody/sd-tbody.tsx"],"sourcesContent":["sd-tbody {\r\n display: table-row-group;\r\n}\r\n","import { Component, Host, h } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'sd-tbody',\r\n styleUrl: 'sd-tbody.scss',\r\n})\r\nexport class SdTbody {\r\n render() {\r\n  return (\r\n   <Host>\r\n    <slot></slot>\r\n   </Host>\r\n  );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/p-CLMeZVRV.js

@@ -0,0 +1,34 @@
+import { p as proxyCustomElement, H, h, c as Host, t as transformTag } from './p-CQBrru3e.js';
+
+const sdLoadingSpinnerCss = () => `sd-loading-spinner{display:block}sd-loading-spinner .sd-loading-spinner{animation:sd-loading-spin 2s linear infinite;transform-origin:center center}sd-loading-spinner .sd-loading-spinner .path{animation:sd-loading-spin-path 1.5s ease-in-out infinite}@keyframes sd-loading-spin{0%{transform:rotate3d(0, 0, 1, 0deg)}25%{transform:rotate3d(0, 0, 1, 90deg)}50%{transform:rotate3d(0, 0, 1, 180deg)}75%{transform:rotate3d(0, 0, 1, 270deg)}100%{transform:rotate3d(0, 0, 1, 359deg)}}@keyframes sd-loading-spin-path{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35px}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124px}}`;
+
+const SdLoadingSpinner = /*@__PURE__*/ proxyCustomElement(class SdLoadingSpinner extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+    }
+    render() {
+        return (h(Host, { key: 'f8c61aa1c1f500da0aa9deac8d031306427bddb4' }, h("svg", { key: '66b9d93ed53b1539f4ba51cf7ca0350728ed343c', class: "sd-loading-spinner text-positive", width: "72px", height: "72px", viewBox: "25 25 50 50" }, h("circle", { key: '3e6e687a243ec457065e14ac44bb56706c89bb10', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
+    }
+    static get style() { return sdLoadingSpinnerCss(); }
+}, [256, "sd-loading-spinner"]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["sd-loading-spinner"];
+    components.forEach(tagName => { switch (tagName) {
+        case "sd-loading-spinner":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), SdLoadingSpinner);
+            }
+            break;
+    } });
+}
+
+export { SdLoadingSpinner as S, defineCustomElement as d };
+//# sourceMappingURL=p-CLMeZVRV.js.map
+
+//# sourceMappingURL=p-CLMeZVRV.js.map

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

@@ -0,0 +1 @@
+{"file":"p-CLMeZVRV.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,MAAM,CAAC,upBAAupB,CAAC;;MCM9qB,gBAAgB,iBAAAA,kBAAA,CAAA,MAAA,gBAAA,SAAAC,CAAA,CAAA;;;;;;;IAC5B,MAAM,GAAA;AACL,QAAA,QACC,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACJ,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,kCAAkC,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,aAAa,EAAA,EAC7F,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACC,KAAK,EAAC,MAAM,EACZ,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,IAAI,EACN,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EAAA,cAAA,EACR,GAAG,EAAA,mBAAA,EACE,IAAI,EAAA,CACb,CACL,CACA;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-loading-spinner/sd-loading-spinner.scss?tag=sd-loading-spinner","src/components/sd-loading-spinner/sd-loading-spinner.tsx"],"sourcesContent":["sd-loading-spinner {\r\n display: block;\r\n\r\n .sd-loading-spinner {\r\n  animation: sd-loading-spin 2s linear infinite;\r\n  transform-origin: center center;\r\n  .path {\r\n   animation: sd-loading-spin-path 1.5s ease-in-out infinite;\r\n  }\r\n\r\n  @keyframes sd-loading-spin {\r\n   0% {\r\n    transform: rotate3d(0, 0, 1, 0deg);\r\n   }\r\n   25% {\r\n    transform: rotate3d(0, 0, 1, 90deg);\r\n   }\r\n   50% {\r\n    transform: rotate3d(0, 0, 1, 180deg);\r\n   }\r\n   75% {\r\n    transform: rotate3d(0, 0, 1, 270deg);\r\n   }\r\n   100% {\r\n    transform: rotate3d(0, 0, 1, 359deg);\r\n   }\r\n  }\r\n\r\n  @keyframes sd-loading-spin-path {\r\n   0% {\r\n    stroke-dasharray: 1, 200;\r\n    stroke-dashoffset: 0;\r\n   }\r\n   50% {\r\n    stroke-dasharray: 89, 200;\r\n    stroke-dashoffset: -35px;\r\n   }\r\n\r\n   100% {\r\n    stroke-dasharray: 89, 200;\r\n    stroke-dashoffset: -124px;\r\n   }\r\n  }\r\n }\r\n}\r\n","import { Component, Host, h } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'sd-loading-spinner',\r\n styleUrl: 'sd-loading-spinner.scss',\r\n})\r\nexport class SdLoadingSpinner {\r\n render() {\r\n  return (\r\n   <Host>\r\n    <svg class=\"sd-loading-spinner text-positive\" width=\"72px\" height=\"72px\" viewBox=\"25 25 50 50\">\r\n     <circle\r\n      class=\"path\"\r\n      cx=\"50\"\r\n      cy=\"50\"\r\n      r=\"20\"\r\n      fill=\"none\"\r\n      stroke=\"currentColor\"\r\n      stroke-width=\"5\"\r\n      stroke-miterlimit=\"10\"\r\n     ></circle>\r\n    </svg>\r\n   </Host>\r\n  );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/p-CLNPwi8e.js

@@ -0,0 +1,81 @@
+import { p as proxyCustomElement, H, h, t as transformTag } from './p-CQBrru3e.js';
+
+const sdTagCss = () => `:host{display:inline-block}:host([full-width]){display:block}.sd-tag{display:inline-flex;width:100%;align-items:center;justify-content:center;gap:8px;text-decoration:none;border:1px solid transparent;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}.sd-tag__content{display:inline-block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sd-tag--custom-color{background:var(--tag-bg-color);color:var(--tag-text-color)}.sd-tag--sm{padding:0 6px;font-size:11px;line-height:18px;height:20px;border-radius:4px}.sd-tag--md{padding:0 8px;font-size:12px;font-weight:700;line-height:20px;height:24px;border-radius:4px}.sd-tag--lg{padding:0 10px;font-size:14px;font-weight:700;line-height:24px;min-height:28px;border-radius:5px}.sd-tag--rounded.sd-tag--sm{border-radius:20px}.sd-tag--rounded.sd-tag--md{border-radius:20px}.sd-tag--rounded.sd-tag--lg{border-radius:15px}`;
+
+const TAG_COLORS = {
+    grey: 'bg-grey_20 text-grey_70',
+    red: 'bg-red_15 text-red_70',
+    orange: 'bg-orange_10 text-orange_65',
+    yellow: 'bg-yellow_10 text-yellow_60',
+    green: 'bg-green_15 text-green_70',
+    blue: 'bg-brilliantblue_20 text-brilliantblue_75',
+    darkblue: 'bg-oceanblue_15 text-oceanblue_70',
+    indigo: 'bg-brilliantblue_10 text-brilliantblue_85',
+};
+const SdTag = /*@__PURE__*/ proxyCustomElement(class SdTag extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+    }
+    get el() { return this; }
+    size = 'md';
+    color = 'grey';
+    rounded = false;
+    label = '';
+    bgColor;
+    textColor;
+    getTagClasses() {
+        const classes = ['sd-tag', `sd-tag--${this.size}`];
+        if (this.rounded) {
+            classes.push('sd-tag--rounded');
+        }
+        if (this.color && !this.bgColor && !this.textColor) {
+            classes.push(TAG_COLORS[this.color]);
+        }
+        if (this.bgColor || this.textColor) {
+            classes.push('sd-tag--custom-color');
+        }
+        return classes.join(' ');
+    }
+    renderContent() {
+        return [
+            h("span", { class: "sd-tag__content" }, h("slot", null, this.label)),
+        ];
+    }
+    render() {
+        const tagClasses = this.getTagClasses();
+        return (h("span", { key: '6f3353059d6a1516dd11e23f6347f52f514020e4', class: tagClasses, style: {
+                '--tag-bg-color': this.bgColor,
+                '--tag-text-color': this.textColor,
+            }, "aria-label": this.label || 'tag' }, this.renderContent()));
+    }
+    static get style() { return sdTagCss(); }
+}, [769, "sd-tag", {
+        "size": [1],
+        "color": [1],
+        "rounded": [4],
+        "label": [1],
+        "bgColor": [1, "bg-color"],
+        "textColor": [1, "text-color"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["sd-tag"];
+    components.forEach(tagName => { switch (tagName) {
+        case "sd-tag":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), SdTag);
+            }
+            break;
+    } });
+}
+
+export { SdTag as S, defineCustomElement as d };
+//# sourceMappingURL=p-CLNPwi8e.js.map
+
+//# sourceMappingURL=p-CLNPwi8e.js.map

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

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

package/dist/components/{p-TFWJruz2.js → p-CQBrru3e.js}

@@ -4,7 +4,7 @@ const BUILD = /* design-system */ { hydratedSelectorName: "hydrated", lazyLoad:
 const globalStyles = ".bg-primary{background-color:var(--color-primary, #051d36)}.bg-secondary{background-color:var(--color-secondary, #555555)}.bg-accent{background-color:var(--color-accent, #9c27b0)}.bg-positive{background-color:var(--color-positive, #0075ff)}.bg-negative{background-color:var(--color-negative, #e30000)}.bg-info{background-color:var(--color-info, #00cd52)}.bg-warning{background-color:var(--color-warning, #f2c037)}.bg-red_99{background-color:var(--color-red_99, #220000)}.bg-red_95{background-color:var(--color-red_95, #440000)}.bg-red_90{background-color:var(--color-red_90, #5E0000)}.bg-red_85{background-color:var(--color-red_85, #820000)}.bg-red_80{background-color:var(--color-red_80, #AD0000)}.bg-red_75{background-color:var(--color-red_75, #E30000)}.bg-red_70{background-color:var(--color-red_70, #FB4444)}.bg-red_60{background-color:var(--color-red_60, #FF7C7C)}.bg-red_45{background-color:var(--color-red_45, #FFB5B5)}.bg-red_30{background-color:var(--color-red_30, #FFD3D3)}.bg-red_20{background-color:var(--color-red_20, #FCE6E6)}.bg-red_15{background-color:var(--color-red_15, #FCEFEF)}.bg-caution_bg{background-color:var(--color-caution_bg, #FEF1F1)}.bg-caution_icon{background-color:var(--color-caution_icon, #fd9595)}.bg-orange_99{background-color:var(--color-orange_99, #2F1100)}.bg-orange_95{background-color:var(--color-orange_95, #4D1B00)}.bg-orange_90{background-color:var(--color-orange_90, #752A00)}.bg-orange_85{background-color:var(--color-orange_85, #9B3700)}.bg-orange_75{background-color:var(--color-orange_75, #CE4900)}.bg-orange_65{background-color:var(--color-orange_65, #FF6B00)}.bg-orange_60{background-color:var(--color-orange_60, #FF7F22)}.bg-orange_55{background-color:var(--color-orange_55, #FFA452)}.bg-orange_45{background-color:var(--color-orange_45, #FFBC81)}.bg-orange_35{background-color:var(--color-orange_35, #FFD5AF)}.bg-orange_20{background-color:var(--color-orange_20, #FFEAD7)}.bg-orange_10{background-color:var(--color-orange_10, #FEF1EA)}.bg-header_alert{background-color:var(--color-header_alert, #FF7A00)}.bg-yellow_95{background-color:var(--color-yellow_95, #322700)}.bg-yellow_90{background-color:var(--color-yellow_90, #453702)}.bg-yellow_80{background-color:var(--color-yellow_80, #6C5602)}.bg-yellow_70{background-color:var(--color-yellow_70, #9C7A00)}.bg-yellow_60{background-color:var(--color-yellow_60, #C49900)}.bg-yellow_50{background-color:var(--color-yellow_50, #EBB800)}.bg-yellow_45{background-color:var(--color-yellow_45, #FFC700)}.bg-yellow_40{background-color:var(--color-yellow_40, #FFD643)}.bg-yellow_30{background-color:var(--color-yellow_30, #FEE17C)}.bg-yellow_25{background-color:var(--color-yellow_25, #FFE99E)}.bg-yellow_20{background-color:var(--color-yellow_20, #FEF1C4)}.bg-yellow_10{background-color:var(--color-yellow_10, #FFF7DD)}.bg-olive_95{background-color:var(--color-olive_95, #2C2C00)}.bg-olive_90{background-color:var(--color-olive_90, #454500)}.bg-olive_80{background-color:var(--color-olive_80, #636300)}.bg-olive_70{background-color:var(--color-olive_70, #838300)}.bg-olive_65{background-color:var(--color-olive_65, #A5A500)}.bg-olive_55{background-color:var(--color-olive_55, #C7C700)}.bg-olive_45{background-color:var(--color-olive_45, #DDDD12)}.bg-olive_30{background-color:var(--color-olive_30, #EEEE37)}.bg-olive_20{background-color:var(--color-olive_20, #F6F65F)}.bg-olive_15{background-color:var(--color-olive_15, #FAFAA1)}.bg-olive_10{background-color:var(--color-olive_10, #FBFBBF)}.bg-olive_05{background-color:var(--color-olive_05, #FEFED9)}.bg-green_99{background-color:var(--color-green_99, #001D0B)}.bg-green_95{background-color:var(--color-green_95, #003013)}.bg-green_90{background-color:var(--color-green_90, #00461C)}.bg-green_85{background-color:var(--color-green_85, #006629)}.bg-green_80{background-color:var(--color-green_80, #007B31)}.bg-green_75{background-color:var(--color-green_75, #00973C)}.bg-green_70{background-color:var(--color-green_70, #12B553)}.bg-green_65{background-color:var(--color-green_65, #2BCE6C)}.bg-green_55{background-color:var(--color-green_55, #6DE39C)}.bg-green_45{background-color:var(--color-green_45, #ACF4C9)}.bg-green_25{background-color:var(--color-green_25, #D4FAE3)}.bg-green_15{background-color:var(--color-green_15, #E8F9EF)}.bg-steelblue_99{background-color:var(--color-steelblue_99, #021a25)}.bg-steelblue_95{background-color:var(--color-steelblue_95, #02212f)}.bg-steelblue_90{background-color:var(--color-steelblue_90, #032d40)}.bg-steelblue_85{background-color:var(--color-steelblue_85, #033f59)}.bg-steelblue_80{background-color:var(--color-steelblue_80, #06587d)}.bg-steelblue_75{background-color:var(--color-steelblue_75, #066d9b)}.bg-steelblue_70{background-color:var(--color-steelblue_70, #128fc7)}.bg-steelblue_65{background-color:var(--color-steelblue_65, #229fd7)}.bg-steelblue_60{background-color:var(--color-steelblue_60, #50bff0)}.bg-steelblue_45{background-color:var(--color-steelblue_45, #a4e2fd)}.bg-steelblue_25{background-color:var(--color-steelblue_25, #d9f2fd)}.bg-steelblue_10{background-color:var(--color-steelblue_10, #ecf8fd)}.bg-oceanblue_99{background-color:var(--color-oceanblue_99, #011428)}.bg-oceanblue_95{background-color:var(--color-oceanblue_95, #03172d)}.bg-oceanblue_90{background-color:var(--color-oceanblue_90, #051d36)}.bg-oceanblue_85{background-color:var(--color-oceanblue_85, #07284a)}.bg-oceanblue_80{background-color:var(--color-oceanblue_80, #004177)}.bg-oceanblue_75{background-color:var(--color-oceanblue_75, #025497)}.bg-oceanblue_70{background-color:var(--color-oceanblue_70, #006ac1)}.bg-oceanblue_65{background-color:var(--color-oceanblue_65, #1f8ae1)}.bg-oceanblue_60{background-color:var(--color-oceanblue_60, #5cb0f3)}.bg-oceanblue_50{background-color:var(--color-oceanblue_50, #9cd1fc)}.bg-oceanblue_25{background-color:var(--color-oceanblue_25, #d5ebfe)}.bg-oceanblue_15{background-color:var(--color-oceanblue_15, #eaf5fe)}.bg-brilliantblue_99{background-color:var(--color-brilliantblue_99, #001226)}.bg-brilliantblue_95{background-color:var(--color-brilliantblue_95, #001b39)}.bg-brilliantblue_90{background-color:var(--color-brilliantblue_90, #002b5e)}.bg-brilliantblue_85{background-color:var(--color-brilliantblue_85, #004290)}.bg-brilliantblue_80{background-color:var(--color-brilliantblue_80, #005cc9)}.bg-brilliantblue_75{background-color:var(--color-brilliantblue_75, #0075ff)}.bg-brilliantblue_70{background-color:var(--color-brilliantblue_70, #2d8dff)}.bg-brilliantblue_60{background-color:var(--color-brilliantblue_60, #64abff)}.bg-brilliantblue_50{background-color:var(--color-brilliantblue_50, #93c4ff)}.bg-brilliantblue_40{background-color:var(--color-brilliantblue_40, #bbdaff)}.bg-brilliantblue_25{background-color:var(--color-brilliantblue_25, #d9eaff)}.bg-brilliantblue_20{background-color:var(--color-brilliantblue_20, #e6f1ff)}.bg-brilliantblue_10{background-color:var(--color-brilliantblue_10, #eff6ff)}.bg-brilliantblue_05{background-color:var(--color-brilliantblue_05, #f5faff)}.bg-grey_95{background-color:var(--color-grey_95, #222222)}.bg-grey_90{background-color:var(--color-grey_90, #333333)}.bg-grey_85{background-color:var(--color-grey_85, #444444)}.bg-grey_80{background-color:var(--color-grey_80, #555555)}.bg-grey_70{background-color:var(--color-grey_70, #737373)}.bg-grey_65{background-color:var(--color-grey_65, #888888)}.bg-grey_60{background-color:var(--color-grey_60, #999999)}.bg-grey_55{background-color:var(--color-grey_55, #aaaaaa)}.bg-grey_50{background-color:var(--color-grey_50, #bbbbbb)}.bg-grey_45{background-color:var(--color-grey_45, #cccccc)}.bg-grey_35{background-color:var(--color-grey_35, #D8D8D8)}.bg-grey_30{background-color:var(--color-grey_30, #e1e1e1)}.bg-grey_25{background-color:var(--color-grey_25, #E5E5E5)}.bg-grey_20{background-color:var(--color-grey_20, #eeeeee)}.bg-grey_10{background-color:var(--color-grey_10, #f6f6f6)}.bg-grey_05{background-color:var(--color-grey_05, #f9f9f9)}.bg-white{background-color:var(--color-white, #ffffff)}.bg-black{background-color:var(--color-black, #000000)}.text-primary{color:var(--color-primary, #051d36)}.text-secondary{color:var(--color-secondary, #555555)}.text-accent{color:var(--color-accent, #9c27b0)}.text-positive{color:var(--color-positive, #0075ff)}.text-negative{color:var(--color-negative, #e30000)}.text-info{color:var(--color-info, #00cd52)}.text-warning{color:var(--color-warning, #f2c037)}.text-red_99{color:var(--color-red_99, #220000)}.text-red_95{color:var(--color-red_95, #440000)}.text-red_90{color:var(--color-red_90, #5E0000)}.text-red_85{color:var(--color-red_85, #820000)}.text-red_80{color:var(--color-red_80, #AD0000)}.text-red_75{color:var(--color-red_75, #E30000)}.text-red_70{color:var(--color-red_70, #FB4444)}.text-red_60{color:var(--color-red_60, #FF7C7C)}.text-red_45{color:var(--color-red_45, #FFB5B5)}.text-red_30{color:var(--color-red_30, #FFD3D3)}.text-red_20{color:var(--color-red_20, #FCE6E6)}.text-red_15{color:var(--color-red_15, #FCEFEF)}.text-caution_bg{color:var(--color-caution_bg, #FEF1F1)}.text-caution_icon{color:var(--color-caution_icon, #fd9595)}.text-orange_99{color:var(--color-orange_99, #2F1100)}.text-orange_95{color:var(--color-orange_95, #4D1B00)}.text-orange_90{color:var(--color-orange_90, #752A00)}.text-orange_85{color:var(--color-orange_85, #9B3700)}.text-orange_75{color:var(--color-orange_75, #CE4900)}.text-orange_65{color:var(--color-orange_65, #FF6B00)}.text-orange_60{color:var(--color-orange_60, #FF7F22)}.text-orange_55{color:var(--color-orange_55, #FFA452)}.text-orange_45{color:var(--color-orange_45, #FFBC81)}.text-orange_35{color:var(--color-orange_35, #FFD5AF)}.text-orange_20{color:var(--color-orange_20, #FFEAD7)}.text-orange_10{color:var(--color-orange_10, #FEF1EA)}.text-header_alert{color:var(--color-header_alert, #FF7A00)}.text-yellow_95{color:var(--color-yellow_95, #322700)}.text-yellow_90{color:var(--color-yellow_90, #453702)}.text-yellow_80{color:var(--color-yellow_80, #6C5602)}.text-yellow_70{color:var(--color-yellow_70, #9C7A00)}.text-yellow_60{color:var(--color-yellow_60, #C49900)}.text-yellow_50{color:var(--color-yellow_50, #EBB800)}.text-yellow_45{color:var(--color-yellow_45, #FFC700)}.text-yellow_40{color:var(--color-yellow_40, #FFD643)}.text-yellow_30{color:var(--color-yellow_30, #FEE17C)}.text-yellow_25{color:var(--color-yellow_25, #FFE99E)}.text-yellow_20{color:var(--color-yellow_20, #FEF1C4)}.text-yellow_10{color:var(--color-yellow_10, #FFF7DD)}.text-olive_95{color:var(--color-olive_95, #2C2C00)}.text-olive_90{color:var(--color-olive_90, #454500)}.text-olive_80{color:var(--color-olive_80, #636300)}.text-olive_70{color:var(--color-olive_70, #838300)}.text-olive_65{color:var(--color-olive_65, #A5A500)}.text-olive_55{color:var(--color-olive_55, #C7C700)}.text-olive_45{color:var(--color-olive_45, #DDDD12)}.text-olive_30{color:var(--color-olive_30, #EEEE37)}.text-olive_20{color:var(--color-olive_20, #F6F65F)}.text-olive_15{color:var(--color-olive_15, #FAFAA1)}.text-olive_10{color:var(--color-olive_10, #FBFBBF)}.text-olive_05{color:var(--color-olive_05, #FEFED9)}.text-green_99{color:var(--color-green_99, #001D0B)}.text-green_95{color:var(--color-green_95, #003013)}.text-green_90{color:var(--color-green_90, #00461C)}.text-green_85{color:var(--color-green_85, #006629)}.text-green_80{color:var(--color-green_80, #007B31)}.text-green_75{color:var(--color-green_75, #00973C)}.text-green_70{color:var(--color-green_70, #12B553)}.text-green_65{color:var(--color-green_65, #2BCE6C)}.text-green_55{color:var(--color-green_55, #6DE39C)}.text-green_45{color:var(--color-green_45, #ACF4C9)}.text-green_25{color:var(--color-green_25, #D4FAE3)}.text-green_15{color:var(--color-green_15, #E8F9EF)}.text-steelblue_99{color:var(--color-steelblue_99, #021a25)}.text-steelblue_95{color:var(--color-steelblue_95, #02212f)}.text-steelblue_90{color:var(--color-steelblue_90, #032d40)}.text-steelblue_85{color:var(--color-steelblue_85, #033f59)}.text-steelblue_80{color:var(--color-steelblue_80, #06587d)}.text-steelblue_75{color:var(--color-steelblue_75, #066d9b)}.text-steelblue_70{color:var(--color-steelblue_70, #128fc7)}.text-steelblue_65{color:var(--color-steelblue_65, #229fd7)}.text-steelblue_60{color:var(--color-steelblue_60, #50bff0)}.text-steelblue_45{color:var(--color-steelblue_45, #a4e2fd)}.text-steelblue_25{color:var(--color-steelblue_25, #d9f2fd)}.text-steelblue_10{color:var(--color-steelblue_10, #ecf8fd)}.text-oceanblue_99{color:var(--color-oceanblue_99, #011428)}.text-oceanblue_95{color:var(--color-oceanblue_95, #03172d)}.text-oceanblue_90{color:var(--color-oceanblue_90, #051d36)}.text-oceanblue_85{color:var(--color-oceanblue_85, #07284a)}.text-oceanblue_80{color:var(--color-oceanblue_80, #004177)}.text-oceanblue_75{color:var(--color-oceanblue_75, #025497)}.text-oceanblue_70{color:var(--color-oceanblue_70, #006ac1)}.text-oceanblue_65{color:var(--color-oceanblue_65, #1f8ae1)}.text-oceanblue_60{color:var(--color-oceanblue_60, #5cb0f3)}.text-oceanblue_50{color:var(--color-oceanblue_50, #9cd1fc)}.text-oceanblue_25{color:var(--color-oceanblue_25, #d5ebfe)}.text-oceanblue_15{color:var(--color-oceanblue_15, #eaf5fe)}.text-brilliantblue_99{color:var(--color-brilliantblue_99, #001226)}.text-brilliantblue_95{color:var(--color-brilliantblue_95, #001b39)}.text-brilliantblue_90{color:var(--color-brilliantblue_90, #002b5e)}.text-brilliantblue_85{color:var(--color-brilliantblue_85, #004290)}.text-brilliantblue_80{color:var(--color-brilliantblue_80, #005cc9)}.text-brilliantblue_75{color:var(--color-brilliantblue_75, #0075ff)}.text-brilliantblue_70{color:var(--color-brilliantblue_70, #2d8dff)}.text-brilliantblue_60{color:var(--color-brilliantblue_60, #64abff)}.text-brilliantblue_50{color:var(--color-brilliantblue_50, #93c4ff)}.text-brilliantblue_40{color:var(--color-brilliantblue_40, #bbdaff)}.text-brilliantblue_25{color:var(--color-brilliantblue_25, #d9eaff)}.text-brilliantblue_20{color:var(--color-brilliantblue_20, #e6f1ff)}.text-brilliantblue_10{color:var(--color-brilliantblue_10, #eff6ff)}.text-brilliantblue_05{color:var(--color-brilliantblue_05, #f5faff)}.text-grey_95{color:var(--color-grey_95, #222222)}.text-grey_90{color:var(--color-grey_90, #333333)}.text-grey_85{color:var(--color-grey_85, #444444)}.text-grey_80{color:var(--color-grey_80, #555555)}.text-grey_70{color:var(--color-grey_70, #737373)}.text-grey_65{color:var(--color-grey_65, #888888)}.text-grey_60{color:var(--color-grey_60, #999999)}.text-grey_55{color:var(--color-grey_55, #aaaaaa)}.text-grey_50{color:var(--color-grey_50, #bbbbbb)}.text-grey_45{color:var(--color-grey_45, #cccccc)}.text-grey_35{color:var(--color-grey_35, #D8D8D8)}.text-grey_30{color:var(--color-grey_30, #e1e1e1)}.text-grey_25{color:var(--color-grey_25, #E5E5E5)}.text-grey_20{color:var(--color-grey_20, #eeeeee)}.text-grey_10{color:var(--color-grey_10, #f6f6f6)}.text-grey_05{color:var(--color-grey_05, #f9f9f9)}.text-white{color:var(--color-white, #ffffff)}.text-black{color:var(--color-black, #000000)}*,*::before,*::after{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin-block-end:0}ul[role=list],ol[role=list]{list-style:none}body{min-height:100vh;line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;display:block}input,button,textarea,select{font-size:inherit}:target{scroll-margin-block:5ex}button{background:none;border:none;cursor:pointer;padding:0;outline:0}button:focus{outline:0 !important}:host{display:inline-block;height:fit-content;line-height:0}.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}input[type=text],input[type=number],input[type=password],input[type=email],input[type=tel],textarea{padding-block:0px;padding-inline:0px}.sd-hoverable:hover>.sd-focus-helper{background:currentColor;opacity:0.15}.sd-hoverable:hover>.sd-focus-helper:before{opacity:0.1}.sd-hoverable:hover>.sd-focus-helper:after{opacity:0.4}.sd-focus-helper{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;opacity:0;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper:before,.sd-focus-helper:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;border-radius:inherit;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.6s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper:before{background:#000000}.sd-focus-helper:after{background:#ffffff}.sd-popover-menu{width:fit-content;padding:12px 20px;border-radius:4px;color:white;background:#07284a;font-size:12px;position:relative;box-sizing:border-box}.sd-popover-menu__arrow{position:absolute;display:flex;width:9.6px;height:7.2px}.sd-popover-menu__arrow svg{width:100%;height:100%}.sd-popover-menu__arrow--top{bottom:-7.2px;left:50%;transform:translateX(-50%)}.sd-popover-menu__arrow--bottom{top:-7.2px;left:50%;transform:translateX(-50%) rotate(180deg)}.sd-popover-menu__arrow--left{right:-7.2px;top:50%;transform:translateY(-50%) rotate(-90deg)}.sd-popover-menu__arrow--right{left:-7.2px;top:50%;transform:translateY(-50%) rotate(90deg)}.sd-popover-menu__content{font-size:12px;line-height:20px}.sd-popover-menu__content .sd-popover-menu__title{font-weight:700;margin-bottom:4px}.sd-popover-menu__content .sd-popover-menu__messages{font-weight:500}.sd-popover-menu__content .sd-popover-menu__buttons{margin-top:12px;display:flex;gap:8px;align-items:center}.sd-popover-menu__content .sd-popover-menu__buttons--1{justify-content:flex-end}.sd-popover-menu__content .sd-popover-menu__buttons--2{justify-content:space-between}.sd-popover-menu__close-button{position:absolute;top:16px;right:12px;padding:0;background:none;border:none;cursor:pointer}";
 
 /*
- Stencil Client Platform v4.38.3 | MIT Licensed | https://stenciljs.com
+ Stencil Client Platform v4.39.0 | MIT Licensed | https://stenciljs.com
  */
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -650,6 +650,9 @@ var hydrateScopedToShadow = () => {
   }
 };
 var h = (nodeName, vnodeData, ...children) => {
+  if (typeof nodeName === "string") {
+    nodeName = transformTag(nodeName);
+  }
   let child = null;
   let key = null;
   let slotName = null;
@@ -806,7 +809,7 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
     const orgLocationNode = plt.$orgLocNodes$.get(orgLocationId);
     const node = childRenderNode.$elm$;
     if (!shadowRoot) {
-      node["s-hn"] = tagName.toUpperCase();
+      node["s-hn"] = transformTag(tagName).toUpperCase();
       if (childRenderNode.$tag$ === "slot") {
         node["s-cr"] = hostElm["s-cr"];
       }
@@ -2448,8 +2451,11 @@ function render(vnode, container) {
   };
   renderVdom(ref, vnode);
 }
+function transformTag(tag) {
+  return tag;
+}
 
-export { Fragment as F, H, setNonce as a, setPlatformOptions as b, Host as c, createEvent as d, readTask as e, getAssetPath as g, h, proxyCustomElement as p, render as r, setAssetPath as s };
-//# sourceMappingURL=p-TFWJruz2.js.map
+export { Fragment as F, H, setNonce as a, setPlatformOptions as b, Host as c, createEvent as d, readTask as e, getAssetPath as g, h, proxyCustomElement as p, render as r, setAssetPath as s, transformTag as t };
+//# sourceMappingURL=p-CQBrru3e.js.map
 
-//# sourceMappingURL=p-TFWJruz2.js.map
+//# sourceMappingURL=p-CQBrru3e.js.map