@iyulab/components 1.1.0 → 1.2.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 (55) hide show
  1. package/CHANGELOG.md +45 -0
  2. package/dist/_virtual/{_@oxc-project_runtime@0.133.0 → _@oxc-project_runtime@0.138.0}/helpers/esm/decorate.js +2 -2
  3. package/dist/_virtual/{_@oxc-project_runtime@0.133.0 → _@oxc-project_runtime@0.138.0}/helpers/esm/decorateMetadata.js +2 -2
  4. package/dist/components/UFloatingElement.js +2 -2
  5. package/dist/components/UFormControlElement.js +2 -2
  6. package/dist/components/UOverlayElement.js +2 -2
  7. package/dist/components/alert/UAlert.js +2 -2
  8. package/dist/components/alert/UAlert.styles.js +7 -1
  9. package/dist/components/avatar/UAvatar.js +2 -2
  10. package/dist/components/badge/UBadge.js +2 -2
  11. package/dist/components/breadcrumb/UBreadcrumb.js +1 -1
  12. package/dist/components/breadcrumb-item/UBreadcrumbItem.js +2 -2
  13. package/dist/components/button/UButton.d.ts +14 -0
  14. package/dist/components/button/UButton.js +12 -2
  15. package/dist/components/button/UButton.styles.js +66 -22
  16. package/dist/components/button-group/UButtonGroup.js +2 -2
  17. package/dist/components/card/UCard.js +2 -2
  18. package/dist/components/carousel/UCarousel.js +2 -2
  19. package/dist/components/checkbox/UCheckbox.js +2 -2
  20. package/dist/components/chip/UChip.js +2 -2
  21. package/dist/components/dialog/UDialog.js +2 -2
  22. package/dist/components/divider/UDivider.js +2 -2
  23. package/dist/components/drawer/UDrawer.d.ts +4 -0
  24. package/dist/components/drawer/UDrawer.js +2 -2
  25. package/dist/components/drawer/UDrawer.styles.js +18 -2
  26. package/dist/components/field/UField.js +2 -2
  27. package/dist/components/form/UForm.js +2 -2
  28. package/dist/components/icon/UIcon.js +2 -2
  29. package/dist/components/icon-button/UIconButton.js +2 -2
  30. package/dist/components/input/UInput.js +2 -2
  31. package/dist/components/menu/UMenu.js +2 -2
  32. package/dist/components/menu-item/UMenuItem.js +2 -2
  33. package/dist/components/option/UOption.js +2 -2
  34. package/dist/components/panel/UPanel.js +2 -2
  35. package/dist/components/popover/UPopover.js +2 -2
  36. package/dist/components/progress-bar/UProgressBar.js +2 -2
  37. package/dist/components/progress-ring/UProgressRing.js +2 -2
  38. package/dist/components/radio/URadio.js +2 -2
  39. package/dist/components/rating/URating.js +2 -2
  40. package/dist/components/select/USelect.js +2 -2
  41. package/dist/components/skeleton/USkeleton.js +2 -2
  42. package/dist/components/slider/USlider.js +2 -2
  43. package/dist/components/spinner/USpinner.js +2 -2
  44. package/dist/components/split-panel/USplitPanel.js +2 -2
  45. package/dist/components/switch/USwitch.js +2 -2
  46. package/dist/components/tab/UTab.js +2 -2
  47. package/dist/components/tab-panel/UTabPanel.js +2 -2
  48. package/dist/components/tag/UTag.js +2 -2
  49. package/dist/components/textarea/UTextarea.js +2 -2
  50. package/dist/components/tooltip/UTooltip.js +2 -2
  51. package/dist/components/tree/UTree.js +2 -2
  52. package/dist/components/tree-item/UTreeItem.js +2 -2
  53. package/dist/utilities/elements.js +1 -1
  54. package/package.json +1 -1
  55. package/skills/iyulab-components/references/components/button.md +16 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,50 @@
1
1
  # Changelog
2
2
 
