@iyulab/components 1.3.4 → 1.4.0

package/dist/components/field/UField.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 "./UField.styles.js";
-import { customElement, property } from "lit/decorators.js";
 import { html, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
 import { isFocusable } from "tabbable";
 //#region src/components/field/UField.ts
 var UField = class UField extends UElement {

package/dist/components/form/UForm.js

@@ -4,8 +4,8 @@ import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm
 import { UFormControlElement } from "../UFormControlElement.js";
 import { arrayAttrConverter } from "../../utilities/converters.js";
 import { styles } from "./UForm.styles.js";
-import { customElement, property } from "lit/decorators.js";
 import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
 //#region src/components/form/UForm.ts
 var UForm = class UForm extends UElement {
 	constructor(..._args) {

package/dist/components/icon/UIcon.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 { IconRegistry, getDefaultBaseUrl } from "../../utilities/icons.js";
 import { styles } from "./UIcon.styles.js";
-import { customElement, property } from "lit/decorators.js";
 import { nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { until } from "lit/directives/until.js";
 //#region src/components/icon/UIcon.ts

package/dist/components/icon-button/UIconButton.d.ts

@@ -39,7 +39,6 @@ export declare class UIconButton extends UElement {
     /** 툴팁 거리 */
     tooltipOffset: OffsetOptions;
     render(): import('lit-html').TemplateResult<1>;
-    private handleStopTooltipEvent;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/icon-button/UIconButton.js

@@ -1,12 +1,12 @@
 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 "../button/UButton.js";
+import "../icon/UIcon.js";
 import "../tooltip/UTooltip.js";
 import { styles } from "./UIconButton.styles.js";
-import { customElement, property } from "lit/decorators.js";
 import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
 //#region src/components/icon-button/UIconButton.ts
 var UIconButton = class UIconButton extends UElement {
 	constructor(..._args) {
@@ -42,16 +42,11 @@ var UIconButton = class UIconButton extends UElement {
       <u-tooltip part="tooltip"
         .placement=${this.tooltipPlacement}
         .offset=${this.tooltipOffset}
-        @show=${this.handleStopTooltipEvent}
-        @hide=${this.handleStopTooltipEvent}
       >
         <slot></slot>
       </u-tooltip>
     `;
 	}
-	handleStopTooltipEvent(e) {
-		e.stopImmediatePropagation();
-	}
 };
 __decorate([property({
 	type: String,

package/dist/components/input/UInput.d.ts

@@ -19,8 +19,7 @@ export type InputVariant = 'outlined' | 'filled' | 'underlined' | 'borderless';
  * @csspart input - 네이티브 input 요소
  * @csspart popover - 드롭다운 팝오버 요소
  *
- * @cssprop --input-popover-min-width - 드롭다운 팝오버의 최소 너비 (기본값: 100%)
- * @cssprop --input-popover-max-width - 드롭다운 팝오버의 최대 너비 (기본값: 80vw)
+ * @cssprop --input-popover-width - 드롭다운 팝오버의 너비 (기본값: 앵커(트리거) 너비)
  * @cssprop --input-popover-min-height - 드롭다운 팝오버의 최소 높이 (기본값: 0px)
  * @cssprop --input-popover-max-height - 드롭다운 팝오버의 최대 높이 (기본값: 50vh)
  *
@@ -74,7 +73,7 @@ export declare class UInput extends UFormControlElement<string> {
     private options;
     disconnectedCallback(): void;
     render(): import('lit-html').TemplateResult<1>;
-    validate(): boolean;
+    protected setValidity(): void;
     reset(): void;
     focus(options?: FocusOptions): void;
     blur(): void;

package/dist/components/input/UInput.js

@@ -1,14 +1,15 @@
 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 "../icon/UIcon.js";
 import "../spinner/USpinner.js";
+import "../icon/UIcon.js";
+import { Locale } from "../../utilities/Locale.js";
 import "../field/UField.js";
 import { UOption } from "../option/UOption.js";
 import { UPopover } from "../popover/UPopover.js";
 import { styles } from "./UInput.styles.js";
-import { customElement, property, query, state } from "lit/decorators.js";
 import { html } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { live } from "lit/directives/live.js";
 //#region src/components/input/UInput.ts
@@ -53,7 +54,6 @@ var UInput = class UInput extends UFormControlElement {
 		this.handleInputBlur = (_) => {
 			this.value = this.inputEl?.value || "";
 			this.internals?.setFormValue(this.value);
-			this.internals?.setValidity(this.inputEl?.validity, this.validationMessage || this.inputEl?.validationMessage, this.containerEl);
 			if (!this.novalidate) this.validate();
 			this.dispatchEvent(new Event("change", {
 				bubbles: true,
@@ -119,11 +119,9 @@ var UInput = class UInput extends UFormControlElement {
 			}
 		};
 		this.handlePopoverShow = (e) => {
-			e.stopPropagation();
 			if (this.options.length === 0) e.preventDefault();
 		};
 		this.handlePopoverHide = (e) => {
-			e.stopPropagation();
 			if (this.options.length === 0) e.preventDefault();
 		};
 	}
@@ -201,6 +199,7 @@ var UInput = class UInput extends UFormControlElement {
         scrollable
         for=".container"
         trigger="focus"
+        strategy="fixed"
         placement="bottom-start"
         offset="1"
         @show=${this.handlePopoverShow}
@@ -210,10 +209,39 @@ var UInput = class UInput extends UFormControlElement {
       </u-popover>
     `;
 	}
-	validate() {
-		if (this.internals) this.invalid = !this.internals.checkValidity();
-		else this.invalid = !this.inputEl?.checkValidity();
-		return !this.invalid;
+	setValidity() {
+		const v = this.inputEl?.validity;
+		let flags = {};
+		let message = "";
+		if (v?.valueMissing) {
+			flags = { valueMissing: true };
+			message = Locale.getValue("valueMissing");
+		} else if (v?.badInput) {
+			flags = { badInput: true };
+			message = Locale.getValue("badInput");
+		} else if (v?.typeMismatch) {
+			flags = { typeMismatch: true };
+			message = Locale.getValue("typeMismatch");
+		} else if (v?.patternMismatch) {
+			flags = { patternMismatch: true };
+			message = Locale.getValue("patternMismatch", { pattern: this.pattern ?? "" });
+		} 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 });
+		} else if (v?.rangeUnderflow) {
+			flags = { rangeUnderflow: true };
+			message = Locale.getValue("rangeUnderflow", { min: this.min ?? "" });
+		} else if (v?.rangeOverflow) {
+			flags = { rangeOverflow: true };
+			message = Locale.getValue("rangeOverflow", { max: this.max ?? "" });
+		} else if (v?.stepMismatch) {
+			flags = { stepMismatch: true };
+			message = Locale.getValue("stepMismatch", { step: this.step ?? 1 });
+		}
+		this.commit(flags, message, this.containerEl ?? void 0);
 	}
 	reset() {
 		this.value = "";

package/dist/components/input/UInput.styles.js

@@ -2,8 +2,6 @@ import { css } from "lit";
 //#region src/components/input/UInput.styles.ts
 var styles = css`
   :host {
-    --input-popover-min-width: 100%;
-    --input-popover-max-width: 80vw;
     --input-popover-min-height: 0px;
     --input-popover-max-height: 50vh;
   }
@@ -167,8 +165,7 @@ var styles = css`
   }
 
   u-popover {
-    min-width: var(--input-popover-min-width);
-    max-width: var(--input-popover-max-width);
+    width: var(--input-popover-width, var(--anchor-width, 100%));
     min-height: var(--input-popover-min-height);
     max-height: var(--input-popover-max-height);
     padding: 4px;

package/dist/components/menu/UMenu.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 { UMenuItem } from "../menu-item/UMenuItem.js";
 import { styles } from "./UMenu.styles.js";
-import { customElement, property } from "lit/decorators.js";
 import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
 //#region src/components/menu/UMenu.ts
 var UMenu = class UMenu extends UElement {
 	constructor(..._args) {

package/dist/components/menu-item/UMenuItem.js

@@ -5,8 +5,8 @@ import "../icon/UIcon.js";
 import { UDivider } from "../divider/UDivider.js";
 import "../popover/UPopover.js";
 import { styles } from "./UMenuItem.styles.js";
-import { customElement, property, state } from "lit/decorators.js";
 import { html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
 import { live } from "lit/directives/live.js";
 //#region src/components/menu-item/UMenuItem.ts
 var _UMenuItem;

package/dist/components/menu-item/UMenuItem.styles.js

@@ -3,6 +3,7 @@ import { css } from "lit";
 var styles = css`
   :host {
     --menu-item-depth: 0;
+    --menu-item-color: var(--u-primary-color, var(--u-blue-600));
   }
 
   :host {
@@ -49,12 +50,12 @@ var styles = css`
   /* indicator: highlight */
   :host([selected][indicator="highlight"]) .header {
     font-weight: 600;
-    color: var(--u-blue-700);
-    background-color: var(--u-blue-100);
+    color: color-mix(in srgb, var(--menu-item-color) 85%, black);
+    background-color: color-mix(in srgb, var(--menu-item-color) 15%, var(--u-bg-color));
   }
   :host([selected][indicator="highlight"]) .header:hover,
   :host([selected][indicator="highlight"]:focus-visible) .header {
-    background-color: var(--u-blue-200);
+    background-color: color-mix(in srgb, var(--menu-item-color) 25%, var(--u-bg-color));
   }
 
   .prefix-checker {

package/dist/components/option/UOption.d.ts

@@ -32,8 +32,11 @@ export declare class UOption extends UElement {
     value: string;
     connectedCallback(): void;
     render(): import('lit-html').TemplateResult<1>;
-    getText(): string;
     private renderMarker;
+    /** 라벨(기본 slot)의 텍스트 노드만 추출한다 — 엘리먼트 자식(예: 설명용 `<p>`)은 제외. */
+    getText(): string;
+    /** 라벨(기본 slot) 노드를 clone해서 반환한다 — 원본은 옵션 목록에 계속 slot돼 있어야 하므로. */
+    getContent(): Node[];
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/option/UOption.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 "../icon/UIcon.js";
 import { styles } from "./UOption.styles.js";
-import { customElement, property } from "lit/decorators.js";
 import { html, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
 //#region src/components/option/UOption.ts
 var UOption = class UOption extends UElement {
 	constructor(..._args) {
@@ -31,9 +31,6 @@ var UOption = class UOption extends UElement {
       <slot name="suffix"></slot>
     `;
 	}
-	getText() {
-		return this.renderRoot.querySelector("slot:not([name])")?.assignedNodes({ flatten: true }).map((n) => n.textContent?.trim()).filter(Boolean).join("") || this.value;
-	}
 	renderMarker() {
 		if (this.marker === "radio") return html`<span class="radio-marker" part="radio-marker"></span>`;
 		if (this.marker === "check") return html`
@@ -45,6 +42,15 @@ var UOption = class UOption extends UElement {
       `;
 		return nothing;
 	}
+	/** 라벨(기본 slot)의 텍스트 노드만 추출한다 — 엘리먼트 자식(예: 설명용 `<p>`)은 제외. */
+	getText() {
+		return this.renderRoot.querySelector("slot:not([name])")?.assignedNodes({ flatten: true }).filter((n) => n.nodeType === Node.TEXT_NODE).map((n) => n.textContent ?? "").join("").replace(/\s+/g, " ").trim() || this.value;
+	}
+	/** 라벨(기본 slot) 노드를 clone해서 반환한다 — 원본은 옵션 목록에 계속 slot돼 있어야 하므로. */
+	getContent() {
+		const nodes = this.renderRoot.querySelector("slot:not([name])")?.assignedNodes({ flatten: true }).map((n) => n.cloneNode(true)) ?? [];
+		return nodes.length > 0 ? nodes : [document.createTextNode(this.value)];
+	}
 };
 __decorate([property({
 	type: Boolean,

package/dist/components/option/UOption.styles.js

@@ -2,17 +2,18 @@ import { css } from "lit";
 //#region src/components/option/UOption.styles.ts
 var styles = css`
   :host {
+    --option-color: var(--u-primary-color, var(--u-blue-600));
     --option-color-interactive: inherit;
     --option-border-color-interactive: var(--u-border-color-hover);
     --option-background-color-interactive: var(--u-bg-color-hover);
 
     --option-color-active: inherit;
-    --option-border-color-active: var(--u-blue-600);
-    --option-background-color-active: var(--u-blue-100);
+    --option-border-color-active: var(--option-color);
+    --option-background-color-active: color-mix(in srgb, var(--option-color) 15%, var(--u-bg-color));
 
     --option-color-active-interactive: inherit;
-    --option-border-color-active-interactive: var(--u-blue-600);
-    --option-background-color-active-interactive: var(--u-blue-200);
+    --option-border-color-active-interactive: var(--option-color);
+    --option-background-color-active-interactive: color-mix(in srgb, var(--option-color) 25%, var(--u-bg-color));
   }
 
   :host {

package/dist/components/panel/UPanel.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 "./UPanel.styles.js";
-import { customElement, property } from "lit/decorators.js";
 import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
 //#region src/components/panel/UPanel.ts
 var UPanel = class UPanel extends UElement {
 	constructor(..._args) {

package/dist/components/popover/UPopover.js

@@ -3,8 +3,8 @@ import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm
 import { UFloatingElement } from "../UFloatingElement.js";
 import { arrayAttrConverter } from "../../utilities/converters.js";
 import { styles } from "./UPopover.styles.js";
-import { customElement, property } from "lit/decorators.js";
 import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
 //#region src/components/popover/UPopover.ts
 var _UPopover;
 var UPopover = class UPopover extends UFloatingElement {

package/dist/components/progress-bar/UProgressBar.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 "./UProgressBar.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/progress-bar/UProgressBar.ts
 var UProgressBar = class UProgressBar extends UElement {
 	constructor(..._args) {

package/dist/components/progress-bar/UProgressBar.styles.js

@@ -3,8 +3,8 @@ import { css } from "lit";
 var styles = css`
   :host {
     --progress-bar-height: 0.5em;
-    --progress-bar-color: var(--u-blue-600);
-    --progress-bar-buffer-color: var(--u-blue-200);
+    --progress-bar-color: var(--u-primary-color, var(--u-blue-600));
+    --progress-bar-buffer-color: color-mix(in srgb, var(--progress-bar-color) 35%, var(--u-bg-color));
     --progress-bar-track-color: var(--u-neutral-200);
   }
 

package/dist/components/progress-ring/UProgressRing.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 "./UProgressRing.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/progress-ring/UProgressRing.ts
 var PATH_LENGTH = 100;
 var RADIUS = 44;

package/dist/components/progress-ring/UProgressRing.styles.js

@@ -3,10 +3,10 @@ import { css } from "lit";
 var styles = css`
   :host {
     --progress-ring-size: 6em;
-    --progress-ring-color: var(--u-blue-600);
+    --progress-ring-color: var(--u-primary-color, var(--u-blue-600));
     --progress-ring-track-width: 6;
     --progress-ring-track-color: var(--u-neutral-200);
-    --progress-ring-buffer-color: var(--u-blue-200);
+    --progress-ring-buffer-color: color-mix(in srgb, var(--progress-ring-color) 35%, var(--u-bg-color));
   }
 
   /* === Status Colors === */

package/dist/components/radio/URadio.d.ts

@@ -25,7 +25,7 @@ export declare class URadio extends UFormControlElement<string> {
     disconnectedCallback(): void;
     protected updated(changedProperties: PropertyValues): void;
     render(): import('lit-html').TemplateResult<1>;
-    validate(): boolean;
+    protected setValidity(): void;
     reset(): void;
     private setup;
     private cleanup;

package/dist/components/radio/URadio.js

@@ -1,11 +1,12 @@
 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 { UOption } from "../option/UOption.js";
 import { styles } from "./URadio.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/radio/URadio.ts
 var URadio = class URadio extends UFormControlElement {
 	constructor(..._args) {
@@ -94,10 +95,9 @@ var URadio = class URadio extends UFormControlElement {
       </u-field>
     `;
 	}
-	validate() {
-		if (this.internals) this.invalid = !this.internals.checkValidity();
-		else this.invalid = this.required && !this.value;
-		return !this.invalid;
+	setValidity() {
+		const missing = this.required && !this.value;
+		this.commit(missing ? { valueMissing: true } : {}, missing ? Locale.getValue("valueMissing") : "", this);
 	}
 	reset() {
 		this.value = void 0;
@@ -125,7 +125,6 @@ var URadio = class URadio extends UFormControlElement {
 			option.selected = option.value === this.value;
 		});
 		this.internals?.setFormValue(this.value || "");
-		this.internals?.setValidity(this.required && !this.value ? { valueMissing: true } : {}, this.validationMessage || "", this);
 		if (!this.novalidate) this.validate();
 		this.dispatchEvent(new Event("change", {
 			bubbles: true,

package/dist/components/radio/URadio.styles.js

@@ -1,6 +1,11 @@
 import { css } from "lit";
 //#region src/components/radio/URadio.styles.ts
 var styles = css`
+  :host {
+    --radio-color: var(--u-primary-color, var(--u-blue-600));
+    --radio-color-active: color-mix(in srgb, var(--radio-color) 85%, black);
+  }
+
   :host {
     display: inline-flex;
     flex-direction: column;
@@ -44,40 +49,40 @@ var styles = css`
   /* Default + Filled */
   :host([type="default"][variant="filled"]) ::slotted(u-option) {
     --option-color-active: #fff;
-    --option-border-color-active: var(--u-blue-600);
-    --option-background-color-active: var(--u-blue-600);
+    --option-border-color-active: var(--radio-color);
+    --option-background-color-active: var(--radio-color);
     --option-color-active-interactive: #fff;
-    --option-border-color-active-interactive: var(--u-blue-700);
-    --option-background-color-active-interactive: var(--u-blue-700);
+    --option-border-color-active-interactive: var(--radio-color-active);
+    --option-background-color-active-interactive: var(--radio-color-active);
   }
 
   /* Default + Outlined */
   :host([type="default"][variant="outlined"]) ::slotted(u-option) {
-    --option-color-active: var(--u-blue-700);
-    --option-border-color-active: var(--u-blue-600);
+    --option-color-active: var(--radio-color-active);
+    --option-border-color-active: var(--radio-color);
     --option-background-color-active: transparent;
-    --option-color-active-interactive: var(--u-blue-700);
-    --option-border-color-active-interactive: var(--u-blue-700);
+    --option-color-active-interactive: var(--radio-color-active);
+    --option-border-color-active-interactive: var(--radio-color-active);
     --option-background-color-active-interactive: transparent;
   }
 
   /* Button + Filled */
   :host([type="button"][variant="filled"]) ::slotted(u-option) {
     --option-color-active: #fff;
-    --option-border-color-active: var(--u-blue-600);
-    --option-background-color-active: var(--u-blue-600);
+    --option-border-color-active: var(--radio-color);
+    --option-background-color-active: var(--radio-color);
     --option-color-active-interactive: #fff;
-    --option-border-color-active-interactive: var(--u-blue-700);
-    --option-background-color-active-interactive: var(--u-blue-700);
+    --option-border-color-active-interactive: var(--radio-color-active);
+    --option-background-color-active-interactive: var(--radio-color-active);
   }
 
   /* Button + Outlined */
   :host([type="button"][variant="outlined"]) ::slotted(u-option) {
-    --option-color-active: var(--u-blue-700);
-    --option-border-color-active: var(--u-blue-600);
+    --option-color-active: var(--radio-color-active);
+    --option-border-color-active: var(--radio-color);
     --option-background-color-active: transparent;
-    --option-color-active-interactive: var(--u-blue-700);
-    --option-border-color-active-interactive: var(--u-blue-700);
+    --option-color-active-interactive: var(--radio-color-active);
+    --option-border-color-active-interactive: var(--radio-color-active);
     --option-background-color-active-interactive: transparent;
   }
 

package/dist/components/rating/URating.d.ts

@@ -27,13 +27,14 @@ export declare class URating extends UFormControlElement<number> {
     private buffer;
     private symbol;
     private symbolOff;
+    protected shouldValidate(changed: PropertyValues): boolean;
     private get interactive();
     protected updated(changedProperties: PropertyValues): void;
     render(): import('lit-html').TemplateResult<1>;
-    validate(): boolean;
+    protected setValidity(): void;
+    private isStepMismatch;
     reset(): void;
     private onChangeValue;
-    private getValidity;
     private handleSlotChange;
     private handleSymbolPointerMove;
     private handleSymbolPointerLeave;

package/dist/components/rating/URating.js

@@ -1,12 +1,12 @@
-import { formatTemplate, getLocaleStrings, resolveLocale } from "../../core/locale.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 { UFormControlElement } from "../UFormControlElement.js";
 import "../icon/UIcon.js";
+import { Locale } from "../../utilities/Locale.js";
 import "../field/UField.js";
 import { styles } from "./URating.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/rating/URating.ts
 var URating = class URating extends UFormControlElement {
 	constructor(..._args) {
@@ -78,6 +78,13 @@ var URating = class URating extends UFormControlElement {
 	static {
 		this.styles = [super.styles, styles];
 	}
+	shouldValidate(changed) {
+		return super.shouldValidate(changed) || [
+			"min",
+			"max",
+			"precision"
+		].some((k) => changed.has(k));
+	}
 	get interactive() {
 		return !this.disabled && !this.readonly;
 	}
@@ -129,13 +136,28 @@ var URating = class URating extends UFormControlElement {
       </div>
     `;
 	}
-	validate() {
-		if (this.internals) this.invalid = !this.internals.checkValidity();
-		else {
-			const { flags } = this.getValidity();
-			this.invalid = Object.values(flags).some(Boolean);
+	setValidity() {
+		const v = this.value || 0;
+		let flags = {};
+		let message = "";
+		if (this.required && !v) {
+			flags = { valueMissing: true };
+			message = Locale.getValue("valueMissing");
+		} else if (v && v < this.min) {
+			flags = { rangeUnderflow: true };
+			message = Locale.getValue("rangeUnderflow", { min: this.min });
+		} else if (v && v > this.max) {
+			flags = { rangeOverflow: true };
+			message = Locale.getValue("rangeOverflow", { max: this.max });
+		} else if (v && this.precision < 1 && this.isStepMismatch(v)) {
+			flags = { stepMismatch: true };
+			message = Locale.getValue("stepMismatch", { step: this.precision });
 		}
-		return !this.invalid;
+		this.commit(flags, message, this.renderRoot.querySelector(".symbols") ?? void 0);
+	}
+	isStepMismatch(v) {
+		const remainder = Math.abs(v % this.precision);
+		return remainder > .001 && Math.abs(remainder - this.precision) > .001;
 	}
 	reset() {
 		this.value = 0;
@@ -144,41 +166,12 @@ var URating = class URating extends UFormControlElement {
 	onChangeValue() {
 		this.buffer = -1;
 		this.internals?.setFormValue(this.value?.toString() || "");
-		const { flags, message } = this.getValidity();
-		this.internals?.setValidity(flags, this.validationMessage || message, this.renderRoot.querySelector(".symbols") || void 0);
 		if (!this.novalidate) this.validate();
 		this.dispatchEvent(new Event("change", {
 			bubbles: true,
 			composed: true
 		}));
 	}
-	getValidity() {
-		const v = this.value || 0;
-		const s = getLocaleStrings(resolveLocale(this.locale));
-		if (this.required && !v) return {
-			flags: { valueMissing: true },
-			message: s.required
-		};
-		if (v && v < this.min) return {
-			flags: { rangeUnderflow: true },
-			message: formatTemplate(s.minValue, { min: this.min })
-		};
-		if (v && v > this.max) return {
-			flags: { rangeOverflow: true },
-			message: formatTemplate(s.maxValue, { max: this.max })
-		};
-		if (v && this.precision < 1) {
-			const remainder = Math.abs(v % this.precision);
-			if (remainder > .001 && Math.abs(remainder - this.precision) > .001) return {
-				flags: { stepMismatch: true },
-				message: formatTemplate(s.stepMismatch, { step: this.precision })
-			};
-		}
-		return {
-			flags: {},
-			message: ""
-		};
-	}
 	calibrate(e, score) {
 		const rect = e.currentTarget.getBoundingClientRect();
 		const ratio = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));