igniteui-webcomponents 4.0.0 → 4.1.0

package/components/select/themes/light/select.bootstrap.css.js

@@ -1,5 +1,5 @@
 import { css } from 'lit';
-export const styles = css `/* stylelint-disable max-line-length */
+export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
 :host ::slotted([slot=helper-text]) {
   font-family: var(--ig-body-2-font-family);
   font-size: var(--ig-body-2-font-size);
@@ -13,10 +13,6 @@ export const styles = css `/* stylelint-disable max-line-length */
   color: hsla(var(--ig-gray-700), var(--ig-gray-a));
 }
 
-:host([disabled]) ::slotted([slot=helper-text]) {
-  color: hsla(var(--ig-gray-700), var(--ig-gray-a));
-}
-
 :host(:focus-within) igc-input[readonly]:not([disabled])::part(input) {
   -webkit-box-shadow: 0 0 0 0.25rem hsla(var(--ig-primary-500), 0.38);
           box-shadow: 0 0 0 0.25rem hsla(var(--ig-primary-500), 0.38);
@@ -46,6 +42,8 @@ igc-input[readonly]:not([disabled])::part(container) {
   background: var(--input-background, #fff);
 }
 
+igc-input[readonly]:not([disabled])::part(prefix),
+igc-input[readonly]:not([disabled])::part(suffix),
 igc-input[readonly]:not([disabled])::part(input) {
   border-color: hsla(var(--ig-gray-400), var(--ig-gray-a));
 }

package/components/select/themes/light/select.bootstrap.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/select/themes/light/select.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkEvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length */\n:host ::slotted([slot=helper-text]) {\n  font-family: var(--ig-body-2-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-700), var(--ig-gray-a));\n}\n\n:host([disabled]) ::slotted([slot=helper-text]) {\n  color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n}\n\n:host(:focus-within) igc-input[readonly]:not([disabled])::part(input) {\n  -webkit-box-shadow: 0 0 0 0.25rem hsla(var(--ig-primary-500), 0.38);\n          box-shadow: 0 0 0 0.25rem hsla(var(--ig-primary-500), 0.38);\n  border-color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n}\n\n:host([invalid]) igc-input[readonly]:not([disabled])::part(input),\n:host([invalid]:focus-within) igc-input[readonly]:not([disabled])::part(input) {\n  -webkit-box-shadow: 0 0 0 0.25rem hsla(var(--ig-error-500), 0.38);\n          box-shadow: 0 0 0 0.25rem hsla(var(--ig-error-500), 0.38);\n  border-color: hsla(var(--ig-error-500), var(--ig-error-a));\n}\n\nigc-input[readonly]:not([disabled])::part(prefix),\nigc-input[readonly]:not([disabled])::part(suffix) {\n  color: hsla(var(--ig-gray-800), var(--ig-gray-a));\n  background: hsla(var(--ig-gray-300), var(--ig-gray-a));\n}\n\nigc-input[readonly]:not([disabled])::part(prefix),\nigc-input[readonly]:not([disabled])::part(suffix),\nigc-input[readonly]:not([disabled])::part(container) {\n  color: hsla(var(--ig-gray-800), var(--ig-gray-a));\n}\n\nigc-input[readonly]:not([disabled])::part(container) {\n  background: var(--input-background, #fff);\n}\n\nigc-input[readonly]:not([disabled])::part(input) {\n  border-color: hsla(var(--ig-gray-400), var(--ig-gray-a));\n}\n\nigc-input[disabled] {\n  pointer-events: none;\n}\n\nigc-input[disabled]::part(prefix),\nigc-input[disabled]::part(suffix),\nigc-input[disabled]::part(container) {\n  background: hsla(var(--ig-gray-100), var(--ig-gray-a));\n  color: hsla(var(--ig-gray-400), var(--ig-gray-a));\n}\n\nigc-input[disabled]::part(prefix),\nigc-input[disabled]::part(suffix),\nigc-input[disabled]::part(input) {\n  border-color: hsla(var(--ig-gray-300), var(--ig-gray-a));\n}`;\n"]}
+{"version":3,"file":"select.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/select/themes/light/select.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgEvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n:host ::slotted([slot=helper-text]) {\n  font-family: var(--ig-body-2-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-700), var(--ig-gray-a));\n}\n\n:host(:focus-within) igc-input[readonly]:not([disabled])::part(input) {\n  -webkit-box-shadow: 0 0 0 0.25rem hsla(var(--ig-primary-500), 0.38);\n          box-shadow: 0 0 0 0.25rem hsla(var(--ig-primary-500), 0.38);\n  border-color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n}\n\n:host([invalid]) igc-input[readonly]:not([disabled])::part(input),\n:host([invalid]:focus-within) igc-input[readonly]:not([disabled])::part(input) {\n  -webkit-box-shadow: 0 0 0 0.25rem hsla(var(--ig-error-500), 0.38);\n          box-shadow: 0 0 0 0.25rem hsla(var(--ig-error-500), 0.38);\n  border-color: hsla(var(--ig-error-500), var(--ig-error-a));\n}\n\nigc-input[readonly]:not([disabled])::part(prefix),\nigc-input[readonly]:not([disabled])::part(suffix) {\n  color: hsla(var(--ig-gray-800), var(--ig-gray-a));\n  background: hsla(var(--ig-gray-300), var(--ig-gray-a));\n}\n\nigc-input[readonly]:not([disabled])::part(prefix),\nigc-input[readonly]:not([disabled])::part(suffix),\nigc-input[readonly]:not([disabled])::part(container) {\n  color: hsla(var(--ig-gray-800), var(--ig-gray-a));\n}\n\nigc-input[readonly]:not([disabled])::part(container) {\n  background: var(--input-background, #fff);\n}\n\nigc-input[readonly]:not([disabled])::part(prefix),\nigc-input[readonly]:not([disabled])::part(suffix),\nigc-input[readonly]:not([disabled])::part(input) {\n  border-color: hsla(var(--ig-gray-400), var(--ig-gray-a));\n}\n\nigc-input[disabled] {\n  pointer-events: none;\n}\n\nigc-input[disabled]::part(prefix),\nigc-input[disabled]::part(suffix),\nigc-input[disabled]::part(container) {\n  background: hsla(var(--ig-gray-100), var(--ig-gray-a));\n  color: hsla(var(--ig-gray-400), var(--ig-gray-a));\n}\n\nigc-input[disabled]::part(prefix),\nigc-input[disabled]::part(suffix),\nigc-input[disabled]::part(input) {\n  border-color: hsla(var(--ig-gray-300), var(--ig-gray-a));\n}`;\n"]}

package/components/select/themes/light/select.fluent.css.js

@@ -1,5 +1,5 @@
 import { css } from 'lit';
-export const styles = css `/* stylelint-disable max-line-length */
+export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
 :host {
   --size: max(var(--is-large, 1) * 3rem, var(--is-medium, 1) * 2.5rem, var(--is-small, 1) * 2rem);
 }

package/components/select/themes/light/select.fluent.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/select/themes/light/select.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;EAuBvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length */\n:host {\n  --size: max(var(--is-large, 1) * 3rem, var(--is-medium, 1) * 2.5rem, var(--is-small, 1) * 2rem);\n}\n\n:host(:focus-within) igc-input[readonly]:not([disabled])::part(container) {\n  border-width: 0.125rem;\n}\n\n:host(:not([invalid]):focus-within) igc-input[readonly]:not([disabled])::part(container) {\n  border-color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n  border-width: 0.125rem;\n}\n:host(:not([invalid]):focus-within) igc-input[readonly]:not([disabled])::part(prefix) {\n  -webkit-margin-start: -0.0625rem;\n          margin-inline-start: -0.0625rem;\n}\n:host(:not([invalid]):focus-within) igc-input[readonly]:not([disabled])::part(suffix) {\n  -webkit-margin-end: -0.0625rem;\n          margin-inline-end: -0.0625rem;\n}\n:host(:not([invalid]):focus-within) igc-input[readonly]:not([disabled])::part(input) {\n  height: calc(var(--size) - 0.25rem);\n}`;\n"]}
+{"version":3,"file":"select.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/select/themes/light/select.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;EAuBvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n:host {\n  --size: max(var(--is-large, 1) * 3rem, var(--is-medium, 1) * 2.5rem, var(--is-small, 1) * 2rem);\n}\n\n:host(:focus-within) igc-input[readonly]:not([disabled])::part(container) {\n  border-width: 0.125rem;\n}\n\n:host(:not([invalid]):focus-within) igc-input[readonly]:not([disabled])::part(container) {\n  border-color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n  border-width: 0.125rem;\n}\n:host(:not([invalid]):focus-within) igc-input[readonly]:not([disabled])::part(prefix) {\n  -webkit-margin-start: -0.0625rem;\n          margin-inline-start: -0.0625rem;\n}\n:host(:not([invalid]):focus-within) igc-input[readonly]:not([disabled])::part(suffix) {\n  -webkit-margin-end: -0.0625rem;\n          margin-inline-end: -0.0625rem;\n}\n:host(:not([invalid]):focus-within) igc-input[readonly]:not([disabled])::part(input) {\n  height: calc(var(--size) - 0.25rem);\n}`;\n"]}

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

@@ -1,5 +1,9 @@
 import { css } from 'lit';
-export const styles = css `/* stylelint-disable max-line-length */
+export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
+[part~=toggle-icon] {
+  background: hsla(var(--ig-gray-300), var(--ig-gray-a));
+}
+
 :host ::slotted([slot=helper-text]) {
   color: hsla(var(--ig-gray-600), var(--ig-gray-a));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"select.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/select/themes/light/select.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;EAoBvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length */\n:host ::slotted([slot=helper-text]) {\n  color: hsla(var(--ig-gray-600), var(--ig-gray-a));\n}\n\n:host([disabled]) ::slotted([slot=helper-text]) {\n  color: hsla(var(--ig-gray-300), var(--ig-gray-a));\n}\n\n:host(:focus-within) igc-input[readonly]:not([disabled])::part(container)::after {\n  -webkit-transform: scaleY(1);\n      -ms-transform: scaleY(1);\n          transform: scaleY(1);\n}\n\n:host(:not([invalid]):focus-within) igc-input[readonly]:not([disabled])::part(container) {\n  background: hsla(var(--ig-gray-100), var(--ig-gray-a));\n}\n:host(:not([invalid]):focus-within) igc-input[readonly]:not([disabled])::part(label) {\n  color: var(--label-focus-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n}`;\n"]}
+{"version":3,"file":"select.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/select/themes/light/select.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;EAwBvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n[part~=toggle-icon] {\n  background: hsla(var(--ig-gray-300), var(--ig-gray-a));\n}\n\n:host ::slotted([slot=helper-text]) {\n  color: hsla(var(--ig-gray-600), var(--ig-gray-a));\n}\n\n:host([disabled]) ::slotted([slot=helper-text]) {\n  color: hsla(var(--ig-gray-300), var(--ig-gray-a));\n}\n\n:host(:focus-within) igc-input[readonly]:not([disabled])::part(container)::after {\n  -webkit-transform: scaleY(1);\n      -ms-transform: scaleY(1);\n          transform: scaleY(1);\n}\n\n:host(:not([invalid]):focus-within) igc-input[readonly]:not([disabled])::part(container) {\n  background: hsla(var(--ig-gray-100), var(--ig-gray-a));\n}\n:host(:not([invalid]):focus-within) igc-input[readonly]:not([disabled])::part(label) {\n  color: var(--label-focus-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n}`;\n"]}

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

