igniteui-webcomponents 4.3.0 → 4.4.0

package/components/button/themes/icon-button/light/icon-button.bootstrap.css.js

@@ -1,16 +1,41 @@
 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 */
-:host {
-  --size: max(var(--is-large, 1) * max(3rem, -1 * 3rem), var(--is-medium, 1) * max(2.375rem, -1 * 2.375rem), var(--is-small, 1) * max(1.9375rem, -1 * 1.9375rem));
+export const styles = css `:host {
+  --shadow-color: var(--ig-button-shadow-color, transparent);
+  --border-color: var(--ig-button-border-color, transparent);
+  --hover-border-color: var(--ig-button-hover-border-color, transparent);
+  --focus-border-color: var(--ig-button-focus-border-color, transparent);
+  --focus-visible-border-color: var(--ig-button-focus-visible-border-color, transparent);
+  --active-border-color: var(--ig-button-active-border-color, transparent);
+  --disabled-border-color: var(--ig-button-disabled-border-color, transparent);
+  --disabled-background: var(--ig-button-disabled-background, transparent);
+  --disabled-foreground: var(--ig-button-disabled-foreground, hsla(var(--ig-primary-100), var(--ig-primary-a)));
+  --size: var(--ig-button-size, max(var(--is-large, 1) * max(3rem, -1 * 3rem), var(--is-medium, 1) * max(2.375rem, -1 * 2.375rem), var(--is-small, 1) * max(1.9375rem, -1 * 1.9375rem)));
+  --resting-elevation: var(--ig-button-resting-elevation, var(--ig-elevation-0));
+  --hover-elevation: var(--ig-button-hover-elevation, var(--ig-elevation-0));
+  --focus-elevation: var(--ig-button-focus-elevation, var(--ig-elevation-0));
+  --active-elevation: var(--ig-button-active-elevation, var(--ig-elevation-0));
+  --background: var(--ig-button-background, transparent);
+  --foreground: var(--ig-button-foreground, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --hover-background: var(--ig-button-hover-background, transparent);
+  --hover-foreground: var(--ig-button-hover-foreground, hsla(var(--ig-primary-600), var(--ig-primary-a)));
+  --focus-background: var(--ig-button-focus-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --focus-foreground: var(--ig-button-focus-foreground, hsla(var(--ig-primary-600), var(--ig-primary-a)));
+  --focus-visible-background: var(--ig-button-focus-visible-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --focus-visible-foreground: var(--ig-button-focus-visible-foreground, hsla(var(--ig-primary-600), var(--ig-primary-a)));
+  --active-background: var(--ig-button-active-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --active-foreground: var(--ig-button-active-foreground, hsla(var(--ig-primary-600), var(--ig-primary-a)));
+  --border-radius: var(--ig-button-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));
+}
+:host ::slotted(igc-ripple) {
+  border-radius: var(--border-radius);
 }
 
 [part=base] {
-  border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 0.25rem), 0.25rem);
+  border-radius: var(--border-radius);
   width: var(--size);
   height: var(--size);
   -webkit-transition: color 0.15s ease-out, background 0.15s ease-out, -webkit-box-shadow 0.15s ease-out;
   transition: color 0.15s ease-out, background 0.15s ease-out, -webkit-box-shadow 0.15s ease-out;
-  -o-transition: box-shadow 0.15s ease-out, color 0.15s ease-out, background 0.15s ease-out;
   transition: box-shadow 0.15s ease-out, color 0.15s ease-out, background 0.15s ease-out;
   transition: box-shadow 0.15s ease-out, color 0.15s ease-out, background 0.15s ease-out, -webkit-box-shadow 0.15s ease-out;
   color: hsla(var(--ig-primary-500), var(--ig-primary-a));
@@ -69,28 +94,34 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
   color: hsla(var(--ig-primary-500), var(--ig-primary-a));
 }
 
-:host([disabled]) [part=base] {
+:host([disabled]) [part=base],
+:host(:disabled) [part=base] {
   color: hsla(var(--ig-primary-100), var(--ig-primary-a));
   background: transparent;
 }
-:host([disabled]) igc-icon {
+:host([disabled]) igc-icon,
+:host(:disabled) igc-icon {
   color: hsla(var(--ig-primary-100), var(--ig-primary-a));
 }
 
-:host([disabled][variant=contained]) [part=base] {
+:host([disabled][variant=contained]) [part=base],
+:host(:disabled[variant=contained]) [part=base] {
   background: hsla(var(--ig-primary-100), var(--ig-primary-a));
   color: hsla(var(--ig-primary-300), var(--ig-primary-a));
 }
-:host([disabled][variant=contained]) igc-icon {
+:host([disabled][variant=contained]) igc-icon,
+:host(:disabled[variant=contained]) igc-icon {
   color: hsla(var(--ig-primary-300), var(--ig-primary-a));
 }
 
-:host([disabled][variant=outlined]) [part=base] {
+:host([disabled][variant=outlined]) [part=base],
+:host(:disabled[variant=outlined]) [part=base] {
   color: hsla(var(--ig-primary-100), var(--ig-primary-a));
   -webkit-box-shadow: 0 0 0 0.0625rem hsla(var(--ig-primary-100), var(--ig-primary-a));
           box-shadow: 0 0 0 0.0625rem hsla(var(--ig-primary-100), var(--ig-primary-a));
 }
-:host([disabled][variant=outlined]) igc-icon {
+:host([disabled][variant=outlined]) igc-icon,
+:host(:disabled[variant=outlined]) igc-icon {
   color: hsla(var(--ig-primary-100), var(--ig-primary-a));
 }`;
 //# sourceMappingURL=icon-button.bootstrap.css.js.map

package/components/button/themes/icon-button/light/icon-button.bootstrap.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.bootstrap.css.js","sourceRoot":"","sources":["../../../../../../src/components/button/themes/icon-button/light/icon-button.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6FvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n:host {\n  --size: max(var(--is-large, 1) * max(3rem, -1 * 3rem), var(--is-medium, 1) * max(2.375rem, -1 * 2.375rem), var(--is-small, 1) * max(1.9375rem, -1 * 1.9375rem));\n}\n\n[part=base] {\n  border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 0.25rem), 0.25rem);\n  width: var(--size);\n  height: var(--size);\n  -webkit-transition: color 0.15s ease-out, background 0.15s ease-out, -webkit-box-shadow 0.15s ease-out;\n  transition: color 0.15s ease-out, background 0.15s ease-out, -webkit-box-shadow 0.15s ease-out;\n  -o-transition: box-shadow 0.15s ease-out, color 0.15s ease-out, background 0.15s ease-out;\n  transition: box-shadow 0.15s ease-out, color 0.15s ease-out, background 0.15s ease-out;\n  transition: box-shadow 0.15s ease-out, color 0.15s ease-out, background 0.15s ease-out, -webkit-box-shadow 0.15s ease-out;\n  color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n  padding: max(var(--is-large, 1) * max(12px, -1 * 12px) * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * max(9px, -1 * 9px) * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * max(7.5px, -1 * 7.5px) * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n}\n[part=base]:hover {\n  color: hsla(var(--ig-primary-800), var(--ig-primary-a));\n}\n[part=base]:focus, [part=base]:active {\n  color: hsla(var(--ig-primary-600), var(--ig-primary-a));\n  background: hsla(var(--ig-gray-100), var(--ig-gray-a));\n  -webkit-box-shadow: none;\n          box-shadow: none;\n}\n[part=base] igc-icon {\n  color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n}\n\n:host([variant=contained]) [part=base] {\n  color: var(--ig-primary-600-contrast);\n  background: hsla(var(--ig-primary-500), var(--ig-primary-a));\n}\n:host([variant=contained]) [part=base]:hover {\n  background: hsla(var(--ig-primary-600), var(--ig-primary-a));\n}\n:host([variant=contained]) [part=base]:focus, :host([variant=contained]) [part=base]:active {\n  background: hsla(var(--ig-primary-600), var(--ig-primary-a));\n  -webkit-box-shadow: 0 0 0 0.25rem hsla(var(--ig-primary-200), 0.5);\n          box-shadow: 0 0 0 0.25rem hsla(var(--ig-primary-200), 0.5);\n}\n:host([variant=contained]) [part=base] igc-icon {\n  color: var(--ig-primary-600-contrast);\n}\n\n:host([variant=outlined]) [part=base] {\n  -webkit-box-shadow: 0 0 0 0.0625rem hsla(var(--ig-primary-500), var(--ig-primary-a));\n          box-shadow: 0 0 0 0.0625rem hsla(var(--ig-primary-500), var(--ig-primary-a));\n}\n:host([variant=outlined]) [part=base]:hover {\n  color: var(--ig-primary-600-contrast);\n  background: hsla(var(--ig-primary-600), var(--ig-primary-a));\n}\n:host([variant=outlined]) [part=base]:hover igc-icon {\n  color: var(--ig-primary-600-contrast);\n}\n:host([variant=outlined]) [part=base]:focus, :host([variant=outlined]) [part=base]:active {\n  color: var(--ig-primary-600-contrast);\n  background: hsla(var(--ig-primary-600), var(--ig-primary-a));\n  -webkit-box-shadow: 0 0 0 0.25rem hsla(var(--ig-primary-200), 0.5);\n          box-shadow: 0 0 0 0.25rem hsla(var(--ig-primary-200), 0.5);\n}\n:host([variant=outlined]) [part=base]:focus igc-icon, :host([variant=outlined]) [part=base]:active igc-icon {\n  color: var(--ig-primary-600-contrast);\n}\n:host([variant=outlined]) igc-icon {\n  color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n}\n\n:host([disabled]) [part=base] {\n  color: hsla(var(--ig-primary-100), var(--ig-primary-a));\n  background: transparent;\n}\n:host([disabled]) igc-icon {\n  color: hsla(var(--ig-primary-100), var(--ig-primary-a));\n}\n\n:host([disabled][variant=contained]) [part=base] {\n  background: hsla(var(--ig-primary-100), var(--ig-primary-a));\n  color: hsla(var(--ig-primary-300), var(--ig-primary-a));\n}\n:host([disabled][variant=contained]) igc-icon {\n  color: hsla(var(--ig-primary-300), var(--ig-primary-a));\n}\n\n:host([disabled][variant=outlined]) [part=base] {\n  color: hsla(var(--ig-primary-100), var(--ig-primary-a));\n  -webkit-box-shadow: 0 0 0 0.0625rem hsla(var(--ig-primary-100), var(--ig-primary-a));\n          box-shadow: 0 0 0 0.0625rem hsla(var(--ig-primary-100), var(--ig-primary-a));\n}\n:host([disabled][variant=outlined]) igc-icon {\n  color: hsla(var(--ig-primary-100), var(--ig-primary-a));\n}`;\n"]}
+{"version":3,"file":"icon-button.bootstrap.css.js","sourceRoot":"","sources":["../../../../../../src/components/button/themes/icon-button/light/icon-button.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4HvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --shadow-color: var(--ig-button-shadow-color, transparent);\n  --border-color: var(--ig-button-border-color, transparent);\n  --hover-border-color: var(--ig-button-hover-border-color, transparent);\n  --focus-border-color: var(--ig-button-focus-border-color, transparent);\n  --focus-visible-border-color: var(--ig-button-focus-visible-border-color, transparent);\n  --active-border-color: var(--ig-button-active-border-color, transparent);\n  --disabled-border-color: var(--ig-button-disabled-border-color, transparent);\n  --disabled-background: var(--ig-button-disabled-background, transparent);\n  --disabled-foreground: var(--ig-button-disabled-foreground, hsla(var(--ig-primary-100), var(--ig-primary-a)));\n  --size: var(--ig-button-size, max(var(--is-large, 1) * max(3rem, -1 * 3rem), var(--is-medium, 1) * max(2.375rem, -1 * 2.375rem), var(--is-small, 1) * max(1.9375rem, -1 * 1.9375rem)));\n  --resting-elevation: var(--ig-button-resting-elevation, var(--ig-elevation-0));\n  --hover-elevation: var(--ig-button-hover-elevation, var(--ig-elevation-0));\n  --focus-elevation: var(--ig-button-focus-elevation, var(--ig-elevation-0));\n  --active-elevation: var(--ig-button-active-elevation, var(--ig-elevation-0));\n  --background: var(--ig-button-background, transparent);\n  --foreground: var(--ig-button-foreground, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --hover-background: var(--ig-button-hover-background, transparent);\n  --hover-foreground: var(--ig-button-hover-foreground, hsla(var(--ig-primary-600), var(--ig-primary-a)));\n  --focus-background: var(--ig-button-focus-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n  --focus-foreground: var(--ig-button-focus-foreground, hsla(var(--ig-primary-600), var(--ig-primary-a)));\n  --focus-visible-background: var(--ig-button-focus-visible-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n  --focus-visible-foreground: var(--ig-button-focus-visible-foreground, hsla(var(--ig-primary-600), var(--ig-primary-a)));\n  --active-background: var(--ig-button-active-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n  --active-foreground: var(--ig-button-active-foreground, hsla(var(--ig-primary-600), var(--ig-primary-a)));\n  --border-radius: var(--ig-button-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));\n}\n:host ::slotted(igc-ripple) {\n  border-radius: var(--border-radius);\n}\n\n[part=base] {\n  border-radius: var(--border-radius);\n  width: var(--size);\n  height: var(--size);\n  -webkit-transition: color 0.15s ease-out, background 0.15s ease-out, -webkit-box-shadow 0.15s ease-out;\n  transition: color 0.15s ease-out, background 0.15s ease-out, -webkit-box-shadow 0.15s ease-out;\n  transition: box-shadow 0.15s ease-out, color 0.15s ease-out, background 0.15s ease-out;\n  transition: box-shadow 0.15s ease-out, color 0.15s ease-out, background 0.15s ease-out, -webkit-box-shadow 0.15s ease-out;\n  color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n  padding: max(var(--is-large, 1) * max(12px, -1 * 12px) * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * max(9px, -1 * 9px) * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * max(7.5px, -1 * 7.5px) * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n}\n[part=base]:hover {\n  color: hsla(var(--ig-primary-800), var(--ig-primary-a));\n}\n[part=base]:focus, [part=base]:active {\n  color: hsla(var(--ig-primary-600), var(--ig-primary-a));\n  background: hsla(var(--ig-gray-100), var(--ig-gray-a));\n  -webkit-box-shadow: none;\n          box-shadow: none;\n}\n[part=base] igc-icon {\n  color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n}\n\n:host([variant=contained]) [part=base] {\n  color: var(--ig-primary-600-contrast);\n  background: hsla(var(--ig-primary-500), var(--ig-primary-a));\n}\n:host([variant=contained]) [part=base]:hover {\n  background: hsla(var(--ig-primary-600), var(--ig-primary-a));\n}\n:host([variant=contained]) [part=base]:focus, :host([variant=contained]) [part=base]:active {\n  background: hsla(var(--ig-primary-600), var(--ig-primary-a));\n  -webkit-box-shadow: 0 0 0 0.25rem hsla(var(--ig-primary-200), 0.5);\n          box-shadow: 0 0 0 0.25rem hsla(var(--ig-primary-200), 0.5);\n}\n:host([variant=contained]) [part=base] igc-icon {\n  color: var(--ig-primary-600-contrast);\n}\n\n:host([variant=outlined]) [part=base] {\n  -webkit-box-shadow: 0 0 0 0.0625rem hsla(var(--ig-primary-500), var(--ig-primary-a));\n          box-shadow: 0 0 0 0.0625rem hsla(var(--ig-primary-500), var(--ig-primary-a));\n}\n:host([variant=outlined]) [part=base]:hover {\n  color: var(--ig-primary-600-contrast);\n  background: hsla(var(--ig-primary-600), var(--ig-primary-a));\n}\n:host([variant=outlined]) [part=base]:hover igc-icon {\n  color: var(--ig-primary-600-contrast);\n}\n:host([variant=outlined]) [part=base]:focus, :host([variant=outlined]) [part=base]:active {\n  color: var(--ig-primary-600-contrast);\n  background: hsla(var(--ig-primary-600), var(--ig-primary-a));\n  -webkit-box-shadow: 0 0 0 0.25rem hsla(var(--ig-primary-200), 0.5);\n          box-shadow: 0 0 0 0.25rem hsla(var(--ig-primary-200), 0.5);\n}\n:host([variant=outlined]) [part=base]:focus igc-icon, :host([variant=outlined]) [part=base]:active igc-icon {\n  color: var(--ig-primary-600-contrast);\n}\n:host([variant=outlined]) igc-icon {\n  color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n}\n\n:host([disabled]) [part=base],\n:host(:disabled) [part=base] {\n  color: hsla(var(--ig-primary-100), var(--ig-primary-a));\n  background: transparent;\n}\n:host([disabled]) igc-icon,\n:host(:disabled) igc-icon {\n  color: hsla(var(--ig-primary-100), var(--ig-primary-a));\n}\n\n:host([disabled][variant=contained]) [part=base],\n:host(:disabled[variant=contained]) [part=base] {\n  background: hsla(var(--ig-primary-100), var(--ig-primary-a));\n  color: hsla(var(--ig-primary-300), var(--ig-primary-a));\n}\n:host([disabled][variant=contained]) igc-icon,\n:host(:disabled[variant=contained]) igc-icon {\n  color: hsla(var(--ig-primary-300), var(--ig-primary-a));\n}\n\n:host([disabled][variant=outlined]) [part=base],\n:host(:disabled[variant=outlined]) [part=base] {\n  color: hsla(var(--ig-primary-100), var(--ig-primary-a));\n  -webkit-box-shadow: 0 0 0 0.0625rem hsla(var(--ig-primary-100), var(--ig-primary-a));\n          box-shadow: 0 0 0 0.0625rem hsla(var(--ig-primary-100), var(--ig-primary-a));\n}\n:host([disabled][variant=outlined]) igc-icon,\n:host(:disabled[variant=outlined]) igc-icon {\n  color: hsla(var(--ig-primary-100), var(--ig-primary-a));\n}`;\n"]}

