@iyulab/components 1.10.0 → 1.13.0

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.d.ts

@@ -13,6 +13,8 @@ export type CardOrientation = 'vertical' | 'horizontal';
  * @csspart header - 헤더 영역 컨테이너
  * @csspart body - 본문 영역 컨테이너
  * @csspart footer - 푸터 영역 컨테이너
+ * @cssprop --card-border-width - 테두리 두께 (`borderless` 는 0)
+ * @cssprop --card-border-color - 테두리 색
  */
 export declare class UCard extends UElement {
     static styles: import('lit').CSSResultGroup[];

package/dist/components/card/UCard.js

@@ -18,6 +18,7 @@ var UCard = class UCard extends UElement {
 	}
 	render() {
 		return html`
+      <div class="base" part="base">
       <div class="media" part="media">
         <slot name="media" @slotchange=${this.handleSlotChange}></slot>
       </div>
@@ -32,6 +33,7 @@ var UCard = class UCard extends UElement {
           <slot name="footer" @slotchange=${this.handleSlotChange}></slot>
         </footer>
       </div>
+      </div>
     `;
 	}
 	handleSlotChange(e) {

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

@@ -3,12 +3,26 @@ import { css } from "lit";
 var styles = css`
   :host {
     display: flex;
-    border: 1px solid var(--u-border-color);
-    border-radius: 8px;
+    border-radius: var(--u-radius-xl);
     background-color: var(--u-panel-bg-color);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     overflow: hidden;
+
+    --card-border-width: 1px;
+    --card-border-color: var(--u-border-color);
+  }
+
+  /* 테두리는 내부 요소가 진다 — :host 에 두면 소비 앱 CSS 리셋에 지워진다. */
+  .base {
+    box-sizing: border-box;
+    width: 100%;
+    display: flex;
+    flex-direction: inherit;
+    border: var(--card-border-width) solid var(--card-border-color);
+    border-radius: inherit;
+    overflow: hidden;
   }
+
   :host([orientation="vertical"]) {
     flex-direction: column;
   }
@@ -16,7 +30,7 @@ var styles = css`
     flex-direction: row;
   }
   :host([borderless]) {
-    border: none;
+    --card-border-width: 0;
   }
   :host([shadowless]) {
     box-shadow: none;
@@ -48,7 +62,7 @@ var styles = css`
 
   .header {
     display: none;
-    padding: 16px;
+    padding: var(--u-space-lg, 16px);
     border-bottom: 1px solid var(--u-border-color);
   }
   .header.has-content {
@@ -58,7 +72,7 @@ var styles = css`
   .body {
     display: none;
     flex: 1;
-    padding: 16px;
+    padding: var(--u-space-lg, 16px);
   }
   .body.has-content {
     display: block;
@@ -66,7 +80,7 @@ var styles = css`
 
   .footer {
     display: none;
-    padding: 16px;
+    padding: var(--u-space-lg, 16px);
     border-top: 1px solid var(--u-border-color);
   }
   .footer.has-content {

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

@@ -56,7 +56,7 @@ 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);
@@ -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,7 +94,7 @@ var styles = css`
     height: 10px;
     padding: 0;
     border: none;
-    border-radius: 50%;
+    border-radius: var(--u-radius-circle);
     background-color: var(--u-neutral-400);
     cursor: pointer;
     transition: all 0.2s ease;

package/dist/components/checkbox/UCheckbox.d.ts

@@ -20,7 +20,7 @@ export type CheckboxColor = "blue" | "green" | "red" | "orange" | "teal" | "cyan
  *
  * @event change - 체크 상태 변경 시 발생
  *
- * @cssprop --checkbox-fill-color - 체크된 상태의 채움색 (기본: --u-primary-color, 미지정 시 blue-600)
+ * @cssprop --checkbox-fill-color - 체크된 상태의 채움색 (기본: --u-primary-color)
  */
 export declare class UCheckbox extends UFormControlElement<string> {
     static styles: import('lit').CSSResultGroup[];

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

@@ -2,7 +2,7 @@ import { css } from "lit";
 //#region src/components/checkbox/UCheckbox.styles.ts
 var styles = css`
   :host {
-    --checkbox-fill-color: var(--u-primary-color, var(--u-blue-600));
+    --checkbox-fill-color: var(--u-primary-color);
     --checkbox-color: inherit;
     --checkbox-border-color: var(--u-input-border-color);
     --checkbox-background-color: var(--u-input-bg-color);
@@ -27,10 +27,10 @@ var styles = css`
     cursor: default;
   }
   :host([invalid]) {
-    --checkbox-border-color: var(--u-red-600);
+    --checkbox-border-color: var(--u-danger-color);
   }
   :host([invalid]) .footer {
-    color: var(--u-red-600);
+    color: var(--u-danger-color);
   }
   :host([checked]) .checkbox u-icon,
   :host([indeterminate]) .checkbox u-icon {
@@ -44,110 +44,50 @@ var styles = css`
   :host([variant="filled"][checked]),
   :host([variant="filled"][indeterminate]) {
     --checkbox-color: var(--u-neutral-100);
-    --checkbox-border-color: var(--checkbox-fill-color);
-    --checkbox-background-color: var(--checkbox-fill-color);
+    --checkbox-border-color: var(--checkbox-hue, var(--checkbox-fill-color));
+    --checkbox-background-color: var(--checkbox-hue, var(--checkbox-fill-color));
   }
 
   /* === Variant: outline - 테두리만 === */
   :host([variant="outline"][checked]),
   :host([variant="outline"][indeterminate]) {
-    --checkbox-border-color: var(--checkbox-fill-color);
+    --checkbox-color: var(--checkbox-hue, var(--checkbox-fill-color));
+    --checkbox-border-color: var(--checkbox-hue, var(--checkbox-fill-color));
     --checkbox-background-color: transparent;
   }
 
-  /* === Color variants (filled) === */
-  :host([variant="filled"][color="blue"][checked]),
-  :host([variant="filled"][color="blue"][indeterminate]) {
-    --checkbox-border-color: var(--checkbox-fill-color);
-    --checkbox-background-color: var(--checkbox-fill-color);
-  }
-  :host([variant="filled"][color="green"][checked]),
-  :host([variant="filled"][color="green"][indeterminate]) {
-    --checkbox-border-color: var(--u-green-600);
-    --checkbox-background-color: var(--u-green-600);
-  }
-  :host([variant="filled"][color="red"][checked]),
-  :host([variant="filled"][color="red"][indeterminate]) {
-    --checkbox-border-color: var(--u-red-600);
-    --checkbox-background-color: var(--u-red-600);
-  }
-  :host([variant="filled"][color="orange"][checked]),
-  :host([variant="filled"][color="orange"][indeterminate]) {
-    --checkbox-border-color: var(--u-orange-600);
-    --checkbox-background-color: var(--u-orange-600);
-  }
-  :host([variant="filled"][color="teal"][checked]),
-  :host([variant="filled"][color="teal"][indeterminate]) {
-    --checkbox-border-color: var(--u-teal-600);
-    --checkbox-background-color: var(--u-teal-600);
-  }
-  :host([variant="filled"][color="cyan"][checked]),
-  :host([variant="filled"][color="cyan"][indeterminate]) {
-    --checkbox-border-color: var(--u-cyan-600);
-    --checkbox-background-color: var(--u-cyan-600);
-  }
-  :host([variant="filled"][color="purple"][checked]),
-  :host([variant="filled"][color="purple"][indeterminate]) {
-    --checkbox-border-color: var(--u-purple-600);
-    --checkbox-background-color: var(--u-purple-600);
-  }
-  :host([variant="filled"][color="pink"][checked]),
-  :host([variant="filled"][color="pink"][indeterminate]) {
-    --checkbox-border-color: var(--u-pink-600);
-    --checkbox-background-color: var(--u-pink-600);
-  }
-  :host([variant="filled"][color="neutral"][checked]),
-  :host([variant="filled"][color="neutral"][indeterminate]) {
-    --checkbox-border-color: var(--u-neutral-600);
-    --checkbox-background-color: var(--u-neutral-600);
+  /* ==========================================================================
+     장식 축 — color= 는 hue 슬롯만 채운다. variant 규칙이 폴백과 함께 읽는다.
+     기본값 blue 는 규칙이 없다 = 슬롯이 비어 브랜드 훅(--checkbox-fill-color)을 탄다.
+     u-tag 와 같은 방식이다 — 슬롯이 채워지면 color= 가 최종 권한을 갖는다.
+     즉 blue 는 장식 축의 한 값이 아니라 "색을 지정하지 않음" 의 표기다.
+     ========================================================================== */
+  :host([color="green"]) {
+    --checkbox-hue: var(--u-green-600);
   }
-
-  /* === Color variants (outline) === */
-  :host([variant="outline"][color="blue"][checked]),
-  :host([variant="outline"][color="blue"][indeterminate]) {
-    --checkbox-color: var(--checkbox-fill-color);
-    --checkbox-border-color: var(--checkbox-fill-color);
-  }
-  :host([variant="outline"][color="green"][checked]),
-  :host([variant="outline"][color="green"][indeterminate]) {
-    --checkbox-color: var(--u-green-600);
-    --checkbox-border-color: var(--u-green-600);
-  }
-  :host([variant="outline"][color="red"][checked]),
-  :host([variant="outline"][color="red"][indeterminate]) {
-    --checkbox-color: var(--u-red-600);
-    --checkbox-border-color: var(--u-red-600);
-  }
-  :host([variant="outline"][color="orange"][checked]),
-  :host([variant="outline"][color="orange"][indeterminate]) {
-    --checkbox-color: var(--u-orange-600);
-    --checkbox-border-color: var(--u-orange-600);
-  }
-  :host([variant="outline"][color="teal"][checked]),
-  :host([variant="outline"][color="teal"][indeterminate]) {
-    --checkbox-color: var(--u-teal-600);
-    --checkbox-border-color: var(--u-teal-600);
-  }
-  :host([variant="outline"][color="cyan"][checked]),
-  :host([variant="outline"][color="cyan"][indeterminate]) {
-    --checkbox-color: var(--u-cyan-600);
-    --checkbox-border-color: var(--u-cyan-600);
-  }
-  :host([variant="outline"][color="purple"][checked]),
-  :host([variant="outline"][color="purple"][indeterminate]) {
-    --checkbox-color: var(--u-purple-600);
-    --checkbox-border-color: var(--u-purple-600);
-  }
-  :host([variant="outline"][color="pink"][checked]),
-  :host([variant="outline"][color="pink"][indeterminate]) {
-    --checkbox-color: var(--u-pink-600);
-    --checkbox-border-color: var(--u-pink-600);
-  }
-  :host([variant="outline"][color="neutral"][checked]),
-  :host([variant="outline"][color="neutral"][indeterminate]) {
-    --checkbox-color: var(--u-neutral-600);
-    --checkbox-border-color: var(--u-neutral-600);
+  :host([color="red"]) {
+    --checkbox-hue: var(--u-red-600);
+  }
+  :host([color="orange"]) {
+    --checkbox-hue: var(--u-orange-600);
+  }
+  :host([color="teal"]) {
+    --checkbox-hue: var(--u-teal-600);
+  }
+  :host([color="cyan"]) {
+    --checkbox-hue: var(--u-cyan-600);
+  }
+  :host([color="purple"]) {
+    --checkbox-hue: var(--u-purple-600);
   }
+  :host([color="pink"]) {
+    --checkbox-hue: var(--u-pink-600);
+  }
+  :host([color="neutral"]) {
+    --checkbox-hue: var(--u-neutral-600);
+  }
+
+
 
   .wrapper {
     display: inline-flex;
@@ -197,7 +137,7 @@ var styles = css`
   }
 
   .required {
-    color: var(--u-red-600);
+    color: var(--u-danger-color);
     font-weight: 500;
   }
 
@@ -209,7 +149,7 @@ var styles = css`
   }
 
   :host([invalid]) .description {
-    color: var(--u-red-600);
+    color: var(--u-danger-color);
   }
 `;
 //#endregion

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

@@ -14,12 +14,12 @@ var styles = css`
   }
 
   :host([copied]) u-icon-button {
-    color: var(--u-green-500);
+    color: var(--u-success-color-weak);
   }
 
   /* 라벨 형태(아이콘+텍스트): 복사 완료 시 아이콘/텍스트를 성공색으로 강조 */
   :host([copied]) u-button {
-    color: var(--u-green-500);
+    color: var(--u-success-color-weak);
   }
 `;
 //#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: 6px;
+    border-radius: var(--u-radius-lg);
     background: var(--u-panel-bg-color, Canvas);
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
     pointer-events: auto;
@@ -87,8 +87,8 @@ 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;
@@ -96,16 +96,16 @@ var styles = css`
   }
   .header .close-btn {
     flex-shrink: 0;
-    padding: 4px;
+    padding: var(--u-space-2xs, 4px);
     font-size: inherit;
-    border-radius: 4px;
+    border-radius: var(--u-radius-md);
   }
 
   .body {
     flex: 1 1 auto;
     min-height: 0;
     display: block;
-    padding: 16px;
+    padding: var(--u-space-lg, 16px);
     overflow: auto;
   }
 
@@ -114,8 +114,8 @@ var styles = css`
     display: flex;
     align-items: center;
     justify-content: flex-end;
-    gap: 8px;
-    padding: 12px 16px;
+    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);
   }
 `;

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

@@ -7,10 +7,24 @@ var styles = css`
     --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,7 +57,7 @@ var styles = css`
   /* 슬롯 콘텐츠 */
   .label {
     display: none;
-    padding: 0 12px;
+    padding: 0 var(--u-space-md, 12px);
     color: var(--u-txt-color-weak);
     font-size: 0.85em;
     white-space: nowrap;
@@ -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,8 +75,8 @@ 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;
@@ -84,16 +84,16 @@ var styles = css`
   }
   .header .close-btn {
     flex-shrink: 0;
-    padding: 4px;
+    padding: var(--u-space-2xs, 4px);
     font-size: inherit;
-    border-radius: 4px;
+    border-radius: var(--u-radius-md);
   }
 
   .body {
     flex: 1 1 auto;
     min-height: 0;
     display: block;
-    padding: 16px;
+    padding: var(--u-space-lg, 16px);
     overflow: auto;
   }
 
