@c2n/rate 0.0.9

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Nguyen Thai Vinh
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,21 @@
+# @c2n/rate
+
+`<c2-rate>` is an accessible, form-associated star rating input with pointer preview, keyboard control and optional half-star values.
+
+```bash
+npm install @c2n/rate
+```
+
+```html
+<c2-rate name="score" aria-label="Product rating" value="3.5" allow-half required></c2-rate>
+```
+
+```js
+import '@c2n/rate'
+
+document.querySelector('c2-rate').addEventListener('rate-change', (event) => {
+  console.log(event.detail.value)
+})
+```
+
+Use `readonly` to display a score without interaction, `disabled` to exclude it from form submission, and `clearable` to let users reset the rating by selecting the current value again.

package/dist/rate.js

@@ -0,0 +1,244 @@
+import { LitElement, html, unsafeCSS } from "lit";
+import { property, state } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { customElement } from "@c2n/core/element-helper.js";
+//#region src/rate.scss?inline
+var rate_default = "/* ex : var((width: 24px), width, c2-checkbox)  returns var(--c2-checkbox-width, 24px) */\n:host {\n  display: inline-flex;\n  vertical-align: middle;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.rate {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--c2-rate__container--gap,4px);\n  border-radius: var(--c2-rate__container--border-radius,4px);\n  cursor: pointer;\n  touch-action: manipulation;\n}\n.rate:focus-visible {\n  outline: var(--c2-rate__container__focus--outline,2px solid rgba(2, 101, 220, 0.4));\n  outline-offset: var(--c2-rate__container__focus--outline-offset,3px);\n}\n\n.item {\n  position: relative;\n  display: inline-flex;\n  width: var(--c2-rate__icon--size,24px);\n  height: var(--c2-rate__icon--size,24px);\n  flex: none;\n  transition: transform var(--c2-rate__icon--transition-duration,150ms) ease;\n}\n.item:hover {\n  transform: scale(var(--c2-rate__icon__hover--scale,1.12));\n}\n\n.star {\n  display: block;\n  width: var(--c2-rate__icon--size,24px);\n  height: var(--c2-rate__icon--size,24px);\n  fill: currentColor;\n}\n\n.star--empty {\n  color: var(--c2-rate__icon--color,#e4e4e7);\n}\n\n.fill {\n  position: absolute;\n  inset: 0 auto 0 0;\n  display: block;\n  overflow: hidden;\n  color: var(--c2-rate__icon__filled--color,#facc15);\n  transition: width var(--c2-rate__icon--transition-duration,150ms) ease;\n}\n\n.item--preview .fill {\n  color: var(--c2-rate__icon__preview--color,#fbbf24);\n}\n\n:host([readonly]) .rate {\n  cursor: default;\n}\n\n:host([readonly]) .item:hover {\n  transform: none;\n}\n\n:host([disabled]) .rate {\n  cursor: default;\n  opacity: var(--c2-rate__container__disabled--opacity,0.38);\n}\n\n:host([disabled]) .item:hover {\n  transform: none;\n}";
+//#endregion
+//#region \0@oxc-project+runtime@0.148.0/helpers/esm/decorate.js
+function __decorate(decorators, target, key, desc) {
+	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+	else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+	return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+//#endregion
+//#region src/rate.ts
+var Rate = class Rate extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.internals = this.attachInternals();
+		this.defaultValue = 0;
+		this.defaultValueCaptured = false;
+		this.customValidityMessage = "";
+		this.previewValue = null;
+		this.disabledByForm = false;
+		this.value = 0;
+		this.max = 5;
+		this.allowHalf = false;
+		this.clearable = false;
+		this.readonly = false;
+		this.disabled = false;
+		this.required = false;
+		this.name = "";
+		this.ariaLabel = null;
+	}
+	static {
+		this.formAssociated = true;
+	}
+	static {
+		this.styles = unsafeCSS(rate_default);
+	}
+	static {
+		this.shadowRootOptions = {
+			...LitElement.shadowRootOptions,
+			delegatesFocus: true
+		};
+	}
+	get form() {
+		return this.internals.form;
+	}
+	get labels() {
+		return this.internals.labels;
+	}
+	get validity() {
+		return this.internals.validity;
+	}
+	get validationMessage() {
+		return this.internals.validationMessage;
+	}
+	get willValidate() {
+		return this.internals.willValidate;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (!this.defaultValueCaptured) {
+			this.defaultValue = this.normalizeValue(Number(this.getAttribute("value") ?? 0));
+			this.defaultValueCaptured = true;
+		}
+	}
+	formResetCallback() {
+		this.value = this.defaultValue;
+	}
+	formDisabledCallback(disabled) {
+		this.disabledByForm = disabled && !this.hasAttribute("disabled");
+	}
+	formStateRestoreCallback(state) {
+		if (typeof state === "string") this.value = this.normalizeValue(Number(state));
+	}
+	checkValidity() {
+		return this.internals.checkValidity();
+	}
+	reportValidity() {
+		return this.internals.reportValidity();
+	}
+	setCustomValidity(message) {
+		this.customValidityMessage = message;
+		this.syncFormState();
+	}
+	willUpdate(changed) {
+		if (changed.has("max")) {
+			const max = Number.isFinite(this.max) ? Math.max(1, Math.floor(this.max)) : 5;
+			if (max !== this.max) this.max = max;
+		}
+		if (changed.has("value") || changed.has("max") || changed.has("allowHalf")) {
+			const value = this.normalizeValue(this.value);
+			if (value !== this.value) this.value = value;
+		}
+	}
+	updated(_changed) {
+		this.syncFormState();
+	}
+	get effectiveDisabled() {
+		return this.disabled || this.disabledByForm;
+	}
+	get step() {
+		return this.allowHalf ? .5 : 1;
+	}
+	normalizeValue(value) {
+		if (!Number.isFinite(value)) return 0;
+		const max = Number.isFinite(this.max) ? Math.max(1, Math.floor(this.max)) : 5;
+		return Math.min(max, Math.max(0, Math.round(value / this.step) * this.step));
+	}
+	valueFromPointer(event, index) {
+		if (!this.allowHalf) return index + 1;
+		const bounds = event.currentTarget.getBoundingClientRect();
+		return index + (event.clientX - bounds.left <= bounds.width / 2 ? .5 : 1);
+	}
+	handlePointerMove(event, index) {
+		if (this.readonly || this.effectiveDisabled) return;
+		this.previewValue = this.valueFromPointer(event, index);
+	}
+	handleClick(event, index) {
+		if (this.readonly || this.effectiveDisabled) return;
+		const next = this.valueFromPointer(event, index);
+		this.commit(this.clearable && next === this.value ? 0 : next);
+	}
+	handleKeydown(event) {
+		if (this.readonly || this.effectiveDisabled) return;
+		let next;
+		if (event.key === "ArrowRight" || event.key === "ArrowUp") next = this.value + this.step;
+		if (event.key === "ArrowLeft" || event.key === "ArrowDown") next = this.value - this.step;
+		if (event.key === "Home") next = 0;
+		if (event.key === "End") next = this.max;
+		if (next === void 0) return;
+		event.preventDefault();
+		this.commit(next);
+	}
+	commit(value) {
+		const next = this.normalizeValue(value);
+		if (next === this.value) return;
+		this.value = next;
+		this.previewValue = null;
+		this.dispatchEvent(new CustomEvent("rate-change", {
+			detail: { value: next },
+			bubbles: true,
+			composed: true
+		}));
+		this.dispatchEvent(new Event("input", {
+			bubbles: true,
+			composed: true
+		}));
+		this.dispatchEvent(new Event("change", {
+			bubbles: true,
+			composed: true
+		}));
+	}
+	syncFormState() {
+		const serialized = String(this.value);
+		this.internals.setFormValue(this.effectiveDisabled ? null : serialized, serialized);
+		const missing = this.required && this.value === 0;
+		const flags = this.customValidityMessage ? { customError: true } : missing ? { valueMissing: true } : {};
+		const message = this.customValidityMessage || (missing ? "Please choose a rating." : "");
+		this.internals.setValidity(flags, message, this.renderRoot.querySelector(".rate"));
+	}
+	fillFor(index) {
+		const value = this.previewValue ?? this.value;
+		return Math.max(0, Math.min(1, value - index)) * 100;
+	}
+	renderStar(className) {
+		return html`<svg class=${className} viewBox="0 0 24 24" aria-hidden="true">
+      <path d="m12 2.8 2.82 5.72 6.31.92-4.57 4.45 1.08 6.29L12 17.21l-5.64 2.97 1.08-6.29-4.57-4.45 6.31-.92L12 2.8Z"></path>
+    </svg>`;
+	}
+	render() {
+		const previewing = this.previewValue !== null;
+		return html`
+      <div
+        class="rate"
+        role="slider"
+        tabindex=${this.readonly || this.effectiveDisabled ? -1 : 0}
+        aria-label=${this.ariaLabel || "Rating"}
+        aria-valuemin="0"
+        aria-valuemax=${this.max}
+        aria-valuenow=${this.value}
+        aria-valuetext=${`${this.value} out of ${this.max}`}
+        aria-disabled=${this.effectiveDisabled ? "true" : "false"}
+        aria-readonly=${this.readonly ? "true" : "false"}
+        @keydown=${this.handleKeydown}
+        @pointerleave=${() => this.previewValue = null}
+      >
+        ${Array.from({ length: this.max }, (_, index) => {
+			const fill = this.fillFor(index);
+			return html`
+            <span
+              class="item ${previewing ? "item--preview" : ""}"
+              data-index=${index}
+              @pointermove=${(event) => this.handlePointerMove(event, index)}
+              @click=${(event) => this.handleClick(event, index)}
+            >
+              ${this.renderStar("star star--empty")}
+              <span class="fill" style=${styleMap({ width: `${fill}%` })}>${this.renderStar("star star--filled")}</span>
+            </span>
+          `;
+		})}
+      </div>
+    `;
+	}
+};
+__decorate([state()], Rate.prototype, "previewValue", void 0);
+__decorate([state()], Rate.prototype, "disabledByForm", void 0);
+__decorate([property({
+	type: Number,
+	reflect: true
+})], Rate.prototype, "value", void 0);
+__decorate([property({
+	type: Number,
+	reflect: true
+})], Rate.prototype, "max", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "allow-half",
+	reflect: true
+})], Rate.prototype, "allowHalf", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], Rate.prototype, "clearable", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], Rate.prototype, "readonly", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], Rate.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], Rate.prototype, "required", void 0);
+__decorate([property({ type: String })], Rate.prototype, "name", void 0);
+__decorate([property({ attribute: "aria-label" })], Rate.prototype, "ariaLabel", void 0);
+Rate = __decorate([customElement("c2-rate")], Rate);
+//#endregion
+export { Rate };

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@c2n/rate",
+  "version": "0.0.9",
+  "type": "module",
+  "main": "dist/rate.js",
+  "exports": {
+    ".": {
+      "types": "./types/src/rate.d.ts",
+      "default": "./dist/rate.js"
+    },
+    "./react": {
+      "types": "./react.d.ts",
+      "default": "./react.js"
+    },
+    "./vue": {
+      "types": "./vue.d.ts",
+      "default": "./vue.js"
+    },
+    "./custom-elements.json": "./custom-elements.json"
+  },
+  "files": [
+    "dist",
+    "types",
+    "react.d.ts",
+    "react.js",
+    "vue.d.ts",
+    "vue.js"
+  ],
+  "keywords": [
+    "rate",
+    "web component",
+    "lit"
+  ],
+  "license": "MIT",
+  "author": "code2nguyen@gmail.com",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/code2nguyen/web-components.git"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "wireit",
+    "build:only": "vite build",
+    "type-check": "wireit"
+  },
+  "wireit": {
+    "type-check": {
+      "dependencies": [
+        "../../core:build"
+      ],
+      "command": "tsc -p tsconfig.lib.json --composite false"
+    },
+    "build": {
+      "dependencies": [
+        "type-check"
+      ],
+      "command": "vite build"
+    }
+  },
+  "dependencies": {
+    "@c2n/core": "0.0.9",
+    "lit": "3.3.3"
+  },
+  "devDependencies": {
+    "@c2n/config": "*"
+  },
+  "customElements": "custom-elements.json",
+  "gitHead": "e4768cce5e0fbd5bc3165cd493a1e8d57cf0fff4"
+}

