igniteui-webcomponents 3.3.0-beta.0 → 4.0.0-alpha

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

@@ -1,3 +1,88 @@
 import { css } from 'lit';
-export const styles = css `:host{font-weight:600}:host [part~=control]{width:var(--size, 1.25rem);height:var(--size, 1.25rem);min-width:var(--size, 1.25rem);-webkit-transition:none;-o-transition:none;transition:none;background:none}:host(:not([invalid])) [part=control]::after{border-color:var(--border-color, hsla(var(--igc-gray-600), var(--igc-gray-a)))}:host(:hover) [part=control]{-webkit-box-shadow:0 0 0 .25rem hsla(var(--igc-gray-200), 0.87);box-shadow:0 0 0 .25rem hsla(var(--igc-gray-200), 0.87)}:host(:focus-within) [part=control]{-webkit-box-shadow:0 0 0 .25rem hsla(var(--igc-gray-300), 0.87);box-shadow:0 0 0 .25rem hsla(var(--igc-gray-300), 0.87)}:host(:not([invalid])) [part="control checked"]::after{border-color:var(--checked-color, hsla(var(--igc-secondary-500), var(--igc-secondary-a)))}:host(:not([invalid])) [part="control checked"]::before{background:var(--checked-color, hsla(var(--igc-secondary-500), var(--igc-secondary-a)));border-color:var(--checked-color, hsla(var(--igc-secondary-500), var(--igc-secondary-a)))}:host(:hover) [part="control checked"]{background:rgba(0,0,0,0);-webkit-box-shadow:0 0 0 .25rem hsla(var(--igc-secondary-100), 0.87);box-shadow:0 0 0 .25rem hsla(var(--igc-secondary-100), 0.87)}:host(:focus-within) [part="control checked"]{background:rgba(0,0,0,0);-webkit-box-shadow:0 0 0 .25rem hsla(var(--igc-secondary-200), 0.87);box-shadow:0 0 0 .25rem hsla(var(--igc-secondary-200), 0.87)}:host(:not([disabled])[invalid]) [part="control checked"]::before{background:hsla(var(--igc-error-500), var(--igc-error-a))}:host([invalid]:hover) [part~=control]{-webkit-box-shadow:0 0 0 .25rem hsla(var(--igc-error-100), 0.87);box-shadow:0 0 0 .25rem hsla(var(--igc-error-100), 0.87)}:host([invalid]:focus-within) [part~=control]{-webkit-box-shadow:0 0 0 .25rem hsla(var(--igc-error-200), 0.87);box-shadow:0 0 0 .25rem hsla(var(--igc-error-200), 0.87)}:host([disabled]){pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host([disabled]) [part=control]::after{background:rgba(0,0,0,0)}:host([disabled]) [part=control]::after,:host([disabled]) [part="control checked"]::after{border-color:var(--disabled-color, hsla(var(--igc-gray-300), var(--igc-gray-a)))}:host([disabled]) [part="control checked"]::before{background:var(--disabled-color, hsla(var(--igc-gray-300), var(--igc-gray-a)))}:host([disabled]) [part~=label]{color:var(--disabled-color, hsla(var(--igc-gray-300), var(--igc-gray-a)))}`;
+export const styles = css `:host {
+  font-weight: 600;
+}
+
+:host [part~=control] {
+  width: var(--size, 1.25rem);
+  height: var(--size, 1.25rem);
+  min-width: var(--size, 1.25rem);
+  -webkit-transition: none;
+  -o-transition: none;
+  transition: none;
+  background: none;
+}
+
+:host(:not([invalid])) [part=control]::after {
+  border-color: var(--border-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+}
+
+:host(:hover) [part=control] {
+  -webkit-box-shadow: 0 0 0 0.25rem hsla(var(--ig-gray-200), 0.87);
+          box-shadow: 0 0 0 0.25rem hsla(var(--ig-gray-200), 0.87);
+}
+
+:host(:focus-within) [part=control] {
+  -webkit-box-shadow: 0 0 0 0.25rem hsla(var(--ig-gray-300), 0.87);
+          box-shadow: 0 0 0 0.25rem hsla(var(--ig-gray-300), 0.87);
+}
+
+:host(:not([invalid])) [part="control checked"]::after {
+  border-color: var(--checked-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
+}
+
+:host(:not([invalid])) [part="control checked"]::before {
+  background: var(--checked-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
+  border-color: var(--checked-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
+}
+
+:host(:hover) [part="control checked"] {
+  background: transparent;
+  -webkit-box-shadow: 0 0 0 0.25rem hsla(var(--ig-secondary-100), 0.87);
+          box-shadow: 0 0 0 0.25rem hsla(var(--ig-secondary-100), 0.87);
+}
+
+:host(:focus-within) [part="control checked"] {
+  background: transparent;
+  -webkit-box-shadow: 0 0 0 0.25rem hsla(var(--ig-secondary-200), 0.87);
+          box-shadow: 0 0 0 0.25rem hsla(var(--ig-secondary-200), 0.87);
+}
+
+:host(:not([disabled])[invalid]) [part="control checked"]::before {
+  background: hsla(var(--ig-error-500), var(--ig-error-a));
+}
+
+:host([invalid]:hover) [part~=control] {
+  -webkit-box-shadow: 0 0 0 0.25rem hsla(var(--ig-error-100), 0.87);
+          box-shadow: 0 0 0 0.25rem hsla(var(--ig-error-100), 0.87);
+}
+
+:host([invalid]:focus-within) [part~=control] {
+  -webkit-box-shadow: 0 0 0 0.25rem hsla(var(--ig-error-200), 0.87);
+          box-shadow: 0 0 0 0.25rem hsla(var(--ig-error-200), 0.87);
+}
+
+:host([disabled]) {
+  pointer-events: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+:host([disabled]) [part=control]::after {
+  background: transparent;
+}
+
+:host([disabled]) [part=control]::after,
+:host([disabled]) [part="control checked"]::after {
+  border-color: var(--disabled-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+}
+
+:host([disabled]) [part="control checked"]::before {
+  background: var(--disabled-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+}
+
+:host([disabled]) [part~=label] {
+  color: var(--disabled-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+}`;
 //# sourceMappingURL=radio.indigo.css.js.map

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,05EAA05E,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{font-weight:600}:host [part~=control]{width:var(--size, 1.25rem);height:var(--size, 1.25rem);min-width:var(--size, 1.25rem);-webkit-transition:none;-o-transition:none;transition:none;background:none}:host(:not([invalid])) [part=control]::after{border-color:var(--border-color, hsla(var(--igc-gray-600), var(--igc-gray-a)))}:host(:hover) [part=control]{-webkit-box-shadow:0 0 0 .25rem hsla(var(--igc-gray-200), 0.87);box-shadow:0 0 0 .25rem hsla(var(--igc-gray-200), 0.87)}:host(:focus-within) [part=control]{-webkit-box-shadow:0 0 0 .25rem hsla(var(--igc-gray-300), 0.87);box-shadow:0 0 0 .25rem hsla(var(--igc-gray-300), 0.87)}:host(:not([invalid])) [part=\"control checked\"]::after{border-color:var(--checked-color, hsla(var(--igc-secondary-500), var(--igc-secondary-a)))}:host(:not([invalid])) [part=\"control checked\"]::before{background:var(--checked-color, hsla(var(--igc-secondary-500), var(--igc-secondary-a)));border-color:var(--checked-color, hsla(var(--igc-secondary-500), var(--igc-secondary-a)))}:host(:hover) [part=\"control checked\"]{background:rgba(0,0,0,0);-webkit-box-shadow:0 0 0 .25rem hsla(var(--igc-secondary-100), 0.87);box-shadow:0 0 0 .25rem hsla(var(--igc-secondary-100), 0.87)}:host(:focus-within) [part=\"control checked\"]{background:rgba(0,0,0,0);-webkit-box-shadow:0 0 0 .25rem hsla(var(--igc-secondary-200), 0.87);box-shadow:0 0 0 .25rem hsla(var(--igc-secondary-200), 0.87)}:host(:not([disabled])[invalid]) [part=\"control checked\"]::before{background:hsla(var(--igc-error-500), var(--igc-error-a))}:host([invalid]:hover) [part~=control]{-webkit-box-shadow:0 0 0 .25rem hsla(var(--igc-error-100), 0.87);box-shadow:0 0 0 .25rem hsla(var(--igc-error-100), 0.87)}:host([invalid]:focus-within) [part~=control]{-webkit-box-shadow:0 0 0 .25rem hsla(var(--igc-error-200), 0.87);box-shadow:0 0 0 .25rem hsla(var(--igc-error-200), 0.87)}:host([disabled]){pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host([disabled]) [part=control]::after{background:rgba(0,0,0,0)}:host([disabled]) [part=control]::after,:host([disabled]) [part=\"control checked\"]::after{border-color:var(--disabled-color, hsla(var(--igc-gray-300), var(--igc-gray-a)))}:host([disabled]) [part=\"control checked\"]::before{background:var(--disabled-color, hsla(var(--igc-gray-300), var(--igc-gray-a)))}:host([disabled]) [part~=label]{color:var(--disabled-color, hsla(var(--igc-gray-300), var(--igc-gray-a)))}`;\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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqFvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  font-weight: 600;\n}\n\n:host [part~=control] {\n  width: var(--size, 1.25rem);\n  height: var(--size, 1.25rem);\n  min-width: var(--size, 1.25rem);\n  -webkit-transition: none;\n  -o-transition: none;\n  transition: none;\n  background: none;\n}\n\n:host(:not([invalid])) [part=control]::after {\n  border-color: var(--border-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));\n}\n\n:host(:hover) [part=control] {\n  -webkit-box-shadow: 0 0 0 0.25rem hsla(var(--ig-gray-200), 0.87);\n          box-shadow: 0 0 0 0.25rem hsla(var(--ig-gray-200), 0.87);\n}\n\n:host(:focus-within) [part=control] {\n  -webkit-box-shadow: 0 0 0 0.25rem hsla(var(--ig-gray-300), 0.87);\n          box-shadow: 0 0 0 0.25rem hsla(var(--ig-gray-300), 0.87);\n}\n\n:host(:not([invalid])) [part=\"control checked\"]::after {\n  border-color: var(--checked-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));\n}\n\n:host(:not([invalid])) [part=\"control checked\"]::before {\n  background: var(--checked-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));\n  border-color: var(--checked-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));\n}\n\n:host(:hover) [part=\"control checked\"] {\n  background: transparent;\n  -webkit-box-shadow: 0 0 0 0.25rem hsla(var(--ig-secondary-100), 0.87);\n          box-shadow: 0 0 0 0.25rem hsla(var(--ig-secondary-100), 0.87);\n}\n\n:host(:focus-within) [part=\"control checked\"] {\n  background: transparent;\n  -webkit-box-shadow: 0 0 0 0.25rem hsla(var(--ig-secondary-200), 0.87);\n          box-shadow: 0 0 0 0.25rem hsla(var(--ig-secondary-200), 0.87);\n}\n\n:host(:not([disabled])[invalid]) [part=\"control checked\"]::before {\n  background: hsla(var(--ig-error-500), var(--ig-error-a));\n}\n\n:host([invalid]:hover) [part~=control] {\n  -webkit-box-shadow: 0 0 0 0.25rem hsla(var(--ig-error-100), 0.87);\n          box-shadow: 0 0 0 0.25rem hsla(var(--ig-error-100), 0.87);\n}\n\n:host([invalid]:focus-within) [part~=control] {\n  -webkit-box-shadow: 0 0 0 0.25rem hsla(var(--ig-error-200), 0.87);\n          box-shadow: 0 0 0 0.25rem hsla(var(--ig-error-200), 0.87);\n}\n\n:host([disabled]) {\n  pointer-events: none;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n}\n:host([disabled]) [part=control]::after {\n  background: transparent;\n}\n\n:host([disabled]) [part=control]::after,\n:host([disabled]) [part=\"control checked\"]::after {\n  border-color: var(--disabled-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n}\n\n:host([disabled]) [part=\"control checked\"]::before {\n  background: var(--disabled-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n}\n\n:host([disabled]) [part~=label] {\n  color: var(--disabled-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n}`;\n"]}

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