@@ -102,8 +102,8 @@ var styles = css`
     display: flex;
     align-items: center;
     justify-content: flex-end;
-    gap: 8px;
-    padding: 12px 16px;
+    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);
   }
 `;

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

@@ -12,7 +12,7 @@ var styles = css`
     cursor: not-allowed;
   }
   :host([invalid]) .footer {
-    color: var(--u-red-600);
+    color: var(--u-danger-color);
   }
 
   .header {
@@ -32,7 +32,7 @@ var styles = css`
   }
 
   .required {
-    color: var(--u-red-600);
+    color: var(--u-danger-color);
     margin-right: 0.2em;
   }
   

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

@@ -11,7 +11,7 @@ var styles = css`
     color: #fff;
   }
   :host([variant="link"]) {
-    color: var(--u-blue-500);
+    color: var(--u-primary-color-weak);
   }
 
   u-button {

package/dist/components/input/UInput.styles.js

@@ -75,7 +75,7 @@ var styles = css`
     padding-left: 0;
     padding-right: 0;
     border: none;
-    border-radius: 0;
+    border-radius: var(--u-radius-none);
     border-bottom: 1px solid var(--u-input-border-color);
     background-color: transparent;
   }
@@ -101,7 +101,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;
@@ -173,7 +173,7 @@ var styles = css`
     max-height: var(--input-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: auto;

package/dist/components/menu/UMenu.d.ts

@@ -8,6 +8,9 @@ export type MenuSelection = 'none' | 'single' | 'multiple';
  * @slot - 메뉴 아이템 (u-menu-item, u-divider)
  *
  * @cssprop --menu-indent-size - 하위 메뉴 아이템의 들여쓰기 크기 (기본값: 20px)
+ * @cssprop --menu-padding - 내부 여백 (`borderless` 는 0)
+ * @cssprop --menu-border-width - 테두리 두께 (`borderless` 는 0)
+ * @cssprop --menu-border-color - 테두리 색
  *
  * @event change - 선택된 아이템이 변경될 때 발생
  */

package/dist/components/menu/UMenu.js

@@ -120,7 +120,9 @@ var UMenu = class UMenu extends UElement {
 		].some((k) => changedProperties.has(k))) this.propagate();
 	}
 	render() {
-		return html`<slot @slotchange=${this.handleSlotChange}></slot>`;
+		return html`<div class="base" part="base">
+      <slot @slotchange=${this.handleSlotChange}></slot>
+    </div>`;
 	}
 	getItems(fn) {
 		const result = [];

package/dist/components/menu/UMenu.styles.js

@@ -8,16 +8,29 @@ var styles = css`
   :host {
     display: flex;
     flex-direction: column;
-    padding: 4px;
     min-width: 160px;
-    border: 1px solid var(--u-border-color);
-    border-radius: 6px;
+    border-radius: var(--u-radius-lg);
     background-color: var(--u-panel-bg-color);
+
+    --menu-padding: var(--u-space-2xs, 4px);
+    --menu-border-width: 1px;
+    --menu-border-color: var(--u-border-color);
+  }
+
+  /* 여백/테두리는 내부 요소가 진다 — :host 에 두면 소비 앱 CSS 리셋에 지워진다. */
+  .base {
+    box-sizing: border-box;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    padding: var(--menu-padding);
+    border: var(--menu-border-width) solid var(--menu-border-color);
+    border-radius: inherit;
   }
   :host([borderless]) {
-    padding: 0;
-    border: none;
-    border-radius: 0;
+    --menu-padding: 0;
+    --menu-border-width: 0;
+    border-radius: var(--u-radius-none);
     background-color: transparent;
   }
 `;

package/dist/components/menu-item/UMenuItem.d.ts

@@ -17,7 +17,7 @@ export type MenuItemAlign = 'left' | 'center' | 'right';
  *
  * @event pick - 아이템 선택 시 발생 (하위 메뉴가 없는 경우)
  *
- * @cssprop --menu-item-color - 선택/활성 상태의 기준색 (기본: --u-primary-color, 미지정 시 blue-600)
+ * @cssprop --menu-item-color - 선택/활성 상태의 기준색 (기본: --u-primary-color)
  */
 export declare class UMenuItem extends UElement {
     static styles: import('lit').CSSResultGroup[];

package/dist/components/menu-item/UMenuItem.styles.js

@@ -3,7 +3,7 @@ import { css } from "lit";
 var styles = css`
   :host {
     --menu-item-depth: 0;
-    --menu-item-color: var(--u-primary-color, var(--u-blue-600));
+    --menu-item-color: var(--u-primary-color);
   }
 
   :host {
@@ -137,7 +137,7 @@ var styles = css`
     flex-direction: column;
     padding: 4px;
     border: 1px solid var(--u-border-color);
-    border-radius: 4px;
+    border-radius: var(--u-radius-md);
     background-color: var(--u-panel-bg-color);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
     transform: scale(0.8);

package/dist/components/option/UOption.d.ts

@@ -21,7 +21,9 @@ export type OptionMarker = 'radio' | 'check';
  * @cssprop --option-border-color-active-interactive - 선택된 상태에서 호버/포커스 시 테두리 색상
  * @cssprop --option-background-color-active-interactive - 선택된 상태에서 호버/포커스 시 배경 색상
  * @cssprop --option-color - 선택 상태의 기준색. 위 active 계열이 이 값에서 파생된다
- *   (기본: --u-primary-color, 미지정 시 blue-600)
+ *   (기본: --u-primary-color)
+ * @cssprop --option-padding-block - 세로 여백
+ * @cssprop --option-padding-inline - 가로 여백
  */
 export declare class UOption extends UElement {
     static styles: import('lit').CSSResultGroup[];