igniteui-webcomponents 4.4.0 → 4.5.0

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

@@ -1,5 +1,26 @@
 import { css } from 'lit';
-export const styles = css `[part=track],
+export const styles = css `:host {
+  --track-color: var(--ig-slider-track-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --track-step-color: var(--ig-slider-track-step-color, white);
+  --track-step-size: var(--ig-slider-track-step-size, 0.1875rem);
+  --track-hover-color: var(--ig-slider-track-hover-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --thumb-color: var(--ig-slider-thumb-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --thumb-focus-color: var(--ig-slider-thumb-focus-color, hsla(var(--ig-primary-200), var(--ig-primary-a)));
+  --thumb-border-color: var(--ig-slider-thumb-border-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --thumb-border-focus-color: var(--ig-slider-thumb-border-focus-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));
+  --thumb-disabled-border-color: var(--ig-slider-thumb-disabled-border-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --disabled-thumb-color: var(--ig-slider-disabled-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --label-background-color: var(--ig-slider-label-background-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --label-text-color: var(--ig-slider-label-text-color, var(--ig-gray-700-contrast));
+  --base-track-color: var(--ig-slider-base-track-color, hsla(var(--ig-secondary-500), 0.24));
+  --base-track-hover-color: var(--ig-slider-base-track-hover-color, hsla(var(--ig-secondary-500), 0.24));
+  --disabled-base-track-color: var(--ig-slider-disabled-base-track-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --disabled-fill-track-color: var(--ig-slider-disabled-fill-track-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --tick-color: var(--ig-slider-tick-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --tick-label-color: var(--ig-slider-tick-label-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+}
+
+[part=track],
 [part=inactive] {
   height: 0.5rem;
 }
@@ -9,20 +30,55 @@ export const styles = css `[part=track],
 }
 
 [part=inactive] {
-  background: var(--inactive-background, hsla(var(--ig-secondary-500), 0.24));
+  background: var(--base-track-color);
+}
+
+[part=steps] {
+  color: var(--track-step-color);
 }
 
 [part~=thumb] {
   width: 1rem;
   height: 1rem;
-  background: hsla(var(--ig-primary-500), var(--ig-primary-a));
+  background: var(--thumb-color);
   top: calc((1rem - calc(1rem / 2)) * -1);
   -webkit-margin-start: calc((1rem - calc(1rem / 2)) * -1);
           margin-inline-start: calc((1rem - calc(1rem / 2)) * -1);
 }
 [part~=thumb]:focus {
-  border: 0.0625rem solid hsla(var(--ig-surface-500), var(--ig-surface-a));
-  -webkit-box-shadow: 0 0 0 0.1875rem hsla(var(--ig-primary-200), var(--ig-primary-a));
-          box-shadow: 0 0 0 0.1875rem hsla(var(--ig-primary-200), var(--ig-primary-a));
+  border: 0.0625rem solid var(--thumb-border-focus-color);
+  -webkit-box-shadow: 0 0 0 0.1875rem var(--thumb-focus-color);
+          box-shadow: 0 0 0 0.1875rem var(--thumb-focus-color);
+}
+
+[part=tick] {
+  background: var(--tick-color);
+}
+
+[part=tick-label] {
+  color: var(--tick-label-color);
+}
+
+[part=thumb-label-inner] {
+  color: var(--label-text-color);
+  background: var(--label-background-color);
+}
+[part=thumb-label-inner]::after {
+  border-top: 0.625rem solid var(--label-background-color);
+}
+
+:host([disabled]) [part=inactive],
+:host([disabled]) [part=tick],
+:host(:disabled) [part=inactive],
+:host(:disabled) [part=tick] {
+  background: var(--disabled-base-track-color);
+}
+:host([disabled]) [part~=thumb],
+:host(:disabled) [part~=thumb] {
+  background: var(--disabled-thumb-color);
+}
+:host([disabled]) [part=tick-label],
+:host(:disabled) [part=tick-label] {
+  color: var(--disabled-base-track-color);
 }`;
 //# sourceMappingURL=slider.bootstrap.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"slider.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/slider/themes/light/slider.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;EAyBvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`[part=track],\n[part=inactive] {\n  height: 0.5rem;\n}\n\n[part=fill] {\n  display: none;\n}\n\n[part=inactive] {\n  background: var(--inactive-background, hsla(var(--ig-secondary-500), 0.24));\n}\n\n[part~=thumb] {\n  width: 1rem;\n  height: 1rem;\n  background: hsla(var(--ig-primary-500), var(--ig-primary-a));\n  top: calc((1rem - calc(1rem / 2)) * -1);\n  -webkit-margin-start: calc((1rem - calc(1rem / 2)) * -1);\n          margin-inline-start: calc((1rem - calc(1rem / 2)) * -1);\n}\n[part~=thumb]:focus {\n  border: 0.0625rem solid hsla(var(--ig-surface-500), var(--ig-surface-a));\n  -webkit-box-shadow: 0 0 0 0.1875rem hsla(var(--ig-primary-200), var(--ig-primary-a));\n          box-shadow: 0 0 0 0.1875rem hsla(var(--ig-primary-200), var(--ig-primary-a));\n}`;\n"]}
+{"version":3,"file":"slider.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/slider/themes/light/slider.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiFvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --track-color: var(--ig-slider-track-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n  --track-step-color: var(--ig-slider-track-step-color, white);\n  --track-step-size: var(--ig-slider-track-step-size, 0.1875rem);\n  --track-hover-color: var(--ig-slider-track-hover-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --thumb-color: var(--ig-slider-thumb-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --thumb-focus-color: var(--ig-slider-thumb-focus-color, hsla(var(--ig-primary-200), var(--ig-primary-a)));\n  --thumb-border-color: var(--ig-slider-thumb-border-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --thumb-border-focus-color: var(--ig-slider-thumb-border-focus-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --thumb-disabled-border-color: var(--ig-slider-thumb-disabled-border-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n  --disabled-thumb-color: var(--ig-slider-disabled-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n  --label-background-color: var(--ig-slider-label-background-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --label-text-color: var(--ig-slider-label-text-color, var(--ig-gray-700-contrast));\n  --base-track-color: var(--ig-slider-base-track-color, hsla(var(--ig-secondary-500), 0.24));\n  --base-track-hover-color: var(--ig-slider-base-track-hover-color, hsla(var(--ig-secondary-500), 0.24));\n  --disabled-base-track-color: var(--ig-slider-disabled-base-track-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n  --disabled-fill-track-color: var(--ig-slider-disabled-fill-track-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n  --tick-color: var(--ig-slider-tick-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n  --tick-label-color: var(--ig-slider-tick-label-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n}\n\n[part=track],\n[part=inactive] {\n  height: 0.5rem;\n}\n\n[part=fill] {\n  display: none;\n}\n\n[part=inactive] {\n  background: var(--base-track-color);\n}\n\n[part=steps] {\n  color: var(--track-step-color);\n}\n\n[part~=thumb] {\n  width: 1rem;\n  height: 1rem;\n  background: var(--thumb-color);\n  top: calc((1rem - calc(1rem / 2)) * -1);\n  -webkit-margin-start: calc((1rem - calc(1rem / 2)) * -1);\n          margin-inline-start: calc((1rem - calc(1rem / 2)) * -1);\n}\n[part~=thumb]:focus {\n  border: 0.0625rem solid var(--thumb-border-focus-color);\n  -webkit-box-shadow: 0 0 0 0.1875rem var(--thumb-focus-color);\n          box-shadow: 0 0 0 0.1875rem var(--thumb-focus-color);\n}\n\n[part=tick] {\n  background: var(--tick-color);\n}\n\n[part=tick-label] {\n  color: var(--tick-label-color);\n}\n\n[part=thumb-label-inner] {\n  color: var(--label-text-color);\n  background: var(--label-background-color);\n}\n[part=thumb-label-inner]::after {\n  border-top: 0.625rem solid var(--label-background-color);\n}\n\n:host([disabled]) [part=inactive],\n:host([disabled]) [part=tick],\n:host(:disabled) [part=inactive],\n:host(:disabled) [part=tick] {\n  background: var(--disabled-base-track-color);\n}\n:host([disabled]) [part~=thumb],\n:host(:disabled) [part~=thumb] {\n  background: var(--disabled-thumb-color);\n}\n:host([disabled]) [part=tick-label],\n:host(:disabled) [part=tick-label] {\n  color: var(--disabled-base-track-color);\n}`;\n"]}

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

@@ -1,9 +1,30 @@
 import { css } from 'lit';
-export const styles = css `:host(:hover) [part=fill] {
-  background: var(--fill-hover-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+export const styles = css `:host {
+  --track-color: var(--ig-slider-track-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --track-step-color: var(--ig-slider-track-step-color, white);
+  --track-step-size: var(--ig-slider-track-step-size, 0.1875rem);
+  --track-hover-color: var(--ig-slider-track-hover-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --thumb-color: var(--ig-slider-thumb-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));
+  --thumb-focus-color: var(--ig-slider-thumb-focus-color, hsla(var(--ig-primary-700), var(--ig-primary-a)));
+  --thumb-border-color: var(--ig-slider-thumb-border-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --thumb-border-focus-color: var(--ig-slider-thumb-border-focus-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --thumb-disabled-border-color: var(--ig-slider-thumb-disabled-border-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --disabled-thumb-color: var(--ig-slider-disabled-thumb-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));
+  --label-background-color: var(--ig-slider-label-background-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --label-text-color: var(--ig-slider-label-text-color, var(--ig-gray-700-contrast));
+  --base-track-color: var(--ig-slider-base-track-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --base-track-hover-color: var(--ig-slider-base-track-hover-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --disabled-base-track-color: var(--ig-slider-disabled-base-track-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --disabled-fill-track-color: var(--ig-slider-disabled-fill-track-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --tick-color: var(--ig-slider-tick-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --tick-label-color: var(--ig-slider-tick-label-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+}
+
+:host(:hover) [part=fill] {
+  background: var(--track-hover-color);
 }
 :host(:hover) [part~=thumb] {
-  border-color: var(--thumb-hover-border, hsla(var(--ig-primary-700), var(--ig-primary-a)));
+  border-color: var(--thumb-focus-color);
 }
 
 [part~=focused]::after {
@@ -14,10 +35,10 @@ export const styles = css `:host(:hover) [part=fill] {
   -webkit-transform: translate(-50%, -50%);
       -ms-transform: translate(-50%, -50%);
           transform: translate(-50%, -50%);
-  -webkit-box-shadow: 0 0 0 0.0625rem hsla(var(--ig-gray-700), var(--ig-gray-a));
-          box-shadow: 0 0 0 0.0625rem hsla(var(--ig-gray-700), var(--ig-gray-a));
-  width: calc(1rem + (0.125rem * 2));
-  height: calc(1rem + (0.125rem * 2));
+  -webkit-box-shadow: 0 0 0 0.0625rem var(--thumb-border-focus-color);
+          box-shadow: 0 0 0 0.0625rem var(--thumb-border-focus-color);
+  width: calc(1rem + 0.125rem * 2);
+  height: calc(1rem + 0.125rem * 2);
 }
 
 [part=track],
@@ -27,17 +48,29 @@ export const styles = css `:host(:hover) [part=fill] {
 }
 
 [part=inactive] {
-  background: var(--inactive-background, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  background: var(--base-track-color);
   top: initial;
 }
 
 [part=fill] {
-  background: var(--fill-background, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  background: var(--track-color);
+}
+
+[part=steps] {
+  color: var(--track-step-color);
+}
+
+[part=tick] {
+  background: var(--tick-color);
+}
+
+[part=tick-label] {
+  color: var(--tick-label-color);
 }
 
 [part~=thumb] {
-  background: hsla(var(--ig-surface-500), var(--ig-surface-a));
-  border: 0.125rem solid var(--thumb-border, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  background: var(--thumb-color);
+  border: 0.125rem solid var(--thumb-border-color);
   width: 1rem;
   height: 1rem;
   top: calc((1rem - 0.5rem) * -1);
@@ -46,23 +79,28 @@ export const styles = css `:host(:hover) [part=fill] {
 }
 
 [part=thumb-label-inner] {
-  background: var(--fill-hover-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  background: var(--label-background-color);
+  color: var(--label-text-color);
 }
 [part=thumb-label-inner]::after {
-  border-top: 0.625rem solid var(--fill-hover-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  border-top: 0.625rem solid var(--label-background-color);
 }
 
 :host([disabled]) [part=inactive],
 :host(:disabled) [part=inactive] {
-  background: var(--inactive-disabled-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  background: var(--disabled-base-track-color);
 }
 :host([disabled]) [part=fill],
 :host(:disabled) [part=fill] {
-  background: var(--fill-disabled-background, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  background: var(--disabled-fill-track-color);
 }
 :host([disabled]) [part~=thumb],
 :host(:disabled) [part~=thumb] {
-  background: hsla(var(--ig-surface-500), var(--ig-surface-a));
-  border-color: var(--thumb-disabled-border, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  background: var(--disabled-thumb-color);
+  border-color: var(--thumb-disabled-border-color);
+}
+:host([disabled]) [part=tick-label],
+:host(:disabled) [part=tick-label] {
+  color: var(--disabled-fill-track-color);
 }`;
 //# sourceMappingURL=slider.fluent.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"slider.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/slider/themes/light/slider.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiEvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host(:hover) [part=fill] {\n  background: var(--fill-hover-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n}\n:host(:hover) [part~=thumb] {\n  border-color: var(--thumb-hover-border, hsla(var(--ig-primary-700), var(--ig-primary-a)));\n}\n\n[part~=focused]::after {\n  position: absolute;\n  content: \"\";\n  left: 50%;\n  top: 50%;\n  -webkit-transform: translate(-50%, -50%);\n      -ms-transform: translate(-50%, -50%);\n          transform: translate(-50%, -50%);\n  -webkit-box-shadow: 0 0 0 0.0625rem hsla(var(--ig-gray-700), var(--ig-gray-a));\n          box-shadow: 0 0 0 0.0625rem hsla(var(--ig-gray-700), var(--ig-gray-a));\n  width: calc(1rem + (0.125rem * 2));\n  height: calc(1rem + (0.125rem * 2));\n}\n\n[part=track],\n[part=fill],\n[part=inactive] {\n  height: 0.25rem;\n}\n\n[part=inactive] {\n  background: var(--inactive-background, hsla(var(--ig-gray-600), var(--ig-gray-a)));\n  top: initial;\n}\n\n[part=fill] {\n  background: var(--fill-background, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n}\n\n[part~=thumb] {\n  background: hsla(var(--ig-surface-500), var(--ig-surface-a));\n  border: 0.125rem solid var(--thumb-border, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  width: 1rem;\n  height: 1rem;\n  top: calc((1rem - 0.5rem) * -1);\n  -webkit-margin-start: calc((1rem - 0.5rem) * -1);\n          margin-inline-start: calc((1rem - 0.5rem) * -1);\n}\n\n[part=thumb-label-inner] {\n  background: var(--fill-hover-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n}\n[part=thumb-label-inner]::after {\n  border-top: 0.625rem solid var(--fill-hover-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n}\n\n:host([disabled]) [part=inactive],\n:host(:disabled) [part=inactive] {\n  background: var(--inactive-disabled-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n}\n:host([disabled]) [part=fill],\n:host(:disabled) [part=fill] {\n  background: var(--fill-disabled-background, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n}\n:host([disabled]) [part~=thumb],\n:host(:disabled) [part~=thumb] {\n  background: hsla(var(--ig-surface-500), var(--ig-surface-a));\n  border-color: var(--thumb-disabled-border, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n}`;\n"]}
+{"version":3,"file":"slider.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/slider/themes/light/slider.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuGvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --track-color: var(--ig-slider-track-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n  --track-step-color: var(--ig-slider-track-step-color, white);\n  --track-step-size: var(--ig-slider-track-step-size, 0.1875rem);\n  --track-hover-color: var(--ig-slider-track-hover-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --thumb-color: var(--ig-slider-thumb-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --thumb-focus-color: var(--ig-slider-thumb-focus-color, hsla(var(--ig-primary-700), var(--ig-primary-a)));\n  --thumb-border-color: var(--ig-slider-thumb-border-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --thumb-border-focus-color: var(--ig-slider-thumb-border-focus-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --thumb-disabled-border-color: var(--ig-slider-thumb-disabled-border-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n  --disabled-thumb-color: var(--ig-slider-disabled-thumb-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --label-background-color: var(--ig-slider-label-background-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --label-text-color: var(--ig-slider-label-text-color, var(--ig-gray-700-contrast));\n  --base-track-color: var(--ig-slider-base-track-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));\n  --base-track-hover-color: var(--ig-slider-base-track-hover-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));\n  --disabled-base-track-color: var(--ig-slider-disabled-base-track-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n  --disabled-fill-track-color: var(--ig-slider-disabled-fill-track-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n  --tick-color: var(--ig-slider-tick-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n  --tick-label-color: var(--ig-slider-tick-label-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n}\n\n:host(:hover) [part=fill] {\n  background: var(--track-hover-color);\n}\n:host(:hover) [part~=thumb] {\n  border-color: var(--thumb-focus-color);\n}\n\n[part~=focused]::after {\n  position: absolute;\n  content: \"\";\n  left: 50%;\n  top: 50%;\n  -webkit-transform: translate(-50%, -50%);\n      -ms-transform: translate(-50%, -50%);\n          transform: translate(-50%, -50%);\n  -webkit-box-shadow: 0 0 0 0.0625rem var(--thumb-border-focus-color);\n          box-shadow: 0 0 0 0.0625rem var(--thumb-border-focus-color);\n  width: calc(1rem + 0.125rem * 2);\n  height: calc(1rem + 0.125rem * 2);\n}\n\n[part=track],\n[part=fill],\n[part=inactive] {\n  height: 0.25rem;\n}\n\n[part=inactive] {\n  background: var(--base-track-color);\n  top: initial;\n}\n\n[part=fill] {\n  background: var(--track-color);\n}\n\n[part=steps] {\n  color: var(--track-step-color);\n}\n\n[part=tick] {\n  background: var(--tick-color);\n}\n\n[part=tick-label] {\n  color: var(--tick-label-color);\n}\n\n[part~=thumb] {\n  background: var(--thumb-color);\n  border: 0.125rem solid var(--thumb-border-color);\n  width: 1rem;\n  height: 1rem;\n  top: calc((1rem - 0.5rem) * -1);\n  -webkit-margin-start: calc((1rem - 0.5rem) * -1);\n          margin-inline-start: calc((1rem - 0.5rem) * -1);\n}\n\n[part=thumb-label-inner] {\n  background: var(--label-background-color);\n  color: var(--label-text-color);\n}\n[part=thumb-label-inner]::after {\n  border-top: 0.625rem solid var(--label-background-color);\n}\n\n:host([disabled]) [part=inactive],\n:host(:disabled) [part=inactive] {\n  background: var(--disabled-base-track-color);\n}\n:host([disabled]) [part=fill],\n:host(:disabled) [part=fill] {\n  background: var(--disabled-fill-track-color);\n}\n:host([disabled]) [part~=thumb],\n:host(:disabled) [part~=thumb] {\n  background: var(--disabled-thumb-color);\n  border-color: var(--thumb-disabled-border-color);\n}\n:host([disabled]) [part=tick-label],\n:host(:disabled) [part=tick-label] {\n  color: var(--disabled-fill-track-color);\n}`;\n"]}

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

@@ -1,13 +1,38 @@
 import { css } from 'lit';
-export const styles = css `[part=base]:hover [part=inactive] {
-  background: var(--inactive-hover-background, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+export const styles = css `:host {
+  --track-color: var(--ig-slider-track-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
+  --track-step-color: var(--ig-slider-track-step-color, white);
+  --track-step-size: var(--ig-slider-track-step-size, 0.1875rem);
+  --track-hover-color: var(--ig-slider-track-hover-color, hsla(var(--ig-primary-400), var(--ig-primary-a)));
+  --thumb-color: var(--ig-slider-thumb-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
+  --thumb-focus-color: var(--ig-slider-thumb-focus-color, hsla(var(--ig-primary-200), var(--ig-primary-a)));
+  --thumb-border-color: var(--ig-slider-thumb-border-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
+  --thumb-border-focus-color: var(--ig-slider-thumb-border-focus-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
+  --thumb-disabled-border-color: var(--ig-slider-thumb-disabled-border-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --disabled-thumb-color: var(--ig-slider-disabled-thumb-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --label-background-color: var(--ig-slider-label-background-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --label-text-color: var(--ig-slider-label-text-color, var(--ig-gray-700-contrast));
+  --base-track-color: var(--ig-slider-base-track-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --base-track-hover-color: var(--ig-slider-base-track-hover-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --disabled-base-track-color: var(--ig-slider-disabled-base-track-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --disabled-fill-track-color: var(--ig-slider-disabled-fill-track-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --tick-color: var(--ig-slider-tick-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --tick-label-color: var(--ig-slider-tick-label-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+}
+
+[part=base]:hover [part=inactive] {
+  background: var(--base-track-hover-color);
 }
 [part=base]:hover [part=fill] {
-  background: hsla(var(--ig-primary-400), var(--ig-primary-a));
+  background: var(--track-hover-color);
+}
+
+[part=fill] {
+  background: var(--track-color);
 }
 
 [part=inactive] {
-  background: var(--inactive-background, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  background: var(--base-track-color);
 }
 
 [part=track],
@@ -19,6 +44,7 @@ export const styles = css `[part=base]:hover [part=inactive] {
 }
 
 [part=steps] {
+  color: var(--track-step-color);
   height: 0.125rem;
 }
 [part=steps] line {
@@ -27,7 +53,16 @@ export const styles = css `[part=base]:hover [part=inactive] {
           transform: none;
 }
 
+[part=tick] {
+  background: var(--tick-color);
+}
+
+[part=tick-label] {
+  color: var(--tick-label-color);
+}
+
 [part~=thumb] {
+  background: var(--thumb-color);
   width: 0.875rem;
   height: 0.875rem;
   top: calc((0.875rem - 0.4375rem) * -1);
@@ -35,19 +70,37 @@ export const styles = css `[part=base]:hover [part=inactive] {
           margin-inline-start: calc((0.875rem - 0.4375rem) * -1);
 }
 [part~=thumb]:focus {
-  -webkit-box-shadow: 0 0 0 0.1875rem hsla(var(--ig-primary-200), var(--ig-primary-a));
-          box-shadow: 0 0 0 0.1875rem hsla(var(--ig-primary-200), var(--ig-primary-a));
+  -webkit-box-shadow: 0 0 0 0.1875rem var(--thumb-focus-color);
+          box-shadow: 0 0 0 0.1875rem var(--thumb-focus-color);
 }
 [part~=thumb]::after {
   display: none;
 }
 
-:host([disabled]) [part~=thumb],
-:host([disabled]) [part=fill],
+[part=thumb-label-inner] {
+  background: var(--label-background-color);
+  color: var(--label-text-color);
+}
+[part=thumb-label-inner]::after {
+  border-top: 0.625rem solid var(--label-background-color);
+}
+
 :host([disabled]) [part=inactive],
-:host(:disabled) [part~=thumb],
-:host(:disabled) [part=fill],
 :host(:disabled) [part=inactive] {
-  background: hsla(var(--ig-gray-300), var(--ig-gray-a));
+  background: var(--disabled-base-track-color);
+}
+:host([disabled]) [part=fill],
+:host([disabled]) [part=tick],
+:host(:disabled) [part=fill],
+:host(:disabled) [part=tick] {
+  background: var(--disabled-fill-track-color);
+}
+:host([disabled]) [part~=thumb],
+:host(:disabled) [part~=thumb] {
+  background: var(--disabled-thumb-color);
+}
+:host([disabled]) [part=tick-label],
+:host(:disabled) [part=tick-label] {
+  color: var(--disabled-fill-track-color);
 }`;
 //# sourceMappingURL=slider.indigo.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"slider.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/slider/themes/light/slider.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkDvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`[part=base]:hover [part=inactive] {\n  background: var(--inactive-hover-background, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n}\n[part=base]:hover [part=fill] {\n  background: hsla(var(--ig-primary-400), var(--ig-primary-a));\n}\n\n[part=inactive] {\n  background: var(--inactive-background, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n}\n\n[part=track],\n[part=fill],\n[part=inactive] {\n  height: 0.125rem;\n  top: initial;\n  border-radius: initial;\n}\n\n[part=steps] {\n  height: 0.125rem;\n}\n[part=steps] line {\n  -webkit-transform: none;\n      -ms-transform: none;\n          transform: none;\n}\n\n[part~=thumb] {\n  width: 0.875rem;\n  height: 0.875rem;\n  top: calc((0.875rem - 0.4375rem) * -1);\n  -webkit-margin-start: calc((0.875rem - 0.4375rem) * -1);\n          margin-inline-start: calc((0.875rem - 0.4375rem) * -1);\n}\n[part~=thumb]:focus {\n  -webkit-box-shadow: 0 0 0 0.1875rem hsla(var(--ig-primary-200), var(--ig-primary-a));\n          box-shadow: 0 0 0 0.1875rem hsla(var(--ig-primary-200), var(--ig-primary-a));\n}\n[part~=thumb]::after {\n  display: none;\n}\n\n:host([disabled]) [part~=thumb],\n:host([disabled]) [part=fill],\n:host([disabled]) [part=inactive],\n:host(:disabled) [part~=thumb],\n:host(:disabled) [part=fill],\n:host(:disabled) [part=inactive] {\n  background: hsla(var(--ig-gray-300), var(--ig-gray-a));\n}`;\n"]}
+{"version":3,"file":"slider.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/slider/themes/light/slider.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuGvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --track-color: var(--ig-slider-track-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));\n  --track-step-color: var(--ig-slider-track-step-color, white);\n  --track-step-size: var(--ig-slider-track-step-size, 0.1875rem);\n  --track-hover-color: var(--ig-slider-track-hover-color, hsla(var(--ig-primary-400), var(--ig-primary-a)));\n  --thumb-color: var(--ig-slider-thumb-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));\n  --thumb-focus-color: var(--ig-slider-thumb-focus-color, hsla(var(--ig-primary-200), var(--ig-primary-a)));\n  --thumb-border-color: var(--ig-slider-thumb-border-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));\n  --thumb-border-focus-color: var(--ig-slider-thumb-border-focus-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));\n  --thumb-disabled-border-color: var(--ig-slider-thumb-disabled-border-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n  --disabled-thumb-color: var(--ig-slider-disabled-thumb-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n  --label-background-color: var(--ig-slider-label-background-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --label-text-color: var(--ig-slider-label-text-color, var(--ig-gray-700-contrast));\n  --base-track-color: var(--ig-slider-base-track-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n  --base-track-hover-color: var(--ig-slider-base-track-hover-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n  --disabled-base-track-color: var(--ig-slider-disabled-base-track-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n  --disabled-fill-track-color: var(--ig-slider-disabled-fill-track-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n  --tick-color: var(--ig-slider-tick-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n  --tick-label-color: var(--ig-slider-tick-label-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n}\n\n[part=base]:hover [part=inactive] {\n  background: var(--base-track-hover-color);\n}\n[part=base]:hover [part=fill] {\n  background: var(--track-hover-color);\n}\n\n[part=fill] {\n  background: var(--track-color);\n}\n\n[part=inactive] {\n  background: var(--base-track-color);\n}\n\n[part=track],\n[part=fill],\n[part=inactive] {\n  height: 0.125rem;\n  top: initial;\n  border-radius: initial;\n}\n\n[part=steps] {\n  color: var(--track-step-color);\n  height: 0.125rem;\n}\n[part=steps] line {\n  -webkit-transform: none;\n      -ms-transform: none;\n          transform: none;\n}\n\n[part=tick] {\n  background: var(--tick-color);\n}\n\n[part=tick-label] {\n  color: var(--tick-label-color);\n}\n\n[part~=thumb] {\n  background: var(--thumb-color);\n  width: 0.875rem;\n  height: 0.875rem;\n  top: calc((0.875rem - 0.4375rem) * -1);\n  -webkit-margin-start: calc((0.875rem - 0.4375rem) * -1);\n          margin-inline-start: calc((0.875rem - 0.4375rem) * -1);\n}\n[part~=thumb]:focus {\n  -webkit-box-shadow: 0 0 0 0.1875rem var(--thumb-focus-color);\n          box-shadow: 0 0 0 0.1875rem var(--thumb-focus-color);\n}\n[part~=thumb]::after {\n  display: none;\n}\n\n[part=thumb-label-inner] {\n  background: var(--label-background-color);\n  color: var(--label-text-color);\n}\n[part=thumb-label-inner]::after {\n  border-top: 0.625rem solid var(--label-background-color);\n}\n\n:host([disabled]) [part=inactive],\n:host(:disabled) [part=inactive] {\n  background: var(--disabled-base-track-color);\n}\n:host([disabled]) [part=fill],\n:host([disabled]) [part=tick],\n:host(:disabled) [part=fill],\n:host(:disabled) [part=tick] {\n  background: var(--disabled-fill-track-color);\n}\n:host([disabled]) [part~=thumb],\n:host(:disabled) [part~=thumb] {\n  background: var(--disabled-thumb-color);\n}\n:host([disabled]) [part=tick-label],\n:host(:disabled) [part=tick-label] {\n  color: var(--disabled-fill-track-color);\n}`;\n"]}

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

@@ -1,19 +1,42 @@
 import { css } from 'lit';
-export const styles = css `[part=track] {
+export const styles = css `:host {
+  --track-color: var(--ig-slider-track-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
+  --track-step-color: var(--ig-slider-track-step-color, hsla(var(--ig-secondary-200), var(--ig-secondary-a)));
+  --track-step-size: var(--ig-slider-track-step-size, 0.1875rem);
+  --track-hover-color: var(--ig-slider-track-hover-color, hsla(var(--ig-secondary-400), var(--ig-secondary-a)));
+  --thumb-color: var(--ig-slider-thumb-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
+  --thumb-focus-color: var(--ig-slider-thumb-focus-color, transparent);
+  --thumb-border-color: var(--ig-slider-thumb-border-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
+  --thumb-border-focus-color: var(--ig-slider-thumb-border-focus-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
+  --thumb-disabled-border-color: var(--ig-slider-thumb-disabled-border-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --disabled-thumb-color: var(--ig-slider-disabled-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --label-background-color: var(--ig-slider-label-background-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --label-text-color: var(--ig-slider-label-text-color, var(--ig-gray-700-contrast));
+  --base-track-color: var(--ig-slider-base-track-color, hsla(var(--ig-secondary-500), 0.24));
+  --base-track-hover-color: var(--ig-slider-base-track-hover-color, hsla(var(--ig-secondary-500), 0.24));
+  --disabled-base-track-color: var(--ig-slider-disabled-base-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --disabled-fill-track-color: var(--ig-slider-disabled-fill-track-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --tick-color: var(--ig-slider-tick-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --tick-label-color: var(--ig-slider-tick-label-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+}
+
+[part=track] {
   height: 0.375rem;
 }
 
 [part=fill] {
+  background: var(--track-color);
   height: 0.375rem;
 }
 
 [part=inactive] {
+  background: var(--base-track-color);
   height: 0.25rem;
   top: 0.0625rem;
 }
 
 [part=steps] {
-  color: hsla(var(--ig-secondary-200), var(--ig-secondary-a));
+  color: var(--track-step-color);
 }
 
 [part~=thumb] {
@@ -22,6 +45,7 @@ export const styles = css `[part=track] {
   top: calc((1.25rem - 0.625rem) * -1);
   -webkit-margin-start: calc((1.25rem - 0.625rem) * -1);
           margin-inline-start: calc((1.25rem - 0.625rem) * -1);
+  background: var(--thumb-color);
 }
 [part~=thumb]::after {
   border-radius: clamp(0rem, calc(var(--ig-radius-factor, 1) * 1.25rem), 1.25rem);
@@ -29,7 +53,7 @@ export const styles = css `[part=track] {
   content: "";
   width: 2.5rem;
   height: 2.5rem;
-  background: hsla(var(--ig-secondary-500), var(--ig-secondary-a));
+  background: var(--thumb-color);
   top: calc(50% - 1.25rem);
   inset-inline-start: calc(50% - 1.25rem);
   opacity: 0;
@@ -59,5 +83,40 @@ export const styles = css `[part=track] {
 }
 [part~=thumb]:active::after {
   opacity: 0.24;
+}
+
+[part=tick] {
+  background: var(--tick-color);
+}
+
+[part=tick-label] {
+  color: var(--tick-label-color);
+}
+
+[part=thumb-label-inner] {
+  color: var(--label-text-color);
+  background: var(--label-background-color);
+}
+[part=thumb-label-inner]::after {
+  border-top: 0.625rem solid var(--label-background-color);
+}
+
+:host([disabled]) [part=inactive],
+:host(:disabled) [part=inactive] {
+  background: var(--disabled-base-track-color);
+}
+:host([disabled]) [part=fill],
+:host([disabled]) [part=tick],
+:host(:disabled) [part=fill],
+:host(:disabled) [part=tick] {
+  background: var(--disabled-fill-track-color);
+}
+:host([disabled]) [part~=thumb],
+:host(:disabled) [part~=thumb] {
+  background: var(--disabled-thumb-color);
+}
+:host([disabled]) [part=tick-label],
+:host(:disabled) [part=tick-label] {
+  color: var(--disabled-fill-track-color);
 }`;
 //# sourceMappingURL=slider.material.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"slider.material.css.js","sourceRoot":"","sources":["../../../../../src/components/slider/themes/light/slider.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`[part=track] {\n  height: 0.375rem;\n}\n\n[part=fill] {\n  height: 0.375rem;\n}\n\n[part=inactive] {\n  height: 0.25rem;\n  top: 0.0625rem;\n}\n\n[part=steps] {\n  color: hsla(var(--ig-secondary-200), var(--ig-secondary-a));\n}\n\n[part~=thumb] {\n  width: 1.25rem;\n  height: 1.25rem;\n  top: calc((1.25rem - 0.625rem) * -1);\n  -webkit-margin-start: calc((1.25rem - 0.625rem) * -1);\n          margin-inline-start: calc((1.25rem - 0.625rem) * -1);\n}\n[part~=thumb]::after {\n  border-radius: clamp(0rem, calc(var(--ig-radius-factor, 1) * 1.25rem), 1.25rem);\n  position: absolute;\n  content: \"\";\n  width: 2.5rem;\n  height: 2.5rem;\n  background: hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n  top: calc(50% - 1.25rem);\n  inset-inline-start: calc(50% - 1.25rem);\n  opacity: 0;\n  -webkit-transform: scale(0);\n      -ms-transform: scale(0);\n          transform: scale(0);\n  -webkit-transform-origin: center center;\n      -ms-transform-origin: center center;\n          transform-origin: center center;\n  -webkit-transition: opacity 0.1s ease-out, -webkit-transform 0.1s ease-out;\n  transition: opacity 0.1s ease-out, -webkit-transform 0.1s ease-out;\n  transition: transform 0.1s ease-out, opacity 0.1s ease-out;\n  transition: transform 0.1s ease-out, opacity 0.1s ease-out, -webkit-transform 0.1s ease-out;\n  overflow: hidden;\n}\n[part~=thumb]:hover::after {\n  opacity: 0.12;\n  -webkit-transform: scale(1);\n      -ms-transform: scale(1);\n          transform: scale(1);\n}\n[part~=thumb]:focus::after {\n  opacity: 0.18;\n  -webkit-transform: scale(1);\n      -ms-transform: scale(1);\n          transform: scale(1);\n}\n[part~=thumb]:active::after {\n  opacity: 0.24;\n}`;\n"]}
+{"version":3,"file":"slider.material.css.js","sourceRoot":"","sources":["../../../../../src/components/slider/themes/light/slider.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuHvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --track-color: var(--ig-slider-track-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));\n  --track-step-color: var(--ig-slider-track-step-color, hsla(var(--ig-secondary-200), var(--ig-secondary-a)));\n  --track-step-size: var(--ig-slider-track-step-size, 0.1875rem);\n  --track-hover-color: var(--ig-slider-track-hover-color, hsla(var(--ig-secondary-400), var(--ig-secondary-a)));\n  --thumb-color: var(--ig-slider-thumb-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));\n  --thumb-focus-color: var(--ig-slider-thumb-focus-color, transparent);\n  --thumb-border-color: var(--ig-slider-thumb-border-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));\n  --thumb-border-focus-color: var(--ig-slider-thumb-border-focus-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));\n  --thumb-disabled-border-color: var(--ig-slider-thumb-disabled-border-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n  --disabled-thumb-color: var(--ig-slider-disabled-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n  --label-background-color: var(--ig-slider-label-background-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --label-text-color: var(--ig-slider-label-text-color, var(--ig-gray-700-contrast));\n  --base-track-color: var(--ig-slider-base-track-color, hsla(var(--ig-secondary-500), 0.24));\n  --base-track-hover-color: var(--ig-slider-base-track-hover-color, hsla(var(--ig-secondary-500), 0.24));\n  --disabled-base-track-color: var(--ig-slider-disabled-base-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n  --disabled-fill-track-color: var(--ig-slider-disabled-fill-track-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n  --tick-color: var(--ig-slider-tick-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n  --tick-label-color: var(--ig-slider-tick-label-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n}\n\n[part=track] {\n  height: 0.375rem;\n}\n\n[part=fill] {\n  background: var(--track-color);\n  height: 0.375rem;\n}\n\n[part=inactive] {\n  background: var(--base-track-color);\n  height: 0.25rem;\n  top: 0.0625rem;\n}\n\n[part=steps] {\n  color: var(--track-step-color);\n}\n\n[part~=thumb] {\n  width: 1.25rem;\n  height: 1.25rem;\n  top: calc((1.25rem - 0.625rem) * -1);\n  -webkit-margin-start: calc((1.25rem - 0.625rem) * -1);\n          margin-inline-start: calc((1.25rem - 0.625rem) * -1);\n  background: var(--thumb-color);\n}\n[part~=thumb]::after {\n  border-radius: clamp(0rem, calc(var(--ig-radius-factor, 1) * 1.25rem), 1.25rem);\n  position: absolute;\n  content: \"\";\n  width: 2.5rem;\n  height: 2.5rem;\n  background: var(--thumb-color);\n  top: calc(50% - 1.25rem);\n  inset-inline-start: calc(50% - 1.25rem);\n  opacity: 0;\n  -webkit-transform: scale(0);\n      -ms-transform: scale(0);\n          transform: scale(0);\n  -webkit-transform-origin: center center;\n      -ms-transform-origin: center center;\n          transform-origin: center center;\n  -webkit-transition: opacity 0.1s ease-out, -webkit-transform 0.1s ease-out;\n  transition: opacity 0.1s ease-out, -webkit-transform 0.1s ease-out;\n  transition: transform 0.1s ease-out, opacity 0.1s ease-out;\n  transition: transform 0.1s ease-out, opacity 0.1s ease-out, -webkit-transform 0.1s ease-out;\n  overflow: hidden;\n}\n[part~=thumb]:hover::after {\n  opacity: 0.12;\n  -webkit-transform: scale(1);\n      -ms-transform: scale(1);\n          transform: scale(1);\n}\n[part~=thumb]:focus::after {\n  opacity: 0.18;\n  -webkit-transform: scale(1);\n      -ms-transform: scale(1);\n          transform: scale(1);\n}\n[part~=thumb]:active::after {\n  opacity: 0.24;\n}\n\n[part=tick] {\n  background: var(--tick-color);\n}\n\n[part=tick-label] {\n  color: var(--tick-label-color);\n}\n\n[part=thumb-label-inner] {\n  color: var(--label-text-color);\n  background: var(--label-background-color);\n}\n[part=thumb-label-inner]::after {\n  border-top: 0.625rem solid var(--label-background-color);\n}\n\n:host([disabled]) [part=inactive],\n:host(:disabled) [part=inactive] {\n  background: var(--disabled-base-track-color);\n}\n:host([disabled]) [part=fill],\n:host([disabled]) [part=tick],\n:host(:disabled) [part=fill],\n:host(:disabled) [part=tick] {\n  background: var(--disabled-fill-track-color);\n}\n:host([disabled]) [part~=thumb],\n:host(:disabled) [part~=thumb] {\n  background: var(--disabled-thumb-color);\n}\n:host([disabled]) [part=tick-label],\n:host(:disabled) [part=tick-label] {\n  color: var(--disabled-fill-track-color);\n}`;\n"]}

package/components/snackbar/snackbar.d.ts

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-import { Constructor } from '../common/mixins/constructor.js';
+import type { Constructor } from '../common/mixins/constructor.js';
 export interface IgcSnackbarEventMap {
     igcAction: CustomEvent<void>;
 }
@@ -19,10 +19,9 @@ declare const IgcSnackbarComponent_base: import("../common/mixins/constructor.js
  * @csspart action - The snackbar action button.
  */
 export default class IgcSnackbarComponent extends IgcSnackbarComponent_base {
-    /** @private */
-    static tagName: string;
-    /** @private */
+    static readonly tagName = "igc-snackbar";
     static styles: import("lit").CSSResult;
+    static register(): void;
     private autoHideTimeout;
     private animationPlayer;
     protected content: HTMLElement;
@@ -41,6 +40,11 @@ export default class IgcSnackbarComponent extends IgcSnackbarComponent_base {
      * @attr keep-open
      */
     keepOpen: boolean;
+    /**
+     * Sets the position of the snackbar.
+     * @attr position
+     */
+    position: 'bottom' | 'middle' | 'top';
     /**
      * The snackbar action button.
      * @attr action-text

package/components/snackbar/snackbar.js

@@ -7,22 +7,27 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, LitElement, nothing } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { AnimationPlayer } from '../../animations/player.js';
+import { fadeIn, fadeOut } from '../../animations/presets/fade/index.js';
 import { themes } from '../../theming/theming-decorator.js';
+import IgcButtonComponent from '../button/button.js';
+import { registerComponent } from '../common/definitions/register.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
 import { styles } from './themes/light/snackbar.base.css.js';
+import { styles as material } from './themes/light/snackbar.material.css.js';
 import { styles as bootstrap } from './themes/light/snackbar.bootstrap.css.js';
 import { styles as fluent } from './themes/light/snackbar.fluent.css.js';
 import { styles as indigo } from './themes/light/snackbar.indigo.css.js';
-import { defineComponents } from '../common/definitions/defineComponents.js';
-import IgcButtonComponent from '../button/button.js';
-import { AnimationPlayer, fadeIn, fadeOut } from '../../animations/index.js';
-defineComponents(IgcButtonComponent);
 let IgcSnackbarComponent = class IgcSnackbarComponent extends EventEmitterMixin(LitElement) {
     constructor() {
         super(...arguments);
         this.open = false;
         this.displayTime = 4000;
         this.keepOpen = false;
+        this.position = 'bottom';
+    }
+    static register() {
+        registerComponent(this, IgcButtonComponent);
     }
     firstUpdated() {
         this.animationPlayer = new AnimationPlayer(this.content);
@@ -96,11 +101,17 @@ __decorate([
 __decorate([
     property({ type: Boolean, attribute: 'keep-open' })
 ], IgcSnackbarComponent.prototype, "keepOpen", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'position' })
+], IgcSnackbarComponent.prototype, "position", void 0);
 __decorate([
     property({ attribute: 'action-text' })
 ], IgcSnackbarComponent.prototype, "actionText", void 0);
 IgcSnackbarComponent = __decorate([
-    themes({ bootstrap, fluent, indigo })
+    themes({
+        light: { material, bootstrap, fluent, indigo },
+        dark: { material, bootstrap, fluent, indigo },
+    })
 ], IgcSnackbarComponent);
 export default IgcSnackbarComponent;
 //# sourceMappingURL=snackbar.js.map

package/components/snackbar/snackbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"snackbar.js","sourceRoot":"","sources":["../../../src/components/snackbar/snackbar.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { themes } from '../../theming/theming-decorator.js';\n\nimport { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { styles } from './themes/light/snackbar.base.css.js';\nimport { styles as bootstrap } from './themes/light/snackbar.bootstrap.css.js';\nimport { styles as fluent } from './themes/light/snackbar.fluent.css.js';\nimport { styles as indigo } from './themes/light/snackbar.indigo.css.js';\n\nimport { defineComponents } from '../common/definitions/defineComponents.js';\nimport IgcButtonComponent from '../button/button.js';\nimport { AnimationPlayer, fadeIn, fadeOut } from '../../animations/index.js';\n\ndefineComponents(IgcButtonComponent);\n\nexport interface IgcSnackbarEventMap {\n  igcAction: CustomEvent<void>;\n}\n\n/**\n * A snackbar component is used to provide feedback about an operation\n * by showing a brief message at the bottom of the screen.\n *\n * @element igc-snackbar\n *\n * @slot - Renders the snackbar content.\n *\n * @fires igcAction - Emitted when the snackbar action button is clicked.\n *\n * @csspart base - The base wrapper of the snackbar component.\n * @csspart message - The snackbar message.\n * @csspart action - The snackbar action button.\n */\n@themes({ bootstrap, fluent, indigo })\nexport default class IgcSnackbarComponent extends EventEmitterMixin<\n  IgcSnackbarEventMap,\n  Constructor<LitElement>\n>(LitElement) {\n  /** @private */\n  public static tagName = 'igc-snackbar';\n\n  /** @private */\n  public static styles = styles;\n\n  private autoHideTimeout!: number;\n  private animationPlayer!: AnimationPlayer;\n\n  @query('[part~=\"base\"]', true)\n  protected content!: HTMLElement;\n\n  /**\n   * Determines whether the snackbar is opened.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public open = false;\n\n  /**\n   * Determines the duration in ms in which the snackbar will be visible.\n   * @attr display-time\n   */\n  @property({ type: Number, attribute: 'display-time' })\n  public displayTime = 4000;\n\n  /**\n   * Determines whether the snackbar should close after the displayTime is over.\n   * @attr keep-open\n   */\n  @property({ type: Boolean, attribute: 'keep-open' })\n  public keepOpen = false;\n\n  /**\n   * The snackbar action button.\n   * @attr action-text\n   */\n  @property({ attribute: 'action-text' })\n  public actionText!: string;\n\n  protected override firstUpdated() {\n    this.animationPlayer = new AnimationPlayer(this.content);\n  }\n\n  private async toggleAnimation(dir: 'open' | 'close') {\n    const animation = dir === 'open' ? fadeIn : fadeOut;\n\n    const [_, event] = await Promise.all([\n      this.animationPlayer.stopAll(),\n      this.animationPlayer.play(animation()),\n    ]);\n\n    return event.type === 'finish';\n  }\n\n  /** Opens the snackbar. */\n  public show() {\n    if (this.open) {\n      return;\n    }\n\n    this.toggleAnimation('open');\n    this.open = true;\n\n    clearTimeout(this.autoHideTimeout);\n    if (this.open && !this.keepOpen) {\n      this.autoHideTimeout = window.setTimeout(\n        () => this.hide(),\n        this.displayTime\n      );\n    }\n  }\n\n  /** Closes the snackbar. */\n  public async hide() {\n    if (!this.open) {\n      return;\n    }\n\n    await this.toggleAnimation('close');\n    this.open = false;\n    clearTimeout(this.autoHideTimeout);\n  }\n\n  /** Toggles the open state of the component. */\n  public toggle() {\n    this.open ? this.hide() : this.show();\n  }\n\n  private handleClick() {\n    this.emitEvent('igcAction');\n  }\n\n  protected override render() {\n    return html`\n      <div part=\"base\">\n        <span part=\"message\">\n          <slot></slot>\n        </span>\n        ${this.actionText\n          ? html`\n              <igc-button\n                variant=\"flat\"\n                part=\"action\"\n                size=\"small\"\n                @click=${this.handleClick}\n              >\n                ${ifDefined(this.actionText)}\n              </igc-button>\n            `\n          : nothing}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-snackbar': IgcSnackbarComponent;\n  }\n}\n"]}
+{"version":3,"file":"snackbar.js","sourceRoot":"","sources":["../../../src/components/snackbar/snackbar.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,wCAAwC,CAAC;AACzE,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,kBAAkB,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAEtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,MAAM,qCAAqC,CAAC;AAC7D,OAAO,EAAE,MAAM,IAAI,QAAQ,EAAE,MAAM,yCAAyC,CAAC;AAC7E,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,0CAA0C,CAAC;AAC/E,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,uCAAuC,CAAC;AACzE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,uCAAuC,CAAC;AAwBzE,IAAqB,oBAAoB,GAAzC,MAAqB,oBAAqB,SAAQ,iBAAiB,CAGjE,UAAU,CAAC;IAHb;;QAsBS,SAAI,GAAG,KAAK,CAAC;QAOb,gBAAW,GAAG,IAAI,CAAC;QAOnB,aAAQ,GAAG,KAAK,CAAC;QAOjB,aAAQ,GAAgC,QAAQ,CAAC;IAmF1D,CAAC;IAvHQ,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,IAAI,EAAE,kBAAkB,CAAC,CAAC;IAC9C,CAAC;IA2CkB,YAAY;QAC7B,IAAI,CAAC,eAAe,GAAG,IAAI,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAC3D,CAAC;IAEO,KAAK,CAAC,eAAe,CAAC,GAAqB;QACjD,MAAM,SAAS,GAAG,GAAG,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;QAEpD,MAAM,CAAC,CAAC,EAAE,KAAK,CAAC,GAAG,MAAM,OAAO,CAAC,GAAG,CAAC;YACnC,IAAI,CAAC,eAAe,CAAC,OAAO,EAAE;YAC9B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;SACvC,CAAC,CAAC;QAEH,OAAO,KAAK,CAAC,IAAI,KAAK,QAAQ,CAAC;IACjC,CAAC;IAGM,IAAI;QACT,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,OAAO;SACR;QAED,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;QAC7B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QAEjB,YAAY,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;QACnC,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAC/B,IAAI,CAAC,eAAe,GAAG,MAAM,CAAC,UAAU,CACtC,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,EACjB,IAAI,CAAC,WAAW,CACjB,CAAC;SACH;IACH,CAAC;IAGM,KAAK,CAAC,IAAI;QACf,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACd,OAAO;SACR;QAED,MAAM,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;QACpC,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,YAAY,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IACrC,CAAC;IAGM,MAAM;QACX,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;IACxC,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAC9B,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;;;;UAKL,IAAI,CAAC,UAAU;YACf,CAAC,CAAC,IAAI,CAAA;;;;;yBAKS,IAAI,CAAC,WAAW;;kBAEvB,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC;;aAE/B;YACH,CAAC,CAAC,OAAO;;KAEd,CAAC;IACJ,CAAC;;AAzHsB,4BAAO,GAAG,cAAc,AAAjB,CAAkB;AAClC,2BAAM,GAAG,MAAM,AAAT,CAAU;AAUpB;IADT,KAAK,CAAC,gBAAgB,EAAE,IAAI,CAAC;qDACE;AAOzB;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDACvB;AAOb;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;yDAC5B;AAOnB;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;sDAC5B;AAOjB;IADN,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;sDACK;AAOjD;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;wDACZ;AAlDR,oBAAoB;IAJxC,MAAM,CAAC;QACN,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE;QAC9C,IAAI,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE;KAC9C,CAAC;GACmB,oBAAoB,CA8HxC;eA9HoB,oBAAoB","sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { AnimationPlayer } from '../../animations/player.js';\nimport { fadeIn, fadeOut } from '../../animations/presets/fade/index.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport IgcButtonComponent from '../button/button.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport type { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { styles } from './themes/light/snackbar.base.css.js';\nimport { styles as material } from './themes/light/snackbar.material.css.js';\nimport { styles as bootstrap } from './themes/light/snackbar.bootstrap.css.js';\nimport { styles as fluent } from './themes/light/snackbar.fluent.css.js';\nimport { styles as indigo } from './themes/light/snackbar.indigo.css.js';\n\nexport interface IgcSnackbarEventMap {\n  igcAction: CustomEvent<void>;\n}\n\n/**\n * A snackbar component is used to provide feedback about an operation\n * by showing a brief message at the bottom of the screen.\n *\n * @element igc-snackbar\n *\n * @slot - Renders the snackbar content.\n *\n * @fires igcAction - Emitted when the snackbar action button is clicked.\n *\n * @csspart base - The base wrapper of the snackbar component.\n * @csspart message - The snackbar message.\n * @csspart action - The snackbar action button.\n */\n@themes({\n  light: { material, bootstrap, fluent, indigo },\n  dark: { material, bootstrap, fluent, indigo },\n})\nexport default class IgcSnackbarComponent extends EventEmitterMixin<\n  IgcSnackbarEventMap,\n  Constructor<LitElement>\n>(LitElement) {\n  public static readonly tagName = 'igc-snackbar';\n  public static styles = styles;\n\n  public static register() {\n    registerComponent(this, IgcButtonComponent);\n  }\n\n  private autoHideTimeout!: number;\n  private animationPlayer!: AnimationPlayer;\n\n  @query('[part~=\"base\"]', true)\n  protected content!: HTMLElement;\n\n  /**\n   * Determines whether the snackbar is opened.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public open = false;\n\n  /**\n   * Determines the duration in ms in which the snackbar will be visible.\n   * @attr display-time\n   */\n  @property({ type: Number, attribute: 'display-time' })\n  public displayTime = 4000;\n\n  /**\n   * Determines whether the snackbar should close after the displayTime is over.\n   * @attr keep-open\n   */\n  @property({ type: Boolean, attribute: 'keep-open' })\n  public keepOpen = false;\n\n  /**\n   * Sets the position of the snackbar.\n   * @attr position\n   */\n  @property({ reflect: true, attribute: 'position' })\n  public position: 'bottom' | 'middle' | 'top' = 'bottom';\n\n  /**\n   * The snackbar action button.\n   * @attr action-text\n   */\n  @property({ attribute: 'action-text' })\n  public actionText!: string;\n\n  protected override firstUpdated() {\n    this.animationPlayer = new AnimationPlayer(this.content);\n  }\n\n  private async toggleAnimation(dir: 'open' | 'close') {\n    const animation = dir === 'open' ? fadeIn : fadeOut;\n\n    const [_, event] = await Promise.all([\n      this.animationPlayer.stopAll(),\n      this.animationPlayer.play(animation()),\n    ]);\n\n    return event.type === 'finish';\n  }\n\n  /** Opens the snackbar. */\n  public show() {\n    if (this.open) {\n      return;\n    }\n\n    this.toggleAnimation('open');\n    this.open = true;\n\n    clearTimeout(this.autoHideTimeout);\n    if (this.open && !this.keepOpen) {\n      this.autoHideTimeout = window.setTimeout(\n        () => this.hide(),\n        this.displayTime\n      );\n    }\n  }\n\n  /** Closes the snackbar. */\n  public async hide() {\n    if (!this.open) {\n      return;\n    }\n\n    await this.toggleAnimation('close');\n    this.open = false;\n    clearTimeout(this.autoHideTimeout);\n  }\n\n  /** Toggles the open state of the component. */\n  public toggle() {\n    this.open ? this.hide() : this.show();\n  }\n\n  private handleClick() {\n    this.emitEvent('igcAction');\n  }\n\n  protected override render() {\n    return html`\n      <div part=\"base\">\n        <span part=\"message\">\n          <slot></slot>\n        </span>\n        ${this.actionText\n          ? html`\n              <igc-button\n                variant=\"flat\"\n                part=\"action\"\n                size=\"small\"\n                @click=${this.handleClick}\n              >\n                ${ifDefined(this.actionText)}\n              </igc-button>\n            `\n          : nothing}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-snackbar': IgcSnackbarComponent;\n  }\n}\n"]}