@@ -1,5 +1,5 @@
 import { css } from 'lit';
-export const styles = css `/* stylelint-disable max-line-length */
+export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
 :host([outlined]:focus-within) igc-input[readonly]:not([disabled])::part(start) {
   border-color: hsla(var(--ig-primary-500), var(--ig-primary-a));
   border-inline-start-width: 0.125rem;
@@ -50,14 +50,11 @@ export const styles = css `/* stylelint-disable max-line-length */
   color: hsla(var(--ig-error-500), var(--ig-error-a));
 }
 
-:host(:not([outlined]):focus-within) igc-input[readonly]:not([disabled])::part(container) {
-  background: var(--focus-background, hsla(var(--ig-gray-300), var(--ig-gray-a)));
-  border-bottom: hsla(var(--ig-primary-500), var(--ig-primary-a));
-}
-:host(:not([outlined]):focus-within) igc-input[readonly]:not([disabled])::part(container)::after {
-  -webkit-transform: scaleX(1);
-      -ms-transform: scaleX(1);
-          transform: scaleX(1);
-  opacity: 1;
+[part~=toggle-icon] {
+  background: hsla(var(--ig-gray-300), var(--ig-gray-a));
+}
+
+igc-input:not([outlined]):focus-within [part~=toggle-icon] {
+  background: hsla(var(--ig-gray-400), 0.3);
 }`;
 //# sourceMappingURL=select.material.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"select.material.css.js","sourceRoot":"","sources":["../../../../../src/components/select/themes/light/select.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4DvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length */\n:host([outlined]:focus-within) igc-input[readonly]:not([disabled])::part(start) {\n  border-color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n  border-inline-start-width: 0.125rem;\n  border-block-start-width: 0.125rem;\n  border-block-end-width: 0.125rem;\n}\n:host([outlined]:focus-within) igc-input[readonly]:not([disabled])::part(notch) {\n  border-width: 0.125rem;\n  border-color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n  border-top: 0.0625rem solid transparent;\n}\n:host([outlined]:focus-within) igc-input[readonly]:not([disabled])::part(filler) {\n  border-width: 0.125rem;\n  border-color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n}\n:host([outlined]:focus-within) igc-input[readonly]:not([disabled])::part(end) {\n  border-color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n  border-inline-end-width: 0.125rem;\n  border-block-start-width: 0.125rem;\n  border-block-end-width: 0.125rem;\n}\n:host([outlined]:focus-within) igc-input[readonly]:not([disabled])::part(label) {\n  color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n}\n\n:host([outlined][invalid]:focus-within) igc-input[readonly]:not([disabled])::part(start) {\n  border-color: hsla(var(--ig-error-500), var(--ig-error-a));\n  border-inline-start-width: 0.125rem;\n  border-block-start-width: 0.125rem;\n  border-block-end-width: 0.125rem;\n}\n:host([outlined][invalid]:focus-within) igc-input[readonly]:not([disabled])::part(notch) {\n  border-width: 0.125rem;\n  border-color: hsla(var(--ig-error-500), var(--ig-error-a));\n  border-top: 0.0625rem solid transparent;\n}\n:host([outlined][invalid]:focus-within) igc-input[readonly]:not([disabled])::part(filler) {\n  border-width: 0.125rem;\n  border-color: hsla(var(--ig-error-500), var(--ig-error-a));\n}\n:host([outlined][invalid]:focus-within) igc-input[readonly]:not([disabled])::part(end) {\n  border-color: hsla(var(--ig-error-500), var(--ig-error-a));\n  border-inline-end-width: 0.125rem;\n  border-block-start-width: 0.125rem;\n  border-block-end-width: 0.125rem;\n}\n:host([outlined][invalid]:focus-within) igc-input[readonly]:not([disabled])::part(label) {\n  color: hsla(var(--ig-error-500), var(--ig-error-a));\n}\n\n:host(:not([outlined]):focus-within) igc-input[readonly]:not([disabled])::part(container) {\n  background: var(--focus-background, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n  border-bottom: hsla(var(--ig-primary-500), var(--ig-primary-a));\n}\n:host(:not([outlined]):focus-within) igc-input[readonly]:not([disabled])::part(container)::after {\n  -webkit-transform: scaleX(1);\n      -ms-transform: scaleX(1);\n          transform: scaleX(1);\n  opacity: 1;\n}`;\n"]}
+{"version":3,"file":"select.material.css.js","sourceRoot":"","sources":["../../../../../src/components/select/themes/light/select.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyDvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n:host([outlined]:focus-within) igc-input[readonly]:not([disabled])::part(start) {\n  border-color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n  border-inline-start-width: 0.125rem;\n  border-block-start-width: 0.125rem;\n  border-block-end-width: 0.125rem;\n}\n:host([outlined]:focus-within) igc-input[readonly]:not([disabled])::part(notch) {\n  border-width: 0.125rem;\n  border-color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n  border-top: 0.0625rem solid transparent;\n}\n:host([outlined]:focus-within) igc-input[readonly]:not([disabled])::part(filler) {\n  border-width: 0.125rem;\n  border-color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n}\n:host([outlined]:focus-within) igc-input[readonly]:not([disabled])::part(end) {\n  border-color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n  border-inline-end-width: 0.125rem;\n  border-block-start-width: 0.125rem;\n  border-block-end-width: 0.125rem;\n}\n:host([outlined]:focus-within) igc-input[readonly]:not([disabled])::part(label) {\n  color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n}\n\n:host([outlined][invalid]:focus-within) igc-input[readonly]:not([disabled])::part(start) {\n  border-color: hsla(var(--ig-error-500), var(--ig-error-a));\n  border-inline-start-width: 0.125rem;\n  border-block-start-width: 0.125rem;\n  border-block-end-width: 0.125rem;\n}\n:host([outlined][invalid]:focus-within) igc-input[readonly]:not([disabled])::part(notch) {\n  border-width: 0.125rem;\n  border-color: hsla(var(--ig-error-500), var(--ig-error-a));\n  border-top: 0.0625rem solid transparent;\n}\n:host([outlined][invalid]:focus-within) igc-input[readonly]:not([disabled])::part(filler) {\n  border-width: 0.125rem;\n  border-color: hsla(var(--ig-error-500), var(--ig-error-a));\n}\n:host([outlined][invalid]:focus-within) igc-input[readonly]:not([disabled])::part(end) {\n  border-color: hsla(var(--ig-error-500), var(--ig-error-a));\n  border-inline-end-width: 0.125rem;\n  border-block-start-width: 0.125rem;\n  border-block-end-width: 0.125rem;\n}\n:host([outlined][invalid]:focus-within) igc-input[readonly]:not([disabled])::part(label) {\n  color: hsla(var(--ig-error-500), var(--ig-error-a));\n}\n\n[part~=toggle-icon] {\n  background: hsla(var(--ig-gray-300), var(--ig-gray-a));\n}\n\nigc-input:not([outlined]):focus-within [part~=toggle-icon] {\n  background: hsla(var(--ig-gray-400), 0.3);\n}`;\n"]}

package/components/slider/range-slider.d.ts

@@ -47,19 +47,23 @@ export default class IgcRangeSliderComponent extends IgcRangeSliderComponent_bas
     set lower(val: number);
     /**
      * The current value of the lower thumb.
+     * @attr
      */
     get lower(): number;
     set upper(val: number);
     /**
      * The current value of the upper thumb.
+     * @attr
      */
     get upper(): number;
     /**
      * The aria label of the lower thumb.
+     * @attr aria-label-lower
      */
     ariaLabelLower: string;
     /**
      * The aria label of the upper thumb.
+     * @attr aria-label-upper
      */
     ariaLabelUpper: string;
     protected get activeValue(): number;

package/components/slider/range-slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"range-slider.js","sourceRoot":"","sources":["../../../src/components/slider/range-slider.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { IgcSliderBaseComponent } from './slider-base.js';\n\n/* blazorSuppress */\nexport interface IgcRangeSliderValue {\n  lower: number;\n  upper: number;\n}\n\nexport interface IgcRangeSliderEventMap {\n  /**\n   * Emitted when a value is changed via thumb drag or keyboard interaction.\n   */\n  igcInput: CustomEvent<IgcRangeSliderValue>;\n  /**\n   * Emitted when a value change is committed on a thumb drag end or keyboard interaction.\n   */\n  igcChange: CustomEvent<IgcRangeSliderValue>;\n}\n\n/**\n * A range slider component used to select two numeric values within a range.\n *\n * @element igc-range-slider\n *\n * @fires igcInput - Emitted when a value is changed via thumb drag or keyboard interaction.\n * @fires igcChange - Emitted when a value change is committed on a thumb drag end or keyboard interaction.\n *\n * @csspart base - The base wrapper of the slider.\n * @csspart ticks - The ticks container.\n * @csspart tick-group - The tick group container.\n * @csspart tick - The tick element.\n * @csspart tick-label - The tick label element.\n * @csspart tick-label-inner - The inner element of the tick label.\n * @csspart thumbs - The thumbs container.\n * @csspart thumb - The thumb element.\n * @csspart thumb-label - The thumb tooltip label container.\n * @csspart thumb-label-inner - The thumb tooltip label inner element.\n * @csspart track - The track container.\n * @csspart steps - The track steps element.\n * @csspart inactive - The inactive element of the track.\n * @csspart fill - The filled part of the track.\n */\nexport default class IgcRangeSliderComponent extends EventEmitterMixin<\n  IgcRangeSliderEventMap,\n  Constructor<IgcSliderBaseComponent>\n>(IgcSliderBaseComponent) {\n  public static readonly tagName = 'igc-range-slider';\n\n  @query(`#thumbFrom`)\n  private thumbFrom!: HTMLElement;\n\n  @query(`#thumbTo`)\n  private thumbTo!: HTMLElement;\n\n  private _lower = 0;\n  private _upper = 0;\n\n  public set lower(val: number) {\n    const oldVal = this._lower;\n    this._lower = this.validateValue(val);\n    this.requestUpdate('lower', oldVal);\n  }\n\n  /**\n   * The current value of the lower thumb.\n   */\n  @property({ type: Number })\n  public get lower() {\n    return this._lower;\n  }\n\n  public set upper(val: number) {\n    const oldVal = this._upper;\n    this._upper = this.validateValue(val);\n    this.requestUpdate('upper', oldVal);\n  }\n\n  /**\n   * The current value of the upper thumb.\n   */\n  @property({ type: Number })\n  public get upper() {\n    return this._upper;\n  }\n\n  /**\n   * The aria label of the lower thumb.\n   */\n  @property({ attribute: 'aria-label-lower' })\n  public ariaLabelLower!: string;\n\n  /**\n   * The aria label of the upper thumb.\n   */\n  @property({ attribute: 'aria-label-upper' })\n  public ariaLabelUpper!: string;\n\n  protected override get activeValue(): number {\n    return this.activeThumb === this.thumbFrom ? this.lower : this.upper;\n  }\n\n  protected override normalizeValue(): void {\n    this._lower = this.validateValue(this._lower);\n    this._upper = this.validateValue(this._upper);\n  }\n\n  protected override getTrackStyle() {\n    const toPosition = this.valueToFraction(this.upper);\n    const fromPosition = this.valueToFraction(this.lower);\n    const positionGap = toPosition - fromPosition;\n\n    const filledTrackStyle = {\n      width: `${positionGap * 100}%`,\n      insetInlineStart: `${fromPosition * 100}%`,\n    };\n\n    return filledTrackStyle;\n  }\n\n  private closestTo(goal: number, positions: number[]): number {\n    return positions.reduce((previous, current) =>\n      Math.abs(goal - current) < Math.abs(goal - previous) ? current : previous\n    );\n  }\n\n  protected override closestHandle(event: PointerEvent): HTMLElement {\n    const fromOffset =\n      this.thumbFrom.offsetLeft + this.thumbFrom.offsetWidth / 2;\n    const toOffset = this.thumbTo.offsetLeft + this.thumbTo.offsetWidth / 2;\n    const xPointer = event.clientX - this.getBoundingClientRect().left;\n    const match = this.closestTo(xPointer, [fromOffset, toOffset]);\n\n    if (fromOffset === toOffset && toOffset < xPointer) {\n      return this.thumbTo;\n    } else if (fromOffset === toOffset && toOffset > xPointer) {\n      return this.thumbFrom;\n    } else if (match === fromOffset) {\n      return this.thumbFrom;\n    } else {\n      return this.thumbTo;\n    }\n  }\n\n  protected override updateValue(increment: number) {\n    const oldValue = this.activeValue;\n\n    let lower = this.lower;\n    let upper = this.upper;\n\n    if (this.activeThumb === this.thumbFrom) {\n      lower += increment;\n    } else {\n      upper += increment;\n    }\n\n    if (lower >= upper) {\n      this.swapValues(lower, upper);\n      this.toggleActiveThumb();\n    } else {\n      if (this.activeThumb === this.thumbFrom) {\n        this.lower = lower;\n      } else {\n        this.upper = upper;\n      }\n    }\n\n    if (oldValue === this.activeValue) {\n      return false;\n    }\n\n    this.emitInputEvent();\n    return true;\n  }\n\n  protected override emitInputEvent() {\n    this.emitEvent('igcInput', {\n      detail: { lower: this.lower, upper: this.upper },\n    });\n  }\n\n  protected override emitChangeEvent() {\n    this.emitEvent('igcChange', {\n      detail: { lower: this.lower, upper: this.upper },\n    });\n  }\n\n  private swapValues(lower: number, upper: number) {\n    this.lower = upper;\n    this.upper = lower;\n  }\n\n  private toggleActiveThumb() {\n    const thumb =\n      this.activeThumb === this.thumbFrom ? this.thumbTo : this.thumbFrom;\n    thumb.focus();\n  }\n\n  private handleFocus(ev: Event) {\n    this.activeThumb = ev.target as HTMLElement;\n    const thumbId = this.activeThumb?.id;\n    const thumbs = this.shadowRoot?.querySelectorAll('div[part=\"thumb\"]');\n\n    thumbs?.forEach((t) => {\n      if (t.id !== thumbId) {\n        const activeThumbVal = parseFloat(this.activeThumb!.ariaValueNow!);\n        const thumbVal = parseFloat(t.ariaValueNow!);\n        const rangeFrom = Math.min(activeThumbVal, thumbVal);\n        const rangeTo = Math.max(activeThumbVal, thumbVal);\n\n        this.activeThumb?.setAttribute(\n          'aria-valuetext',\n          `${this.formatValue(rangeFrom)} - ${this.formatValue(rangeTo)}`\n        );\n      }\n    });\n  }\n\n  protected override renderThumb(\n    value: number,\n    ariaLabel?: string,\n    thumbId?: string\n  ) {\n    const percent = `${this.valueToFraction(value) * 100}%`;\n    const ariaValueText =\n      thumbId === 'thumbFrom' ? `min ${this.lower}` : `max ${this.upper}`;\n\n    const textValue = this.labels\n      ? this.labels[value]\n      : this.valueFormat || this.valueFormatOptions\n      ? this.formatValue(value)\n      : ariaValueText;\n\n    return html`\n      <div\n        part=\"thumb\"\n        id=${ifDefined(thumbId)}\n        tabindex=${this.disabled ? -1 : 0}\n        style=${styleMap({ insetInlineStart: percent })}\n        role=\"slider\"\n        aria-valuemin=${this.actualMin}\n        aria-valuemax=${this.actualMax}\n        aria-valuenow=${value}\n        aria-valuetext=${ifDefined(textValue)}\n        aria-label=${ifDefined(ariaLabel)}\n        aria-disabled=${this.disabled ? 'true' : 'false'}\n        @pointerenter=${this.handleThumbPointerEnter}\n        @pointerleave=${this.handleThumbPointerLeave}\n        @focus=${(ev: Event) => this.handleFocus(ev)}\n        @blur=${() => (\n          this.activeThumb?.part.remove('focused'),\n          (this.activeThumb = undefined)\n        )}\n      ></div>\n      ${this.hideTooltip\n        ? html``\n        : html`\n            <div\n              part=\"thumb-label\"\n              style=${styleMap({\n                opacity: this.thumbLabelsVisible ? '1' : '0',\n                insetInlineStart: percent,\n              })}\n            >\n              <div part=\"thumb-label-inner\">\n                ${this.labels ? this.labels[value] : this.formatValue(value)}\n              </div>\n            </div>\n          `}\n    `;\n  }\n\n  protected override renderThumbs() {\n    return html`${this.renderThumb(\n      this.lower,\n      this.ariaLabelLower,\n      'thumbFrom'\n    )}\n    ${this.renderThumb(this.upper, this.ariaLabelUpper, 'thumbTo')}`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-range-slider': IgcRangeSliderComponent;\n  }\n}\n"]}
+{"version":3,"file":"range-slider.js","sourceRoot":"","sources":["../../../src/components/slider/range-slider.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { IgcSliderBaseComponent } from './slider-base.js';\n\n/* blazorSuppress */\nexport interface IgcRangeSliderValue {\n  lower: number;\n  upper: number;\n}\n\nexport interface IgcRangeSliderEventMap {\n  /**\n   * Emitted when a value is changed via thumb drag or keyboard interaction.\n   */\n  igcInput: CustomEvent<IgcRangeSliderValue>;\n  /**\n   * Emitted when a value change is committed on a thumb drag end or keyboard interaction.\n   */\n  igcChange: CustomEvent<IgcRangeSliderValue>;\n}\n\n/**\n * A range slider component used to select two numeric values within a range.\n *\n * @element igc-range-slider\n *\n * @fires igcInput - Emitted when a value is changed via thumb drag or keyboard interaction.\n * @fires igcChange - Emitted when a value change is committed on a thumb drag end or keyboard interaction.\n *\n * @csspart base - The base wrapper of the slider.\n * @csspart ticks - The ticks container.\n * @csspart tick-group - The tick group container.\n * @csspart tick - The tick element.\n * @csspart tick-label - The tick label element.\n * @csspart tick-label-inner - The inner element of the tick label.\n * @csspart thumbs - The thumbs container.\n * @csspart thumb - The thumb element.\n * @csspart thumb-label - The thumb tooltip label container.\n * @csspart thumb-label-inner - The thumb tooltip label inner element.\n * @csspart track - The track container.\n * @csspart steps - The track steps element.\n * @csspart inactive - The inactive element of the track.\n * @csspart fill - The filled part of the track.\n */\nexport default class IgcRangeSliderComponent extends EventEmitterMixin<\n  IgcRangeSliderEventMap,\n  Constructor<IgcSliderBaseComponent>\n>(IgcSliderBaseComponent) {\n  public static readonly tagName = 'igc-range-slider';\n\n  @query(`#thumbFrom`)\n  private thumbFrom!: HTMLElement;\n\n  @query(`#thumbTo`)\n  private thumbTo!: HTMLElement;\n\n  private _lower = 0;\n  private _upper = 0;\n\n  public set lower(val: number) {\n    const oldVal = this._lower;\n    this._lower = this.validateValue(val);\n    this.requestUpdate('lower', oldVal);\n  }\n\n  /**\n   * The current value of the lower thumb.\n   * @attr\n   */\n  @property({ type: Number })\n  public get lower() {\n    return this._lower;\n  }\n\n  public set upper(val: number) {\n    const oldVal = this._upper;\n    this._upper = this.validateValue(val);\n    this.requestUpdate('upper', oldVal);\n  }\n\n  /**\n   * The current value of the upper thumb.\n   * @attr\n   */\n  @property({ type: Number })\n  public get upper() {\n    return this._upper;\n  }\n\n  /**\n   * The aria label of the lower thumb.\n   * @attr aria-label-lower\n   */\n  @property({ attribute: 'aria-label-lower' })\n  public ariaLabelLower!: string;\n\n  /**\n   * The aria label of the upper thumb.\n   * @attr aria-label-upper\n   */\n  @property({ attribute: 'aria-label-upper' })\n  public ariaLabelUpper!: string;\n\n  protected override get activeValue(): number {\n    return this.activeThumb === this.thumbFrom ? this.lower : this.upper;\n  }\n\n  protected override normalizeValue(): void {\n    this._lower = this.validateValue(this._lower);\n    this._upper = this.validateValue(this._upper);\n  }\n\n  protected override getTrackStyle() {\n    const toPosition = this.valueToFraction(this.upper);\n    const fromPosition = this.valueToFraction(this.lower);\n    const positionGap = toPosition - fromPosition;\n\n    const filledTrackStyle = {\n      width: `${positionGap * 100}%`,\n      insetInlineStart: `${fromPosition * 100}%`,\n    };\n\n    return filledTrackStyle;\n  }\n\n  private closestTo(goal: number, positions: number[]): number {\n    return positions.reduce((previous, current) =>\n      Math.abs(goal - current) < Math.abs(goal - previous) ? current : previous\n    );\n  }\n\n  protected override closestHandle(event: PointerEvent): HTMLElement {\n    const fromOffset =\n      this.thumbFrom.offsetLeft + this.thumbFrom.offsetWidth / 2;\n    const toOffset = this.thumbTo.offsetLeft + this.thumbTo.offsetWidth / 2;\n    const xPointer = event.clientX - this.getBoundingClientRect().left;\n    const match = this.closestTo(xPointer, [fromOffset, toOffset]);\n\n    if (fromOffset === toOffset && toOffset < xPointer) {\n      return this.thumbTo;\n    } else if (fromOffset === toOffset && toOffset > xPointer) {\n      return this.thumbFrom;\n    } else if (match === fromOffset) {\n      return this.thumbFrom;\n    } else {\n      return this.thumbTo;\n    }\n  }\n\n  protected override updateValue(increment: number) {\n    const oldValue = this.activeValue;\n\n    let lower = this.lower;\n    let upper = this.upper;\n\n    if (this.activeThumb === this.thumbFrom) {\n      lower += increment;\n    } else {\n      upper += increment;\n    }\n\n    if (lower >= upper) {\n      this.swapValues(lower, upper);\n      this.toggleActiveThumb();\n    } else {\n      if (this.activeThumb === this.thumbFrom) {\n        this.lower = lower;\n      } else {\n        this.upper = upper;\n      }\n    }\n\n    if (oldValue === this.activeValue) {\n      return false;\n    }\n\n    this.emitInputEvent();\n    return true;\n  }\n\n  protected override emitInputEvent() {\n    this.emitEvent('igcInput', {\n      detail: { lower: this.lower, upper: this.upper },\n    });\n  }\n\n  protected override emitChangeEvent() {\n    this.emitEvent('igcChange', {\n      detail: { lower: this.lower, upper: this.upper },\n    });\n  }\n\n  private swapValues(lower: number, upper: number) {\n    this.lower = upper;\n    this.upper = lower;\n  }\n\n  private toggleActiveThumb() {\n    const thumb =\n      this.activeThumb === this.thumbFrom ? this.thumbTo : this.thumbFrom;\n    thumb.focus();\n  }\n\n  private handleFocus(ev: Event) {\n    this.activeThumb = ev.target as HTMLElement;\n    const thumbId = this.activeThumb?.id;\n    const thumbs = this.shadowRoot?.querySelectorAll('div[part=\"thumb\"]');\n\n    thumbs?.forEach((t) => {\n      if (t.id !== thumbId) {\n        const activeThumbVal = parseFloat(this.activeThumb!.ariaValueNow!);\n        const thumbVal = parseFloat(t.ariaValueNow!);\n        const rangeFrom = Math.min(activeThumbVal, thumbVal);\n        const rangeTo = Math.max(activeThumbVal, thumbVal);\n\n        this.activeThumb?.setAttribute(\n          'aria-valuetext',\n          `${this.formatValue(rangeFrom)} - ${this.formatValue(rangeTo)}`\n        );\n      }\n    });\n  }\n\n  protected override renderThumb(\n    value: number,\n    ariaLabel?: string,\n    thumbId?: string\n  ) {\n    const percent = `${this.valueToFraction(value) * 100}%`;\n    const ariaValueText =\n      thumbId === 'thumbFrom' ? `min ${this.lower}` : `max ${this.upper}`;\n\n    const textValue = this.labels\n      ? this.labels[value]\n      : this.valueFormat || this.valueFormatOptions\n      ? this.formatValue(value)\n      : ariaValueText;\n\n    return html`\n      <div\n        part=\"thumb\"\n        id=${ifDefined(thumbId)}\n        tabindex=${this.disabled ? -1 : 0}\n        style=${styleMap({ insetInlineStart: percent })}\n        role=\"slider\"\n        aria-valuemin=${this.actualMin}\n        aria-valuemax=${this.actualMax}\n        aria-valuenow=${value}\n        aria-valuetext=${ifDefined(textValue)}\n        aria-label=${ifDefined(ariaLabel)}\n        aria-disabled=${this.disabled ? 'true' : 'false'}\n        @pointerenter=${this.handleThumbPointerEnter}\n        @pointerleave=${this.handleThumbPointerLeave}\n        @focus=${(ev: Event) => this.handleFocus(ev)}\n        @blur=${() => (\n          this.activeThumb?.part.remove('focused'),\n          (this.activeThumb = undefined)\n        )}\n      ></div>\n      ${this.hideTooltip\n        ? html``\n        : html`\n            <div\n              part=\"thumb-label\"\n              style=${styleMap({\n                opacity: this.thumbLabelsVisible ? '1' : '0',\n                insetInlineStart: percent,\n              })}\n            >\n              <div part=\"thumb-label-inner\">\n                ${this.labels ? this.labels[value] : this.formatValue(value)}\n              </div>\n            </div>\n          `}\n    `;\n  }\n\n  protected override renderThumbs() {\n    return html`${this.renderThumb(\n      this.lower,\n      this.ariaLabelLower,\n      'thumbFrom'\n    )}\n    ${this.renderThumb(this.upper, this.ariaLabelUpper, 'thumbTo')}`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-range-slider': IgcRangeSliderComponent;\n  }\n}\n"]}

