igniteui-webcomponents 4.4.0 → 4.5.0

package/components/button-group/themes/light/toggle-button/toggle-button.base.css.js

@@ -0,0 +1,161 @@
+import { css } from 'lit';
+export const styles = css `:host {
+  --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);
+  --is-medium: min(
+      clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),
+      clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)
+  );
+  --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);
+  position: relative;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  scrollbar-width: var(--ig-scrollbar-size);
+  scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);
+}
+:host *,
+:host *::before,
+:host *::after {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+:host ::-webkit-scrollbar {
+  width: var(--ig-scrollbar-size);
+  height: var(--ig-scrollbar-size);
+  background: var(--ig-scrollbar-track-background);
+}
+:host ::-webkit-scrollbar-thumb {
+  background: var(--ig-scrollbar-thumb-background);
+}
+
+:host([hidden]),
+[hidden] {
+  display: none !important;
+}
+:host {
+  --component-size: var(--ig-size, var(--ig-size-large));
+  --_toggle-button-border-size: 0.0625rem;
+  font-family: var(--ig-button-font-family, var(--ig-font-family));
+  font-size: var(--ig-button-font-size);
+  font-weight: var(--ig-button-font-weight);
+  font-style: var(--ig-button-font-style);
+  line-height: var(--ig-button-line-height);
+  letter-spacing: var(--ig-button-letter-spacing);
+  text-transform: var(--ig-button-text-transform);
+  margin-top: var(--ig-button-margin-top);
+  margin-bottom: var(--ig-button-margin-bottom);
+  font-family: var(--ig-font-family);
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+      -ms-flex: 1 0 0%;
+          flex: 1 0 0%;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  text-decoration: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+:host [part~=toggle] {
+  font-family: var(--ig-button-font-family, var(--ig-font-family));
+  font-size: var(--ig-button-font-size);
+  font-weight: var(--ig-button-font-weight);
+  font-style: var(--ig-button-font-style);
+  line-height: var(--ig-button-line-height);
+  letter-spacing: var(--ig-button-letter-spacing);
+  text-transform: var(--ig-button-text-transform);
+  margin-top: var(--ig-button-margin-top);
+  margin-bottom: var(--ig-button-margin-bottom);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  cursor: pointer;
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  border-style: solid;
+  border-width: var(--_toggle-button-border-size);
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  background: transparent;
+  color: inherit;
+  max-width: 100%;
+  -webkit-transition: all 140ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
+  transition: all 140ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
+  position: relative;
+  z-index: 0;
+  gap: max(var(--is-large, 1) * max(0.75rem, -1 * 0.75rem), var(--is-medium, 1) * max(0.5rem, -1 * 0.5rem), var(--is-small, 1) * max(0.25rem, -1 * 0.25rem));
+}
+:host [part~=toggle] ::slotted(*) {
+  max-width: 100%;
+}
+:host [part~=toggle] ::slotted(:not(igc-icon)) {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+:host-context(:disabled),
+:host-context([disabled]),
+:host(:disabled),
+:host([disabled]) {
+  cursor: default;
+  pointer-events: none;
+}
+
+:host([selected]:disabled) [part~=toggle]::before,
+:host([selected][disabled]) [part~=toggle]::before {
+  position: absolute;
+  content: "";
+  inset: 0;
+  z-index: 3;
+  background: hsla(var(--ig-gray-500), 0.12);
+}
+
+:host(:focus-within) [part~=toggle],
+:host(:focus) [part~=toggle] {
+  outline: none;
+}
+
+:host([selected]) [part~=toggle] {
+  z-index: 1;
+}
+
+:host(:not(:first-child)) {
+  -webkit-margin-start: var(--_negative-margin-horizontal, 0);
+          margin-inline-start: var(--_negative-margin-horizontal, 0);
+  -webkit-margin-before: var(--_negative-margin-vertical, 0);
+          margin-block-start: var(--_negative-margin-vertical, 0);
+}
+
+:host(:not(:first-child) :not(:last-child)) [part~=toggle] {
+  border-radius: 0;
+}
+
+:host(:first-child) [part~=toggle] {
+  border-start-start-radius: var(--vertical-radius, var(--horizontal-radius, 0));
+  border-end-start-radius: var(--horizontal-radius, 0);
+  border-start-end-radius: var(--vertical-radius, 0);
+}
+
+:host(:last-child) [part~=toggle] {
+  border-start-end-radius: var(--horizontal-radius, 0);
+  border-end-end-radius: var(--vertical-radius, var(--horizontal-radius, 0));
+  border-end-start-radius: var(--vertical-radius, 0);
+}`;
+//# sourceMappingURL=toggle-button.base.css.js.map

