@iyulab/components 1.3.4 → 1.4.0

package/dist/components/tab-panel/UTabPanel.styles.js

@@ -1,6 +1,10 @@
 import { css } from "lit";
 //#region src/components/tab-panel/UTabPanel.styles.ts
 var styles = css`
+  :host {
+    --tab-panel-color: var(--u-primary-color, var(--u-blue-600));
+  }
+
   :host {
     display: flex;
     color: var(--u-txt-color);
@@ -79,12 +83,12 @@ var styles = css`
 
   :host([variant="line"]) ::slotted(u-tab[active]) {
     position: relative;
-    color: var(--u-blue-600);
+    color: var(--tab-panel-color);
   }
   :host([variant="line"]) ::slotted(u-tab[active])::after {
     content: '';
     position: absolute;
-    background-color: var(--u-blue-600);
+    background-color: var(--tab-panel-color);
   }
 
   :host([variant="line"][placement="top"]) .header {
@@ -193,7 +197,7 @@ var styles = css`
     gap: 0.25em;
   }
   :host([variant="plain"]) ::slotted(u-tab[active]) {
-    color: var(--u-blue-600);
+    color: var(--tab-panel-color);
     font-weight: 600;
   }
 `;

package/dist/components/tag/UTag.js

@@ -2,8 +2,8 @@ import { UElement } from "../UElement.js";
 import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
 import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
 import { styles } from "./UTag.styles.js";
-import { customElement, property } from "lit/decorators.js";
 import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
 //#region src/components/tag/UTag.ts
 var UTag = class UTag extends UElement {
 	constructor(..._args) {

package/dist/components/tag/UTag.styles.js

@@ -2,16 +2,17 @@ import { css } from "lit";
 //#region src/components/tag/UTag.styles.ts
 var styles = css`
   :host {
+    --tag-fill-color: var(--u-primary-color, var(--u-blue-600));
     --tag-color: var(--u-neutral-800);
     --tag-bg-color: var(--u-neutral-100);
     --tag-border-color: transparent;
   }
 
-  /* Variant: solid (강한 채움) */
+  /* Variant: solid (강한 채움, 기본 색상은 --u-primary-color) */
   :host([variant="solid"]) {
     --tag-color: var(--u-neutral-0);
-    --tag-bg-color: var(--u-neutral-600);
-    --tag-border-color: var(--u-neutral-600);
+    --tag-bg-color: var(--tag-fill-color);
+    --tag-border-color: var(--tag-fill-color);
   }
   :host([variant="solid"][color="blue"]) {
     --tag-bg-color: var(--u-blue-500);
@@ -50,11 +51,11 @@ var styles = css`
     --tag-border-color: var(--u-pink-500);
   }
 
-  /* Variant: surface (채우기 + 테두리) */
+  /* Variant: surface (채우기 + 테두리, 기본 색상은 --u-primary-color) */
   :host([variant="surface"]) {
-    --tag-color: var(--u-neutral-800);
-    --tag-bg-color: var(--u-neutral-100);
-    --tag-border-color: var(--u-neutral-300);
+    --tag-color: color-mix(in srgb, var(--tag-fill-color) 70%, black);
+    --tag-bg-color: color-mix(in srgb, var(--tag-fill-color) 15%, var(--u-bg-color));
+    --tag-border-color: color-mix(in srgb, var(--tag-fill-color) 40%, var(--u-bg-color));
   }
   :host([variant="surface"][color="blue"]) {
     --tag-color: var(--u-blue-800);
@@ -102,10 +103,10 @@ var styles = css`
     --tag-border-color: var(--u-pink-300);
   }
 
-  /* Variant: filled (채우기만, 테두리 없음) */
+  /* Variant: filled (채우기만, 테두리 없음, 기본 색상은 --u-primary-color) */
   :host([variant="filled"]) {
-    --tag-color: var(--u-neutral-800);
-    --tag-bg-color: var(--u-neutral-100);
+    --tag-color: color-mix(in srgb, var(--tag-fill-color) 70%, black);
+    --tag-bg-color: color-mix(in srgb, var(--tag-fill-color) 15%, var(--u-bg-color));
     --tag-border-color: transparent;
   }
   :host([variant="filled"][color="blue"]) {
@@ -145,11 +146,11 @@ var styles = css`
     --tag-bg-color: var(--u-pink-100);
   }
 
-  /* Variant: outlined (테두리만) */
+  /* Variant: outlined (테두리만, 기본 색상은 --u-primary-color) */
   :host([variant="outlined"]) {
-    --tag-color: var(--u-neutral-700);
+    --tag-color: color-mix(in srgb, var(--tag-fill-color) 85%, black);
     --tag-bg-color: transparent;
-    --tag-border-color: var(--u-neutral-300);
+    --tag-border-color: color-mix(in srgb, var(--tag-fill-color) 40%, var(--u-bg-color));
   }
   :host([variant="outlined"][color="blue"]) {
     --tag-color: var(--u-blue-600);

package/dist/components/textarea/UTextarea.d.ts

@@ -51,7 +51,7 @@ export declare class UTextarea extends UFormControlElement<string> {
     textareaEl?: HTMLTextAreaElement;
     protected updated(changedProperties: PropertyValues): Promise<void>;
     render(): import('lit-html').TemplateResult<1>;
-    validate(): boolean;
+    protected setValidity(): void;
     reset(): void;
     private resizeTextarea;
     private handleTextareaInput;

package/dist/components/textarea/UTextarea.js

@@ -1,10 +1,11 @@
 import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
 import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
 import { UFormControlElement } from "../UFormControlElement.js";
+import { Locale } from "../../utilities/Locale.js";
 import "../field/UField.js";
 import { styles } from "./UTextarea.styles.js";
-import { customElement, property, query } from "lit/decorators.js";
 import { html } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { live } from "lit/directives/live.js";
 //#region src/components/textarea/UTextarea.ts
@@ -25,7 +26,6 @@ var UTextarea = class UTextarea extends UFormControlElement {
 		this.handleTextareaChange = (e) => {
 			this.value = this.textareaEl?.value;
 			this.internals?.setFormValue(this.value || "");
-			this.internals?.setValidity(this.textareaEl?.validity, this.textareaEl?.validationMessage, this.textareaEl);
 			if (!this.novalidate) this.validate();
 			this.relay(e);
 		};
@@ -84,10 +84,21 @@ var UTextarea = class UTextarea extends UFormControlElement {
       </u-field>
     `;
 	}
-	validate() {
-		if (this.internals) this.invalid = !this.internals.checkValidity();
-		else this.invalid = !this.textareaEl?.checkValidity();
-		return !this.invalid;
+	setValidity() {
+		const v = this.textareaEl?.validity;
+		let flags = {};
+		let message = "";
+		if (v?.valueMissing) {
+			flags = { valueMissing: true };
+			message = Locale.getValue("valueMissing");
+		} else if (v?.tooShort) {
+			flags = { tooShort: true };
+			message = Locale.getValue("tooShort", { min: this.minlength ?? 0 });
+		} else if (v?.tooLong) {
+			flags = { tooLong: true };
+			message = Locale.getValue("tooLong", { max: this.maxlength ?? 0 });
+		}
+		this.commit(flags, message, this.textareaEl ?? void 0);
 	}
 	reset() {
 		this.value = void 0;

package/dist/components/tooltip/UTooltip.js

@@ -2,8 +2,8 @@ import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.138.0/hel
 import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
 import { UFloatingElement } from "../UFloatingElement.js";
 import { styles } from "./UTooltip.styles.js";
-import { customElement, property } from "lit/decorators.js";
 import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
 //#region src/components/tooltip/UTooltip.ts
 var UTooltip = class UTooltip extends UFloatingElement {
 	constructor(..._args) {

package/dist/components/tree/UTree.js

@@ -3,8 +3,8 @@ import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.138.0/hel
 import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
 import { UTreeItem } from "../tree-item/UTreeItem.js";
 import { styles } from "./UTree.styles.js";
-import { customElement, property, state } from "lit/decorators.js";
 import { html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
 //#region src/components/tree/UTree.ts
 var UTree = class UTree extends UElement {
 	constructor(..._args) {

package/dist/components/tree-item/UTreeItem.js

@@ -1,11 +1,11 @@
 import { UElement } from "../UElement.js";
 import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorateMetadata.js";
 import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
-import "../icon/UIcon.js";
 import "../spinner/USpinner.js";
+import "../icon/UIcon.js";
 import { styles } from "./UTreeItem.styles.js";
-import { customElement, property, state } from "lit/decorators.js";
 import { html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
 //#region src/components/tree-item/UTreeItem.ts
 var _UTreeItem;
 var UTreeItem = class UTreeItem extends UElement {
@@ -125,7 +125,10 @@ var UTreeItem = class UTreeItem extends UElement {
 	}
 	expand() {
 		if (this.disabled || this.leaf) return false;
-		if (this.fire("expand")) {
+		if (this.fire("expand", {
+			bubbles: false,
+			composed: false
+		})) {
 			this.expanded = true;
 			return true;
 		}
@@ -133,7 +136,10 @@ var UTreeItem = class UTreeItem extends UElement {
 	}
 	collapse() {
 		if (this.disabled || this.leaf) return false;
-		if (this.fire("collapse")) {
+		if (this.fire("collapse", {
+			bubbles: false,
+			composed: false
+		})) {
 			this.expanded = false;
 			return true;
 		}

package/dist/components/tree-item/UTreeItem.styles.js

@@ -3,6 +3,7 @@ import { css } from "lit";
 var styles = css`
   :host {
     --tree-item-depth: 0;
+    --tree-item-color: var(--u-primary-color, var(--u-blue-600));
   }
 
   :host {
@@ -35,9 +36,9 @@ var styles = css`
     background-color: var(--u-bg-color-hover);
   }
   .header[selected] {
-    color: var(--u-blue-700);
+    color: color-mix(in srgb, var(--tree-item-color) 85%, black);
     font-weight: 600;
-    background-color: var(--u-blue-100);
+    background-color: color-mix(in srgb, var(--tree-item-color) 15%, var(--u-bg-color));
   }
 
   ::slotted([slot="prefix"]) {
@@ -98,8 +99,8 @@ var styles = css`
   }
   .prefix-checkbox[checked],
   .prefix-checkbox[indeterminate] {
-    border-color: var(--u-blue-600);
-    background-color: var(--u-blue-600);
+    border-color: var(--tree-item-color);
+    background-color: var(--tree-item-color);
   }
   .prefix-checkbox[checked] u-icon,
   .prefix-checkbox[indeterminate] u-icon {

package/dist/index.d.ts

@@ -1,8 +1,6 @@
-export * from './core/locale.js';
-export * from './components/UFormControlElement.js';
-export * from './components/UDataElement.js';
 export * from './components/UElement.js';
 export * from './components/UFloatingElement.js';
+export * from './components/UFormControlElement.js';
 export * from './components/UOverlayElement.js';
 export * from './components/alert/UAlert.js';
 export * from './components/avatar/UAvatar.js';
@@ -59,7 +57,7 @@ export * from './utilities/converters.js';
 export * from './utilities/Dialog.js';
 export * from './utilities/elements.js';
 export * from './utilities/icons.js';
+export * from './utilities/Locale.js';
 export * from './utilities/OverlayManager.js';
-export * from './utilities/sanitizers.js';
 export * from './utilities/Theme.js';
 export * from './utilities/Toast.js';

package/dist/index.js

@@ -1,17 +1,14 @@
-import { formatTemplate, getDefaultLocale, getEffectiveLocale, getLocaleStrings, registerLocale, resolveLocale, setDefaultLocale } from "./core/locale.js";
 import { UElement } from "./components/UElement.js";
-import { UFormControlElement } from "./components/UFormControlElement.js";
-import { IconCache, IconRegistry, getDefaultBaseUrl, setDefaultBaseUrl } from "./utilities/icons.js";
-import { UIcon } from "./components/icon/UIcon.js";
-import { escapeHtmlAttr, escapeHtmlHref, escapeHtmlText, stripZeroWidth } from "./utilities/sanitizers.js";
-import { buildElementHTML, getParentElement, querySelectorAllWithin, querySelectorWithin } from "./utilities/elements.js";
-import { UDataElement } from "./components/UDataElement.js";
+import { getParentElement, querySelectorAllWithin, querySelectorWithin } from "./utilities/elements.js";
 import { UFloatingElement } from "./components/UFloatingElement.js";
+import { UFormControlElement } from "./components/UFormControlElement.js";
 import { OverlayManager } from "./utilities/OverlayManager.js";
 import { arrayAttrConverter, booleanAttrConverter, dateAttrConverter, jsonAttrConverter, urlAttrConverter } from "./utilities/converters.js";
 import { UOverlayElement } from "./components/UOverlayElement.js";
 import { USpinner } from "./components/spinner/USpinner.js";
 import { UButton } from "./components/button/UButton.js";
+import { IconCache, IconRegistry, getDefaultBaseUrl, setDefaultBaseUrl } from "./utilities/icons.js";
+import { UIcon } from "./components/icon/UIcon.js";
 import { UAlert } from "./components/alert/UAlert.js";
 import { UAvatar } from "./components/avatar/UAvatar.js";
 import { UBadge } from "./components/badge/UBadge.js";
@@ -22,6 +19,7 @@ import { UIconButton } from "./components/icon-button/UIconButton.js";
 import { UButtonGroup } from "./components/button-group/UButtonGroup.js";
 import { UCard } from "./components/card/UCard.js";
 import { UCarousel } from "./components/carousel/UCarousel.js";
+import { Locale } from "./utilities/Locale.js";
 import { UCheckbox } from "./components/checkbox/UCheckbox.js";
 import { UTag } from "./components/tag/UTag.js";
 import { UChip } from "./components/chip/UChip.js";
@@ -54,4 +52,4 @@ import { BrowserStorage } from "./utilities/BrowserStorage.js";
 import { Dialog } from "./utilities/Dialog.js";
 import { Theme } from "./utilities/Theme.js";
 import { Toast } from "./utilities/Toast.js";
-export { BrowserStorage, Dialog, IconCache, IconRegistry, OverlayManager, Theme, Toast, UAlert, UAvatar, UBadge, UBreadcrumb, UBreadcrumbItem, UButton, UButtonGroup, UCard, UCarousel, UCheckbox, UChip, UDataElement, UDialog, UDivider, UDrawer, UElement, UField, UFloatingElement, UForm, UFormControlElement, UIcon, UIconButton, UInput, UMenu, UMenuItem, UOption, UOverlayElement, UPanel, UPopover, UProgressBar, UProgressRing, URadio, URating, USelect, USkeleton, USlider, USpinner, USplitPanel, USwitch, UTab, UTabPanel, UTag, UTextarea, UTooltip, UTree, UTreeItem, arrayAttrConverter, booleanAttrConverter, buildElementHTML, dateAttrConverter, escapeHtmlAttr, escapeHtmlHref, escapeHtmlText, formatTemplate, getDefaultBaseUrl, getDefaultLocale, getEffectiveLocale, getLocaleStrings, getParentElement, jsonAttrConverter, querySelectorAllWithin, querySelectorWithin, registerLocale, resolveLocale, setDefaultBaseUrl, setDefaultLocale, stripZeroWidth, urlAttrConverter };
+export { BrowserStorage, Dialog, IconCache, IconRegistry, Locale, OverlayManager, Theme, Toast, UAlert, UAvatar, UBadge, UBreadcrumb, UBreadcrumbItem, UButton, UButtonGroup, UCard, UCarousel, UCheckbox, UChip, UDialog, UDivider, UDrawer, UElement, UField, UFloatingElement, UForm, UFormControlElement, UIcon, UIconButton, UInput, UMenu, UMenuItem, UOption, UOverlayElement, UPanel, UPopover, UProgressBar, UProgressRing, URadio, URating, USelect, USkeleton, USlider, USpinner, USplitPanel, USwitch, UTab, UTabPanel, UTag, UTextarea, UTooltip, UTree, UTreeItem, arrayAttrConverter, booleanAttrConverter, dateAttrConverter, getDefaultBaseUrl, getParentElement, jsonAttrConverter, querySelectorAllWithin, querySelectorWithin, setDefaultBaseUrl, urlAttrConverter };

package/dist/react/UTabPanel.d.ts

@@ -3,6 +3,7 @@ import { UTabPanel as UTabPanelElement } from '../components/tab-panel/UTabPanel
 
 export declare const UTabPanel: React.ForwardRefExoticComponent<
   Partial<UTabPanelElement> & React.HTMLAttributes<UTabPanelElement> & {
+  onChange?: (event: CustomEvent) => void;
   }
 >;
 

package/dist/react/UTabPanel.js

@@ -6,5 +6,7 @@ export const UTabPanel = createComponent({
   react: React,
   tagName: 'u-tab-panel',
   elementClass: UTabPanelElement,
-  events: {},
+  events: {
+    onChange: 'change',
+  },
 });

package/dist/styles/dark.css

@@ -16,121 +16,121 @@
   --u-neutral-1000:  #FFFFFF;
 
   /* Blue Colors */
-  --u-blue-0:        #0A1E3D;
-  --u-blue-100:      #1E3A5F;
-  --u-blue-200:      #2B4F7E;
-  --u-blue-300:      #3D6B9E;
-  --u-blue-400:      #5284BE;
-  --u-blue-500:      #6BA3E3;
-  --u-blue-600:      #87B8F5;
-  --u-blue-700:      #A5CDFF;
-  --u-blue-800:      #C2DEFF;
-  --u-blue-900:      #DDEEFF;
-  --u-blue-1000:     #F0F7FF;
+  --u-blue-0:        #030D1A;
+  --u-blue-100:      #061629;
+  --u-blue-200:      #0A223B;
+  --u-blue-300:      #103150;
+  --u-blue-400:      #174167;
+  --u-blue-500:      #205281;
+  --u-blue-600:      #2A659D;
+  --u-blue-700:      #3678B8;
+  --u-blue-800:      #478DCE;
+  --u-blue-900:      #5DA2DF;
+  --u-blue-1000:     #79BBEA;
 
   /* Green Colors */
-  --u-green-0:       #0D2818;
-  --u-green-100:     #1A3F2A;
-  --u-green-200:     #285639;
-  --u-green-300:     #3A7450;
-  --u-green-400:     #4E9268;
-  --u-green-500:     #66B584;
-  --u-green-600:     #81D19D;
-  --u-green-700:     #9FE5B5;
-  --u-green-800:     #BEF2CD;
-  --u-green-900:     #DDF9E5;
-  --u-green-1000:    #F0FDF5;
+  --u-green-0:       #06140C;
+  --u-green-100:     #0A2114;
+  --u-green-200:     #10301D;
+  --u-green-300:     #164228;
+  --u-green-400:     #1F5535;
+  --u-green-500:     #2A6942;
+  --u-green-600:     #367E50;
+  --u-green-700:     #4A9563;
+  --u-green-800:     #63AB7A;
+  --u-green-900:     #80BE97;
+  --u-green-1000:    #9BCFB1;
 
   /* Yellow Colors */
-  --u-yellow-0:      #2E2200;
-  --u-yellow-100:    #4D3A00;
-  --u-yellow-200:    #6B5200;
-  --u-yellow-300:    #8A6B00;
-  --u-yellow-400:    #B08900;
-  --u-yellow-500:    #D4A712;
-  --u-yellow-600:    #F5C842;
-  --u-yellow-700:    #FFE066;
-  --u-yellow-800:    #FFED99;
-  --u-yellow-900:    #FFF5CC;
-  --u-yellow-1000:   #FFFBE6;
+  --u-yellow-0:      #1C1300;
+  --u-yellow-100:    #2D1E00;
+  --u-yellow-200:    #402B00;
+  --u-yellow-300:    #553900;
+  --u-yellow-400:    #6B4900;
+  --u-yellow-500:    #825A00;
+  --u-yellow-600:    #9A6C00;
+  --u-yellow-700:    #B08012;
+  --u-yellow-800:    #C69635;
+  --u-yellow-900:    #D9AD5A;
+  --u-yellow-1000:   #E8C57F;
 
   /* Red Colors */
-  --u-red-0:         #2E0A0A;
-  --u-red-100:       #4D1717;
-  --u-red-200:       #6B2424;
-  --u-red-300:       #8F3535;
-  --u-red-400:       #B24848;
-  --u-red-500:       #D66060;
-  --u-red-600:       #F57878;
-  --u-red-700:       #FF9494;
-  --u-red-800:       #FFB3B3;
-  --u-red-900:       #FFD2D2;
-  --u-red-1000:      #FFF0F0;
+  --u-red-0:         #1C0707;
+  --u-red-100:       #2C0B0B;
+  --u-red-200:       #3E1111;
+  --u-red-300:       #541818;
+  --u-red-400:       #6C2020;
+  --u-red-500:       #852A2A;
+  --u-red-600:       #A13535;
+  --u-red-700:       #B94949;
+  --u-red-800:       #CB6262;
+  --u-red-900:       #D98383;
+  --u-red-1000:      #E7A2A2;
 
   /* Orange Colors */
-  --u-orange-0:      #2E1A00;
-  --u-orange-100:    #4D2E00;
-  --u-orange-200:    #6B4200;
-  --u-orange-300:    #8A5A00;
-  --u-orange-400:    #B07500;
-  --u-orange-500:    #D49212;
-  --u-orange-600:    #F5AE42;
-  --u-orange-700:    #FFC566;
-  --u-orange-800:    #FFD899;
-  --u-orange-900:    #FFEBCC;
-  --u-orange-1000:   #FFF5E6;
+  --u-orange-0:      #1D0E00;
+  --u-orange-100:    #2F1700;
+  --u-orange-200:    #421F00;
+  --u-orange-300:    #582A00;
+  --u-orange-400:    #703600;
+  --u-orange-500:    #8A4500;
+  --u-orange-600:    #A55600;
+  --u-orange-700:    #BD6A18;
+  --u-orange-800:    #D1823C;
+  --u-orange-900:    #E19D67;
+  --u-orange-1000:   #EDB992;
 
   /* Teal Colors */
-  --u-teal-0:        #002018;
-  --u-teal-100:      #00382B;
-  --u-teal-200:      #005040;
-  --u-teal-300:      #006B55;
-  --u-teal-400:      #00886C;
-  --u-teal-500:      #1AA88A;
-  --u-teal-600:      #42C4A5;
-  --u-teal-700:      #6EDABD;
-  --u-teal-800:      #9EEAD5;
-  --u-teal-900:      #CFF5EA;
-  --u-teal-1000:     #EDFCF7;
+  --u-teal-0:        #041411;
+  --u-teal-100:      #07201B;
+  --u-teal-200:      #0B2E28;
+  --u-teal-300:      #10403A;
+  --u-teal-400:      #16544D;
+  --u-teal-500:      #1E6860;
+  --u-teal-600:      #297D74;
+  --u-teal-700:      #3A9389;
+  --u-teal-800:      #54A89F;
+  --u-teal-900:      #73BBB3;
+  --u-teal-1000:     #93CBC5;
 
   /* Cyan Colors */
-  --u-cyan-0:        #002830;
-  --u-cyan-100:      #00404D;
-  --u-cyan-200:      #005A6B;
-  --u-cyan-300:      #00768A;
-  --u-cyan-400:      #0094B0;
-  --u-cyan-500:      #12B4D4;
-  --u-cyan-600:      #42CFF5;
-  --u-cyan-700:      #66DFFF;
-  --u-cyan-800:      #99EBFF;
-  --u-cyan-900:      #CCF5FF;
-  --u-cyan-1000:     #E6FAFF;
+  --u-cyan-0:        #041318;
+  --u-cyan-100:      #071F29;
+  --u-cyan-200:      #0B2D3A;
+  --u-cyan-300:      #104050;
+  --u-cyan-400:      #165469;
+  --u-cyan-500:      #1E6A82;
+  --u-cyan-600:      #287F9C;
+  --u-cyan-700:      #3995B5;
+  --u-cyan-800:      #53AACC;
+  --u-cyan-900:      #73BEDD;
+  --u-cyan-1000:     #95CFE8;
 
   /* Purple Colors */
-  --u-purple-0:      #1A0A2E;
-  --u-purple-100:    #2E174D;
-  --u-purple-200:    #42246B;
-  --u-purple-300:    #5A358F;
-  --u-purple-400:    #7548B2;
-  --u-purple-500:    #9260D6;
-  --u-purple-600:    #AE78F5;
-  --u-purple-700:    #C494FF;
-  --u-purple-800:    #D8B3FF;
-  --u-purple-900:    #ECD2FF;
-  --u-purple-1000:   #F7F0FF;
+  --u-purple-0:      #150A22;
+  --u-purple-100:    #220F36;
+  --u-purple-200:    #31164B;
+  --u-purple-300:    #432064;
+  --u-purple-400:    #572B80;
+  --u-purple-500:    #6C379C;
+  --u-purple-600:    #8245B7;
+  --u-purple-700:    #975BCB;
+  --u-purple-800:    #AB79D9;
+  --u-purple-900:    #BD99E2;
+  --u-purple-1000:   #CEB8EA;
 
   /* Pink Colors */
-  --u-pink-0:        #2E0A1A;
-  --u-pink-100:      #4D172E;
-  --u-pink-200:      #6B2442;
-  --u-pink-300:      #8F355A;
-  --u-pink-400:      #B24875;
-  --u-pink-500:      #D66092;
-  --u-pink-600:      #F578AE;
-  --u-pink-700:      #FF94C4;
-  --u-pink-800:      #FFB3D8;
-  --u-pink-900:      #FFD2EB;
-  --u-pink-1000:     #FFF0F7;
+  --u-pink-0:        #1F0A14;
+  --u-pink-100:      #310F20;
+  --u-pink-200:      #451532;
+  --u-pink-300:      #5C1D45;
+  --u-pink-400:      #74285A;
+  --u-pink-500:      #8F336F;
+  --u-pink-600:      #AB4187;
+  --u-pink-700:      #C0569D;
+  --u-pink-800:      #D174B3;
+  --u-pink-900:      #E095C7;
+  --u-pink-1000:     #EBB5D9;
 
   /* Text Colors */
   --u-txt-color:             var(--u-neutral-900);

package/dist/utilities/Locale.d.ts

@@ -0,0 +1,38 @@
+/**
+ * @iyulab/components 의 경량 로케일 유틸리티.
+ *
+ * 범위: 라이브러리가 스스로 생성하는 chrome 문자열(검증 메시지 등)만 대상.
+ * 일반 i18n 프레임워크가 아니다. 앱 콘텐츠 번역은 consumer 의 i18n 계층이 담당한다.
+ *
+ * en/ko/ja/zh-CN/es/fr 은 빌드 시점에 내장된다 (src/assets/locales/*.json).
+ * 그 외 언어는 register()로 테이블 단위 등록/오버라이드한다.
+ */
+/** 라이브러리가 기본 제공하는 로케일. */
+export type SupportedLocale = 'en' | 'ko' | 'ja' | 'zh-CN' | 'zh-TW' | 'es' | 'fr' | 'de' | 'pt-BR' | 'vi' | 'th' | 'id' | 'ru' | 'ar';
+/** 내장 로케일은 자동완성되지만, 임의의 BCP47 태그도 그대로 받는다. */
+export type LocaleTag = SupportedLocale | (string & {});
+/** 라이브러리가 제공하는 chrome 문자열 키. 지금은 검증 메시지뿐이지만 이후 다른 UI 문구도 추가될 수 있다. */
+export type LocaleMessageKey = 'valueMissing' | 'badInput' | 'typeMismatch' | 'patternMismatch' | 'rangeUnderflow' | 'rangeOverflow' | 'stepMismatch' | 'tooShort' | 'tooLong';
+type LocaleTable = Record<LocaleMessageKey, string>;
+/**
+ * 검증 메시지 로케일을 관리하는 정적 유틸리티입니다.
+ */
+export declare class Locale {
+    /** 개별 인스턴스 생성을 방지합니다. */
+    private constructor();
+    /** 전역 활성 로케일을 지정합니다. */
+    static set(locale: LocaleTag): void;
+    /** 전역 활성 로케일을 반환합니다 (초기값은 브라우저 언어 자동 감지, 실패 시 'en'). */
+    static get(): LocaleTag;
+    /**
+     * 로케일 하나의 메시지 테이블(전체 또는 일부)을 등록합니다.
+     * 이미 존재하는 값(내장 포함) 위에 병합되므로, 일부 키만 넘겨도 나머지 키가 사라지지 않습니다.
+     */
+    static register(locale: LocaleTag, table: Partial<LocaleTable>): void;
+    /**
+     * 현재 활성 로케일 기준으로 메시지를 조회합니다.
+     * `params`가 있으면 템플릿의 `{name}` 자리를 치환합니다.
+     */
+    static getValue(key: LocaleMessageKey, params?: Record<string, string | number>): string;
+}
+export {};