@iyulab/components 1.13.0 → 1.14.0

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

@@ -11,7 +11,7 @@ var styles = css`
   :host {
     position: relative;
     display: inline-block;
-    color: var(--u-txt-color);
+    color: var(--u-txt-color, #212121);
     font-size: inherit;
     font-family: var(--u-font-base);
   }
@@ -21,9 +21,9 @@ var styles = css`
     flex-direction: row;
     align-items: center;
     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;
     overflow: hidden;
     user-select: none;
@@ -31,8 +31,8 @@ var styles = css`
   }
   :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([disabled]) .container {
     cursor: not-allowed;
@@ -41,73 +41,73 @@ var styles = css`
     cursor: default;
   }
   :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: none;
     border-radius: 0.25em 0.25em 0 0;
-    border-bottom: 2px solid var(--u-input-border-color);
-    background-color: var(--u-neutral-200);
+    border-bottom: 2px solid var(--u-input-border-color, #E0E0E0);
+    background-color: var(--u-neutral-200, #EEEEEE);
   }
   :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;
@@ -118,7 +118,7 @@ var styles = css`
   }
 
   .count {
-    color: var(--u-txt-color-weak);
+    color: var(--u-txt-color-weak, #9E9E9E);
     line-height: 1.25;
   }
 
@@ -131,7 +131,7 @@ var styles = css`
     text-overflow: ellipsis;
   }
   .text-content.placeholder {
-    color: var(--u-txt-color-weak);
+    color: var(--u-txt-color-weak, #9E9E9E);
   }
 
   .chips-content {
@@ -152,15 +152,15 @@ var styles = css`
   .suffix-item {
     margin-left: 0.25em;
     font-size: 1em;
-    color: var(--u-icon-color);
+    color: var(--u-icon-color, #616161);
     transition: color 0.2s ease;
     cursor: pointer;
   }
   .suffix-item:hover {
-    color: var(--u-icon-color-hover);
+    color: var(--u-icon-color-hover, #1E88E5);
   }
   .suffix-item:active {
-    color: var(--u-icon-color-active);
+    color: var(--u-icon-color-active, #1E88E5);
   }
 
   /* 드롭다운 패널 — 옵션 텍스트가 길어도 팝오버가 앵커보다 넓어지지 않도록 고정 너비로
@@ -170,9 +170,9 @@ var styles = css`
     min-height: var(--select-popover-min-height);
     max-height: var(--select-popover-max-height);
     padding: 4px;
-    border: 1px solid var(--u-border-color);
-    border-radius: var(--u-radius-lg);
-    background-color: var(--u-panel-bg-color);
+    border: 1px solid var(--u-border-color, #E0E0E0);
+    border-radius: var(--u-radius-lg, 6px);
+    background-color: var(--u-panel-bg-color, #FFFFFF);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
     overflow-x: hidden;
     overflow-y: auto;
@@ -183,8 +183,8 @@ var styles = css`
     align-items: center;
     gap: 0.4em;
     padding: 0.3em 0.6em;
-    color: var(--u-txt-color-weak);
-    border-bottom: 1px solid var(--u-border-color);
+    color: var(--u-txt-color-weak, #9E9E9E);
+    border-bottom: 1px solid var(--u-border-color, #E0E0E0);
   }
   .search-input input {
     all: unset;
@@ -193,7 +193,7 @@ var styles = css`
     line-height: 1.5;
   }
   .search-input input::placeholder {
-    color: var(--u-txt-color-weak);
+    color: var(--u-txt-color-weak, #9E9E9E);
   }
 `;
 //#endregion

package/dist/components/skeleton/USkeleton.d.ts

@@ -9,8 +9,8 @@ export type SkeletonEffect = 'none' | 'pulse' | 'shimmer';
  *
  * @cssprop --skeleton-width - 스켈레톤의 너비 (기본값: 100%)
  * @cssprop --skeleton-height - 스켈레톤의 높이 (기본값: 1em)
- * @cssprop --skeleton-color - 스켈레톤의 기본 색상 (기본값: var(--u-neutral-200))
- * @cssprop --skeleton-shimmer-color - shimmer 효과의 색상 (기본값: var(--u-neutral-100))
+ * @cssprop --skeleton-color - 스켈레톤의 기본 색상 (기본값: var(--u-neutral-200, #EEEEEE))
+ * @cssprop --skeleton-shimmer-color - shimmer 효과의 색상 (기본값: var(--u-neutral-100, #F5F5F5))
  */
 export declare class USkeleton extends UElement {
     static styles: import('lit').CSSResultGroup[];

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

@@ -4,8 +4,8 @@ var styles = css`
   :host {
     --skeleton-width: 100%;
     --skeleton-height: 1em;
-    --skeleton-color: var(--u-neutral-200);
-    --skeleton-shimmer-color: var(--u-neutral-100);
+    --skeleton-color: var(--u-neutral-200, #EEEEEE);
+    --skeleton-shimmer-color: var(--u-neutral-100, #F5F5F5);
   }
 
   :host {
@@ -18,13 +18,13 @@ var styles = css`
 
   /* 모양 설정 */
   :host([shape="rectangle"]) {
-    border-radius: var(--u-radius-md);
+    border-radius: var(--u-radius-md, 4px);
   }
   :host([shape="circle"]) {
-    border-radius: var(--u-radius-circle);
+    border-radius: var(--u-radius-circle, 50%);
   }
   :host([shape="rounded"]) {
-    border-radius: var(--u-radius-pill);
+    border-radius: var(--u-radius-pill, 9999px);
   }
 
   /* 애니메이션 효과 설정 */

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,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: var(--u-radius-circle);
+    border-radius: var(--u-radius-circle, 50%);
     background: var(--slider-mark-color);
   }
 
@@ -117,7 +117,7 @@ var styles = css`
     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);
   }