package/components/button-group/themes/light/toggle-button/toggle-button.base.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-button.base.css.js","sourceRoot":"","sources":["../../../../../../src/components/button-group/themes/light/toggle-button/toggle-button.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8JvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n  --is-medium: min(\n      clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n      clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n  );\n  --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n  position: relative;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  scrollbar-width: var(--ig-scrollbar-size);\n  scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\n}\n:host *,\n:host *::before,\n:host *::after {\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n  width: var(--ig-scrollbar-size);\n  height: var(--ig-scrollbar-size);\n  background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n  background: var(--ig-scrollbar-thumb-background);\n}\n\n:host([hidden]),\n[hidden] {\n  display: none !important;\n}\n:host {\n  --component-size: var(--ig-size, var(--ig-size-large));\n  --_toggle-button-border-size: 0.0625rem;\n  font-family: var(--ig-button-font-family, var(--ig-font-family));\n  font-size: var(--ig-button-font-size);\n  font-weight: var(--ig-button-font-weight);\n  font-style: var(--ig-button-font-style);\n  line-height: var(--ig-button-line-height);\n  letter-spacing: var(--ig-button-letter-spacing);\n  text-transform: var(--ig-button-text-transform);\n  margin-top: var(--ig-button-margin-top);\n  margin-bottom: var(--ig-button-margin-bottom);\n  font-family: var(--ig-font-family);\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-flex: 1;\n      -ms-flex: 1 0 0%;\n          flex: 1 0 0%;\n  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  text-decoration: none;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n}\n:host [part~=toggle] {\n  font-family: var(--ig-button-font-family, var(--ig-font-family));\n  font-size: var(--ig-button-font-size);\n  font-weight: var(--ig-button-font-weight);\n  font-style: var(--ig-button-font-style);\n  line-height: var(--ig-button-line-height);\n  letter-spacing: var(--ig-button-letter-spacing);\n  text-transform: var(--ig-button-text-transform);\n  margin-top: var(--ig-button-margin-top);\n  margin-bottom: var(--ig-button-margin-bottom);\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n  cursor: pointer;\n  -webkit-box-flex: 1;\n      -ms-flex: 1;\n          flex: 1;\n  border-style: solid;\n  border-width: var(--_toggle-button-border-size);\n  -webkit-box-shadow: none;\n          box-shadow: none;\n  background: transparent;\n  color: inherit;\n  max-width: 100%;\n  -webkit-transition: all 140ms cubic-bezier(0.455, 0.03, 0.515, 0.955);\n  transition: all 140ms cubic-bezier(0.455, 0.03, 0.515, 0.955);\n  position: relative;\n  z-index: 0;\n  gap: max(var(--is-large, 1) * max(0.75rem, -1 * 0.75rem), var(--is-medium, 1) * max(0.5rem, -1 * 0.5rem), var(--is-small, 1) * max(0.25rem, -1 * 0.25rem));\n}\n:host [part~=toggle] ::slotted(*) {\n  max-width: 100%;\n}\n:host [part~=toggle] ::slotted(:not(igc-icon)) {\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n\n:host-context(:disabled),\n:host-context([disabled]),\n:host(:disabled),\n:host([disabled]) {\n  cursor: default;\n  pointer-events: none;\n}\n\n:host([selected]:disabled) [part~=toggle]::before,\n:host([selected][disabled]) [part~=toggle]::before {\n  position: absolute;\n  content: \"\";\n  inset: 0;\n  z-index: 3;\n  background: hsla(var(--ig-gray-500), 0.12);\n}\n\n:host(:focus-within) [part~=toggle],\n:host(:focus) [part~=toggle] {\n  outline: none;\n}\n\n:host([selected]) [part~=toggle] {\n  z-index: 1;\n}\n\n:host(:not(:first-child)) {\n  -webkit-margin-start: var(--_negative-margin-horizontal, 0);\n          margin-inline-start: var(--_negative-margin-horizontal, 0);\n  -webkit-margin-before: var(--_negative-margin-vertical, 0);\n          margin-block-start: var(--_negative-margin-vertical, 0);\n}\n\n:host(:not(:first-child) :not(:last-child)) [part~=toggle] {\n  border-radius: 0;\n}\n\n:host(:first-child) [part~=toggle] {\n  border-start-start-radius: var(--vertical-radius, var(--horizontal-radius, 0));\n  border-end-start-radius: var(--horizontal-radius, 0);\n  border-start-end-radius: var(--vertical-radius, 0);\n}\n\n:host(:last-child) [part~=toggle] {\n  border-start-end-radius: var(--horizontal-radius, 0);\n  border-end-end-radius: var(--vertical-radius, var(--horizontal-radius, 0));\n  border-end-start-radius: var(--vertical-radius, 0);\n}`;\n"]}

package/components/button-group/themes/light/toggle-button/toggle-button.bootstrap.css.js