@@ -1,3 +1,16 @@
 import { css } from 'lit';
-export const styles = css `[part~=base]:hover [part=control]{background:hsla(var(--igc-gray-600), 0.06)}[part="base checked"]:hover [part~=control]{background:hsla(var(--igc-secondary-500), 0.06)}[part="base checked"]:focus-within [part~=control]{background:hsla(var(--igc-secondary-500), 0.12)}:host(:not([disabled])[invalid]) [part="control checked"]::before{background:hsla(var(--igc-error-500), var(--igc-error-a))}`;
+export const styles = css `[part~=base]:hover [part=control] {
+  background: hsla(var(--ig-gray-600), 0.06);
+}
+
+[part="base checked"]:hover [part~=control] {
+  background: hsla(var(--ig-secondary-500), 0.06);
+}
+[part="base checked"]:focus-within [part~=control] {
+  background: hsla(var(--ig-secondary-500), 0.12);
+}
+
+:host(:not([disabled])[invalid]) [part="control checked"]::before {
+  background: hsla(var(--ig-error-500), var(--ig-error-a));
+}`;
 //# sourceMappingURL=radio.material.css.js.map

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,0YAA0Y,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`[part~=base]:hover [part=control]{background:hsla(var(--igc-gray-600), 0.06)}[part=\"base checked\"]:hover [part~=control]{background:hsla(var(--igc-secondary-500), 0.06)}[part=\"base checked\"]:focus-within [part~=control]{background:hsla(var(--igc-secondary-500), 0.12)}:host(:not([disabled])[invalid]) [part=\"control checked\"]::before{background:hsla(var(--igc-error-500), var(--igc-error-a))}`;\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;;;;;;;;;;;;;EAavB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`[part~=base]:hover [part=control] {\n  background: hsla(var(--ig-gray-600), 0.06);\n}\n\n[part=\"base checked\"]:hover [part~=control] {\n  background: hsla(var(--ig-secondary-500), 0.06);\n}\n[part=\"base checked\"]:focus-within [part~=control] {\n  background: hsla(var(--ig-secondary-500), 0.12);\n}\n\n:host(:not([disabled])[invalid]) [part=\"control checked\"]::before {\n  background: hsla(var(--ig-error-500), var(--ig-error-a));\n}`;\n"]}

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

