igniteui-webcomponents 4.3.1 → 4.4.0

package/components/radio/themes/light/radio.indigo.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/radio/themes/light/radio.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0HvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n  --is-medium: min(\n      clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n      clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n  );\n  --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n  position: relative;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  scrollbar-width: var(--ig-scrollbar-size);\n  scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\n}\n:host *,\n:host *::before,\n:host *::after {\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n  width: var(--ig-scrollbar-size);\n  height: var(--ig-scrollbar-size);\n  background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n  background: var(--ig-scrollbar-thumb-background);\n}\n\n:host([hidden]),\n[hidden] {\n  display: none !important;\n}\n:host {\n  --hover-color: var(--ig-radio-hover-color, transparent);\n  --fill-hover-border-color: var(--ig-radio-fill-hover-border-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --label-color: var(--ig-radio-label-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --empty-color: var(--ig-radio-empty-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n  --fill-color: var(--ig-radio-fill-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --fill-color-hover: var(--ig-radio-fill-color-hover, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --disabled-color: var(--ig-radio-disabled-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n  --disabled-label-color: var(--ig-radio-disabled-label-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n  --error-color: var(--ig-radio-error-color, hsla(var(--ig-error-500), var(--ig-error-a)));\n  --error-color-hover: var(--ig-radio-error-color-hover, hsla(var(--ig-error-200), var(--ig-error-a)));\n  --focus-outline-color: var(--ig-radio-focus-outline-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n  --focus-outline-color-focused: var(--ig-radio-focus-outline-color-focused, hsla(var(--ig-primary-200), var(--ig-primary-a)));\n  font-weight: 600;\n}\n\n[part~=base] {\n  gap: 0.5rem;\n}\n\n[part~=label] {\n  color: var(--label-color);\n}\n\n[part~=control] {\n  border-radius: var(--size);\n  width: var(--size, 1.25rem);\n  height: var(--size, 1.25rem);\n  min-width: var(--size, 1.25rem);\n  -webkit-transition: none;\n  transition: none;\n  background: none;\n}\n[part~=control]::before, [part~=control]::after {\n  border-radius: calc(var(--size) / 2);\n}\n[part~=control]::after {\n  border: 0.125rem solid var(--empty-color);\n}\n\n[part=\"control checked\"]::after {\n  border-color: var(--fill-color);\n}\n[part=\"control checked\"]::before {\n  background: var(--fill-color-hover);\n  border-color: var(--fill-hover-border-color);\n}\n\n[part~=focused] [part=control] {\n  -webkit-box-shadow: 0 0 0 0.1875rem var(--focus-outline-color);\n          box-shadow: 0 0 0 0.1875rem var(--focus-outline-color);\n}\n[part~=focused] [part=\"control checked\"] {\n  -webkit-box-shadow: 0 0 0 0.1875rem var(--focus-outline-color-focused);\n          box-shadow: 0 0 0 0.1875rem var(--focus-outline-color-focused);\n}\n\n:host(:not([disabled])[invalid]) [part~=label] {\n  color: var(--error-color);\n}\n:host(:not([disabled])[invalid]) [part=control]::after {\n  border-color: var(--error-color);\n}\n:host(:not([disabled])[invalid]) [part=\"control checked\"]::after {\n  border-color: var(--error-color);\n}\n:host(:not([disabled])[invalid]) [part=\"control checked\"]::before {\n  background: var(--error-color);\n}\n:host(:not([disabled])[invalid]) [part~=focused] [part~=control],\n:host(:not([disabled])[invalid]) [part~=focused] [part=\"control checked\"] {\n  -webkit-box-shadow: 0 0 0 0.1875rem var(--error-color-hover);\n          box-shadow: 0 0 0 0.1875rem var(--error-color-hover);\n}\n\n:host([disabled]) [part~=label],\n:host(:disabled) [part~=label] {\n  color: var(--disabled-label-color);\n}\n:host([disabled]) [part=control]::after,\n:host(:disabled) [part=control]::after {\n  border-color: var(--disabled-color);\n}\n:host([disabled]) [part=\"control checked\"]::after,\n:host(:disabled) [part=\"control checked\"]::after {\n  border-color: var(--disabled-color);\n}\n:host([disabled]) [part=\"control checked\"]::before,\n:host(:disabled) [part=\"control checked\"]::before {\n  background: var(--disabled-color);\n}`;\n"]}
+{"version":3,"file":"radio.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/radio/themes/light/radio.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgGvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --hover-color: var(--ig-radio-hover-color, transparent);\n  --fill-hover-border-color: var(--ig-radio-fill-hover-border-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --label-color: var(--ig-radio-label-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --empty-color: var(--ig-radio-empty-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n  --fill-color: var(--ig-radio-fill-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --fill-color-hover: var(--ig-radio-fill-color-hover, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --disabled-color: var(--ig-radio-disabled-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n  --disabled-label-color: var(--ig-radio-disabled-label-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n  --error-color: var(--ig-radio-error-color, hsla(var(--ig-error-500), var(--ig-error-a)));\n  --error-color-hover: var(--ig-radio-error-color-hover, hsla(var(--ig-error-200), var(--ig-error-a)));\n  --focus-outline-color: var(--ig-radio-focus-outline-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n  --focus-outline-color-focused: var(--ig-radio-focus-outline-color-focused, hsla(var(--ig-primary-200), var(--ig-primary-a)));\n  font-weight: 600;\n}\n\n[part~=base] {\n  gap: 0.5rem;\n}\n\n[part~=label] {\n  color: var(--label-color);\n}\n\n[part~=control] {\n  border-radius: var(--size);\n  width: var(--size, 1.25rem);\n  height: var(--size, 1.25rem);\n  min-width: var(--size, 1.25rem);\n  -webkit-transition: none;\n  transition: none;\n  background: none;\n}\n[part~=control]::before, [part~=control]::after {\n  border-radius: calc(var(--size) / 2);\n}\n[part~=control]::after {\n  border: 0.125rem solid var(--empty-color);\n}\n\n[part=\"control checked\"]::after {\n  border-color: var(--fill-color);\n}\n[part=\"control checked\"]::before {\n  background: var(--fill-color-hover);\n  border-color: var(--fill-hover-border-color);\n}\n\n[part~=focused] [part=control] {\n  -webkit-box-shadow: 0 0 0 0.1875rem var(--focus-outline-color);\n          box-shadow: 0 0 0 0.1875rem var(--focus-outline-color);\n}\n[part~=focused] [part=\"control checked\"] {\n  -webkit-box-shadow: 0 0 0 0.1875rem var(--focus-outline-color-focused);\n          box-shadow: 0 0 0 0.1875rem var(--focus-outline-color-focused);\n}\n\n:host(:not([disabled])[invalid]) [part~=label],\n:host(:not(:disabled)[invalid]) [part~=label] {\n  color: var(--error-color);\n}\n:host(:not([disabled])[invalid]) [part=control]::after,\n:host(:not(:disabled)[invalid]) [part=control]::after {\n  border-color: var(--error-color);\n}\n:host(:not([disabled])[invalid]) [part=\"control checked\"]::after,\n:host(:not(:disabled)[invalid]) [part=\"control checked\"]::after {\n  border-color: var(--error-color);\n}\n:host(:not([disabled])[invalid]) [part=\"control checked\"]::before,\n:host(:not(:disabled)[invalid]) [part=\"control checked\"]::before {\n  background: var(--error-color);\n}\n:host(:not([disabled])[invalid]) [part~=focused] [part~=control],\n:host(:not([disabled])[invalid]) [part~=focused] [part=\"control checked\"],\n:host(:not(:disabled)[invalid]) [part~=focused] [part~=control],\n:host(:not(:disabled)[invalid]) [part~=focused] [part=\"control checked\"] {\n  -webkit-box-shadow: 0 0 0 0.1875rem var(--error-color-hover);\n          box-shadow: 0 0 0 0.1875rem var(--error-color-hover);\n}\n\n:host([disabled]) [part~=label],\n:host(:disabled) [part~=label] {\n  color: var(--disabled-label-color);\n}\n:host([disabled]) [part=control]::after,\n:host(:disabled) [part=control]::after {\n  border-color: var(--disabled-color);\n}\n:host([disabled]) [part=\"control checked\"]::after,\n:host(:disabled) [part=\"control checked\"]::after {\n  border-color: var(--disabled-color);\n}\n:host([disabled]) [part=\"control checked\"]::before,\n:host(:disabled) [part=\"control checked\"]::before {\n  background: var(--disabled-color);\n}`;\n"]}

package/components/radio/themes/light/radio.material.css.js

@@ -1,37 +1,5 @@
 import { css } from 'lit';
-export const styles = css `:host {
-  --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);
-  --is-medium: min(
-      clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),
-      clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)
-  );
-  --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);
-  position: relative;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  scrollbar-width: var(--ig-scrollbar-size);
-  scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);
-}
-:host *,
-:host *::before,
-:host *::after {
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-}
-:host ::-webkit-scrollbar {
-  width: var(--ig-scrollbar-size);
-  height: var(--ig-scrollbar-size);
-  background: var(--ig-scrollbar-track-background);
-}
-:host ::-webkit-scrollbar-thumb {
-  background: var(--ig-scrollbar-thumb-background);
-}
-
-:host([hidden]),
-[hidden] {
-  display: none !important;
-}
-[part~=ripple] {
+export const styles = css `[part~=ripple] {
   border-radius: var(--size);
   display: block;
   position: absolute;

package/components/radio/themes/light/radio.material.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.material.css.js","sourceRoot":"","sources":["../../../../../src/components/radio/themes/light/radio.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkIvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n  --is-medium: min(\n      clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n      clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n  );\n  --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n  position: relative;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  scrollbar-width: var(--ig-scrollbar-size);\n  scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\n}\n:host *,\n:host *::before,\n:host *::after {\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n  width: var(--ig-scrollbar-size);\n  height: var(--ig-scrollbar-size);\n  background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n  background: var(--ig-scrollbar-thumb-background);\n}\n\n:host([hidden]),\n[hidden] {\n  display: none !important;\n}\n[part~=ripple] {\n  border-radius: var(--size);\n  display: block;\n  position: absolute;\n  top: calc(50% - 1.25rem);\n  width: calc(var(--size) * 2);\n  height: calc(var(--size) * 2);\n  min-width: calc(var(--size) * 2);\n  overflow: hidden;\n  pointer-events: none;\n  -webkit-filter: opacity(1);\n          filter: opacity(1);\n}\n\n:host {\n  --hover-color: var(--ig-radio-hover-color, transparent);\n  --fill-hover-border-color: var(--ig-radio-fill-hover-border-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));\n  --label-color: var(--ig-radio-label-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --empty-color: var(--ig-radio-empty-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));\n  --fill-color: var(--ig-radio-fill-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));\n  --fill-color-hover: var(--ig-radio-fill-color-hover, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));\n  --disabled-color: var(--ig-radio-disabled-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n  --disabled-label-color: var(--ig-radio-disabled-label-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n  --error-color: var(--ig-radio-error-color, hsla(var(--ig-error-500), var(--ig-error-a)));\n  --error-color-hover: var(--ig-radio-error-color-hover, hsla(var(--ig-error-500), var(--ig-error-a)));\n}\n\n[part~=label] {\n  color: var(--label-color);\n}\n\n[part~=base] {\n  gap: 0.125rem;\n}\n[part~=base]:hover [part~=ripple] {\n  background: var(--empty-color);\n  opacity: 0.06;\n}\n[part~=base]:hover [part=\"ripple checked\"] {\n  background: var(--fill-color);\n  opacity: 0.06;\n}\n[part~=base]:focus-within [part=ripple] {\n  background: var(--empty-color);\n  opacity: 0.12;\n}\n[part~=base]:focus-within [part=\"ripple checked\"] {\n  background: var(--fill-color);\n  opacity: 0.12;\n}\n\n[part~=control] {\n  border-radius: var(--size);\n  position: relative;\n}\n[part~=control]::before, [part~=control]::after {\n  border-radius: calc(var(--size) / 2);\n}\n[part~=control]::after {\n  border: calc(var(--size) / 10) solid var(--empty-color);\n}\n\n[part=\"control checked\"]::before {\n  border-color: var(--fill-color);\n  background: var(--fill-color);\n}\n[part=\"control checked\"]::after {\n  border-color: var(--fill-color);\n}\n\n:host(:not([disabled])[invalid]) [part~=label] {\n  color: var(--error-color);\n}\n:host(:not([disabled])[invalid]) [part~=control]::after {\n  border-color: var(--error-color);\n}\n:host(:not([disabled])[invalid]) [part=\"control checked\"]::before {\n  background: var(--error-color);\n}\n:host(:not([disabled])[invalid]) [part~=base]:hover [part~=ripple] {\n  background: var(--error-color);\n}\n:host(:not([disabled])[invalid]) [part~=base]:focus-within [part~=ripple] {\n  background: var(--error-color);\n}\n\n:host([disabled]) [part~=label],\n:host(:disabled) [part~=label] {\n  color: var(--disabled-label-color);\n}\n:host([disabled]) [part~=control]::after,\n:host(:disabled) [part~=control]::after {\n  border-color: var(--disabled-color);\n}\n:host([disabled]) [part=\"control checked\"]::before,\n:host(:disabled) [part=\"control checked\"]::before {\n  background: var(--disabled-color);\n  border-color: var(--disabled-color);\n}`;\n"]}
+{"version":3,"file":"radio.material.css.js","sourceRoot":"","sources":["../../../../../src/components/radio/themes/light/radio.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkGvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`[part~=ripple] {\n  border-radius: var(--size);\n  display: block;\n  position: absolute;\n  top: calc(50% - 1.25rem);\n  width: calc(var(--size) * 2);\n  height: calc(var(--size) * 2);\n  min-width: calc(var(--size) * 2);\n  overflow: hidden;\n  pointer-events: none;\n  -webkit-filter: opacity(1);\n          filter: opacity(1);\n}\n\n:host {\n  --hover-color: var(--ig-radio-hover-color, transparent);\n  --fill-hover-border-color: var(--ig-radio-fill-hover-border-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));\n  --label-color: var(--ig-radio-label-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --empty-color: var(--ig-radio-empty-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));\n  --fill-color: var(--ig-radio-fill-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));\n  --fill-color-hover: var(--ig-radio-fill-color-hover, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));\n  --disabled-color: var(--ig-radio-disabled-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n  --disabled-label-color: var(--ig-radio-disabled-label-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n  --error-color: var(--ig-radio-error-color, hsla(var(--ig-error-500), var(--ig-error-a)));\n  --error-color-hover: var(--ig-radio-error-color-hover, hsla(var(--ig-error-500), var(--ig-error-a)));\n}\n\n[part~=label] {\n  color: var(--label-color);\n}\n\n[part~=base] {\n  gap: 0.125rem;\n}\n[part~=base]:hover [part~=ripple] {\n  background: var(--empty-color);\n  opacity: 0.06;\n}\n[part~=base]:hover [part=\"ripple checked\"] {\n  background: var(--fill-color);\n  opacity: 0.06;\n}\n[part~=base]:focus-within [part=ripple] {\n  background: var(--empty-color);\n  opacity: 0.12;\n}\n[part~=base]:focus-within [part=\"ripple checked\"] {\n  background: var(--fill-color);\n  opacity: 0.12;\n}\n\n[part~=control] {\n  border-radius: var(--size);\n  position: relative;\n}\n[part~=control]::before, [part~=control]::after {\n  border-radius: calc(var(--size) / 2);\n}\n[part~=control]::after {\n  border: calc(var(--size) / 10) solid var(--empty-color);\n}\n\n[part=\"control checked\"]::before {\n  border-color: var(--fill-color);\n  background: var(--fill-color);\n}\n[part=\"control checked\"]::after {\n  border-color: var(--fill-color);\n}\n\n:host(:not([disabled])[invalid]) [part~=label] {\n  color: var(--error-color);\n}\n:host(:not([disabled])[invalid]) [part~=control]::after {\n  border-color: var(--error-color);\n}\n:host(:not([disabled])[invalid]) [part=\"control checked\"]::before {\n  background: var(--error-color);\n}\n:host(:not([disabled])[invalid]) [part~=base]:hover [part~=ripple] {\n  background: var(--error-color);\n}\n:host(:not([disabled])[invalid]) [part~=base]:focus-within [part~=ripple] {\n  background: var(--error-color);\n}\n\n:host([disabled]) [part~=label],\n:host(:disabled) [part~=label] {\n  color: var(--disabled-label-color);\n}\n:host([disabled]) [part~=control]::after,\n:host(:disabled) [part~=control]::after {\n  border-color: var(--disabled-color);\n}\n:host([disabled]) [part=\"control checked\"]::before,\n:host(:disabled) [part=\"control checked\"]::before {\n  background: var(--disabled-color);\n  border-color: var(--disabled-color);\n}`;\n"]}

package/components/radio-group/radio-group.d.ts

@@ -2,15 +2,11 @@ import { LitElement } from 'lit';
 export default class IgcRadioGroupComponent extends LitElement {
     static readonly tagName = "igc-radio-group";
     static styles: import("lit").CSSResult;
-    private radios;
-    constructor();
     /**
      * Alignment of the radio controls inside this group.
      * @attr
      */
     alignment: 'vertical' | 'horizontal';
-    private updateRequiredState;
-    private handleKeydown;
     protected render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/components/radio-group/radio-group.js

@@ -5,9 +5,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { html, LitElement } from 'lit';
-import { property, queryAssignedElements } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { defineComponents } from '../common/definitions/defineComponents.js';
-import { isLTR } from '../common/util.js';
 import IgcRadioComponent from '../radio/radio.js';
 import { styles } from './radio-group.base.css.js';
 import { styles as material } from './radio-group.material.css.js';
@@ -16,65 +15,15 @@ import { themes } from '../../theming/theming-decorator.js';
 defineComponents(IgcRadioComponent);
 let IgcRadioGroupComponent = class IgcRadioGroupComponent extends LitElement {
     constructor() {
-        super();
+        super(...arguments);
         this.alignment = 'vertical';
-        this.handleKeydown = (event) => {
-            const { key } = event;
-            if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) {
-                const checked = this.radios.find((radio) => radio.checked);
-                let index = this.radios.indexOf(checked);
-                const ltr = isLTR(this);
-                switch (key) {
-                    case 'ArrowUp':
-                        index += -1;
-                        break;
-                    case 'ArrowLeft':
-                        index += ltr ? -1 : 1;
-                        break;
-                    case 'ArrowRight':
-                        index += ltr ? 1 : -1;
-                        break;
-                    default:
-                        index += 1;
-                }
-                if (index < 0)
-                    index = this.radios.length - 1;
-                if (index > this.radios.length - 1)
-                    index = 0;
-                this.radios.forEach((radio) => (radio.checked = false));
-                this.radios[index].focus();
-                this.radios[index].checked = true;
-                event.preventDefault();
-            }
-        };
-        this.addEventListener('keydown', this.handleKeydown);
-        this.addEventListener('igcChange', this.updateRequiredState);
-    }
-    updateRequiredState() {
-        const hasRequired = this.radios.some((r) => r.required);
-        if (hasRequired) {
-            this.radios.forEach((r) => (r.required = false));
-            const hasChecked = this.radios.some((r) => r.checked);
-            if (hasChecked) {
-                this.radios.filter((r) => r.checked)[0].required = true;
-            }
-            else {
-                this.radios[0].required = true;
-            }
-        }
     }
     render() {
-        return html `<slot @slotchange=${this.updateRequiredState}></slot>`;
+        return html `<slot></slot>`;
     }
 };
 IgcRadioGroupComponent.tagName = 'igc-radio-group';
 IgcRadioGroupComponent.styles = styles;
-__decorate([
-    queryAssignedElements({
-        flatten: true,
-        selector: 'igc-radio:not([disabled])',
-    })
-], IgcRadioGroupComponent.prototype, "radios", void 0);
 __decorate([
     property({ reflect: true })
 ], IgcRadioGroupComponent.prototype, "alignment", void 0);

package/components/radio-group/radio-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.js","sourceRoot":"","sources":["../../../src/components/radio-group/radio-group.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, queryAssignedElements } from 'lit/decorators.js';\nimport { defineComponents } from '../common/definitions/defineComponents.js';\nimport { isLTR } from '../common/util.js';\nimport IgcRadioComponent from '../radio/radio.js';\nimport { styles } from './radio-group.base.css.js';\nimport { styles as material } from './radio-group.material.css.js';\nimport { styles as fluent } from './radio-group.fluent.css.js';\nimport { themes } from '../../theming/theming-decorator.js';\n\ndefineComponents(IgcRadioComponent);\n\n@themes({ material, fluent })\nexport default class IgcRadioGroupComponent extends LitElement {\n  public static readonly tagName = 'igc-radio-group';\n\n  public static override styles = styles;\n\n  @queryAssignedElements({\n    flatten: true,\n    selector: 'igc-radio:not([disabled])',\n  })\n  private radios!: Array<IgcRadioComponent>;\n\n  constructor() {\n    super();\n    this.addEventListener('keydown', this.handleKeydown);\n    this.addEventListener('igcChange', this.updateRequiredState);\n  }\n\n  /**\n   * Alignment of the radio controls inside this group.\n   * @attr\n   */\n  @property({ reflect: true })\n  public alignment: 'vertical' | 'horizontal' = 'vertical';\n\n  private updateRequiredState() {\n    const hasRequired = this.radios.some((r) => r.required);\n\n    if (hasRequired) {\n      this.radios.forEach((r) => (r.required = false));\n\n      const hasChecked = this.radios.some((r) => r.checked);\n\n      if (hasChecked) {\n        this.radios.filter((r) => r.checked)[0].required = true;\n      } else {\n        this.radios[0].required = true;\n      }\n    }\n  }\n\n  private handleKeydown = (event: KeyboardEvent) => {\n    const { key } = event;\n\n    if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) {\n      const checked = this.radios.find((radio) => radio.checked);\n      let index = this.radios.indexOf(checked!);\n      const ltr = isLTR(this);\n\n      switch (key) {\n        case 'ArrowUp':\n          index += -1;\n          break;\n        case 'ArrowLeft':\n          index += ltr ? -1 : 1;\n          break;\n        case 'ArrowRight':\n          index += ltr ? 1 : -1;\n          break;\n        default:\n          index += 1;\n      }\n\n      if (index < 0) index = this.radios.length - 1;\n      if (index > this.radios.length - 1) index = 0;\n\n      this.radios.forEach((radio) => (radio.checked = false));\n      this.radios[index].focus();\n      this.radios[index].checked = true;\n\n      event.preventDefault();\n    }\n  };\n\n  protected override render() {\n    return html`<slot @slotchange=${this.updateRequiredState}></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-radio-group': IgcRadioGroupComponent;\n  }\n}\n"]}
+{"version":3,"file":"radio-group.js","sourceRoot":"","sources":["../../../src/components/radio-group/radio-group.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,gBAAgB,EAAE,MAAM,2CAA2C,CAAC;AAC7E,OAAO,iBAAiB,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AACnD,OAAO,EAAE,MAAM,IAAI,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAE5D,gBAAgB,CAAC,iBAAiB,CAAC,CAAC;AAGpC,IAAqB,sBAAsB,GAA3C,MAAqB,sBAAuB,SAAQ,UAAU;IAA9D;;QAUS,cAAS,GAA8B,UAAU,CAAC;IAK3D,CAAC;IAHoB,MAAM;QACvB,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AAbsB,8BAAO,GAAG,iBAAiB,AAApB,CAAqB;AAE5B,6BAAM,GAAG,MAAM,AAAT,CAAU;AAOhC;IADN,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yDAC6B;AAVtC,sBAAsB;IAD1C,MAAM,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC;GACR,sBAAsB,CAe1C;eAfoB,sBAAsB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { defineComponents } from '../common/definitions/defineComponents.js';\nimport IgcRadioComponent from '../radio/radio.js';\nimport { styles } from './radio-group.base.css.js';\nimport { styles as material } from './radio-group.material.css.js';\nimport { styles as fluent } from './radio-group.fluent.css.js';\nimport { themes } from '../../theming/theming-decorator.js';\n\ndefineComponents(IgcRadioComponent);\n\n@themes({ material, fluent })\nexport default class IgcRadioGroupComponent extends LitElement {\n  public static readonly tagName = 'igc-radio-group';\n\n  public static override styles = styles;\n\n  /**\n   * Alignment of the radio controls inside this group.\n   * @attr\n   */\n  @property({ reflect: true })\n  public alignment: 'vertical' | 'horizontal' = 'vertical';\n\n  protected override render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-radio-group': IgcRadioGroupComponent;\n  }\n}\n"]}

package/components/rating/dark/rating.fluent.css.d.ts

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

package/components/rating/dark/rating.fluent.css.js

@@ -0,0 +1,3 @@
+import { css } from 'lit';
+export const styles = css ``;
+//# sourceMappingURL=rating.fluent.css.js.map

package/components/rating/dark/rating.fluent.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rating.fluent.css.js","sourceRoot":"","sources":["../../../../src/components/rating/dark/rating.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,EAAE,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css``;\n"]}

package/components/rating/rating-symbol.base.css.js

@@ -92,7 +92,7 @@ export const styles = css `:host {
 }
 
 ::slotted(igc-icon) {
-  --size: var(--symbol-size);
+  --size: var(--symbol-size) !important;
 }
 
 slot:not([name])::slotted(:not(igc-icon)) {

package/components/rating/rating-symbol.base.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"rating-symbol.base.css.js","sourceRoot":"","sources":["../../../src/components/rating/rating-symbol.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwGvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n  --is-medium: min(\n      clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n      clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n  );\n  --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n  position: relative;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  scrollbar-width: var(--ig-scrollbar-size);\n  scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\n}\n:host *,\n:host *::before,\n:host *::after {\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n  width: var(--ig-scrollbar-size);\n  height: var(--ig-scrollbar-size);\n  background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n  background: var(--ig-scrollbar-thumb-background);\n}\n\n:host([hidden]),\n[hidden] {\n  display: none !important;\n}\n:host {\n  --symbol-size: max(var(--is-large, 1) * max(2.25rem, -1 * 2.25rem), var(--is-medium, 1) * max(1.5rem, -1 * 1.5rem), var(--is-small, 1) * max(1.125rem, -1 * 1.125rem));\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  width: var(--symbol-size);\n  height: var(--symbol-size);\n}\n\n[part~=symbol] {\n  position: absolute;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  color: inherit;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n  width: var(--symbol-size);\n  height: var(--symbol-size);\n  min-width: var(--symbol-size);\n  min-height: var(--symbol-size);\n  font-size: var(--symbol-size);\n  font-family: sans-serif;\n  line-height: 100%;\n  letter-spacing: 0;\n}\n[part~=symbol] igc-icon {\n  --size: var(--symbol-size);\n}\n\n[part=\"symbol full\"] {\n  color: var(--symbol-full-color);\n}\n\n[part=\"symbol empty\"] {\n  color: var(--symbol-empty-color);\n}\n\n::slotted(*) {\n  display: -webkit-inline-box;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n}\n\n::slotted(igc-icon) {\n  --size: var(--symbol-size);\n}\n\nslot:not([name])::slotted(:not(igc-icon)) {\n  -webkit-filter: var(--symbol-full-filter, grayscale(0));\n          filter: var(--symbol-full-filter, grayscale(0));\n}\n\n[name=empty]::slotted(:not(igc-icon)) {\n  -webkit-filter: var(--symbol-empty-filter, grayscale(1));\n          filter: var(--symbol-empty-filter, grayscale(1));\n}`;\n"]}
+{"version":3,"file":"rating-symbol.base.css.js","sourceRoot":"","sources":["../../../src/components/rating/rating-symbol.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwGvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n  --is-medium: min(\n      clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n      clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n  );\n  --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n  position: relative;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  scrollbar-width: var(--ig-scrollbar-size);\n  scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\n}\n:host *,\n:host *::before,\n:host *::after {\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n  width: var(--ig-scrollbar-size);\n  height: var(--ig-scrollbar-size);\n  background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n  background: var(--ig-scrollbar-thumb-background);\n}\n\n:host([hidden]),\n[hidden] {\n  display: none !important;\n}\n:host {\n  --symbol-size: max(var(--is-large, 1) * max(2.25rem, -1 * 2.25rem), var(--is-medium, 1) * max(1.5rem, -1 * 1.5rem), var(--is-small, 1) * max(1.125rem, -1 * 1.125rem));\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  width: var(--symbol-size);\n  height: var(--symbol-size);\n}\n\n[part~=symbol] {\n  position: absolute;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  color: inherit;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n  width: var(--symbol-size);\n  height: var(--symbol-size);\n  min-width: var(--symbol-size);\n  min-height: var(--symbol-size);\n  font-size: var(--symbol-size);\n  font-family: sans-serif;\n  line-height: 100%;\n  letter-spacing: 0;\n}\n[part~=symbol] igc-icon {\n  --size: var(--symbol-size);\n}\n\n[part=\"symbol full\"] {\n  color: var(--symbol-full-color);\n}\n\n[part=\"symbol empty\"] {\n  color: var(--symbol-empty-color);\n}\n\n::slotted(*) {\n  display: -webkit-inline-box;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n}\n\n::slotted(igc-icon) {\n  --size: var(--symbol-size) !important;\n}\n\nslot:not([name])::slotted(:not(igc-icon)) {\n  -webkit-filter: var(--symbol-full-filter, grayscale(0));\n          filter: var(--symbol-full-filter, grayscale(0));\n}\n\n[name=empty]::slotted(:not(igc-icon)) {\n  -webkit-filter: var(--symbol-empty-filter, grayscale(1));\n          filter: var(--symbol-empty-filter, grayscale(1));\n}`;\n"]}

package/components/rating/rating.base.css.js

@@ -126,21 +126,25 @@ export const styles = css `:host {
   margin: 0;
 }
 
-:host(:not([disabled], [readonly])) [part~=symbols] {
+:host(:not(:disabled, [disabled], [readonly])) [part~=symbols] {
   cursor: pointer;
 }
 
-:host([disabled]) {
+:host([disabled]),
+:host(:disabled) {
   --symbol-full-color: hsla(var(--ig-warn-200), var(--ig-warn-a));
   --symbol-empty-color: hsla(var(--ig-gray-400), var(--ig-gray-a));
   --symbol-full-filter: grayscale(50%);
   --symbol-empty-filter: grayscale(100%) opacity(50%);
 }
 :host([disabled]) [part~=value-label],
-:host([disabled]) [part~=label] {
+:host([disabled]) [part~=label],
+:host(:disabled) [part~=value-label],
+:host(:disabled) [part~=label] {
   color: hsla(var(--ig-gray-400), var(--ig-gray-a));
 }
-:host([disabled]) [part~=symbols] {
+:host([disabled]) [part~=symbols],
+:host(:disabled) [part~=symbols] {
   cursor: initial;
 }`;
 //# sourceMappingURL=rating.base.css.js.map

package/components/rating/rating.base.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"rating.base.css.js","sourceRoot":"","sources":["../../../src/components/rating/rating.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+IvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n  --is-medium: min(\n      clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n      clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n  );\n  --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n  position: relative;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  scrollbar-width: var(--ig-scrollbar-size);\n  scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\n}\n:host *,\n:host *::before,\n:host *::after {\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n  width: var(--ig-scrollbar-size);\n  height: var(--ig-scrollbar-size);\n  background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n  background: var(--ig-scrollbar-thumb-background);\n}\n\n:host([hidden]),\n[hidden] {\n  display: none !important;\n}\n:host {\n  --symbol-full-color: hsla(var(--ig-warn-500), var(--ig-warn-a));\n  --symbol-empty-color: hsla(var(--ig-gray-600), var(--ig-gray-a));\n  display: -webkit-inline-box;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  font-family: var(--ig-font-family);\n  -webkit-box-align: start;\n      -ms-flex-align: start;\n          align-items: flex-start;\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: normal;\n      -ms-flex-direction: column;\n          flex-direction: column;\n  gap: 0.25rem;\n}\n\n:host([size=large]) {\n  --component-size: var(--ig-size, var(--ig-size-large));\n}\n\n:host([size=medium]) {\n  --component-size: var(--ig-size, var(--ig-size-medium));\n}\n\n:host([size=small]) {\n  --component-size: var(--ig-size, var(--ig-size-small));\n}\n\n[part=base] {\n  position: relative;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n  gap: 0.25rem;\n}\n\n[part~=symbols] {\n  position: relative;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  padding: 0.125rem;\n  gap: 0.125rem;\n  inset-inline-start: 0;\n}\n\n[part~=value-label] {\n  font-family: var(--ig-subtitle-1-font-family, var(--ig-font-family));\n  font-size: var(--ig-subtitle-1-font-size);\n  font-weight: var(--ig-subtitle-1-font-weight);\n  font-style: var(--ig-subtitle-1-font-style);\n  line-height: var(--ig-subtitle-1-line-height);\n  letter-spacing: var(--ig-subtitle-1-letter-spacing);\n  text-transform: var(--ig-subtitle-1-text-transform);\n  margin-top: var(--ig-subtitle-1-margin-top);\n  margin-bottom: var(--ig-subtitle-1-margin-bottom);\n  color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n}\n\n[part~=label] {\n  font-family: var(--ig-caption-font-family, var(--ig-font-family));\n  font-size: var(--ig-caption-font-size);\n  font-weight: var(--ig-caption-font-weight);\n  font-style: var(--ig-caption-font-style);\n  line-height: var(--ig-caption-line-height);\n  letter-spacing: var(--ig-caption-letter-spacing);\n  text-transform: var(--ig-caption-text-transform);\n  margin-top: var(--ig-caption-margin-top);\n  margin-bottom: var(--ig-caption-margin-bottom);\n  color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n  -webkit-padding-start: 0.25rem;\n          padding-inline-start: 0.25rem;\n  height: auto;\n  width: auto;\n  min-height: 0;\n  min-width: 0;\n  margin: 0;\n}\n\n:host(:not([disabled], [readonly])) [part~=symbols] {\n  cursor: pointer;\n}\n\n:host([disabled]) {\n  --symbol-full-color: hsla(var(--ig-warn-200), var(--ig-warn-a));\n  --symbol-empty-color: hsla(var(--ig-gray-400), var(--ig-gray-a));\n  --symbol-full-filter: grayscale(50%);\n  --symbol-empty-filter: grayscale(100%) opacity(50%);\n}\n:host([disabled]) [part~=value-label],\n:host([disabled]) [part~=label] {\n  color: hsla(var(--ig-gray-400), var(--ig-gray-a));\n}\n:host([disabled]) [part~=symbols] {\n  cursor: initial;\n}`;\n"]}
+{"version":3,"file":"rating.base.css.js","sourceRoot":"","sources":["../../../src/components/rating/rating.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmJvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n  --is-medium: min(\n      clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n      clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n  );\n  --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n  position: relative;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  scrollbar-width: var(--ig-scrollbar-size);\n  scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\n}\n:host *,\n:host *::before,\n:host *::after {\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n  width: var(--ig-scrollbar-size);\n  height: var(--ig-scrollbar-size);\n  background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n  background: var(--ig-scrollbar-thumb-background);\n}\n\n:host([hidden]),\n[hidden] {\n  display: none !important;\n}\n:host {\n  --symbol-full-color: hsla(var(--ig-warn-500), var(--ig-warn-a));\n  --symbol-empty-color: hsla(var(--ig-gray-600), var(--ig-gray-a));\n  display: -webkit-inline-box;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  font-family: var(--ig-font-family);\n  -webkit-box-align: start;\n      -ms-flex-align: start;\n          align-items: flex-start;\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: normal;\n      -ms-flex-direction: column;\n          flex-direction: column;\n  gap: 0.25rem;\n}\n\n:host([size=large]) {\n  --component-size: var(--ig-size, var(--ig-size-large));\n}\n\n:host([size=medium]) {\n  --component-size: var(--ig-size, var(--ig-size-medium));\n}\n\n:host([size=small]) {\n  --component-size: var(--ig-size, var(--ig-size-small));\n}\n\n[part=base] {\n  position: relative;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n  gap: 0.25rem;\n}\n\n[part~=symbols] {\n  position: relative;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  padding: 0.125rem;\n  gap: 0.125rem;\n  inset-inline-start: 0;\n}\n\n[part~=value-label] {\n  font-family: var(--ig-subtitle-1-font-family, var(--ig-font-family));\n  font-size: var(--ig-subtitle-1-font-size);\n  font-weight: var(--ig-subtitle-1-font-weight);\n  font-style: var(--ig-subtitle-1-font-style);\n  line-height: var(--ig-subtitle-1-line-height);\n  letter-spacing: var(--ig-subtitle-1-letter-spacing);\n  text-transform: var(--ig-subtitle-1-text-transform);\n  margin-top: var(--ig-subtitle-1-margin-top);\n  margin-bottom: var(--ig-subtitle-1-margin-bottom);\n  color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n}\n\n[part~=label] {\n  font-family: var(--ig-caption-font-family, var(--ig-font-family));\n  font-size: var(--ig-caption-font-size);\n  font-weight: var(--ig-caption-font-weight);\n  font-style: var(--ig-caption-font-style);\n  line-height: var(--ig-caption-line-height);\n  letter-spacing: var(--ig-caption-letter-spacing);\n  text-transform: var(--ig-caption-text-transform);\n  margin-top: var(--ig-caption-margin-top);\n  margin-bottom: var(--ig-caption-margin-bottom);\n  color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n  -webkit-padding-start: 0.25rem;\n          padding-inline-start: 0.25rem;\n  height: auto;\n  width: auto;\n  min-height: 0;\n  min-width: 0;\n  margin: 0;\n}\n\n:host(:not(:disabled, [disabled], [readonly])) [part~=symbols] {\n  cursor: pointer;\n}\n\n:host([disabled]),\n:host(:disabled) {\n  --symbol-full-color: hsla(var(--ig-warn-200), var(--ig-warn-a));\n  --symbol-empty-color: hsla(var(--ig-gray-400), var(--ig-gray-a));\n  --symbol-full-filter: grayscale(50%);\n  --symbol-empty-filter: grayscale(100%) opacity(50%);\n}\n:host([disabled]) [part~=value-label],\n:host([disabled]) [part~=label],\n:host(:disabled) [part~=value-label],\n:host(:disabled) [part~=label] {\n  color: hsla(var(--ig-gray-400), var(--ig-gray-a));\n}\n:host([disabled]) [part~=symbols],\n:host(:disabled) [part~=symbols] {\n  cursor: initial;\n}`;\n"]}

package/components/rating/rating.d.ts

@@ -5,7 +5,7 @@ export interface IgcRatingEventMap {
     igcChange: CustomEvent<number>;
     igcHover: CustomEvent<number>;
 }
-declare const IgcRatingComponent_base: Constructor<import("../common/mixins/sizable.js").SizableInterface> & import("../common/mixins/constructor.js").AbstractConstructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcRatingEventMap>> & Constructor<LitElement>;
+declare const IgcRatingComponent_base: Constructor<import("../common/mixins/form-associated.js").FormAssociatedElementInterface> & Constructor<import("../common/mixins/sizable.js").SizableInterface> & import("../common/mixins/constructor.js").AbstractConstructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcRatingEventMap>> & Constructor<LitElement>;
 /**
  * Rating provides insight regarding others' opinions and experiences,
  * and can allow the user to submit a rating of their own
@@ -55,11 +55,6 @@ export default class IgcRatingComponent extends IgcRatingComponent_base {
      * @attr
      */
     step: number;
-    /**
-     * The name attribute of the control
-     * @attr
-     */
-    name: string;
     /**
      * The label of the control.
      * @attr
@@ -79,20 +74,24 @@ export default class IgcRatingComponent extends IgcRatingComponent_base {
      */
     value: number;
     /**
-     * Sets the disabled state of the component
+     * Sets hover preview behavior for the component
      * @attr
      */
-    disabled: boolean;
+    hoverPreview: boolean;
     /**
-     * Sets hover preview behavior for the component
+     * Makes the control a readonly field.
      * @attr
      */
-    hoverPreview: boolean;
+    readOnly: boolean;
     /**
      * Sets the readonly state of the component
      * @attr
+     *
+     * @deprecated - since v4.4.0
+     * Use the `readOnly` property instead.
      */
-    readonly: boolean;
+    get readonly(): boolean;
+    set readonly(value: boolean);
     /**
      * Toggles single selection visual mode.
      * @attr

package/components/rating/rating.fluent.css.js

@@ -1,5 +1,10 @@
 import { css } from 'lit';
-export const styles = css `[part=base],
+export const styles = css `:host {
+  --symbol-full-color: hsla(var(--ig-warn-900), var(--ig-warn-a));
+  --symbol-empty-color: hsla(var(--ig-gray-700), var(--ig-gray-a));
+}
+
+[part=base],
 :host {
   gap: 0.375rem;
 }
@@ -30,14 +35,15 @@ export const styles = css `[part=base],
   color: hsla(var(--ig-gray-900), var(--ig-gray-a));
 }
 
-:host([disabled]) [part~=symbols-wrapper] {
-  color: hsla(var(--ig-gray-200), var(--ig-gray-a));
+:host([disabled]),
+:host(:disabled) {
+  --symbol-full-color: hsla(var(--ig-warn-100), var(--ig-warn-a));
+  --symbol-empty-color: hsla(var(--ig-warn-100), var(--ig-warn-a));
 }
 :host([disabled]) [part~=value-label],
-:host([disabled]) [part~=label] {
+:host([disabled]) [part~=label],
+:host(:disabled) [part~=value-label],
+:host(:disabled) [part~=label] {
   color: hsla(var(--ig-gray-400), var(--ig-gray-a));
-}
-:host([disabled]) [part="symbols-wrapper selected"] {
-  color: hsla(var(--ig-gray-500), var(--ig-gray-a));
 }`;
 //# sourceMappingURL=rating.fluent.css.js.map

package/components/rating/rating.fluent.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"rating.fluent.css.js","sourceRoot":"","sources":["../../../src/components/rating/rating.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwCvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`[part=base],\n:host {\n  gap: 0.375rem;\n}\n\n[part~=label] {\n  font-family: var(--ig-subtitle-2-font-family, var(--ig-font-family));\n  font-size: var(--ig-subtitle-2-font-size);\n  font-weight: var(--ig-subtitle-2-font-weight);\n  font-style: var(--ig-subtitle-2-font-style);\n  line-height: var(--ig-subtitle-2-line-height);\n  letter-spacing: var(--ig-subtitle-2-letter-spacing);\n  text-transform: var(--ig-subtitle-2-text-transform);\n  margin-top: var(--ig-subtitle-2-margin-top);\n  margin-bottom: var(--ig-subtitle-2-margin-bottom);\n  color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n}\n\n[part~=value-label] {\n  font-family: var(--ig-body-2-font-family, var(--ig-font-family));\n  font-size: var(--ig-body-2-font-size);\n  font-weight: var(--ig-body-2-font-weight);\n  font-style: var(--ig-body-2-font-style);\n  line-height: var(--ig-body-2-line-height);\n  letter-spacing: var(--ig-body-2-letter-spacing);\n  text-transform: var(--ig-body-2-text-transform);\n  margin-top: var(--ig-body-2-margin-top);\n  margin-bottom: var(--ig-body-2-margin-bottom);\n  color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n}\n\n:host([disabled]) [part~=symbols-wrapper] {\n  color: hsla(var(--ig-gray-200), var(--ig-gray-a));\n}\n:host([disabled]) [part~=value-label],\n:host([disabled]) [part~=label] {\n  color: hsla(var(--ig-gray-400), var(--ig-gray-a));\n}\n:host([disabled]) [part=\"symbols-wrapper selected\"] {\n  color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n}`;\n"]}
+{"version":3,"file":"rating.fluent.css.js","sourceRoot":"","sources":["../../../src/components/rating/rating.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8CvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --symbol-full-color: hsla(var(--ig-warn-900), var(--ig-warn-a));\n  --symbol-empty-color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n}\n\n[part=base],\n:host {\n  gap: 0.375rem;\n}\n\n[part~=label] {\n  font-family: var(--ig-subtitle-2-font-family, var(--ig-font-family));\n  font-size: var(--ig-subtitle-2-font-size);\n  font-weight: var(--ig-subtitle-2-font-weight);\n  font-style: var(--ig-subtitle-2-font-style);\n  line-height: var(--ig-subtitle-2-line-height);\n  letter-spacing: var(--ig-subtitle-2-letter-spacing);\n  text-transform: var(--ig-subtitle-2-text-transform);\n  margin-top: var(--ig-subtitle-2-margin-top);\n  margin-bottom: var(--ig-subtitle-2-margin-bottom);\n  color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n}\n\n[part~=value-label] {\n  font-family: var(--ig-body-2-font-family, var(--ig-font-family));\n  font-size: var(--ig-body-2-font-size);\n  font-weight: var(--ig-body-2-font-weight);\n  font-style: var(--ig-body-2-font-style);\n  line-height: var(--ig-body-2-line-height);\n  letter-spacing: var(--ig-body-2-letter-spacing);\n  text-transform: var(--ig-body-2-text-transform);\n  margin-top: var(--ig-body-2-margin-top);\n  margin-bottom: var(--ig-body-2-margin-bottom);\n  color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n}\n\n:host([disabled]),\n:host(:disabled) {\n  --symbol-full-color: hsla(var(--ig-warn-100), var(--ig-warn-a));\n  --symbol-empty-color: hsla(var(--ig-warn-100), var(--ig-warn-a));\n}\n:host([disabled]) [part~=value-label],\n:host([disabled]) [part~=label],\n:host(:disabled) [part~=value-label],\n:host(:disabled) [part~=label] {\n  color: hsla(var(--ig-gray-400), var(--ig-gray-a));\n}`;\n"]}

package/components/rating/rating.js

@@ -13,7 +13,7 @@ import { themes } from '../../theming/theming-decorator.js';
 import { watch } from '../common/decorators/watch.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
 import { SizableMixin } from '../common/mixins/sizable.js';
-import { clamp, isLTR } from '../common/util.js';
+import { clamp, format, isLTR } from '../common/util.js';
 import { styles } from './rating.base.css.js';
 import { styles as bootstrap } from './rating.bootstrap.css.js';
 import { styles as fluent } from './rating.fluent.css.js';
@@ -21,8 +21,9 @@ import { styles as indigo } from './rating.indigo.css.js';
 import { defineComponents } from '../common/definitions/defineComponents.js';
 import IgcRatingSymbolComponent from './rating-symbol.js';
 import IgcIconComponent from '../icon/icon.js';
+import { FormAssociatedMixin } from '../common/mixins/form-associated.js';
 defineComponents(IgcRatingSymbolComponent, IgcIconComponent);
-let IgcRatingComponent = class IgcRatingComponent extends SizableMixin(EventEmitterMixin(LitElement)) {
+let IgcRatingComponent = class IgcRatingComponent extends FormAssociatedMixin(SizableMixin(EventEmitterMixin(LitElement))) {
     get isInteractive() {
         return !(this.readonly || this.disabled);
     }
@@ -32,11 +33,15 @@ let IgcRatingComponent = class IgcRatingComponent extends SizableMixin(EventEmit
     get valueText() {
         const value = this.round(this.value);
         return this.valueFormat
-            ? this.valueFormat
-                .replace(/\{0\}/gm, `${value}`)
-                .replace(/\{1\}/gm, `${this.max}`)
+            ? format(this.valueFormat, `${value}`, `${this.max}`)
             : `${value} of ${this.max}`;
     }
+    get readonly() {
+        return this.readOnly;
+    }
+    set readonly(value) {
+        this.readOnly = value;
+    }
     handleMaxChange() {
         this.hasProjectedSymbols
             ? (this.max = this.ratingSymbols.length)
@@ -46,7 +51,10 @@ let IgcRatingComponent = class IgcRatingComponent extends SizableMixin(EventEmit
         }
     }
     handleValueChange() {
-        this.value = clamp(this.value, 0, this.max);
+        this.value = clamp(isNaN(this.value) ? 0 : this.value, 0, this.max);
+        this.setFormValue(`${this.value}`, `${this.value}`);
+        this.updateValidity();
+        this.setInvalidState();
     }
     handlePrecisionChange() {
         this.step = !this.single ? clamp(this.step, 0.001, 1) : 1;
@@ -65,9 +73,8 @@ let IgcRatingComponent = class IgcRatingComponent extends SizableMixin(EventEmit
         this.max = 5;
         this.step = 1;
         this.value = 0;
-        this.disabled = false;
         this.hoverPreview = false;
-        this.readonly = false;
+        this.readOnly = false;
         this.single = false;
         this.addEventListener('keydown', this.handleKeyDown);
     }
@@ -273,9 +280,6 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], IgcRatingComponent.prototype, "step", void 0);
-__decorate([
-    property()
-], IgcRatingComponent.prototype, "name", void 0);
 __decorate([
     property()
 ], IgcRatingComponent.prototype, "label", void 0);
@@ -285,15 +289,15 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], IgcRatingComponent.prototype, "value", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], IgcRatingComponent.prototype, "disabled", void 0);
 __decorate([
     property({ type: Boolean, reflect: true, attribute: 'hover-preview' })
 ], IgcRatingComponent.prototype, "hoverPreview", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
-], IgcRatingComponent.prototype, "readonly", void 0);
+], IgcRatingComponent.prototype, "readOnly", void 0);
+__decorate([
+    property({ attribute: false })
+], IgcRatingComponent.prototype, "readonly", null);
 __decorate([
     property({ type: Boolean })
 ], IgcRatingComponent.prototype, "single", void 0);

package/components/rating/rating.js.map

@@ -1 +1 @@
-{"version":3,"file":"rating.js","sourceRoot":"","sources":["../../../src/components/rating/rating.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, query, queryAssignedNodes, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { guard } from 'lit/directives/guard.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { watch } from '../common/decorators/watch.js';\nimport { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { SizableMixin } from '../common/mixins/sizable.js';\nimport { clamp, isLTR } from '../common/util.js';\nimport { styles } from './rating.base.css.js';\nimport { styles as bootstrap } from './rating.bootstrap.css.js';\nimport { styles as fluent } from './rating.fluent.css.js';\nimport { styles as indigo } from './rating.indigo.css.js';\n\nimport { defineComponents } from '../common/definitions/defineComponents.js';\nimport IgcRatingSymbolComponent from './rating-symbol.js';\nimport IgcIconComponent from '../icon/icon.js';\n\ndefineComponents(IgcRatingSymbolComponent, IgcIconComponent);\n\nexport interface IgcRatingEventMap {\n  igcChange: CustomEvent<number>;\n  igcHover: CustomEvent<number>;\n}\n\n/**\n * Rating provides insight regarding others' opinions and experiences,\n * and can allow the user to submit a rating of their own\n *\n * @element igc-rating\n *\n * @fires igcChange - Emitted when the value of the control changes.\n * @fires igcHover - Emitted when hover is enabled and the user mouses over a symbol of the rating.\n *\n * @csspart base - The main wrapper which holds all of the rating elements.\n * @csspart label - The label part.\n * @csspart value-label - The value label part.\n * @csspart symbols - A wrapper for all rating symbols.\n * @csspart symbol - The part of the encapsulated default symbol.\n * @csspart full - The part of the encapsulated full symbols.\n * @csspart empty - The part of the encapsulated empty symbols.\n *\n * @cssproperty --symbol-size - The size of the symbols.\n * @cssproperty --symbol-full-color - The color of the filled symbol.\n * @cssproperty --symbol-empty-color - The color of the empty symbol.\n * @cssproperty --symbol-full-filter - The filter(s) used for the filled symbol.\n * @cssproperty --symbol-empty-filter - The filter(s) used for the empty symbol.\n */\n@themes({ fluent, bootstrap, indigo })\nexport default class IgcRatingComponent extends SizableMixin(\n  EventEmitterMixin<IgcRatingEventMap, Constructor<LitElement>>(LitElement)\n) {\n  public static readonly tagName = 'igc-rating';\n\n  public static styles = [styles];\n\n  protected ratingSymbols: Array<IgcRatingSymbolComponent> = [];\n\n  @query('[part=\"symbols\"]', true)\n  protected container!: HTMLElement;\n\n  @queryAssignedNodes({ slot: 'value-label', flatten: true })\n  protected valueLabel!: Array<Node>;\n\n  @state()\n  protected hoverValue = -1;\n\n  @state()\n  protected hoverState = false;\n\n  protected get isInteractive() {\n    return !(this.readonly || this.disabled);\n  }\n\n  protected get hasProjectedSymbols() {\n    return this.ratingSymbols.length > 0;\n  }\n\n  protected get valueText() {\n    // Skip IEEE 754 representation for screen readers\n    const value = this.round(this.value);\n\n    return this.valueFormat\n      ? this.valueFormat\n          .replace(/\\{0\\}/gm, `${value}`)\n          .replace(/\\{1\\}/gm, `${this.max}`)\n      : `${value} of ${this.max}`;\n  }\n\n  /**\n   * The maximum value for the rating.\n   *\n   * If there are projected symbols, the maximum value will be resolved\n   * based on the number of symbols.\n   * @attr\n   */\n  @property({ type: Number })\n  public max = 5;\n\n  /**\n   * The minimum value change allowed.\n   *\n   * Valid values are in the interval between 0 and 1 inclusive.\n   * @attr\n   */\n  @property({ type: Number })\n  public step = 1;\n\n  /**\n   * The name attribute of the control\n   * @attr\n   */\n  @property()\n  public name!: string;\n\n  /**\n   * The label of the control.\n   * @attr\n   */\n  @property()\n  public label!: string;\n\n  /**\n   * A format string which sets aria-valuetext. Instances of '{0}' will be replaced\n   * with the current value of the control and instances of '{1}' with the maximum value for the control.\n   *\n   * Important for screen-readers and useful for localization.\n   * @attr value-format\n   */\n  @property({ attribute: 'value-format' })\n  public valueFormat!: string;\n\n  /**\n   * The current value of the component\n   * @attr\n   */\n  @property({ type: Number })\n  public value = 0;\n\n  /**\n   * Sets the disabled state of the component\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public disabled = false;\n\n  /**\n   * Sets hover preview behavior for the component\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'hover-preview' })\n  public hoverPreview = false;\n\n  /**\n   * Sets the readonly state of the component\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public readonly = false;\n\n  /**\n   * Toggles single selection visual mode.\n   * @attr\n   */\n  @property({ type: Boolean })\n  public single = false;\n\n  @watch('max')\n  protected handleMaxChange() {\n    this.hasProjectedSymbols\n      ? (this.max = this.ratingSymbols.length)\n      : (this.max = Math.max(0, this.max));\n    if (this.max < this.value) {\n      this.value = this.max;\n    }\n  }\n\n  @watch('value')\n  protected handleValueChange() {\n    this.value = clamp(this.value, 0, this.max);\n  }\n\n  @watch('step')\n  protected handlePrecisionChange() {\n    this.step = !this.single ? clamp(this.step, 0.001, 1) : 1;\n  }\n\n  @watch('single')\n  protected handleSelectionChange() {\n    if (this.single) {\n      this.step = 1;\n      this.value = Math.ceil(this.value);\n    }\n  }\n\n  constructor() {\n    super();\n    this.addEventListener('keydown', this.handleKeyDown);\n  }\n\n  protected handleClick({ clientX }: MouseEvent) {\n    if (!this.isInteractive) {\n      return;\n    }\n\n    const value = this.calcNewValue(clientX);\n    this.value === value ? (this.value = 0) : (this.value = value);\n    this.emitEvent('igcChange', { detail: this.value });\n  }\n\n  protected handleMouseMove({ clientX }: MouseEvent) {\n    if (!this.isInteractive) {\n      return;\n    }\n\n    const value = this.calcNewValue(clientX);\n\n    if (this.hoverValue !== value) {\n      // Since mousemove spams a lot, only emit on a value change\n      this.hoverValue = value;\n      this.emitEvent('igcHover', { detail: this.hoverValue });\n    }\n  }\n\n  protected handleMouseEnter() {\n    if (this.isInteractive) {\n      this.hoverState = true;\n    }\n  }\n\n  protected handleMouseLeave() {\n    if (this.isInteractive) {\n      this.hoverState = false;\n    }\n  }\n\n  protected handleKeyDown({ key }: KeyboardEvent) {\n    if (!this.isInteractive) {\n      return;\n    }\n\n    let result = this.value;\n    const ltr = isLTR(this);\n\n    switch (key) {\n      case 'ArrowUp':\n      case 'ArrowRight':\n        result += ltr ? this.step : -this.step;\n        break;\n      case 'ArrowDown':\n      case 'ArrowLeft':\n        result -= ltr ? this.step : -this.step;\n        break;\n      case 'Home':\n        result = this.step;\n        break;\n      case 'End':\n        result = this.max;\n        break;\n      default:\n        return;\n    }\n\n    // Verify new value is in bounds and emit\n    this.value = clamp(result, 0, this.max);\n\n    if (result === this.value) {\n      this.emitEvent('igcChange', { detail: this.value });\n    }\n  }\n\n  protected handleSlotChange(event: Event) {\n    const slot = event.target as HTMLSlotElement;\n\n    this.ratingSymbols = slot\n      .assignedElements()\n      .filter(\n        (el) => el instanceof IgcRatingSymbolComponent\n      ) as IgcRatingSymbolComponent[];\n\n    if (this.hasProjectedSymbols) {\n      this.max = this.ratingSymbols.length;\n    }\n\n    this.requestUpdate();\n  }\n\n  protected calcNewValue(x: number) {\n    const { width, left, right } = this.container.getBoundingClientRect();\n    const percent = isLTR(this) ? (x - left) / width : (right - x) / width;\n    const value = this.round(this.max * percent + this.step / 2);\n\n    return clamp(value, this.step, this.max);\n  }\n\n  protected getPrecision(num: number) {\n    const [_, decimal] = num.toString().split('.');\n    return decimal ? decimal.length : 0;\n  }\n\n  protected round(value: number) {\n    value = Math.round(value / this.step) * this.step;\n    return Number(value.toFixed(this.getPrecision(this.step)));\n  }\n\n  protected clipSymbol(index: number, isLTR = true) {\n    const value = this.hoverState ? this.hoverValue : this.value;\n    const progress = index + 1 - value;\n    const exclusive = progress === 0 || this.value === index + 1 ? 0 : 1;\n    const selection = this.single ? exclusive : progress;\n    const activate = (p: number) => clamp(p * 100, 0, 100);\n\n    const forward = `inset(0 ${activate(\n      isLTR ? selection : 1 - selection\n    )}% 0 0)`;\n    const backward = `inset(0 0 0 ${activate(\n      isLTR ? 1 - selection : selection\n    )}%)`;\n\n    return {\n      backward: isLTR ? backward : forward,\n      forward: isLTR ? forward : backward,\n    };\n  }\n\n  /**\n   * Increments the value of the control by `n` steps multiplied by the\n   * step factor.\n   */\n  public stepUp(n = 1) {\n    this.value += this.round(n * this.step);\n  }\n\n  /**\n   * Decrements the value of the control by `n` steps multiplied by\n   * the step factor.\n   */\n  public stepDown(n = 1) {\n    this.value -= this.round(n * this.step);\n  }\n\n  protected *renderSymbols() {\n    const ltr = isLTR(this);\n    for (let i = 0; i < this.max; i++) {\n      const { forward, backward } = this.clipSymbol(i, ltr);\n      yield html`<igc-rating-symbol exportparts=\"symbol, full, empty\">\n        <igc-icon\n          collection=\"internal\"\n          name=\"star\"\n          style=${styleMap({ clipPath: forward })}\n        ></igc-icon>\n        <igc-icon\n          collection=\"internal\"\n          name=\"star_border\"\n          style=${styleMap({ clipPath: backward })}\n          slot=\"empty\"\n        ></igc-icon>\n      </igc-rating-symbol>`;\n    }\n  }\n\n  protected clipProjected() {\n    if (this.hasProjectedSymbols) {\n      const ltr = isLTR(this);\n      this.ratingSymbols.forEach((symbol: IgcRatingSymbolComponent, i) => {\n        const full = symbol.shadowRoot?.querySelector(\n          '[part=\"symbol full\"]'\n        ) as HTMLElement;\n\n        const empty = symbol.shadowRoot?.querySelector(\n          '[part=\"symbol empty\"]'\n        ) as HTMLElement;\n        const { forward, backward } = this.clipSymbol(i, ltr);\n\n        if (full) {\n          full.style.clipPath = forward;\n        }\n\n        if (empty) {\n          empty.style.clipPath = backward;\n        }\n      });\n    }\n  }\n\n  protected override render() {\n    const props = [\n      this.value,\n      this.hoverValue,\n      this.max,\n      this.step,\n      this.single,\n      this.hoverState,\n      this.ratingSymbols,\n    ];\n\n    return html`\n      <label part=\"label\" id=\"rating-label\" ?hidden=${!this.label}\n        >${this.label}</label\n      >\n      <div\n        part=\"base\"\n        role=\"slider\"\n        tabindex=${ifDefined(this.disabled ? undefined : 0)}\n        aria-labelledby=\"rating-label\"\n        aria-valuemin=\"0\"\n        aria-valuenow=${this.value}\n        aria-valuemax=${this.max}\n        aria-valuetext=${this.valueText}\n      >\n        <div\n          aria-hidden=\"true\"\n          part=\"symbols\"\n          @click=${this.handleClick}\n          @mouseenter=${this.hoverPreview ? this.handleMouseEnter : nothing}\n          @mouseleave=${this.hoverPreview ? this.handleMouseLeave : nothing}\n          @mousemove=${this.hoverPreview ? this.handleMouseMove : nothing}\n        >\n          <slot name=\"symbol\" @slotchange=${this.handleSlotChange}>\n            ${guard(props, () => {\n              this.clipProjected();\n              return this.renderSymbols();\n            })}\n          </slot>\n        </div>\n        <label part=\"value-label\" ?hidden=${this.valueLabel.length === 0}>\n          <slot name=\"value-label\"></slot>\n        </label>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-rating': IgcRatingComponent;\n  }\n}\n"]}
+{"version":3,"file":"rating.js","sourceRoot":"","sources":["../../../src/components/rating/rating.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, query, queryAssignedNodes, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { guard } from 'lit/directives/guard.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { watch } from '../common/decorators/watch.js';\nimport { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { SizableMixin } from '../common/mixins/sizable.js';\nimport { clamp, format, isLTR } from '../common/util.js';\nimport { styles } from './rating.base.css.js';\nimport { styles as bootstrap } from './rating.bootstrap.css.js';\nimport { styles as fluent } from './rating.fluent.css.js';\nimport { styles as indigo } from './rating.indigo.css.js';\n\nimport { defineComponents } from '../common/definitions/defineComponents.js';\nimport IgcRatingSymbolComponent from './rating-symbol.js';\nimport IgcIconComponent from '../icon/icon.js';\nimport { FormAssociatedMixin } from '../common/mixins/form-associated.js';\n\ndefineComponents(IgcRatingSymbolComponent, IgcIconComponent);\n\nexport interface IgcRatingEventMap {\n  igcChange: CustomEvent<number>;\n  igcHover: CustomEvent<number>;\n}\n\n/**\n * Rating provides insight regarding others' opinions and experiences,\n * and can allow the user to submit a rating of their own\n *\n * @element igc-rating\n *\n * @fires igcChange - Emitted when the value of the control changes.\n * @fires igcHover - Emitted when hover is enabled and the user mouses over a symbol of the rating.\n *\n * @csspart base - The main wrapper which holds all of the rating elements.\n * @csspart label - The label part.\n * @csspart value-label - The value label part.\n * @csspart symbols - A wrapper for all rating symbols.\n * @csspart symbol - The part of the encapsulated default symbol.\n * @csspart full - The part of the encapsulated full symbols.\n * @csspart empty - The part of the encapsulated empty symbols.\n *\n * @cssproperty --symbol-size - The size of the symbols.\n * @cssproperty --symbol-full-color - The color of the filled symbol.\n * @cssproperty --symbol-empty-color - The color of the empty symbol.\n * @cssproperty --symbol-full-filter - The filter(s) used for the filled symbol.\n * @cssproperty --symbol-empty-filter - The filter(s) used for the empty symbol.\n */\n@themes({ fluent, bootstrap, indigo })\nexport default class IgcRatingComponent extends FormAssociatedMixin(\n  SizableMixin(\n    EventEmitterMixin<IgcRatingEventMap, Constructor<LitElement>>(LitElement)\n  )\n) {\n  public static readonly tagName = 'igc-rating';\n  public static styles = [styles];\n\n  protected ratingSymbols: Array<IgcRatingSymbolComponent> = [];\n\n  @query('[part=\"symbols\"]', true)\n  protected container!: HTMLElement;\n\n  @queryAssignedNodes({ slot: 'value-label', flatten: true })\n  protected valueLabel!: Array<Node>;\n\n  @state()\n  protected hoverValue = -1;\n\n  @state()\n  protected hoverState = false;\n\n  protected get isInteractive() {\n    return !(this.readonly || this.disabled);\n  }\n\n  protected get hasProjectedSymbols() {\n    return this.ratingSymbols.length > 0;\n  }\n\n  protected get valueText() {\n    // Skip IEEE 754 representation for screen readers\n    const value = this.round(this.value);\n    return this.valueFormat\n      ? format(this.valueFormat, `${value}`, `${this.max}`)\n      : `${value} of ${this.max}`;\n  }\n\n  /**\n   * The maximum value for the rating.\n   *\n   * If there are projected symbols, the maximum value will be resolved\n   * based on the number of symbols.\n   * @attr\n   */\n  @property({ type: Number })\n  public max = 5;\n\n  /**\n   * The minimum value change allowed.\n   *\n   * Valid values are in the interval between 0 and 1 inclusive.\n   * @attr\n   */\n  @property({ type: Number })\n  public step = 1;\n\n  /**\n   * The label of the control.\n   * @attr\n   */\n  @property()\n  public label!: string;\n\n  /**\n   * A format string which sets aria-valuetext. Instances of '{0}' will be replaced\n   * with the current value of the control and instances of '{1}' with the maximum value for the control.\n   *\n   * Important for screen-readers and useful for localization.\n   * @attr value-format\n   */\n  @property({ attribute: 'value-format' })\n  public valueFormat!: string;\n\n  /**\n   * The current value of the component\n   * @attr\n   */\n  @property({ type: Number })\n  public value = 0;\n\n  /**\n   * Sets hover preview behavior for the component\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'hover-preview' })\n  public hoverPreview = false;\n\n  /**\n   * Makes the control a readonly field.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public readOnly = false;\n\n  /**\n   * Sets the readonly state of the component\n   * @attr\n   *\n   * @deprecated - since v4.4.0\n   * Use the `readOnly` property instead.\n   */\n  @property({ attribute: false })\n  public get readonly() {\n    return this.readOnly;\n  }\n\n  public set readonly(value: boolean) {\n    this.readOnly = value;\n  }\n\n  /**\n   * Toggles single selection visual mode.\n   * @attr\n   */\n  @property({ type: Boolean })\n  public single = false;\n\n  @watch('max')\n  protected handleMaxChange() {\n    this.hasProjectedSymbols\n      ? (this.max = this.ratingSymbols.length)\n      : (this.max = Math.max(0, this.max));\n    if (this.max < this.value) {\n      this.value = this.max;\n    }\n  }\n\n  @watch('value')\n  protected handleValueChange() {\n    this.value = clamp(isNaN(this.value) ? 0 : this.value, 0, this.max);\n    this.setFormValue(`${this.value}`, `${this.value}`);\n    this.updateValidity();\n    this.setInvalidState();\n  }\n\n  @watch('step')\n  protected handlePrecisionChange() {\n    this.step = !this.single ? clamp(this.step, 0.001, 1) : 1;\n  }\n\n  @watch('single')\n  protected handleSelectionChange() {\n    if (this.single) {\n      this.step = 1;\n      this.value = Math.ceil(this.value);\n    }\n  }\n\n  constructor() {\n    super();\n    this.addEventListener('keydown', this.handleKeyDown);\n  }\n\n  protected handleClick({ clientX }: MouseEvent) {\n    if (!this.isInteractive) {\n      return;\n    }\n\n    const value = this.calcNewValue(clientX);\n    this.value === value ? (this.value = 0) : (this.value = value);\n    this.emitEvent('igcChange', { detail: this.value });\n  }\n\n  protected handleMouseMove({ clientX }: MouseEvent) {\n    if (!this.isInteractive) {\n      return;\n    }\n\n    const value = this.calcNewValue(clientX);\n\n    if (this.hoverValue !== value) {\n      // Since mousemove spams a lot, only emit on a value change\n      this.hoverValue = value;\n      this.emitEvent('igcHover', { detail: this.hoverValue });\n    }\n  }\n\n  protected handleMouseEnter() {\n    if (this.isInteractive) {\n      this.hoverState = true;\n    }\n  }\n\n  protected handleMouseLeave() {\n    if (this.isInteractive) {\n      this.hoverState = false;\n    }\n  }\n\n  protected handleKeyDown({ key }: KeyboardEvent) {\n    if (!this.isInteractive) {\n      return;\n    }\n\n    let result = this.value;\n    const ltr = isLTR(this);\n\n    switch (key) {\n      case 'ArrowUp':\n      case 'ArrowRight':\n        result += ltr ? this.step : -this.step;\n        break;\n      case 'ArrowDown':\n      case 'ArrowLeft':\n        result -= ltr ? this.step : -this.step;\n        break;\n      case 'Home':\n        result = this.step;\n        break;\n      case 'End':\n        result = this.max;\n        break;\n      default:\n        return;\n    }\n\n    // Verify new value is in bounds and emit\n    this.value = clamp(result, 0, this.max);\n\n    if (result === this.value) {\n      this.emitEvent('igcChange', { detail: this.value });\n    }\n  }\n\n  protected handleSlotChange(event: Event) {\n    const slot = event.target as HTMLSlotElement;\n\n    this.ratingSymbols = slot\n      .assignedElements()\n      .filter(\n        (el) => el instanceof IgcRatingSymbolComponent\n      ) as IgcRatingSymbolComponent[];\n\n    if (this.hasProjectedSymbols) {\n      this.max = this.ratingSymbols.length;\n    }\n\n    this.requestUpdate();\n  }\n\n  protected calcNewValue(x: number) {\n    const { width, left, right } = this.container.getBoundingClientRect();\n    const percent = isLTR(this) ? (x - left) / width : (right - x) / width;\n    const value = this.round(this.max * percent + this.step / 2);\n\n    return clamp(value, this.step, this.max);\n  }\n\n  protected getPrecision(num: number) {\n    const [_, decimal] = num.toString().split('.');\n    return decimal ? decimal.length : 0;\n  }\n\n  protected round(value: number) {\n    value = Math.round(value / this.step) * this.step;\n    return Number(value.toFixed(this.getPrecision(this.step)));\n  }\n\n  protected clipSymbol(index: number, isLTR = true) {\n    const value = this.hoverState ? this.hoverValue : this.value;\n    const progress = index + 1 - value;\n    const exclusive = progress === 0 || this.value === index + 1 ? 0 : 1;\n    const selection = this.single ? exclusive : progress;\n    const activate = (p: number) => clamp(p * 100, 0, 100);\n\n    const forward = `inset(0 ${activate(\n      isLTR ? selection : 1 - selection\n    )}% 0 0)`;\n    const backward = `inset(0 0 0 ${activate(\n      isLTR ? 1 - selection : selection\n    )}%)`;\n\n    return {\n      backward: isLTR ? backward : forward,\n      forward: isLTR ? forward : backward,\n    };\n  }\n\n  /**\n   * Increments the value of the control by `n` steps multiplied by the\n   * step factor.\n   */\n  public stepUp(n = 1) {\n    this.value += this.round(n * this.step);\n  }\n\n  /**\n   * Decrements the value of the control by `n` steps multiplied by\n   * the step factor.\n   */\n  public stepDown(n = 1) {\n    this.value -= this.round(n * this.step);\n  }\n\n  protected *renderSymbols() {\n    const ltr = isLTR(this);\n    for (let i = 0; i < this.max; i++) {\n      const { forward, backward } = this.clipSymbol(i, ltr);\n      yield html`<igc-rating-symbol exportparts=\"symbol, full, empty\">\n        <igc-icon\n          collection=\"internal\"\n          name=\"star\"\n          style=${styleMap({ clipPath: forward })}\n        ></igc-icon>\n        <igc-icon\n          collection=\"internal\"\n          name=\"star_border\"\n          style=${styleMap({ clipPath: backward })}\n          slot=\"empty\"\n        ></igc-icon>\n      </igc-rating-symbol>`;\n    }\n  }\n\n  protected clipProjected() {\n    if (this.hasProjectedSymbols) {\n      const ltr = isLTR(this);\n      this.ratingSymbols.forEach((symbol: IgcRatingSymbolComponent, i) => {\n        const full = symbol.shadowRoot?.querySelector(\n          '[part=\"symbol full\"]'\n        ) as HTMLElement;\n\n        const empty = symbol.shadowRoot?.querySelector(\n          '[part=\"symbol empty\"]'\n        ) as HTMLElement;\n        const { forward, backward } = this.clipSymbol(i, ltr);\n\n        if (full) {\n          full.style.clipPath = forward;\n        }\n\n        if (empty) {\n          empty.style.clipPath = backward;\n        }\n      });\n    }\n  }\n\n  protected override render() {\n    const props = [\n      this.value,\n      this.hoverValue,\n      this.max,\n      this.step,\n      this.single,\n      this.hoverState,\n      this.ratingSymbols,\n    ];\n\n    return html`\n      <label part=\"label\" id=\"rating-label\" ?hidden=${!this.label}\n        >${this.label}</label\n      >\n      <div\n        part=\"base\"\n        role=\"slider\"\n        tabindex=${ifDefined(this.disabled ? undefined : 0)}\n        aria-labelledby=\"rating-label\"\n        aria-valuemin=\"0\"\n        aria-valuenow=${this.value}\n        aria-valuemax=${this.max}\n        aria-valuetext=${this.valueText}\n      >\n        <div\n          aria-hidden=\"true\"\n          part=\"symbols\"\n          @click=${this.handleClick}\n          @mouseenter=${this.hoverPreview ? this.handleMouseEnter : nothing}\n          @mouseleave=${this.hoverPreview ? this.handleMouseLeave : nothing}\n          @mousemove=${this.hoverPreview ? this.handleMouseMove : nothing}\n        >\n          <slot name=\"symbol\" @slotchange=${this.handleSlotChange}>\n            ${guard(props, () => {\n              this.clipProjected();\n              return this.renderSymbols();\n            })}\n          </slot>\n        </div>\n        <label part=\"value-label\" ?hidden=${this.valueLabel.length === 0}>\n          <slot name=\"value-label\"></slot>\n        </label>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-rating': IgcRatingComponent;\n  }\n}\n"]}

package/components/select/select-item.d.ts

@@ -14,9 +14,7 @@ import IgcDropdownItemComponent from '../dropdown/dropdown-item.js';
  */
 export default class IgcSelectItemComponent extends IgcDropdownItemComponent {
     private content;
-    /** @private */
     static readonly tagName = "igc-select-item";
-    constructor();
     protected activeChange(): void;
     /** Returns the text of the item without the prefix and suffix content. */
     get textContent(): string;