@@ -0,0 +1,63 @@
+import { css } from 'lit';
+export const styles = css `:host {
+  --elevation: var(--ig-button-group-elevation, var(--ig-elevation-0));
+  --idle-shadow-color: var(--ig-button-group-idle-shadow-color, transparent);
+  --item-background: var(--ig-button-group-item-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --item-border-color: var(--ig-button-group-item-border-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --item-text-color: var(--ig-button-group-item-text-color, var(--ig-primary-600-contrast));
+  --item-hover-text-color: var(--ig-button-group-item-hover-text-color, var(--ig-primary-600-contrast));
+  --item-hover-background: var(--ig-button-group-item-hover-background, hsla(var(--ig-primary-600), var(--ig-primary-a)));
+  --item-selected-text-color: var(--ig-button-group-item-selected-text-color, var(--ig-primary-700-contrast));
+  --item-selected-background: var(--ig-button-group-item-selected-background, hsla(var(--ig-primary-700), var(--ig-primary-a)));
+  --item-selected-hover-background: var(--ig-button-group-item-selected-hover-background, hsla(var(--ig-primary-800), var(--ig-primary-a)));
+  --item-selected-border-color: var(--ig-button-group-item-selected-border-color, hsla(var(--ig-primary-700), var(--ig-primary-a)));
+  --disabled-text-color: var(--ig-button-group-disabled-text-color, hsla(var(--ig-primary-200), var(--ig-primary-a)));
+  --disabled-background-color: var(--ig-button-group-disabled-background-color, hsla(var(--ig-primary-100), var(--ig-primary-a)));
+  --item-disabled-border: var(--ig-button-group-item-disabled-border, hsla(var(--ig-primary-100), var(--ig-primary-a)));
+  --border-radius: var(--ig-button-group-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));
+  min-width: var(--button-min-width);
+}
+:host [part~=toggle] {
+  --ig-icon-size: 1.125rem;
+  --igx-icon-size: 1.125rem;
+  min-height: 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));
+  border-width: 0.0625rem;
+  border-color: var(--item-border-color);
+  color: var(--item-text-color);
+  background: var(--item-background);
+  padding-inline: max(var(--is-large, 1) * max(0.75rem, -1 * 0.75rem) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * max(0.625rem, -1 * 0.625rem) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * max(0.5rem, -1 * 0.5rem) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));
+  padding-block: max(var(--is-large, 1) * max(0.4375rem, -1 * 0.4375rem) * var(--ig-spacing-block-large, var(--ig-spacing-block, --ig-spacing)), var(--is-medium, 1) * max(0.25rem, -1 * 0.25rem) * var(--ig-spacing-block-medium, var(--ig-spacing-block, --ig-spacing)), var(--is-small, 1) * max(0.125rem, -1 * 0.125rem) * var(--ig-spacing-block-small, var(--ig-spacing-block, --ig-spacing)));
+  min-width: var(--button-min-width);
+}
+
+:host(:hover) [part~=toggle],
+:host(:focus) [part~=toggle] {
+  color: var(--item-hover-text-color);
+  background: var(--item-hover-background);
+  border-color: var(--item-border-color);
+}
+
+:host(:focus) [part~=toggle] {
+  -webkit-box-shadow: 0 0 0 0.1875rem var(--idle-shadow-color);
+          box-shadow: 0 0 0 0.1875rem var(--idle-shadow-color);
+}
+
+:host([selected]) [part~=toggle] {
+  color: var(--item-selected-text-color);
+  background: var(--item-selected-background);
+  border-color: var(--item-selected-border-color);
+}
+
+:host([selected]:hover) [part~=toggle],
+:host([selected]:focus) [part~=toggle] {
+  color: var(--item-selected-text-color);
+  background: var(--item-selected-hover-background);
+}
+
+:host([disabled]) [part~=toggle],
+:host(:disabled) [part~=toggle] {
+  color: var(--disabled-text-color);
+  background: var(--disabled-background-color);
+  border-color: var(--item-disabled-border);
+}`;
+//# sourceMappingURL=toggle-button.bootstrap.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-button.bootstrap.css.js","sourceRoot":"","sources":["../../../../../../src/components/button-group/themes/light/toggle-button/toggle-button.bootstrap.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`:host {\n  --elevation: var(--ig-button-group-elevation, var(--ig-elevation-0));\n  --idle-shadow-color: var(--ig-button-group-idle-shadow-color, transparent);\n  --item-background: var(--ig-button-group-item-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --item-border-color: var(--ig-button-group-item-border-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --item-text-color: var(--ig-button-group-item-text-color, var(--ig-primary-600-contrast));\n  --item-hover-text-color: var(--ig-button-group-item-hover-text-color, var(--ig-primary-600-contrast));\n  --item-hover-background: var(--ig-button-group-item-hover-background, hsla(var(--ig-primary-600), var(--ig-primary-a)));\n  --item-selected-text-color: var(--ig-button-group-item-selected-text-color, var(--ig-primary-700-contrast));\n  --item-selected-background: var(--ig-button-group-item-selected-background, hsla(var(--ig-primary-700), var(--ig-primary-a)));\n  --item-selected-hover-background: var(--ig-button-group-item-selected-hover-background, hsla(var(--ig-primary-800), var(--ig-primary-a)));\n  --item-selected-border-color: var(--ig-button-group-item-selected-border-color, hsla(var(--ig-primary-700), var(--ig-primary-a)));\n  --disabled-text-color: var(--ig-button-group-disabled-text-color, hsla(var(--ig-primary-200), var(--ig-primary-a)));\n  --disabled-background-color: var(--ig-button-group-disabled-background-color, hsla(var(--ig-primary-100), var(--ig-primary-a)));\n  --item-disabled-border: var(--ig-button-group-item-disabled-border, hsla(var(--ig-primary-100), var(--ig-primary-a)));\n  --border-radius: var(--ig-button-group-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));\n  min-width: var(--button-min-width);\n}\n:host [part~=toggle] {\n  --ig-icon-size: 1.125rem;\n  --igx-icon-size: 1.125rem;\n  min-height: 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  border-width: 0.0625rem;\n  border-color: var(--item-border-color);\n  color: var(--item-text-color);\n  background: var(--item-background);\n  padding-inline: max(var(--is-large, 1) * max(0.75rem, -1 * 0.75rem) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * max(0.625rem, -1 * 0.625rem) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * max(0.5rem, -1 * 0.5rem) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));\n  padding-block: max(var(--is-large, 1) * max(0.4375rem, -1 * 0.4375rem) * var(--ig-spacing-block-large, var(--ig-spacing-block, --ig-spacing)), var(--is-medium, 1) * max(0.25rem, -1 * 0.25rem) * var(--ig-spacing-block-medium, var(--ig-spacing-block, --ig-spacing)), var(--is-small, 1) * max(0.125rem, -1 * 0.125rem) * var(--ig-spacing-block-small, var(--ig-spacing-block, --ig-spacing)));\n  min-width: var(--button-min-width);\n}\n\n:host(:hover) [part~=toggle],\n:host(:focus) [part~=toggle] {\n  color: var(--item-hover-text-color);\n  background: var(--item-hover-background);\n  border-color: var(--item-border-color);\n}\n\n:host(:focus) [part~=toggle] {\n  -webkit-box-shadow: 0 0 0 0.1875rem var(--idle-shadow-color);\n          box-shadow: 0 0 0 0.1875rem var(--idle-shadow-color);\n}\n\n:host([selected]) [part~=toggle] {\n  color: var(--item-selected-text-color);\n  background: var(--item-selected-background);\n  border-color: var(--item-selected-border-color);\n}\n\n:host([selected]:hover) [part~=toggle],\n:host([selected]:focus) [part~=toggle] {\n  color: var(--item-selected-text-color);\n  background: var(--item-selected-hover-background);\n}\n\n:host([disabled]) [part~=toggle],\n:host(:disabled) [part~=toggle] {\n  color: var(--disabled-text-color);\n  background: var(--disabled-background-color);\n  border-color: var(--item-disabled-border);\n}`;\n"]}

package/components/button-group/themes/light/toggle-button/toggle-button.fluent.css.js