@@ -1,3 +1,55 @@
 import { css } from 'lit';
-export const styles = css `:host{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;scrollbar-width:var(--scrolbar-size, 0.875rem);scrollbar-color:var(--igc-scrollbar-thumb-color, hsla(var(--igc-gray-400), var(--igc-gray-a))) var(--igc-scrollbar-track-color, hsla(var(--igc-gray-200), var(--igc-gray-a)))}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host ::-webkit-scrollbar{width:var(--scrolbar-size, 0.875rem);height:var(--scrolbar-size, 0.875rem);background:var(--igc-scrollbar-track-color, hsla(var(--igc-gray-200), var(--igc-gray-a)))}:host ::-webkit-scrollbar-thumb{background:var(--igc-scrollbar-thumb-color, hsla(var(--igc-gray-400), var(--igc-gray-a)))}[hidden]{display:none !important}:host{display:-webkit-box;display:-ms-flexbox;display:flex}:host([alignment=vertical]){-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}:host([alignment=vertical]) ::slotted(igc-radio:not(:first-of-type)){-webkit-margin-before:.5rem;margin-block-start:.5rem}:host([alignment=horizontal]){-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}:host([alignment=horizontal]) ::slotted(igc-radio:not(:first-of-type)){-webkit-margin-start:.5rem;margin-inline-start:.5rem}`;
+export const styles = css `:host {
+  position: relative;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  scrollbar-width: var(--scrolbar-size, 0.875rem);
+  scrollbar-color: var(--igc-scrollbar-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a))) var(--igc-scrollbar-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+}
+:host *,
+:host *::before,
+:host *::after {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+:host ::-webkit-scrollbar {
+  width: var(--scrolbar-size, 0.875rem);
+  height: var(--scrolbar-size, 0.875rem);
+  background: var(--igc-scrollbar-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+}
+:host ::-webkit-scrollbar-thumb {
+  background: var(--igc-scrollbar-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+}
+
+[hidden] {
+  display: none !important;
+}
+
+:host {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+:host([alignment=vertical]) {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+:host([alignment=vertical]) ::slotted(igc-radio:not(:first-of-type)) {
+  -webkit-margin-before: 0.5rem;
+          margin-block-start: 0.5rem;
+}
+
+:host([alignment=horizontal]) {
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+}
+:host([alignment=horizontal]) ::slotted(igc-radio:not(:first-of-type)) {
+  -webkit-margin-start: 0.5rem;
+          margin-inline-start: 0.5rem;
+}`;
 //# sourceMappingURL=radio-group.base.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"radio-group.base.css.js","sourceRoot":"","sources":["../../../src/components/radio-group/radio-group.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,yxCAAyxC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;scrollbar-width:var(--scrolbar-size, 0.875rem);scrollbar-color:var(--igc-scrollbar-thumb-color, hsla(var(--igc-gray-400), var(--igc-gray-a))) var(--igc-scrollbar-track-color, hsla(var(--igc-gray-200), var(--igc-gray-a)))}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host ::-webkit-scrollbar{width:var(--scrolbar-size, 0.875rem);height:var(--scrolbar-size, 0.875rem);background:var(--igc-scrollbar-track-color, hsla(var(--igc-gray-200), var(--igc-gray-a)))}:host ::-webkit-scrollbar-thumb{background:var(--igc-scrollbar-thumb-color, hsla(var(--igc-gray-400), var(--igc-gray-a)))}[hidden]{display:none !important}:host{display:-webkit-box;display:-ms-flexbox;display:flex}:host([alignment=vertical]){-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}:host([alignment=vertical]) ::slotted(igc-radio:not(:first-of-type)){-webkit-margin-before:.5rem;margin-block-start:.5rem}:host([alignment=horizontal]){-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}:host([alignment=horizontal]) ::slotted(igc-radio:not(:first-of-type)){-webkit-margin-start:.5rem;margin-inline-start:.5rem}`;\n"]}
