@iyulab/components 1.12.0 → 1.14.0

package/dist/components/button/UButton.styles.js

@@ -3,17 +3,17 @@ import { css } from "lit";
 var styles = css`
   :host {
     /* --btn-color 하나만 정해지면 hover/active/surface/outline 톤이 전부 자동 파생 */
-    --btn-color: var(--u-primary-color);
+    --btn-color: var(--u-primary-color, #1E88E5);
     --btn-color-hover: color-mix(in srgb, var(--btn-color) 85%, black);
     --btn-color-active: color-mix(in srgb, var(--btn-color) 70%, black);
-    --btn-color-surface: color-mix(in srgb, var(--btn-color) 12%, var(--u-bg-color));
-    --btn-color-surface-hover: color-mix(in srgb, var(--btn-color) 22%, var(--u-bg-color));
-    --btn-color-surface-active: color-mix(in srgb, var(--btn-color) 32%, var(--u-bg-color));
-    --btn-color-border: color-mix(in srgb, var(--btn-color) 45%, var(--u-bg-color));
-    --btn-color-border-hover: color-mix(in srgb, var(--btn-color) 60%, var(--u-bg-color));
-    --btn-color-border-active: color-mix(in srgb, var(--btn-color) 75%, var(--u-bg-color));
-    --btn-color-outline-hover: color-mix(in srgb, var(--btn-color) 6%, var(--u-bg-color));
-    --btn-color-outline-active: color-mix(in srgb, var(--btn-color) 12%, var(--u-bg-color));
+    --btn-color-surface: color-mix(in srgb, var(--btn-color) 12%, var(--u-bg-color, #FFFFFF));
+    --btn-color-surface-hover: color-mix(in srgb, var(--btn-color) 22%, var(--u-bg-color, #FFFFFF));
+    --btn-color-surface-active: color-mix(in srgb, var(--btn-color) 32%, var(--u-bg-color, #FFFFFF));
+    --btn-color-border: color-mix(in srgb, var(--btn-color) 45%, var(--u-bg-color, #FFFFFF));
+    --btn-color-border-hover: color-mix(in srgb, var(--btn-color) 60%, var(--u-bg-color, #FFFFFF));
+    --btn-color-border-active: color-mix(in srgb, var(--btn-color) 75%, var(--u-bg-color, #FFFFFF));
+    --btn-color-outline-hover: color-mix(in srgb, var(--btn-color) 6%, var(--u-bg-color, #FFFFFF));
+    --btn-color-outline-active: color-mix(in srgb, var(--btn-color) 12%, var(--u-bg-color, #FFFFFF));
   }
 
   :host {
@@ -23,7 +23,7 @@ var styles = css`
     font-size: 14px;
     font-weight: 500;
     line-height: 1.5;
-    border-radius: var(--u-radius-lg);
+    border-radius: var(--u-radius-lg, 6px);
     background-color: transparent;
 
     transition: all 0.2s ease;