@@ -0,0 +1,55 @@
+import { css } from 'lit';
+export const styles = css `:host {
+  --elevation: var(--ig-button-group-elevation, var(--ig-elevation-0));
+  --idle-shadow-color: var(--ig-button-group-idle-shadow-color, transparent);
+  --item-background: var(--ig-button-group-item-background, hsla(var(--ig-gray-50), var(--ig-gray-a)));
+  --item-border-color: var(--ig-button-group-item-border-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --item-text-color: var(--ig-button-group-item-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --item-hover-text-color: var(--ig-button-group-item-hover-text-color, hsla(var(--ig-primary-200), var(--ig-primary-a)));
+  --item-hover-background: var(--ig-button-group-item-hover-background, hsla(var(--ig-gray-50), var(--ig-gray-a)));
+  --item-selected-text-color: var(--ig-button-group-item-selected-text-color, hsla(var(--ig-primary-200), var(--ig-primary-a)));
+  --item-selected-background: var(--ig-button-group-item-selected-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --item-selected-hover-background: var(--ig-button-group-item-selected-hover-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --item-selected-border-color: var(--ig-button-group-item-selected-border-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --disabled-text-color: var(--ig-button-group-disabled-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --disabled-background-color: var(--ig-button-group-disabled-background-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));
+  --item-disabled-border: var(--ig-button-group-item-disabled-border, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --border-radius: var(--ig-button-group-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1) * 1.25rem), 1.25rem));
+}
+:host [part~=toggle] {
+  --ig-icon-size: 1rem;
+  --igx-icon-size: 1rem;
+  min-height: 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));
+  border-width: 0.0625rem;
+  border-color: var(--item-border-color);
+  color: var(--item-text-color);
+  background: var(--item-background);
+  padding-inline: max(var(--is-large, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));
+  padding-block: max(var(--is-large, 1) * max(0.4375rem, -1 * 0.4375rem) * var(--ig-spacing-block-large, var(--ig-spacing-block, --ig-spacing)), var(--is-medium, 1) * max(0.4375rem, -1 * 0.4375rem) * var(--ig-spacing-block-medium, var(--ig-spacing-block, --ig-spacing)), var(--is-small, 1) * max(0.4375rem, -1 * 0.4375rem) * var(--ig-spacing-block-small, var(--ig-spacing-block, --ig-spacing)));
+}
+
+:host(:hover) [part~=toggle],
+:host(:focus) [part~=toggle] {
+  color: var(--item-hover-text-color);
+  background: var(--item-hover-background);
+}
+
+:host([selected]) [part~=toggle] {
+  color: var(--item-selected-text-color);
+  background: var(--item-selected-background);
+  border-color: var(--item-selected-border-color);
+}
+
+:host([selected]:hover) [part~=toggle],
+:host([selected]:focus) [part~=toggle] {
+  color: var(--item-selected-text-color);
+  background: var(--item-selected-hover-background);
+}
+
+:host([disabled]) [part~=toggle],
+:host(:disabled) [part~=toggle] {
+  color: var(--disabled-text-color);
+  background: var(--disabled-background-color);
+  border-color: var(--item-disabled-border);
+}`;
+//# sourceMappingURL=toggle-button.fluent.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-button.fluent.css.js","sourceRoot":"","sources":["../../../../../../src/components/button-group/themes/light/toggle-button/toggle-button.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoDvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --elevation: var(--ig-button-group-elevation, var(--ig-elevation-0));\n  --idle-shadow-color: var(--ig-button-group-idle-shadow-color, transparent);\n  --item-background: var(--ig-button-group-item-background, hsla(var(--ig-gray-50), var(--ig-gray-a)));\n  --item-border-color: var(--ig-button-group-item-border-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n  --item-text-color: var(--ig-button-group-item-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --item-hover-text-color: var(--ig-button-group-item-hover-text-color, hsla(var(--ig-primary-200), var(--ig-primary-a)));\n  --item-hover-background: var(--ig-button-group-item-hover-background, hsla(var(--ig-gray-50), var(--ig-gray-a)));\n  --item-selected-text-color: var(--ig-button-group-item-selected-text-color, hsla(var(--ig-primary-200), var(--ig-primary-a)));\n  --item-selected-background: var(--ig-button-group-item-selected-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n  --item-selected-hover-background: var(--ig-button-group-item-selected-hover-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n  --item-selected-border-color: var(--ig-button-group-item-selected-border-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n  --disabled-text-color: var(--ig-button-group-disabled-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n  --disabled-background-color: var(--ig-button-group-disabled-background-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));\n  --item-disabled-border: var(--ig-button-group-item-disabled-border, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n  --border-radius: var(--ig-button-group-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1) * 1.25rem), 1.25rem));\n}\n:host [part~=toggle] {\n  --ig-icon-size: 1rem;\n  --igx-icon-size: 1rem;\n  min-height: 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  border-width: 0.0625rem;\n  border-color: var(--item-border-color);\n  color: var(--item-text-color);\n  background: var(--item-background);\n  padding-inline: max(var(--is-large, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * max(1rem, -1 * 1rem) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));\n  padding-block: max(var(--is-large, 1) * max(0.4375rem, -1 * 0.4375rem) * var(--ig-spacing-block-large, var(--ig-spacing-block, --ig-spacing)), var(--is-medium, 1) * max(0.4375rem, -1 * 0.4375rem) * var(--ig-spacing-block-medium, var(--ig-spacing-block, --ig-spacing)), var(--is-small, 1) * max(0.4375rem, -1 * 0.4375rem) * var(--ig-spacing-block-small, var(--ig-spacing-block, --ig-spacing)));\n}\n\n:host(:hover) [part~=toggle],\n:host(:focus) [part~=toggle] {\n  color: var(--item-hover-text-color);\n  background: var(--item-hover-background);\n}\n\n:host([selected]) [part~=toggle] {\n  color: var(--item-selected-text-color);\n  background: var(--item-selected-background);\n  border-color: var(--item-selected-border-color);\n}\n\n:host([selected]:hover) [part~=toggle],\n:host([selected]:focus) [part~=toggle] {\n  color: var(--item-selected-text-color);\n  background: var(--item-selected-hover-background);\n}\n\n:host([disabled]) [part~=toggle],\n:host(:disabled) [part~=toggle] {\n  color: var(--disabled-text-color);\n  background: var(--disabled-background-color);\n  border-color: var(--item-disabled-border);\n}`;\n"]}

package/components/button-group/themes/light/toggle-button/toggle-button.indigo.css.js

