@iyulab/components 1.12.0 → 1.14.0

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

@@ -2,21 +2,21 @@ import { css } from "lit";
 //#region src/components/slider/USlider.styles.ts
 var styles = css`
   :host {
-    --slider-fill-color: var(--u-primary-color);
-    --slider-track-color: var(--u-neutral-300);
+    --slider-fill-color: var(--u-primary-color, #1E88E5);
+    --slider-track-color: var(--u-neutral-300, #E0E0E0);
     --slider-track-height: 6px;
     --slider-thumb-size: 18px;
     --slider-thumb-color: var(--slider-fill-color);
-    --slider-thumb-border-color: var(--u-neutral-0);
+    --slider-thumb-border-color: var(--u-neutral-0, #FFFFFF);
     --slider-mark-size: 12px;
-    --slider-mark-color: var(--u-neutral-0);
-    --slider-mark-border-color: var(--u-neutral-400);
+    --slider-mark-color: var(--u-neutral-0, #FFFFFF);
+    --slider-mark-border-color: var(--u-neutral-400, #BDBDBD);
   }
 
   :host {
     display: block;
     width: 100%;
-    color: var(--u-txt-color);
+    color: var(--u-txt-color, #212121);
     font-size: inherit;
     font-family: var(--u-font-base);
   }
@@ -65,7 +65,7 @@ var styles = css`
     align-items: center;
     justify-content: center;
     border: 2px solid var(--slider-thumb-border-color);
-    border-radius: var(--u-radius-circle);
+    border-radius: var(--u-radius-circle, 50%);
     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: var(--u-radius-none);
+    border-radius: var(--u-radius-none, 0);
     background: transparent;
     box-shadow: none;
   }
@@ -104,20 +104,20 @@ var styles = css`
     width: var(--slider-mark-size);
     height: var(--slider-mark-size);
     border: 2px solid var(--slider-mark-border-color);
-    border-radius: var(--u-radius-circle);
+    border-radius: var(--u-radius-circle, 50%);
     background: var(--slider-mark-color);
   }
 
   .mark-labels {
     position: relative;
-    margin-top: 12px;
+    margin-top: var(--u-space-md, 12px);
   }
 
   .mark-label {
     position: absolute;
     transform: translateX(-50%);
     font-size: 0.75em;
-    color: var(--u-txt-color-weak);
+    color: var(--u-txt-color-weak, #9E9E9E);
     white-space: nowrap;
   }
 `;

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

