@iyulab/components 1.12.0 → 1.14.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (50) hide show
  1. package/CHANGELOG.md +101 -3
  2. package/dist/_virtual/_glob-assets_raw/dark.css.e8ac080d.js +1 -1
  3. package/dist/_virtual/_glob-assets_raw/light.css.637cb2f8.js +1 -1
  4. package/dist/components/UElement.styles.js +8 -8
  5. package/dist/components/UOverlayElement.styles.js +1 -1
  6. package/dist/components/alert/UAlert.styles.js +25 -25
  7. package/dist/components/avatar/UAvatar.styles.js +5 -5
  8. package/dist/components/badge/UBadge.styles.js +22 -22
  9. package/dist/components/breadcrumb/UBreadcrumb.styles.js +2 -2
  10. package/dist/components/breadcrumb-item/UBreadcrumbItem.styles.js +2 -2
  11. package/dist/components/button/UButton.styles.js +28 -28
  12. package/dist/components/button-group/UButtonGroup.styles.js +1 -1
  13. package/dist/components/card/UCard.styles.js +8 -8
  14. package/dist/components/carousel/UCarousel.styles.js +10 -10
  15. package/dist/components/checkbox/UCheckbox.styles.js +20 -20
  16. package/dist/components/copy-button/UCopyButton.styles.js +2 -2
  17. package/dist/components/dialog/UDialog.styles.js +10 -10
  18. package/dist/components/divider/UDivider.js +7 -5
  19. package/dist/components/divider/UDivider.styles.js +27 -7
  20. package/dist/components/drawer/UDrawer.styles.js +9 -9
  21. package/dist/components/field/UField.styles.js +4 -4
  22. package/dist/components/icon-button/UIconButton.styles.js +2 -2
  23. package/dist/components/input/UInput.styles.js +30 -30
  24. package/dist/components/menu/UMenu.styles.js +5 -5
  25. package/dist/components/menu-item/UMenuItem.styles.js +7 -7
  26. package/dist/components/option/UOption.styles.js +9 -9
  27. package/dist/components/progress-bar/UProgressBar.styles.js +12 -12
  28. package/dist/components/progress-ring/UProgressRing.styles.js +11 -11
  29. package/dist/components/radio/URadio.styles.js +6 -6
  30. package/dist/components/rating/URating.styles.js +3 -3
  31. package/dist/components/select/USelect.styles.js +34 -34
  32. package/dist/components/skeleton/USkeleton.d.ts +2 -2
  33. package/dist/components/skeleton/USkeleton.styles.js +5 -5
  34. package/dist/components/slider/USlider.styles.js +11 -11
  35. package/dist/components/spinner/USpinner.styles.js +11 -11
  36. package/dist/components/split-panel/USplitPanel.styles.js +3 -3
  37. package/dist/components/switch/USwitch.styles.js +10 -10
  38. package/dist/components/tab/UTab.styles.js +3 -3
  39. package/dist/components/tab-panel/UTabPanel.styles.js +22 -22
  40. package/dist/components/tag/UTag.styles.js +63 -63
  41. package/dist/components/textarea/UTextarea.styles.js +25 -25
  42. package/dist/components/tooltip/UTooltip.styles.js +5 -5
  43. package/dist/components/tree/UTree.d.ts +1 -1
  44. package/dist/components/tree/UTree.styles.js +6 -3
  45. package/dist/components/tree-item/UTreeItem.styles.js +7 -7
  46. package/dist/styles/dark.css +14 -0
  47. package/dist/styles/light.css +15 -0
  48. package/dist/utilities/Theme.d.ts +16 -1
  49. package/dist/utilities/Theme.js +22 -1
  50. package/package.json +1 -1
package/dist/components/input/UInput.styles.js CHANGED
@@ -12,7 +12,7 @@ var styles = css`
12
12
  flex 컨테이너처럼 block 만으로 늘어나지 않는 맥락을 위해 width 경로도 함께 연다. */
13
13
  display: var(--u-input-display, inline-block);
14
14
  width: var(--u-input-width, auto);
15
- color: var(--u-txt-color);
15
+ color: var(--u-txt-color, #212121);
16
16
  font-size: inherit;
17
17
  font-family: var(--u-font-base);
18
18
  }
@@ -23,51 +23,51 @@ var styles = css`
23
23
  flex-direction: row;
24
24
  align-items: center;
25
25
  padding: 0.3em 0.6em;