3
+ ## [1.2.0] - 2026-07-02
4
+
5
+ ### Added
6
+ - `UButton`: `color` property (`"neutral" | "blue" | "green" | "red" | "orange" | "teal" | "cyan" | "purple" | "pink"`, default `"neutral"`) — semantic color axis independent of `variant`, e.g. `variant="solid" color="red"` for a destructive action button.
7
+ - Default `"neutral"` renders identically to the previous (pre-1.2.0) output — fully backward compatible.
8
+ - Applies to `solid`/`surface`/`filled`/`outlined` (background/border) and `link` (text color, only when explicitly set to a non-neutral color — the default blue `link` look is preserved). `ghost` is unaffected: its hover/active backgrounds use the generic `--u-bg-color-hover`/`--u-bg-color-active` tokens rather than the neutral color scale, so there is no palette to redirect.
9
+ - Verified visually via a live browser render (all variant × color combinations) in addition to `npm run build`/`npm test`.
10
+ - `UButton`: `size` property (`"sm" | "md" | "lg"`, default `"md"`) — scales the button by changing `font-size` only; padding, the spinner, and prefix/suffix margins are already `em`-relative so they scale proportionally with zero extra CSS.
11
+ - Default `"md"` (14px) renders identically to the previous (pre-1.2.0) output — fully backward compatible. `sm` = 12px, `lg` = 16px.
12
+ - Verified visually via a live browser render (sm/md/lg, including with `loading` and prefix icon slots).
13
+
14
+ ## [1.1.1] - 2026-06-26
15
+
16
+ ### Fixed
17
+ - `UAlert`: Moved padding from `:host` to the Shadow DOM `.container`. A consumer-side light-DOM reset (e.g. Tailwind preflight's `*{padding:0}`) targets the host element directly and overrode the `:host` padding, collapsing toast/alert spacing to zero. Padding on a Shadow DOM inner element is immune to outer-tree resets.
18
+ - `UDrawer`: `.panel` now honors `--drawer-size`. Previously the panel never referenced the variable, so setting `--drawer-size` had no effect and the panel sized to its intrinsic content width. Slide-axis size is now `width: var(--drawer-size, 28rem)` (left/right) / `height: var(--drawer-size, 16rem)` (top/bottom), with `max-width`/`max-height: 100%` for narrow viewports.
19
+
20
+ ### Added
21
+ - `UDrawer`: Documented `--drawer-size` as a public CSS custom property (`@cssproperty`).
22
+
23
+ ## [1.1.0] - 2026-06-22
24
+
25
+ ### Added
26
+ - Validation messages: Introduced a locale registry (English default + `registerLocale`) so consumers can register and switch validation-message locales.
27
+
28
+ ## [1.0.10] - 2026-06-09
29
+
30
+ ### Fixed
31
+ - `UInput`: Fixed broken IME composition input and prevented duplicate `input` event dispatch.
32
+
33
+ ## [1.0.9] - 2026-05-27
34
+
35
+ ### Changed
36
+ - `Toast`: Default duration changed from 3000ms to 4000ms.
37
+
38
+ ## [1.0.8] - 2026-05-21
39
+
40
+ ### Added
41
+ - `vite-plugin-react-wrapper`: Added an `exclude` option.
42
+
43
+ ## [1.0.7] - 2026-05-21
44
+
45
+ ### Changed
46
+ - `UAlert`: Increased padding (8px→12px vertical, 12px→16px horizontal) to improve toast spacing.
47
+
3
48
  ## [1.0.6] - 2026-05-15
4
49
 
5
50
  ### Changed
@@ -1,4 +1,4 @@
1
- //#region \0@oxc-project+runtime@0.133.0/helpers/esm/decorate.js
1
+ //#region \0@oxc-project+runtime@0.138.0/helpers/esm/decorate.js
2
2
  function __decorate(decorators, target, key, desc) {
3
3
  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
4
4
  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -6,4 +6,4 @@ function __decorate(decorators, target, key, desc) {
6
6
  return c > 3 && r && Object.defineProperty(target, key, r), r;
7
7
  }
8
8
  //#endregion
9
- export { __decorate };
9
+ export { __decorate as default };
@@ -1,6 +1,6 @@
1
- //#region \0@oxc-project+runtime@0.133.0/helpers/esm/decorateMetadata.js
1
+ //#region \0@oxc-project+runtime@0.138.0/helpers/esm/decorateMetadata.js
2
2
  function __decorateMetadata(k, v) {
3
3
  if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
4
4
  }
5
5
  //#endregion
6
- export { __decorateMetadata };
6
+ export { __decorateMetadata as default };
@@ -1,6 +1,6 @@
1
1
  import { UElement } from "./UElement.js";
2
- import { __decorateMetadata } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorateMetadata.js";
3
- import { __decorate } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
2
+ import __decorateMetadata from "../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
3
+ import __decorate from "../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
4
4
  import { getParentElement, querySelectorAllWithin } from "../utilities/elements.js";
5
5
  import { styles } from "./UFloatingElement.styles.js";
6
6
  import { property, state } from "lit/decorators.js";
@@ -1,7 +1,7 @@
1
1
  import { UElement } from "./UElement.js";
2
2
  import { styles } from "./UFormControlElement.styles.js";
3
- import { __decorateMetadata } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorateMetadata.js";
4
- import { __decorate } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
3
+ import __decorateMetadata from "../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
4
+ import __decorate from "../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
5
5
  import { property } from "lit/decorators.js";
6
6
  //#region src/components/UFormControlElement.ts
7
7
  /**
@@ -1,6 +1,6 @@
1
1
  import { UElement } from "./UElement.js";
2
- import { __decorateMetadata } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorateMetadata.js";
3
- import { __decorate } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
2
+ import __decorateMetadata from "../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
3
+ import __decorate from "../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
4
4
  import { OverlayManager } from "../utilities/OverlayManager.js";
5
5
  import { arrayAttrConverter } from "../utilities/converters.js";
6
6
  import { styles } from "./UOverlayElement.styles.js";
@@ -1,6 +1,6 @@
1
1
  import { UElement } from "../UElement.js";
2
- import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorateMetadata.js";
3
- import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
2
+ import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
3
+ import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
4
4
  import "../icon/UIcon.js";
5
5
  import "../button/UButton.js";
6
6
  import { styles } from "./UAlert.styles.js";
@@ -39,7 +39,12 @@ var styles = css`
39
39
  min-width: 200px;
40
40
  max-width: 100%;
41
41
  max-height: 50vh;
42
- padding: 12px 16px;
42
+ /*
43
+ * 내부 여백은 .container 에 둔다(:host 아님).
44
+ * 소비앱의 light-DOM 리셋(예: Tailwind preflight 의 *{padding:0})은
45
+ * 호스트 엘리먼트의 :host padding 을 덮어버리므로, Shadow DOM 내부
46
+ * 엘리먼트(.container)에 패딩을 두어 외부 리셋으로부터 보호한다.
47
+ */
43
48
  border-radius: 8px;
44
49
  box-shadow: 0 4px 12px var(--u-shadow-color-normal);
45
50
 
@@ -87,6 +92,7 @@ var styles = css`
87
92
  display: flex;
88
93
  flex-direction: column;
89
94
  overflow: hidden;
95
+ padding: 12px 16px;
90
96
  }
91
97
 
92
98
  .header {
@@ -1,6 +1,6 @@
1
1
  import { UElement } from "../UElement.js";
2
- import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorateMetadata.js";
3
- import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
2
+ import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
3
+ import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
4
4
  import { styles } from "./UAvatar.styles.js";
5
5
  import { customElement, property } from "lit/decorators.js";
6
6
  import { html } from "lit";
@@ -1,6 +1,6 @@
1
1
  import { UElement } from "../UElement.js";
2
- import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorateMetadata.js";
3
- import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
2
+ import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
3
+ import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
4
4
  import { styles } from "./UBadge.styles.js";
5
5
  import { customElement, property } from "lit/decorators.js";
6
6
  import { html, nothing } from "lit";
@@ -1,5 +1,5 @@
1
1
  import { UElement } from "../UElement.js";
2
- import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
2
+ import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
3
3
  import "../icon/UIcon.js";
4
4
  import { styles } from "./UBreadcrumb.styles.js";
5
5
  import { customElement } from "lit/decorators.js";
@@ -1,6 +1,6 @@
1
1
  import { UElement } from "../UElement.js";
2
- import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorateMetadata.js";
3
- import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
2
+ import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
3
+ import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
4
4
  import { styles } from "./UBreadcrumbItem.styles.js";
5
5
  import { customElement, property } from "lit/decorators.js";
6
6
  import { html } from "lit";
@@ -2,6 +2,8 @@ import { TemplateResult } from 'lit';
2
2
  import { UElement } from '../UElement.js';
3
3
  export type ButtonVariant = "solid" | "surface" | "filled" | "outlined" | "ghost" | "link";
4
4
  export type ButtonType = "button" | "submit" | "reset";
5
+ export type ButtonColor = "neutral" | "blue" | "green" | "red" | "orange" | "teal" | "cyan" | "purple" | "pink";
6
+ export type ButtonSize = "sm" | "md" | "lg";
5
7
  /**
6
8
  * 클릭 가능한 버튼 컴포넌트입니다. href가 설정되면 앵커 태그로 렌더링됩니다.
7
9
  *
@@ -20,6 +22,18 @@ export declare class UButton extends UElement {
20
22
  static formAssociated: boolean;
21
23
  /** 버튼 스타일 변형 */
22
24
  variant: ButtonVariant;
25
+ /**
26
+ * Semantic 색상. 기본값 `"neutral"`은 기존(v1.1.x 이전) 렌더링과 동일 — 하위 호환.
27
+ * `variant`가 사용하는 색상 스케일을 이 값으로 교체한다(예: `color="red"` + `variant="solid"` → 파괴적 액션 버튼).
28
+ * `variant="link"`는 `color="neutral"`(기본값)일 때 기존 동작(파랑)을 유지하고, 다른 색을 명시하면 그 색으로 재정의된다.
29
+ * `variant="ghost"`는 hover/active 배경이 중립 팔레트에 묶여 있지 않아 이 속성의 영향을 받지 않는다.
30
+ */
31
+ color: ButtonColor;
32
+ /**
33
+ * 버튼 크기. 기본값 `"md"`는 기존(v1.2.0 이전) 렌더링과 동일 — 하위 호환.
34
+ * `font-size`만 변경하며, padding/spinner/prefix·suffix 여백은 이미 `em` 단위라 함께 비례 축소·확대된다.
35
+ */
36
+ size: ButtonSize;
23
37
  /** 경계선 둥글게 여부 */
24
38
  rounded: boolean;
25
39
  /** 비활성화 여부 */
@@ -1,6 +1,6 @@
1
1
  import { UElement } from "../UElement.js";
2
- import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorateMetadata.js";
3
- import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
2
+ import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
3
+ import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
4
4
  import "../spinner/USpinner.js";
5
5
  import { styles } from "./UButton.styles.js";
6
6
  import { customElement, property } from "lit/decorators.js";
@@ -11,6 +11,8 @@ var UButton = class UButton extends UElement {
11
11
  constructor(..._args) {
12
12
  super(..._args);
13
13
  this.variant = "solid";
14
+ this.color = "neutral";
15
+ this.size = "md";
14
16
  this.rounded = false;
15
17
  this.disabled = false;
16
18
  this.loading = false;
@@ -97,6 +99,14 @@ __decorate([property({
97
99
  type: String,
98
100
  reflect: true
99
101
  }), __decorateMetadata("design:type", Object)], UButton.prototype, "variant", void 0);
102
+ __decorate([property({
103
+ type: String,
104
+ reflect: true
105
+ }), __decorateMetadata("design:type", Object)], UButton.prototype, "color", void 0);
106
+ __decorate([property({
107
+ type: String,
108
+ reflect: true
109
+ }), __decorateMetadata("design:type", Object)], UButton.prototype, "size", void 0);
100
110
  __decorate([property({
101
111
  type: Boolean,
102
112
  reflect: true
@@ -17,6 +17,40 @@ var styles = css`
17
17
  overflow: hidden;
18
18
  user-select: none;
19
19
  cursor: pointer;
20
+
21
+ /* Semantic color tokens consumed by variant rules below. Default (color="neutral")
22
+ maps 1:1 onto the neutral scale — zero visual change for existing consumers. */
23
+ --btn-c-50: var(--u-neutral-50);
24
+ --btn-c-100: var(--u-neutral-100);
25
+ --btn-c-200: var(--u-neutral-200);
26
+ --btn-c-300: var(--u-neutral-300);
27
+ --btn-c-400: var(--u-neutral-400);
28
+ --btn-c-500: var(--u-neutral-500);
29
+ --btn-c-600: var(--u-neutral-600);
30
+ --btn-c-700: var(--u-neutral-700);
31
+ --btn-c-800: var(--u-neutral-800);
32
+ }
33
+
34
+ /* === Color tokens ===
35
+ Non-neutral colors have no "50" tier in the design system (see assets/styles/light.css) —
36
+ tier "0" (the palest stop) is used in that slot instead of inventing a non-existent token. */
37
+ :host([color="blue"]) { --btn-c-50: var(--u-blue-0); --btn-c-100: var(--u-blue-100); --btn-c-200: var(--u-blue-200); --btn-c-300: var(--u-blue-300); --btn-c-400: var(--u-blue-400); --btn-c-500: var(--u-blue-500); --btn-c-600: var(--u-blue-600); --btn-c-700: var(--u-blue-700); --btn-c-800: var(--u-blue-800); }
38
+ :host([color="green"]) { --btn-c-50: var(--u-green-0); --btn-c-100: var(--u-green-100); --btn-c-200: var(--u-green-200); --btn-c-300: var(--u-green-300); --btn-c-400: var(--u-green-400); --btn-c-500: var(--u-green-500); --btn-c-600: var(--u-green-600); --btn-c-700: var(--u-green-700); --btn-c-800: var(--u-green-800); }
39
+ :host([color="red"]) { --btn-c-50: var(--u-red-0); --btn-c-100: var(--u-red-100); --btn-c-200: var(--u-red-200); --btn-c-300: var(--u-red-300); --btn-c-400: var(--u-red-400); --btn-c-500: var(--u-red-500); --btn-c-600: var(--u-red-600); --btn-c-700: var(--u-red-700); --btn-c-800: var(--u-red-800); }
40
+ :host([color="orange"]) { --btn-c-50: var(--u-orange-0); --btn-c-100: var(--u-orange-100); --btn-c-200: var(--u-orange-200); --btn-c-300: var(--u-orange-300); --btn-c-400: var(--u-orange-400); --btn-c-500: var(--u-orange-500); --btn-c-600: var(--u-orange-600); --btn-c-700: var(--u-orange-700); --btn-c-800: var(--u-orange-800); }
41
+ :host([color="teal"]) { --btn-c-50: var(--u-teal-0); --btn-c-100: var(--u-teal-100); --btn-c-200: var(--u-teal-200); --btn-c-300: var(--u-teal-300); --btn-c-400: var(--u-teal-400); --btn-c-500: var(--u-teal-500); --btn-c-600: var(--u-teal-600); --btn-c-700: var(--u-teal-700); --btn-c-800: var(--u-teal-800); }
42
+ :host([color="cyan"]) { --btn-c-50: var(--u-cyan-0); --btn-c-100: var(--u-cyan-100); --btn-c-200: var(--u-cyan-200); --btn-c-300: var(--u-cyan-300); --btn-c-400: var(--u-cyan-400); --btn-c-500: var(--u-cyan-500); --btn-c-600: var(--u-cyan-600); --btn-c-700: var(--u-cyan-700); --btn-c-800: var(--u-cyan-800); }
43
+ :host([color="purple"]) { --btn-c-50: var(--u-purple-0); --btn-c-100: var(--u-purple-100); --btn-c-200: var(--u-purple-200); --btn-c-300: var(--u-purple-300); --btn-c-400: var(--u-purple-400); --btn-c-500: var(--u-purple-500); --btn-c-600: var(--u-purple-600); --btn-c-700: var(--u-purple-700); --btn-c-800: var(--u-purple-800); }
44
+ :host([color="pink"]) { --btn-c-50: var(--u-pink-0); --btn-c-100: var(--u-pink-100); --btn-c-200: var(--u-pink-200); --btn-c-300: var(--u-pink-300); --btn-c-400: var(--u-pink-400); --btn-c-500: var(--u-pink-500); --btn-c-600: var(--u-pink-600); --btn-c-700: var(--u-pink-700); --btn-c-800: var(--u-pink-800); }
45
+
46
+ /* === Size ===
47
+ padding (0.5em), the spinner (1em/0.5em), and prefix/suffix margins (0.5em) are all
48
+ em-relative already, so changing font-size alone scales the whole button proportionally. */
49
+ :host([size="sm"]) {
50
+ font-size: 12px;
51
+ }
52
+ :host([size="lg"]) {
53
+ font-size: 16px;
20
54
  }
21
55
 
22
56
  /* === States === */
@@ -46,62 +80,62 @@ var styles = css`
46
80
 
47
81
  /* === Variant styles === */
48
82
 
49
- /* solid: 강한 채움 (neutral) */
83
+ /* solid: 강한 채움 (기본 color="neutral") */
50
84
  :host([variant="solid"]) {
51
85
  color: #fff;
52
- background-color: var(--u-neutral-600, #525252);
53
- border-color: var(--u-neutral-600, #525252);
86
+ background-color: var(--btn-c-600);
87
+ border-color: var(--btn-c-600);
54
88
  }
55
89
  :host([variant="solid"]:hover) {
56
- background-color: var(--u-neutral-700, #404040);
57
- border-color: var(--u-neutral-700, #404040);
90
+ background-color: var(--btn-c-700);
91
+ border-color: var(--btn-c-700);
58
92
  }
59
93
  :host([variant="solid"]:active) {
60
- background-color: var(--u-neutral-800, #262626);
61
- border-color: var(--u-neutral-800, #262626);
94
+ background-color: var(--btn-c-800);
95
+ border-color: var(--btn-c-800);
62
96
  }
63
97
 
64
98
  /* surface: 채우기 + 경계 */
65
99
  :host([variant="surface"]) {
66
100
  color: var(--u-txt-color);
67
- background-color: var(--u-neutral-100, #f5f5f5);
68
- border-color: var(--u-neutral-300, #d4d4d4);
101
+ background-color: var(--btn-c-100);
102
+ border-color: var(--btn-c-300);
69
103
  }
70
104
  :host([variant="surface"]:hover) {
71
- background-color: var(--u-neutral-200, #e5e5e5);
72
- border-color: var(--u-neutral-400, #a3a3a3);
105
+ background-color: var(--btn-c-200);
106
+ border-color: var(--btn-c-400);
73
107
  }
74
108
  :host([variant="surface"]:active) {
75
- background-color: var(--u-neutral-300, #d4d4d4);
76
- border-color: var(--u-neutral-500, #737373);
109
+ background-color: var(--btn-c-300);
110
+ border-color: var(--btn-c-500);
77
111
  }
78
112
 
79
113
  /* filled: 채우기만 */
80
114
  :host([variant="filled"]) {
81
115
  color: var(--u-txt-color);
82
- background-color: var(--u-neutral-100, #f5f5f5);
116
+ background-color: var(--btn-c-100);
83
117
  border-color: transparent;
84
118
  }
85
119
  :host([variant="filled"]:hover) {
86
- background-color: var(--u-neutral-200, #e5e5e5);
120
+ background-color: var(--btn-c-200);
87
121
  }
88
122
  :host([variant="filled"]:active) {
89
- background-color: var(--u-neutral-300, #d4d4d4);
123
+ background-color: var(--btn-c-300);
90
124
  }
91
125
 
92
126
  /* outlined: 경계만 */
93
127
  :host([variant="outlined"]) {
94
128
  color: var(--u-txt-color);
95
- border-color: var(--u-neutral-300, #d4d4d4);
129
+ border-color: var(--btn-c-300);
96
130
  background-color: transparent;
97
131
  }
98
132
  :host([variant="outlined"]:hover) {
99
- border-color: var(--u-neutral-400, #a3a3a3);
100
- background-color: var(--u-neutral-50, #fafafa);
133
+ border-color: var(--btn-c-400);
134
+ background-color: var(--btn-c-50);
101
135
  }
102
136
  :host([variant="outlined"]:active) {
103
- border-color: var(--u-neutral-500, #737373);
104
- background-color: var(--u-neutral-100, #f5f5f5);
137
+ border-color: var(--btn-c-500);
138
+ background-color: var(--btn-c-100);
105
139
  }
106
140
 
107
141
  /* ghost: transparent */
@@ -117,7 +151,7 @@ var styles = css`
117
151
  background-color: var(--u-bg-color-active);
118
152
  }