package/components/slider/slider-base.d.ts

@@ -18,68 +18,83 @@ export declare class IgcSliderBaseComponent extends LitElement {
     set min(value: number);
     /**
      * The minimum value of the slider scale. Defaults to 0.
+     * @attr
      */
     get min(): number;
     set max(value: number);
     /**
      * The maximum value of the slider scale. Defaults to 100.
+     * @attr
      */
     get max(): number;
     set lowerBound(value: number | undefined);
     /**
      * The lower bound of the slider value. If not set, the `min` value is applied.
+     * @attr lower-bound
      */
     get lowerBound(): number | undefined;
     set upperBound(value: number | undefined);
     /**
      * The upper bound of the slider value. If not set, the `max` value is applied.
+     * @attr upper-bound
      */
     get upperBound(): number | undefined;
     /**
      * Disables the UI interactions of the slider.
+     * @attr
      */
     disabled: boolean;
     /**
      * Marks the slider track as discrete so it displays the steps.
      * If the `step` is 0, the slider will remain continuos even if `discreteTrack` is `true`.
+     * @attr discrete-track
      */
     discreteTrack: boolean;
     /**
      * Hides the thumb tooltip.
+     * @attr hide-tooltip
      */
     hideTooltip: boolean;
     set step(value: number);
     /**
      * Specifies the granularity that the value must adhere to.
      * If set to 0 no stepping is implied and any value in the range is allowed.
+     * @attr
      */
     get step(): number;
     /**
      * The number of primary ticks. It defaults to 0 which means no primary ticks are displayed.
+     * @attr primary-ticks
      */
     primaryTicks: number;
     /**
      * The number of secondary ticks. It defaults to 0 which means no secondary ticks are displayed.
+     * @attr secondary-ticks
      */
     secondaryTicks: number;
     /**
      * Changes the orientation of the ticks.
+     * @attr tick-orientation
      */
     tickOrientation: 'mirror' | 'start' | 'end';
     /**
      * Hides the primary tick labels.
+     * @attr hide-primary-labels
      */
     hidePrimaryLabels: boolean;
     /**
      * Hides the secondary tick labels.
+     * @attr hide-secondary-labels
      */
     hideSecondaryLabels: boolean;
     /**
      * The locale used to format the thumb and tick label values in the slider.
+     * @attr
      */
     locale: string;
     /**
      * String format used for the thumb and tick label values in the slider.
+     * @attr value-format
      */
     valueFormat?: string;
     /**
@@ -88,6 +103,7 @@ export declare class IgcSliderBaseComponent extends LitElement {
     valueFormatOptions?: Intl.NumberFormatOptions;
     /**
      * The degrees for the rotation of the tick labels. Defaults to 0.
+     * @attr tick-label-rotation
      */
     tickLabelRotation: 0 | 90 | -90;
     protected constraintsChange(): void;

package/components/slider/slider-base.js

@@ -22,6 +22,76 @@ import { blazorDeepImport } from '../common/decorators/blazorDeepImport.js';
 import { isLTR } from '../common/util.js';
 defineComponents(IgcSliderLabelComponent);
 let IgcSliderBaseComponent = class IgcSliderBaseComponent extends LitElement {
+    set min(value) {
+        if (value < this.max) {
+            const oldVal = this._min;
+            this._min = this.labels ? 0 : value;
+            this.requestUpdate('min', oldVal);
+            if (typeof this.lowerBound === 'number' && this.lowerBound < value) {
+                this.lowerBound = value;
+            }
+        }
+    }
+    get min() {
+        return this._min;
+    }
+    set max(value) {
+        if (value > this.min) {
+            const oldVal = this._max;
+            this._max = this.labels ? this.labels.length - 1 : value;
+            this.requestUpdate('max', oldVal);
+            if (typeof this.upperBound === 'number' && this.upperBound > value) {
+                this.upperBound = value;
+            }
+        }
+    }
+    get max() {
+        return this._max;
+    }
+    set lowerBound(value) {
+        const oldVal = this._lowerBound;
+        if (typeof value === 'number') {
+            this._lowerBound = this.valueInRange(value, this.min, this.actualMax);
+        }
+        else {
+            this._lowerBound = value;
+        }
+        this.requestUpdate('lowerBound', oldVal);
+    }
+    get lowerBound() {
+        return this._lowerBound;
+    }
+    set upperBound(value) {
+        const oldVal = this._upperBound;
+        if (typeof value === 'number') {
+            this._upperBound = this.valueInRange(value, this.actualMin, this.max);
+        }
+        else {
+            this._upperBound = value;
+        }
+        this.requestUpdate('upperBound', oldVal);
+    }
+    get upperBound() {
+        return this._upperBound;
+    }
+    set step(value) {
+        const oldVal = this._step;
+        this._step = this.labels ? 1 : value;
+        this.requestUpdate('step', oldVal);
+    }
+    get step() {
+        return this._step;
+    }
+    constraintsChange() {
+        this.normalizeValue();
+    }
+    labelsChange() {
+        if (this.labels) {
+            this.min = 0;
+            this.max = this.labels.length - 1;
+            this.step = 1;
+        }
+    }
     constructor() {
         super();
         this._min = 0;
@@ -121,76 +191,6 @@ let IgcSliderBaseComponent = class IgcSliderBaseComponent extends LitElement {
         this.addEventListener('lostpointercapture', this.lostPointerCapture);
         this.addEventListener('keydown', this.handleKeydown);
     }
-    set min(value) {
-        if (value < this.max) {
-            const oldVal = this._min;
-            this._min = this.labels ? 0 : value;
-            this.requestUpdate('min', oldVal);
-            if (typeof this.lowerBound === 'number' && this.lowerBound < value) {
-                this.lowerBound = value;
-            }
-        }
-    }
-    get min() {
-        return this._min;
-    }
-    set max(value) {
-        if (value > this.min) {
-            const oldVal = this._max;
-            this._max = this.labels ? this.labels.length - 1 : value;
-            this.requestUpdate('max', oldVal);
-            if (typeof this.upperBound === 'number' && this.upperBound > value) {
-                this.upperBound = value;
-            }
-        }
-    }
-    get max() {
-        return this._max;
-    }
-    set lowerBound(value) {
-        const oldVal = this._lowerBound;
-        if (typeof value === 'number') {
-            this._lowerBound = this.valueInRange(value, this.min, this.actualMax);
-        }
-        else {
-            this._lowerBound = value;
-        }
-        this.requestUpdate('lowerBound', oldVal);
-    }
-    get lowerBound() {
-        return this._lowerBound;
-    }
-    set upperBound(value) {
-        const oldVal = this._upperBound;
-        if (typeof value === 'number') {
-            this._upperBound = this.valueInRange(value, this.actualMin, this.max);
-        }
-        else {
-            this._upperBound = value;
-        }
-        this.requestUpdate('upperBound', oldVal);
-    }
-    get upperBound() {
-        return this._upperBound;
-    }
-    set step(value) {
-        const oldVal = this._step;
-        this._step = this.labels ? 1 : value;
-        this.requestUpdate('step', oldVal);
-    }
-    get step() {
-        return this._step;
-    }
-    constraintsChange() {
-        this.normalizeValue();
-    }
-    labelsChange() {
-        if (this.labels) {
-            this.min = 0;
-            this.max = this.labels.length - 1;
-            this.step = 1;
-        }
-    }
     connectedCallback() {
         super.connectedCallback();
         this.normalizeValue();