@@ -0,0 +1,69 @@
+import { css } from 'lit';
+export const styles = css `:host {
+  --elevation: var(--ig-button-group-elevation, var(--ig-elevation-0));
+  --idle-shadow-color: var(--ig-button-group-idle-shadow-color, hsla(var(--ig-primary-200), var(--ig-primary-a)));
+  --item-background: var(--ig-button-group-item-background, hsla(var(--ig-gray-50), var(--ig-gray-a)));
+  --item-border-color: var(--ig-button-group-item-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --item-text-color: var(--ig-button-group-item-text-color, var(--ig-gray-50-contrast));
+  --item-hover-text-color: var(--ig-button-group-item-hover-text-color, var(--ig-gray-100-contrast));
+  --item-hover-background: var(--ig-button-group-item-hover-background, hsla(var(--ig-gray-100), 0.87));
+  --item-selected-text-color: var(--ig-button-group-item-selected-text-color, var(--ig-primary-500-contrast));
+  --item-selected-background: var(--ig-button-group-item-selected-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --item-selected-hover-background: var(--ig-button-group-item-selected-hover-background, hsla(var(--ig-primary-400), var(--ig-primary-a)));
+  --item-selected-border-color: var(--ig-button-group-item-selected-border-color, hsla(var(--ig-primary-400), var(--ig-primary-a)));
+  --disabled-text-color: var(--ig-button-group-disabled-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --disabled-background-color: var(--ig-button-group-disabled-background-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --item-disabled-border: var(--ig-button-group-item-disabled-border, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --border-radius: var(--ig-button-group-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.4) * 1.25rem), 1.25rem));
+  --selected-shadow-color: var(--ig-button-group-selected-shadow-color, hsla(var(--ig-primary-200), var(--ig-primary-a)));
+}
+:host [part~=toggle] {
+  --ig-icon-size: 1.125rem;
+  --igx-icon-size: 1.125rem;
+  min-height: 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));
+  border-width: 0.0625rem;
+  border-color: var(--item-border-color);
+  color: var(--item-text-color);
+  background: var(--item-background);
+  padding-inline: max(var(--is-large, 1) * max(0.75rem, -1 * 0.75rem) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * max(0.75rem, -1 * 0.75rem) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * max(0.5rem, -1 * 0.5rem) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));
+  padding-block: max(var(--is-large, 1) * max(0.1875rem, -1 * 0.1875rem) * var(--ig-spacing-block-large, var(--ig-spacing-block, --ig-spacing)), var(--is-medium, 1) * max(0.125rem, -1 * 0.125rem) * var(--ig-spacing-block-medium, var(--ig-spacing-block, --ig-spacing)), var(--is-small, 1) * max(0.0625rem, -1 * 0.0625rem) * var(--ig-spacing-block-small, var(--ig-spacing-block, --ig-spacing)));
+}
+
+:host(:hover) [part~=toggle],
+:host(:focus) [part~=toggle] {
+  color: var(--item-hover-text-color);
+  background: var(--item-hover-background);
+}
+
+:host(:focus) {
+  z-index: 2;
+}
+:host(:focus) [part~=toggle] {
+  -webkit-box-shadow: 0 0 0 0.1875rem var(--idle-shadow-color);
+          box-shadow: 0 0 0 0.1875rem var(--idle-shadow-color);
+}
+
+:host([selected]) [part~=toggle] {
+  color: var(--item-selected-text-color);
+  background: var(--item-selected-background);
+  border-color: var(--item-selected-border-color);
+}
+
+:host([selected]:hover) [part~=toggle],
+:host([selected]:focus) [part~=toggle] {
+  color: var(--item-selected-text-color);
+  background: var(--item-selected-hover-background);
+}
+
+:host([selected]:focus) [part~=toggle] {
+  -webkit-box-shadow: 0 0 0 0.1875rem var(--selected-shadow-color);
+          box-shadow: 0 0 0 0.1875rem var(--selected-shadow-color);
+}
+
+:host([disabled]) [part~=toggle],
+:host(:disabled) [part~=toggle] {
+  color: var(--disabled-text-color);
+  background: var(--disabled-background-color);
+  border-color: var(--item-disabled-border);
+}`;
+//# sourceMappingURL=toggle-button.indigo.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-button.indigo.css.js","sourceRoot":"","sources":["../../../../../../src/components/button-group/themes/light/toggle-button/toggle-button.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkEvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --elevation: var(--ig-button-group-elevation, var(--ig-elevation-0));\n  --idle-shadow-color: var(--ig-button-group-idle-shadow-color, hsla(var(--ig-primary-200), var(--ig-primary-a)));\n  --item-background: var(--ig-button-group-item-background, hsla(var(--ig-gray-50), var(--ig-gray-a)));\n  --item-border-color: var(--ig-button-group-item-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n  --item-text-color: var(--ig-button-group-item-text-color, var(--ig-gray-50-contrast));\n  --item-hover-text-color: var(--ig-button-group-item-hover-text-color, var(--ig-gray-100-contrast));\n  --item-hover-background: var(--ig-button-group-item-hover-background, hsla(var(--ig-gray-100), 0.87));\n  --item-selected-text-color: var(--ig-button-group-item-selected-text-color, var(--ig-primary-500-contrast));\n  --item-selected-background: var(--ig-button-group-item-selected-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --item-selected-hover-background: var(--ig-button-group-item-selected-hover-background, hsla(var(--ig-primary-400), var(--ig-primary-a)));\n  --item-selected-border-color: var(--ig-button-group-item-selected-border-color, hsla(var(--ig-primary-400), var(--ig-primary-a)));\n  --disabled-text-color: var(--ig-button-group-disabled-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n  --disabled-background-color: var(--ig-button-group-disabled-background-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n  --item-disabled-border: var(--ig-button-group-item-disabled-border, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n  --border-radius: var(--ig-button-group-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.4) * 1.25rem), 1.25rem));\n  --selected-shadow-color: var(--ig-button-group-selected-shadow-color, hsla(var(--ig-primary-200), var(--ig-primary-a)));\n}\n:host [part~=toggle] {\n  --ig-icon-size: 1.125rem;\n  --igx-icon-size: 1.125rem;\n  min-height: 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  border-width: 0.0625rem;\n  border-color: var(--item-border-color);\n  color: var(--item-text-color);\n  background: var(--item-background);\n  padding-inline: max(var(--is-large, 1) * max(0.75rem, -1 * 0.75rem) * var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)), var(--is-medium, 1) * max(0.75rem, -1 * 0.75rem) * var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)), var(--is-small, 1) * max(0.5rem, -1 * 0.5rem) * var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));\n  padding-block: max(var(--is-large, 1) * max(0.1875rem, -1 * 0.1875rem) * var(--ig-spacing-block-large, var(--ig-spacing-block, --ig-spacing)), var(--is-medium, 1) * max(0.125rem, -1 * 0.125rem) * var(--ig-spacing-block-medium, var(--ig-spacing-block, --ig-spacing)), var(--is-small, 1) * max(0.0625rem, -1 * 0.0625rem) * var(--ig-spacing-block-small, var(--ig-spacing-block, --ig-spacing)));\n}\n\n:host(:hover) [part~=toggle],\n:host(:focus) [part~=toggle] {\n  color: var(--item-hover-text-color);\n  background: var(--item-hover-background);\n}\n\n:host(:focus) {\n  z-index: 2;\n}\n:host(:focus) [part~=toggle] {\n  -webkit-box-shadow: 0 0 0 0.1875rem var(--idle-shadow-color);\n          box-shadow: 0 0 0 0.1875rem var(--idle-shadow-color);\n}\n\n:host([selected]) [part~=toggle] {\n  color: var(--item-selected-text-color);\n  background: var(--item-selected-background);\n  border-color: var(--item-selected-border-color);\n}\n\n:host([selected]:hover) [part~=toggle],\n:host([selected]:focus) [part~=toggle] {\n  color: var(--item-selected-text-color);\n  background: var(--item-selected-hover-background);\n}\n\n:host([selected]:focus) [part~=toggle] {\n  -webkit-box-shadow: 0 0 0 0.1875rem var(--selected-shadow-color);\n          box-shadow: 0 0 0 0.1875rem var(--selected-shadow-color);\n}\n\n:host([disabled]) [part~=toggle],\n:host(:disabled) [part~=toggle] {\n  color: var(--disabled-text-color);\n  background: var(--disabled-background-color);\n  border-color: var(--item-disabled-border);\n}`;\n"]}

