@iyulab/components 0.3.0 → 1.0.0

package/dist/components/breadcrumb/UBreadcrumb.js

@@ -0,0 +1,65 @@
+import { UElement } from "../UElement.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
+import "../icon/UIcon.js";
+import { styles } from "./UBreadcrumb.styles.js";
+import { customElement } from "lit/decorators.js";
+import { html } from "lit";
+//#region src/components/breadcrumb/UBreadcrumb.ts
+var UBreadcrumb = class UBreadcrumb extends UElement {
+	constructor(..._args) {
+		super(..._args);
+		this.handleSlotChange = (e) => {
+			const items = e.target.assignedElements({ flatten: true }).filter((el) => el instanceof HTMLElement);
+			this.appendSeparator(items);
+		};
+		this.handleSeparatorSlotChange = (e) => {
+			this.separator = e.target.assignedNodes({ flatten: true }).at(0);
+			const nodes = this.shadowRoot?.querySelectorAll("nav > *:not(.separator)") ?? [];
+			const items = Array.from(nodes).filter((el) => el instanceof HTMLElement);
+			this.appendSeparator(items);
+		};
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	render() {
+		return html`
+      <nav aria-label="breadcrumb" part="nav">
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </nav>
+      <div hidden aria-hidden="true">
+        <slot name="separator" @slotchange=${this.handleSeparatorSlotChange}></slot>
+      </div>
+    `;
+	}
+	appendSeparator(items) {
+		const nav = this.shadowRoot?.querySelector("nav");
+		if (!nav) return;
+		nav.querySelectorAll(".separator").forEach((el) => el.remove());
+		items.forEach((item) => item.removeAttribute("data-last"));
+		items.forEach((item, i) => {
+			item.style.order = String(i * 2);
+			if (i < items.length - 1) {
+				const sep = this.createSeparator(i);
+				nav.appendChild(sep);
+			} else item.setAttribute("data-last", "");
+		});
+	}
+	createSeparator(index) {
+		const sep = document.createElement("span");
+		sep.setAttribute("class", "separator");
+		sep.setAttribute("part", "separator");
+		sep.style.order = String(index * 2 + 1);
+		if (this.separator) sep.appendChild(this.separator.cloneNode(true));
+		else {
+			const icon = document.createElement("u-icon");
+			icon.setAttribute("lib", "internal");
+			icon.setAttribute("name", "chevron-right");
+			sep.appendChild(icon);
+		}
+		return sep;
+	}
+};
+UBreadcrumb = __decorate([customElement("u-breadcrumb")], UBreadcrumb);
+//#endregion
+export { UBreadcrumb };

package/dist/components/breadcrumb/UBreadcrumb.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import('lit').CSSResult;

package/dist/components/breadcrumb/UBreadcrumb.styles.js

@@ -0,0 +1,37 @@
+import { css } from "lit";
+//#region src/components/breadcrumb/UBreadcrumb.styles.ts
+var styles = css`
+  :host {
+    display: block;
+    font-size: inherit;
+    font-family: var(--u-font-base);
+    color: var(--u-txt-color);
+    user-select: none;
+  }
+
+  nav {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex-wrap: nowrap;
+    gap: 0.15em;
+    overflow: hidden;
+  }
+
+  ::slotted([data-last]) {
+    font-weight: 500;
+    pointer-events: none;
+    cursor: default;
+  }
+
+  .separator {
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    color: var(--u-txt-color-weak);
+    font-size: 0.75em;
+    user-select: none;
+  }
+`;
+//#endregion
+export { styles };

package/dist/components/breadcrumb-item/UBreadcrumbItem.d.ts

@@ -0,0 +1,30 @@
+import { UElement } from '../UElement.js';
+/**
+ * 브레드크럼의 개별 항목을 나타내는 컴포넌트입니다.
+ *
+ * @slot prefix - 텍스트 앞에 표시할 컨텐츠 (아이콘 등)
+ * @slot - 아이콘과 텍스트
+ * @slot suffix - 텍스트 뒤에 표시할 컨텐츠
+ *
+ * @csspart link - 링크 요소
+ *
+ * @event navigate - 링크 클릭 시 발생 (취소 가능)
+ */
+export declare class UBreadcrumbItem extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    /** 비활성화 상태 */
+    disabled: boolean;
+    /** 링크 URL */
+    href?: string;
+    /** 링크 target 속성 */
+    target?: string;
+    /** 링크 rel 속성 */
+    rel?: string;
+    render(): import('lit-html').TemplateResult<1>;
+    private handleAnchorClick;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-breadcrumb-item': UBreadcrumbItem;
+    }
+}