package/react.d.ts

@@ -0,0 +1,24 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+//
+// JSX types for the custom elements of @c2n/rate. Import once, anywhere in the program:
+//
+//     import '@c2n/rate/react'
+//
+// Register the elements at module scope before React renders, or React writes an object prop as an
+// attribute and it stringifies.
+
+import type { DetailedHTMLProps, HTMLAttributes } from 'react'
+import type { Rate } from '@c2n/rate'
+
+/** Standard React host-element attributes plus the element's own public properties. */
+type C2Props<T> = DetailedHTMLProps<HTMLAttributes<T>, T> & Partial<Omit<T, keyof HTMLElement>>
+
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'c2-rate': C2Props<Rate>
+    }
+  }
+}
+
+export {}

package/react.js

@@ -0,0 +1,3 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+// Types only — see the matching .d.ts.
+export {}

package/types/src/rate.d.ts

@@ -0,0 +1,104 @@
+import { LitElement, type PropertyValues } from 'lit';
+import type { TypedAddEventListener, TypedRemoveEventListener } from '@c2n/core/event-helper.js';
+export interface RateChangeEventDetail {
+    value: number;
+}
+/** Events fired by {@link Rate}, keyed for `addEventListener`. */
+export interface RateEventMap {
+    'rate-change': CustomEvent<RateChangeEventDetail>;
+    input: Event;
+    change: Event;
+}
+export interface Rate {
+    addEventListener: TypedAddEventListener<Rate, RateEventMap>;
+    removeEventListener: TypedRemoveEventListener<Rate, RateEventMap>;
+}
+/**
+ * Accessible star rating control with pointer preview, keyboard adjustment and optional half-star values.
+ *
+ * @tag c2-rate
+ *
+ * @event {CustomEvent<RateChangeEventDetail>} rate-change - Fired after the user commits a rating. `detail.value` is the new value.
+ * @event {Event} input - Fired with `rate-change` for form and framework bindings.
+ * @event {Event} change - Fired with `rate-change` after the value is committed.
+ *
+ * @cssproperty {pixel} [--c2-rate__icon--size=24px]
+ * @cssproperty {pixel} [--c2-rate__container--gap=4px]
+ * @cssproperty {color} [--c2-rate__icon--color=#e4e4e7]
+ * @cssproperty {color} [--c2-rate__icon__filled--color=#facc15]
+ * @cssproperty {color} [--c2-rate__icon__preview--color=#fbbf24]
+ * @cssproperty {number} [--c2-rate__icon__hover--scale=1.12]
+ * @cssproperty {duration} [--c2-rate__icon--transition-duration=150ms]
+ * @cssproperty {outline} [--c2-rate__container__focus--outline=2px solid rgba(2, 101, 220, 0.4)]
+ * @cssproperty {pixel} [--c2-rate__container__focus--outline-offset=3px]
+ * @cssproperty {border-radius} [--c2-rate__container--border-radius=4px]
+ * @cssproperty {opacity} [--c2-rate__container__disabled--opacity=0.38]
+ */
+export declare class Rate extends LitElement {
+    static formAssociated: boolean;
+    static styles: import("lit").CSSResult;
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        clonable?: boolean;
+        customElementRegistry?: CustomElementRegistry | null;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
+    private readonly internals;
+    private defaultValue;
+    private defaultValueCaptured;
+    private customValidityMessage;
+    private previewValue;
+    private disabledByForm;
+    /** Current rating and submitted form value. */
+    value: number;
+    /** Number of rating icons. */
+    max: number;
+    /** Allow values in half-star steps. */
+    allowHalf: boolean;
+    /** Clicking the committed rating again clears it to zero. */
+    clearable: boolean;
+    /** Prevents changes while keeping the rating visually available. */
+    readonly: boolean;
+    /** Disables interaction and form submission. */
+    disabled: boolean;
+    /** Requires a rating greater than zero for native form validation. */
+    required: boolean;
+    /** Name used when the rating participates in a form. */
+    name: string;
+    /** Accessible name of the rating control. */
+    ariaLabel: string | null;
+    get form(): HTMLFormElement | null;
+    get labels(): NodeList;
+    get validity(): ValidityState;
+    get validationMessage(): string;
+    get willValidate(): boolean;
+    connectedCallback(): void;
+    formResetCallback(): void;
+    formDisabledCallback(disabled: boolean): void;
+    formStateRestoreCallback(state: string | File | FormData | null): void;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    setCustomValidity(message: string): void;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    protected updated(_changed: PropertyValues<this>): void;
+    private get effectiveDisabled();
+    private get step();
+    private normalizeValue;
+    private valueFromPointer;
+    private handlePointerMove;
+    private handleClick;
+    private handleKeydown;
+    private commit;
+    private syncFormState;
+    private fillFor;
+    private renderStar;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'c2-rate': Rate;
+    }
+}
+//# sourceMappingURL=rate.d.ts.map