package/components/button-group/themes/light/toggle-button/toggle-button.material.css.js

@@ -0,0 +1,56 @@
+import { css } from 'lit';
+export const styles = css `:host {
+  --elevation: var(--ig-button-group-elevation, var(--ig-elevation-2));
+  --idle-shadow-color: var(--ig-button-group-idle-shadow-color, transparent);
+  --item-background: var(--ig-button-group-item-background, hsla(var(--ig-gray-50), var(--ig-gray-a)));
+  --item-border-color: var(--ig-button-group-item-border-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --item-text-color: var(--ig-button-group-item-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --item-hover-text-color: var(--ig-button-group-item-hover-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --item-hover-background: var(--ig-button-group-item-hover-background, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --item-selected-text-color: var(--ig-button-group-item-selected-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --item-selected-background: var(--ig-button-group-item-selected-background, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --item-selected-hover-background: var(--ig-button-group-item-selected-hover-background, hsla(var(--ig-gray-500), 0.8));
+  --item-selected-border-color: var(--ig-button-group-item-selected-border-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --disabled-text-color: var(--ig-button-group-disabled-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --disabled-background-color: var(--ig-button-group-disabled-background-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));
+  --item-disabled-border: var(--ig-button-group-item-disabled-border, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --border-radius: var(--ig-button-group-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));
+}
+:host [part~=toggle] {
+  --ig-icon-size: 1.125rem;
+  --igx-icon-size: 1.125rem;
+  min-height: 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));
+  color: var(--item-text-color);
+  background: var(--item-background);
+  padding-inline: 1rem;
+  padding-block: max(var(--is-large, 1) * max(0.375rem, -1 * 0.375rem) * var(--ig-spacing-block-large, var(--ig-spacing-block, --ig-spacing)), var(--is-medium, 1) * max(0.25rem, -1 * 0.25rem) * var(--ig-spacing-block-medium, var(--ig-spacing-block, --ig-spacing)), var(--is-small, 1) * max(0.0625rem, -1 * 0.0625rem) * var(--ig-spacing-block-small, var(--ig-spacing-block, --ig-spacing)));
+  border-color: var(--item-border-color);
+}
+
+:host(:hover) [part~=toggle],
+:host(:focus) [part~=toggle] {
+  color: var(--item-hover-text-color);
+  background: var(--item-hover-background);
+}
+
+:host([selected]) [part~=toggle] {
+  color: var(--item-selected-text-color);
+  background: var(--item-selected-background);
+  border-color: var(--item-selected-border-color);
+}
+
+:host([selected]:hover) [part~=toggle],
+:host([selected]:focus) [part~=toggle] {
+  color: var(--item-selected-text-color);
+  background: var(--item-selected-hover-background);
+}
+
+:host([disabled]) [part~=toggle],
+:host(:disabled) [part~=toggle],
+:host-context([disabled]) [part~=toggle],
+:host-context(:disabled) [part~=toggle] {
+  color: var(--disabled-text-color);
+  background: var(--disabled-background-color);
+  border-color: var(--item-disabled-border);
+}`;
+//# sourceMappingURL=toggle-button.material.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-button.material.css.js","sourceRoot":"","sources":["../../../../../../src/components/button-group/themes/light/toggle-button/toggle-button.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqDvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --elevation: var(--ig-button-group-elevation, var(--ig-elevation-2));\n  --idle-shadow-color: var(--ig-button-group-idle-shadow-color, transparent);\n  --item-background: var(--ig-button-group-item-background, hsla(var(--ig-gray-50), var(--ig-gray-a)));\n  --item-border-color: var(--ig-button-group-item-border-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n  --item-text-color: var(--ig-button-group-item-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --item-hover-text-color: var(--ig-button-group-item-hover-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n  --item-hover-background: var(--ig-button-group-item-hover-background, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n  --item-selected-text-color: var(--ig-button-group-item-selected-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n  --item-selected-background: var(--ig-button-group-item-selected-background, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n  --item-selected-hover-background: var(--ig-button-group-item-selected-hover-background, hsla(var(--ig-gray-500), 0.8));\n  --item-selected-border-color: var(--ig-button-group-item-selected-border-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n  --disabled-text-color: var(--ig-button-group-disabled-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n  --disabled-background-color: var(--ig-button-group-disabled-background-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));\n  --item-disabled-border: var(--ig-button-group-item-disabled-border, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n  --border-radius: var(--ig-button-group-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));\n}\n:host [part~=toggle] {\n  --ig-icon-size: 1.125rem;\n  --igx-icon-size: 1.125rem;\n  min-height: 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  color: var(--item-text-color);\n  background: var(--item-background);\n  padding-inline: 1rem;\n  padding-block: max(var(--is-large, 1) * max(0.375rem, -1 * 0.375rem) * var(--ig-spacing-block-large, var(--ig-spacing-block, --ig-spacing)), var(--is-medium, 1) * max(0.25rem, -1 * 0.25rem) * var(--ig-spacing-block-medium, var(--ig-spacing-block, --ig-spacing)), var(--is-small, 1) * max(0.0625rem, -1 * 0.0625rem) * var(--ig-spacing-block-small, var(--ig-spacing-block, --ig-spacing)));\n  border-color: var(--item-border-color);\n}\n\n:host(:hover) [part~=toggle],\n:host(:focus) [part~=toggle] {\n  color: var(--item-hover-text-color);\n  background: var(--item-hover-background);\n}\n\n:host([selected]) [part~=toggle] {\n  color: var(--item-selected-text-color);\n  background: var(--item-selected-background);\n  border-color: var(--item-selected-border-color);\n}\n\n:host([selected]:hover) [part~=toggle],\n:host([selected]:focus) [part~=toggle] {\n  color: var(--item-selected-text-color);\n  background: var(--item-selected-hover-background);\n}\n\n:host([disabled]) [part~=toggle],\n:host(:disabled) [part~=toggle],\n:host-context([disabled]) [part~=toggle],\n:host-context(:disabled) [part~=toggle] {\n  color: var(--disabled-text-color);\n  background: var(--disabled-background-color);\n  border-color: var(--item-disabled-border);\n}`;\n"]}