package/dist/components/breadcrumb-item/UBreadcrumbItem.js

@@ -0,0 +1,52 @@
+import { UElement } from "../UElement.js";
+import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorateMetadata.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
+import { styles } from "./UBreadcrumbItem.styles.js";
+import { customElement, property } from "lit/decorators.js";
+import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+//#region src/components/breadcrumb-item/UBreadcrumbItem.ts
+var UBreadcrumbItem = class UBreadcrumbItem extends UElement {
+	constructor(..._args) {
+		super(..._args);
+		this.disabled = false;
+		this.handleAnchorClick = (e) => {
+			if (this.disabled) {
+				e.preventDefault();
+				return;
+			}
+			if (!this.fire("navigate")) e.preventDefault();
+		};
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	render() {
+		if (this.href) return html`
+        <a part="link"
+          href=${this.href}
+          target=${ifDefined(this.target)}
+          rel=${ifDefined(this.rel)}
+          @click=${this.handleAnchorClick}
+        >
+          <slot name="prefix"></slot>
+          <slot></slot>
+          <slot name="suffix"></slot>
+        </a>`;
+		return html`
+      <slot name="prefix"></slot>
+      <slot></slot>
+      <slot name="suffix"></slot>
+    `;
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], UBreadcrumbItem.prototype, "disabled", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UBreadcrumbItem.prototype, "href", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UBreadcrumbItem.prototype, "target", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UBreadcrumbItem.prototype, "rel", void 0);
+UBreadcrumbItem = __decorate([customElement("u-breadcrumb-item")], UBreadcrumbItem);
+//#endregion
+export { UBreadcrumbItem };

package/dist/components/breadcrumb-item/UBreadcrumbItem.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import('lit').CSSResult;

package/dist/components/breadcrumb-item/UBreadcrumbItem.styles.js

@@ -0,0 +1,41 @@
+import { css } from "lit";
+//#region src/components/breadcrumb-item/UBreadcrumbItem.styles.ts
+var styles = css`
+  :host {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.2em;
+    flex-shrink: 0;
+    color: var(--u-txt-color-weak);
+    font-size: inherit;
+    line-height: 1.5em;
+    cursor: pointer;
+  }
+  :host:hover {
+    color: var(--u-blue-700);
+  }
+  :host([disabled]) {
+    opacity: 0.5;
+    pointer-events: none;
+    cursor: default;
+  }
+
+  a {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.2em;
+    color: inherit;
+    text-decoration: none;
+    transition: color 0.2s ease;
+    cursor: inherit;
+  }
+
+  ::slotted([slot="prefix"]) {
+    margin-right: 0.2em;
+  }
+  ::slotted([slot="suffix"]) {
+    margin-left: 0.2em;
+  }
+`;
+//#endregion
+export { styles };

package/dist/components/button/UButton.d.ts

@@ -1,7 +1,50 @@
-import { UButton } from './UButton.component.js';
+import { TemplateResult } from 'lit';
+import { UElement } from '../UElement.js';
+export type ButtonVariant = "solid" | "surface" | "filled" | "outlined" | "ghost" | "link";
+export type ButtonType = "button" | "submit" | "reset";
+/**
+ * 클릭 가능한 버튼 컴포넌트입니다. href가 설정되면 앵커 태그로 렌더링됩니다.
+ *
+ * @slot - 버튼 내부 콘텐츠
+ * @slot prefix - 버튼 앞에 표시할 콘텐츠
+ * @slot suffix - 버튼 뒤에 표시할 콘텐츠
+ * @slot spinner - 로딩 시 표시할 커스텀 스피너
+ *
+ * @csspart link - 내부 앵커 요소 (href 설정 시)
+ * @csspart button - 내부 버튼 요소
+ * @csspart content - 콘텐츠 영역
+ * @csspart mask - 로딩 마스크 영역
+ */
+export declare class UButton extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    /** 버튼 스타일 변형 */
+    variant: ButtonVariant;
+    /** 경계선 둥글게 여부 */
+    rounded: boolean;
+    /** 비활성화 여부 */
+    disabled: boolean;
+    /** 로딩 상태 여부 */
+    loading: boolean;
+    /** 버튼 타입 */
+    type: ButtonType;
+    /** 링크 URL (설정 시 앵커 태그로 렌더링) */
+    href?: string;
+    /** 링크 타겟 */
+    target?: string;
+    /** 링크 관계 */
+    rel?: string;
+    /** 다운로드 파일명 */
+    download?: string;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): TemplateResult<1>;
+    private renderContent;
+    private renderMask;
+    private handleClick;
+    private handleSpinnerSlotChange;
+}
 declare global {
     interface HTMLElementTagNameMap {
-        "u-button": UButton;
+        'u-button': UButton;
     }
 }
