@iyulab/components 1.9.0 → 1.12.0

package/dist/components/select/USelect.js

@@ -1,5 +1,5 @@
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorate.js";
 import { UFormControlElement } from "../UFormControlElement.js";
 import "../spinner/USpinner.js";
 import "../icon/UIcon.js";
@@ -76,7 +76,6 @@ var USelect = class USelect extends UFormControlElement {
 				case "Escape":
 					e.preventDefault();
 					this.popoverEl?.hide();
-					break;
 			}
 		};
 		this.handleSearchInput = (e) => {
@@ -103,7 +102,6 @@ var USelect = class USelect extends UFormControlElement {
 				case "Escape":
 					e.preventDefault();
 					this.popoverEl?.hide();
-					break;
 			}
 		};
 		this.handleClearClick = (e) => {

package/dist/components/select/USelect.styles.js

@@ -79,7 +79,7 @@ var styles = css`
   /* ===== Variant: underlined ===== */
   :host([variant="underlined"]) .container {
     border: none;
-    border-radius: 0;
+    border-radius: var(--u-radius-none);
     background-color: transparent;
     padding-left: 0;
     padding-right: 0;
@@ -107,7 +107,7 @@ var styles = css`
   /* ===== Variant: borderless ===== */
   :host([variant="borderless"]) .container {
     border: none;
-    border-radius: 0;
+    border-radius: var(--u-radius-none);
     background-color: transparent;
     padding: 0;
     box-shadow: none;
@@ -171,7 +171,7 @@ var styles = css`
     max-height: var(--select-popover-max-height);
     padding: 4px;
     border: 1px solid var(--u-border-color);
-    border-radius: 6px;
+    border-radius: var(--u-radius-lg);
     background-color: var(--u-panel-bg-color);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
     overflow-x: hidden;

package/dist/components/skeleton/USkeleton.js

@@ -1,6 +1,6 @@
 import { UElement } from "../UElement.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorate.js";
 import { styles } from "./USkeleton.styles.js";
 import { html } from "lit";
 import { customElement, property } from "lit/decorators.js";

package/dist/components/skeleton/USkeleton.styles.js

@@ -18,13 +18,13 @@ var styles = css`
 
   /* 모양 설정 */
   :host([shape="rectangle"]) {
-    border-radius: 4px;
+    border-radius: var(--u-radius-md);
   }
   :host([shape="circle"]) {
-    border-radius: 50%;
+    border-radius: var(--u-radius-circle);
   }
   :host([shape="rounded"]) {
-    border-radius: 9999px;
+    border-radius: var(--u-radius-pill);
   }
 
   /* 애니메이션 효과 설정 */

package/dist/components/slider/USlider.js

@@ -1,5 +1,5 @@
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorate.js";
 import { UFormControlElement } from "../UFormControlElement.js";
 import "../tooltip/UTooltip.js";
 import { Locale } from "../../utilities/Locale.js";

package/dist/components/slider/USlider.styles.js

@@ -2,7 +2,7 @@ import { css } from "lit";
 //#region src/components/slider/USlider.styles.ts
 var styles = css`
   :host {
-    --slider-fill-color: var(--u-primary-color, var(--u-blue-600));
+    --slider-fill-color: var(--u-primary-color);
     --slider-track-color: var(--u-neutral-300);
     --slider-track-height: 6px;
     --slider-thumb-size: 18px;
@@ -65,7 +65,7 @@ var styles = css`
     align-items: center;
     justify-content: center;
     border: 2px solid var(--slider-thumb-border-color);
-    border-radius: 50%;
+    border-radius: var(--u-radius-circle);
     background: var(--slider-thumb-color);
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
     transition: transform 0.15s ease, box-shadow 0.15s ease;
@@ -85,7 +85,7 @@ var styles = css`
     width: auto;
     height: auto;
     border: none;
-    border-radius: 0;
+    border-radius: var(--u-radius-none);
     background: transparent;
     box-shadow: none;
   }
@@ -104,7 +104,7 @@ var styles = css`
     width: var(--slider-mark-size);
     height: var(--slider-mark-size);
     border: 2px solid var(--slider-mark-border-color);
-    border-radius: 50%;
+    border-radius: var(--u-radius-circle);
     background: var(--slider-mark-color);
   }
 

package/dist/components/spinner/USpinner.js

@@ -1,6 +1,6 @@
 import { UElement } from "../UElement.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorate.js";
 import { styles } from "./USpinner.styles.js";
 import { html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";

package/dist/components/spinner/USpinner.styles.js

@@ -4,7 +4,7 @@ var styles = css`
   :host {
     --spinner-track-width: 0.125em;
     --spinner-track-color: var(--u-neutral-200);
-    --spinner-indicator-color: var(--u-primary-color, var(--u-blue-600));
+    --spinner-indicator-color: var(--u-primary-color);
     --spinner-indicator-speed: 2s;
   }
 

package/dist/components/split-panel/USplitPanel.js

@@ -1,6 +1,6 @@
 import { UElement } from "../UElement.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorate.js";
 import { arrayAttrConverter } from "../../utilities/converters.js";
 import { styles } from "./USplitPanel.styles.js";
 import { html } from "lit";

package/dist/components/split-panel/USplitPanel.styles.js

@@ -4,8 +4,8 @@ var styles = css`
   :host {
     --splitter-size: 4px;
     --splitter-color: var(--u-neutral-200);
-    --splitter-color-hover: var(--u-blue-300);
-    --splitter-color-active: var(--u-blue-500);
+    --splitter-color-hover: var(--u-primary-color-weaker);
+    --splitter-color-active: var(--u-primary-color-weak);
   }
 
   :host {

package/dist/components/switch/USwitch.js

@@ -1,5 +1,5 @@
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorate.js";
 import { UFormControlElement } from "../UFormControlElement.js";
 import { Locale } from "../../utilities/Locale.js";
 import { styles } from "./USwitch.styles.js";

package/dist/components/switch/USwitch.styles.js

@@ -5,7 +5,7 @@ var styles = css`
     --switch-track-width: 2.4em;
     --switch-track-height: 1.4em;
     --switch-track-color: var(--u-neutral-300);
-    --switch-track-color-checked: var(--u-primary-color, var(--u-blue-600));
+    --switch-track-color-checked: var(--u-primary-color);
     --switch-thumb-size: 1.1em;
     --switch-thumb-offset: 0.15em;
     --switch-thumb-color: #fff;
@@ -34,7 +34,7 @@ var styles = css`
     cursor: default;
   }
   :host([invalid]) .track {
-    outline: 2px solid var(--u-red-600);
+    outline: 2px solid var(--u-danger-color);
     outline-offset: 1px;
   }
   :host(:not([disabled]):not([readonly]):hover) .track {
@@ -176,7 +176,7 @@ var styles = css`
   }
 
   .required {
-    color: var(--u-red-600);
+    color: var(--u-danger-color);
     font-weight: 500;
   }
 
@@ -188,7 +188,7 @@ var styles = css`
   }
 
   :host([invalid]) .description {
-    color: var(--u-red-600);
+    color: var(--u-danger-color);
   }
 `;
 //#endregion

package/dist/components/tab/UTab.d.ts

@@ -9,6 +9,8 @@ import { UElement } from '../UElement.js';
  * @csspart remove-btn - 탭 닫기 버튼
  *
  * @event remove - 탭이 닫힐 때 발생. 이벤트 리스너에서 preventDefault()를 호출하면 탭이 닫히지 않습니다.
+ * @cssprop --tab-padding-block - 세로 여백
+ * @cssprop --tab-padding-inline - 가로 여백
  */
 export declare class UTab extends UElement {
     static styles: import('lit').CSSResultGroup[];

package/dist/components/tab/UTab.js

@@ -1,6 +1,6 @@
 import { UElement } from "../UElement.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorate.js";
 import "../button/UButton.js";
 import "../icon/UIcon.js";
 import { styles } from "./UTab.styles.js";
@@ -34,11 +34,12 @@ var UTab = class UTab extends UElement {
 	}
 	render() {
 		return html`
-      <slot name="prefix"></slot>
-      <slot></slot>
-      <slot name="suffix"></slot>
-      
-      <u-button class="remove-btn" part="remove-btn"
+      <div class="base" part="base">
+        <slot name="prefix"></slot>
+        <slot></slot>
+        <slot name="suffix"></slot>
+
+        <u-button class="remove-btn" part="remove-btn"
         ?hidden=${!this.removable}
         variant="ghost"
         tabindex="-1"
@@ -47,6 +48,7 @@ var UTab = class UTab extends UElement {
       >
         <u-icon lib="internal" name="x"></u-icon>
       </u-button>
+      </div>
     `;
 	}
 };

package/dist/components/tab/UTab.styles.js

@@ -5,16 +5,28 @@ var styles = css`
     flex-shrink: 0;
     position: relative;
     display: inline-flex;
-    flex-direction: row;
-    align-items: center;
-    padding: 0.5em 0.75em;
     font-size: 0.9em;
     font-weight: 500;
     color: var(--u-txt-color-weak);
     white-space: nowrap;
     user-select: none;
     cursor: pointer;
+
+    --tab-padding-block: 0.5em;
+    --tab-padding-inline: 0.75em;
   }
+
+  /* 여백은 내부 요소가 진다 — :host 에 두면 소비 앱 CSS 리셋에 지워진다. */
+  .base {
+    box-sizing: border-box;
+    width: 100%;
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    padding: var(--tab-padding-block) var(--tab-padding-inline);
+    border-radius: inherit;
+  }
+
   :host(:hover:not([disabled])) {
     color: var(--u-txt-color);
   }

package/dist/components/tab-panel/UTabPanel.d.ts

@@ -13,6 +13,8 @@ export type TabPanelPlacement = 'top' | 'bottom' | 'left' | 'right';
  * @csspart toolbar - 탭 헤더 내 툴바 영역
  * @csspart content - 탭 패널이 있는 콘텐츠 영역
  *
+ * @cssprop --tab-panel-color - 활성 탭의 기준색 (기본: --u-primary-color)
+ *
  * @event change - 탭을 클릭하거나 키보드로 선택했을 때만 발생한다. 최초 마운트 시 첫 탭이
  *   자동 선택되는 경우나 `value` 프로퍼티를 직접 대입하는 경우는 사용자 조작이 아니므로
  *   발생시키지 않는다(네이티브 select가 프로그래밍적 대입에는 change를 내지 않는 것과 동일한 관례).

package/dist/components/tab-panel/UTabPanel.js

@@ -1,6 +1,6 @@
 import { UElement } from "../UElement.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorate.js";
 import { UPanel } from "../panel/UPanel.js";
 import { UTab } from "../tab/UTab.js";
 import { styles } from "./UTabPanel.styles.js";

package/dist/components/tab-panel/UTabPanel.styles.js

@@ -2,7 +2,7 @@ import { css } from "lit";
 //#region src/components/tab-panel/UTabPanel.styles.ts
 var styles = css`
   :host {
-    --tab-panel-color: var(--u-primary-color, var(--u-blue-600));
+    --tab-panel-color: var(--u-primary-color);
   }
 
   :host {
@@ -179,11 +179,11 @@ var styles = css`
     gap: 0.25em;
     padding: 0.25em;
     background-color: var(--u-neutral-100);
-    border-radius: 8px;
+    border-radius: var(--u-radius-xl);
   }
   :host([variant="pill"]) ::slotted(u-tab) {
     border: 1px solid transparent;
-    border-radius: 6px;
+    border-radius: var(--u-radius-lg);
   }
   :host([variant="pill"]) ::slotted(u-tab[active]) {
     border-color: var(--u-border-color);

package/dist/components/tag/UTag.d.ts

@@ -13,6 +13,10 @@ export type TagColor = "neutral" | "blue" | "green" | "yellow" | "red" | "orange
  * @cssprop --tag-color - 텍스트 색상
  * @cssprop --tag-bg-color - 배경 색상
  * @cssprop --tag-border-color - 테두리 색상
+ * @cssprop --tag-fill-color - variant 별 채움 기준색 (기본: --u-primary-color)
+ * @cssprop --tag-padding-block - 세로 여백
+ * @cssprop --tag-padding-inline - 가로 여백
+ * @cssprop --tag-gap - prefix/본문/suffix 사이 간격
  */
 export declare class UTag extends UElement {
     static styles: import('lit').CSSResultGroup[];

package/dist/components/tag/UTag.js

@@ -1,6 +1,6 @@
 import { UElement } from "../UElement.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/decorate.js";
 import { styles } from "./UTag.styles.js";
 import { html } from "lit";
 import { customElement, property } from "lit/decorators.js";
@@ -17,11 +17,13 @@ var UTag = class UTag extends UElement {
 	}
 	render() {
 		return html`
-      <slot name="prefix"></slot>
-      <span class="content" part="content">
-        <slot></slot>
-      </span>
-      <slot name="suffix"></slot>
+      <div class="base" part="base">
+        <slot name="prefix"></slot>
+        <span class="content" part="content">
+          <slot></slot>
+        </span>
+        <slot name="suffix"></slot>
+      </div>
     `;
 	}
 };