@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.
- package/CHANGELOG.md +45 -0
- package/dist/_virtual/{_@oxc-project_runtime@0.133.0 → _@oxc-project_runtime@0.138.0}/helpers/esm/decorate.js +2 -2
- package/dist/_virtual/{_@oxc-project_runtime@0.133.0 → _@oxc-project_runtime@0.138.0}/helpers/esm/decorateMetadata.js +2 -2
- package/dist/components/UFloatingElement.js +2 -2
- package/dist/components/UFormControlElement.js +2 -2
- package/dist/components/UOverlayElement.js +2 -2
- package/dist/components/alert/UAlert.js +2 -2
- package/dist/components/alert/UAlert.styles.js +7 -1
- package/dist/components/avatar/UAvatar.js +2 -2
- package/dist/components/badge/UBadge.js +2 -2
- package/dist/components/breadcrumb/UBreadcrumb.js +1 -1
- package/dist/components/breadcrumb-item/UBreadcrumbItem.js +2 -2
- package/dist/components/button/UButton.d.ts +14 -0
- package/dist/components/button/UButton.js +12 -2
- package/dist/components/button/UButton.styles.js +66 -22
- package/dist/components/button-group/UButtonGroup.js +2 -2
- package/dist/components/card/UCard.js +2 -2
- package/dist/components/carousel/UCarousel.js +2 -2
- package/dist/components/checkbox/UCheckbox.js +2 -2
- package/dist/components/chip/UChip.js +2 -2
- package/dist/components/dialog/UDialog.js +2 -2
- package/dist/components/divider/UDivider.js +2 -2
- package/dist/components/drawer/UDrawer.d.ts +4 -0
- package/dist/components/drawer/UDrawer.js +2 -2
- package/dist/components/drawer/UDrawer.styles.js +18 -2
- package/dist/components/field/UField.js +2 -2
- package/dist/components/form/UForm.js +2 -2
- package/dist/components/icon/UIcon.js +2 -2
- package/dist/components/icon-button/UIconButton.js +2 -2
- package/dist/components/input/UInput.js +2 -2
- package/dist/components/menu/UMenu.js +2 -2
- package/dist/components/menu-item/UMenuItem.js +2 -2
- package/dist/components/option/UOption.js +2 -2
- package/dist/components/panel/UPanel.js +2 -2
- package/dist/components/popover/UPopover.js +2 -2
- package/dist/components/progress-bar/UProgressBar.js +2 -2
- package/dist/components/progress-ring/UProgressRing.js +2 -2
- package/dist/components/radio/URadio.js +2 -2
- package/dist/components/rating/URating.js +2 -2
- package/dist/components/select/USelect.js +2 -2
- package/dist/components/skeleton/USkeleton.js +2 -2
- package/dist/components/slider/USlider.js +2 -2
- package/dist/components/spinner/USpinner.js +2 -2
- package/dist/components/split-panel/USplitPanel.js +2 -2
- package/dist/components/switch/USwitch.js +2 -2
- package/dist/components/tab/UTab.js +2 -2
- package/dist/components/tab-panel/UTabPanel.js +2 -2
- package/dist/components/tag/UTag.js +2 -2
- package/dist/components/textarea/UTextarea.js +2 -2
- package/dist/components/tooltip/UTooltip.js +2 -2
- package/dist/components/tree/UTree.js +2 -2
- package/dist/components/tree-item/UTreeItem.js +2 -2
- package/dist/utilities/elements.js +1 -1
- package/package.json +1 -1
- 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.
|
|
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.
|
|
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
|
|
3
|
-
import
|
|
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
|
|
4
|
-
import
|
|
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
|
|
3
|
-
import
|
|
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
|
|
3
|
-
import
|
|
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
|
-
|
|
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
|
|
3
|
-
import
|
|
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
|
|
3
|
-
import
|
|
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
|
|
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
|
|
3
|
-
import
|
|
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
|
|
3
|
-
import
|
|
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(--
|
|
53
|
-
border-color: var(--
|
|
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(--
|
|
57
|
-
border-color: var(--
|
|
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(--
|
|
61
|
-
border-color: var(--
|
|
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(--
|
|
68
|
-
border-color: var(--
|
|
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(--
|
|
72
|
-
border-color: var(--
|
|
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(--
|
|
76
|
-
border-color: var(--
|
|
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(--
|
|
116
|
+
background-color: var(--btn-c-100);
|
|
83
117
|
border-color: transparent;
|
|
84
118
|
}
|
|
85
119
|
:host([variant="filled"]:hover) {
|
|
86
|
-
background-color: var(--
|
|
120
|
+
background-color: var(--btn-c-200);
|
|
87
121
|
}
|
|
88
122
|
:host([variant="filled"]:active) {
|
|
89
|
-
background-color: var(--
|
|
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(--
|
|
129
|
+
border-color: var(--btn-c-300);
|
|
96
130
|
background-color: transparent;
|
|
97
131
|
}
|
|
98
132
|
:host([variant="outlined"]:hover) {
|
|
99
|
-
border-color: var(--
|
|
100
|
-
background-color: var(--
|
|
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(--
|
|
104
|
-
background-color: var(--
|
|
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
|
|
3
|
-
import
|
|
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
|
|
3
|
-
import
|
|
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
|
|
3
|
-
import
|
|
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
|
|
2
|
-
import
|
|
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
|
|
3
|
-
import
|
|
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
|
|
2
|
-
import
|
|
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
|
|
3
|
-
import
|
|
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
|
|
2
|
-
import
|
|
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
|
-
/*
|
|
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
|
|
3
|
-
import
|
|
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
|
|
3
|
-
import
|
|
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
|
|
3
|
-
import
|
|
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
|
|
3
|
-
import
|
|
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
|
|
2
|
-
import
|
|
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
|
|
3
|
-
import
|
|
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
|
|
3
|
-
import
|
|
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
|
|
3
|
-
import
|
|
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
|
|
3
|
-
import
|
|
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
|
|
2
|
-
import
|
|
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
|
|
3
|
-
import
|
|
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
|
|
3
|
-
import
|
|
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
|
|
2
|
-
import
|
|
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
|
|
3
|
-
import
|
|
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
|
|
3
|
-
import
|
|
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
|
|
3
|
-
import
|
|
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
|
|
3
|
-
import
|
|
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
|
|
3
|
-
import
|
|
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
|
|
3
|
-
import
|
|
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
|
|
2
|
-
import
|
|
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
|
|
3
|
-
import
|
|
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
|
|
3
|
-
import
|
|
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
|
|
3
|
-
import
|
|
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
|
|
2
|
-
import
|
|
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
|
|
2
|
-
import
|
|
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
|
|
3
|
-
import
|
|
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
|
|
3
|
-
import
|
|
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
|
@@ -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 |
|