igniteui-webcomponents 4.0.0-alpha → 4.0.0-alpha.3

package/CHANGELOG.md

@@ -5,6 +5,27 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [3.4.1] - 2022-09-19
+### Changed
+- Slider - updated theme with the latest fluent spec [#453](https://github.com/IgniteUI/igniteui-webcomponents/pull/453)
+- Calendar - updated weekend days color [#483](https://github.com/IgniteUI/igniteui-webcomponents/issues/483)
+
+### Fixed
+- Tabs `selected` attribute breaks content visibility on init [#507](https://github.com/IgniteUI/igniteui-webcomponents/issues/507)
+
+## [3.4.0] - 2022-09-07
+### Added
+- Dialog component [#175](https://github.com/IgniteUI/igniteui-webcomponents/issues/175)
+- Select component [#180](https://github.com/IgniteUI/igniteui-webcomponents/issues/180)
+
+### Fixed
+- Calendar - range selection a11y improvements [#476](https://github.com/IgniteUI/igniteui-webcomponents/issues/476)
+- Range slider - a11y improvements for choosing range values [#477](https://github.com/IgniteUI/igniteui-webcomponents/issues/477)
+- Rating - improved a11y with assistive software now reading the total number of items [#478](https://github.com/IgniteUI/igniteui-webcomponents/issues/478)
+- Toast - added `role="alert"` to the message container for assistive software to read it without the need of focusing [#479](https://github.com/IgniteUI/igniteui-webcomponents/issues/479)
+- Chip - made remove button accessible with the keyboard [#480](https://github.com/IgniteUI/igniteui-webcomponents/issues/480)
+- Button prefix/suffix does not align icons to the button text [#491](https://github.com/IgniteUI/igniteui-webcomponents/issues/491)
+
 ## [3.3.1] - 2022-08-10
 ### Changed
 - Tree - Removed theme-specified height [#460](https://github.com/IgniteUI/igniteui-webcomponents/pull/460)
@@ -142,6 +163,8 @@ Initial release of Ignite UI Web Components
 - Ripple component
 - Switch component
 
+[3.4.1]: https://github.com/IgniteUI/igniteui-webcomponents/compare/3.4.0...3.4.1
+[3.4.0]: https://github.com/IgniteUI/igniteui-webcomponents/compare/3.3.1...3.4.0
 [3.3.1]: https://github.com/IgniteUI/igniteui-webcomponents/compare/3.3.0...3.3.1
 [3.3.0]: https://github.com/IgniteUI/igniteui-webcomponents/compare/3.2.0...3.3.0
 [3.2.0]: https://github.com/IgniteUI/igniteui-webcomponents/compare/3.1.0...3.2.0

package/README.md

@@ -25,6 +25,23 @@ Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
 
 |Components|Status|Documentation|Released Version|
 |:--|:--:|:--:|:--:|
+|Select|:white_check_mark:|[Docs](#https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/select)|[3.4.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/3.4.0)|
+|Dialog|:white_check_mark:|[Docs](#https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/dialog-window)|[3.4.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/3.4.0)|
+|Date Time Input|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/date-time-input)|[3.3.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/3.3.0)|
+|Tabs|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/tabs)|[3.3.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/3.3.0)|
+|Accordion|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/accordion)|[3.3.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/3.3.0)|
+|Mask Input|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/input)|[3.2.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/3.2.0)|
+|Expansion Panel|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/expansion-panel)|[3.2.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/3.2.0)|
+|Tree|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/tree)|[3.2.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/3.2.0)|
+|Drop Down|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/notifications/toast)|[2.2.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/2.2.0)|
+|Linear Progress|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/linear-progress)|[2.1.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/2.1.0)|
+|Circular Progress|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/circular-progress)|[2.1.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/2.1.0)|
+|Chip|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/chip)|[2.1.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/2.1.0)|    
+|Snackbar|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/notifications/snackbar)|[2.1.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/2.1.0)|
+|Toast|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/notifications/toast)|[2.1.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/2.1.0)|
+|Rating|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/rating)|[2.1.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/2.1.0)|
+|Slider|:white_check_mark:|[Docs]()|[2.0.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/2.0.0)|
+|Range Slider|:white_check_mark:|[Docs]()|[2.0.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/2.0.0)| 
 |Avatar|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/avatar)|[1.0.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/1.0.0)|
 |Badge|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/badge)|[1.0.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/1.0.0)|
 |Button|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/button)|[1.0.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/1.0.0)|
@@ -42,21 +59,6 @@ Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
 |Radio Group|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/radio)|[1.0.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/1.0.0)|
 |Ripple|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/ripple)|[1.0.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/1.0.0)|
 |Switch|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/switch)|[1.0.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/1.0.0)|
-|Slider|:white_check_mark:|[Docs]()|[2.0.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/2.0.0)|
-|Range Slider|:white_check_mark:|[Docs]()|[2.0.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/2.0.0)| 
-|Linear Progress|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/linear-progress)|[2.1.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/2.1.0)|
-|Circular Progress|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/circular-progress)|[2.1.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/2.1.0)|
-|Chip|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/chip)|[2.1.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/2.1.0)|    
-|Snackbar|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/notifications/snackbar)|[2.1.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/2.1.0)|
-|Toast|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/notifications/toast)|[2.1.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/2.1.0)|
-|Rating|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/rating)|[2.1.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/2.1.0)|
-|Drop Down|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/notifications/toast)|[2.2.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/2.2.0)|
-|Mask Input|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/input)|[3.2.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/3.2.0)|
-|Expansion Panel|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/expansion-panel)|[3.2.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/3.2.0)|
-|Tree|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/tree)|[3.2.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/3.2.0)|
-|Date Time Input|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/date-time-input)|[3.3.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/3.3.0)|
-|Tabs|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/tabs)|[3.3.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/3.3.0)|
-|Accordion|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/accordion)|[3.3.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/3.3.0)|
 
 ## Usage
 

package/components/accordion/themes/accordion.base.css.js

@@ -1,5 +1,6 @@
 import { css } from 'lit';
