@mcp-b/web-components 0.2.0

package/dist/rating-C1BcJDIO.js

@@ -0,0 +1,722 @@
+import { Localize } from "./utilities/localize.js";
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { css, html } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import hostStyles from "@mcp-b/wc-support/styles/host.styles";
+import { SigveloFormControlElement } from "@mcp-b/wc-support/base/sigvelo-element";
+import { classMap } from "lit/directives/class-map.js";
+import { SigveloBlurEvent, SigveloChangeEvent, SigveloFocusEvent, SigveloInputEvent } from "@mcp-b/wc-support/events/form";
+import formControlStyles from "@mcp-b/wc-support/styles/form-control.styles";
+import { DraggableElement } from "@mcp-b/wc-support/utilities/drag";
+import { clamp } from "@mcp-b/wc-support/utilities/math";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+//#region src/components/rating/rating.styles.ts
+var rating_styles_default = css`
+  :host {
+    --active-color: #f59e0b;
+    --inactive-color: var(--sigvelo-color-neutral-bg);
+  }
+
+  #rating {
+    display: inline-flex;
+    position: relative;
+    align-items: center;
+    width: fit-content;
+    gap: 0.0625em;
+    border-radius: var(--sigvelo-radius-md);
+    cursor: pointer;
+    touch-action: none;
+
+    &:focus {
+      outline: none;
+    }
+
+    &:focus-visible {
+      outline: var(--sigvelo-focus-ring);
+      outline-offset: var(--sigvelo-focus-offset);
+    }
+
+    &.disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+
+    &.readonly {
+      cursor: default;
+    }
+
+    /* Sizes */
+    &.xs {
+      font-size: calc(var(--sigvelo-control-text-xs) * 1.5);
+    }
+
+    &.sm {
+      font-size: calc(var(--sigvelo-control-text-sm) * 1.5);
+    }
+
+    &.md {
+      font-size: calc(var(--sigvelo-control-text-md) * 1.5);
+    }
+
+    &.lg {
+      font-size: calc(var(--sigvelo-control-text-lg) * 1.5);
+    }
+
+    &.xl {
+      font-size: calc(var(--sigvelo-control-text-xl) * 1.5);
+    }
+  }
+
+  .symbol {
+    display: inline-flex;
+    position: relative;
+    align-items: center;
+    transition:
+      var(--sigvelo-motion-duration-interaction) color ease,
+      var(--sigvelo-motion-duration-interaction) scale ease,
+      var(--sigvelo-motion-duration-interaction) translate ease;
+
+    > :first-child,
+    > :last-child {
+      transition: inherit;
+    }
+
+    /* Selected symbols */
+    > :first-child {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      color: var(--active-color);
+      clip-path: inset(0 calc(100% - var(--clip-percentage)) 0 0);
+
+      &:dir(rtl) {
+        clip-path: inset(0 0 0 calc(100% - var(--clip-percentage)));
+      }
+    }
+
+    /* Unselected symbols */
+    > :last-child {
+      color: var(--inactive-color);
+      clip-path: inset(0 0 0 var(--clip-percentage));
+
+      &:dir(rtl) {
+        clip-path: inset(0 var(--clip-percentage) 0 0);
+      }
+    }
+  }
+
+  #rating:not(.disabled, .readonly) .symbol {
+    @media (hover: hover) {
+      &:hover {
+        scale: 1.2;
+      }
+
+      &:hover:active {
+        translate: 0 var(--sigvelo-motion-distance-xs);
+      }
+    }
+  }
+`;
+//#endregion
+//#region src/components/rating/rating.ts
+const nativeFileInput = document.createElement("input");
+nativeFileInput.name = "sigvelo-faux-input";
+nativeFileInput.type = "text";
+nativeFileInput.required = true;
+const VALIDATION_MESSAGE = nativeFileInput.validationMessage;
+/**
+* <sigvelo-rating>
+*
+* @summary Allows users to provide feedback based on their satisfaction with a product or service.
+* @tag sigvelo-rating
+* @documentation https://design-system.sigvelo.com/docs/components/rating
+* @status stable
+* @since 1.0
+*
+* @slot label - The rating's label. For plain-text labels, you can use the `label` attribute instead.
+* @slot description - The rating's description. For plain-text descriptions, you can use the `description` attribute
+*  instead.
+*
+* @event sigvelo-blur - Emitted when the rating loses focus. This event does not bubble.
+* @event sigvelo-change - Emitted when the user commits changes to the rating's value.
+* @event sigvelo-focus - Emitted when the rating receives focus. This event does not bubble.
+* @event sigvelo-input - Emitted when the rating receives input.
+*
+* @csspart label - The element that contains the ratings's label.
+* @csspart description - The element that contains the rating's description.
+* @csspart rating - The element that wraps all of the rating's symbols.
+* @csspart symbol - The container that holds the selected and unselected version of each symbol.
+*
+* @cssstate disabled - Applied when the rating is disabled.
+* @cssstate focused - Applied when the rating has focus.
+* @cssstate user-valid - Applied when the rating is valid and the user has sufficiently interacted with it.
+* @cssstate user-invalid - Applied when the rating is invalid and the user has sufficiently interacted with it.
+*
+* @example Default
+* ```html
+* <sigvelo-rating
+*   label="Rate my cat"
+*   description="Leave her some stars."
+*   name="cat"
+*   value="4"
+* >
+* </sigvelo-rating>
+* ```
+*
+* @example Labels and descriptions
+* You can use the `label` and `description` attributes to provide plain text labels and descriptions for the rating. If you want to provide HTML, use the `label` and `description` slots instead.
+*
+* ```html
+* <sigvelo-rating name="name" label="How would you rate our catnip?">
+*   <span slot="description">
+*     For details, please <a href="https://example.com/" target="_blank">visit our website</a>.
+*   </span>
+* </sigvelo-rating>
+* ```
+*
+* @example Providing an initial value
+* Use the `value` attribute to provide an initial value for the rating.
+*
+* ```html
+* <sigvelo-rating
+*   name="food"
+*   label="Food quality"
+*   value="3"
+* ></sigvelo-rating>
+* ```
+*
+* @example Changing the scale
+* Ratings use a scale of 1–5 by default. You can change this by setting the `max` attribute.
+*
+* ```html
+* <sigvelo-rating
+*   name="litter"
+*   label="Cleanliness of litter box area"
+*   max="3"
+*   value="3"
+* ></sigvelo-rating>
+* ```
+*
+* @example Fractional values
+* You can enable fractional values by setting the `step` attribute. For example, `0.5` will allow half-star ratings.
+*
+* ```html
+* <sigvelo-rating
+*   name="stars"
+*   label="Half-stars are fine"
+*   step=".5"
+*   value="2.5"
+* ></sigvelo-rating>
+* ```
+*
+* @example Changing the size
+* Use the `size` attribute to change the rating's size.
+*
+* ```html
+* <sigvelo-rating size="xs" label="Extra small"></sigvelo-rating><br>
+* <sigvelo-rating size="sm" label="Small"></sigvelo-rating><br>
+* <sigvelo-rating size="md" label="Medium"></sigvelo-rating><br>
+* <sigvelo-rating size="lg" label="Large"></sigvelo-rating><br>
+* <sigvelo-rating size="xl" label="Extra large"></sigvelo-rating>
+* ```
+*
+* @example Using custom symbols
+* To customize the symbols shown, use JavaScript to set the `symbolFormatter` property to a function that returns the HTML for each symbol. The function will receive the `value` and `isSelected` arguments that you can use to customize the symbol based on specific values or whether the symbol is in the selected state.
+*
+* ```html
+* <sigvelo-rating
+*   label="Show some love"
+*   id="rating__custom-symbols"
+*   value="3"
+*   style="
+*     --active-color: deeppink;
+*     --inactive-color: gray;
+*   "
+* ></sigvelo-rating>
+*
+* <script>
+*   const rating = document.getElementById('rating__custom-symbols');
+*
+*   rating.symbolFormatter = (value, isSelected) => {
+*     return isSelected ?
+*       `<sigvelo-icon family="filled" name="heart"></sigvelo-icon>` :
+*       `<sigvelo-icon family="outline" name="heart"></sigvelo-icon>`;
+*   }
+* <\/script>
+* ```
+*
+* ```html
+* <sigvelo-rating
+*   label="How satisfied are you?"
+*   id="rating__numbers"
+*   value="3"
+*   style="--active-color: dodgerblue;"
+* ></sigvelo-rating>
+*
+* <script>
+*   const rating = document.getElementById('rating__numbers');
+*
+*   rating.symbolFormatter = (value, isSelected) => {
+*     const family = isSelected ? 'filled' : 'outline';
+*     return `<sigvelo-icon family="${family}" name="square-number-${value}"></sigvelo-icon>`
+*   }
+* <\/script>
+* ```
+*
+* ```html
+* <sigvelo-rating
+*   label="How satisfied are you?"
+*   id="rating__diamonds"
+*   value="3"
+*   style="--active-color: #2bb7d1;"
+* ></sigvelo-rating>
+*
+* <script>
+*   const rating = document.getElementById('rating__diamonds');
+*
+*   rating.symbolFormatter = (value, isSelected) => {
+*     const family = isSelected ? 'filled' : 'outline';
+*     const name = isSelected ? 'diamond' : 'point'
+*     return `<sigvelo-icon family="${family}" name="${name}"></sigvelo-icon>`
+*   }
+* <\/script>
+* ```
+*
+* **Warning:** You should only return trusted HTML from the `symbolFormatter()` function, otherwise you may become vulnerable to XSS exploits.
+*
+* @example Readonly ratings
+* Use the `readonly` attribute to make the rating read-only.
+*
+* ```html
+* <sigvelo-rating label="Read-only" value="4" readonly></sigvelo-rating>
+* ```
+*
+* @example Disabling
+* Use the `disabled` attribute to disable the rating.
+*
+* ```html
+* <sigvelo-rating label="Disabled" value="4" disabled></sigvelo-rating>
+* ```
+*
+* @example Validation
+* The `required` attribute can be applied to enable validation using the Constraint Validation API. This will prevent form submission until a non-zero value is selected.
+*
+*
+* ```html
+* <form action="about:blank" method="get" target="_blank">
+*   <sigvelo-rating name="required" label="Required" required></sigvelo-rating><br>
+*   <sigvelo-button type="submit" color="primary">Submit</sigvelo-button>
+*   <sigvelo-button type="reset">Reset</sigvelo-button>
+* </form>
+* ```
+*
+* @example Using custom validation
+* Use the `setCustomValidity()` method to make the rating invalid and show a custom error message on submit. This will override all other validation parameters. To clear the error, remove the attribute or set it to an empty string.
+*
+* ```html
+* <form action="about:blank" method="get" target="_blank" id="rating__custom-validation">
+*   <sigvelo-rating
+*     name="food"
+*     label="Food quality"
+*     value="3"
+*   ></sigvelo-rating>
+*   <br>
+*   <sigvelo-button type="submit" color="primary">Submit</sigvelo-button>
+* </form>
+*
+* <script type="module">
+*   import { allDefined } from '/dist/sigvelo.js';
+*
+*   await allDefined();
+*
+*   const form = document.getElementById('rating__custom-validation');
+*   const rating = form.querySelector('sigvelo-rating');
+*
+*   rating.setCustomValidity('Not so fast, bubba!');
+* <\/script>
+* ```
+*
+* @example Styling validation
+* You can style valid and invalid ratings using the `:valid` and `:invalid` pseudo classes.
+*
+* ```html
+* <form action="about:blank" method="get" target="_blank" class="rating__validation-pseudo">
+*   <sigvelo-rating
+*     name="food"
+*     label="Food quality"
+*     description="This field is required."
+*     required
+*   ></sigvelo-rating>
+*   <br>
+*   <sigvelo-button type="submit" color="primary">Submit</sigvelo-button>
+*   <sigvelo-button type="reset">Reset</sigvelo-button>
+* </form>
+*
+* <style>
+*   .rating__validation-pseudo {
+*     sigvelo-rating:valid {
+*       outline: solid 2px var(--sigvelo-color-success-border);
+*       outline-offset: .5rem;
+*     }
+*
+*     sigvelo-rating:invalid {
+*       outline: solid 2px var(--sigvelo-color-danger-border);
+*       outline-offset: .5rem;
+*     }
+*   }
+* </style>
+* ```
+*
+* However, these selectors will match even before the user has had a chance to fill out the form. More often than not, you'll want to use the `user-valid` and `user-invalid` custom states instead. This way, validation styles are only shown _after_ the user interacts with the form control or when the form is submitted.
+*
+* ```html
+* <form action="about:blank" method="get" target="_blank" class="rating__validation-custom">
+*   <sigvelo-rating
+*     name="food"
+*     label="Food quality"
+*     description="This field is required."
+*     required
+*   ></sigvelo-rating>
+*   <br>
+*   <sigvelo-button type="submit" color="primary">Submit</sigvelo-button>
+*   <sigvelo-button type="reset">Reset</sigvelo-button>
+* </form>
+*
+* <style>
+*   .rating__validation-custom {
+*     sigvelo-rating:state(user-valid) {
+*       outline: solid 2px var(--sigvelo-color-success-border);
+*       outline-offset: .5rem;
+*     }
+*
+*     sigvelo-rating:state(user-invalid) {
+*       outline: solid 2px var(--sigvelo-color-danger-border);
+*       outline-offset: .5rem;
+*     }
+*   }
+* </style>
+* ```
+*/
+var SigveloRating = class extends SigveloFormControlElement {
+	constructor(..._args) {
+		super(..._args);
+		this.didDragOverOthers = false;
+		this.localize = new Localize(this);
+		this.isInvalid = false;
+		this.hadUserInteraction = false;
+		this.wasSubmitted = false;
+		this.value = 0;
+		this.disabled = false;
+		this.readonly = false;
+		this.size = "md";
+		this.required = false;
+		this.max = 5;
+		this.step = 1;
+		this.symbolFormatter = (_, isSelected) => {
+			return isSelected ? `<sigvelo-icon library="system" name="star" family="filled"></sigvelo-icon>` : `<sigvelo-icon library="system" name="star" family="outline"></sigvelo-icon>`;
+		};
+	}
+	static {
+		this.formAssociated = true;
+	}
+	static {
+		this.observeSlots = true;
+	}
+	static {
+		this.styles = [
+			hostStyles,
+			formControlStyles,
+			rating_styles_default
+		];
+	}
+	get focusableAnchor() {
+		return this.rating;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener("invalid", this.handleHostInvalid);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener("invalid", this.handleHostInvalid);
+	}
+	firstUpdated() {
+		this.draggableRating = new DraggableElement(this.rating, {
+			start: (x) => {
+				this.didDragOverOthers = false;
+				this.valueWhenDraggingStarted = this.value;
+				this.ratingBoundingClientRect = this.rating.getBoundingClientRect();
+				this.setValueFromCoordinates(x);
+			},
+			move: (x) => {
+				this.setValueFromCoordinates(x);
+				if (this.value !== this.valueWhenDraggingStarted) this.didDragOverOthers = true;
+			},
+			stop: () => {
+				if (this.value !== this.valueWhenDraggingStarted) {
+					this.dispatchEvent(new SigveloChangeEvent());
+					this.dispatchEvent(new Event("change", {
+						bubbles: true,
+						composed: true
+					}));
+					this.hadUserInteraction = true;
+				}
+				if (this.value === this.valueWhenDraggingStarted && !this.didDragOverOthers) this.value = 0;
+				this.didDragOverOthers = false;
+				this.valueWhenDraggingStarted = void 0;
+			}
+		});
+	}
+	updated(changedProperties) {
+		this.updateValidity();
+		if (changedProperties.has("value")) {
+			this.value = clamp(this.value, 0, this.max);
+			this.internals.setFormValue(String(this.value));
+		}
+		if (changedProperties.has("max")) this.value = clamp(this.value, 0, this.max);
+		if (changedProperties.has("disabled")) this.customStates.set("disabled", this.disabled);
+		if (changedProperties.has("disabled") || changedProperties.has("readonly")) this.draggableRating.toggle(!(this.disabled || this.readonly));
+		if (this.hadUserInteraction || this.wasSubmitted) {
+			this.customStates.set("user-invalid", this.isInvalid);
+			this.customStates.set("user-valid", !this.isInvalid);
+		} else {
+			this.customStates.set("user-invalid", false);
+			this.customStates.set("user-valid", false);
+		}
+	}
+	/** @internal Called when a containing fieldset is disabled. */
+	formDisabledCallback(isDisabled) {
+		this.disabled = isDisabled;
+	}
+	/** @internal Called when the form is reset. */
+	formResetCallback() {
+		this.value = parseFloat(this.getAttribute("value") ?? "0");
+		this.isInvalid = false;
+		this.hadUserInteraction = false;
+		this.wasSubmitted = false;
+	}
+	/** Clamps a number to min/max while ensuring it's a valid step interval. */
+	clampAndCeilToStep(value) {
+		const stepPrecision = (String(this.step).split(".")[1] || "").replace(/0+$/g, "").length;
+		value = Math.ceil(value / this.step) * this.step;
+		value = clamp(value, 0, this.max);
+		return parseFloat(value.toFixed(stepPrecision));
+	}
+	handleBlur() {
+		this.customStates.set("focused", false);
+		this.dispatchEvent(new SigveloBlurEvent());
+	}
+	handleFocus() {
+		this.customStates.set("focused", true);
+		this.dispatchEvent(new SigveloFocusEvent());
+	}
+	handleHostInvalid() {
+		this.wasSubmitted = true;
+	}
+	handleKeyDown(event) {
+		const isRtl = this.localize.dir() === "rtl";
+		const oldValue = this.value;
+		let newValue = this.value;
+		if (this.disabled || this.readonly) return;
+		if (event.key === "ArrowUp" || event.key === (isRtl ? "ArrowLeft" : "ArrowRight")) {
+			event.preventDefault();
+			newValue = this.clampAndCeilToStep(newValue + this.step);
+		}
+		if (event.key === "ArrowDown" || event.key === (isRtl ? "ArrowRight" : "ArrowLeft")) {
+			event.preventDefault();
+			newValue = this.clampAndCeilToStep(newValue - this.step);
+		}
+		if (event.key === "Home") {
+			event.preventDefault();
+			newValue = 0;
+		}
+		if (event.key === "End") {
+			event.preventDefault();
+			newValue = this.clampAndCeilToStep(this.max);
+		}
+		if (event.key === "PageUp") {
+			event.preventDefault();
+			newValue = this.clampAndCeilToStep(Math.max(newValue + this.max / 10, newValue + this.step));
+		}
+		if (event.key === "PageDown") {
+			event.preventDefault();
+			newValue = this.clampAndCeilToStep(Math.min(newValue - this.max / 10, newValue - this.step));
+		}
+		if (newValue !== oldValue) {
+			if (newValue < 0) newValue = 0;
+			if (newValue > this.max) newValue = this.max;
+			this.value = newValue;
+			this.dispatchEvent(new SigveloInputEvent());
+			this.dispatchEvent(new SigveloChangeEvent());
+			this.dispatchEvent(new InputEvent("input"));
+			this.dispatchEvent(new Event("change", {
+				bubbles: true,
+				composed: true
+			}));
+			this.hadUserInteraction = true;
+		}
+		if (event.key === "Enter" && this.internals.form) {
+			const submitter = [...this.internals.form.elements].find((el) => {
+				return ["button", "input"].includes(el.localName) && el.type === "submit";
+			});
+			this.internals.form.requestSubmit(submitter);
+		}
+	}
+	handleLabelPointerDown(event) {
+		event.preventDefault();
+		if (!this.disabled) this.rating.focus();
+	}
+	setValueFromCoordinates(x) {
+		const isRtl = this.localize.dir() === "rtl";
+		const oldValue = this.value;
+		const { right, left, width } = this.ratingBoundingClientRect;
+		const pointerPosition = x;
+		const ratingCoords = {
+			start: left,
+			end: right,
+			size: width
+		};
+		const percentage = (isRtl ? ratingCoords.end - pointerPosition : pointerPosition - ratingCoords.start) / ratingCoords.size;
+		this.value = this.clampAndCeilToStep(this.max * percentage);
+		if (this.value !== oldValue) {
+			this.dispatchEvent(new SigveloInputEvent());
+			this.dispatchEvent(new InputEvent("input"));
+		}
+	}
+	/** Sets the form control's validity */
+	async updateValidity() {
+		await this.updateComplete;
+		const isValueMissing = this.required && this.value === 0;
+		const hasCustomValidity = this.getCustomValidity().length > 0;
+		const validationMessage = isValueMissing ? VALIDATION_MESSAGE : this.getCustomValidity();
+		const flags = {
+			badInput: false,
+			customError: hasCustomValidity,
+			patternMismatch: false,
+			rangeOverflow: false,
+			rangeUnderflow: false,
+			stepMismatch: false,
+			tooLong: false,
+			tooShort: false,
+			typeMismatch: false,
+			valueMissing: isValueMissing
+		};
+		this.isInvalid = isValueMissing || hasCustomValidity;
+		this.internals.setValidity(flags, validationMessage, this.focusableAnchor);
+	}
+	/** Sets focus to the rating. */
+	focus() {
+		this.rating.focus();
+	}
+	/** Removes focus from the rating. */
+	blur() {
+		this.rating.blur();
+	}
+	/**
+	* Decreases the rating's value by `step`. This is a programmatic change, so `input` and `change` events will not be
+	* emitted when this is called.
+	*/
+	stepDown() {
+		const newValue = this.clampAndCeilToStep(this.value - this.step);
+		this.value = newValue;
+	}
+	/**
+	* Increases the rating's value by `step`. This is a programmatic change, so `input` and `change` events will not be
+	* emitted when this is called.
+	*/
+	stepUp() {
+		const newValue = this.clampAndCeilToStep(this.value + this.step);
+		this.value = newValue;
+	}
+	render() {
+		const hasLabel = this.label || this.slotsWithContent.has("label");
+		const hasDescription = this.description || this.slotsWithContent.has("description");
+		const symbols = [];
+		for (let i = 1; i <= this.max; i += 1) symbols.push([this.symbolFormatter(i, true), this.symbolFormatter(i, false)]);
+		return html`
+      <label
+        id="label"
+        part="label"
+        class=${classMap({ vh: !hasLabel })}
+        for="rating"
+        @pointerdown=${this.handleLabelPointerDown}
+      >
+        <slot name="label">${this.label}</slot>
+      </label>
+
+      <div id="description" part="description" class=${classMap({ vh: !hasDescription })}>
+        <slot name="description">${this.description}</slot>
+      </div>
+
+      <div
+        id="rating"
+        part="rating"
+        class=${classMap({
+			xs: this.size === "xs",
+			sm: this.size === "sm",
+			md: this.size === "md",
+			lg: this.size === "lg",
+			xl: this.size === "xl",
+			disabled: this.disabled,
+			readonly: this.readonly
+		})}
+        role="slider"
+        aria-labelledby="label"
+        aria-describedby="description"
+        aria-disabled=${this.disabled ? "true" : "false"}
+        aria-readonly=${this.readonly ? "true" : "false"}
+        aria-valuemin="0"
+        aria-valuenow=${this.value}
+        aria-valuetext="${this.localize.term("numberOfTotal", this.value, this.max)}"
+        aria-valuemax=${this.max}
+        tabindex=${this.disabled || this.readonly ? "-1" : "0"}
+        @focus=${this.handleFocus}
+        @blur=${this.handleBlur}
+        @keydown=${this.handleKeyDown}
+      >
+        ${symbols.map((symbol, index) => {
+			return html`
+            <span
+              part="symbol"
+              class="symbol"
+              style="--clip-percentage: ${(this.value - index) * 100}%;"
+            >
+              ${unsafeHTML(symbol[0])} ${unsafeHTML(symbol[1])}
+            </span>
+          `;
+		})}
+      </div>
+    `;
+	}
+};
+__decorate([query("#rating")], SigveloRating.prototype, "rating", void 0);
+__decorate([state()], SigveloRating.prototype, "isInvalid", void 0);
+__decorate([state()], SigveloRating.prototype, "hadUserInteraction", void 0);
+__decorate([state()], SigveloRating.prototype, "wasSubmitted", void 0);
+__decorate([property()], SigveloRating.prototype, "label", void 0);
+__decorate([property()], SigveloRating.prototype, "description", void 0);
+__decorate([property({ reflect: true })], SigveloRating.prototype, "name", void 0);
+__decorate([property({ type: Number })], SigveloRating.prototype, "value", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloRating.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloRating.prototype, "readonly", void 0);
+__decorate([property({ reflect: true })], SigveloRating.prototype, "size", void 0);
+__decorate([property()], SigveloRating.prototype, "form", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloRating.prototype, "required", void 0);
+__decorate([property({ type: Number })], SigveloRating.prototype, "max", void 0);
+__decorate([property({ type: Number })], SigveloRating.prototype, "step", void 0);
+__decorate([property({ type: Boolean })], SigveloRating.prototype, "autofocus", void 0);
+__decorate([property({ attribute: false })], SigveloRating.prototype, "symbolFormatter", void 0);
+customElements.define("sigvelo-rating", SigveloRating);
+//#endregion
+export { SigveloRating as t };