-export { UButton };

package/dist/components/button/UButton.js

@@ -1,5 +1,105 @@
-import { UButton } from './UButton.component.js';
-
-UButton.define("u-button");
-
+import { UElement } from "../UElement.js";
+import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorateMetadata.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
+import "../spinner/USpinner.js";
+import { styles } from "./UButton.styles.js";
+import { customElement, property } from "lit/decorators.js";
+import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+//#region src/components/button/UButton.ts
+var UButton = class UButton extends UElement {
+	constructor(..._args) {
+		super(..._args);
+		this.variant = "solid";
+		this.rounded = false;
+		this.disabled = false;
+		this.loading = false;
+		this.type = "button";
+		this.handleClick = (e) => {
+			if (this.disabled || this.loading) {
+				e.preventDefault();
+				e.stopImmediatePropagation();
+			}
+		};
+		this.handleSpinnerSlotChange = (e) => {
+			const hasSpinner = e.target.assignedNodes().length > 0;
+			this.toggleAttribute("has-spinner", hasSpinner);
+		};
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener("click", this.handleClick);
+	}
+	disconnectedCallback() {
+		this.removeEventListener("click", this.handleClick);
+		super.disconnectedCallback();
+	}
+	render() {
+		if (this.href) return html`
+        <a part="link"
+          ?disabled=${this.disabled || this.loading}
+          tabindex=${this.disabled || this.loading ? -1 : 0}
+          href=${ifDefined(this.disabled || this.loading ? void 0 : this.href)}
+          download=${ifDefined(this.download)}
+          target=${ifDefined(this.target)}
+          rel=${ifDefined(this.rel)}
+        >
+          ${this.renderContent()}
+        </a>
+        ${this.renderMask()}
+      `;
+		return html`
+      <button part="button"
+        type=${this.type}
+        ?disabled=${this.disabled || this.loading}
+      >
+        ${this.renderContent()}
+      </button>
+      ${this.renderMask()}
+    `;
+	}
+	renderContent() {
+		return html`
+      <slot name="prefix"></slot>
+      <div class="content" part="content">
+        <slot></slot>
+      </div>
+      <slot name="suffix"></slot>
+    `;
+	}
+	renderMask() {
+		return html`
+      <div class="mask" part="mask" ?hidden=${!this.loading}>
+        <u-spinner></u-spinner>
+        <slot name="spinner" @slotchange=${this.handleSpinnerSlotChange}></slot>
+      </div>
+    `;
+	}
+};
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UButton.prototype, "variant", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UButton.prototype, "rounded", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UButton.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UButton.prototype, "loading", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", Object)], UButton.prototype, "type", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UButton.prototype, "href", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UButton.prototype, "target", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UButton.prototype, "rel", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UButton.prototype, "download", void 0);
+UButton = __decorate([customElement("u-button")], UButton);
+//#endregion
 export { UButton };