-export const styles = css `:host ::slotted(igc-expansion-panel) {
+export const styles = css `/* stylelint-disable max-line-length */
+:host ::slotted(igc-expansion-panel) {
   --lines-clamped: 4;
 }
 :host ::slotted(igc-expansion-panel[open]) {

package/components/accordion/themes/accordion.base.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.base.css.js","sourceRoot":"","sources":["../../../../src/components/accordion/themes/accordion.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;EAWvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host ::slotted(igc-expansion-panel) {\n  --lines-clamped: 4;\n}\n:host ::slotted(igc-expansion-panel[open]) {\n  margin: 0.5rem 0;\n}\n:host ::slotted(igc-expansion-panel:first-of-type) {\n  margin-top: 0;\n}\n:host ::slotted(igc-expansion-panel:last-of-type) {\n  margin-bottom: 0;\n}`;\n"]}
+{"version":3,"file":"accordion.base.css.js","sourceRoot":"","sources":["../../../../src/components/accordion/themes/accordion.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;EAYvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length */\n:host ::slotted(igc-expansion-panel) {\n  --lines-clamped: 4;\n}\n:host ::slotted(igc-expansion-panel[open]) {\n  margin: 0.5rem 0;\n}\n:host ::slotted(igc-expansion-panel:first-of-type) {\n  margin-top: 0;\n}\n:host ::slotted(igc-expansion-panel:last-of-type) {\n  margin-bottom: 0;\n}`;\n"]}

package/components/avatar/themes/avatar.base.css.js

@@ -1,5 +1,12 @@
 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;
@@ -25,7 +32,9 @@ export const styles = css `:host {
   display: none !important;
 }
 
+/* stylelint-disable max-line-length */
 :host {
+  --size: max(var(--is-large, 1) * 5.5rem, var(--is-medium, 1) * 4rem, var(--is-small, 1) * 2.5rem);
   display: inline-block;
 }
 
@@ -74,16 +83,16 @@ img {
   text-transform: uppercase;
 }
 
-:host([size=large]) [part=base] {
-  --size: 5.5rem;
+:host([size=large]) {
+  --component-size: var(--ig-size, var(--ig-size-large));
 }
 
-:host([size=medium]) [part=base] {
-  --size: 4rem;
+:host([size=medium]) {
+  --component-size: var(--ig-size, var(--ig-size-medium));
 }
 
-:host([size=small]) [part=base] {
-  --size: 2.5rem;
+:host([size=small]) {
+  --component-size: var(--ig-size, var(--ig-size-small));
 }
 
 :host([shape=rounded]) [part=base] {

package/components/avatar/themes/avatar.base.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.base.css.js","sourceRoot":"","sources":["../../../../src/components/avatar/themes/avatar.base.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`:host {\n  position: relative;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  scrollbar-width: var(--scrolbar-size, 0.875rem);\n  scrollbar-color: var(--igc-scrollbar-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a))) var(--igc-scrollbar-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));\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(--scrolbar-size, 0.875rem);\n  height: var(--scrolbar-size, 0.875rem);\n  background: var(--igc-scrollbar-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n}\n:host ::-webkit-scrollbar-thumb {\n  background: var(--igc-scrollbar-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n}\n\n[hidden] {\n  display: none !important;\n}\n\n:host {\n  display: inline-block;\n}\n\n[part=base] {\n  position: relative;\n  display: -webkit-inline-box;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\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  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  color: hsla(var(--ig-gray-800), var(--ig-gray-a));\n  background: hsla(var(--ig-gray-400), var(--ig-gray-a));\n  border-radius: 0;\n  outline-style: none;\n  -ms-flex-negative: 0;\n      flex-shrink: 0;\n  overflow: hidden;\n  font-family: var(--ig-font-family);\n  width: var(--size);\n  height: var(--size);\n}\n[part=base] [part=initials] {\n  font-size: calc(var(--size) / 2);\n  line-height: calc(var(--size) / 2);\n}\n\nimg {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border-radius: inherit;\n  background-color: inherit;\n  -o-object-fit: cover;\n     object-fit: cover;\n}\n\n[part=initials] {\n  text-transform: uppercase;\n}\n\n:host([size=large]) [part=base] {\n  --size: 5.5rem;\n}\n\n:host([size=medium]) [part=base] {\n  --size: 4rem;\n}\n\n:host([size=small]) [part=base] {\n  --size: 2.5rem;\n}\n\n:host([shape=rounded]) [part=base] {\n  border-radius: 0.5rem;\n}\n\n:host([shape=circle]) [part=base] {\n  border-radius: calc(var(--size) / 2);\n}`;\n"]}
+{"version":3,"file":"avatar.base.css.js","sourceRoot":"","sources":["../../../../src/components/avatar/themes/avatar.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsGvB,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:\n      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(--scrolbar-size, 0.875rem);\n  scrollbar-color: var(--igc-scrollbar-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a))) var(--igc-scrollbar-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));\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(--scrolbar-size, 0.875rem);\n  height: var(--scrolbar-size, 0.875rem);\n  background: var(--igc-scrollbar-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n}\n:host ::-webkit-scrollbar-thumb {\n  background: var(--igc-scrollbar-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n}\n\n[hidden] {\n  display: none !important;\n}\n\n/* stylelint-disable max-line-length */\n:host {\n  --size: max(var(--is-large, 1) * 5.5rem, var(--is-medium, 1) * 4rem, var(--is-small, 1) * 2.5rem);\n  display: inline-block;\n}\n\n[part=base] {\n  position: relative;\n  display: -webkit-inline-box;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\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  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  color: hsla(var(--ig-gray-800), var(--ig-gray-a));\n  background: hsla(var(--ig-gray-400), var(--ig-gray-a));\n  border-radius: 0;\n  outline-style: none;\n  -ms-flex-negative: 0;\n      flex-shrink: 0;\n  overflow: hidden;\n  font-family: var(--ig-font-family);\n  width: var(--size);\n  height: var(--size);\n}\n[part=base] [part=initials] {\n  font-size: calc(var(--size) / 2);\n  line-height: calc(var(--size) / 2);\n}\n\nimg {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border-radius: inherit;\n  background-color: inherit;\n  -o-object-fit: cover;\n     object-fit: cover;\n}\n\n[part=initials] {\n  text-transform: uppercase;\n}\n\n:host([size=large]) {\n  --component-size: var(--ig-size, var(--ig-size-large));\n}\n\n:host([size=medium]) {\n  --component-size: var(--ig-size, var(--ig-size-medium));\n}\n\n:host([size=small]) {\n  --component-size: var(--ig-size, var(--ig-size-small));\n}\n\n:host([shape=rounded]) [part=base] {\n  border-radius: 0.5rem;\n}\n\n:host([shape=circle]) [part=base] {\n  border-radius: calc(var(--size) / 2);\n}`;\n"]}

package/components/avatar/themes/avatar.bootstrap.css.js

@@ -1,5 +1,6 @@
 import { css } from 'lit';
-export const styles = css `:host([shape=square]) [part=base],
+export const styles = css `/* stylelint-disable max-line-length */
+:host([shape=square]) [part=base],
 :host([shape=rounded]) [part=base] {
   border-radius: 0.25rem;
 }`;

package/components/avatar/themes/avatar.bootstrap.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.bootstrap.css.js","sourceRoot":"","sources":["../../../../src/components/avatar/themes/avatar.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;EAGvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host([shape=square]) [part=base],\n:host([shape=rounded]) [part=base] {\n  border-radius: 0.25rem;\n}`;\n"]}
+{"version":3,"file":"avatar.bootstrap.css.js","sourceRoot":"","sources":["../../../../src/components/avatar/themes/avatar.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;EAIvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length */\n:host([shape=square]) [part=base],\n:host([shape=rounded]) [part=base] {\n  border-radius: 0.25rem;\n}`;\n"]}

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

@@ -1,5 +1,12 @@
 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;
@@ -25,6 +32,7 @@ export const styles = css `:host {
   display: none !important;
 }
 
+/* stylelint-disable max-line-length */
 :host {
   --size: 0.75rem;
   display: -webkit-inline-box;

package/components/badge/themes/light/badge.base.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.base.css.js","sourceRoot":"","sources":["../../../../../src/components/badge/themes/light/badge.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkGvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  position: relative;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  scrollbar-width: var(--scrolbar-size, 0.875rem);\n  scrollbar-color: var(--igc-scrollbar-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a))) var(--igc-scrollbar-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));\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(--scrolbar-size, 0.875rem);\n  height: var(--scrolbar-size, 0.875rem);\n  background: var(--igc-scrollbar-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n}\n:host ::-webkit-scrollbar-thumb {\n  background: var(--igc-scrollbar-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n}\n\n[hidden] {\n  display: none !important;\n}\n\n:host {\n  --size: 0.75rem;\n  display: -webkit-inline-box;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  font-weight: 500;\n}\n\nspan {\n  display: -webkit-inline-box;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  min-width: var(--size);\n  min-height: var(--size);\n  max-height: calc(var(--size) * 2);\n  line-height: 1;\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  overflow: hidden;\n  white-space: nowrap;\n  font-family: var(--ig-font-family);\n  font-size: var(--ig-subtitle-1-font-size);\n  font-weight: inherit;\n}\n\n:host(:not(:empty)) span {\n  padding: 0.25rem 0.5rem;\n  min-width: calc(var(--size) * 2);\n}\n\n:host([variant=primary]) {\n  background: hsla(var(--ig-primary-500), var(--ig-primary-a));\n  color: var(--ig-primary-500-contrast);\n}\n\n:host([variant=info]) {\n  background: hsla(var(--ig-info-500), var(--ig-info-a));\n  color: var(--ig-info-500-contrast);\n}\n\n:host([variant=success]) {\n  background: hsla(var(--ig-success-500), var(--ig-success-a));\n  color: var(--ig-success-500-contrast);\n}\n\n:host([variant=warning]) {\n  background: hsla(var(--ig-warn-500), var(--ig-warn-a));\n  color: var(--ig-warn-500-contrast);\n}\n\n:host([variant=danger]) {\n  background: hsla(var(--ig-error-500), var(--ig-error-a));\n  color: var(--ig-error-500-contrast);\n}\n\n:host([shape=rounded]),\n:host([outlined][shape=rounded]) span {\n  border-radius: calc(var(--size) / 2);\n}\n\n:host([shape=square]),\n:host([outlined][shape=square]) span {\n  border-radius: 0;\n}\n\n:host([outlined]) span {\n  -webkit-box-shadow: inset 0 0 0 0.125rem hsla(var(--ig-gray-50), var(--ig-gray-a));\n          box-shadow: inset 0 0 0 0.125rem hsla(var(--ig-gray-50), var(--ig-gray-a));\n}`;\n"]}
+{"version":3,"file":"badge.base.css.js","sourceRoot":"","sources":["../../../../../src/components/badge/themes/light/badge.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0GvB,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:\n      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(--scrolbar-size, 0.875rem);\n  scrollbar-color: var(--igc-scrollbar-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a))) var(--igc-scrollbar-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));\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(--scrolbar-size, 0.875rem);\n  height: var(--scrolbar-size, 0.875rem);\n  background: var(--igc-scrollbar-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n}\n:host ::-webkit-scrollbar-thumb {\n  background: var(--igc-scrollbar-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n}\n\n[hidden] {\n  display: none !important;\n}\n\n/* stylelint-disable max-line-length */\n:host {\n  --size: 0.75rem;\n  display: -webkit-inline-box;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  font-weight: 500;\n}\n\nspan {\n  display: -webkit-inline-box;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  min-width: var(--size);\n  min-height: var(--size);\n  max-height: calc(var(--size) * 2);\n  line-height: 1;\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  overflow: hidden;\n  white-space: nowrap;\n  font-family: var(--ig-font-family);\n  font-size: var(--ig-subtitle-1-font-size);\n  font-weight: inherit;\n}\n\n:host(:not(:empty)) span {\n  padding: 0.25rem 0.5rem;\n  min-width: calc(var(--size) * 2);\n}\n\n:host([variant=primary]) {\n  background: hsla(var(--ig-primary-500), var(--ig-primary-a));\n  color: var(--ig-primary-500-contrast);\n}\n\n:host([variant=info]) {\n  background: hsla(var(--ig-info-500), var(--ig-info-a));\n  color: var(--ig-info-500-contrast);\n}\n\n:host([variant=success]) {\n  background: hsla(var(--ig-success-500), var(--ig-success-a));\n  color: var(--ig-success-500-contrast);\n}\n\n:host([variant=warning]) {\n  background: hsla(var(--ig-warn-500), var(--ig-warn-a));\n  color: var(--ig-warn-500-contrast);\n}\n\n:host([variant=danger]) {\n  background: hsla(var(--ig-error-500), var(--ig-error-a));\n  color: var(--ig-error-500-contrast);\n}\n\n:host([shape=rounded]),\n:host([outlined][shape=rounded]) span {\n  border-radius: calc(var(--size) / 2);\n}\n\n:host([shape=square]),\n:host([outlined][shape=square]) span {\n  border-radius: 0;\n}\n\n:host([outlined]) span {\n  -webkit-box-shadow: inset 0 0 0 0.125rem hsla(var(--ig-gray-50), var(--ig-gray-a));\n          box-shadow: inset 0 0 0 0.125rem hsla(var(--ig-gray-50), var(--ig-gray-a));\n}`;\n"]}

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

@@ -1,5 +1,6 @@
 import { css } from 'lit';
-export const styles = css `:host {
+export const styles = css `/* stylelint-disable max-line-length */
+:host {
   --size: 1.125rem;
   --ig-subtitle-1-font-size: 0.75rem;
   font-weight: 700;

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

@@ -1 +1 @@
-{"version":3,"file":"badge.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/badge/themes/light/badge.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;EASvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --size: 1.125rem;\n  --ig-subtitle-1-font-size: 0.75rem;\n  font-weight: 700;\n}\n\n:host([outlined]) span {\n  -webkit-box-shadow: inset 0 0 0 0.0625rem hsla(var(--ig-gray-50), var(--ig-gray-a));\n          box-shadow: inset 0 0 0 0.0625rem hsla(var(--ig-gray-50), var(--ig-gray-a));\n}`;\n"]}
+{"version":3,"file":"badge.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/badge/themes/light/badge.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;EAUvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length */\n:host {\n  --size: 1.125rem;\n  --ig-subtitle-1-font-size: 0.75rem;\n  font-weight: 700;\n}\n\n:host([outlined]) span {\n  -webkit-box-shadow: inset 0 0 0 0.0625rem hsla(var(--ig-gray-50), var(--ig-gray-a));\n          box-shadow: inset 0 0 0 0.0625rem hsla(var(--ig-gray-50), var(--ig-gray-a));\n}`;\n"]}