package/components/button-group/toggle-button.d.ts

@@ -0,0 +1,49 @@
+import { LitElement } from 'lit';
+/**
+ * The `igc-toggle-button` wraps a native button element and exposes additional `value` and `selected` properties.
+ * It is used in the context of an `igc-button-group` to facilitate the creation of group/toolbar like UX behaviors.
+ *
+ * @element igc-toggle-button
+ *
+ * @slot Renders the label/content of the button.
+ *
+ * @csspart toggle - The native button element.
+ */
+export default class IgcToggleButtonComponent extends LitElement {
+    static styles: import("lit").CSSResult;
+    static readonly tagName = "igc-toggle-button";
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        slotAssignment?: SlotAssignmentMode | undefined;
+    };
+    static register(): void;
+    private nativeElement;
+    /**
+     * The value attribute of the control.
+     * @attr
+     */
+    value: string;
+    /**
+     * Determines whether the button is selected.
+     * @attr
+     */
+    selected: boolean;
+    /**
+     * Determines whether the button is disabled.
+     * @attr
+     */
+    disabled: boolean;
+    /** Sets focus on the button. */
+    focus(options?: FocusOptions): void;
+    /** Removes focus from the button. */
+    blur(): void;
+    /** Simulates a mouse click on the element. */
+    click(): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-toggle-button': IgcToggleButtonComponent;
+    }
+}

package/components/button-group/toggle-button.js

@@ -0,0 +1,81 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { themes } from '../../theming/theming-decorator.js';
+import { styles } from '../button-group/themes/light/toggle-button/toggle-button.base.css.js';
+import { styles as bootstrap } from '../button-group/themes/light/toggle-button/toggle-button.bootstrap.css.js';
+import { styles as fluent } from '../button-group/themes/light/toggle-button/toggle-button.fluent.css.js';
+import { styles as indigo } from '../button-group/themes/light/toggle-button/toggle-button.indigo.css.js';
+import { styles as material } from '../button-group/themes/light/toggle-button/toggle-button.material.css.js';
+import { alternateName } from '../common/decorators/alternateName.js';
+import { registerComponent } from '../common/definitions/register.js';
+let IgcToggleButtonComponent = class IgcToggleButtonComponent extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.selected = false;
+        this.disabled = false;
+    }
+    static register() {
+        registerComponent(this);
+    }
+    focus(options) {
+        this.nativeElement.focus(options);
+    }
+    blur() {
+        this.nativeElement.blur();
+    }
+    click() {
+        this.nativeElement.click();
+    }
+    render() {
+        return html `
+      <button
+        part="toggle"
+        type="button"
+        .disabled=${this.disabled}
+        .ariaLabel=${this.ariaLabel}
+        aria-pressed=${this.selected}
+        aria-disabled=${this.disabled}
+      >
+        <slot></slot>
+      </button>
+    `;
+    }
+};
+IgcToggleButtonComponent.styles = styles;
+IgcToggleButtonComponent.tagName = 'igc-toggle-button';
+IgcToggleButtonComponent.shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+};
+__decorate([
+    query('[part="toggle"]', true)
+], IgcToggleButtonComponent.prototype, "nativeElement", void 0);
+__decorate([
+    property()
+], IgcToggleButtonComponent.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], IgcToggleButtonComponent.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], IgcToggleButtonComponent.prototype, "disabled", void 0);
+__decorate([
+    alternateName('focusComponent')
+], IgcToggleButtonComponent.prototype, "focus", null);
+__decorate([
+    alternateName('blurComponent')
+], IgcToggleButtonComponent.prototype, "blur", null);
+IgcToggleButtonComponent = __decorate([
+    themes({
+        light: { bootstrap, material, fluent, indigo },
+        dark: { bootstrap, material, fluent, indigo },
+    })
+], IgcToggleButtonComponent);
+export default IgcToggleButtonComponent;
+//# sourceMappingURL=toggle-button.js.map