package/dist/components/button/UButton.styles.js

@@ -1,17 +1,17 @@
-import { css } from 'lit';
-
-const styles = css`
+import { css } from "lit";
+//#region src/components/button/UButton.styles.ts
+var styles = css`
   :host {
     position: relative;
     display: inline-flex;
-    
+
     font-size: 14px;
     font-weight: 500;
     line-height: 1.5;
     padding: 0.5em;
-    border: 1px solid var(--u-border-color);
+    border: 1px solid transparent;
     border-radius: 6px;
-    background-color: var(--u-bg-color);
+    background-color: transparent;
 
     transition: all 0.2s ease;
     overflow: hidden;
@@ -19,82 +19,142 @@ const styles = css`
     cursor: pointer;
   }
 
-  /* Style variants */
-  :host([variant="default"]) {
+  /* === States === */
+  :host(:active) {
+    transform: translateY(1px);
+  }
+  :host([disabled]) {
+    opacity: 0.5;
+    pointer-events: none;
+    cursor: not-allowed;
+  }
+  :host([loading]) {
+    opacity: 0.8;
+    pointer-events: none;
+    cursor: wait;
+  }
+  :host([loading]) button,
+  :host([loading]) a {
+    visibility: hidden;
+  }
+  :host([rounded]) {
+    border-radius: 9999px;
+  }
+  :host([has-spinner]) u-spinner {
+    display: none;
+  }
+
+  /* === Variant styles === */
+
+  /* solid: 강한 채움 (neutral) */
+  :host([variant="solid"]) {
+    color: #fff;
+    background-color: var(--u-neutral-600, #525252);
+    border-color: var(--u-neutral-600, #525252);
+  }
+  :host([variant="solid"]:hover) {
+    background-color: var(--u-neutral-700, #404040);
+    border-color: var(--u-neutral-700, #404040);
+  }
+  :host([variant="solid"]:active) {
+    background-color: var(--u-neutral-800, #262626);
+    border-color: var(--u-neutral-800, #262626);
+  }
+
+  /* surface: 채우기 + 경계 */
+  :host([variant="surface"]) {
     color: var(--u-txt-color);
-    border-color: var(--u-border-color);
-    background-color: var(--u-bg-color);
+    background-color: var(--u-neutral-100, #f5f5f5);
+    border-color: var(--u-neutral-300, #d4d4d4);
   }
-  :host([variant="default"]:hover) {
-    background-color: var(--u-bg-color-hover);
+  :host([variant="surface"]:hover) {
+    background-color: var(--u-neutral-200, #e5e5e5);
+    border-color: var(--u-neutral-400, #a3a3a3);
   }
-  :host([variant="default"]:active) {
-    background-color: var(--u-bg-color-active);
+  :host([variant="surface"]:active) {
+    background-color: var(--u-neutral-300, #d4d4d4);
+    border-color: var(--u-neutral-500, #737373);
   }
 
-  :host([variant="borderless"]) {
+  /* filled: 채우기만 */
+  :host([variant="filled"]) {
     color: var(--u-txt-color);
+    background-color: var(--u-neutral-100, #f5f5f5);
     border-color: transparent;
-    background-color: transparent;
   }
-  :host([variant="borderless"]:hover) {
-    background-color: var(--u-bg-color-hover);
+  :host([variant="filled"]:hover) {
+    background-color: var(--u-neutral-200, #e5e5e5);
   }
-  :host([variant="borderless"]:active) {
-    background-color: var(--u-bg-color-active);
+  :host([variant="filled"]:active) {
+    background-color: var(--u-neutral-300, #d4d4d4);
   }
 
-  :host([variant="link"]) {
+  /* outlined: 경계만 */
+  :host([variant="outlined"]) {
     color: var(--u-txt-color);
-    border-color: transparent;
+    border-color: var(--u-neutral-300, #d4d4d4);
     background-color: transparent;
   }
-  :host([variant="link"]:hover) {
-    color: var(--u-blue-500, #3b82f6);
+  :host([variant="outlined"]:hover) {
+    border-color: var(--u-neutral-400, #a3a3a3);
+    background-color: var(--u-neutral-50, #fafafa);
   }
-  :host([variant="link"]:active) {
-    color: var(--u-blue-600, #2563eb);
+  :host([variant="outlined"]:active) {
+    border-color: var(--u-neutral-500, #737373);
+    background-color: var(--u-neutral-100, #f5f5f5);
   }
 
-  :host(:active) {
-    transform: translateY(1px);
+  /* ghost: transparent */
+  :host([variant="ghost"]) {
+    color: var(--u-txt-color);
+    border-color: transparent;
+    background-color: transparent;
+  }
+  :host([variant="ghost"]:hover) {
+    background-color: var(--u-bg-color-hover);
+  }
+  :host([variant="ghost"]:active) {
+    background-color: var(--u-bg-color-active);
   }
 
-  :host([disabled]) {
-    color: var(--u-txt-color-disabled);
-    cursor: not-allowed;
+  /* link: blue 링크 스타일 */
+  :host([variant="link"]) {
+    color: var(--u-blue-500, #3b82f6);
+    border-color: transparent;
+    background-color: transparent;
+    padding-left: 0;
+    padding-right: 0;
   }
-  :host([loading]) {
-    cursor: wait;
+  :host([variant="link"]:hover) {
+    color: var(--u-blue-600, #2563eb);
+    text-decoration: underline;
   }
-  :host([loading]) button {
-    visibility: hidden;
+  :host([variant="link"]:active) {
+    color: var(--u-blue-700, #1d4ed8);
   }
 
-  button {
+  /* === Inner === */
+  button, a {
     all: unset;
     width: 100%;
     display: inline-flex;
     flex-direction: row;
     align-items: center;
-    justify-content: center;
+    justify-content: space-between;
   }
-  button:focus-visible {
-    outline: 2px solid var(--u-blue-500, #3b82f6);
-    outline-offset: 2px;
+  a {
+    text-decoration: none;
+    color: inherit;
   }
-
-  slot {
-    flex: 1 0 auto;
-    min-width: 0;
-    display: inline-flex;
-    justify-content: center;
+  a[disabled] {
+    pointer-events: none;
   }
+
+  /* === Slots === */
   ::slotted(*) {
     color: inherit;
     font-size: inherit;
   }
-  /* 슬롯에 내용이 있을 때 gap 적용 */
   ::slotted([slot="prefix"]) {
     margin-right: 0.5em;
   }
@@ -102,6 +162,19 @@ const styles = css`
     margin-left: 0.5em;
   }
 