package/types/src/rate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rate.d.ts","sourceRoot":"","sources":["../../src/rate.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAItE,OAAO,KAAK,EAAE,qBAAqB,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAA;AAGhG,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAA;CACd;AAED,kEAAkE;AAClE,MAAM,WAAW,YAAY;IAC3B,aAAa,EAAE,WAAW,CAAC,qBAAqB,CAAC,CAAA;IACjD,KAAK,EAAE,KAAK,CAAA;IACZ,MAAM,EAAE,KAAK,CAAA;CACd;AAED,MAAM,WAAW,IAAI;IACnB,gBAAgB,EAAE,qBAAqB,CAAC,IAAI,EAAE,YAAY,CAAC,CAAA;IAC3D,mBAAmB,EAAE,wBAAwB,CAAC,IAAI,EAAE,YAAY,CAAC,CAAA;CAClE;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBACa,IAAK,SAAQ,UAAU;IAClC,MAAM,CAAC,cAAc,UAAO;IAE5B,OAAgB,MAAM,0BAAoB;IAC1C,OAAgB,iBAAiB;;;;;;;MAA4D;IAE7F,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAyB;IACnD,OAAO,CAAC,YAAY,CAAI;IACxB,OAAO,CAAC,oBAAoB,CAAQ;IACpC,OAAO,CAAC,qBAAqB,CAAK;IACzB,OAAO,CAAC,YAAY,CAAsB;IAC1C,OAAO,CAAC,cAAc,CAAQ;IAEvC,+CAA+C;IACJ,KAAK,SAAI;IAEpD,8BAA8B;IACa,GAAG,SAAI;IAElD,uCAAuC;IAC8B,SAAS,UAAQ;IAEtF,6DAA6D;IACjB,SAAS,UAAQ;IAE7D,oEAAoE;IACxB,QAAQ,UAAQ;IAE5D,gDAAgD;IACJ,QAAQ,UAAQ;IAE5D,sEAAsE;IAC1B,QAAQ,UAAQ;IAE5D,wDAAwD;IAC5B,IAAI,SAAK;IAErC,6CAA6C;IACG,SAAS,EAAE,MAAM,GAAG,IAAI,CAAO;IAE/E,IAAI,IAAI,2BAEP;IAED,IAAI,MAAM,aAET;IAED,IAAI,QAAQ,kBAEX;IAED,IAAI,iBAAiB,WAEpB;IAED,IAAI,YAAY,YAEf;IAEQ,iBAAiB,IAAI,IAAI;IAQlC,iBAAiB,IAAI,IAAI;IAIzB,oBAAoB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAI7C,wBAAwB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,QAAQ,GAAG,IAAI,GAAG,IAAI;IAItE,aAAa,IAAI,OAAO;IAIxB,cAAc,IAAI,OAAO;IAIzB,iBAAiB,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;cAKrB,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAW/C,OAAO,CAAC,QAAQ,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAIhE,OAAO,KAAK,iBAAiB,GAE5B;IAED,OAAO,KAAK,IAAI,GAEf;IAED,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,gBAAgB;IAOxB,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,aAAa;IAYrB,OAAO,CAAC,MAAM;IAUd,OAAO,CAAC,aAAa;IASrB,OAAO,CAAC,OAAO;IAKf,OAAO,CAAC,UAAU;IAMT,MAAM;CAkChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAA;KAChB;CACF"}