package/components/button/icon-button.js

@@ -28,16 +28,19 @@ let IgcIconButtonComponent = class IgcIconButtonComponent extends IgcButtonBaseC
     }
     renderContent() {
         return html `
-      <slot>
-        <igc-icon
-          part="icon"
-          name=${ifDefined(this.name)}
-          collection=${ifDefined(this.collection)}
-          .mirrored=${this.mirrored}
-          size=${ifDefined(this.size)}
-          aria-hidden="true"
-        ></igc-icon>
-      </slot>
+      ${this.name || this.mirrored
+            ? html `
+            <igc-icon
+              part="icon"
+              name=${ifDefined(this.name)}
+              collection=${ifDefined(this.collection)}
+              .mirrored=${this.mirrored}
+              size=${ifDefined(this.size)}
+              aria-hidden="true"
+            ></igc-icon>
+            <slot></slot>
+          `
+            : html `<slot></slot>`}
     `;
     }
     async registerIcon(name, url, collection = 'default') {

package/components/button/icon-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.js","sourceRoot":"","sources":["../../../src/components/button/icon-button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AACtE,OAAO,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AACtE,OAAO,EACL,YAAY,IAAI,iBAAiB,EACjC,oBAAoB,IAAI,yBAAyB,GAClD,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,oDAAoD,CAAC;AAC5E,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,yDAAyD,CAAC;AAC9F,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,sDAAsD,CAAC;AACxF,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,sDAAsD,CAAC;AACxF,OAAO,EAAE,MAAM,IAAI,QAAQ,EAAE,MAAM,wDAAwD,CAAC;AAE5F,OAAO,EAAE,gBAAgB,EAAE,MAAM,2CAA2C,CAAC;AAC7E,OAAO,gBAAgB,MAAM,iBAAiB,CAAC;AAE/C,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;AASnC,IAAqB,sBAAsB,GAA3C,MAAqB,sBAAuB,SAAQ,sBAAsB;IAA1E;;QAeS,aAAQ,GAAG,KAAK,CAAC;QAIjB,YAAO,GAAsC,WAAW,CAAC;IAkClE,CAAC;IAhCW,aAAa;QACrB,OAAO,IAAI,CAAA;;;;iBAIE,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;uBACd,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC;sBAC3B,IAAI,CAAC,QAAQ;iBAClB,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;;;;KAIhC,CAAC;IACJ,CAAC;IAGS,KAAK,CAAC,YAAY,CAC1B,IAAY,EACZ,GAAW,EACX,UAAU,GAAG,SAAS;QAEtB,MAAM,iBAAiB,CAAC,IAAI,EAAE,GAAG,EAAE,UAAU,CAAC,CAAC;IACjD,CAAC;IAGS,oBAAoB,CAC5B,IAAY,EACZ,QAAgB,EAChB,UAAU,GAAG,SAAS;QAEtB,yBAAyB,CAAC,IAAI,EAAE,QAAQ,EAAE,UAAU,CAAC,CAAC;IACxD,CAAC;CACF,CAAA;AApDwB,8BAAO,GAAG,iBAAkB,CAAA;AAClC,6BAAM,GAAG,MAAO,CAAA;AAKjC;IAFC,aAAa,CAAC,UAAU,CAAC;IACzB,QAAQ,EAAE;oDACU;AAIrB;IADC,QAAQ,EAAE;0DACgB;AAI3B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wDACJ;AAIxB;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uDACoC;AAkBhE;IADC,aAAa,EAAE;0DAOf;AAGD;IADC,aAAa,EAAE;kEAOf;AApDkB,sBAAsB;IAD1C,MAAM,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;GAC3B,sBAAsB,CAqD1C;eArDoB,sBAAsB","sourcesContent":["import { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { alternateName } from '../common/decorators/alternateName.js';\nimport { blazorInclude } from '../common/decorators/blazorInclude.js';\nimport {\n  registerIcon as registerIcon_impl,\n  registerIconFromText as registerIconFromText_impl,\n} from '../icon/icon.registry.js';\nimport { IgcButtonBaseComponent } from './button-base.js';\nimport { styles } from './themes/icon-button/light/icon-button.base.css.js';\nimport { styles as bootstrap } from './themes/icon-button/light/icon-button.bootstrap.css.js';\nimport { styles as fluent } from './themes/icon-button/light/icon-button.fluent.css.js';\nimport { styles as indigo } from './themes/icon-button/light/icon-button.indigo.css.js';\nimport { styles as material } from './themes/icon-button/light/icon-button.material.css.js';\n\nimport { defineComponents } from '../common/definitions/defineComponents.js';\nimport IgcIconComponent from '../icon/icon.js';\n\ndefineComponents(IgcIconComponent);\n\n/**\n * @element igc-icon-button\n *\n * @csspart base - The wrapping element.\n * @csspart icon - The icon element.\n */\n@themes({ bootstrap, material, fluent, indigo })\nexport default class IgcIconButtonComponent extends IgcButtonBaseComponent {\n  public static readonly tagName = 'igc-icon-button';\n  protected static styles = styles;\n\n  /** The name of the icon. */\n  @alternateName('iconName')\n  @property()\n  public name!: string;\n\n  /** The name of the icon collection. */\n  @property()\n  public collection!: string;\n\n  /** Whether to flip the icon button. Useful for RTL layouts. */\n  @property({ type: Boolean })\n  public mirrored = false;\n\n  /** The visual variant of the icon button. */\n  @property({ reflect: true })\n  public variant: 'flat' | 'contained' | 'outlined' = 'contained';\n\n  protected renderContent() {\n    return html`\n      <slot>\n        <igc-icon\n          part=\"icon\"\n          name=${ifDefined(this.name)}\n          collection=${ifDefined(this.collection)}\n          .mirrored=${this.mirrored}\n          size=${ifDefined(this.size)}\n          aria-hidden=\"true\"\n        ></igc-icon>\n      </slot>\n    `;\n  }\n\n  @blazorInclude()\n  protected async registerIcon(\n    name: string,\n    url: string,\n    collection = 'default'\n  ) {\n    await registerIcon_impl(name, url, collection);\n  }\n\n  @blazorInclude()\n  protected registerIconFromText(\n    name: string,\n    iconText: string,\n    collection = 'default'\n  ) {\n    registerIconFromText_impl(name, iconText, collection);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-icon-button': IgcIconButtonComponent;\n  }\n}\n"]}
+{"version":3,"file":"icon-button.js","sourceRoot":"","sources":["../../../src/components/button/icon-button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AACtE,OAAO,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AACtE,OAAO,EACL,YAAY,IAAI,iBAAiB,EACjC,oBAAoB,IAAI,yBAAyB,GAClD,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,oDAAoD,CAAC;AAC5E,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,yDAAyD,CAAC;AAC9F,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,sDAAsD,CAAC;AACxF,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,sDAAsD,CAAC;AACxF,OAAO,EAAE,MAAM,IAAI,QAAQ,EAAE,MAAM,wDAAwD,CAAC;AAE5F,OAAO,EAAE,gBAAgB,EAAE,MAAM,2CAA2C,CAAC;AAC7E,OAAO,gBAAgB,MAAM,iBAAiB,CAAC;AAE/C,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;AASnC,IAAqB,sBAAsB,GAA3C,MAAqB,sBAAuB,SAAQ,sBAAsB;IAA1E;;QAeS,aAAQ,GAAG,KAAK,CAAC;QAIjB,YAAO,GAAsC,WAAW,CAAC;IAqClE,CAAC;IAnCW,aAAa;QACrB,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ;YAC1B,CAAC,CAAC,IAAI,CAAA;;;qBAGO,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;2BACd,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC;0BAC3B,IAAI,CAAC,QAAQ;qBAClB,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;;;;WAI9B;YACH,CAAC,CAAC,IAAI,CAAA,eAAe;KACxB,CAAC;IACJ,CAAC;IAGS,KAAK,CAAC,YAAY,CAC1B,IAAY,EACZ,GAAW,EACX,UAAU,GAAG,SAAS;QAEtB,MAAM,iBAAiB,CAAC,IAAI,EAAE,GAAG,EAAE,UAAU,CAAC,CAAC;IACjD,CAAC;IAGS,oBAAoB,CAC5B,IAAY,EACZ,QAAgB,EAChB,UAAU,GAAG,SAAS;QAEtB,yBAAyB,CAAC,IAAI,EAAE,QAAQ,EAAE,UAAU,CAAC,CAAC;IACxD,CAAC;CACF,CAAA;AAvDwB,8BAAO,GAAG,iBAAkB,CAAA;AAClC,6BAAM,GAAG,MAAO,CAAA;AAKjC;IAFC,aAAa,CAAC,UAAU,CAAC;IACzB,QAAQ,EAAE;oDACU;AAIrB;IADC,QAAQ,EAAE;0DACgB;AAI3B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wDACJ;AAIxB;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uDACoC;AAqBhE;IADC,aAAa,EAAE;0DAOf;AAGD;IADC,aAAa,EAAE;kEAOf;AAvDkB,sBAAsB;IAD1C,MAAM,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;GAC3B,sBAAsB,CAwD1C;eAxDoB,sBAAsB","sourcesContent":["import { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { alternateName } from '../common/decorators/alternateName.js';\nimport { blazorInclude } from '../common/decorators/blazorInclude.js';\nimport {\n  registerIcon as registerIcon_impl,\n  registerIconFromText as registerIconFromText_impl,\n} from '../icon/icon.registry.js';\nimport { IgcButtonBaseComponent } from './button-base.js';\nimport { styles } from './themes/icon-button/light/icon-button.base.css.js';\nimport { styles as bootstrap } from './themes/icon-button/light/icon-button.bootstrap.css.js';\nimport { styles as fluent } from './themes/icon-button/light/icon-button.fluent.css.js';\nimport { styles as indigo } from './themes/icon-button/light/icon-button.indigo.css.js';\nimport { styles as material } from './themes/icon-button/light/icon-button.material.css.js';\n\nimport { defineComponents } from '../common/definitions/defineComponents.js';\nimport IgcIconComponent from '../icon/icon.js';\n\ndefineComponents(IgcIconComponent);\n\n/**\n * @element igc-icon-button\n *\n * @csspart base - The wrapping element.\n * @csspart icon - The icon element.\n */\n@themes({ bootstrap, material, fluent, indigo })\nexport default class IgcIconButtonComponent extends IgcButtonBaseComponent {\n  public static readonly tagName = 'igc-icon-button';\n  protected static styles = styles;\n\n  /** The name of the icon. */\n  @alternateName('iconName')\n  @property()\n  public name!: string;\n\n  /** The name of the icon collection. */\n  @property()\n  public collection!: string;\n\n  /** Whether to flip the icon button. Useful for RTL layouts. */\n  @property({ type: Boolean })\n  public mirrored = false;\n\n  /** The visual variant of the icon button. */\n  @property({ reflect: true })\n  public variant: 'flat' | 'contained' | 'outlined' = 'contained';\n\n  protected renderContent() {\n    return html`\n      ${this.name || this.mirrored\n        ? html`\n            <igc-icon\n              part=\"icon\"\n              name=${ifDefined(this.name)}\n              collection=${ifDefined(this.collection)}\n              .mirrored=${this.mirrored}\n              size=${ifDefined(this.size)}\n              aria-hidden=\"true\"\n            ></igc-icon>\n            <slot></slot>\n          `\n        : html`<slot></slot>`}\n    `;\n  }\n\n  @blazorInclude()\n  protected async registerIcon(\n    name: string,\n    url: string,\n    collection = 'default'\n  ) {\n    await registerIcon_impl(name, url, collection);\n  }\n\n  @blazorInclude()\n  protected registerIconFromText(\n    name: string,\n    iconText: string,\n    collection = 'default'\n  ) {\n    registerIconFromText_impl(name, iconText, collection);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-icon-button': IgcIconButtonComponent;\n  }\n}\n"]}

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

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css ``;
+export const styles = css `/* stylelint-disable max-line-length */`;
 //# sourceMappingURL=button.fluent.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"button.fluent.css.js","sourceRoot":"","sources":["../../../../../../src/components/button/themes/button/dark/button.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,EAAE,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css``;\n"]}
+{"version":3,"file":"button.fluent.css.js","sourceRoot":"","sources":["../../../../../../src/components/button/themes/button/dark/button.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,yCAAyC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length */`;\n"]}

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

@@ -1,5 +1,12 @@
 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;
@@ -25,12 +32,31 @@ export const styles = css `:host {
   display: none !important;
 }
 
+/* stylelint-disable max-line-length */
 :host {
+  --size: max(var(--is-large, 1) * 2.25rem, var(--is-medium, 1) * 1.875rem, var(--is-small, 1) * 1.5rem);
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
   vertical-align: middle;
 }
+:host ::slotted(span) {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+:host([size=small]) {
+  --component-size: var(--ig-size, var(--ig-size-small));
+}
+
+:host([size=medium]) {
+  --component-size: var(--ig-size, var(--ig-size-medium));
+}
+
+:host([size=large]) {
+  --component-size: var(--ig-size, var(--ig-size-large));
+}
 
 [part=base] {
   border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 0.25rem), 0.25rem);
@@ -67,6 +93,8 @@ export const styles = css `:host {
   white-space: nowrap;
   text-decoration: none;
   z-index: 0;
+  height: var(--size);
+  padding: 0 max(var(--is-large, 1) * 16px * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * 12px * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * 8px * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));
 }
 [part=base]::before {
   position: absolute;
@@ -94,29 +122,14 @@ export const styles = css `:host {
           box-shadow: none;
 }
 
-:host([size=large]) [part=base] {
-  height: var(--size, 36px);
-  padding: 0 calc(var(--igc-spacing-large) * 2);
-}
-
-:host([size=medium]) [part=base] {
-  height: var(--size, 30px);
-  padding: 0 calc(var(--igc-spacing-medium) * 3);
-}
-
-:host([size=small]) [part=base] {
-  height: var(--size, 24px);
-  padding: 0 calc(var(--igc-spacing-small) * 4);
-}
-
 [name=prefix]::slotted(*) {
-  -webkit-margin-end: var(--igc-spacing-large);
-          margin-inline-end: var(--igc-spacing-large);
+  -webkit-margin-end: max(var(--is-large, 1) * 8px * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * 8px * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * 8px * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));
+          margin-inline-end: max(var(--is-large, 1) * 8px * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * 8px * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * 8px * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));
 }
 
 [name=suffix]::slotted(*) {
-  -webkit-margin-start: var(--igc-spacing-large);
-          margin-inline-start: var(--igc-spacing-large);
+  -webkit-margin-start: max(var(--is-large, 1) * 8px * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * 8px * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * 8px * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));
+          margin-inline-start: max(var(--is-large, 1) * 8px * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * 8px * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * 8px * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));
 }
 
 span[part=prefix],
@@ -165,21 +178,13 @@ span[part=suffix] {
   color: var(--ig-secondary-500-contrast);
 }
 
+:host([variant=fab]) {
+  --size: max(var(--is-large, 1) * 3rem, var(--is-medium, 1) * 2.5rem, var(--is-small, 1) * 2rem);
+}
+
 :host([variant=fab]) [part=base] {
   border-radius: clamp(0rem, calc(var(--ig-radius-factor) * calc(var(--size) / 2)), calc(var(--size) / 2));
   min-width: var(--size);
   min-height: var(--size);
-}
-
-:host([variant=fab][size=large]) [part=base] {
-  --size: 3rem;
-}
-
-:host([variant=fab][size=medium]) [part=base] {
-  --size: 2.5rem;
-}
-
-:host([variant=fab][size=small]) [part=base] {
-  --size: 2rem;
 }`;
 //# sourceMappingURL=button.base.css.js.map

package/components/button/themes/button/light/button.base.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.base.css.js","sourceRoot":"","sources":["../../../../../../src/components/button/themes/button/light/button.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsLvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  position: relative;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  scrollbar-width: var(--scrolbar-size, 0.875rem);\n  scrollbar-color: var(--igc-scrollbar-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a))) var(--igc-scrollbar-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));\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(--scrolbar-size, 0.875rem);\n  height: var(--scrolbar-size, 0.875rem);\n  background: var(--igc-scrollbar-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n}\n:host ::-webkit-scrollbar-thumb {\n  background: var(--igc-scrollbar-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n}\n\n[hidden] {\n  display: none !important;\n}\n\n:host {\n  display: -webkit-inline-box;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  vertical-align: middle;\n}\n\n[part=base] {\n  border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 0.25rem), 0.25rem);\n  font-family: var(--ig-button-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  position: relative;\n  display: -webkit-inline-box;\n  display: -ms-inline-flexbox;\n  display: inline-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  -webkit-box-flex: 1;\n      -ms-flex: 1;\n          flex: 1;\n  border: none;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  outline-style: none;\n  -webkit-tap-highlight-color: transparent;\n  overflow: hidden;\n  white-space: nowrap;\n  text-decoration: none;\n  z-index: 0;\n}\n[part=base]::before {\n  position: absolute;\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  z-index: -1;\n  will-change: opacity;\n  -webkit-transition: all 0.1s ease-out;\n  -o-transition: all 0.1s ease-out;\n  transition: all 0.1s ease-out;\n}\n\n:host(:not([disabled])) [part=base]:hover {\n  cursor: pointer;\n}\n\n:host([disabled]) {\n  pointer-events: none;\n}\n:host([disabled]) [part=base] {\n  background: hsla(var(--ig-gray-300), var(--ig-gray-a));\n  color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n  -webkit-box-shadow: none;\n          box-shadow: none;\n}\n\n:host([size=large]) [part=base] {\n  height: var(--size, 36px);\n  padding: 0 calc(var(--igc-spacing-large) * 2);\n}\n\n:host([size=medium]) [part=base] {\n  height: var(--size, 30px);\n  padding: 0 calc(var(--igc-spacing-medium) * 3);\n}\n\n:host([size=small]) [part=base] {\n  height: var(--size, 24px);\n  padding: 0 calc(var(--igc-spacing-small) * 4);\n}\n\n[name=prefix]::slotted(*) {\n  -webkit-margin-end: var(--igc-spacing-large);\n          margin-inline-end: var(--igc-spacing-large);\n}\n\n[name=suffix]::slotted(*) {\n  -webkit-margin-start: var(--igc-spacing-large);\n          margin-inline-start: var(--igc-spacing-large);\n}\n\nspan[part=prefix],\nspan[part=suffix] {\n  display: -webkit-inline-box;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n}\n\n:host(:not([disabled])[variant=outlined]) [part=base], :host(:not([disabled])[variant=flat]) [part=base] {\n  color: hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n  background: transparent;\n}\n:host(:not([disabled])[variant=outlined]) [part=base]::before, :host(:not([disabled])[variant=flat]) [part=base]::before {\n  opacity: 0;\n}\n:host(:not([disabled])[variant=outlined]) [part=base]:hover::before, :host(:not([disabled])[variant=flat]) [part=base]:hover::before {\n  background: hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n  opacity: 0.12;\n}\n:host(:not([disabled])[variant=outlined]) [part=base]:focus::before, :host(:not([disabled])[variant=flat]) [part=base]:focus::before, :host(:not([disabled])[variant=outlined]) [part=base]:active::before, :host(:not([disabled])[variant=flat]) [part=base]:active::before {\n  background: hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n  opacity: 0.24;\n}\n\n:host([disabled][variant=flat]) [part=base] {\n  background: transparent;\n}\n\n:host(:not([disabled])[variant=outlined]) [part=base] {\n  -webkit-box-shadow: inset 0 0 0 1px hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n          box-shadow: inset 0 0 0 1px hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n}\n\n:host([disabled][variant=outlined]) [part=base] {\n  background: transparent;\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(:not([disabled])[variant=fab]) [part=base], :host(:not([disabled])[variant=contained]) [part=base] {\n  background: hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n  color: var(--ig-secondary-500-contrast);\n}\n\n:host([variant=fab]) [part=base] {\n  border-radius: clamp(0rem, calc(var(--ig-radius-factor) * calc(var(--size) / 2)), calc(var(--size) / 2));\n  min-width: var(--size);\n  min-height: var(--size);\n}\n\n:host([variant=fab][size=large]) [part=base] {\n  --size: 3rem;\n}\n\n:host([variant=fab][size=medium]) [part=base] {\n  --size: 2.5rem;\n}\n\n:host([variant=fab][size=small]) [part=base] {\n  --size: 2rem;\n}`;\n"]}
+{"version":3,"file":"button.base.css.js","sourceRoot":"","sources":["../../../../../../src/components/button/themes/button/light/button.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2LvB,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:\n      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(--scrolbar-size, 0.875rem);\n  scrollbar-color: var(--igc-scrollbar-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a))) var(--igc-scrollbar-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));\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(--scrolbar-size, 0.875rem);\n  height: var(--scrolbar-size, 0.875rem);\n  background: var(--igc-scrollbar-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n}\n:host ::-webkit-scrollbar-thumb {\n  background: var(--igc-scrollbar-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n}\n\n[hidden] {\n  display: none !important;\n}\n\n/* stylelint-disable max-line-length */\n:host {\n  --size: max(var(--is-large, 1) * 2.25rem, var(--is-medium, 1) * 1.875rem, var(--is-small, 1) * 1.5rem);\n  display: -webkit-inline-box;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  vertical-align: middle;\n}\n:host ::slotted(span) {\n  display: -webkit-inline-box;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n}\n\n:host([size=small]) {\n  --component-size: var(--ig-size, var(--ig-size-small));\n}\n\n:host([size=medium]) {\n  --component-size: var(--ig-size, var(--ig-size-medium));\n}\n\n:host([size=large]) {\n  --component-size: var(--ig-size, var(--ig-size-large));\n}\n\n[part=base] {\n  border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 0.25rem), 0.25rem);\n  font-family: var(--ig-button-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  position: relative;\n  display: -webkit-inline-box;\n  display: -ms-inline-flexbox;\n  display: inline-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  -webkit-box-flex: 1;\n      -ms-flex: 1;\n          flex: 1;\n  border: none;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  outline-style: none;\n  -webkit-tap-highlight-color: transparent;\n  overflow: hidden;\n  white-space: nowrap;\n  text-decoration: none;\n  z-index: 0;\n  height: var(--size);\n  padding: 0 max(var(--is-large, 1) * 16px * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * 12px * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * 8px * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n}\n[part=base]::before {\n  position: absolute;\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  z-index: -1;\n  will-change: opacity;\n  -webkit-transition: all 0.1s ease-out;\n  -o-transition: all 0.1s ease-out;\n  transition: all 0.1s ease-out;\n}\n\n:host(:not([disabled])) [part=base]:hover {\n  cursor: pointer;\n}\n\n:host([disabled]) {\n  pointer-events: none;\n}\n:host([disabled]) [part=base] {\n  background: hsla(var(--ig-gray-300), var(--ig-gray-a));\n  color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n  -webkit-box-shadow: none;\n          box-shadow: none;\n}\n\n[name=prefix]::slotted(*) {\n  -webkit-margin-end: max(var(--is-large, 1) * 8px * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * 8px * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * 8px * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n          margin-inline-end: max(var(--is-large, 1) * 8px * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * 8px * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * 8px * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n}\n\n[name=suffix]::slotted(*) {\n  -webkit-margin-start: max(var(--is-large, 1) * 8px * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * 8px * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * 8px * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n          margin-inline-start: max(var(--is-large, 1) * 8px * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * 8px * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * 8px * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n}\n\nspan[part=prefix],\nspan[part=suffix] {\n  display: -webkit-inline-box;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n}\n\n:host(:not([disabled])[variant=outlined]) [part=base], :host(:not([disabled])[variant=flat]) [part=base] {\n  color: hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n  background: transparent;\n}\n:host(:not([disabled])[variant=outlined]) [part=base]::before, :host(:not([disabled])[variant=flat]) [part=base]::before {\n  opacity: 0;\n}\n:host(:not([disabled])[variant=outlined]) [part=base]:hover::before, :host(:not([disabled])[variant=flat]) [part=base]:hover::before {\n  background: hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n  opacity: 0.12;\n}\n:host(:not([disabled])[variant=outlined]) [part=base]:focus::before, :host(:not([disabled])[variant=flat]) [part=base]:focus::before, :host(:not([disabled])[variant=outlined]) [part=base]:active::before, :host(:not([disabled])[variant=flat]) [part=base]:active::before {\n  background: hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n  opacity: 0.24;\n}\n\n:host([disabled][variant=flat]) [part=base] {\n  background: transparent;\n}\n\n:host(:not([disabled])[variant=outlined]) [part=base] {\n  -webkit-box-shadow: inset 0 0 0 1px hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n          box-shadow: inset 0 0 0 1px hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n}\n\n:host([disabled][variant=outlined]) [part=base] {\n  background: transparent;\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(:not([disabled])[variant=fab]) [part=base], :host(:not([disabled])[variant=contained]) [part=base] {\n  background: hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n  color: var(--ig-secondary-500-contrast);\n}\n\n:host([variant=fab]) {\n  --size: max(var(--is-large, 1) * 3rem, var(--is-medium, 1) * 2.5rem, var(--is-small, 1) * 2rem);\n}\n\n:host([variant=fab]) [part=base] {\n  border-radius: clamp(0rem, calc(var(--ig-radius-factor) * calc(var(--size) / 2)), calc(var(--size) / 2));\n  min-width: var(--size);\n  min-height: var(--size);\n}`;\n"]}

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

@@ -1,5 +1,10 @@
 import { css } from 'lit';
-export const styles = css `:host [part=base] {
+export const styles = css `/* stylelint-disable max-line-length */
+:host {
+  --size: max(var(--is-large, 1) * 3rem, var(--is-medium, 1) * 2.375rem, var(--is-small, 1) * 1.9375rem);
+}
+
+:host [part=base] {
   -webkit-transition: all 0.15s ease-out;
   -o-transition: all 0.15s ease-out;
   transition: all 0.15s ease-out;
@@ -10,18 +15,6 @@ export const styles = css `:host [part=base] {
   transition: all 0.15s ease-out;
 }
 
-:host([size=large]) [part=base] {
-  --size: 3rem;
-}
-
-:host([size=medium]) [part=base] {
-  --size: 2.375rem;
-}
-
-:host([size=small]) [part=base] {
-  --size: 1.9375rem;
-}
-
 :host([disabled][variant=flat]) [part=base] {
   background: transparent;
   color: hsla(var(--ig-primary-100), var(--ig-primary-a));

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

@@ -1 +1 @@
-{"version":3,"file":"button.bootstrap.css.js","sourceRoot":"","sources":["../../../../../../src/components/button/themes/button/light/button.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkJvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host [part=base] {\n  -webkit-transition: all 0.15s ease-out;\n  -o-transition: all 0.15s ease-out;\n  transition: all 0.15s ease-out;\n}\n:host [part=base]::before {\n  -webkit-transition: all 0.15s ease-out;\n  -o-transition: all 0.15s ease-out;\n  transition: all 0.15s ease-out;\n}\n\n:host([size=large]) [part=base] {\n  --size: 3rem;\n}\n\n:host([size=medium]) [part=base] {\n  --size: 2.375rem;\n}\n\n:host([size=small]) [part=base] {\n  --size: 1.9375rem;\n}\n\n:host([disabled][variant=flat]) [part=base] {\n  background: transparent;\n  color: hsla(var(--ig-primary-100), var(--ig-primary-a));\n}\n\n:host([disabled][variant=fab]) [part=base],\n:host([disabled][variant=contained]) [part=base] {\n  background: hsla(var(--ig-primary-200), var(--ig-primary-a));\n  color: var(--ig-primary-600-contrast);\n}\n\n:host([disabled][variant=outlined]) [part=base] {\n  color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n  -webkit-box-shadow: 0 0 0 1px hsla(var(--ig-primary-500), var(--ig-primary-a));\n          box-shadow: 0 0 0 1px hsla(var(--ig-primary-500), var(--ig-primary-a));\n  opacity: 0.65;\n  background: transparent;\n}\n\n:host(:not([disabled])[variant=flat]) [part=base] {\n  border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 0.25rem), 0.25rem);\n  color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n}\n:host(:not([disabled])[variant=flat]) [part=base]:hover {\n  color: hsla(var(--ig-primary-800), var(--ig-primary-a));\n}\n:host(:not([disabled])[variant=flat]) [part=base]:focus, :host(:not([disabled])[variant=flat]) [part=base]:active {\n  color: 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(:not([disabled])[variant=flat]) [part=base]:hover::before {\n  background: transparent;\n}\n:host(:not([disabled])[variant=flat]) [part=base]:focus::before, :host(:not([disabled])[variant=flat]) [part=base]:active::before {\n  background: transparent;\n  opacity: 1;\n}\n\n:host(:not([disabled])[variant=contained]) [part=base] {\n  color: var(--ig-primary-600-contrast);\n  -webkit-box-shadow: var(--ig-elevation-0);\n          box-shadow: var(--ig-elevation-0);\n}\n:host(:not([disabled])[variant=contained]) [part=base]:hover {\n  color: var(--ig-primary-600-contrast);\n}\n:host(:not([disabled])[variant=contained]) [part=base]:focus, :host(:not([disabled])[variant=contained]) [part=base]:active {\n  color: var(--ig-primary-600-contrast);\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(:not([disabled])[variant=contained]) [part=base]::before {\n  background: hsla(var(--ig-primary-500), var(--ig-primary-a));\n  opacity: 1;\n}\n:host(:not([disabled])[variant=contained]) [part=base]:hover::before, :host(:not([disabled])[variant=contained]) [part=base]:focus::before, :host(:not([disabled])[variant=contained]) [part=base]:active::before {\n  background: hsla(var(--ig-primary-600), var(--ig-primary-a));\n  opacity: 1;\n}\n\n:host(:not([disabled])[variant=outlined]) [part=base] {\n  color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n  -webkit-box-shadow: 0 0 0 1px hsla(var(--ig-primary-500), var(--ig-primary-a));\n          box-shadow: 0 0 0 1px hsla(var(--ig-primary-500), var(--ig-primary-a));\n  overflow: visible;\n}\n:host(:not([disabled])[variant=outlined]) [part=base]::after {\n  border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 0.25rem), 0.25rem);\n  position: absolute;\n  content: \"\";\n  width: 100%;\n  height: 100%;\n}\n:host(:not([disabled])[variant=outlined]) [part=base]:hover {\n  background: hsla(var(--ig-primary-600), var(--ig-primary-a));\n  color: var(--ig-primary-600-contrast);\n}\n:host(:not([disabled])[variant=outlined]) [part=base]:hover::before {\n  background: hsla(var(--ig-primary-500), var(--ig-primary-a));\n  opacity: 1;\n}\n:host(:not([disabled])[variant=outlined]) [part=base]:focus::before, :host(:not([disabled])[variant=outlined]) [part=base]:active::before {\n  background: transparent;\n  opacity: 1;\n}\n:host(:not([disabled])[variant=outlined]) [part=base]:focus::after, :host(:not([disabled])[variant=outlined]) [part=base]:active::after {\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\n:host([variant=fab][size=large]) [part=base] {\n  border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 1rem), 1rem);\n}\n\n:host([variant=fab][size=medium]) [part=base] {\n  border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 0.75rem), 0.75rem);\n}\n\n:host([variant=fab][size=small]) [part=base] {\n  border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 0.5rem), 0.5rem);\n}\n\n:host(:not([disabled])[variant=fab]) [part=base] {\n  color: var(--ig-primary-600-contrast);\n  -webkit-box-shadow: var(--ig-elevation-0);\n          box-shadow: var(--ig-elevation-0);\n}\n:host(:not([disabled])[variant=fab]) [part=base]:hover {\n  color: var(--ig-primary-600-contrast);\n}\n:host(:not([disabled])[variant=fab]) [part=base]:focus, :host(:not([disabled])[variant=fab]) [part=base]:active {\n  color: var(--ig-primary-600-contrast);\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(:not([disabled])[variant=fab]) [part=base]::before {\n  background: hsla(var(--ig-primary-500), var(--ig-primary-a));\n  opacity: 1;\n}\n:host(:not([disabled])[variant=fab]) [part=base]:hover::before, :host(:not([disabled])[variant=fab]) [part=base]:focus::before, :host(:not([disabled])[variant=fab]) [part=base]:active::before {\n  background: hsla(var(--ig-primary-600), var(--ig-primary-a));\n  opacity: 1;\n}`;\n"]}
+{"version":3,"file":"button.bootstrap.css.js","sourceRoot":"","sources":["../../../../../../src/components/button/themes/button/light/button.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2IvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length */\n:host {\n  --size: max(var(--is-large, 1) * 3rem, var(--is-medium, 1) * 2.375rem, var(--is-small, 1) * 1.9375rem);\n}\n\n:host [part=base] {\n  -webkit-transition: all 0.15s ease-out;\n  -o-transition: all 0.15s ease-out;\n  transition: all 0.15s ease-out;\n}\n:host [part=base]::before {\n  -webkit-transition: all 0.15s ease-out;\n  -o-transition: all 0.15s ease-out;\n  transition: all 0.15s ease-out;\n}\n\n:host([disabled][variant=flat]) [part=base] {\n  background: transparent;\n  color: hsla(var(--ig-primary-100), var(--ig-primary-a));\n}\n\n:host([disabled][variant=fab]) [part=base],\n:host([disabled][variant=contained]) [part=base] {\n  background: hsla(var(--ig-primary-200), var(--ig-primary-a));\n  color: var(--ig-primary-600-contrast);\n}\n\n:host([disabled][variant=outlined]) [part=base] {\n  color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n  -webkit-box-shadow: 0 0 0 1px hsla(var(--ig-primary-500), var(--ig-primary-a));\n          box-shadow: 0 0 0 1px hsla(var(--ig-primary-500), var(--ig-primary-a));\n  opacity: 0.65;\n  background: transparent;\n}\n\n:host(:not([disabled])[variant=flat]) [part=base] {\n  border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 0.25rem), 0.25rem);\n  color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n}\n:host(:not([disabled])[variant=flat]) [part=base]:hover {\n  color: hsla(var(--ig-primary-800), var(--ig-primary-a));\n}\n:host(:not([disabled])[variant=flat]) [part=base]:focus, :host(:not([disabled])[variant=flat]) [part=base]:active {\n  color: 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(:not([disabled])[variant=flat]) [part=base]:hover::before {\n  background: transparent;\n}\n:host(:not([disabled])[variant=flat]) [part=base]:focus::before, :host(:not([disabled])[variant=flat]) [part=base]:active::before {\n  background: transparent;\n  opacity: 1;\n}\n\n:host(:not([disabled])[variant=contained]) [part=base] {\n  color: var(--ig-primary-600-contrast);\n  -webkit-box-shadow: var(--ig-elevation-0);\n          box-shadow: var(--ig-elevation-0);\n}\n:host(:not([disabled])[variant=contained]) [part=base]:hover {\n  color: var(--ig-primary-600-contrast);\n}\n:host(:not([disabled])[variant=contained]) [part=base]:focus, :host(:not([disabled])[variant=contained]) [part=base]:active {\n  color: var(--ig-primary-600-contrast);\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(:not([disabled])[variant=contained]) [part=base]::before {\n  background: hsla(var(--ig-primary-500), var(--ig-primary-a));\n  opacity: 1;\n}\n:host(:not([disabled])[variant=contained]) [part=base]:hover::before, :host(:not([disabled])[variant=contained]) [part=base]:focus::before, :host(:not([disabled])[variant=contained]) [part=base]:active::before {\n  background: hsla(var(--ig-primary-600), var(--ig-primary-a));\n  opacity: 1;\n}\n\n:host(:not([disabled])[variant=outlined]) [part=base] {\n  color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n  -webkit-box-shadow: 0 0 0 1px hsla(var(--ig-primary-500), var(--ig-primary-a));\n          box-shadow: 0 0 0 1px hsla(var(--ig-primary-500), var(--ig-primary-a));\n  overflow: visible;\n}\n:host(:not([disabled])[variant=outlined]) [part=base]::after {\n  border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 0.25rem), 0.25rem);\n  position: absolute;\n  content: \"\";\n  width: 100%;\n  height: 100%;\n}\n:host(:not([disabled])[variant=outlined]) [part=base]:hover {\n  background: hsla(var(--ig-primary-600), var(--ig-primary-a));\n  color: var(--ig-primary-600-contrast);\n}\n:host(:not([disabled])[variant=outlined]) [part=base]:hover::before {\n  background: hsla(var(--ig-primary-500), var(--ig-primary-a));\n  opacity: 1;\n}\n:host(:not([disabled])[variant=outlined]) [part=base]:focus::before, :host(:not([disabled])[variant=outlined]) [part=base]:active::before {\n  background: transparent;\n  opacity: 1;\n}\n:host(:not([disabled])[variant=outlined]) [part=base]:focus::after, :host(:not([disabled])[variant=outlined]) [part=base]:active::after {\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\n:host([variant=fab][size=large]) [part=base] {\n  border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 1rem), 1rem);\n}\n\n:host([variant=fab][size=medium]) [part=base] {\n  border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 0.75rem), 0.75rem);\n}\n\n:host([variant=fab][size=small]) [part=base] {\n  border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 0.5rem), 0.5rem);\n}\n\n:host(:not([disabled])[variant=fab]) [part=base] {\n  color: var(--ig-primary-600-contrast);\n  -webkit-box-shadow: var(--ig-elevation-0);\n          box-shadow: var(--ig-elevation-0);\n}\n:host(:not([disabled])[variant=fab]) [part=base]:hover {\n  color: var(--ig-primary-600-contrast);\n}\n:host(:not([disabled])[variant=fab]) [part=base]:focus, :host(:not([disabled])[variant=fab]) [part=base]:active {\n  color: var(--ig-primary-600-contrast);\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(:not([disabled])[variant=fab]) [part=base]::before {\n  background: hsla(var(--ig-primary-500), var(--ig-primary-a));\n  opacity: 1;\n}\n:host(:not([disabled])[variant=fab]) [part=base]:hover::before, :host(:not([disabled])[variant=fab]) [part=base]:focus::before, :host(:not([disabled])[variant=fab]) [part=base]:active::before {\n  background: hsla(var(--ig-primary-600), var(--ig-primary-a));\n  opacity: 1;\n}`;\n"]}

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

@@ -1,21 +1,12 @@
 import { css } from 'lit';
-export const styles = css `[part=base] {
-  border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 0.125rem), 0.125rem);
-}
-
-:host([size=small]) [part=base] {
-  --size: 1.5rem;
-  padding: 0 0.5rem;
+export const styles = css `/* stylelint-disable max-line-length */
+:host {
+  --size: max(var(--is-large, 1) * 2.375rem, var(--is-medium, 1) * 2rem, var(--is-small, 1) * 1.5rem);
 }
 
-:host([size=medium]) [part=base] {
-  --size: 2rem;
-  padding: 0 1rem;
-}
-
-:host([size=large]) [part=base] {
-  --size: 2.375rem;
-  padding: 0 1rem;
+[part=base] {
+  border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 0.125rem), 0.125rem);
+  padding: 0 max(var(--is-large, 1) * 16px * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * 16px * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * 8px * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));
 }
 
 :host(:not([disabled])[variant=flat]) [part=base] {

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

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