119
153
 
120
- /* link: blue 링크 스타일 */
154
+ /* link: blue 링크 스타일 (기본값, color="neutral"일 때도 유지 — 기존 동작 보존) */
121
155
  :host([variant="link"]) {
122
156
  color: var(--u-blue-500, #3b82f6);
123
157
  border-color: transparent;
@@ -132,6 +166,16 @@ var styles = css`
132
166
  :host([variant="link"]:active) {
133
167
  color: var(--u-blue-700, #1d4ed8);
134
168
  }
169
+ /* link + 명시적 non-neutral color: 링크 자체 색상을 재정의 (예: 파괴적 액션 링크) */
170
+ :host([variant="link"][color]:not([color="neutral"])) {
171
+ color: var(--btn-c-500);
172
+ }
173
+ :host([variant="link"][color]:not([color="neutral"]):hover) {
174
+ color: var(--btn-c-600);
175
+ }
176
+ :host([variant="link"][color]:not([color="neutral"]):active) {
177
+ color: var(--btn-c-700);
178
+ }
135
179
 
136
180
  /* === Inner === */
137
181
  button, a {
@@ -1,6 +1,6 @@
1
1
  import { UElement } from "../UElement.js";
2
- import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorateMetadata.js";
3
- import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
2
+ import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
3
+ import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
4
4
  import { UButton } from "../button/UButton.js";
5
5
  import { UIconButton } from "../icon-button/UIconButton.js";
6
6
  import { styles } from "./UButtonGroup.styles.js";
@@ -1,6 +1,6 @@
1
1
  import { UElement } from "../UElement.js";
2
- import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorateMetadata.js";
3
- import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
2
+ import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
3
+ import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
4
4
  import { styles } from "./UCard.styles.js";
5
5
  import { customElement, property } from "lit/decorators.js";
6
6
  import { html } from "lit";
@@ -1,6 +1,6 @@
1
1
  import { UElement } from "../UElement.js";
2
- import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorateMetadata.js";
3
- import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
2
+ import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
3
+ import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
4
4
  import "../icon/UIcon.js";
5
5
  import "../button/UButton.js";
6
6
  import { styles } from "./UCarousel.styles.js";
@@ -1,5 +1,5 @@
1
- import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorateMetadata.js";
2
- import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
1
+ import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
2
+ import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
3
3
  import { UFormControlElement } from "../UFormControlElement.js";
4
4
  import "../icon/UIcon.js";
5
5
  import { styles } from "./UCheckbox.styles.js";
@@ -1,6 +1,6 @@
1
1
  import { UElement } from "../UElement.js";
2
- import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorateMetadata.js";
3
- import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
2
+ import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
3
+ import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
4
4
  import "../icon/UIcon.js";
5
5
  import "../button/UButton.js";
6
6
  import "../tooltip/UTooltip.js";
@@ -1,5 +1,5 @@
1
- import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorateMetadata.js";
2
- import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
1
+ import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
2
+ import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
3
3
  import "../icon/UIcon.js";
4
4
  import { UOverlayElement } from "../UOverlayElement.js";
5
5
  import "../button/UButton.js";
@@ -1,6 +1,6 @@
1
1
  import { UElement } from "../UElement.js";
2
- import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorateMetadata.js";
3
- import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
2
+ import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
3
+ import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
4
4
  import { styles } from "./UDivider.styles.js";
5
5
  import { customElement, property } from "lit/decorators.js";
6
6
  import { html } from "lit";
@@ -12,6 +12,10 @@ export type DrawerPlacement = 'left' | 'right' | 'top' | 'bottom';
12
12
  * @csspart header - 헤더 영역
13
13
  * @csspart body - 본문 영역
14
14
  * @csspart close-btn - 닫기 버튼
15
+ *
16
+ * @cssproperty [--drawer-size=28rem] - 드로어 패널의 슬라이드 축 방향 크기.
17
+ * 좌우(left/right) placement는 너비, 상하(top/bottom) placement는 높이로 적용된다(상하 기본 16rem).
18
+ * 화면이 좁으면 max-width/max-height:100%로 자동 축소된다.
15
19
  */
16
20
  export declare class UDrawer extends UOverlayElement {
17
21
  static styles: CSSResultGroup;
@@ -1,5 +1,5 @@
1
- import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorateMetadata.js";
2
- import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
1
+ import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
2
+ import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
3
3
  import "../icon/UIcon.js";
4
4
  import { UOverlayElement } from "../UOverlayElement.js";
5
5
  import "../button/UButton.js";
@@ -7,19 +7,35 @@ var styles = css`
7
7
  :host([placement="top"]) { flex-direction: column; justify-content: flex-start; }
8
8
  :host([placement="bottom"]) { flex-direction: column; justify-content: flex-end; }
9
9
 
10
- /* 좌우: 높이 100% */
10
+ /*
11
+ * 패널 크기 — 슬라이드 축 방향 크기를 --drawer-size 로 제어한다.
12
+ * 좌우(left/right): 너비 = --drawer-size (기본 28rem), 높이 100%
13
+ * 상하(top/bottom): 높이 = --drawer-size (기본 16rem), 너비 100%
14
+ * 호스트 앱이 style="--drawer-size: 600px" 로 오버라이드한다.
15
+ */
16
+ /* 좌우: 높이 100%, 너비 = --drawer-size */
11
17
  :host([placement="left"]) .panel,
12
18
  :host([placement="right"]) .panel {
13
19
  height: 100%;
20
+ width: var(--drawer-size, 28rem);
14
21
  max-width: 100%;
15
22
  }
16
- /* 상하: 너비 100% */
23
+ /* 상하: 너비 100%, 높이 = --drawer-size */
17
24
  :host([placement="top"]) .panel,
18
25
  :host([placement="bottom"]) .panel {
19
26
  width: 100%;
27
+ height: var(--drawer-size, 16rem);
20
28
  max-height: 100%;
21
29
  }
22
30
 
31
+ /* 모바일: 좌우 드로어는 전체 너비로 펼쳐 입력 공간을 확보한다. */
32
+ @media (max-width: 640px) {
33
+ :host([placement="left"]) .panel,
34
+ :host([placement="right"]) .panel {
35
+ width: 100%;
36
+ }
37
+ }
38
+
23
39
  /* placement별 border */
24
40
  :host([placement="left"]) .panel { border-right: 1px solid var(--u-border-color); }
25
41
  :host([placement="right"]) .panel { border-left: 1px solid var(--u-border-color); }
@@ -1,6 +1,6 @@
1
1
  import { UElement } from "../UElement.js";
2
- import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorateMetadata.js";
3
- import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
2
+ import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
3
+ import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
4
4
  import { styles } from "./UField.styles.js";
5
5
  import { customElement, property } from "lit/decorators.js";
6
6
  import { html, nothing } from "lit";
@@ -1,6 +1,6 @@
1
1
  import { UElement } from "../UElement.js";
2
- import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorateMetadata.js";
3
- import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
2
+ import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
3
+ import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
4
4
  import { UFormControlElement } from "../UFormControlElement.js";
5
5
  import { arrayAttrConverter } from "../../utilities/converters.js";
6
6
  import { styles } from "./UForm.styles.js";
@@ -1,6 +1,6 @@
1
1
  import { UElement } from "../UElement.js";
2
- import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorateMetadata.js";
3
- import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
2
+ import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
3
+ import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
4
4
  import { IconRegistry, getDefaultBaseUrl } from "../../utilities/icons.js";
5
5
  import { styles } from "./UIcon.styles.js";
6
6
  import { customElement, property } from "lit/decorators.js";
@@ -1,6 +1,6 @@
1
1
  import { UElement } from "../UElement.js";
2
- import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorateMetadata.js";
3
- import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
2
+ import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
3
+ import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
4
4
  import "../icon/UIcon.js";
5
5
  import "../button/UButton.js";
6
6
  import "../tooltip/UTooltip.js";
@@ -1,5 +1,5 @@
1
- import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorateMetadata.js";
2
- import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
1
+ import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
2
+ import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
3
3
  import { UFormControlElement } from "../UFormControlElement.js";
4
4
  import "../icon/UIcon.js";
5
5
  import "../spinner/USpinner.js";
@@ -1,6 +1,6 @@
1
1
  import { UElement } from "../UElement.js";
2
- import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorateMetadata.js";
3
- import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
2
+ import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
3
+ import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
4
4
  import { UMenuItem } from "../menu-item/UMenuItem.js";
5
5
  import { styles } from "./UMenu.styles.js";
6
6
  import { customElement, property } from "lit/decorators.js";
@@ -1,6 +1,6 @@
1
1
  import { UElement } from "../UElement.js";
2
- import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorateMetadata.js";
3
- import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
2
+ import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
3
+ import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
4
4
  import "../icon/UIcon.js";
5
5
  import { UDivider } from "../divider/UDivider.js";
6
6
  import "../popover/UPopover.js";
@@ -1,6 +1,6 @@
1
1
  import { UElement } from "../UElement.js";
2
- import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorateMetadata.js";
3
- import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
2
+ import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
3
+ import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
4
4
  import "../icon/UIcon.js";
5
5
  import { styles } from "./UOption.styles.js";
6
6
  import { customElement, property } from "lit/decorators.js";
@@ -1,6 +1,6 @@
1
1
  import { UElement } from "../UElement.js";
2
- import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorateMetadata.js";
3
- import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
2
+ import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
3
+ import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
4
4
  import { styles } from "./UPanel.styles.js";
5
5
  import { customElement, property } from "lit/decorators.js";
6
6
  import { html } from "lit";
@@ -1,5 +1,5 @@
1
- import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorateMetadata.js";
2
- import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
1
+ import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
2
+ import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
3
3
  import { UFloatingElement } from "../UFloatingElement.js";
4
4
  import { arrayAttrConverter } from "../../utilities/converters.js";
5
5
  import { styles } from "./UPopover.styles.js";
@@ -1,6 +1,6 @@
1
1
  import { UElement } from "../UElement.js";
2
- import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorateMetadata.js";
3
- import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
2
+ import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
3
+ import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
4
4
  import { styles } from "./UProgressBar.styles.js";
5
5
  import { customElement, property, state } from "lit/decorators.js";
6
6
  import { html } from "lit";
@@ -1,6 +1,6 @@
1
1
  import { UElement } from "../UElement.js";
2
- import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorateMetadata.js";
3
- import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
2
+ import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
3
+ import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
4
4
  import { styles } from "./UProgressRing.styles.js";
5
5
  import { customElement, property, state } from "lit/decorators.js";
6
6
  import { html } from "lit";
@@ -1,5 +1,5 @@
1
- import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorateMetadata.js";
2
- import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
1
+ import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
2
+ import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
3
3
  import { UFormControlElement } from "../UFormControlElement.js";
4
4
  import "../field/UField.js";
5
5
  import { UOption } from "../option/UOption.js";
@@ -1,6 +1,6 @@
1
1
  import { formatTemplate, getLocaleStrings, resolveLocale } from "../../core/locale.js";
2
- import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorateMetadata.js";
3
- import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
2
+ import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
3
+ import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
4
4
  import { UFormControlElement } from "../UFormControlElement.js";
5
5
  import "../icon/UIcon.js";
6
6
  import "../field/UField.js";
@@ -1,6 +1,6 @@
1
1
  import { formatTemplate, getLocaleStrings, resolveLocale } from "../../core/locale.js";
2
- import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorateMetadata.js";
3
- import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
2
+ import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
3
+ import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
4
4
  import { UFormControlElement } from "../UFormControlElement.js";
5
5
  import "../icon/UIcon.js";
6
6
  import "../spinner/USpinner.js";
@@ -1,6 +1,6 @@
1
1
  import { UElement } from "../UElement.js";
2
- import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorateMetadata.js";
3
- import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
2
+ import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
3
+ import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
4
4
  import { styles } from "./USkeleton.styles.js";
5
5
  import { customElement, property } from "lit/decorators.js";
6
6
  import { html } from "lit";
@@ -1,6 +1,6 @@
1
1
  import { formatTemplate, getLocaleStrings, resolveLocale } from "../../core/locale.js";
2
- import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorateMetadata.js";
3
- import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
2
+ import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
3
+ import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
4
4
  import { UFormControlElement } from "../UFormControlElement.js";
5
5
  import "../tooltip/UTooltip.js";
6
6
  import "../field/UField.js";
@@ -1,6 +1,6 @@
1
1
  import { UElement } from "../UElement.js";
2
- import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorateMetadata.js";
3
- import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
2
+ import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
3
+ import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
4
4
  import { styles } from "./USpinner.styles.js";
5
5
  import { customElement, property, state } from "lit/decorators.js";
6
6
  import { html } from "lit";
@@ -1,6 +1,6 @@
1
1
  import { UElement } from "../UElement.js";
2
- import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorateMetadata.js";
3
- import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
2
+ import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
3
+ import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
4
4
  import { arrayAttrConverter } from "../../utilities/converters.js";
5
5
  import { styles } from "./USplitPanel.styles.js";
6
6
  import { customElement, property, query } from "lit/decorators.js";
@@ -1,5 +1,5 @@
1
- import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorateMetadata.js";
2
- import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
1
+ import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
2
+ import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
3
3
  import { UFormControlElement } from "../UFormControlElement.js";
4
4
  import { styles } from "./USwitch.styles.js";
5
5
  import { customElement, property } from "lit/decorators.js";
@@ -1,6 +1,6 @@
1
1
  import { UElement } from "../UElement.js";
2
- import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorateMetadata.js";
3
- import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
2
+ import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
3
+ import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
4
4
  import "../icon/UIcon.js";
5
5
  import "../button/UButton.js";
6
6
  import { styles } from "./UTab.styles.js";
@@ -1,6 +1,6 @@
1
1
  import { UElement } from "../UElement.js";
2
- import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorateMetadata.js";
3
- import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
2
+ import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
3
+ import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
4
4
  import { UPanel } from "../panel/UPanel.js";
5
5
  import { UTab } from "../tab/UTab.js";
6
6
  import { styles } from "./UTabPanel.styles.js";
@@ -1,6 +1,6 @@
1
1
  import { UElement } from "../UElement.js";
2
- import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorateMetadata.js";
3
- import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
2
+ import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
3
+ import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
4
4
  import { styles } from "./UTag.styles.js";
5
5
  import { customElement, property } from "lit/decorators.js";
6
6
  import { html } from "lit";
@@ -1,5 +1,5 @@
1
- import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorateMetadata.js";
2
- import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
1
+ import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
2
+ import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
3
3
  import { UFormControlElement } from "../UFormControlElement.js";
4
4
  import "../field/UField.js";
5
5
  import { styles } from "./UTextarea.styles.js";
@@ -1,5 +1,5 @@
1
- import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorateMetadata.js";
2
- import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
1
+ import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
2
+ import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
3
3
  import { UFloatingElement } from "../UFloatingElement.js";
4
4
  import { styles } from "./UTooltip.styles.js";
5
5
  import { customElement, property } from "lit/decorators.js";
@@ -1,6 +1,6 @@
1
1
  import { UElement } from "../UElement.js";
2
- import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorateMetadata.js";
3
- import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
2
+ import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
3
+ import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
4
4
  import { UTreeItem } from "../tree-item/UTreeItem.js";
5
5
  import { styles } from "./UTree.styles.js";
6
6
  import { customElement, property, state } from "lit/decorators.js";
@@ -1,6 +1,6 @@
1
1
  import { UElement } from "../UElement.js";
2
- import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorateMetadata.js";
3
- import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
2
+ import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
3
+ import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
4
4
  import "../icon/UIcon.js";
5
5
  import "../spinner/USpinner.js";
6
6
  import { styles } from "./UTreeItem.styles.js";
@@ -58,7 +58,7 @@ function querySelectorAllWithin(element, selectors) {
58
58
  * // → '<u-ref-tag href="https://example.com" disabled>Click</u-ref-tag>'
59
59
  */
60
60
  function buildElementHTML(tag, attrs = {}, content = "") {
61
- const URL_ATTR = new Set(["href", "src"]);
61
+ const URL_ATTR = /* @__PURE__ */ new Set(["href", "src"]);
62
62
  const attrStr = Object.entries(attrs).flatMap(([k, v]) => {
63
63
  if (v === void 0 || v == null || v === false) return [];
64
64
  if (v === true) return [k];
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@iyulab/components",
3
3
  "description": "web-components library based on lit-element made by iyulab",
4
- "version": "1.1.0",
4
+ "version": "1.2.0",
5
5
  "keywords": [
6
6
  "iyulab",
7
7
  "components",
@@ -14,6 +14,14 @@ Versatile button with multiple visual variants. Renders as an `<a>` element when
14
14
  <u-button variant="ghost" loading>Loading</u-button>
15
15
  <u-button href="https://example.com" target="_blank">Link</u-button>
16
16
 
17
+ <!-- Semantic color (independent of variant) -->
18
+ <u-button variant="solid" color="red">Delete</u-button>
19
+ <u-button variant="surface" color="green">Approve</u-button>
20
+
21
+ <!-- Size -->
22
+ <u-button size="sm">Small</u-button>
23
+ <u-button size="lg">Large</u-button>
24
+
17
25
  <!-- With prefix/suffix icons -->
18
26
  <u-button variant="solid">
19
27
  <u-icon slot="prefix" lib="tabler" name="download"></u-icon>
@@ -37,6 +45,8 @@ Versatile button with multiple visual variants. Renders as an `<a>` element when
37
45
  | Property | Type | Default | Reflect | Description |
38
46
  |----------|------|---------|---------|-------------|
39
47
  | `variant` | `'solid'\|'surface'\|'filled'\|'outlined'\|'ghost'\|'link'` | `'solid'` | ✓ | Visual style |
48
+ | `color` | `'neutral'\|'blue'\|'green'\|'red'\|'orange'\|'teal'\|'cyan'\|'purple'\|'pink'` | `'neutral'` | ✓ | Semantic color, independent of `variant`. `ghost` is unaffected (see notes below). |
49
+ | `size` | `'sm'\|'md'\|'lg'` | `'md'` | ✓ | Button size (12px/14px/16px font-size; padding, spinner, and icon slots scale proportionally). |
40
50
  | `rounded` | `boolean` | `false` | ✓ | Pill-shaped border radius |
41
51
  | `disabled` | `boolean` | `false` | ✓ | Disable the button |
42
52
  | `loading` | `boolean` | `false` | ✓ | Show loading spinner; disables interaction |
@@ -46,6 +56,12 @@ Versatile button with multiple visual variants. Renders as an `<a>` element when
46
56
  | `rel` | `string` | — | — | Link `rel` |
47
57
  | `download` | `string` | — | — | Download filename |
48
58
 
59
+ ### `color` notes
60
+
61
+ - `solid`/`surface`/`filled`/`outlined`: background/border switch to the chosen color's scale.
62
+ - `link`: text color switches, but only when `color` is set to something other than `"neutral"` — the default `link` look stays blue (backward compatible).
63
+ - `ghost`: no visual effect — its hover/active backgrounds use generic surface tokens (`--u-bg-color-hover`/`--u-bg-color-active`), not the neutral color scale.
64
+
49
65
  ## CSS Parts
50
66
 
51
67
  | Part | Description |