package/vue.d.ts

@@ -0,0 +1,37 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+//
+// Vue template types for the custom elements of @c2n/rate. Import once, anywhere in the program:
+//
+//     import '@c2n/rate/vue'
+//
+// Tell the compiler about the tags as well, or every c2-* tag is resolved as a Vue component and renders
+// nothing: template.compilerOptions.isCustomElement = (tag) => tag.startsWith('c2-') in vite.config.ts.
+
+import type { DefineComponent, HTMLAttributes } from 'vue'
+import type { Rate, RateEventMap } from '@c2n/rate'
+
+/** The element's own public properties, plus every attribute Vue understands on a host element. */
+type C2Props<T> = Partial<Omit<T, keyof HTMLElement>> & HTMLAttributes
+
+declare module 'vue' {
+  interface GlobalComponents {
+    'c2-rate': DefineComponent<
+      C2Props<Rate> & {
+        'allow-half'?: unknown
+        'aria-label'?: unknown
+        onRateChange?: (event: RateEventMap['rate-change']) => void
+        onInput?: (event: RateEventMap['input']) => void
+        onChange?: (event: RateEventMap['change']) => void
+      }
+    >
+  }
+}
+
+declare module '@vue/runtime-dom' {
+  interface HTMLAttributes {
+    /** Vue's own definition omits it, and slotting a plain element into a component needs it. */
+    slot?: string
+  }
+}
+
+export {}

package/vue.js

@@ -0,0 +1,3 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+// Types only — see the matching .d.ts.
+export {}