@@ -33,14 +33,14 @@ var styles = css`
   }
 
   /* === Color tokens === */
-  :host([color="blue"])   { --btn-color: var(--u-blue-600); }
-  :host([color="green"])  { --btn-color: var(--u-green-600); }
-  :host([color="red"])    { --btn-color: var(--u-red-600); }
-  :host([color="orange"]) { --btn-color: var(--u-orange-600); }
-  :host([color="teal"])   { --btn-color: var(--u-teal-600); }
-  :host([color="cyan"])   { --btn-color: var(--u-cyan-600); }
-  :host([color="purple"]) { --btn-color: var(--u-purple-600); }
-  :host([color="pink"])   { --btn-color: var(--u-pink-600); }
+  :host([color="blue"])   { --btn-color: var(--u-blue-600, #1E88E5); }
+  :host([color="green"])  { --btn-color: var(--u-green-600, #43A047); }
+  :host([color="red"])    { --btn-color: var(--u-red-600, #E53935); }
+  :host([color="orange"]) { --btn-color: var(--u-orange-600, #FB8C00); }
+  :host([color="teal"])   { --btn-color: var(--u-teal-600, #00897B); }
+  :host([color="cyan"])   { --btn-color: var(--u-cyan-600, #00ACC1); }
+  :host([color="purple"]) { --btn-color: var(--u-purple-600, #8E24AA); }
+  :host([color="pink"])   { --btn-color: var(--u-pink-600, #D81B60); }
 
   /* === Size === */
   :host([size="sm"]) {
@@ -69,7 +69,7 @@ var styles = css`
     visibility: hidden;
   }
   :host([rounded]) {
-    border-radius: var(--u-radius-pill);
+    border-radius: var(--u-radius-pill, 9999px);
   }
   :host([has-spinner]) u-spinner {
     display: none;
@@ -94,7 +94,7 @@ var styles = css`
 
   /* surface: 채우기 + 경계 */
   :host([variant="surface"]) {
-    color: var(--u-txt-color);
+    color: var(--u-txt-color, #212121);
     background-color: var(--btn-color-surface);
     --btn-border-color: var(--btn-color-border);
   }
@@ -109,7 +109,7 @@ var styles = css`
 
   /* filled: 채우기만 */
   :host([variant="filled"]) {
-    color: var(--u-txt-color);
+    color: var(--u-txt-color, #212121);
     background-color: var(--btn-color-surface);
     --btn-border-color: transparent;
   }
@@ -122,7 +122,7 @@ var styles = css`
 
   /* outlined: 경계만 */
   :host([variant="outlined"]) {
-    color: var(--u-txt-color);
+    color: var(--u-txt-color, #212121);
     --btn-border-color: var(--btn-color-border);
     background-color: transparent;
   }
@@ -137,30 +137,30 @@ var styles = css`
 
   /* ghost: transparent */
   :host([variant="ghost"]) {
-    color: var(--u-txt-color);
+    color: var(--u-txt-color, #212121);
     --btn-border-color: transparent;
     background-color: transparent;
   }
   :host([variant="ghost"]:hover) {
-    background-color: var(--u-bg-color-hover);
+    background-color: var(--u-bg-color-hover, #F5F5F5);
   }
   :host([variant="ghost"]:active) {
-    background-color: var(--u-bg-color-active);
+    background-color: var(--u-bg-color-active, #EEEEEE);
   }
 
   /* link: blue 링크 스타일 (기본값, color="neutral"일 때도 유지 — 기존 동작 보존) */
   :host([variant="link"]) {
-    color: var(--u-primary-color-weak, #3b82f6);
+    color: var(--u-primary-color-weak, #2196F3);
     --btn-border-color: transparent;
     background-color: transparent;
     --btn-padding-inline: 0;
   }
   :host([variant="link"]:hover) {
-    color: var(--u-primary-color, #2563eb);
+    color: var(--u-primary-color, #1E88E5);
     text-decoration: underline;
   }
   :host([variant="link"]:active) {
-    color: var(--u-primary-color-strong, #1d4ed8);
+    color: var(--u-primary-color-strong, #1976D2);
   }
   /* link + 명시적 non-neutral color: 링크 자체 색상을 재정의 (예: 파괴적 액션 링크) */
   :host([variant="link"][color]:not([color="neutral"])) {

package/dist/components/button-group/UButtonGroup.styles.js

@@ -27,7 +27,7 @@ var styles = css`
 
   :host([variant="ghost"]),
   :host([variant="link"]) {
-    gap: 2px;
+    gap: var(--u-space-3xs, 2px);
   }
 `;
 //#endregion

package/dist/components/card/UCard.styles.js

@@ -3,13 +3,13 @@ import { css } from "lit";
 var styles = css`
   :host {
     display: flex;
-    border-radius: var(--u-radius-xl);
-    background-color: var(--u-panel-bg-color);
+    border-radius: var(--u-radius-xl, 8px);
+    background-color: var(--u-panel-bg-color, #FFFFFF);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     overflow: hidden;
 
     --card-border-width: 1px;
-    --card-border-color: var(--u-border-color);
+    --card-border-color: var(--u-border-color, #E0E0E0);
   }
 
   /* 테두리는 내부 요소가 진다 — :host 에 두면 소비 앱 CSS 리셋에 지워진다. */
@@ -62,8 +62,8 @@ var styles = css`
 
   .header {
     display: none;
-    padding: 16px;
-    border-bottom: 1px solid var(--u-border-color);
+    padding: var(--u-space-lg, 16px);
+    border-bottom: 1px solid var(--u-border-color, #E0E0E0);
   }
   .header.has-content {
     display: block;
@@ -72,7 +72,7 @@ var styles = css`
   .body {
     display: none;
     flex: 1;
-    padding: 16px;
+    padding: var(--u-space-lg, 16px);
   }
   .body.has-content {
     display: block;
@@ -80,8 +80,8 @@ var styles = css`
 
   .footer {
     display: none;
-    padding: 16px;
-    border-top: 1px solid var(--u-border-color);
+    padding: var(--u-space-lg, 16px);
+    border-top: 1px solid var(--u-border-color, #E0E0E0);
   }
   .footer.has-content {
     display: block;

package/dist/components/carousel/UCarousel.styles.js

@@ -56,19 +56,19 @@ var styles = css`
     z-index: 10;
     top: 50%;
     transform: translateY(-50%);
-    padding: 8px;
+    padding: var(--u-space-sm, 8px);
     font-size: 20px;
-    color: var(--u-neutral-900);
-    background-color: var(--u-neutral-100);
+    color: var(--u-neutral-900, #212121);
+    background-color: var(--u-neutral-100, #F5F5F5);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
   }
   .nav-button:hover {
-    background-color: var(--u-neutral-200);
+    background-color: var(--u-neutral-200, #EEEEEE);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
     transform: translateY(-50%) scale(1.1);
   }
   .nav-button:active {
-    background-color: var(--u-neutral-300);
+    background-color: var(--u-neutral-300, #E0E0E0);
     transform: translateY(-50%) scale(0.95);
   }
 
@@ -85,7 +85,7 @@ var styles = css`
     flex-direction: row;
     align-items: center;
     justify-content: center;
-    gap: 8px;
+    gap: var(--u-space-sm, 8px);
     transform: translateX(-50%);
   }
 
@@ -94,18 +94,18 @@ var styles = css`
     height: 10px;
     padding: 0;
     border: none;
-    border-radius: var(--u-radius-circle);
-    background-color: var(--u-neutral-400);
+    border-radius: var(--u-radius-circle, 50%);
+    background-color: var(--u-neutral-400, #BDBDBD);
     cursor: pointer;
     transition: all 0.2s ease;
   }
   .dot:hover {
-    background-color: var(--u-neutral-200);
+    background-color: var(--u-neutral-200, #EEEEEE);
   }
   .dot[active] {
     width: 24px;
     border-radius: 5px;
-    background-color: var(--u-neutral-100);
+    background-color: var(--u-neutral-100, #F5F5F5);
   }
 `;
 //#endregion

package/dist/components/checkbox/UCheckbox.styles.js

@@ -2,16 +2,16 @@ import { css } from "lit";
 //#region src/components/checkbox/UCheckbox.styles.ts
 var styles = css`
   :host {
-    --checkbox-fill-color: var(--u-primary-color);
+    --checkbox-fill-color: var(--u-primary-color, #1E88E5);
     --checkbox-color: inherit;
-    --checkbox-border-color: var(--u-input-border-color);
-    --checkbox-background-color: var(--u-input-bg-color);
+    --checkbox-border-color: var(--u-input-border-color, #E0E0E0);
+    --checkbox-background-color: var(--u-input-bg-color, #FFFFFF);
   }
 
   :host {
     display: inline-flex;
     flex-direction: column;
-    color: var(--u-txt-color);
+    color: var(--u-txt-color, #212121);
     font-size: inherit;
     font-family: var(--u-font-base);
     user-select: none;
@@ -27,23 +27,23 @@ var styles = css`
     cursor: default;
   }
   :host([invalid]) {
-    --checkbox-border-color: var(--u-danger-color);
+    --checkbox-border-color: var(--u-danger-color, #E53935);
   }
   :host([invalid]) .footer {
-    color: var(--u-danger-color);
+    color: var(--u-danger-color, #E53935);
   }
   :host([checked]) .checkbox u-icon,
   :host([indeterminate]) .checkbox u-icon {
     transform: scale(1);
   }
   :host(:not([disabled]):not([readonly]):hover) {
-    --checkbox-border-color: var(--u-input-border-color-hover);
+    --checkbox-border-color: var(--u-input-border-color-hover, #BDBDBD);
   }
 
   /* === Variant: filled - 배경 채움 === */
   :host([variant="filled"][checked]),
   :host([variant="filled"][indeterminate]) {
-    --checkbox-color: var(--u-neutral-100);
+    --checkbox-color: var(--u-neutral-100, #F5F5F5);
     --checkbox-border-color: var(--checkbox-hue, var(--checkbox-fill-color));
     --checkbox-background-color: var(--checkbox-hue, var(--checkbox-fill-color));
   }
@@ -63,28 +63,28 @@ var styles = css`
      즉 blue 는 장식 축의 한 값이 아니라 "색을 지정하지 않음" 의 표기다.
      ========================================================================== */
   :host([color="green"]) {
-    --checkbox-hue: var(--u-green-600);
+    --checkbox-hue: var(--u-green-600, #43A047);
   }
   :host([color="red"]) {
-    --checkbox-hue: var(--u-red-600);
+    --checkbox-hue: var(--u-red-600, #E53935);
   }
   :host([color="orange"]) {
-    --checkbox-hue: var(--u-orange-600);
+    --checkbox-hue: var(--u-orange-600, #FB8C00);
   }
   :host([color="teal"]) {
-    --checkbox-hue: var(--u-teal-600);
+    --checkbox-hue: var(--u-teal-600, #00897B);
   }
   :host([color="cyan"]) {
-    --checkbox-hue: var(--u-cyan-600);
+    --checkbox-hue: var(--u-cyan-600, #00ACC1);
   }
   :host([color="purple"]) {
-    --checkbox-hue: var(--u-purple-600);
+    --checkbox-hue: var(--u-purple-600, #8E24AA);
   }
   :host([color="pink"]) {
-    --checkbox-hue: var(--u-pink-600);
+    --checkbox-hue: var(--u-pink-600, #D81B60);
   }
   :host([color="neutral"]) {
-    --checkbox-hue: var(--u-neutral-600);
+    --checkbox-hue: var(--u-neutral-600, #757575);
   }
 
 
@@ -104,7 +104,7 @@ var styles = css`
   }
   input:focus-visible ~ .checkbox {
     box-shadow:
-      0 0 0 1px var(--u-input-border-color-focus),
+      0 0 0 1px var(--u-input-border-color-focus, #1E88E5),
       0 0 0 3px rgba(59, 130, 246, 0.22);
   }
 
@@ -137,19 +137,19 @@ var styles = css`
   }
 
   .required {
-    color: var(--u-danger-color);
+    color: var(--u-danger-color, #E53935);
     font-weight: 500;
   }
 
   .description {
     margin-top: 0.5em;
-    color: var(--u-txt-color-weak);
+    color: var(--u-txt-color-weak, #9E9E9E);
     font-size: 0.75em;
     line-height: 1.2;
   }
 
   :host([invalid]) .description {
-    color: var(--u-danger-color);
+    color: var(--u-danger-color, #E53935);
   }
 `;
 //#endregion

package/dist/components/copy-button/UCopyButton.styles.js

@@ -14,12 +14,12 @@ var styles = css`
   }
 
   :host([copied]) u-icon-button {
-    color: var(--u-success-color-weak);
+    color: var(--u-success-color-weak, #4CAF50);
   }
 
   /* 라벨 형태(아이콘+텍스트): 복사 완료 시 아이콘/텍스트를 성공색으로 강조 */
   :host([copied]) u-button {
-    color: var(--u-success-color-weak);
+    color: var(--u-success-color-weak, #4CAF50);
   }
 `;
 //#endregion

package/dist/components/dialog/UDialog.styles.js

@@ -68,7 +68,7 @@ var styles = css`
      * 테두리는 CanvasText 원색이 과해 옅게 혼합.
      */
     border: 1px solid var(--u-border-color, color-mix(in srgb, CanvasText 20%, Canvas));
-    border-radius: var(--u-radius-lg);
+    border-radius: var(--u-radius-lg, 6px);
     background: var(--u-panel-bg-color, Canvas);
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
     pointer-events: auto;
@@ -87,25 +87,25 @@ var styles = css`
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: 8px;
-    padding: 12px 16px;
+    gap: var(--u-space-sm, 8px);
+    padding: var(--u-space-md, 12px) var(--u-space-lg, 16px);
     font-size: 18px;
     font-weight: 600;
     line-height: 1.3;
-    border-bottom: 1px solid var(--u-border-color);
+    border-bottom: 1px solid var(--u-border-color, #E0E0E0);
   }
   .header .close-btn {
     flex-shrink: 0;
-    padding: 4px;
+    padding: var(--u-space-2xs, 4px);
     font-size: inherit;
-    border-radius: var(--u-radius-md);
+    border-radius: var(--u-radius-md, 4px);
   }
 
   .body {
     flex: 1 1 auto;
     min-height: 0;
     display: block;
-    padding: 16px;
+    padding: var(--u-space-lg, 16px);
     overflow: auto;
   }
 
@@ -114,9 +114,9 @@ var styles = css`
     display: flex;
     align-items: center;
     justify-content: flex-end;
-    gap: 8px;
-    padding: 12px 16px;
-    border-top: 1px solid var(--u-border-color);
+    gap: var(--u-space-sm, 8px);
+    padding: var(--u-space-md, 12px) var(--u-space-lg, 16px);
+    border-top: 1px solid var(--u-border-color, #E0E0E0);
   }
 `;
 //#endregion

package/dist/components/divider/UDivider.js

@@ -17,11 +17,13 @@ var UDivider = class UDivider extends UElement {
 	}
 	render() {
 		return html`
-      <span class="line" part="line-start"></span>
-      <span class="label" part="label">
-        <slot @slotchange=${this.handleSlotChange}></slot>
-      </span>
-      <span class="line" part="line-end"></span>
+      <div class="base" part="base">
+        <span class="line" part="line-start"></span>
+        <span class="label" part="label">
+          <slot @slotchange=${this.handleSlotChange}></slot>
+        </span>
+        <span class="line" part="line-end"></span>
+      </div>
     `;
 	}
 	handleSlotChange(e) {

package/dist/components/divider/UDivider.styles.js

@@ -3,14 +3,28 @@ import { css } from "lit";
 var styles = css`
   :host {
     --divider-size: 1px;
-    --divider-color: var(--u-neutral-300);
+    --divider-color: var(--u-neutral-300, #E0E0E0);
     --divider-spacing: 8px;
   }
 
+  /*
+   * 간격은 **내부 요소의 padding** 이 진다 — :host 에 margin 으로 두면 소비 앱의
+   * CSS 리셋(전역 셀렉터로 margin 을 0 으로 두는 관행)에 에러 없이 지워진다.
+   *
+   * ★ 여기만 다른 8개 컴포넌트와 방식이 갈린다. 구분선의 간격은 *형제를 밀어내는* 것이라
+   *   내부 요소의 margin 으로 옮기면 호스트 박스 안에서 상쇄되어 아무것도 밀지 못한다.
+   *   그러나 **padding** 은 호스트 박스 자체를 키우므로 형제는 종전대로 밀려나고,
+   *   padding 은 섀도 내부에 있어 문서 리셋이 닿지 못한다.
+   */
   :host {
+    display: block;
+  }
+
+  .base {
+    box-sizing: border-box;
     display: flex;
     align-items: center;
-    margin: var(--divider-spacing) 0;
+    padding: var(--divider-spacing) 0;
   }
 
   /* variant */
@@ -43,8 +57,8 @@ var styles = css`
   /* 슬롯 콘텐츠 */
   .label {
     display: none;
-    padding: 0 12px;
-    color: var(--u-txt-color-weak);
+    padding: 0 var(--u-space-md, 12px);
+    color: var(--u-txt-color-weak, #9E9E9E);
     font-size: 0.85em;
     white-space: nowrap;
     user-select: none;
@@ -52,10 +66,16 @@ var styles = css`
 
   /* vertical */
   :host([vertical]) {
-    flex-direction: column;
-    margin: 0 var(--divider-spacing);
+    display: inline-block;
     height: auto;
     min-height: 1em;
+    align-self: stretch;
+  }
+
+  :host([vertical]) .base {
+    flex-direction: column;
+    padding: 0 var(--divider-spacing);
+    height: 100%;
   }
 
   :host([vertical]) .line {
@@ -86,7 +106,7 @@ var styles = css`
   }
 
   :host([vertical]) .label {
-    padding: 12px 0;
+    padding: var(--u-space-md, 12px) 0;
   }
 `;
 //#endregion

package/dist/components/drawer/UDrawer.styles.js

@@ -75,25 +75,25 @@ var styles = css`
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: 8px;
-    padding: 12px 16px;
+    gap: var(--u-space-sm, 8px);
+    padding: var(--u-space-md, 12px) var(--u-space-lg, 16px);
     font-size: 18px;
     font-weight: 600;
     line-height: 1.3;
-    border-bottom: 1px solid var(--u-border-color);
+    border-bottom: 1px solid var(--u-border-color, #E0E0E0);
   }
   .header .close-btn {
     flex-shrink: 0;
-    padding: 4px;
+    padding: var(--u-space-2xs, 4px);
     font-size: inherit;
-    border-radius: var(--u-radius-md);
+    border-radius: var(--u-radius-md, 4px);
   }
 
   .body {
     flex: 1 1 auto;
     min-height: 0;
     display: block;
-    padding: 16px;
+    padding: var(--u-space-lg, 16px);
     overflow: auto;
   }
 
@@ -102,9 +102,9 @@ var styles = css`
     display: flex;
     align-items: center;
     justify-content: flex-end;
-    gap: 8px;
-    padding: 12px 16px;
-    border-top: 1px solid var(--u-border-color);
+    gap: var(--u-space-sm, 8px);
+    padding: var(--u-space-md, 12px) var(--u-space-lg, 16px);
+    border-top: 1px solid var(--u-border-color, #E0E0E0);
   }
 `;
 //#endregion

package/dist/components/field/UField.styles.js

@@ -3,7 +3,7 @@ import { css } from "lit";
 var styles = css`
   :host {
     display: block;
-    color: var(--u-txt-color);
+    color: var(--u-txt-color, #212121);
     font-size: inherit;
     font-family: var(--u-font-base);
   }
@@ -12,7 +12,7 @@ var styles = css`
     cursor: not-allowed;
   }
   :host([invalid]) .footer {
-    color: var(--u-danger-color);
+    color: var(--u-danger-color, #E53935);
   }
 
   .header {
@@ -32,12 +32,12 @@ var styles = css`
   }
 
   .required {
-    color: var(--u-danger-color);
+    color: var(--u-danger-color, #E53935);
     margin-right: 0.2em;
   }
   
   .footer {
-    color: var(--u-txt-color-weak);
+    color: var(--u-txt-color-weak, #9E9E9E);
     font-size: 0.75em;
     line-height: 1.2;
     margin-top: 0.5em;

package/dist/components/icon-button/UIconButton.styles.js

@@ -3,7 +3,7 @@ import { css } from "lit";
 var styles = css`
   :host {
     display: inline-flex;
-    color: var(--u-icon-color);
+    color: var(--u-icon-color, #616161);
     font-size: 20px;
   }
 
@@ -11,7 +11,7 @@ var styles = css`
     color: #fff;
   }
   :host([variant="link"]) {
-    color: var(--u-primary-color-weak);
+    color: var(--u-primary-color-weak, #2196F3);
   }
 
   u-button {