package/components/button-group/toggle-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-button.js","sourceRoot":"","sources":["../../../src/components/button-group/toggle-button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,sEAAsE,CAAC;AAC9F,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,2EAA2E,CAAC;AAChH,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,wEAAwE,CAAC;AAC1G,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,wEAAwE,CAAC;AAC1G,OAAO,EAAE,MAAM,IAAI,QAAQ,EAAE,MAAM,0EAA0E,CAAC;AAC9G,OAAO,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AACtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAgBtE,IAAqB,wBAAwB,GAA7C,MAAqB,wBAAyB,SAAQ,UAAU;IAAhE;;QA6BS,aAAQ,GAAG,KAAK,CAAC;QAOjB,aAAQ,GAAG,KAAK,CAAC;IAiC1B,CAAC;IA3DQ,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;IA4Be,KAAK,CAAC,OAAsB;QAC1C,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IACpC,CAAC;IAIe,IAAI;QAClB,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;IAC5B,CAAC;IAGe,KAAK;QACnB,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC;IAC7B,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;;;oBAIK,IAAI,CAAC,QAAQ;qBACZ,IAAI,CAAC,SAAS;uBACZ,IAAI,CAAC,QAAQ;wBACZ,IAAI,CAAC,QAAQ;;;;KAIhC,CAAC;IACJ,CAAC;;AAnEsB,+BAAM,GAAG,MAAM,AAAT,CAAU;AAEhB,gCAAO,GAAG,mBAAmB,AAAtB,CAAuB;AAE9B,0CAAiB,GAAG;IACzC,GAAG,UAAU,CAAC,iBAAiB;IAC/B,cAAc,EAAE,IAAI;CACrB,AAHuC,CAGtC;AAOM;IADP,KAAK,CAAC,iBAAiB,EAAE,IAAI,CAAC;+DACK;AAO7B;IADN,QAAQ,EAAE;uDACW;AAOf;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0DACnB;AAOjB;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0DACnB;AAIR;IADf,aAAa,CAAC,gBAAgB,CAAC;qDAG/B;AAIe;IADf,aAAa,CAAC,eAAe,CAAC;oDAG9B;AAhDkB,wBAAwB;IAJ5C,MAAM,CAAC;QACN,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE;QAC9C,IAAI,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE;KAC9C,CAAC;GACmB,wBAAwB,CAqE5C;eArEoB,wBAAwB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { styles } from '../button-group/themes/light/toggle-button/toggle-button.base.css.js';\nimport { styles as bootstrap } from '../button-group/themes/light/toggle-button/toggle-button.bootstrap.css.js';\nimport { styles as fluent } from '../button-group/themes/light/toggle-button/toggle-button.fluent.css.js';\nimport { styles as indigo } from '../button-group/themes/light/toggle-button/toggle-button.indigo.css.js';\nimport { styles as material } from '../button-group/themes/light/toggle-button/toggle-button.material.css.js';\nimport { alternateName } from '../common/decorators/alternateName.js';\nimport { registerComponent } from '../common/definitions/register.js';\n\n/**\n * The `igc-toggle-button` wraps a native button element and exposes additional `value` and `selected` properties.\n * It is used in the context of an `igc-button-group` to facilitate the creation of group/toolbar like UX behaviors.\n *\n * @element igc-toggle-button\n *\n * @slot Renders the label/content of the button.\n *\n * @csspart toggle - The native button element.\n */\n@themes({\n  light: { bootstrap, material, fluent, indigo },\n  dark: { bootstrap, material, fluent, indigo },\n})\nexport default class IgcToggleButtonComponent extends LitElement {\n  public static override styles = styles;\n\n  public static readonly tagName = 'igc-toggle-button';\n\n  public static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  public static register() {\n    registerComponent(this);\n  }\n\n  @query('[part=\"toggle\"]', true)\n  private nativeElement!: HTMLElement;\n\n  /**\n   * The value attribute of the control.\n   * @attr\n   */\n  @property()\n  public value!: string;\n\n  /**\n   * Determines whether the button is selected.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public selected = false;\n\n  /**\n   * Determines whether the button is disabled.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public disabled = false;\n\n  /** Sets focus on the button. */\n  @alternateName('focusComponent')\n  public override focus(options?: FocusOptions) {\n    this.nativeElement.focus(options);\n  }\n\n  /** Removes focus from the button. */\n  @alternateName('blurComponent')\n  public override blur() {\n    this.nativeElement.blur();\n  }\n\n  /** Simulates a mouse click on the element. */\n  public override click() {\n    this.nativeElement.click();\n  }\n\n  protected override render() {\n    return html`\n      <button\n        part=\"toggle\"\n        type=\"button\"\n        .disabled=${this.disabled}\n        .ariaLabel=${this.ariaLabel}\n        aria-pressed=${this.selected}\n        aria-disabled=${this.disabled}\n      >\n        <slot></slot>\n      </button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-toggle-button': IgcToggleButtonComponent;\n  }\n}\n"]}

package/components/calendar/calendar.d.ts

@@ -1,7 +1,7 @@
+import { themeSymbol } from '../../theming/theming-decorator.js';
 import { IgcCalendarResourceStrings } from '../common/i18n/calendar.resources.js';
-import { Constructor } from '../common/mixins/constructor.js';
+import type { Constructor } from '../common/mixins/constructor.js';
 import { IgcCalendarBaseComponent, IgcCalendarBaseEventMap } from './common/calendar-base.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
@@ -32,8 +32,9 @@ declare const IgcCalendarComponent_base: Constructor<import("../common/mixins/si
  * @csspart days-view-container - The days view container.
  */
 export default class IgcCalendarComponent extends IgcCalendarComponent_base {
-    static styles: import("lit").CSSResult;
     static readonly tagName = "igc-calendar";
+    static styles: import("lit").CSSResult;
+    static register(): void;
     private formatterMonth;
     private formatterWeekday;
     private formatterMonthDay;