package/components/button/themes/icon-button/light/icon-button.fluent.css.js

@@ -1,15 +1,40 @@
 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 */
-:host {
-  --size: max(var(--is-large, 1) * max(2.375rem, -1 * 2.375rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem));
+export const styles = css `:host {
+  --shadow-color: var(--ig-button-shadow-color, transparent);
+  --border-color: var(--ig-button-border-color, transparent);
+  --hover-border-color: var(--ig-button-hover-border-color, transparent);
+  --focus-border-color: var(--ig-button-focus-border-color, transparent);
+  --focus-visible-border-color: var(--ig-button-focus-visible-border-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --active-border-color: var(--ig-button-active-border-color, transparent);
+  --disabled-border-color: var(--ig-button-disabled-border-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --disabled-background: var(--ig-button-disabled-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --disabled-foreground: var(--ig-button-disabled-foreground, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --size: var(--ig-button-size, max(var(--is-large, 1) * max(2.375rem, -1 * 2.375rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem)));
+  --resting-elevation: var(--ig-button-resting-elevation, var(--ig-elevation-0));
+  --hover-elevation: var(--ig-button-hover-elevation, var(--ig-elevation-0));
+  --focus-elevation: var(--ig-button-focus-elevation, var(--ig-elevation-0));
+  --active-elevation: var(--ig-button-active-elevation, var(--ig-elevation-0));
+  --background: var(--ig-button-background, transparent);
+  --foreground: var(--ig-button-foreground, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --hover-background: var(--ig-button-hover-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --hover-foreground: var(--ig-button-hover-foreground, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --focus-background: var(--ig-button-focus-background, transparent);
+  --focus-foreground: var(--ig-button-focus-foreground, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --focus-visible-background: var(--ig-button-focus-visible-background, transparent);
+  --focus-visible-foreground: var(--ig-button-focus-visible-foreground, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --active-background: var(--ig-button-active-background, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --active-foreground: var(--ig-button-active-foreground, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --border-radius: var(--ig-button-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.25rem), 1.25rem));
+}
+:host ::slotted(igc-ripple) {
+  border-radius: var(--border-radius);
 }
 
 [part=base] {
-  border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 0.125rem), 0.125rem);
+  border-radius: var(--border-radius);
   background: transparent;
   color: hsla(var(--ig-primary-500), var(--ig-primary-a));
   -webkit-transition: color 0.15s ease-out, background 0.15s ease-out;
-  -o-transition: color 0.15s ease-out, background 0.15s ease-out;
   transition: color 0.15s ease-out, background 0.15s ease-out;
   -webkit-box-shadow: none;
           box-shadow: none;
@@ -23,8 +48,9 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
   pointer-events: none;
   top: 2px;
   left: 2px;
-  width: calc(100% - 4px);
-  height: calc(100% - 4px);
+  width: calc(100% - (0.125rem * 2));
+  height: calc(100% - (0.125rem * 2));
+  border-radius: calc(var(--border-radius) - 0.25rem);
 }
 [part=base]:hover {
   color: hsla(var(--ig-primary-500), var(--ig-primary-a));
@@ -46,8 +72,8 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
   color: var(--text-color, var(--ig-primary-600-contrast));
   background: hsla(var(--ig-primary-500), var(--ig-primary-a));
 }
-:host([variant=contained]) [part=base]:hover {
-  background: var(--hover-background, hsla(var(--ig-primary-600), var(--ig-primary-a)));
+:host([variant=contained]) [part=base]:hover, :host([variant=contained]) [part=base]:focus, :host([variant=contained]) [part=base]:focus-visible {
+  background: var(--hover-contained-background, hsla(var(--ig-primary-600), var(--ig-primary-a)));
 }
 :host([variant=contained]) [part=base]:active {
   color: var(--ig-primary-800-contrast);
@@ -69,30 +95,24 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
 :host([variant=outlined]) [part=base]:focus {
   background: transparent;
 }
-:host([variant=outlined]) [part=base]:hover, :host([variant=outlined]) [part=base]:focus:hover {
-  background: hsla(var(--ig-gray-100), var(--ig-gray-a));
-}
-:host([variant=outlined]) [part=base]:focus:active {
+:host([variant=outlined]) [part=base]:hover, :host([variant=outlined]) [part=base]:focus:hover, :host([variant=outlined]) [part=base]:focus:active {
   background: hsla(var(--ig-gray-200), var(--ig-gray-a));
 }
+:host([variant=outlined]) [part=base]:focus-visible::after {
+  -webkit-box-shadow: 0 0 0 0.0625rem hsla(var(--ig-gray-900), var(--ig-gray-a));
+          box-shadow: 0 0 0 0.0625rem hsla(var(--ig-gray-900), var(--ig-gray-a));
+}
 :host([variant=outlined]) igc-icon {
   color: hsla(var(--ig-gray-900), var(--ig-gray-a));
 }
 
-:host([disabled]) [part=base] {
+:host([disabled]) [part=base],
+:host(:disabled) [part=base] {
   color: hsla(var(--ig-gray-400), var(--ig-gray-a));
   background: hsla(var(--ig-gray-100), var(--ig-gray-a));
 }
-:host([disabled]) igc-icon {
+:host([disabled]) igc-icon,
+:host(:disabled) igc-icon {
   color: hsla(var(--ig-gray-400), var(--ig-gray-a));
-}
-
-:host([disabled][variant=contained]) [part=base],
-:host([disabled][variant=outlined]) [part=base] {
-  color: hsla(var(--ig-gray-500), var(--ig-gray-a));
-}
-:host([disabled][variant=contained]) igc-icon,
-:host([disabled][variant=outlined]) igc-icon {
-  color: hsla(var(--ig-gray-500), var(--ig-gray-a));
 }`;
 //# sourceMappingURL=icon-button.fluent.css.js.map

package/components/button/themes/icon-button/light/icon-button.fluent.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.fluent.css.js","sourceRoot":"","sources":["../../../../../../src/components/button/themes/icon-button/light/icon-button.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+FvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n:host {\n  --size: max(var(--is-large, 1) * max(2.375rem, -1 * 2.375rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem));\n}\n\n[part=base] {\n  border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 0.125rem), 0.125rem);\n  background: transparent;\n  color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n  -webkit-transition: color 0.15s ease-out, background 0.15s ease-out;\n  -o-transition: color 0.15s ease-out, background 0.15s ease-out;\n  transition: color 0.15s ease-out, background 0.15s ease-out;\n  -webkit-box-shadow: none;\n          box-shadow: none;\n  width: var(--size);\n  height: var(--size);\n  padding: max(var(--is-large, 1) * max(7px, -1 * 7px) * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * max(6px, -1 * 6px) * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * max(4px, -1 * 4px) * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n}\n[part=base]::after {\n  position: absolute;\n  content: \"\";\n  pointer-events: none;\n  top: 2px;\n  left: 2px;\n  width: calc(100% - 4px);\n  height: calc(100% - 4px);\n}\n[part=base]:hover {\n  color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n  background: hsla(var(--ig-gray-200), var(--ig-gray-a));\n}\n[part=base]:active {\n  color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n  background: hsla(var(--ig-gray-300), var(--ig-gray-a));\n}\n[part=base]:focus-visible::after {\n  -webkit-box-shadow: 0 0 0 0.0625rem hsla(var(--ig-gray-500), var(--ig-gray-a));\n          box-shadow: 0 0 0 0.0625rem hsla(var(--ig-gray-500), var(--ig-gray-a));\n}\n[part=base] igc-icon {\n  color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n}\n\n:host([variant=contained]) [part=base] {\n  color: var(--text-color, var(--ig-primary-600-contrast));\n  background: hsla(var(--ig-primary-500), var(--ig-primary-a));\n}\n:host([variant=contained]) [part=base]:hover {\n  background: var(--hover-background, hsla(var(--ig-primary-600), var(--ig-primary-a)));\n}\n:host([variant=contained]) [part=base]:active {\n  color: var(--ig-primary-800-contrast);\n  background: hsla(var(--ig-primary-800), var(--ig-primary-a));\n}\n:host([variant=contained]) [part=base]:focus-visible::after {\n  -webkit-box-shadow: 0 0 0 0.0625rem var(--ig-primary-600-contrast);\n          box-shadow: 0 0 0 0.0625rem var(--ig-primary-600-contrast);\n}\n:host([variant=contained]) igc-icon {\n  color: var(--text-color, var(--ig-primary-600-contrast));\n}\n\n:host([variant=outlined]) [part=base] {\n  color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n  -webkit-box-shadow: 0 0 0 1px hsla(var(--ig-gray-700), var(--ig-gray-a));\n          box-shadow: 0 0 0 1px hsla(var(--ig-gray-700), var(--ig-gray-a));\n}\n:host([variant=outlined]) [part=base]:focus {\n  background: transparent;\n}\n:host([variant=outlined]) [part=base]:hover, :host([variant=outlined]) [part=base]:focus:hover {\n  background: hsla(var(--ig-gray-100), var(--ig-gray-a));\n}\n:host([variant=outlined]) [part=base]:focus:active {\n  background: hsla(var(--ig-gray-200), var(--ig-gray-a));\n}\n:host([variant=outlined]) igc-icon {\n  color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n}\n\n:host([disabled]) [part=base] {\n  color: hsla(var(--ig-gray-400), var(--ig-gray-a));\n  background: hsla(var(--ig-gray-100), var(--ig-gray-a));\n}\n:host([disabled]) igc-icon {\n  color: hsla(var(--ig-gray-400), var(--ig-gray-a));\n}\n\n:host([disabled][variant=contained]) [part=base],\n:host([disabled][variant=outlined]) [part=base] {\n  color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n}\n:host([disabled][variant=contained]) igc-icon,\n:host([disabled][variant=outlined]) igc-icon {\n  color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n}`;\n"]}
+{"version":3,"file":"icon-button.fluent.css.js","sourceRoot":"","sources":["../../../../../../src/components/button/themes/icon-button/light/icon-button.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmHvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --shadow-color: var(--ig-button-shadow-color, transparent);\n  --border-color: var(--ig-button-border-color, transparent);\n  --hover-border-color: var(--ig-button-hover-border-color, transparent);\n  --focus-border-color: var(--ig-button-focus-border-color, transparent);\n  --focus-visible-border-color: var(--ig-button-focus-visible-border-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n  --active-border-color: var(--ig-button-active-border-color, transparent);\n  --disabled-border-color: var(--ig-button-disabled-border-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n  --disabled-background: var(--ig-button-disabled-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n  --disabled-foreground: var(--ig-button-disabled-foreground, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n  --size: var(--ig-button-size, max(var(--is-large, 1) * max(2.375rem, -1 * 2.375rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem)));\n  --resting-elevation: var(--ig-button-resting-elevation, var(--ig-elevation-0));\n  --hover-elevation: var(--ig-button-hover-elevation, var(--ig-elevation-0));\n  --focus-elevation: var(--ig-button-focus-elevation, var(--ig-elevation-0));\n  --active-elevation: var(--ig-button-active-elevation, var(--ig-elevation-0));\n  --background: var(--ig-button-background, transparent);\n  --foreground: var(--ig-button-foreground, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --hover-background: var(--ig-button-hover-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n  --hover-foreground: var(--ig-button-hover-foreground, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --focus-background: var(--ig-button-focus-background, transparent);\n  --focus-foreground: var(--ig-button-focus-foreground, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --focus-visible-background: var(--ig-button-focus-visible-background, transparent);\n  --focus-visible-foreground: var(--ig-button-focus-visible-foreground, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --active-background: var(--ig-button-active-background, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n  --active-foreground: var(--ig-button-active-foreground, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --border-radius: var(--ig-button-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.25rem), 1.25rem));\n}\n:host ::slotted(igc-ripple) {\n  border-radius: var(--border-radius);\n}\n\n[part=base] {\n  border-radius: var(--border-radius);\n  background: transparent;\n  color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n  -webkit-transition: color 0.15s ease-out, background 0.15s ease-out;\n  transition: color 0.15s ease-out, background 0.15s ease-out;\n  -webkit-box-shadow: none;\n          box-shadow: none;\n  width: var(--size);\n  height: var(--size);\n  padding: max(var(--is-large, 1) * max(7px, -1 * 7px) * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * max(6px, -1 * 6px) * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * max(4px, -1 * 4px) * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n}\n[part=base]::after {\n  position: absolute;\n  content: \"\";\n  pointer-events: none;\n  top: 2px;\n  left: 2px;\n  width: calc(100% - (0.125rem * 2));\n  height: calc(100% - (0.125rem * 2));\n  border-radius: calc(var(--border-radius) - 0.25rem);\n}\n[part=base]:hover {\n  color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n  background: hsla(var(--ig-gray-200), var(--ig-gray-a));\n}\n[part=base]:active {\n  color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n  background: hsla(var(--ig-gray-300), var(--ig-gray-a));\n}\n[part=base]:focus-visible::after {\n  -webkit-box-shadow: 0 0 0 0.0625rem hsla(var(--ig-gray-500), var(--ig-gray-a));\n          box-shadow: 0 0 0 0.0625rem hsla(var(--ig-gray-500), var(--ig-gray-a));\n}\n[part=base] igc-icon {\n  color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n}\n\n:host([variant=contained]) [part=base] {\n  color: var(--text-color, var(--ig-primary-600-contrast));\n  background: hsla(var(--ig-primary-500), var(--ig-primary-a));\n}\n:host([variant=contained]) [part=base]:hover, :host([variant=contained]) [part=base]:focus, :host([variant=contained]) [part=base]:focus-visible {\n  background: var(--hover-contained-background, hsla(var(--ig-primary-600), var(--ig-primary-a)));\n}\n:host([variant=contained]) [part=base]:active {\n  color: var(--ig-primary-800-contrast);\n  background: hsla(var(--ig-primary-800), var(--ig-primary-a));\n}\n:host([variant=contained]) [part=base]:focus-visible::after {\n  -webkit-box-shadow: 0 0 0 0.0625rem var(--ig-primary-600-contrast);\n          box-shadow: 0 0 0 0.0625rem var(--ig-primary-600-contrast);\n}\n:host([variant=contained]) igc-icon {\n  color: var(--text-color, var(--ig-primary-600-contrast));\n}\n\n:host([variant=outlined]) [part=base] {\n  color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n  -webkit-box-shadow: 0 0 0 1px hsla(var(--ig-gray-700), var(--ig-gray-a));\n          box-shadow: 0 0 0 1px hsla(var(--ig-gray-700), var(--ig-gray-a));\n}\n:host([variant=outlined]) [part=base]:focus {\n  background: transparent;\n}\n:host([variant=outlined]) [part=base]:hover, :host([variant=outlined]) [part=base]:focus:hover, :host([variant=outlined]) [part=base]:focus:active {\n  background: hsla(var(--ig-gray-200), var(--ig-gray-a));\n}\n:host([variant=outlined]) [part=base]:focus-visible::after {\n  -webkit-box-shadow: 0 0 0 0.0625rem hsla(var(--ig-gray-900), var(--ig-gray-a));\n          box-shadow: 0 0 0 0.0625rem hsla(var(--ig-gray-900), var(--ig-gray-a));\n}\n:host([variant=outlined]) igc-icon {\n  color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n}\n\n:host([disabled]) [part=base],\n:host(:disabled) [part=base] {\n  color: hsla(var(--ig-gray-400), var(--ig-gray-a));\n  background: hsla(var(--ig-gray-100), var(--ig-gray-a));\n}\n:host([disabled]) igc-icon,\n:host(:disabled) igc-icon {\n  color: hsla(var(--ig-gray-400), var(--ig-gray-a));\n}`;\n"]}