+{"version":3,"file":"radio-group.base.css.js","sourceRoot":"","sources":["../../../src/components/radio-group/radio-group.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoDvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  position: relative;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  scrollbar-width: var(--scrolbar-size, 0.875rem);\n  scrollbar-color: var(--igc-scrollbar-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a))) var(--igc-scrollbar-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));\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(--scrolbar-size, 0.875rem);\n  height: var(--scrolbar-size, 0.875rem);\n  background: var(--igc-scrollbar-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n}\n:host ::-webkit-scrollbar-thumb {\n  background: var(--igc-scrollbar-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n}\n\n[hidden] {\n  display: none !important;\n}\n\n:host {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n}\n\n:host([alignment=vertical]) {\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: normal;\n      -ms-flex-direction: column;\n          flex-direction: column;\n}\n:host([alignment=vertical]) ::slotted(igc-radio:not(:first-of-type)) {\n  -webkit-margin-before: 0.5rem;\n          margin-block-start: 0.5rem;\n}\n\n:host([alignment=horizontal]) {\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n      -ms-flex-direction: row;\n          flex-direction: row;\n}\n:host([alignment=horizontal]) ::slotted(igc-radio:not(:first-of-type)) {\n  -webkit-margin-start: 0.5rem;\n          margin-inline-start: 0.5rem;\n}`;\n"]}

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

@@ -3,7 +3,6 @@ export default class IgcRadioGroupComponent extends LitElement {
     static readonly tagName = "igc-radio-group";
     static styles: import("lit").CSSResult;
     private radios;
-    private get isLTR();
     constructor();
     alignment: 'vertical' | 'horizontal';
     private updateRequiredState;

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

@@ -6,7 +6,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, LitElement } from 'lit';
 import { property, queryAssignedElements } 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';