@@ -3,21 +3,21 @@ import { css } from "lit";
 var styles = css`
   :host {
     --spinner-track-width: 0.125em;
-    --spinner-track-color: var(--u-neutral-200);
-    --spinner-indicator-color: var(--u-primary-color);
+    --spinner-track-color: var(--u-neutral-200, #EEEEEE);
+    --spinner-indicator-color: var(--u-primary-color, #1E88E5);
     --spinner-indicator-speed: 2s;
   }
 
   /* Color variants */
-  :host([color="blue"]) { --spinner-indicator-color: var(--u-blue-600); }
-  :host([color="green"]) { --spinner-indicator-color: var(--u-green-600); }
-  :host([color="yellow"]) { --spinner-indicator-color: var(--u-yellow-600); }
-  :host([color="red"]) { --spinner-indicator-color: var(--u-red-600); }
-  :host([color="orange"]) { --spinner-indicator-color: var(--u-orange-600); }
-  :host([color="teal"]) { --spinner-indicator-color: var(--u-teal-600); }
-  :host([color="cyan"]) { --spinner-indicator-color: var(--u-cyan-600); }
-  :host([color="purple"]) { --spinner-indicator-color: var(--u-purple-600); }
-  :host([color="pink"]) { --spinner-indicator-color: var(--u-pink-600); }
+  :host([color="blue"]) { --spinner-indicator-color: var(--u-blue-600, #1E88E5); }
+  :host([color="green"]) { --spinner-indicator-color: var(--u-green-600, #43A047); }
+  :host([color="yellow"]) { --spinner-indicator-color: var(--u-yellow-600, #FDD835); }
+  :host([color="red"]) { --spinner-indicator-color: var(--u-red-600, #E53935); }
+  :host([color="orange"]) { --spinner-indicator-color: var(--u-orange-600, #FB8C00); }
+  :host([color="teal"]) { --spinner-indicator-color: var(--u-teal-600, #00897B); }
+  :host([color="cyan"]) { --spinner-indicator-color: var(--u-cyan-600, #00ACC1); }
+  :host([color="purple"]) { --spinner-indicator-color: var(--u-purple-600, #8E24AA); }
+  :host([color="pink"]) { --spinner-indicator-color: var(--u-pink-600, #D81B60); }
 
   :host {
     display: inline-flex;

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

@@ -3,9 +3,9 @@ import { css } from "lit";
 var styles = css`
   :host {
     --splitter-size: 4px;
-    --splitter-color: var(--u-neutral-200);
-    --splitter-color-hover: var(--u-primary-color-weaker);
-    --splitter-color-active: var(--u-primary-color-weak);
+    --splitter-color: var(--u-neutral-200, #EEEEEE);
+    --splitter-color-hover: var(--u-primary-color-weaker, #64B5F6);
+    --splitter-color-active: var(--u-primary-color-weak, #2196F3);
   }
 
   :host {

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

@@ -4,8 +4,8 @@ var styles = css`
   :host {
     --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);
+    --switch-track-color: var(--u-neutral-300, #E0E0E0);
+    --switch-track-color-checked: var(--u-primary-color, #1E88E5);
     --switch-thumb-size: 1.1em;
     --switch-thumb-offset: 0.15em;
     --switch-thumb-color: #fff;
@@ -18,7 +18,7 @@ var styles = css`
   :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;
@@ -34,7 +34,7 @@ var styles = css`
     cursor: default;
   }
   :host([invalid]) .track {
-    outline: 2px solid var(--u-danger-color);
+    outline: 2px solid var(--u-danger-color, #E53935);
     outline-offset: 1px;
   }
   :host(:not([disabled]):not([readonly]):hover) .track {
@@ -56,7 +56,7 @@ var styles = css`
   }
   input:focus-visible ~ .track {
     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);
   }
 
@@ -105,7 +105,7 @@ var styles = css`
   .track-unchecked {
     opacity: 1;
     right: var(--switch-thumb-offset);
-    color: var(--u-txt-color-weak);
+    color: var(--u-txt-color-weak, #9E9E9E);
   }
   :host([checked]) .track-unchecked {
     opacity: 0;
@@ -163,7 +163,7 @@ var styles = css`
   .thumb-unchecked {
     opacity: 1;
     transform: scale(1) rotate(0deg);
-    color: var(--u-txt-color-weak);
+    color: var(--u-txt-color-weak, #9E9E9E);
   }
   :host([checked]) .thumb-unchecked {
     opacity: 0;
@@ -176,19 +176,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.3;
   }
 
   :host([invalid]) .description {
-    color: var(--u-danger-color);
+    color: var(--u-danger-color, #E53935);
   }
 `;
 //#endregion

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

@@ -7,7 +7,7 @@ var styles = css`
     display: inline-flex;
     font-size: 0.9em;
     font-weight: 500;
-    color: var(--u-txt-color-weak);
+    color: var(--u-txt-color-weak, #9E9E9E);
     white-space: nowrap;
     user-select: none;
     cursor: pointer;
@@ -28,10 +28,10 @@ var styles = css`
   }
 
   :host(:hover:not([disabled])) {
-    color: var(--u-txt-color);
+    color: var(--u-txt-color, #212121);
   }
   :host([disabled]) {
-    color: var(--u-txt-color-disabled);
+    color: var(--u-txt-color-disabled, #BDBDBD);
     cursor: not-allowed;
   }
 

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

@@ -2,12 +2,12 @@ import { css } from "lit";
 //#region src/components/tab-panel/UTabPanel.styles.ts
 var styles = css`
   :host {
-    --tab-panel-color: var(--u-primary-color);
+    --tab-panel-color: var(--u-primary-color, #1E88E5);
   }
 
   :host {
     display: flex;
-    color: var(--u-txt-color);
+    color: var(--u-txt-color, #212121);
     font-size: inherit;
     font-family: var(--u-font-base);
   }
@@ -92,7 +92,7 @@ var styles = css`
   }
 
   :host([variant="line"][placement="top"]) .header {
-    border-bottom: 1px solid var(--u-border-color);
+    border-bottom: 1px solid var(--u-border-color, #E0E0E0);
   }
   :host([variant="line"][placement="top"]) ::slotted(u-tab[active])::after {
     height: 2px;
@@ -102,7 +102,7 @@ var styles = css`
   }
 
   :host([variant="line"][placement="bottom"]) .header {
-    border-top: 1px solid var(--u-border-color);
+    border-top: 1px solid var(--u-border-color, #E0E0E0);
   }
   :host([variant="line"][placement="bottom"]) ::slotted(u-tab[active])::after {
     height: 2px;
@@ -112,7 +112,7 @@ var styles = css`
   }
 
   :host([variant="line"][placement="left"]) .header {
-    border-right: 1px solid var(--u-border-color);
+    border-right: 1px solid var(--u-border-color, #E0E0E0);
   }
   :host([variant="line"][placement="left"]) ::slotted(u-tab[active])::after {
     width: 2px;
@@ -122,7 +122,7 @@ var styles = css`
   }
 
   :host([variant="line"][placement="right"]) .header {
-    border-left: 1px solid var(--u-border-color);
+    border-left: 1px solid var(--u-border-color, #E0E0E0);
   }
   :host([variant="line"][placement="right"]) ::slotted(u-tab[active])::after {
     width: 2px;
@@ -134,40 +134,40 @@ var styles = css`
   /* Variant: card */
 
   :host([variant="card"]) ::slotted(u-tab) {
-    background-color: var(--u-neutral-100);
+    background-color: var(--u-neutral-100, #F5F5F5);
   }
   :host([variant="card"]) ::slotted(u-tab[active]) {
-    color: var(--u-txt-color);
-    background-color: var(--u-neutral-0);
+    color: var(--u-txt-color, #212121);
+    background-color: var(--u-neutral-0, #FFFFFF);
   }
 
   :host([variant="card"][placement="top"]) ::slotted(u-tab) {
-    border-bottom: 1px solid var(--u-border-color);
-    border-right: 1px solid var(--u-border-color);
+    border-bottom: 1px solid var(--u-border-color, #E0E0E0);
+    border-right: 1px solid var(--u-border-color, #E0E0E0);
   }
   :host([variant="card"][placement="top"]) ::slotted(u-tab[active]) {
     border-bottom: none;
   }
 
   :host([variant="card"][placement="bottom"]) ::slotted(u-tab) {
-    border-top: 1px solid var(--u-border-color);
-    border-right: 1px solid var(--u-border-color);
+    border-top: 1px solid var(--u-border-color, #E0E0E0);
+    border-right: 1px solid var(--u-border-color, #E0E0E0);
   }
   :host([variant="card"][placement="bottom"]) ::slotted(u-tab[active]) {
     border-top: none;
   }
 
   :host([variant="card"][placement="left"]) ::slotted(u-tab) {
-    border-right: 1px solid var(--u-border-color);
-    border-bottom: 1px solid var(--u-border-color);
+    border-right: 1px solid var(--u-border-color, #E0E0E0);
+    border-bottom: 1px solid var(--u-border-color, #E0E0E0);
   }
   :host([variant="card"][placement="left"]) ::slotted(u-tab[active]) {
     border-right: none;
   }
 
   :host([variant="card"][placement="right"]) ::slotted(u-tab) {
-    border-left: 1px solid var(--u-border-color);
-    border-bottom: 1px solid var(--u-border-color);
+    border-left: 1px solid var(--u-border-color, #E0E0E0);
+    border-bottom: 1px solid var(--u-border-color, #E0E0E0);
   }
   :host([variant="card"][placement="right"]) ::slotted(u-tab[active]) {
     border-left: none;
@@ -178,16 +178,16 @@ var styles = css`
   :host([variant="pill"]) .nav {
     gap: 0.25em;
     padding: 0.25em;
-    background-color: var(--u-neutral-100);
-    border-radius: var(--u-radius-xl);
+    background-color: var(--u-neutral-100, #F5F5F5);
+    border-radius: var(--u-radius-xl, 8px);
   }
   :host([variant="pill"]) ::slotted(u-tab) {
     border: 1px solid transparent;
-    border-radius: var(--u-radius-lg);
+    border-radius: var(--u-radius-lg, 6px);
   }
   :host([variant="pill"]) ::slotted(u-tab[active]) {
-    border-color: var(--u-border-color);
-    background-color: var(--u-neutral-0);
+    border-color: var(--u-border-color, #E0E0E0);
+    background-color: var(--u-neutral-0, #FFFFFF);
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
   }
 

package/dist/components/tag/UTag.styles.js

@@ -2,9 +2,9 @@ import { css } from "lit";
 //#region src/components/tag/UTag.styles.ts
 var styles = css`
   :host {
-    --tag-fill-color: var(--u-primary-color);
-    --tag-color: var(--u-neutral-800);
-    --tag-bg-color: var(--u-neutral-100);
+    --tag-fill-color: var(--u-primary-color, #1E88E5);
+    --tag-color: var(--u-neutral-800, #424242);
+    --tag-bg-color: var(--u-neutral-100, #F5F5F5);
     --tag-border-color: transparent;
   }
 
@@ -16,73 +16,73 @@ var styles = css`
      슬롯이 비면(color="neutral") variant 규칙의 폴백 = 브랜드 경로를 탄다.
      ========================================================================== */
   :host([color="blue"]) {
-    --tag-hue-solid: var(--u-blue-500);
-    --tag-hue-line: var(--u-blue-300);
-    --tag-hue-surface: var(--u-blue-100);
-    --tag-hue-text: var(--u-blue-800);
-    --tag-hue-text-outlined: var(--u-blue-600);
+    --tag-hue-solid: var(--u-blue-500, #2196F3);
+    --tag-hue-line: var(--u-blue-300, #64B5F6);
+    --tag-hue-surface: var(--u-blue-100, #BBDEFB);
+    --tag-hue-text: var(--u-blue-800, #1565C0);
+    --tag-hue-text-outlined: var(--u-blue-600, #1E88E5);
   }
   :host([color="green"]) {
-    --tag-hue-solid: var(--u-green-500);
-    --tag-hue-line: var(--u-green-300);
-    --tag-hue-surface: var(--u-green-100);
-    --tag-hue-text: var(--u-green-800);
-    --tag-hue-text-outlined: var(--u-green-600);
+    --tag-hue-solid: var(--u-green-500, #4CAF50);
+    --tag-hue-line: var(--u-green-300, #81C784);
+    --tag-hue-surface: var(--u-green-100, #C8E6C9);
+    --tag-hue-text: var(--u-green-800, #2E7D32);
+    --tag-hue-text-outlined: var(--u-green-600, #43A047);
   }
    /* yellow 는 명도가 높아 solid·outlined 텍스트를 한 단 진하게 쓴다 */
   :host([color="yellow"]) {
-    --tag-hue-solid: var(--u-yellow-600);
-    --tag-hue-line: var(--u-yellow-300);
-    --tag-hue-surface: var(--u-yellow-100);
-    --tag-hue-text: var(--u-yellow-800);
-    --tag-hue-text-outlined: var(--u-yellow-700);
+    --tag-hue-solid: var(--u-yellow-600, #FDD835);
+    --tag-hue-line: var(--u-yellow-300, #FFF176);
+    --tag-hue-surface: var(--u-yellow-100, #FFF9C4);
+    --tag-hue-text: var(--u-yellow-800, #F9A825);
+    --tag-hue-text-outlined: var(--u-yellow-700, #FBC02D);
   }
   :host([color="red"]) {
-    --tag-hue-solid: var(--u-red-500);
-    --tag-hue-line: var(--u-red-300);
-    --tag-hue-surface: var(--u-red-100);
-    --tag-hue-text: var(--u-red-800);
-    --tag-hue-text-outlined: var(--u-red-600);
+    --tag-hue-solid: var(--u-red-500, #F44336);
+    --tag-hue-line: var(--u-red-300, #E57373);
+    --tag-hue-surface: var(--u-red-100, #FFCDD2);
+    --tag-hue-text: var(--u-red-800, #C62828);
+    --tag-hue-text-outlined: var(--u-red-600, #E53935);
   }
   :host([color="orange"]) {
-    --tag-hue-solid: var(--u-orange-500);
-    --tag-hue-line: var(--u-orange-300);
-    --tag-hue-surface: var(--u-orange-100);
-    --tag-hue-text: var(--u-orange-800);
-    --tag-hue-text-outlined: var(--u-orange-600);
+    --tag-hue-solid: var(--u-orange-500, #FF9800);
+    --tag-hue-line: var(--u-orange-300, #FFB74D);
+    --tag-hue-surface: var(--u-orange-100, #FFE0B2);
+    --tag-hue-text: var(--u-orange-800, #EF6C00);
+    --tag-hue-text-outlined: var(--u-orange-600, #FB8C00);
   }
   :host([color="teal"]) {
-    --tag-hue-solid: var(--u-teal-500);
-    --tag-hue-line: var(--u-teal-300);
-    --tag-hue-surface: var(--u-teal-100);
-    --tag-hue-text: var(--u-teal-800);
-    --tag-hue-text-outlined: var(--u-teal-600);
+    --tag-hue-solid: var(--u-teal-500, #009688);
+    --tag-hue-line: var(--u-teal-300, #4DB6AC);
+    --tag-hue-surface: var(--u-teal-100, #B2DFDB);
+    --tag-hue-text: var(--u-teal-800, #00695C);
+    --tag-hue-text-outlined: var(--u-teal-600, #00897B);
   }
   :host([color="cyan"]) {
-    --tag-hue-solid: var(--u-cyan-500);
-    --tag-hue-line: var(--u-cyan-300);
-    --tag-hue-surface: var(--u-cyan-100);
-    --tag-hue-text: var(--u-cyan-800);
-    --tag-hue-text-outlined: var(--u-cyan-600);
+    --tag-hue-solid: var(--u-cyan-500, #00BCD4);
+    --tag-hue-line: var(--u-cyan-300, #4DD0E1);
+    --tag-hue-surface: var(--u-cyan-100, #B2EBF2);
+    --tag-hue-text: var(--u-cyan-800, #00838F);
+    --tag-hue-text-outlined: var(--u-cyan-600, #00ACC1);
   }
   :host([color="purple"]) {
-    --tag-hue-solid: var(--u-purple-500);
-    --tag-hue-line: var(--u-purple-300);
-    --tag-hue-surface: var(--u-purple-100);
-    --tag-hue-text: var(--u-purple-800);
-    --tag-hue-text-outlined: var(--u-purple-600);
+    --tag-hue-solid: var(--u-purple-500, #9C27B0);
+    --tag-hue-line: var(--u-purple-300, #BA68C8);
+    --tag-hue-surface: var(--u-purple-100, #E1BEE7);
+    --tag-hue-text: var(--u-purple-800, #6A1B9A);
+    --tag-hue-text-outlined: var(--u-purple-600, #8E24AA);
   }
   :host([color="pink"]) {
-    --tag-hue-solid: var(--u-pink-500);
-    --tag-hue-line: var(--u-pink-300);
-    --tag-hue-surface: var(--u-pink-100);
-    --tag-hue-text: var(--u-pink-800);
-    --tag-hue-text-outlined: var(--u-pink-600);
+    --tag-hue-solid: var(--u-pink-500, #E91E63);
+    --tag-hue-line: var(--u-pink-300, #F06292);
+    --tag-hue-surface: var(--u-pink-100, #F8BBD0);
+    --tag-hue-text: var(--u-pink-800, #AD1457);
+    --tag-hue-text-outlined: var(--u-pink-600, #D81B60);
   }
 
   /* Variant: solid (강한 채움, 색 미지정 시 --tag-fill-color = 브랜드) */
   :host([variant="solid"]) {
-    --tag-color: var(--u-neutral-0);
+    --tag-color: var(--u-neutral-0, #FFFFFF);
     --tag-bg-color: var(--tag-hue-solid, var(--tag-fill-color));
     --tag-border-color: var(--tag-hue-solid, var(--tag-fill-color));
   }
@@ -90,14 +90,14 @@ var styles = css`
   /* Variant: surface (채우기 + 테두리, 기본 색상은 --u-primary-color) */
   :host([variant="surface"]) {
     --tag-color: var(--tag-hue-text, color-mix(in srgb, var(--tag-fill-color) 70%, black));
-    --tag-bg-color: var(--tag-hue-surface, color-mix(in srgb, var(--tag-fill-color) 15%, var(--u-bg-color)));
-    --tag-border-color: var(--tag-hue-line, color-mix(in srgb, var(--tag-fill-color) 40%, var(--u-bg-color)));
+    --tag-bg-color: var(--tag-hue-surface, color-mix(in srgb, var(--tag-fill-color) 15%, var(--u-bg-color, #FFFFFF)));
+    --tag-border-color: var(--tag-hue-line, color-mix(in srgb, var(--tag-fill-color) 40%, var(--u-bg-color, #FFFFFF)));
   }
 
   /* Variant: filled (채우기만, 테두리 없음, 기본 색상은 --u-primary-color) */
   :host([variant="filled"]) {
     --tag-color: var(--tag-hue-text, color-mix(in srgb, var(--tag-fill-color) 70%, black));
-    --tag-bg-color: var(--tag-hue-surface, color-mix(in srgb, var(--tag-fill-color) 15%, var(--u-bg-color)));
+    --tag-bg-color: var(--tag-hue-surface, color-mix(in srgb, var(--tag-fill-color) 15%, var(--u-bg-color, #FFFFFF)));
     --tag-border-color: transparent;
   }
 
@@ -105,18 +105,18 @@ var styles = css`
   :host([variant="outlined"]) {
     --tag-color: var(--tag-hue-text-outlined, color-mix(in srgb, var(--tag-fill-color) 85%, black));
     --tag-bg-color: transparent;
-    --tag-border-color: var(--tag-hue-line, color-mix(in srgb, var(--tag-fill-color) 40%, var(--u-bg-color)));
+    --tag-border-color: var(--tag-hue-line, color-mix(in srgb, var(--tag-fill-color) 40%, var(--u-bg-color, #FFFFFF)));
   }
 
   :host {
     display: inline-flex;
     font-size: 12px;
     font-weight: 500;
-    border-radius: var(--u-radius-md);
+    border-radius: var(--u-radius-md, 4px);
 
     --tag-padding-block: 0.25em;
     --tag-padding-inline: 0.5em;
-    --tag-gap: 4px;
+    --tag-gap: var(--u-space-xs, 6px);
     color: var(--tag-color);
     background-color: var(--tag-bg-color);
     line-height: 1.5em;
@@ -137,16 +137,16 @@ var styles = css`
     border-radius: inherit;
   }
   :host([rounded]) {
-    border-radius: var(--u-radius-pill);
+    border-radius: var(--u-radius-pill, 9999px);
   }
 
-  /* === Slots === */
-  ::slotted([slot="prefix"]) {
-    margin-right: 0.15em;
-  }
-  ::slotted([slot="suffix"]) {
-    margin-left: 0.15em;
-  }
+  /*
+   * === Slots ===
+   * 간격은 .base 의 gap 하나가 진다.
+   * 종전에는 gap 과 슬롯 margin(0.15em, 약 1.8px)이 **같은 자리에 겹쳐** 있어,
+   * 소비자가 --tag-gap 을 0 으로 줘도 1.8px 이 남았고 그 값에는 훅이 없었다.
+   * --tag-gap 기본값을 합계(4 + 1.8 = 약 6px)로 올려 흡수했다 — 렌더 간격은 사실상 그대로다.
+   */
 
   /* === Content === */
   .content {

package/dist/components/textarea/UTextarea.styles.js

@@ -3,7 +3,7 @@ import { css } from "lit";
 var styles = css`
   :host {
     display: inline-block;
-    color: var(--u-txt-color);
+    color: var(--u-txt-color, #212121);
     font-size: inherit;
     font-family: var(--u-font-base);
   }
@@ -12,84 +12,84 @@ var styles = css`
   .container {
     display: flex;
     padding: 0.3em 0.6em;
-    border: 1px solid var(--u-input-border-color);
+    border: 1px solid var(--u-input-border-color, #E0E0E0);
     border-radius: 0.25em;
-    background-color: var(--u-input-bg-color);
+    background-color: var(--u-input-bg-color, #FFFFFF);
     transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
   }
   :host([readonly]) .container,
   :host([disabled]) .container {
-    border-color: var(--u-border-color-weak);
-    background-color: var(--u-bg-color-disabled);
+    border-color: var(--u-border-color-weak, #EEEEEE);
+    background-color: var(--u-bg-color-disabled, #FAFAFA);
   }
   :host(:not([readonly]):not([disabled])) .container:hover {
-    box-shadow: 0 0 0 1px var(--u-input-border-color-hover);
+    box-shadow: 0 0 0 1px var(--u-input-border-color-hover, #BDBDBD);
   }
   :host(:not([readonly]):not([disabled])) .container:focus-within {
-    box-shadow: 0 0 0 1px var(--u-input-border-color-focus);
+    box-shadow: 0 0 0 1px var(--u-input-border-color-focus, #1E88E5);
   }
   :host([invalid]:not([readonly]):not([disabled])) .container {
-    box-shadow: 0 0 0 1px var(--u-input-border-color-invalid);
+    box-shadow: 0 0 0 1px var(--u-input-border-color-invalid, #E53935);
   }
 
   /* ===== Variant: filled ===== */
   :host([variant="filled"]) .container {
     border-color: transparent;
-    background-color: var(--u-neutral-200);
+    background-color: var(--u-neutral-200, #EEEEEE);
     border-radius: 0.25em 0.25em 0 0;
-    border-bottom: 2px solid var(--u-input-border-color);
+    border-bottom: 2px solid var(--u-input-border-color, #E0E0E0);
   }
   :host([variant="filled"][readonly]) .container,
   :host([variant="filled"][disabled]) .container {
-    background-color: var(--u-bg-color-disabled);
-    border-bottom-color: var(--u-border-color-weak);
+    background-color: var(--u-bg-color-disabled, #FAFAFA);
+    border-bottom-color: var(--u-border-color-weak, #EEEEEE);
   }
   :host([variant="filled"]:not([readonly]):not([disabled])) .container:hover {
     box-shadow: none;
-    background-color: var(--u-neutral-300);
-    border-bottom-color: var(--u-input-border-color-hover);
+    background-color: var(--u-neutral-300, #E0E0E0);
+    border-bottom-color: var(--u-input-border-color-hover, #BDBDBD);
   }
   :host([variant="filled"]:not([readonly]):not([disabled])) .container:focus-within {
     box-shadow: none;
-    border-bottom-color: var(--u-input-border-color-focus);
+    border-bottom-color: var(--u-input-border-color-focus, #1E88E5);
   }
   :host([variant="filled"][invalid]:not([readonly]):not([disabled])) .container {
     box-shadow: none;
-    border-bottom-color: var(--u-input-border-color-invalid);
+    border-bottom-color: var(--u-input-border-color-invalid, #E53935);
   }
 
   /* ===== Variant: underlined ===== */
   :host([variant="underlined"]) .container {
     border: none;
-    border-radius: var(--u-radius-none);
+    border-radius: var(--u-radius-none, 0);
     background-color: transparent;
     padding-left: 0;
     padding-right: 0;
-    border-bottom: 1px solid var(--u-input-border-color);
+    border-bottom: 1px solid var(--u-input-border-color, #E0E0E0);
   }
   :host([variant="underlined"][readonly]) .container,
   :host([variant="underlined"][disabled]) .container {
     background-color: transparent;
-    border-bottom-color: var(--u-border-color-weak);
+    border-bottom-color: var(--u-border-color-weak, #EEEEEE);
   }
   :host([variant="underlined"]:not([readonly]):not([disabled])) .container:hover {
     box-shadow: none;
-    border-bottom-color: var(--u-input-border-color-hover);
+    border-bottom-color: var(--u-input-border-color-hover, #BDBDBD);
   }
   :host([variant="underlined"]:not([readonly]):not([disabled])) .container:focus-within {
     box-shadow: none;
-    border-bottom-color: var(--u-input-border-color-focus);
+    border-bottom-color: var(--u-input-border-color-focus, #1E88E5);
     border-bottom-width: 2px;
   }
   :host([variant="underlined"][invalid]:not([readonly]):not([disabled])) .container {
     box-shadow: none;
-    border-bottom-color: var(--u-input-border-color-invalid);
+    border-bottom-color: var(--u-input-border-color-invalid, #E53935);
   }
 
   /* ===== Variant: borderless ===== */
   :host([variant="borderless"]) .container {
     border: none;
-    border-radius: var(--u-radius-none);
+    border-radius: var(--u-radius-none, 0);
     background-color: transparent;
     padding: 0;
     box-shadow: none;
@@ -117,7 +117,7 @@ var styles = css`
     word-wrap: break-word;
   }
   textarea::placeholder {
-    color: var(--u-txt-color-weak);
+    color: var(--u-txt-color-weak, #9E9E9E);
   }
   textarea:disabled {
     cursor: not-allowed;
@@ -155,7 +155,7 @@ var styles = css`
   .counter {
     margin-top: 0.25em;
     text-align: right;
-    color: var(--u-txt-color-weak);
+    color: var(--u-txt-color-weak, #9E9E9E);
     font-size: 0.75em;
     line-height: 1.2;
   }