package/components/button/themes/icon-button/light/icon-button.indigo.css.js

@@ -1,13 +1,39 @@
 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 */
-:host {
-  --size: max(var(--is-large, 1) * max(2.25rem, -1 * 2.25rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem));
+export const styles = css `:host {
+  --shadow-color: var(--ig-button-shadow-color, transparent);
+  --border-color: var(--ig-button-border-color, transparent);
+  --hover-border-color: var(--ig-button-hover-border-color, transparent);
+  --focus-border-color: var(--ig-button-focus-border-color, hsla(var(--ig-gray 300-500), var(--ig-gray 300-a)));
+  --focus-visible-border-color: var(--ig-button-focus-visible-border-color, hsla(var(--ig-gray 300-500), var(--ig-gray 300-a)));
+  --active-border-color: var(--ig-button-active-border-color, hsla(var(--ig-gray 300-500), var(--ig-gray 300-a)));
+  --disabled-border-color: var(--ig-button-disabled-border-color, transparent);
+  --disabled-background: var(--ig-button-disabled-background, transparent);
+  --disabled-foreground: var(--ig-button-disabled-foreground, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --size: var(--ig-button-size, max(var(--is-large, 1) * max(2.25rem, -1 * 2.25rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));
+  --resting-elevation: var(--ig-button-resting-elevation, var(--ig-elevation-0));
+  --hover-elevation: var(--ig-button-hover-elevation, var(--ig-elevation-0));
+  --focus-elevation: var(--ig-button-focus-elevation, var(--ig-elevation-0));
+  --active-elevation: var(--ig-button-active-elevation, var(--ig-elevation-0));
+  --background: var(--ig-button-background, transparent);
+  --foreground: var(--ig-button-foreground, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --hover-background: var(--ig-button-hover-background, transparent);
+  --hover-foreground: var(--ig-button-hover-foreground, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --focus-background: var(--ig-button-focus-background, transparent);
+  --focus-foreground: var(--ig-button-focus-foreground, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --focus-visible-background: var(--ig-button-focus-visible-background, transparent);
+  --focus-visible-foreground: var(--ig-button-focus-visible-foreground, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --active-background: var(--ig-button-active-background, transparent);
+  --active-foreground: var(--ig-button-active-foreground, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --border-radius: var(--ig-button-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 1.25rem), 1.25rem));
+}
+:host ::slotted(igc-ripple) {
+  border-radius: var(--border-radius);
 }
 
 [part=base] {
+  border-radius: var(--border-radius);
   -webkit-transition: color 0.15s ease-in-out, background 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
   transition: color 0.15s ease-in-out, background 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
-  -o-transition: color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background 0.15s ease-in-out;
   transition: color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background 0.15s ease-in-out;
   transition: color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
   color: hsla(var(--ig-gray-700), var(--ig-gray-a));
@@ -68,17 +94,20 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
           box-shadow: 0 0 0 0.1875rem hsla(var(--ig-gray-300), var(--ig-gray-a));
 }
 
-:host([disabled]) [part=base] {
+:host([disabled]) [part=base],
+:host(:disabled) [part=base] {
   color: hsla(var(--ig-gray-400), var(--ig-gray-a));
   background: transparent;
   -webkit-box-shadow: none;
           box-shadow: none;
 }
-:host([disabled]) igc-icon {
+:host([disabled]) igc-icon,
+:host(:disabled) igc-icon {
   color: hsla(var(--ig-gray-400), var(--ig-gray-a));
 }
 
-:host([disabled][variant=contained]) [part=base] {
+:host([disabled][variant=contained]) [part=base],
+:host(:disabled[variant=contained]) [part=base] {
   background: hsla(var(--ig-gray-100), var(--ig-gray-a));
   color: hsla(var(--ig-gray-400), var(--ig-gray-a));
 }`;

package/components/button/themes/icon-button/light/icon-button.indigo.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.indigo.css.js","sourceRoot":"","sources":["../../../../../../src/components/button/themes/icon-button/light/icon-button.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkFvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n:host {\n  --size: max(var(--is-large, 1) * max(2.25rem, -1 * 2.25rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem));\n}\n\n[part=base] {\n  -webkit-transition: color 0.15s ease-in-out, background 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;\n  transition: color 0.15s ease-in-out, background 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;\n  -o-transition: color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background 0.15s ease-in-out;\n  transition: color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background 0.15s ease-in-out;\n  transition: color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;\n  color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n  width: var(--size);\n  height: var(--size);\n  padding: max(var(--is-large, 1) * max(6px, -1 * 6px) * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * max(6px, -1 * 6px) * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * max(6px, -1 * 6px) * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n}\n[part=base]:hover {\n  color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n  background: transparent;\n}\n[part=base]:focus, [part=base]:active {\n  color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n  background: transparent;\n  -webkit-box-shadow: 0 0 0 0.1875rem hsla(var(--ig-gray-300), var(--ig-gray-a));\n          box-shadow: 0 0 0 0.1875rem hsla(var(--ig-gray-300), var(--ig-gray-a));\n}\n[part=base] igc-icon {\n  color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n}\n\n:host([variant=contained]) [part=base] {\n  color: var(--ig-primary-600-contrast);\n  background: hsla(var(--ig-primary-500), var(--ig-primary-a));\n}\n:host([variant=contained]) [part=base]:hover {\n  background: hsla(var(--ig-primary-400), var(--ig-primary-a));\n}\n:host([variant=contained]) [part=base]:focus, :host([variant=contained]) [part=base]:active {\n  background: hsla(var(--ig-primary-400), var(--ig-primary-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:host([variant=contained]) igc-icon {\n  color: var(--ig-primary-600-contrast);\n}\n\n:host([variant=outlined]) [part=base] {\n  -webkit-box-shadow: none;\n          box-shadow: none;\n}\n:host([variant=outlined]) [part=base]::after {\n  position: absolute;\n  content: \"\";\n  -webkit-box-shadow: inset 0 0 0 0.125rem hsla(var(--ig-gray-500), var(--ig-gray-a));\n          box-shadow: inset 0 0 0 0.125rem hsla(var(--ig-gray-500), var(--ig-gray-a));\n  width: 100%;\n  height: 100%;\n  border-radius: inherit;\n}\n:host([variant=outlined]) [part=base]:hover {\n  color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n  background: hsla(var(--ig-gray-100), var(--ig-gray-a));\n}\n:host([variant=outlined]) [part=base]:focus, :host([variant=outlined]) [part=base]:active {\n  color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n  -webkit-box-shadow: 0 0 0 0.1875rem hsla(var(--ig-gray-300), var(--ig-gray-a));\n          box-shadow: 0 0 0 0.1875rem hsla(var(--ig-gray-300), var(--ig-gray-a));\n}\n\n:host([disabled]) [part=base] {\n  color: hsla(var(--ig-gray-400), var(--ig-gray-a));\n  background: transparent;\n  -webkit-box-shadow: none;\n          box-shadow: none;\n}\n:host([disabled]) igc-icon {\n  color: hsla(var(--ig-gray-400), var(--ig-gray-a));\n}\n\n:host([disabled][variant=contained]) [part=base] {\n  background: hsla(var(--ig-gray-100), var(--ig-gray-a));\n  color: hsla(var(--ig-gray-400), var(--ig-gray-a));\n}`;\n"]}
+{"version":3,"file":"icon-button.indigo.css.js","sourceRoot":"","sources":["../../../../../../src/components/button/themes/icon-button/light/icon-button.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+GvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --shadow-color: var(--ig-button-shadow-color, transparent);\n  --border-color: var(--ig-button-border-color, transparent);\n  --hover-border-color: var(--ig-button-hover-border-color, transparent);\n  --focus-border-color: var(--ig-button-focus-border-color, hsla(var(--ig-gray 300-500), var(--ig-gray 300-a)));\n  --focus-visible-border-color: var(--ig-button-focus-visible-border-color, hsla(var(--ig-gray 300-500), var(--ig-gray 300-a)));\n  --active-border-color: var(--ig-button-active-border-color, hsla(var(--ig-gray 300-500), var(--ig-gray 300-a)));\n  --disabled-border-color: var(--ig-button-disabled-border-color, transparent);\n  --disabled-background: var(--ig-button-disabled-background, transparent);\n  --disabled-foreground: var(--ig-button-disabled-foreground, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n  --size: var(--ig-button-size, max(var(--is-large, 1) * max(2.25rem, -1 * 2.25rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));\n  --resting-elevation: var(--ig-button-resting-elevation, var(--ig-elevation-0));\n  --hover-elevation: var(--ig-button-hover-elevation, var(--ig-elevation-0));\n  --focus-elevation: var(--ig-button-focus-elevation, var(--ig-elevation-0));\n  --active-elevation: var(--ig-button-active-elevation, var(--ig-elevation-0));\n  --background: var(--ig-button-background, transparent);\n  --foreground: var(--ig-button-foreground, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --hover-background: var(--ig-button-hover-background, transparent);\n  --hover-foreground: var(--ig-button-hover-foreground, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --focus-background: var(--ig-button-focus-background, transparent);\n  --focus-foreground: var(--ig-button-focus-foreground, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --focus-visible-background: var(--ig-button-focus-visible-background, transparent);\n  --focus-visible-foreground: var(--ig-button-focus-visible-foreground, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --active-background: var(--ig-button-active-background, transparent);\n  --active-foreground: var(--ig-button-active-foreground, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --border-radius: var(--ig-button-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 1.25rem), 1.25rem));\n}\n:host ::slotted(igc-ripple) {\n  border-radius: var(--border-radius);\n}\n\n[part=base] {\n  border-radius: var(--border-radius);\n  -webkit-transition: color 0.15s ease-in-out, background 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;\n  transition: color 0.15s ease-in-out, background 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;\n  transition: color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background 0.15s ease-in-out;\n  transition: color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;\n  color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n  width: var(--size);\n  height: var(--size);\n  padding: max(var(--is-large, 1) * max(6px, -1 * 6px) * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * max(6px, -1 * 6px) * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * max(6px, -1 * 6px) * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n}\n[part=base]:hover {\n  color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n  background: transparent;\n}\n[part=base]:focus, [part=base]:active {\n  color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n  background: transparent;\n  -webkit-box-shadow: 0 0 0 0.1875rem hsla(var(--ig-gray-300), var(--ig-gray-a));\n          box-shadow: 0 0 0 0.1875rem hsla(var(--ig-gray-300), var(--ig-gray-a));\n}\n[part=base] igc-icon {\n  color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n}\n\n:host([variant=contained]) [part=base] {\n  color: var(--ig-primary-600-contrast);\n  background: hsla(var(--ig-primary-500), var(--ig-primary-a));\n}\n:host([variant=contained]) [part=base]:hover {\n  background: hsla(var(--ig-primary-400), var(--ig-primary-a));\n}\n:host([variant=contained]) [part=base]:focus, :host([variant=contained]) [part=base]:active {\n  background: hsla(var(--ig-primary-400), var(--ig-primary-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:host([variant=contained]) igc-icon {\n  color: var(--ig-primary-600-contrast);\n}\n\n:host([variant=outlined]) [part=base] {\n  -webkit-box-shadow: none;\n          box-shadow: none;\n}\n:host([variant=outlined]) [part=base]::after {\n  position: absolute;\n  content: \"\";\n  -webkit-box-shadow: inset 0 0 0 0.125rem hsla(var(--ig-gray-500), var(--ig-gray-a));\n          box-shadow: inset 0 0 0 0.125rem hsla(var(--ig-gray-500), var(--ig-gray-a));\n  width: 100%;\n  height: 100%;\n  border-radius: inherit;\n}\n:host([variant=outlined]) [part=base]:hover {\n  color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n  background: hsla(var(--ig-gray-100), var(--ig-gray-a));\n}\n:host([variant=outlined]) [part=base]:focus, :host([variant=outlined]) [part=base]:active {\n  color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n  -webkit-box-shadow: 0 0 0 0.1875rem hsla(var(--ig-gray-300), var(--ig-gray-a));\n          box-shadow: 0 0 0 0.1875rem hsla(var(--ig-gray-300), var(--ig-gray-a));\n}\n\n:host([disabled]) [part=base],\n:host(:disabled) [part=base] {\n  color: hsla(var(--ig-gray-400), var(--ig-gray-a));\n  background: transparent;\n  -webkit-box-shadow: none;\n          box-shadow: none;\n}\n:host([disabled]) igc-icon,\n:host(:disabled) igc-icon {\n  color: hsla(var(--ig-gray-400), var(--ig-gray-a));\n}\n\n:host([disabled][variant=contained]) [part=base],\n:host(:disabled[variant=contained]) [part=base] {\n  background: hsla(var(--ig-gray-100), var(--ig-gray-a));\n  color: hsla(var(--ig-gray-400), var(--ig-gray-a));\n}`;\n"]}

package/components/button/themes/icon-button/light/icon-button.material.css.js

@@ -1,10 +1,37 @@
 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 */
-:host {
-  --size: max(var(--is-large, 1) * max(2.25rem, -1 * 2.25rem), var(--is-medium, 1) * max(1.875rem, -1 * 1.875rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem));
+export const styles = css `:host {
+  --shadow-color: var(--ig-button-shadow-color, transparent);
+  --border-color: var(--ig-button-border-color, transparent);
+  --hover-border-color: var(--ig-button-hover-border-color, transparent);
+  --focus-border-color: var(--ig-button-focus-border-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --focus-visible-border-color: var(--ig-button-focus-visible-border-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --active-border-color: var(--ig-button-active-border-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --disabled-border-color: var(--ig-button-disabled-border-color, transparent);
+  --disabled-background: var(--ig-button-disabled-background, transparent);
+  --disabled-foreground: var(--ig-button-disabled-foreground, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --size: var(--ig-button-size, max(var(--is-large, 1) * max(2.25rem, -1 * 2.25rem), var(--is-medium, 1) * max(1.875rem, -1 * 1.875rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem)));
+  --resting-elevation: var(--ig-button-resting-elevation, var(--ig-elevation-0));
+  --hover-elevation: var(--ig-button-hover-elevation, var(--ig-elevation-0));
+  --focus-elevation: var(--ig-button-focus-elevation, var(--ig-elevation-0));
+  --active-elevation: var(--ig-button-active-elevation, var(--ig-elevation-0));
+  --background: var(--ig-button-background, transparent);
+  --foreground: var(--ig-button-foreground, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --hover-background: var(--ig-button-hover-background, transparent);
+  --hover-foreground: var(--ig-button-hover-foreground, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --focus-background: var(--ig-button-focus-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --focus-foreground: var(--ig-button-focus-foreground, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --focus-visible-background: var(--ig-button-focus-visible-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --focus-visible-foreground: var(--ig-button-focus-visible-foreground, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --active-background: var(--ig-button-active-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --active-foreground: var(--ig-button-active-foreground, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --border-radius: var(--ig-button-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 1.25rem), 1.25rem));
+}
+:host ::slotted(igc-ripple) {
+  border-radius: var(--border-radius);
 }
 
 [part=base] {
+  border-radius: var(--border-radius);
   width: var(--size);
   height: var(--size);
   padding: max(var(--is-large, 1) * max(6px, -1 * 6px) * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * max(6px, -1 * 6px) * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * max(6px, -1 * 6px) * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));
@@ -25,7 +52,6 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
 
 :host(:focus-within) [part=base] {
   -webkit-transition: none;
-  -o-transition: none;
   transition: none;
   background: hsla(var(--ig-gray-200), var(--ig-gray-a));
   -webkit-box-shadow: inset 0 0 0 1px hsla(var(--ig-gray-400), var(--ig-gray-a));
@@ -36,17 +62,21 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
   background: hsla(var(--ig-gray-300), var(--ig-gray-a));
 }
 
-:host([disabled]) [part=base] {
+:host([disabled]) [part=base],
+:host(:disabled) [part=base] {
   color: hsla(var(--ig-gray-500), var(--ig-gray-a));
 }
-:host([disabled]) igc-icon {
+:host([disabled]) igc-icon,
+:host(:disabled) igc-icon {
   color: hsla(var(--ig-gray-500), var(--ig-gray-a));
 }
 
-:host([disabled][variant=contained]) [part=base] {
+:host([disabled][variant=contained]) [part=base],
+:host(:disabled[variant=contained]) [part=base] {
   background: hsla(var(--ig-gray-100), var(--ig-gray-a));
 }
 
+:host(:disabled[variant=outlined]) [part=base],
 :host([disabled][variant=outlined]) [part=base] {
   background: hsla(var(--ig-gray-100), var(--ig-gray-a));
   -webkit-box-shadow: inset 0 0 0 1px hsla(var(--ig-gray-100), var(--ig-gray-a));

package/components/button/themes/icon-button/light/icon-button.material.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.material.css.js","sourceRoot":"","sources":["../../../../../../src/components/button/themes/icon-button/light/icon-button.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoDvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n:host {\n  --size: max(var(--is-large, 1) * max(2.25rem, -1 * 2.25rem), var(--is-medium, 1) * max(1.875rem, -1 * 1.875rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem));\n}\n\n[part=base] {\n  width: var(--size);\n  height: var(--size);\n  padding: max(var(--is-large, 1) * max(6px, -1 * 6px) * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * max(6px, -1 * 6px) * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * max(6px, -1 * 6px) * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n  color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n}\n[part=base] igc-icon {\n  color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n}\n\n:host([variant=contained]) [part=base] {\n  background: hsla(var(--ig-gray-200), var(--ig-gray-a));\n}\n\n:host([variant=outlined]) [part=base] {\n  -webkit-box-shadow: inset 0 0 0 1px hsla(var(--ig-gray-300), var(--ig-gray-a));\n          box-shadow: inset 0 0 0 1px hsla(var(--ig-gray-300), var(--ig-gray-a));\n}\n\n:host(:focus-within) [part=base] {\n  -webkit-transition: none;\n  -o-transition: none;\n  transition: none;\n  background: hsla(var(--ig-gray-200), var(--ig-gray-a));\n  -webkit-box-shadow: inset 0 0 0 1px hsla(var(--ig-gray-400), var(--ig-gray-a));\n          box-shadow: inset 0 0 0 1px hsla(var(--ig-gray-400), var(--ig-gray-a));\n}\n\n:host([variant=contained]:focus-within) [part=base] {\n  background: hsla(var(--ig-gray-300), var(--ig-gray-a));\n}\n\n:host([disabled]) [part=base] {\n  color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n}\n:host([disabled]) igc-icon {\n  color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n}\n\n:host([disabled][variant=contained]) [part=base] {\n  background: hsla(var(--ig-gray-100), var(--ig-gray-a));\n}\n\n:host([disabled][variant=outlined]) [part=base] {\n  background: hsla(var(--ig-gray-100), var(--ig-gray-a));\n  -webkit-box-shadow: inset 0 0 0 1px hsla(var(--ig-gray-100), var(--ig-gray-a));\n          box-shadow: inset 0 0 0 1px hsla(var(--ig-gray-100), var(--ig-gray-a));\n}`;\n"]}
+{"version":3,"file":"icon-button.material.css.js","sourceRoot":"","sources":["../../../../../../src/components/button/themes/icon-button/light/icon-button.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkFvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --shadow-color: var(--ig-button-shadow-color, transparent);\n  --border-color: var(--ig-button-border-color, transparent);\n  --hover-border-color: var(--ig-button-hover-border-color, transparent);\n  --focus-border-color: var(--ig-button-focus-border-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n  --focus-visible-border-color: var(--ig-button-focus-visible-border-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n  --active-border-color: var(--ig-button-active-border-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n  --disabled-border-color: var(--ig-button-disabled-border-color, transparent);\n  --disabled-background: var(--ig-button-disabled-background, transparent);\n  --disabled-foreground: var(--ig-button-disabled-foreground, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n  --size: var(--ig-button-size, max(var(--is-large, 1) * max(2.25rem, -1 * 2.25rem), var(--is-medium, 1) * max(1.875rem, -1 * 1.875rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem)));\n  --resting-elevation: var(--ig-button-resting-elevation, var(--ig-elevation-0));\n  --hover-elevation: var(--ig-button-hover-elevation, var(--ig-elevation-0));\n  --focus-elevation: var(--ig-button-focus-elevation, var(--ig-elevation-0));\n  --active-elevation: var(--ig-button-active-elevation, var(--ig-elevation-0));\n  --background: var(--ig-button-background, transparent);\n  --foreground: var(--ig-button-foreground, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --hover-background: var(--ig-button-hover-background, transparent);\n  --hover-foreground: var(--ig-button-hover-foreground, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --focus-background: var(--ig-button-focus-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n  --focus-foreground: var(--ig-button-focus-foreground, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --focus-visible-background: var(--ig-button-focus-visible-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n  --focus-visible-foreground: var(--ig-button-focus-visible-foreground, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --active-background: var(--ig-button-active-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n  --active-foreground: var(--ig-button-active-foreground, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --border-radius: var(--ig-button-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 1.25rem), 1.25rem));\n}\n:host ::slotted(igc-ripple) {\n  border-radius: var(--border-radius);\n}\n\n[part=base] {\n  border-radius: var(--border-radius);\n  width: var(--size);\n  height: var(--size);\n  padding: max(var(--is-large, 1) * max(6px, -1 * 6px) * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * max(6px, -1 * 6px) * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * max(6px, -1 * 6px) * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n  color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n}\n[part=base] igc-icon {\n  color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n}\n\n:host([variant=contained]) [part=base] {\n  background: hsla(var(--ig-gray-200), var(--ig-gray-a));\n}\n\n:host([variant=outlined]) [part=base] {\n  -webkit-box-shadow: inset 0 0 0 1px hsla(var(--ig-gray-300), var(--ig-gray-a));\n          box-shadow: inset 0 0 0 1px hsla(var(--ig-gray-300), var(--ig-gray-a));\n}\n\n:host(:focus-within) [part=base] {\n  -webkit-transition: none;\n  transition: none;\n  background: hsla(var(--ig-gray-200), var(--ig-gray-a));\n  -webkit-box-shadow: inset 0 0 0 1px hsla(var(--ig-gray-400), var(--ig-gray-a));\n          box-shadow: inset 0 0 0 1px hsla(var(--ig-gray-400), var(--ig-gray-a));\n}\n\n:host([variant=contained]:focus-within) [part=base] {\n  background: hsla(var(--ig-gray-300), var(--ig-gray-a));\n}\n\n:host([disabled]) [part=base],\n:host(:disabled) [part=base] {\n  color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n}\n:host([disabled]) igc-icon,\n:host(:disabled) igc-icon {\n  color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n}\n\n:host([disabled][variant=contained]) [part=base],\n:host(:disabled[variant=contained]) [part=base] {\n  background: hsla(var(--ig-gray-100), var(--ig-gray-a));\n}\n\n:host(:disabled[variant=outlined]) [part=base],\n:host([disabled][variant=outlined]) [part=base] {\n  background: hsla(var(--ig-gray-100), var(--ig-gray-a));\n  -webkit-box-shadow: inset 0 0 0 1px hsla(var(--ig-gray-100), var(--ig-gray-a));\n          box-shadow: inset 0 0 0 1px hsla(var(--ig-gray-100), var(--ig-gray-a));\n}`;\n"]}

package/components/calendar/calendar.d.ts

@@ -1,7 +1,7 @@
 import { IgcCalendarResourceStrings } from '../common/i18n/calendar.resources.js';
 import { Constructor } from '../common/mixins/constructor.js';
 import { IgcCalendarBaseComponent, IgcCalendarBaseEventMap } from './common/calendar-base.js';
-import { ThemeController } from '../../theming/types.js';
+import { themeSymbol } from '../../theming/theming-decorator.js';
 declare const IgcCalendarComponent_base: Constructor<import("../common/mixins/sizable.js").SizableInterface> & import("../common/mixins/constructor.js").AbstractConstructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcCalendarBaseEventMap>> & Constructor<IgcCalendarBaseComponent>;
 /**
  * Represents a calendar that lets users
@@ -37,8 +37,7 @@ export default class IgcCalendarComponent extends IgcCalendarComponent_base {
     private formatterMonth;
     private formatterWeekday;
     private formatterMonthDay;
-    protected themeController: ThemeController;
-    private theme;
+    private readonly [themeSymbol];
     private rangePreviewDate?;
     private activeDaysViewIndex;
     private daysViews;
@@ -61,8 +60,6 @@ export default class IgcCalendarComponent extends IgcCalendarComponent_base {
     /** The resource strings. */
     resourceStrings: IgcCalendarResourceStrings;
     protected formattersChange(): void;
-    protected themeAdopted(controller: ThemeController): void;
-    protected willUpdate(): void;
     constructor();
     private get yearPerPage();
     private get previousButtonLabel();

package/components/calendar/calendar.js

@@ -14,10 +14,11 @@ import { partNameMap } from '../common/util.js';
 import { IgcCalendarBaseComponent, MONTHS_PER_ROW, YEARS_PER_ROW, } from './common/calendar-base.js';
 import { TimeDeltaInterval } from './common/calendar.model.js';
 import { calculateYearsRangeStart, setDateSafe } from './common/utils.js';
-import { styles as bootstrap } from './themes/bootstrap/calendar.bootstrap.css.js';
 import { styles } from './themes/calendar.base.css.js';
+import { styles as bootstrap } from './themes/bootstrap/calendar.bootstrap.css.js';
 import { styles as fluent } from './themes/fluent/calendar.fluent.css.js';
-import { themes } from '../../theming/theming-decorator.js';
+import { styles as indigo } from './themes/indigo/calendar.indigo.css.js';
+import { themeSymbol, themes } from '../../theming/theming-decorator.js';
 import { watch } from '../common/decorators/watch.js';
 import { defineComponents } from '../common/definitions/defineComponents.js';
 import IgcYearsViewComponent from './years-view/years-view.js';
@@ -29,12 +30,6 @@ let IgcCalendarComponent = class IgcCalendarComponent extends SizableMixin(Event
     formattersChange() {
         this.initFormatters();
     }
-    themeAdopted(controller) {
-        this.themeController = controller;
-    }
-    willUpdate() {
-        this.theme = this.themeController.theme;
-    }
     constructor() {
         super();
         this.activeDaysViewIndex = 0;
@@ -386,8 +381,8 @@ let IgcCalendarComponent = class IgcCalendarComponent extends SizableMixin(Event
         activeDate = activeDate !== null && activeDate !== void 0 ? activeDate : this.activeDate;
         let startYear = undefined;
         let endYear = undefined;
-        const prev_icon = this.theme === 'fluent' ? 'arrow_upward' : 'navigate_before';
-        const next_icon = this.theme === 'fluent' ? 'arrow_downward' : 'navigate_next';
+        const prev_icon = this[themeSymbol] === 'fluent' ? 'arrow_upward' : 'navigate_before';
+        const next_icon = this[themeSymbol] === 'fluent' ? 'arrow_downward' : 'navigate_next';
         if (this.activeView === 'years') {
             startYear = calculateYearsRangeStart(activeDate, this.yearPerPage);
             endYear = startYear + this.yearPerPage - 1;
@@ -521,33 +516,33 @@ let IgcCalendarComponent = class IgcCalendarComponent extends SizableMixin(Event
       >
         ${this.activeView === 'days'
             ? activeDates.map((activeDate, i) => html `<div part="days-view-container">
-                ${this.renderNavigation(activeDate, this.orientation === 'horizontal'
+                  ${this.renderNavigation(activeDate, this.orientation === 'horizontal'
                 ? i === activeDates.length - 1
                 : i === 0, i)}
-                <igc-days-view
-                  part="days-view"
-                  .active=${this.activeDaysViewIndex === i}
-                  .activeDate=${activeDate}
-                  .weekStart=${this.weekStart}
-                  .weekDayFormat=${this.formatOptions.weekday}
-                  .locale=${this.locale}
-                  .selection=${this.selection}
-                  .value=${this.value}
-                  .values=${this.values}
-                  .hideLeadingDays=${this.hideOutsideDays || i !== 0}
-                  .hideTrailingDays=${this.hideOutsideDays ||
+                  <igc-days-view
+                    part="days-view"
+                    .active=${this.activeDaysViewIndex === i}
+                    .activeDate=${activeDate}
+                    .weekStart=${this.weekStart}
+                    .weekDayFormat=${this.formatOptions.weekday}
+                    .locale=${this.locale}
+                    .selection=${this.selection}
+                    .value=${this.value}
+                    .values=${this.values}
+                    .hideLeadingDays=${this.hideOutsideDays || i !== 0}
+                    .hideTrailingDays=${this.hideOutsideDays ||
                 i !== activeDates.length - 1}
-                  .showWeekNumbers=${this.showWeekNumbers}
-                  .disabledDates=${this.disabledDates}
-                  .specialDates=${this.specialDates}
-                  .rangePreviewDate=${this.rangePreviewDate}
-                  .resourceStrings=${this.resourceStrings}
-                  exportparts="days-row, label, date-inner, week-number-inner, week-number, date, first, last, selected, inactive, hidden, current, weekend, range, special, disabled, single, preview"
-                  @igcChange=${this.changeValue}
-                  @igcActiveDateChange=${this.activeDateChanged}
-                  @igcRangePreviewDateChange=${this.rangePreviewDateChange}
-                ></igc-days-view>
-              </div>`)
+                    .showWeekNumbers=${this.showWeekNumbers}
+                    .disabledDates=${this.disabledDates}
+                    .specialDates=${this.specialDates}
+                    .rangePreviewDate=${this.rangePreviewDate}
+                    .resourceStrings=${this.resourceStrings}
+                    exportparts="days-row, label, date-inner, week-number-inner, week-number, date, first, last, selected, inactive, hidden, current, weekend, range, special, disabled, single, preview"
+                    @igcChange=${this.changeValue}
+                    @igcActiveDateChange=${this.activeDateChanged}
+                    @igcRangePreviewDateChange=${this.rangePreviewDateChange}
+                  ></igc-days-view>
+                </div>`)
             : ''}
         ${this.activeView === 'months'
             ? html ` ${this.renderNavigation()}
@@ -623,7 +618,8 @@ IgcCalendarComponent = __decorate([
     themes({
         bootstrap,
         fluent,
-    })
+        indigo,
+    }, true)
 ], IgcCalendarComponent);
 export default IgcCalendarComponent;
 //# sourceMappingURL=calendar.js.map