26
- border: 1px solid var(--u-input-border-color);
26
+ border: 1px solid var(--u-input-border-color, #E0E0E0);
27
27
  border-radius: 0.25em;
28
- background-color: var(--u-input-bg-color);
28
+ background-color: var(--u-input-bg-color, #FFFFFF);
29
29
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
30
30
  overflow: hidden;
31
31
  }
32
32
  :host([readonly]) .container,
33
33
  :host([disabled]) .container {
34
- border-color: var(--u-border-color-weak);
35
- background-color: var(--u-bg-color-disabled);
34
+ border-color: var(--u-border-color-weak, #EEEEEE);
35
+ background-color: var(--u-bg-color-disabled, #FAFAFA);
36
36
  }
37
37
  :host(:not([readonly]):not([disabled])) .container:hover {
38
- box-shadow: 0 0 0 1px var(--u-input-border-color-hover);
38
+ box-shadow: 0 0 0 1px var(--u-input-border-color-hover, #BDBDBD);
39
39
  }
40
40
  :host(:not([readonly]):not([disabled])) .container:focus-within {
41
- box-shadow: 0 0 0 1px var(--u-input-border-color-focus);
41
+ box-shadow: 0 0 0 1px var(--u-input-border-color-focus, #1E88E5);
42
42
  }
43
43
  :host([invalid]:not([readonly]):not([disabled])) .container {
44
- box-shadow: 0 0 0 1px var(--u-input-border-color-invalid);
44
+ box-shadow: 0 0 0 1px var(--u-input-border-color-invalid, #E53935);
45
45
  }
46
46
 
47
47
  /* ===== Variant: filled ===== */
48
48
  :host([variant="filled"]) .container {
49
49
  border: none;
50
50
  border-radius: 0.25em 0.25em 0 0;
51
- border-bottom: 2px solid var(--u-input-border-color);
52
- background-color: var(--u-neutral-200);
51
+ border-bottom: 2px solid var(--u-input-border-color, #E0E0E0);
52
+ background-color: var(--u-neutral-200, #EEEEEE);
53
53
  }
54
54
  :host([variant="filled"][readonly]) .container,
55
55
  :host([variant="filled"][disabled]) .container {
56
- background-color: var(--u-bg-color-disabled);
57
- border-bottom-color: var(--u-border-color-weak);
56
+ background-color: var(--u-bg-color-disabled, #FAFAFA);
57
+ border-bottom-color: var(--u-border-color-weak, #EEEEEE);
58
58
  }
59
59
  :host([variant="filled"]:not([readonly]):not([disabled])) .container:hover {
60
60
  box-shadow: none;
61
- background-color: var(--u-neutral-300);
62
- border-bottom-color: var(--u-input-border-color-hover);
61
+ background-color: var(--u-neutral-300, #E0E0E0);
62
+ border-bottom-color: var(--u-input-border-color-hover, #BDBDBD);
63
63
  }
64
64
  :host([variant="filled"]:not([readonly]):not([disabled])) .container:focus-within {
65
65
  box-shadow: none;
66
- border-bottom-color: var(--u-input-border-color-focus);
66
+ border-bottom-color: var(--u-input-border-color-focus, #1E88E5);
67
67
  }
68
68
  :host([variant="filled"][invalid]:not([readonly]):not([disabled])) .container {
69
69
  box-shadow: none;
70
- border-bottom-color: var(--u-input-border-color-invalid);
70
+ border-bottom-color: var(--u-input-border-color-invalid, #E53935);
71
71
  }
72
72
 
73
73
  /* ===== Variant: underlined ===== */
@@ -75,33 +75,33 @@ var styles = css`
75
75
  padding-left: 0;
76
76
  padding-right: 0;
77
77
  border: none;
78
- border-radius: var(--u-radius-none);
79
- border-bottom: 1px solid var(--u-input-border-color);
78
+ border-radius: var(--u-radius-none, 0);
79
+ border-bottom: 1px solid var(--u-input-border-color, #E0E0E0);
80
80
  background-color: transparent;
81
81
  }
82
82
  :host([variant="underlined"][readonly]) .container,
83
83
  :host([variant="underlined"][disabled]) .container {
84
84
  background-color: transparent;
85
- border-bottom-color: var(--u-border-color-weak);
85
+ border-bottom-color: var(--u-border-color-weak, #EEEEEE);
86
86
  }
87
87
  :host([variant="underlined"]:not([readonly]):not([disabled])) .container:hover {
88
88
  box-shadow: none;
89
- border-bottom-color: var(--u-input-border-color-hover);
89
+ border-bottom-color: var(--u-input-border-color-hover, #BDBDBD);
90
90
  }
91
91
  :host([variant="underlined"]:not([readonly]):not([disabled])) .container:focus-within {
92
92
  box-shadow: none;
93
- border-bottom-color: var(--u-input-border-color-focus);
93
+ border-bottom-color: var(--u-input-border-color-focus, #1E88E5);
94
94
  border-bottom-width: 2px;
95
95
  }
96
96
  :host([variant="underlined"][invalid]:not([readonly]):not([disabled])) .container {
97
97
  box-shadow: none;
98
- border-bottom-color: var(--u-input-border-color-invalid);
98
+ border-bottom-color: var(--u-input-border-color-invalid, #E53935);
99
99
  }
100
100
 
101
101
  /* ===== Variant: borderless ===== */
102
102
  :host([variant="borderless"]) .container {
103
103
  border: none;
104
- border-radius: var(--u-radius-none);
104
+ border-radius: var(--u-radius-none, 0);
105
105
  background-color: transparent;
106
106
  padding: 0;
107
107
  box-shadow: none;
@@ -120,7 +120,7 @@ var styles = css`
120
120
  line-height: 1.5;
121
121
  }
122
122
  input::placeholder {
123
- color: var(--u-txt-color-weak);
123
+ color: var(--u-txt-color-weak, #9E9E9E);
124
124
  }
125
125
  input:disabled {
126
126
  cursor: not-allowed;
@@ -155,16 +155,16 @@ var styles = css`
155
155
  /* 아이콘 영역 (clear, password toggle 등) */
156
156
  .suffix-item {
157
157
  margin-left: 0.25em;
158
- color: var(--u-icon-color);
158
+ color: var(--u-icon-color, #616161);
159
159
  font-size: 1em;
160
160
  transition: color 0.2s ease;
161
161
  cursor: pointer;
162
162
  }
163
163
  .suffix-item:hover {
164
- color: var(--u-icon-color-hover);
164
+ color: var(--u-icon-color-hover, #1E88E5);
165
165
  }
166
166
  .suffix-item:active {
167
- color: var(--u-icon-color-active);
167
+ color: var(--u-icon-color-active, #1E88E5);
168
168
  }
169
169
 
170
170
  u-popover {
@@ -172,9 +172,9 @@ var styles = css`
172
172
  min-height: var(--input-popover-min-height);
173
173
  max-height: var(--input-popover-max-height);
174
174
  padding: 4px;
175
- border: 1px solid var(--u-border-color);
176
- border-radius: var(--u-radius-lg);
177
- background-color: var(--u-panel-bg-color);
175
+ border: 1px solid var(--u-border-color, #E0E0E0);
176
+ border-radius: var(--u-radius-lg, 6px);
177
+ background-color: var(--u-panel-bg-color, #FFFFFF);
178
178
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
179
179
  overflow-x: auto;
180
180
  overflow-y: auto;
package/dist/components/menu/UMenu.styles.js CHANGED
@@ -9,12 +9,12 @@ var styles = css`
9
9
  display: flex;
10
10
  flex-direction: column;
11
11
  min-width: 160px;
12
- border-radius: var(--u-radius-lg);
13
- background-color: var(--u-panel-bg-color);
12
+ border-radius: var(--u-radius-lg, 6px);
13
+ background-color: var(--u-panel-bg-color, #FFFFFF);
14
14
 
15
- --menu-padding: 4px;
15
+ --menu-padding: var(--u-space-2xs, 4px);
16
16
  --menu-border-width: 1px;
17
- --menu-border-color: var(--u-border-color);
17
+ --menu-border-color: var(--u-border-color, #E0E0E0);
18
18
  }
19
19
 
20
20
  /* 여백/테두리는 내부 요소가 진다 — :host 에 두면 소비 앱 CSS 리셋에 지워진다. */
@@ -30,7 +30,7 @@ var styles = css`
30
30
  :host([borderless]) {
31
31
  --menu-padding: 0;
32
32
  --menu-border-width: 0;
33
- border-radius: var(--u-radius-none);
33
+ border-radius: var(--u-radius-none, 0);
34
34
  background-color: transparent;
35
35
  }
36
36
  `;
package/dist/components/menu-item/UMenuItem.styles.js CHANGED
@@ -3,7 +3,7 @@ import { css } from "lit";
3
3
  var styles = css`
4
4
  :host {
5
5
  --menu-item-depth: 0;
6
- --menu-item-color: var(--u-primary-color);
6
+ --menu-item-color: var(--u-primary-color, #1E88E5);
7
7
  }
8
8
 
9
9
  :host {
@@ -44,18 +44,18 @@ var styles = css`
44
44
  /* hover & focus */
45
45
  :host(:not([disabled])) .header:hover,
46
46
  :host(:not([disabled]):focus-visible) .header {
47
- background-color: var(--u-bg-color-hover);
47
+ background-color: var(--u-bg-color-hover, #F5F5F5);
48
48
  }
49
49
 
50
50
  /* indicator: highlight */
51
51
  :host([selected][indicator="highlight"]) .header {
52
52
  font-weight: 600;
53
53
  color: color-mix(in srgb, var(--menu-item-color) 85%, black);
54
- background-color: color-mix(in srgb, var(--menu-item-color) 15%, var(--u-bg-color));
54
+ background-color: color-mix(in srgb, var(--menu-item-color) 15%, var(--u-bg-color, #FFFFFF));
55
55
  }
56
56
  :host([selected][indicator="highlight"]) .header:hover,
57
57
  :host([selected][indicator="highlight"]:focus-visible) .header {
58
- background-color: color-mix(in srgb, var(--menu-item-color) 25%, var(--u-bg-color));
58
+ background-color: color-mix(in srgb, var(--menu-item-color) 25%, var(--u-bg-color, #FFFFFF));
59
59
  }
60
60
 
61
61
  .prefix-checker {
@@ -136,9 +136,9 @@ var styles = css`
136
136
  display: flex;
137
137
  flex-direction: column;
138
138
  padding: 4px;
139
- border: 1px solid var(--u-border-color);
140
- border-radius: var(--u-radius-md);
141
- background-color: var(--u-panel-bg-color);
139
+ border: 1px solid var(--u-border-color, #E0E0E0);
140
+ border-radius: var(--u-radius-md, 4px);
141
+ background-color: var(--u-panel-bg-color, #FFFFFF);
142
142
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
143
143
  transform: scale(0.8);
144
144
  transition: opacity 0.2s ease, visibility 0s 0.2s, transform 0.2s ease;
package/dist/components/option/UOption.styles.js CHANGED
@@ -2,18 +2,18 @@ import { css } from "lit";
2
2
  //#region src/components/option/UOption.styles.ts
3
3
  var styles = css`
4
4
  :host {
5
- --option-color: var(--u-primary-color);
5
+ --option-color: var(--u-primary-color, #1E88E5);
6
6
  --option-color-interactive: inherit;
7
- --option-border-color-interactive: var(--u-border-color-hover);
8
- --option-background-color-interactive: var(--u-bg-color-hover);
7
+ --option-border-color-interactive: var(--u-border-color-hover, #BDBDBD);
8
+ --option-background-color-interactive: var(--u-bg-color-hover, #F5F5F5);
9
9
 
10
10
  --option-color-active: inherit;
11
11
  --option-border-color-active: var(--option-color);
12
- --option-background-color-active: color-mix(in srgb, var(--option-color) 15%, var(--u-bg-color));
12
+ --option-background-color-active: color-mix(in srgb, var(--option-color) 15%, var(--u-bg-color, #FFFFFF));
13
13
 
14
14
  --option-color-active-interactive: inherit;
15
15
  --option-border-color-active-interactive: var(--option-color);
16
- --option-background-color-active-interactive: color-mix(in srgb, var(--option-color) 25%, var(--u-bg-color));
16
+ --option-background-color-active-interactive: color-mix(in srgb, var(--option-color) 25%, var(--u-bg-color, #FFFFFF));
17
17
  }
18
18
 
19
19
  :host {
@@ -99,9 +99,9 @@ var styles = css`
99
99
  justify-content: center;
100
100
  width: 1.25em;
101
101
  height: 1.25em;
102
- border: 2px solid var(--u-neutral-400);
103
- border-radius: var(--u-radius-circle);
104
- background-color: var(--u-bg-color);
102
+ border: 2px solid var(--u-neutral-400, #BDBDBD);
103
+ border-radius: var(--u-radius-circle, 50%);
104
+ background-color: var(--u-bg-color, #FFFFFF);
105
105
  transition: border-color 0.2s ease, background-color 0.2s ease;
106
106
  }
107
107
  :host([marker="radio"]:not([disabled]):hover) .radio-marker,
@@ -124,7 +124,7 @@ var styles = css`
124
124
  display: block;
125
125
  width: 0.45em;
126
126
  height: 0.45em;
127
- border-radius: var(--u-radius-circle);
127
+ border-radius: var(--u-radius-circle, 50%);
128
128
  background-color: var(--option-color-active);
129
129
  transform: scale(0);
130
130
  transition: transform 0.15s ease;
package/dist/components/progress-bar/UProgressBar.styles.js CHANGED
@@ -3,27 +3,27 @@ import { css } from "lit";
3
3
  var styles = css`
4
4
  :host {
5
5
  --progress-bar-height: 0.5em;
6
- --progress-bar-color: var(--u-primary-color);
7
- --progress-bar-buffer-color: color-mix(in srgb, var(--progress-bar-color) 35%, var(--u-bg-color));
8
- --progress-bar-track-color: var(--u-neutral-200);
6
+ --progress-bar-color: var(--u-primary-color, #1E88E5);
7
+ --progress-bar-buffer-color: color-mix(in srgb, var(--progress-bar-color) 35%, var(--u-bg-color, #FFFFFF));
8
+ --progress-bar-track-color: var(--u-neutral-200, #EEEEEE);
9
9
  }
10
10
 
11
11
  /* === Status Colors === */
12
12
  :host([status="success"]) {
13
- --progress-bar-color: var(--u-success-color);
14
- --progress-bar-buffer-color: var(--u-success-color-weakest);
13
+ --progress-bar-color: var(--u-success-color, #43A047);
14
+ --progress-bar-buffer-color: var(--u-success-color-weakest, #A5D6A7);
15
15
  }
16
16
  :host([status="warning"]) {
17
- --progress-bar-color: var(--u-warning-color-weak);
18
- --progress-bar-buffer-color: var(--u-warning-color-weakest);
17
+ --progress-bar-color: var(--u-warning-color-weak, #FFEB3B);
18
+ --progress-bar-buffer-color: var(--u-warning-color-weakest, #FFF59D);
19
19
  }
20
20
  :host([status="error"]) {
21
- --progress-bar-color: var(--u-danger-color);
22
- --progress-bar-buffer-color: var(--u-danger-color-weakest);
21
+ --progress-bar-color: var(--u-danger-color, #E53935);
22
+ --progress-bar-buffer-color: var(--u-danger-color-weakest, #EF9A9A);
23
23
  }
24
24
  :host([status="info"]) {
25
- --progress-bar-color: var(--u-info-color-weak);
26
- --progress-bar-buffer-color: var(--u-info-color-weakest);
25
+ --progress-bar-color: var(--u-info-color-weak, #2196F3);
26
+ --progress-bar-buffer-color: var(--u-info-color-weakest, #90CAF9);
27
27
  }
28
28
 
29
29
  :host {
@@ -37,7 +37,7 @@ var styles = css`
37
37
 
38
38
  /* === Rounded === */
39
39
  :host([rounded]) {
40
- border-radius: var(--u-radius-pill);
40
+ border-radius: var(--u-radius-pill, 9999px);
41
41
  }
42
42
 
43
43
  /* === Indeterminate === */
package/dist/components/progress-ring/UProgressRing.styles.js CHANGED
@@ -3,28 +3,28 @@ import { css } from "lit";
3
3
  var styles = css`
4
4
  :host {
5
5
  --progress-ring-size: 6em;
6
- --progress-ring-color: var(--u-primary-color);
6
+ --progress-ring-color: var(--u-primary-color, #1E88E5);
7
7
  --progress-ring-track-width: 6;
8
- --progress-ring-track-color: var(--u-neutral-200);
9
- --progress-ring-buffer-color: color-mix(in srgb, var(--progress-ring-color) 35%, var(--u-bg-color));
8
+ --progress-ring-track-color: var(--u-neutral-200, #EEEEEE);
9
+ --progress-ring-buffer-color: color-mix(in srgb, var(--progress-ring-color) 35%, var(--u-bg-color, #FFFFFF));
10
10
  }
11
11
 
12
12
  /* === Status Colors === */
13
13
  :host([status="success"]) {
14
- --progress-ring-color: var(--u-success-color);
15
- --progress-ring-buffer-color: var(--u-success-color-weakest);
14
+ --progress-ring-color: var(--u-success-color, #43A047);
15
+ --progress-ring-buffer-color: var(--u-success-color-weakest, #A5D6A7);
16
16
  }
17
17
  :host([status="warning"]) {
18
- --progress-ring-color: var(--u-warning-color-weak);
19
- --progress-ring-buffer-color: var(--u-warning-color-weakest);
18
+ --progress-ring-color: var(--u-warning-color-weak, #FFEB3B);
19
+ --progress-ring-buffer-color: var(--u-warning-color-weakest, #FFF59D);
20
20
  }
21
21
  :host([status="error"]) {
22
- --progress-ring-color: var(--u-danger-color);
23
- --progress-ring-buffer-color: var(--u-danger-color-weakest);
22
+ --progress-ring-color: var(--u-danger-color, #E53935);
23
+ --progress-ring-buffer-color: var(--u-danger-color-weakest, #EF9A9A);
24
24
  }
25
25
  :host([status="info"]) {
26
- --progress-ring-color: var(--u-info-color-weak);
27
- --progress-ring-buffer-color: var(--u-info-color-weakest);
26
+ --progress-ring-color: var(--u-info-color-weak, #2196F3);
27
+ --progress-ring-buffer-color: var(--u-info-color-weakest, #90CAF9);
28
28
  }
29
29
 
30
30
  /* === Host === */
package/dist/components/radio/URadio.styles.js CHANGED
@@ -2,7 +2,7 @@ import { css } from "lit";
2
2
  //#region src/components/radio/URadio.styles.ts
3
3
  var styles = css`
4
4
  :host {
5
- --radio-color: var(--u-primary-color);
5
+ --radio-color: var(--u-primary-color, #1E88E5);
6
6
  --radio-color-active: color-mix(in srgb, var(--radio-color) 85%, black);
7
7
  }
8
8
 
@@ -12,7 +12,7 @@ var styles = css`
12
12
  gap: 0.5em;
13
13
  font-size: inherit;
14
14
  font-family: var(--u-font-base);
15
- color: var(--u-txt-color);
15
+ color: var(--u-txt-color, #212121);
16
16
  }
17
17
  :host([disabled]) {
18
18
  opacity: 0.6;
@@ -34,11 +34,11 @@ var styles = css`
34
34
  }
35
35
  :host([type="button"]) .container {
36
36
  gap: 0;
37
- border: 1px solid var(--u-neutral-300);
37
+ border: 1px solid var(--u-neutral-300, #E0E0E0);
38
38
  border-radius: 0.35em;
39
39
  }
40
40
  :host([invalid]) .container {
41
- border-color: var(--u-danger-color);
41
+ border-color: var(--u-danger-color, #E53935);
42
42
  }
43
43
 
44
44
  /* Type: default */
@@ -94,7 +94,7 @@ var styles = css`
94
94
  border-radius: 0 0.35em 0.35em 0;
95
95
  }
96
96
  :host([type="button"][orientation="horizontal"]) ::slotted(u-option:not(:last-child)) {
97
- border-right: 1px solid var(--u-neutral-300);
97
+ border-right: 1px solid var(--u-neutral-300, #E0E0E0);
98
98
  }
99
99
 
100
100
  /* === Button - Vertical 배치 === */
@@ -109,7 +109,7 @@ var styles = css`
109
109
  border-radius: 0 0 0.35em 0.35em;
110
110
  }
111
111
  :host([type="button"][orientation="vertical"]) ::slotted(u-option:not(:last-child)) {
112
- border-bottom: 1px solid var(--u-neutral-300);
112
+ border-bottom: 1px solid var(--u-neutral-300, #E0E0E0);
113
113
  }
114
114
  `;
115
115
  //#endregion
package/dist/components/rating/URating.styles.js CHANGED
@@ -2,8 +2,8 @@ import { css } from "lit";
2
2
  //#region src/components/rating/URating.styles.ts
3
3
  var styles = css`
4
4
  :host {
5
- --rating-symbol-color: var(--u-warning-color-weak);
6
- --rating-symbol-off-color: var(--u-neutral-300);
5
+ --rating-symbol-color: var(--u-warning-color-weak, #FFEB3B);
6
+ --rating-symbol-off-color: var(--u-neutral-300, #E0E0E0);
7
7
  }
8
8
 
9
9
  :host {
@@ -32,7 +32,7 @@ var styles = css`
32
32
  transition: color 0.15s ease, transform 0.15s ease;
33
33
  }
34
34
  .symbol:focus-visible {
35
- outline: 2px solid var(--u-primary-color-weak);
35
+ outline: 2px solid var(--u-primary-color-weak, #2196F3);
36
36
  outline-offset: 2px;
37
37
  }
38
38
  :host(:not([disabled]):not([readonly])) .symbol:hover {
package/dist/components/select/USelect.styles.js CHANGED
@@ -11,7 +11,7 @@ var styles = css`
11
11
  :host {
12
12
  position: relative;
13
13
  display: inline-block;
14
- color: var(--u-txt-color);
14
+ color: var(--u-txt-color, #212121);
15
15
  font-size: inherit;
16
16
  font-family: var(--u-font-base);
17
17
  }
@@ -21,9 +21,9 @@ var styles = css`
21
21
  flex-direction: row;
22
22
  align-items: center;
23
23
  padding: 0.3em 0.6em;
24
- border: 1px solid var(--u-input-border-color);
24
+ border: 1px solid var(--u-input-border-color, #E0E0E0);
25
25
  border-radius: 0.25em;
26
- background-color: var(--u-input-bg-color);
26
+ background-color: var(--u-input-bg-color, #FFFFFF);
27
27
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
28
28
  overflow: hidden;
29
29
  user-select: none;
@@ -31,8 +31,8 @@ var styles = css`
31
31
  }
32
32
  :host([readonly]) .container,
33
33
  :host([disabled]) .container {
34
- border-color: var(--u-border-color-weak);
35
- background-color: var(--u-bg-color-disabled);
34
+ border-color: var(--u-border-color-weak, #EEEEEE);
35
+ background-color: var(--u-bg-color-disabled, #FAFAFA);
36
36
  }
37
37
  :host([disabled]) .container {
38
38
  cursor: not-allowed;
@@ -41,73 +41,73 @@ var styles = css`
41
41
  cursor: default;
42
42
  }
43
43
  :host(:not([readonly]):not([disabled])) .container:hover {
44
- box-shadow: 0 0 0 1px var(--u-input-border-color-hover);
44
+ box-shadow: 0 0 0 1px var(--u-input-border-color-hover, #BDBDBD);
45
45
  }
46
46
  :host(:not([readonly]):not([disabled])) .container:focus-within {
47
- box-shadow: 0 0 0 1px var(--u-input-border-color-focus);
47
+ box-shadow: 0 0 0 1px var(--u-input-border-color-focus, #1E88E5);
48
48
  }
49
49
  :host([invalid]:not([readonly]):not([disabled])) .container {
50
- box-shadow: 0 0 0 1px var(--u-input-border-color-invalid);
50
+ box-shadow: 0 0 0 1px var(--u-input-border-color-invalid, #E53935);
51
51
  }
52
52
 
53
53
  /* ===== Variant: filled ===== */
54
54
  :host([variant="filled"]) .container {
55
55
  border: none;
56
56
  border-radius: 0.25em 0.25em 0 0;
57
- border-bottom: 2px solid var(--u-input-border-color);
58
- background-color: var(--u-neutral-200);
57
+ border-bottom: 2px solid var(--u-input-border-color, #E0E0E0);
58
+ background-color: var(--u-neutral-200, #EEEEEE);
59
59
  }
60
60
  :host([variant="filled"][readonly]) .container,
61
61
  :host([variant="filled"][disabled]) .container {
62
- background-color: var(--u-bg-color-disabled);
63
- border-bottom-color: var(--u-border-color-weak);
62
+ background-color: var(--u-bg-color-disabled, #FAFAFA);
63
+ border-bottom-color: var(--u-border-color-weak, #EEEEEE);
64
64
  }
65
65
  :host([variant="filled"]:not([readonly]):not([disabled])) .container:hover {
66
66
  box-shadow: none;
67
- background-color: var(--u-neutral-300);
68
- border-bottom-color: var(--u-input-border-color-hover);
67
+ background-color: var(--u-neutral-300, #E0E0E0);
68
+ border-bottom-color: var(--u-input-border-color-hover, #BDBDBD);
69
69
  }
70
70
  :host([variant="filled"]:not([readonly]):not([disabled])) .container:focus-within {
71
71
  box-shadow: none;
72
- border-bottom-color: var(--u-input-border-color-focus);
72
+ border-bottom-color: var(--u-input-border-color-focus, #1E88E5);
73
73
  }
74
74
  :host([variant="filled"][invalid]:not([readonly]):not([disabled])) .container {
75
75
  box-shadow: none;
76
- border-bottom-color: var(--u-input-border-color-invalid);
76
+ border-bottom-color: var(--u-input-border-color-invalid, #E53935);
77
77
  }
78
78
 
79
79
  /* ===== Variant: underlined ===== */
80
80
  :host([variant="underlined"]) .container {
81
81
  border: none;
82
- border-radius: var(--u-radius-none);
82
+ border-radius: var(--u-radius-none, 0);
83
83
  background-color: transparent;
84
84
  padding-left: 0;
85
85
  padding-right: 0;
86
- border-bottom: 1px solid var(--u-input-border-color);
86
+ border-bottom: 1px solid var(--u-input-border-color, #E0E0E0);
87
87
  }
88
88
  :host([variant="underlined"][readonly]) .container,
89
89
  :host([variant="underlined"][disabled]) .container {
90
90
  background-color: transparent;
91
- border-bottom-color: var(--u-border-color-weak);
91
+ border-bottom-color: var(--u-border-color-weak, #EEEEEE);
92
92
  }
93
93
  :host([variant="underlined"]:not([readonly]):not([disabled])) .container:hover {
94
94
  box-shadow: none;
95
- border-bottom-color: var(--u-input-border-color-hover);
95
+ border-bottom-color: var(--u-input-border-color-hover, #BDBDBD);
96
96
  }
97
97
  :host([variant="underlined"]:not([readonly]):not([disabled])) .container:focus-within {
98
98
  box-shadow: none;
99
- border-bottom-color: var(--u-input-border-color-focus);
99
+ border-bottom-color: var(--u-input-border-color-focus, #1E88E5);
100
100
  border-bottom-width: 2px;
101
101
  }
102
102
  :host([variant="underlined"][invalid]:not([readonly]):not([disabled])) .container {
103
103
  box-shadow: none;
104
- border-bottom-color: var(--u-input-border-color-invalid);
104
+ border-bottom-color: var(--u-input-border-color-invalid, #E53935);
105
105
  }
106
106
 
107
107
  /* ===== Variant: borderless ===== */
108
108
  :host([variant="borderless"]) .container {
109
109
  border: none;
110
- border-radius: var(--u-radius-none);
110
+ border-radius: var(--u-radius-none, 0);
111
111
  background-color: transparent;
112
112
  padding: 0;
113
113
  box-shadow: none;
@@ -118,7 +118,7 @@ var styles = css`
118
118
  }
119
119
 
120
120
  .count {
121
- color: var(--u-txt-color-weak);
121
+ color: var(--u-txt-color-weak, #9E9E9E);
122
122
  line-height: 1.25;
123
123
  }
124
124
 
@@ -131,7 +131,7 @@ var styles = css`
131
131
  text-overflow: ellipsis;
132
132
  }
133
133
  .text-content.placeholder {
134
- color: var(--u-txt-color-weak);
134
+ color: var(--u-txt-color-weak, #9E9E9E);
135
135
  }
136
136
 
137
137
  .chips-content {
@@ -152,15 +152,15 @@ var styles = css`
152
152
  .suffix-item {
153
153
  margin-left: 0.25em;
154
154
  font-size: 1em;
155
- color: var(--u-icon-color);
155
+ color: var(--u-icon-color, #616161);
156
156
  transition: color 0.2s ease;
157
157
  cursor: pointer;
158
158
  }
159
159
  .suffix-item:hover {
160
- color: var(--u-icon-color-hover);
160
+ color: var(--u-icon-color-hover, #1E88E5);
161
161
  }
162
162
  .suffix-item:active {
163
- color: var(--u-icon-color-active);
163
+ color: var(--u-icon-color-active, #1E88E5);
164
164
  }
165
165
 
166
166
  /* 드롭다운 패널 — 옵션 텍스트가 길어도 팝오버가 앵커보다 넓어지지 않도록 고정 너비로
@@ -170,9 +170,9 @@ var styles = css`
170
170
  min-height: var(--select-popover-min-height);
171
171
  max-height: var(--select-popover-max-height);
172
172
  padding: 4px;
173
- border: 1px solid var(--u-border-color);
174
- border-radius: var(--u-radius-lg);
175
- background-color: var(--u-panel-bg-color);
173
+ border: 1px solid var(--u-border-color, #E0E0E0);
174
+ border-radius: var(--u-radius-lg, 6px);
175
+ background-color: var(--u-panel-bg-color, #FFFFFF);
176
176
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
177
177
  overflow-x: hidden;
178
178
  overflow-y: auto;
@@ -183,8 +183,8 @@ var styles = css`
183
183
  align-items: center;
184
184
  gap: 0.4em;
185
185
  padding: 0.3em 0.6em;
186
- color: var(--u-txt-color-weak);
187
- border-bottom: 1px solid var(--u-border-color);
186
+ color: var(--u-txt-color-weak, #9E9E9E);
187
+ border-bottom: 1px solid var(--u-border-color, #E0E0E0);
188
188
  }
189
189
  .search-input input {
190
190
  all: unset;
@@ -193,7 +193,7 @@ var styles = css`
193
193
  line-height: 1.5;
194
194
  }
195
195
  .search-input input::placeholder {
196
- color: var(--u-txt-color-weak);
196
+ color: var(--u-txt-color-weak, #9E9E9E);
197
197
  }
198
198
  `;
199
199
  //#endregion
package/dist/components/skeleton/USkeleton.d.ts CHANGED
@@ -9,8 +9,8 @@ export type SkeletonEffect = 'none' | 'pulse' | 'shimmer';
9
9
  *
10
10
  * @cssprop --skeleton-width - 스켈레톤의 너비 (기본값: 100%)
11
11
  * @cssprop --skeleton-height - 스켈레톤의 높이 (기본값: 1em)
12
- * @cssprop --skeleton-color - 스켈레톤의 기본 색상 (기본값: var(--u-neutral-200))
13
- * @cssprop --skeleton-shimmer-color - shimmer 효과의 색상 (기본값: var(--u-neutral-100))
12
+ * @cssprop --skeleton-color - 스켈레톤의 기본 색상 (기본값: var(--u-neutral-200, #EEEEEE))
13
+ * @cssprop --skeleton-shimmer-color - shimmer 효과의 색상 (기본값: var(--u-neutral-100, #F5F5F5))
14
14
  */
15
15
  export declare class USkeleton extends UElement {
16
16
  static styles: import('lit').CSSResultGroup[];
package/dist/components/skeleton/USkeleton.styles.js CHANGED
@@ -4,8 +4,8 @@ var styles = css`
4
4
  :host {
5
5
  --skeleton-width: 100%;
6
6
  --skeleton-height: 1em;
7
- --skeleton-color: var(--u-neutral-200);
8
- --skeleton-shimmer-color: var(--u-neutral-100);
7
+ --skeleton-color: var(--u-neutral-200, #EEEEEE);
8
+ --skeleton-shimmer-color: var(--u-neutral-100, #F5F5F5);
9
9
  }
10
10
 
11
11
  :host {
@@ -18,13 +18,13 @@ var styles = css`
18
18
 
19
19
  /* 모양 설정 */
20
20
  :host([shape="rectangle"]) {
21
- border-radius: var(--u-radius-md);
21
+ border-radius: var(--u-radius-md, 4px);
22
22
  }
23
23
  :host([shape="circle"]) {
24
- border-radius: var(--u-radius-circle);
24
+ border-radius: var(--u-radius-circle, 50%);
25
25
  }
26
26
  :host([shape="rounded"]) {
27
- border-radius: var(--u-radius-pill);
27
+ border-radius: var(--u-radius-pill, 9999px);
28
28
  }
29
29
 
30
30
  /* 애니메이션 효과 설정 */