+defineComponents(IgcRadioComponent);
 export default class IgcRadioGroupComponent extends LitElement {
     constructor() {
         super();
@@ -16,15 +20,16 @@ export default class IgcRadioGroupComponent extends LitElement {
             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 += this.isLTR ? -1 : 1;
+                        index += ltr ? -1 : 1;
                         break;
                     case 'ArrowRight':
-                        index += this.isLTR ? 1 : -1;
+                        index += ltr ? 1 : -1;
                         break;
                     default:
                         index += 1;
@@ -42,10 +47,6 @@ export default class IgcRadioGroupComponent extends LitElement {
         this.addEventListener('keydown', this.handleKeydown);
         this.addEventListener('igcChange', this.updateRequiredState);
     }
-    get isLTR() {
-        const styles = window.getComputedStyle(this);
-        return styles.getPropertyValue('direction') === 'ltr';
-    }
     updateRequiredState() {
         const hasRequired = this.radios.some((r) => r.required);
         if (hasRequired) {

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":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAEpE,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAEnD,MAAM,CAAC,OAAO,OAAO,sBAAuB,SAAQ,UAAU;IAgB5D;QACE,KAAK,EAAE,CAAC;QAMH,cAAS,GAA8B,UAAU,CAAC;QAkBjD,kBAAa,GAAG,CAAC,KAAoB,EAAE,EAAE;YAC/C,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,CAAC;YAEtB,IAAI,CAAC,SAAS,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;gBACrE,MAAM,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;gBAC3D,IAAI,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,OAAQ,CAAC,CAAC;gBAE1C,QAAQ,GAAG,EAAE;oBACX,KAAK,SAAS;wBACZ,KAAK,IAAI,CAAC,CAAC,CAAC;wBACZ,MAAM;oBACR,KAAK,WAAW;wBACd,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;wBAC7B,MAAM;oBACR,KAAK,YAAY;wBACf,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;wBAC7B,MAAM;oBACR;wBACE,KAAK,IAAI,CAAC,CAAC;iBACd;gBAED,IAAI,KAAK,GAAG,CAAC;oBAAE,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;gBAC9C,IAAI,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC;oBAAE,KAAK,GAAG,CAAC,CAAC;gBAE9C,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,CAAC,CAAC;gBACxD,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,KAAK,EAAE,CAAC;gBAC3B,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC;gBAElC,KAAK,CAAC,cAAc,EAAE,CAAC;aACxB;QACH,CAAC,CAAC;QArDA,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QACrD,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;IAC/D,CAAC;IATD,IAAY,KAAK;QACf,MAAM,MAAM,GAAG,MAAM,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;QAC7C,OAAO,MAAM,CAAC,gBAAgB,CAAC,WAAW,CAAC,KAAK,KAAK,CAAC;IACxD,CAAC;IAWO,mBAAmB;QACzB,MAAM,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;QAExD,IAAI,WAAW,EAAE;YACf,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,GAAG,KAAK,CAAC,CAAC,CAAC;YAEjD,MAAM,UAAU,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;YAEtD,IAAI,UAAU,EAAE;gBACd,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,GAAG,IAAI,CAAC;aACzD;iBAAM;gBACL,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,QAAQ,GAAG,IAAI,CAAC;aAChC;SACF;IACH,CAAC;IAkCkB,MAAM;QACvB,OAAO,IAAI,CAAA,qBAAqB,IAAI,CAAC,mBAAmB,UAAU,CAAC;IACrE,CAAC;;AA1EsB,8BAAO,GAAG,iBAAiB,CAAC;AAE5B,6BAAM,GAAG,MAAM,CAAC;AAMvC;IAJC,qBAAqB,CAAC;QACrB,OAAO,EAAE,IAAI;QACb,QAAQ,EAAE,2BAA2B;KACtC,CAAC;sDACwC;AAc1C;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yDAC6B","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, queryAssignedElements } from 'lit/decorators.js';\nimport type { default as IgcRadioComponent } from '../radio/radio';\nimport { styles } from './radio-group.base.css.js';\n\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  private get isLTR(): boolean {\n    const styles = window.getComputedStyle(this);\n    return styles.getPropertyValue('direction') === 'ltr';\n  }\n\n  constructor() {\n    super();\n    this.addEventListener('keydown', this.handleKeydown);\n    this.addEventListener('igcChange', this.updateRequiredState);\n  }\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\n      switch (key) {\n        case 'ArrowUp':\n          index += -1;\n          break;\n        case 'ArrowLeft':\n          index += this.isLTR ? -1 : 1;\n          break;\n        case 'ArrowRight':\n          index += this.isLTR ? 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":"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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';\n\ndefineComponents(IgcRadioComponent);\n\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  @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"]}

package/components/rating/rating-symbol.base.css.d.ts

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

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

@@ -0,0 +1,100 @@
+import { css } from 'lit';
+export const styles = css `:host {
+  position: relative;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  scrollbar-width: var(--scrolbar-size, 0.875rem);
+  scrollbar-color: var(--igc-scrollbar-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a))) var(--igc-scrollbar-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+}
+:host *,
+:host *::before,
+:host *::after {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+:host ::-webkit-scrollbar {
+  width: var(--scrolbar-size, 0.875rem);
+  height: var(--scrolbar-size, 0.875rem);
+  background: var(--igc-scrollbar-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+}
+:host ::-webkit-scrollbar-thumb {
+  background: var(--igc-scrollbar-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+}
+
+[hidden] {
+  display: none !important;
+}
+
+:host {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  width: var(--symbol-size);
+  height: var(--symbol-size);
+}
+
+[part~=symbol] {
+  position: absolute;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  color: inherit;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  width: var(--symbol-size);
+  height: var(--symbol-size);
+  min-width: var(--symbol-size);
+  min-height: var(--symbol-size);
+  font-size: var(--symbol-size);
+  font-family: sans-serif;
+  line-height: 100%;
+  letter-spacing: 0;
+}
+[part~=symbol] igc-icon {
+  --size: var(--symbol-size);
+}
+
+[part="symbol full"] {
+  color: var(--symbol-full-color);
+}
+
+[part="symbol empty"] {
+  color: var(--symbol-empty-color);
+}
+
+::slotted(*) {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+
+::slotted(igc-icon) {
+  --size: var(--symbol-size);
+}
+
+slot:not([name])::slotted(:not(igc-icon)) {
+  -webkit-filter: var(--symbol-full-filter, grayscale(0));
+          filter: var(--symbol-full-filter, grayscale(0));
+}
+
+[name=empty]::slotted(:not(igc-icon)) {
+  -webkit-filter: var(--symbol-empty-filter, grayscale(1));
+          filter: var(--symbol-empty-filter, grayscale(1));
+}`;
+//# sourceMappingURL=rating-symbol.base.css.js.map

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

@@ -0,0 +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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiGvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  position: relative;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  scrollbar-width: var(--scrolbar-size, 0.875rem);\n  scrollbar-color: var(--igc-scrollbar-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a))) var(--igc-scrollbar-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));\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(--scrolbar-size, 0.875rem);\n  height: var(--scrolbar-size, 0.875rem);\n  background: var(--igc-scrollbar-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n}\n:host ::-webkit-scrollbar-thumb {\n  background: var(--igc-scrollbar-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n}\n\n[hidden] {\n  display: none !important;\n}\n\n:host {\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"]}

package/components/rating/rating-symbol.d.ts

@@ -5,11 +5,17 @@ import { LitElement } from 'lit';
  *
  * @element igc-rating-symbol
  *
- * @slot - Default slot for projected symbols/icons.
+ * @slot - Default slot for projected full symbols/icons.
+ * @slot empty - Default slot for projected empty symbols/icons.
+ *
+ * @csspart symbol - The symbol wrapping container.
+ * @csspart full - The full symbol wrapping container.
+ * @csspart empty - The empty symbol wrapping container.
  */
 export default class IgcRatingSymbolComponent extends LitElement {
     static readonly tagName = "igc-rating-symbol";
-    protected createRenderRoot(): this;
+    static styles: import("lit").CSSResult[];
+    protected render(): import("lit-html").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/components/rating/rating-symbol.js

@@ -1,8 +1,17 @@
-import { LitElement } from 'lit';
+import { html, LitElement } from 'lit';
+import { styles } from './rating-symbol.base.css.js';
 export default class IgcRatingSymbolComponent extends LitElement {
-    createRenderRoot() {
-        return this;
+    render() {
+        return html `
+      <div part="symbol full">
+        <slot> </slot>
+      </div>
+      <div part="symbol empty">
+        <slot name="empty"></slot>
+      </div>
+    `;
     }
 }
 IgcRatingSymbolComponent.tagName = 'igc-rating-symbol';
+IgcRatingSymbolComponent.styles = [styles];
 //# sourceMappingURL=rating-symbol.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"rating-symbol.js","sourceRoot":"","sources":["../../../src/components/rating/rating-symbol.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAUjC,MAAM,CAAC,OAAO,OAAO,wBAAyB,SAAQ,UAAU;IAG3C,gBAAgB;QACjC,OAAO,IAAI,CAAC;IACd,CAAC;;AAJsB,gCAAO,GAAG,mBAAmB,CAAC","sourcesContent":["import { LitElement } from 'lit';\n\n/**\n *\n * Used when a custom icon/symbol/element needs to be passed to the igc-rating component.\n *\n * @element igc-rating-symbol\n *\n * @slot - Default slot for projected symbols/icons.\n */\nexport default class IgcRatingSymbolComponent extends LitElement {\n  public static readonly tagName = 'igc-rating-symbol';\n\n  protected override createRenderRoot() {\n    return this;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-rating-symbol': IgcRatingSymbolComponent;\n  }\n}\n"]}
+{"version":3,"file":"rating-symbol.js","sourceRoot":"","sources":["../../../src/components/rating/rating-symbol.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAerD,MAAM,CAAC,OAAO,OAAO,wBAAyB,SAAQ,UAAU;IAI3C,MAAM;QACvB,OAAO,IAAI,CAAA;;;;;;;KAOV,CAAC;IACJ,CAAC;;AAZsB,gCAAO,GAAG,mBAAmB,CAAC;AAC9B,+BAAM,GAAG,CAAC,MAAM,CAAC,CAAC","sourcesContent":["import { html, LitElement } from 'lit';\nimport { styles } from './rating-symbol.base.css.js';\n\n/**\n *\n * Used when a custom icon/symbol/element needs to be passed to the igc-rating component.\n *\n * @element igc-rating-symbol\n *\n * @slot - Default slot for projected full symbols/icons.\n * @slot empty - Default slot for projected empty symbols/icons.\n *\n * @csspart symbol - The symbol wrapping container.\n * @csspart full - The full symbol wrapping container.\n * @csspart empty - The empty symbol wrapping container.\n */\nexport default class IgcRatingSymbolComponent extends LitElement {\n  public static readonly tagName = 'igc-rating-symbol';\n  public static override styles = [styles];\n\n  protected override render() {\n    return html`\n      <div part=\"symbol full\">\n        <slot> </slot>\n      </div>\n      <div part=\"symbol empty\">\n        <slot name=\"empty\"></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-rating-symbol': IgcRatingSymbolComponent;\n  }\n}\n"]}

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

@@ -1,3 +1,140 @@
 import { css } from 'lit';
-export const styles = css `:host{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;scrollbar-width:var(--scrolbar-size, 0.875rem);scrollbar-color:var(--igc-scrollbar-thumb-color, hsla(var(--igc-gray-400), var(--igc-gray-a))) var(--igc-scrollbar-track-color, hsla(var(--igc-gray-200), var(--igc-gray-a)))}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host ::-webkit-scrollbar{width:var(--scrolbar-size, 0.875rem);height:var(--scrolbar-size, 0.875rem);background:var(--igc-scrollbar-track-color, hsla(var(--igc-gray-200), var(--igc-gray-a)))}:host ::-webkit-scrollbar-thumb{background:var(--igc-scrollbar-thumb-color, hsla(var(--igc-gray-400), var(--igc-gray-a)))}[hidden]{display:none !important}:host{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--igc-font-family);-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:.25rem}[part="symbols-wrapper selected"],[part~=fraction]{position:absolute !important;overflow:hidden;inset-inline-start:0 !important;min-width:0 !important;z-index:1}slot{display:none}[part=base]{position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}[part~=label]{font-family:var(--igc-caption-font-family);font-weight:var(--igc-caption-font-weight);font-size:var(--igc-caption-font-size);font-style:var(--igc-caption-font-style);letter-spacing:var(--igc-caption-letter-spacing);text-transform:var(--igc-caption-text-transform);line-height:var(--igc-caption-line-height);margin-top:var(--igc-caption-margin-top);margin-bottom:var(--igc-caption-margin-bottom);color:hsla(var(--igc-gray-700), var(--igc-gray-a));-webkit-padding-start:.125rem;padding-inline-start:.125rem}[part~=symbol]{color:inherit;font-size:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-filter:grayscale(100%);filter:grayscale(100%);cursor:pointer}[part~=symbol] igc-icon{color:inherit}[part~=symbol]:empty::before{content:counter(symbols);counter-increment:symbols}[part="symbol small"]{font-size:var(--symbol-size, 1.125rem)}[part="symbol medium"]{font-size:var(--symbol-size, 1.5rem)}[part="symbol large"]{font-size:var(--symbol-size, 2.25rem)}[part~=symbols-wrapper]{color:hsla(var(--igc-gray-900), var(--igc-gray-a));position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:.125rem;gap:.125rem;counter-reset:symbols;inset-inline-start:0}[part="symbols-wrapper selected"]{color:hsla(var(--igc-primary-500), var(--igc-primary-a))}[part="symbols-wrapper selected"] [part~=symbol]{-webkit-filter:grayscale(0);filter:grayscale(0)}:host([disabled]){pointer-events:none}:host([disabled]) [part~=label]{color:hsla(var(--igc-gray-400), var(--igc-gray-a)) !important}:host([disabled]) [part~=symbols-wrapper]{color:hsla(var(--igc-gray-400), var(--igc-gray-a))}:host([disabled]) [part="symbols-wrapper selected"]{color:hsla(var(--igc-gray-600), var(--igc-gray-a));-webkit-filter:grayscale(50%);filter:grayscale(50%)}[part~=large]{min-width:var(--symbol-size, 2.25rem);min-height:var(--symbol-size, 2.25rem);line-height:var(--symbol-size, 2.25rem);width:var(--symbol-size, 2.25rem);height:var(--symbol-size, 2.25rem)}[part~=large] igc-icon{width:var(--symbol-size, 2.25rem);height:var(--symbol-size, 2.25rem);font-size:var(--symbol-size, 2.25rem)}[part~=medium]{min-width:var(--symbol-size, 1.5rem);min-height:var(--symbol-size, 1.5rem);line-height:var(--symbol-size, 1.5rem);width:var(--symbol-size, 1.5rem);height:var(--symbol-size, 1.5rem)}[part~=medium] igc-icon{width:var(--symbol-size, 1.5rem);height:var(--symbol-size, 1.5rem);font-size:var(--symbol-size, 1.5rem)}[part~=small]{min-width:var(--symbol-size, 1.125rem);min-height:var(--symbol-size, 1.125rem);line-height:var(--symbol-size, 1.125rem);width:var(--symbol-size, 1.125rem);height:var(--symbol-size, 1.125rem)}[part~=small] igc-icon{width:var(--symbol-size, 1.125rem);height:var(--symbol-size, 1.125rem);font-size:var(--symbol-size, 1.125rem)}[part="label large"],[part="label medium"],[part="label small"]{height:auto;width:auto;min-height:0;min-width:0}[part="fraction large"]{min-height:calc(var(--symbol-size, 2.25rem) + (0.125rem * 2));height:calc(var(--symbol-size, 2.25rem) + (0.125rem * 2))}[part="fraction medium"]{min-height:calc(var(--symbol-size, 1.5rem) + (0.125rem * 2));height:calc(var(--symbol-size, 1.5rem) + (0.125rem * 2))}[part="fraction small"]{min-height:calc(var(--symbol-size, 1.125rem) + (0.125rem * 2));height:calc(var(--symbol-size, 1.125rem) + (0.125rem * 2))}`;
+export const styles = css `:host {
+  position: relative;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  scrollbar-width: var(--scrolbar-size, 0.875rem);
+  scrollbar-color: var(--igc-scrollbar-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a))) var(--igc-scrollbar-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+}
+:host *,
+:host *::before,
+:host *::after {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+:host ::-webkit-scrollbar {
+  width: var(--scrolbar-size, 0.875rem);
+  height: var(--scrolbar-size, 0.875rem);
+  background: var(--igc-scrollbar-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+}
+:host ::-webkit-scrollbar-thumb {
+  background: var(--igc-scrollbar-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+}
+
+[hidden] {
+  display: none !important;
+}
+
+:host {
+  --symbol-full-color: hsla(var(--ig-warn-500), var(--ig-warn-a));
+  --symbol-empty-color: hsla(var(--ig-gray-600), var(--ig-gray-a));
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  font-family: var(--ig-font-family);
+  -webkit-box-align: start;
+      -ms-flex-align: start;
+          align-items: flex-start;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  gap: 0.25rem;
+}
+
+:host([size=small]) {
+  --symbol-size: 1.125rem;
+}
+
+:host([size=medium]) {
+  --symbol-size: 1.5rem;
+}
+
+:host([size=large]) {
+  --symbol-size: 2.25rem;
+}
+
+[part=base] {
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  gap: 0.25rem;
+}
+
+[part~=symbols] {
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  padding: 0.125rem;
+  gap: 0.125rem;
+  inset-inline-start: 0;
+}
+
+[part~=value-label] {
+  font-family: var(--ig-subtitle-1-font-family);
+  font-size: var(--ig-subtitle-1-font-size);
+  font-weight: var(--ig-subtitle-1-font-weight);
+  font-style: var(--ig-subtitle-1-font-style);
+  line-height: var(--ig-subtitle-1-line-height);
+  letter-spacing: var(--ig-subtitle-1-letter-spacing);
+  text-transform: var(--ig-subtitle-1-text-transform);
+  margin-top: var(--ig-subtitle-1-margin-top);
+  margin-bottom: var(--ig-subtitle-1-margin-bottom);
+  color: hsla(var(--ig-gray-900), var(--ig-gray-a));
+}
+
+[part~=label] {
+  font-family: var(--ig-caption-font-family);
+  font-size: var(--ig-caption-font-size);
+  font-weight: var(--ig-caption-font-weight);
+  font-style: var(--ig-caption-font-style);
+  line-height: var(--ig-caption-line-height);
+  letter-spacing: var(--ig-caption-letter-spacing);
+  text-transform: var(--ig-caption-text-transform);
+  margin-top: var(--ig-caption-margin-top);
+  margin-bottom: var(--ig-caption-margin-bottom);
+  color: hsla(var(--ig-gray-700), var(--ig-gray-a));
+  -webkit-padding-start: 0.25rem;
+          padding-inline-start: 0.25rem;
+  height: auto;
+  width: auto;
+  min-height: 0;
+  min-width: 0;
+  margin: 0;
+}
+
+:host(:not([disabled], [readonly])) [part~=symbols] {
+  cursor: pointer;
+}
+
+: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] {
+  color: hsla(var(--ig-gray-400), var(--ig-gray-a));
+}
+: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,i3JAAi3J,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;scrollbar-width:var(--scrolbar-size, 0.875rem);scrollbar-color:var(--igc-scrollbar-thumb-color, hsla(var(--igc-gray-400), var(--igc-gray-a))) var(--igc-scrollbar-track-color, hsla(var(--igc-gray-200), var(--igc-gray-a)))}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host ::-webkit-scrollbar{width:var(--scrolbar-size, 0.875rem);height:var(--scrolbar-size, 0.875rem);background:var(--igc-scrollbar-track-color, hsla(var(--igc-gray-200), var(--igc-gray-a)))}:host ::-webkit-scrollbar-thumb{background:var(--igc-scrollbar-thumb-color, hsla(var(--igc-gray-400), var(--igc-gray-a)))}[hidden]{display:none !important}:host{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--igc-font-family);-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:.25rem}[part=\"symbols-wrapper selected\"],[part~=fraction]{position:absolute !important;overflow:hidden;inset-inline-start:0 !important;min-width:0 !important;z-index:1}slot{display:none}[part=base]{position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}[part~=label]{font-family:var(--igc-caption-font-family);font-weight:var(--igc-caption-font-weight);font-size:var(--igc-caption-font-size);font-style:var(--igc-caption-font-style);letter-spacing:var(--igc-caption-letter-spacing);text-transform:var(--igc-caption-text-transform);line-height:var(--igc-caption-line-height);margin-top:var(--igc-caption-margin-top);margin-bottom:var(--igc-caption-margin-bottom);color:hsla(var(--igc-gray-700), var(--igc-gray-a));-webkit-padding-start:.125rem;padding-inline-start:.125rem}[part~=symbol]{color:inherit;font-size:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-filter:grayscale(100%);filter:grayscale(100%);cursor:pointer}[part~=symbol] igc-icon{color:inherit}[part~=symbol]:empty::before{content:counter(symbols);counter-increment:symbols}[part=\"symbol small\"]{font-size:var(--symbol-size, 1.125rem)}[part=\"symbol medium\"]{font-size:var(--symbol-size, 1.5rem)}[part=\"symbol large\"]{font-size:var(--symbol-size, 2.25rem)}[part~=symbols-wrapper]{color:hsla(var(--igc-gray-900), var(--igc-gray-a));position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:.125rem;gap:.125rem;counter-reset:symbols;inset-inline-start:0}[part=\"symbols-wrapper selected\"]{color:hsla(var(--igc-primary-500), var(--igc-primary-a))}[part=\"symbols-wrapper selected\"] [part~=symbol]{-webkit-filter:grayscale(0);filter:grayscale(0)}:host([disabled]){pointer-events:none}:host([disabled]) [part~=label]{color:hsla(var(--igc-gray-400), var(--igc-gray-a)) !important}:host([disabled]) [part~=symbols-wrapper]{color:hsla(var(--igc-gray-400), var(--igc-gray-a))}:host([disabled]) [part=\"symbols-wrapper selected\"]{color:hsla(var(--igc-gray-600), var(--igc-gray-a));-webkit-filter:grayscale(50%);filter:grayscale(50%)}[part~=large]{min-width:var(--symbol-size, 2.25rem);min-height:var(--symbol-size, 2.25rem);line-height:var(--symbol-size, 2.25rem);width:var(--symbol-size, 2.25rem);height:var(--symbol-size, 2.25rem)}[part~=large] igc-icon{width:var(--symbol-size, 2.25rem);height:var(--symbol-size, 2.25rem);font-size:var(--symbol-size, 2.25rem)}[part~=medium]{min-width:var(--symbol-size, 1.5rem);min-height:var(--symbol-size, 1.5rem);line-height:var(--symbol-size, 1.5rem);width:var(--symbol-size, 1.5rem);height:var(--symbol-size, 1.5rem)}[part~=medium] igc-icon{width:var(--symbol-size, 1.5rem);height:var(--symbol-size, 1.5rem);font-size:var(--symbol-size, 1.5rem)}[part~=small]{min-width:var(--symbol-size, 1.125rem);min-height:var(--symbol-size, 1.125rem);line-height:var(--symbol-size, 1.125rem);width:var(--symbol-size, 1.125rem);height:var(--symbol-size, 1.125rem)}[part~=small] igc-icon{width:var(--symbol-size, 1.125rem);height:var(--symbol-size, 1.125rem);font-size:var(--symbol-size, 1.125rem)}[part=\"label large\"],[part=\"label medium\"],[part=\"label small\"]{height:auto;width:auto;min-height:0;min-width:0}[part=\"fraction large\"]{min-height:calc(var(--symbol-size, 2.25rem) + (0.125rem * 2));height:calc(var(--symbol-size, 2.25rem) + (0.125rem * 2))}[part=\"fraction medium\"]{min-height:calc(var(--symbol-size, 1.5rem) + (0.125rem * 2));height:calc(var(--symbol-size, 1.5rem) + (0.125rem * 2))}[part=\"fraction small\"]{min-height:calc(var(--symbol-size, 1.125rem) + (0.125rem * 2));height:calc(var(--symbol-size, 1.125rem) + (0.125rem * 2))}`;\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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyIvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  position: relative;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  scrollbar-width: var(--scrolbar-size, 0.875rem);\n  scrollbar-color: var(--igc-scrollbar-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a))) var(--igc-scrollbar-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));\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(--scrolbar-size, 0.875rem);\n  height: var(--scrolbar-size, 0.875rem);\n  background: var(--igc-scrollbar-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n}\n:host ::-webkit-scrollbar-thumb {\n  background: var(--igc-scrollbar-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n}\n\n[hidden] {\n  display: none !important;\n}\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=small]) {\n  --symbol-size: 1.125rem;\n}\n\n:host([size=medium]) {\n  --symbol-size: 1.5rem;\n}\n\n:host([size=large]) {\n  --symbol-size: 2.25rem;\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);\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);\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"]}