+  .content {
+    flex: 1 0 auto;
+    min-width: 0;
+    line-height: 1.5;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* === Mask (로딩 오버레이) === */
   .mask {
     position: absolute;
     z-index: 100;
@@ -121,5 +194,5 @@ const styles = css`
     pointer-events: none;
   }
 `;
-
+//#endregion
 export { styles };

package/dist/components/button-group/UButtonGroup.d.ts

@@ -0,0 +1,28 @@
+import { PropertyValues } from 'lit';
+import { UElement } from '../UElement.js';
+import { ButtonVariant } from '../button/UButton.js';
+/**
+ * 여러 버튼을 묶어 그룹으로 표시하는 컴포넌트입니다.
+ * variant 또는 disabled 속성을 설정하면 하위 u-button, u-icon-button에 자동 적용됩니다.
+ *
+ * @slot - u-button 또는 u-icon-button 요소들
+ */
+export declare class UButtonGroup extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    /** 하위 버튼에 자동 적용할 스타일 변형 */
+    variant: ButtonVariant;
+    /** 세로 방향 배치 여부 */
+    vertical: boolean;
+    /** 하위 버튼 자동 비활성화 */
+    disabled: boolean;
+    protected updated(changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+    private propagate;
+    private getRadius;
+    private handleSlotChange;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-button-group': UButtonGroup;
+    }
+}