igniteui-webcomponents 4.3.0 → 4.4.0

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

@@ -1,74 +1,209 @@
 import { css } from 'lit';
-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 */
+export const styles = css `:host {
+  --search-resting-elevation: var(--ig-input-search-resting-elevation, var(--ig-elevation-1));
+  --search-hover-elevation: var(--ig-input-search-hover-elevation, var(--ig-elevation-2));
+  --search-disabled-elevation: var(--ig-input-search-disabled-elevation, var(--ig-elevation-0));
+  --helper-text-color: var(--ig-input-helper-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --input-prefix-background: var(--ig-input-input-prefix-background, transparent);
+  --input-prefix-color: var(--ig-input-input-prefix-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --input-prefix-background--filled: var(--ig-input-input-prefix-background--filled, inherit);
+  --input-prefix-color--filled: var(--ig-input-input-prefix-color--filled, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --input-prefix-background--focused: var(--ig-input-input-prefix-background--focused, inherit);
+  --input-prefix-color--focused: var(--ig-input-input-prefix-color--focused, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --input-suffix-background: var(--ig-input-input-suffix-background, transparent);
+  --input-suffix-color: var(--ig-input-input-suffix-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --input-suffix-background--filled: var(--ig-input-input-suffix-background--filled, inherit);
+  --input-suffix-color--filled: var(--ig-input-input-suffix-color--filled, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --input-suffix-background--focused: var(--ig-input-input-suffix-background--focused, inherit);
+  --input-suffix-color--focused: var(--ig-input-input-suffix-color--focused, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --idle-text-color: var(--ig-input-idle-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --filled-text-color: var(--ig-input-filled-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --focused-text-color: var(--ig-input-focused-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --disabled-text-color: var(--ig-input-disabled-text-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --idle-secondary-color: var(--ig-input-idle-secondary-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --filled-secondary-color: var(--ig-input-filled-secondary-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --focused-secondary-color: var(--ig-input-focused-secondary-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --idle-bottom-line-color: var(--ig-input-idle-bottom-line-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --hover-bottom-line-color: var(--ig-input-hover-bottom-line-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --focused-bottom-line-color: var(--ig-input-focused-bottom-line-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --interim-bottom-line-color: var(--ig-input-interim-bottom-line-color, hsla(var(--ig-primary-500), 0.12));
+  --disabled-bottom-line-color: var(--ig-input-disabled-bottom-line-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --disabled-border-color: var(--ig-input-disabled-border-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --border-color: var(--ig-input-border-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --hover-border-color: var(--ig-input-hover-border-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --focused-border-color: var(--ig-input-focused-border-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --border-background: var(--ig-input-border-background, transparent);
+  --border-disabled-background: var(--ig-input-border-disabled-background, transparent);
+  --search-background: var(--ig-input-search-background, hsla(var(--ig-gray-50), var(--ig-gray-a)));
+  --search-disabled-background: var(--ig-input-search-disabled-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --success-secondary-color: var(--ig-input-success-secondary-color, hsla(var(--ig-success-500), var(--ig-success-a)));
+  --warning-secondary-color: var(--ig-input-warning-secondary-color, hsla(var(--ig-warn-500), var(--ig-warn-a)));
+  --error-secondary-color: var(--ig-input-error-secondary-color, hsla(var(--ig-error-500), var(--ig-error-a)));
+  --placeholder-color: var(--ig-input-placeholder-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --disabled-placeholder-color: var(--ig-input-disabled-placeholder-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --box-background: var(--ig-input-box-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --box-background-hover: var(--ig-input-box-background-hover, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --box-background-focus: var(--ig-input-box-background-focus, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --box-disabled-background: var(--ig-input-box-disabled-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --box-border-radius: var(--ig-input-box-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));
+  --border-border-radius: var(--ig-input-border-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));
+  --search-border-radius: var(--ig-input-search-border-radius, 0.25rem, 0rem, 1.25rem);
+  --success-shadow-color: var(--ig-input-success-shadow-color, hsla(var(--ig-success-500), 0.38));
+  --error-shadow-color: var(--ig-input-error-shadow-color, hsla(var(--ig-error-500), 0.38));
+  --size: var(--ig-input-size, max(var(--is-large, 1) * max(3.5rem, -1 * 3.5rem), var(--is-medium, 1) * max(3rem, -1 * 3rem), var(--is-small, 1) * max(2.5rem, -1 * 2.5rem)));
+  --toggle-button-background-focus--border: var(--ig-select-toggle-button-background-focus--border, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --toggle-button-background: var(--ig-select-toggle-button-background, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --toggle-button-background-focus: var(--ig-select-toggle-button-background-focus, hsla(var(--ig-gray-400), 0.3));
+  --toggle-button-foreground: var(--ig-select-toggle-button-foreground, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --toggle-button-foreground-focus: var(--ig-select-toggle-button-foreground-focus, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --toggle-button-foreground-filled: var(--ig-select-toggle-button-foreground-filled, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --toggle-button-background-disabled: var(--ig-select-toggle-button-background-disabled, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --toggle-button-foreground-disabled: var(--ig-select-toggle-button-foreground-disabled, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --elevation: var(--ig-drop-down-elevation, var(--ig-elevation-8));
+  --background-color: var(--ig-drop-down-background-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));
+  --header-text-color: var(--ig-drop-down-header-text-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
+  --item-text-color: var(--ig-drop-down-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --hover-item-text-color: var(--ig-drop-down-hover-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --hover-item-background: var(--ig-drop-down-hover-item-background, hsla(var(--ig-gray-100), 0.8));
+  --focused-item-background: var(--ig-drop-down-focused-item-background, hsla(var(--ig-gray-100), 0.8));
+  --focused-item-text-color: var(--ig-drop-down-focused-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --selected-item-background: var(--ig-drop-down-selected-item-background, hsla(var(--ig-secondary-100), var(--ig-secondary-a)));
+  --selected-item-text-color: var(--ig-drop-down-selected-item-text-color, var(--ig-secondary-100-contrast));
+  --selected-hover-item-background: var(--ig-drop-down-selected-hover-item-background, hsla(var(--ig-secondary-200), var(--ig-secondary-a)));
+  --selected-hover-item-text-color: var(--ig-drop-down-selected-hover-item-text-color, var(--ig-secondary-200-contrast));
+  --selected-focus-item-background: var(--ig-drop-down-selected-focus-item-background, hsla(var(--ig-secondary-200), var(--ig-secondary-a)));
+  --selected-focus-item-text-color: var(--ig-drop-down-selected-focus-item-text-color, var(--ig-secondary-200-contrast));
+  --disabled-item-background: var(--ig-drop-down-disabled-item-background, hsla(var(--ig-gray-50), 0));
+  --disabled-item-text-color: var(--ig-drop-down-disabled-item-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --border-color: var(--ig-drop-down-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --border-width: var(--ig-drop-down-border-width, 0);
+  --border-radius: var(--ig-drop-down-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));
+  --item-border-radius: var(--ig-drop-down-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.25rem), 1.25rem));
+  --size: var(--ig-drop-down-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));
+}
+
+[part=base] {
+  background: var(--background-color);
+  border-radius: var(--border-radius);
+  -webkit-box-shadow: var(--ig-elevation-8);
+          box-shadow: var(--ig-elevation-8);
+  padding: 0.5rem 0;
+}
+
 :host([outlined]:focus-within) igc-input[readonly]:not([disabled])::part(start) {
-  border-color: hsla(var(--ig-primary-500), var(--ig-primary-a));
+  border-color: var(--focused-border-color);
   border-inline-start-width: 0.125rem;
   border-block-start-width: 0.125rem;
   border-block-end-width: 0.125rem;
 }
-:host([outlined]:focus-within) igc-input[readonly]:not([disabled])::part(notch) {
-  border-width: 0.125rem;
-  border-color: hsla(var(--ig-primary-500), var(--ig-primary-a));
-  border-top: 0.0625rem solid transparent;
-}
 :host([outlined]:focus-within) igc-input[readonly]:not([disabled])::part(filler) {
   border-width: 0.125rem;
-  border-color: hsla(var(--ig-primary-500), var(--ig-primary-a));
+  border-color: var(--focused-border-color);
+}
+:host([outlined]:focus-within) igc-input:not([invalid])::part(notch) {
+  border-bottom-width: 0.125rem;
+  border-bottom-color: var(--focused-border-color);
 }
 :host([outlined]:focus-within) igc-input[readonly]:not([disabled])::part(end) {
-  border-color: hsla(var(--ig-primary-500), var(--ig-primary-a));
+  border-color: var(--focused-border-color);
   border-inline-end-width: 0.125rem;
   border-block-start-width: 0.125rem;
   border-block-end-width: 0.125rem;
 }
 :host([outlined]:focus-within) igc-input[readonly]:not([disabled])::part(label) {
-  color: hsla(var(--ig-primary-500), var(--ig-primary-a));
+  color: var(--focused-border-color);
+}
+:host([outlined]:focus-within) [part~=toggle-icon] {
+  background: var(--toggle-button-background-focus--border);
 }
 
 :host([outlined][invalid]:focus-within) igc-input[readonly]:not([disabled])::part(start) {
-  border-color: hsla(var(--ig-error-500), var(--ig-error-a));
+  border-color: var(--error-secondary-color);
   border-inline-start-width: 0.125rem;
   border-block-start-width: 0.125rem;
   border-block-end-width: 0.125rem;
 }
-:host([outlined][invalid]:focus-within) igc-input[readonly]:not([disabled])::part(notch) {
-  border-width: 0.125rem;
-  border-color: hsla(var(--ig-error-500), var(--ig-error-a));
-  border-top: 0.0625rem solid transparent;
-}
 :host([outlined][invalid]:focus-within) igc-input[readonly]:not([disabled])::part(filler) {
   border-width: 0.125rem;
-  border-color: hsla(var(--ig-error-500), var(--ig-error-a));
+  border-color: var(--error-secondary-color);
 }
 :host([outlined][invalid]:focus-within) igc-input[readonly]:not([disabled])::part(end) {
-  border-color: hsla(var(--ig-error-500), var(--ig-error-a));
+  border-color: var(--error-secondary-color);
   border-inline-end-width: 0.125rem;
   border-block-start-width: 0.125rem;
   border-block-end-width: 0.125rem;
 }
 :host([outlined][invalid]:focus-within) igc-input[readonly]:not([disabled])::part(label) {
-  color: hsla(var(--ig-error-500), var(--ig-error-a));
+  color: var(--error-secondary-color);
+}
+
+:host(:not([outlined]):focus-within) igc-input::part(container) {
+  background: var(--box-background-focus);
+  border-bottom-color: var(--focused-bottom-line-color);
+}
+:host(:not([outlined]):focus-within) [part~=toggle-icon] {
+  background: var(--toggle-button-background-focus);
+}
+
+:host(:focus-within) [part~=toggle-icon] {
+  background: var(--toggle-button-background-focus--border);
+  color: var(--toggle-button-foreground-focus);
+}
+:host(:focus-within) [part~=toggle-icon] igc-icon {
+  color: inherit;
+}
+
+:host(:not([outlined])[invalid]:focus-within) igc-input::part(container) {
+  border-bottom-color: var(--error-secondary-color);
 }
 
 [part~=toggle-icon] {
-  background: hsla(var(--ig-gray-300), var(--ig-gray-a));
+  background: var(--toggle-button-background);
+  color: var(--toggle-button-foreground);
+}
+[part~=toggle-icon] igc-icon {
+  color: inherit;
+}
+
+[part="toggle-icon filled"] {
+  color: var(--toggle-button-foreground-filled);
 }
 
 [part=helper-text] {
-  color: hsla(var(--ig-gray-700), var(--ig-gray-a));
+  color: var(--helper-text-color);
   margin-top: 0.3125rem;
   padding-inline: max(var(--is-large, 1) * max(1.125rem, -1 * 1.125rem) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * max(0.875rem, -1 * 0.875rem) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));
 }
 
+:host([invalid]) [part=helper-text] {
+  color: var(--error-secondary-color);
+}
+
+:host([disabled]) igc-input::part(input)::-moz-selection, :host(:disabled) igc-input::part(input)::-moz-selection {
+  background: transparent;
+}
+
+:host([disabled]) igc-input::part(input)::selection,
+:host(:disabled) igc-input::part(input)::selection {
+  background: transparent;
+}
 :host([disabled]) [part~=toggle-icon],
-:host([disabled]) ::slotted([slot=helper-text]) {
-  color: hsla(var(--ig-gray-500), var(--ig-gray-a));
+:host(:disabled) [part~=toggle-icon] {
+  background: var(--toggle-button-background-disabled);
+  color: var(--toggle-button-foreground-disabled);
+}
+:host([disabled]) [part~=toggle-icon] igc-icon,
+:host(:disabled) [part~=toggle-icon] igc-icon {
+  color: inherit;
 }
-:host([disabled]) [part~=toggle-icon] {
-  background: hsla(var(--ig-gray-100), var(--ig-gray-a));
+:host([disabled]) [part=helper-text],
+:host(:disabled) [part=helper-text] {
+  color: var(--disabled-text-color);
 }
 
-igc-input:not([outlined]):focus-within [part~=toggle-icon] {
-  background: hsla(var(--ig-gray-400), 0.3);
+:host(:disabled[outlined]) igc-input::part(filled) + igc-input::part(notch),
+:host([outlined][disabled]) igc-input::part(filled) + igc-input::part(notch),
+:host([outlined][invalid]) igc-input::part(filled) + igc-input::part(notch) {
+  border-top-color: transparent;
 }`;
 //# 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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuEvB,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\n[part=helper-text] {\n  color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n  margin-top: 0.3125rem;\n  padding-inline: max(var(--is-large, 1) * max(1.125rem, -1 * 1.125rem) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * max(0.875rem, -1 * 0.875rem) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));\n}\n\n:host([disabled]) [part~=toggle-icon],\n:host([disabled]) ::slotted([slot=helper-text]) {\n  color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n}\n:host([disabled]) [part~=toggle-icon] {\n  background: hsla(var(--ig-gray-100), 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"]}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8MvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --search-resting-elevation: var(--ig-input-search-resting-elevation, var(--ig-elevation-1));\n  --search-hover-elevation: var(--ig-input-search-hover-elevation, var(--ig-elevation-2));\n  --search-disabled-elevation: var(--ig-input-search-disabled-elevation, var(--ig-elevation-0));\n  --helper-text-color: var(--ig-input-helper-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --input-prefix-background: var(--ig-input-input-prefix-background, transparent);\n  --input-prefix-color: var(--ig-input-input-prefix-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --input-prefix-background--filled: var(--ig-input-input-prefix-background--filled, inherit);\n  --input-prefix-color--filled: var(--ig-input-input-prefix-color--filled, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --input-prefix-background--focused: var(--ig-input-input-prefix-background--focused, inherit);\n  --input-prefix-color--focused: var(--ig-input-input-prefix-color--focused, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --input-suffix-background: var(--ig-input-input-suffix-background, transparent);\n  --input-suffix-color: var(--ig-input-input-suffix-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --input-suffix-background--filled: var(--ig-input-input-suffix-background--filled, inherit);\n  --input-suffix-color--filled: var(--ig-input-input-suffix-color--filled, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --input-suffix-background--focused: var(--ig-input-input-suffix-background--focused, inherit);\n  --input-suffix-color--focused: var(--ig-input-input-suffix-color--focused, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --idle-text-color: var(--ig-input-idle-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --filled-text-color: var(--ig-input-filled-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --focused-text-color: var(--ig-input-focused-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --disabled-text-color: var(--ig-input-disabled-text-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n  --idle-secondary-color: var(--ig-input-idle-secondary-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --filled-secondary-color: var(--ig-input-filled-secondary-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));\n  --focused-secondary-color: var(--ig-input-focused-secondary-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --idle-bottom-line-color: var(--ig-input-idle-bottom-line-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n  --hover-bottom-line-color: var(--ig-input-hover-bottom-line-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n  --focused-bottom-line-color: var(--ig-input-focused-bottom-line-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --interim-bottom-line-color: var(--ig-input-interim-bottom-line-color, hsla(var(--ig-primary-500), 0.12));\n  --disabled-bottom-line-color: var(--ig-input-disabled-bottom-line-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n  --disabled-border-color: var(--ig-input-disabled-border-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n  --border-color: var(--ig-input-border-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));\n  --hover-border-color: var(--ig-input-hover-border-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --focused-border-color: var(--ig-input-focused-border-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --border-background: var(--ig-input-border-background, transparent);\n  --border-disabled-background: var(--ig-input-border-disabled-background, transparent);\n  --search-background: var(--ig-input-search-background, hsla(var(--ig-gray-50), var(--ig-gray-a)));\n  --search-disabled-background: var(--ig-input-search-disabled-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n  --success-secondary-color: var(--ig-input-success-secondary-color, hsla(var(--ig-success-500), var(--ig-success-a)));\n  --warning-secondary-color: var(--ig-input-warning-secondary-color, hsla(var(--ig-warn-500), var(--ig-warn-a)));\n  --error-secondary-color: var(--ig-input-error-secondary-color, hsla(var(--ig-error-500), var(--ig-error-a)));\n  --placeholder-color: var(--ig-input-placeholder-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --disabled-placeholder-color: var(--ig-input-disabled-placeholder-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n  --box-background: var(--ig-input-box-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n  --box-background-hover: var(--ig-input-box-background-hover, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n  --box-background-focus: var(--ig-input-box-background-focus, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n  --box-disabled-background: var(--ig-input-box-disabled-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n  --box-border-radius: var(--ig-input-box-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));\n  --border-border-radius: var(--ig-input-border-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));\n  --search-border-radius: var(--ig-input-search-border-radius, 0.25rem, 0rem, 1.25rem);\n  --success-shadow-color: var(--ig-input-success-shadow-color, hsla(var(--ig-success-500), 0.38));\n  --error-shadow-color: var(--ig-input-error-shadow-color, hsla(var(--ig-error-500), 0.38));\n  --size: var(--ig-input-size, max(var(--is-large, 1) * max(3.5rem, -1 * 3.5rem), var(--is-medium, 1) * max(3rem, -1 * 3rem), var(--is-small, 1) * max(2.5rem, -1 * 2.5rem)));\n  --toggle-button-background-focus--border: var(--ig-select-toggle-button-background-focus--border, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n  --toggle-button-background: var(--ig-select-toggle-button-background, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n  --toggle-button-background-focus: var(--ig-select-toggle-button-background-focus, hsla(var(--ig-gray-400), 0.3));\n  --toggle-button-foreground: var(--ig-select-toggle-button-foreground, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --toggle-button-foreground-focus: var(--ig-select-toggle-button-foreground-focus, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --toggle-button-foreground-filled: var(--ig-select-toggle-button-foreground-filled, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --toggle-button-background-disabled: var(--ig-select-toggle-button-background-disabled, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n  --toggle-button-foreground-disabled: var(--ig-select-toggle-button-foreground-disabled, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n  --elevation: var(--ig-drop-down-elevation, var(--ig-elevation-8));\n  --background-color: var(--ig-drop-down-background-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --header-text-color: var(--ig-drop-down-header-text-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));\n  --item-text-color: var(--ig-drop-down-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n  --hover-item-text-color: var(--ig-drop-down-hover-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n  --hover-item-background: var(--ig-drop-down-hover-item-background, hsla(var(--ig-gray-100), 0.8));\n  --focused-item-background: var(--ig-drop-down-focused-item-background, hsla(var(--ig-gray-100), 0.8));\n  --focused-item-text-color: var(--ig-drop-down-focused-item-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n  --selected-item-background: var(--ig-drop-down-selected-item-background, hsla(var(--ig-secondary-100), var(--ig-secondary-a)));\n  --selected-item-text-color: var(--ig-drop-down-selected-item-text-color, var(--ig-secondary-100-contrast));\n  --selected-hover-item-background: var(--ig-drop-down-selected-hover-item-background, hsla(var(--ig-secondary-200), var(--ig-secondary-a)));\n  --selected-hover-item-text-color: var(--ig-drop-down-selected-hover-item-text-color, var(--ig-secondary-200-contrast));\n  --selected-focus-item-background: var(--ig-drop-down-selected-focus-item-background, hsla(var(--ig-secondary-200), var(--ig-secondary-a)));\n  --selected-focus-item-text-color: var(--ig-drop-down-selected-focus-item-text-color, var(--ig-secondary-200-contrast));\n  --disabled-item-background: var(--ig-drop-down-disabled-item-background, hsla(var(--ig-gray-50), 0));\n  --disabled-item-text-color: var(--ig-drop-down-disabled-item-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n  --border-color: var(--ig-drop-down-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n  --border-width: var(--ig-drop-down-border-width, 0);\n  --border-radius: var(--ig-drop-down-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));\n  --item-border-radius: var(--ig-drop-down-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.25rem), 1.25rem));\n  --size: var(--ig-drop-down-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));\n}\n\n[part=base] {\n  background: var(--background-color);\n  border-radius: var(--border-radius);\n  -webkit-box-shadow: var(--ig-elevation-8);\n          box-shadow: var(--ig-elevation-8);\n  padding: 0.5rem 0;\n}\n\n:host([outlined]:focus-within) igc-input[readonly]:not([disabled])::part(start) {\n  border-color: var(--focused-border-color);\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(filler) {\n  border-width: 0.125rem;\n  border-color: var(--focused-border-color);\n}\n:host([outlined]:focus-within) igc-input:not([invalid])::part(notch) {\n  border-bottom-width: 0.125rem;\n  border-bottom-color: var(--focused-border-color);\n}\n:host([outlined]:focus-within) igc-input[readonly]:not([disabled])::part(end) {\n  border-color: var(--focused-border-color);\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: var(--focused-border-color);\n}\n:host([outlined]:focus-within) [part~=toggle-icon] {\n  background: var(--toggle-button-background-focus--border);\n}\n\n:host([outlined][invalid]:focus-within) igc-input[readonly]:not([disabled])::part(start) {\n  border-color: var(--error-secondary-color);\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(filler) {\n  border-width: 0.125rem;\n  border-color: var(--error-secondary-color);\n}\n:host([outlined][invalid]:focus-within) igc-input[readonly]:not([disabled])::part(end) {\n  border-color: var(--error-secondary-color);\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: var(--error-secondary-color);\n}\n\n:host(:not([outlined]):focus-within) igc-input::part(container) {\n  background: var(--box-background-focus);\n  border-bottom-color: var(--focused-bottom-line-color);\n}\n:host(:not([outlined]):focus-within) [part~=toggle-icon] {\n  background: var(--toggle-button-background-focus);\n}\n\n:host(:focus-within) [part~=toggle-icon] {\n  background: var(--toggle-button-background-focus--border);\n  color: var(--toggle-button-foreground-focus);\n}\n:host(:focus-within) [part~=toggle-icon] igc-icon {\n  color: inherit;\n}\n\n:host(:not([outlined])[invalid]:focus-within) igc-input::part(container) {\n  border-bottom-color: var(--error-secondary-color);\n}\n\n[part~=toggle-icon] {\n  background: var(--toggle-button-background);\n  color: var(--toggle-button-foreground);\n}\n[part~=toggle-icon] igc-icon {\n  color: inherit;\n}\n\n[part=\"toggle-icon filled\"] {\n  color: var(--toggle-button-foreground-filled);\n}\n\n[part=helper-text] {\n  color: var(--helper-text-color);\n  margin-top: 0.3125rem;\n  padding-inline: max(var(--is-large, 1) * max(1.125rem, -1 * 1.125rem) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * max(0.875rem, -1 * 0.875rem) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));\n}\n\n:host([invalid]) [part=helper-text] {\n  color: var(--error-secondary-color);\n}\n\n:host([disabled]) igc-input::part(input)::-moz-selection, :host(:disabled) igc-input::part(input)::-moz-selection {\n  background: transparent;\n}\n\n:host([disabled]) igc-input::part(input)::selection,\n:host(:disabled) igc-input::part(input)::selection {\n  background: transparent;\n}\n:host([disabled]) [part~=toggle-icon],\n:host(:disabled) [part~=toggle-icon] {\n  background: var(--toggle-button-background-disabled);\n  color: var(--toggle-button-foreground-disabled);\n}\n:host([disabled]) [part~=toggle-icon] igc-icon,\n:host(:disabled) [part~=toggle-icon] igc-icon {\n  color: inherit;\n}\n:host([disabled]) [part=helper-text],\n:host(:disabled) [part=helper-text] {\n  color: var(--disabled-text-color);\n}\n\n:host(:disabled[outlined]) igc-input::part(filled) + igc-input::part(notch),\n:host([outlined][disabled]) igc-input::part(filled) + igc-input::part(notch),\n:host([outlined][invalid]) igc-input::part(filled) + igc-input::part(notch) {\n  border-top-color: transparent;\n}`;\n"]}

package/components/slider/slider.d.ts

@@ -10,7 +10,7 @@ export interface IgcSliderEventMap {
      */
     igcChange: CustomEvent<number>;
 }
-declare const IgcSliderComponent_base: import("../common/mixins/constructor.js").AbstractConstructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcSliderEventMap>> & Constructor<IgcSliderBaseComponent>;
+declare const IgcSliderComponent_base: Constructor<import("../common/mixins/form-associated.js").FormAssociatedElementInterface> & import("../common/mixins/constructor.js").AbstractConstructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcSliderEventMap>> & Constructor<IgcSliderBaseComponent>;
 /**
  * A slider component used to select numeric value within a range.
  *
@@ -36,20 +36,12 @@ declare const IgcSliderComponent_base: import("../common/mixins/constructor.js")
  */
 export default class IgcSliderComponent extends IgcSliderComponent_base {
     static readonly tagName = "igc-slider";
-    private _value;
-    private _ariaLabel;
-    set value(val: number);
     /**
-     * The current value of the slider.
+     * The current value of the component.
      * @attr
      */
-    get value(): number;
-    set ariaLabel(value: string);
-    /**
-     * The aria label of the slider thumb.
-     * @attr
-     */
-    get ariaLabel(): string;
+    value: number;
+    protected valueChanged(): void;
     protected get activeValue(): number;
     protected normalizeValue(): void;
     protected getTrackStyle(): {

package/components/slider/slider.js

@@ -6,37 +6,24 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
+import { watch } from '../common/decorators/watch.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
+import { FormAssociatedMixin } from '../common/mixins/form-associated.js';
 import { IgcSliderBaseComponent } from './slider-base.js';
-class IgcSliderComponent extends EventEmitterMixin(IgcSliderBaseComponent) {
+class IgcSliderComponent extends FormAssociatedMixin(EventEmitterMixin(IgcSliderBaseComponent)) {
     constructor() {
         super(...arguments);
-        this._value = 0;
+        this.value = 0;
     }
-    set value(val) {
-        const oldVal = this._value;
-        this._value = this.validateValue(val);
-        this.requestUpdate('value', oldVal);
-    }
-    get value() {
-        return this._value;
-    }
-    set ariaLabel(value) {
-        const oldVal = this._ariaLabel;
-        this._ariaLabel = value;
-        if (this.hasAttribute('aria-label')) {
-            this.removeAttribute('aria-label');
-        }
-        this.requestUpdate('ariaLabel', oldVal);
-    }
-    get ariaLabel() {
-        return this._ariaLabel;
+    valueChanged() {
+        this.value = this.validateValue(this.value);
+        this.setFormValue(`${this.value}`);
     }
     get activeValue() {
         return this.value;
     }
     normalizeValue() {
-        this._value = this.validateValue(this._value);
+        this.value = this.validateValue(this.value);
     }
     getTrackStyle() {
         const position = this.valueToFraction(this.value);
@@ -67,15 +54,19 @@ class IgcSliderComponent extends EventEmitterMixin(IgcSliderBaseComponent) {
         this.value = this.value - stepDecrement * this.step;
     }
     renderThumbs() {
-        return html `${this.renderThumb(this.value, this.ariaLabel)}`;
+        const ariaLabel = this.getAttribute('aria-label');
+        if (ariaLabel) {
+            this.removeAttribute('aria-label');
+        }
+        return html `${this.renderThumb(this.value, ariaLabel)}`;
     }
 }
 IgcSliderComponent.tagName = 'igc-slider';
 __decorate([
     property({ type: Number })
-], IgcSliderComponent.prototype, "value", null);
+], IgcSliderComponent.prototype, "value", void 0);
 __decorate([
-    property({ attribute: 'aria-label' })
-], IgcSliderComponent.prototype, "ariaLabel", null);
+    watch('value')
+], IgcSliderComponent.prototype, "valueChanged", null);
 export default IgcSliderComponent;
 //# sourceMappingURL=slider.js.map

package/components/slider/slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.js","sourceRoot":"","sources":["../../../src/components/slider/slider.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAoC1D,MAAqB,kBAAmB,SAAQ,iBAAiB,CAG/D,sBAAsB,CAAC;IAHzB;;QAMU,WAAM,GAAG,CAAC,CAAC;IA8FrB,CAAC;IA3FC,IAAW,KAAK,CAAC,GAAW;QAC1B,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;QAC3B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;QACtC,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IACtC,CAAC;IAOD,IAAW,KAAK;QACd,OAAO,IAAI,CAAC,MAAM,CAAC;IACrB,CAAC;IAED,IAAoB,SAAS,CAAC,KAAa;QACzC,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC;QAC/B,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;QAExB,IAAI,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE;YACnC,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC;SACpC;QACD,IAAI,CAAC,aAAa,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;IAC1C,CAAC;IAOD,IAAoB,SAAS;QAC3B,OAAO,IAAI,CAAC,UAAU,CAAC;IACzB,CAAC;IAED,IAAuB,WAAW;QAChC,OAAO,IAAI,CAAC,KAAK,CAAC;IACpB,CAAC;IAEkB,cAAc;QAC/B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAChD,CAAC;IAEkB,aAAa;QAC9B,MAAM,QAAQ,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAClD,MAAM,gBAAgB,GAAG;YACvB,KAAK,EAAE,GAAG,QAAQ,GAAG,GAAG,GAAG;SAC5B,CAAC;QAEF,OAAO,gBAAgB,CAAC;IAC1B,CAAC;IAEkB,WAAW,CAAC,SAAiB;QAC9C,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC;QAE5B,IAAI,CAAC,KAAK,GAAI,IAAI,CAAC,KAAgB,GAAG,SAAS,CAAC;QAEhD,IAAI,QAAQ,KAAK,IAAI,CAAC,KAAK,EAAE;YAC3B,OAAO,KAAK,CAAC;SACd;QAED,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,OAAO,IAAI,CAAC;IACd,CAAC;IAEkB,cAAc;QAC/B,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;IACrD,CAAC;IAEkB,eAAe;QAChC,IAAI,CAAC,SAAS,CAAC,WAAW,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;IACtD,CAAC;IAMM,MAAM,CAAC,aAAa,GAAG,CAAC;QAC7B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC;IACtD,CAAC;IAMM,QAAQ,CAAC,aAAa,GAAG,CAAC;QAC/B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC;IACtD,CAAC;IAEkB,YAAY;QAC7B,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC;IAC/D,CAAC;;AA/FsB,0BAAO,GAAG,YAAY,AAAf,CAAgB;AAgB9C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAG1B;AAiBD;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;mDAGrC;eAzCkB,kBAAkB","sourcesContent":["import { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { IgcSliderBaseComponent } from './slider-base.js';\n\nexport interface IgcSliderEventMap {\n  /**\n   * Emitted when a value is changed via thumb drag or keyboard interaction.\n   */\n  igcInput: CustomEvent<number>;\n  /**\n   * Emitted when a value change is committed on a thumb drag end or keyboard interaction.\n   */\n  igcChange: CustomEvent<number>;\n}\n\n/**\n * A slider component used to select numeric value within a range.\n *\n * @element igc-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 IgcSliderComponent extends EventEmitterMixin<\n  IgcSliderEventMap,\n  Constructor<IgcSliderBaseComponent>\n>(IgcSliderBaseComponent) {\n  public static readonly tagName = 'igc-slider';\n\n  private _value = 0;\n  private _ariaLabel!: string;\n\n  public set value(val: number) {\n    const oldVal = this._value;\n    this._value = this.validateValue(val);\n    this.requestUpdate('value', oldVal);\n  }\n\n  /**\n   * The current value of the slider.\n   * @attr\n   */\n  @property({ type: Number })\n  public get value() {\n    return this._value;\n  }\n\n  public override set ariaLabel(value: string) {\n    const oldVal = this._ariaLabel;\n    this._ariaLabel = value;\n\n    if (this.hasAttribute('aria-label')) {\n      this.removeAttribute('aria-label');\n    }\n    this.requestUpdate('ariaLabel', oldVal);\n  }\n\n  /**\n   * The aria label of the slider thumb.\n   * @attr\n   */\n  @property({ attribute: 'aria-label' })\n  public override get ariaLabel() {\n    return this._ariaLabel;\n  }\n\n  protected override get activeValue(): number {\n    return this.value;\n  }\n\n  protected override normalizeValue(): void {\n    this._value = this.validateValue(this._value);\n  }\n\n  protected override getTrackStyle() {\n    const position = this.valueToFraction(this.value);\n    const filledTrackStyle = {\n      width: `${position * 100}%`,\n    };\n\n    return filledTrackStyle;\n  }\n\n  protected override updateValue(increment: number) {\n    const oldValue = this.value;\n\n    this.value = (this.value as number) + increment;\n\n    if (oldValue === this.value) {\n      return false;\n    }\n\n    this.emitInputEvent();\n    return true;\n  }\n\n  protected override emitInputEvent() {\n    this.emitEvent('igcInput', { detail: this.value });\n  }\n\n  protected override emitChangeEvent() {\n    this.emitEvent('igcChange', { detail: this.value });\n  }\n\n  /**\n   * Increments the value of the slider by `stepIncrement * step`, where `stepIncrement` defaults to 1.\n   * @param stepIncrement Optional step increment. If no parameter is passed, it defaults to 1.\n   */\n  public stepUp(stepIncrement = 1) {\n    this.value = this.value + stepIncrement * this.step;\n  }\n\n  /**\n   * Decrements the value of the slider by `stepDecrement * step`, where `stepDecrement` defaults to 1.\n   * @param stepDecrement Optional step decrement. If no parameter is passed, it defaults to 1.\n   */\n  public stepDown(stepDecrement = 1) {\n    this.value = this.value - stepDecrement * this.step;\n  }\n\n  protected override renderThumbs() {\n    return html`${this.renderThumb(this.value, this.ariaLabel)}`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-slider': IgcSliderComponent;\n  }\n}\n"]}
+{"version":3,"file":"slider.js","sourceRoot":"","sources":["../../../src/components/slider/slider.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAEtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAC1E,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAoC1D,MAAqB,kBAAmB,SAAQ,mBAAmB,CACjE,iBAAiB,CACf,sBAAsB,CACvB,CACF;IAJD;;QAYS,UAAK,GAAG,CAAC,CAAC;IAqEnB,CAAC;IAlEW,YAAY;QACpB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC5C,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;IACrC,CAAC;IAED,IAAuB,WAAW;QAChC,OAAO,IAAI,CAAC,KAAK,CAAC;IACpB,CAAC;IAEkB,cAAc;QAC/B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC9C,CAAC;IAEkB,aAAa;QAC9B,MAAM,QAAQ,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAClD,MAAM,gBAAgB,GAAG;YACvB,KAAK,EAAE,GAAG,QAAQ,GAAG,GAAG,GAAG;SAC5B,CAAC;QAEF,OAAO,gBAAgB,CAAC;IAC1B,CAAC;IAEkB,WAAW,CAAC,SAAiB;QAC9C,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC;QAE5B,IAAI,CAAC,KAAK,GAAI,IAAI,CAAC,KAAgB,GAAG,SAAS,CAAC;QAEhD,IAAI,QAAQ,KAAK,IAAI,CAAC,KAAK,EAAE;YAC3B,OAAO,KAAK,CAAC;SACd;QAED,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,OAAO,IAAI,CAAC;IACd,CAAC;IAEkB,cAAc;QAC/B,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;IACrD,CAAC;IAEkB,eAAe;QAChC,IAAI,CAAC,SAAS,CAAC,WAAW,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;IACtD,CAAC;IAMM,MAAM,CAAC,aAAa,GAAG,CAAC;QAC7B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC;IACtD,CAAC;IAMM,QAAQ,CAAC,aAAa,GAAG,CAAC;QAC/B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC;IACtD,CAAC;IAEkB,YAAY;QAC7B,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;QAClD,IAAI,SAAS,EAAE;YACb,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC;SACpC;QACD,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,EAAE,SAAU,CAAC,EAAE,CAAC;IAC3D,CAAC;;AA3EsB,0BAAO,GAAG,YAAY,AAAf,CAAgB;AAOvC;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDACV;AAGP;IADT,KAAK,CAAC,OAAO,CAAC;sDAId;eAlBkB,kBAAkB","sourcesContent":["import { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { watch } from '../common/decorators/watch.js';\nimport { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { FormAssociatedMixin } from '../common/mixins/form-associated.js';\nimport { IgcSliderBaseComponent } from './slider-base.js';\n\nexport interface IgcSliderEventMap {\n  /**\n   * Emitted when a value is changed via thumb drag or keyboard interaction.\n   */\n  igcInput: CustomEvent<number>;\n  /**\n   * Emitted when a value change is committed on a thumb drag end or keyboard interaction.\n   */\n  igcChange: CustomEvent<number>;\n}\n\n/**\n * A slider component used to select numeric value within a range.\n *\n * @element igc-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 IgcSliderComponent extends FormAssociatedMixin(\n  EventEmitterMixin<IgcSliderEventMap, Constructor<IgcSliderBaseComponent>>(\n    IgcSliderBaseComponent\n  )\n) {\n  public static readonly tagName = 'igc-slider';\n\n  /**\n   * The current value of the component.\n   * @attr\n   */\n  @property({ type: Number })\n  public value = 0;\n\n  @watch('value')\n  protected valueChanged() {\n    this.value = this.validateValue(this.value);\n    this.setFormValue(`${this.value}`);\n  }\n\n  protected override get activeValue(): number {\n    return this.value;\n  }\n\n  protected override normalizeValue(): void {\n    this.value = this.validateValue(this.value);\n  }\n\n  protected override getTrackStyle() {\n    const position = this.valueToFraction(this.value);\n    const filledTrackStyle = {\n      width: `${position * 100}%`,\n    };\n\n    return filledTrackStyle;\n  }\n\n  protected override updateValue(increment: number) {\n    const oldValue = this.value;\n\n    this.value = (this.value as number) + increment;\n\n    if (oldValue === this.value) {\n      return false;\n    }\n\n    this.emitInputEvent();\n    return true;\n  }\n\n  protected override emitInputEvent() {\n    this.emitEvent('igcInput', { detail: this.value });\n  }\n\n  protected override emitChangeEvent() {\n    this.emitEvent('igcChange', { detail: this.value });\n  }\n\n  /**\n   * Increments the value of the slider by `stepIncrement * step`, where `stepIncrement` defaults to 1.\n   * @param stepIncrement Optional step increment. If no parameter is passed, it defaults to 1.\n   */\n  public stepUp(stepIncrement = 1) {\n    this.value = this.value + stepIncrement * this.step;\n  }\n\n  /**\n   * Decrements the value of the slider by `stepDecrement * step`, where `stepDecrement` defaults to 1.\n   * @param stepDecrement Optional step decrement. If no parameter is passed, it defaults to 1.\n   */\n  public stepDown(stepDecrement = 1) {\n    this.value = this.value - stepDecrement * this.step;\n  }\n\n  protected override renderThumbs() {\n    const ariaLabel = this.getAttribute('aria-label');\n    if (ariaLabel) {\n      this.removeAttribute('aria-label');\n    }\n    return html`${this.renderThumb(this.value, ariaLabel!)}`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-slider': IgcSliderComponent;\n  }\n}\n"]}

package/components/slider/themes/dark/slider.bootstrap.css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-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 */`;
+export const styles = css ``;
 //# sourceMappingURL=slider.bootstrap.css.js.map

package/components/slider/themes/dark/slider.bootstrap.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/slider/themes/dark/slider.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,y0BAAy0B,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"]}
+{"version":3,"file":"slider.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/slider/themes/dark/slider.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,EAAE,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css``;\n"]}

package/components/slider/themes/dark/slider.fluent.css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-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 */`;
+export const styles = css ``;
 //# sourceMappingURL=slider.fluent.css.js.map

package/components/slider/themes/dark/slider.fluent.css.js.map

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

package/components/slider/themes/dark/slider.indigo.css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-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 */`;
+export const styles = css ``;
 //# sourceMappingURL=slider.indigo.css.js.map

package/components/slider/themes/dark/slider.indigo.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/slider/themes/dark/slider.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,y0BAAy0B,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"]}
+{"version":3,"file":"slider.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/slider/themes/dark/slider.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,EAAE,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css``;\n"]}

package/components/slider/themes/light/slider.base.css.js

@@ -27,11 +27,10 @@ export const styles = css `:host {
   background: var(--ig-scrollbar-thumb-background);
 }
 
+:host([hidden]),
 [hidden] {
   display: none !important;
 }
-
-/* 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 {
   display: block;
 }
@@ -53,13 +52,12 @@ slot {
           align-items: center;
   height: 3rem;
   -webkit-transition: all 0.2s ease-out;
-  -o-transition: all 0.2s ease-out;
   transition: all 0.2s ease-out;
   font-family: var(--ig-font-family);
 }
 
 [part=track] {
-  border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 2rem), 2rem);
+  border-radius: clamp(0rem, calc(var(--ig-radius-factor, 1) * 2rem), 2rem);
   position: relative;
   width: 100%;
   overflow: hidden;
@@ -77,7 +75,6 @@ slot {
   top: 0.0625rem;
   background: hsla(var(--ig-secondary-500), 0.24);
   -webkit-transition: background 0.2s ease-out;
-  -o-transition: background 0.2s ease-out;
   transition: background 0.2s ease-out;
   border-radius: inherit;
 }
@@ -88,7 +85,6 @@ slot {
   height: 0.25rem;
   opacity: 0.85;
   -webkit-transition: opacity 0.2s ease-out;
-  -o-transition: opacity 0.2s ease-out;
   transition: opacity 0.2s ease-out;
   top: 50%;
   -webkit-transform: translateY(-50%);
@@ -158,7 +154,6 @@ slot {
   line-height: 0.7;
   opacity: 1;
   -webkit-transition: opacity 0.2s ease-in-out;
-  -o-transition: opacity 0.2s ease-in-out;
   transition: opacity 0.2s ease-in-out;
   font-family: var(--ig-caption-font-family, var(--ig-font-family));
   font-size: var(--ig-caption-font-size);
@@ -185,7 +180,7 @@ slot {
 }
 
 [part~=thumb] {
-  border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 0.625rem), 0.625rem);
+  border-radius: clamp(0rem, calc(var(--ig-radius-factor, 1) * 0.625rem), 0.625rem);
   position: absolute;
   display: -webkit-box;
   display: -ms-flexbox;
@@ -203,7 +198,6 @@ slot {
   outline-style: none;
   -webkit-transition: border-radius 0.1s ease-out, -webkit-transform 0.1s ease-out;
   transition: border-radius 0.1s ease-out, -webkit-transform 0.1s ease-out;
-  -o-transition: transform 0.1s ease-out, border-radius 0.1s ease-out;
   transition: transform 0.1s ease-out, border-radius 0.1s ease-out;
   transition: transform 0.1s ease-out, border-radius 0.1s ease-out, -webkit-transform 0.1s ease-out;
   background: hsla(var(--ig-secondary-500), var(--ig-secondary-a));
@@ -229,7 +223,7 @@ slot {
   text-transform: var(--ig-caption-text-transform);
   margin-top: var(--ig-caption-margin-top);
   margin-bottom: var(--ig-caption-margin-bottom);
-  border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 0.125rem), 0.125rem);
+  border-radius: clamp(0rem, calc(var(--ig-radius-factor, 1) * 0.125rem), 0.125rem);
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -271,7 +265,8 @@ slot {
           transform: rotate(180deg);
 }
 
-:host([disabled]) {
+:host([disabled]),
+:host(:disabled) {
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
@@ -279,28 +274,36 @@ slot {
   pointer-events: none;
   cursor: initial;
 }
-:host([disabled]) [part=inactive] {
+:host([disabled]) [part=inactive],
+:host(:disabled) [part=inactive] {
   background: hsla(var(--ig-gray-200), var(--ig-gray-a));
 }
 :host([disabled]) [part=fill],
-:host([disabled]) [part=tick] {
+:host([disabled]) [part=tick],
+:host(:disabled) [part=fill],
+:host(:disabled) [part=tick] {
   background: hsla(var(--ig-gray-400), var(--ig-gray-a));
 }
-:host([disabled]) [part=tick-label] {
+:host([disabled]) [part=tick-label],
+:host(:disabled) [part=tick-label] {
   color: hsla(var(--ig-gray-400), var(--ig-gray-a));
 }
-:host([disabled]) [part~=thumb] {
+:host([disabled]) [part~=thumb],
+:host(:disabled) [part~=thumb] {
   background: hsla(var(--ig-gray-400), var(--ig-gray-a));
 }
-:host([disabled]) [part~=thumb]:focus::after {
+:host([disabled]) [part~=thumb]:focus::after,
+:host(:disabled) [part~=thumb]:focus::after {
   -webkit-transform: scale(0);
       -ms-transform: scale(0);
           transform: scale(0);
 }
-:host([disabled]):hover [part=inactive] {
+:host([disabled]):hover [part=inactive],
+:host(:disabled):hover [part=inactive] {
   background: hsla(var(--ig-gray-400), var(--ig-gray-a));
 }
-:host([disabled]):hover [part~=thumb] {
+:host([disabled]):hover [part~=thumb],
+:host(:disabled):hover [part~=thumb] {
   border-color: hsla(var(--ig-gray-400), var(--ig-gray-a));
 }`;
 //# sourceMappingURL=slider.base.css.js.map