igniteui-webcomponents 4.2.1 → 4.2.3

package/CHANGELOG.md

@@ -5,25 +5,46 @@ 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/).
 
-## [4.2.1] - 2023-02-01
+## [4.2.3] - 2023-04-03
+### Deprecated
+- Dialog - Property `closeOnEscape` is deprecated in favor of new property `keepOpenOnEscape`.
 
 ### Fixed
- - Combo - Matching item not activated on filtering in single selection mode
+- Radio Button- colors in selected focus state [#685](https://github.com/IgniteUI/igniteui-webcomponents/issues/685)
+- Icon Button - set icon size to match other design system products [#598](https://github.com/IgniteUI/igniteui-webcomponents/issues/598), [#695](https://github.com/IgniteUI/igniteui-webcomponents/issues/695)
+- Chip - removed outline styles for Fluent and Material themes [#702](https://github.com/IgniteUI/igniteui-webcomponents/pull/702)
+- Calendar - navigation to date on set value [#436](https://github.com/IgniteUI/igniteui-webcomponents/issues/436)
+- Tabs - not taking the full height of their parents [#710](https://github.com/IgniteUI/igniteui-webcomponents/issues/710)
 
+## [4.2.2] - 2023-03-07
+### Deprecated
+- Button - The prefix/suffix slots are no longer needed and will be removed in the next major release.
 
-## [4.2.0] - 2023-01-31
+### Fixed
+- Button - UI inconsistencies [#675](https://github.com/IgniteUI/igniteui-webcomponents/issues/675), [#679](https://github.com/IgniteUI/igniteui-webcomponents/issues/679)
+- Calendar - Fluent theme inconsistencies [#653](https://github.com/IgniteUI/igniteui-webcomponents/issues/653), [#672](https://github.com/IgniteUI/igniteui-webcomponents/issues/672)
+- Combo - Selection via API doesn't work on a searched list [#649](https://github.com/IgniteUI/igniteui-webcomponents/issues/649)
+- Dialog - Fluent theme inconsistency [#603](https://github.com/IgniteUI/igniteui-webcomponents/issues/603)
+- Input - UI inconsistencies [#657](https://github.com/IgniteUI/igniteui-webcomponents/issues/657), [#658](https://github.com/IgniteUI/igniteui-webcomponents/issues/658)
+- Toast - Fluent theme inconsistency [#668](https://github.com/IgniteUI/igniteui-webcomponents/issues/668)
+- Components missing in defineAllComponents [#691](https://github.com/IgniteUI/igniteui-webcomponents/issues/691)
+- Wrong host sizes for Avatar, Badge, Button and Icon Button [#669](https://github.com/IgniteUI/igniteui-webcomponents/issues/669)
 
+## [4.2.1] - 2023-02-01
+### Fixed
+- Combo - Matching item not activated on filtering in single selection mode
+
+## [4.2.0] - 2023-01-31
 ### Added
- - Combo - Single Selection mode via the `single-select` attribute [#626](https://github.com/IgniteUI/igniteui-webcomponents/issues/626)
+- Combo - Single Selection mode via the `single-select` attribute [#626](https://github.com/IgniteUI/igniteui-webcomponents/issues/626)
 
 ### Fixed
- - Input - UI inconsistencies [#619](https://github.com/IgniteUI/igniteui-webcomponents/issues/619), [#620](https://github.com/IgniteUI/igniteui-webcomponents/issues/620), [#633](https://github.com/IgniteUI/igniteui-webcomponents/issues/633), [#638](https://github.com/IgniteUI/igniteui-webcomponents/issues/638)
- - Badge - Doesn't correctly render `igc-icon` and font icons [#631](https://github.com/IgniteUI/igniteui-webcomponents/issues/631)
- - Radio - UI inconsistencies [#621](https://github.com/IgniteUI/igniteui-webcomponents/issues/621), [#623](https://github.com/IgniteUI/igniteui-webcomponents/issues/623)
- - Navigation Drawer - Can't override item margin [#614](https://github.com/IgniteUI/igniteui-webcomponents/issues/614)
+- Input - UI inconsistencies [#619](https://github.com/IgniteUI/igniteui-webcomponents/issues/619), [#620](https://github.com/IgniteUI/igniteui-webcomponents/issues/620), [#633](https://github.com/IgniteUI/igniteui-webcomponents/issues/633), [#638](https://github.com/IgniteUI/igniteui-webcomponents/issues/638)
+- Badge - Doesn't correctly render `igc-icon` and font icons [#631](https://github.com/IgniteUI/igniteui-webcomponents/issues/631)
+- Radio - UI inconsistencies [#621](https://github.com/IgniteUI/igniteui-webcomponents/issues/621), [#623](https://github.com/IgniteUI/igniteui-webcomponents/issues/623)
+- Navigation Drawer - Can't override item margin [#614](https://github.com/IgniteUI/igniteui-webcomponents/issues/614)
 
 ## [4.1.1] - 2023-01-12
-
 ### Fixed
 - Input - position label based on component size [#589](https://github.com/IgniteUI/igniteui-webcomponents/pull/589)
 - Input - material themes don't match design by [#580](https://github.com/IgniteUI/igniteui-webcomponents/issues/580)
@@ -211,6 +232,8 @@ Initial release of Ignite UI Web Components
 - Ripple component
 - Switch component
 
+[4.2.3]: https://github.com/IgniteUI/igniteui-webcomponents/compare/4.2.2...4.2.3
+[4.2.2]: https://github.com/IgniteUI/igniteui-webcomponents/compare/4.2.1...4.2.2
 [4.2.1]: https://github.com/IgniteUI/igniteui-webcomponents/compare/4.2.0...4.2.1
 [4.2.0]: https://github.com/IgniteUI/igniteui-webcomponents/compare/4.1.1...4.2.0
 [4.1.1]: https://github.com/IgniteUI/igniteui-webcomponents/compare/4.1.0...4.1.1

package/README.md

@@ -25,8 +25,10 @@ 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)|
+|Combo|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/combo/overview)|[4.1.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/4.1.0)|
+|Stepper|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/stepper)|[4.1.0](https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/4.1.0)|
+|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/notifications/dialog)|[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)|
@@ -60,6 +62,14 @@ Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
 |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)|
 
+## Components available in [Ignite UI for WebComponents Grids](https://www.npmjs.com/package/igniteui-webcomponents-grids)
+
+|Components|Status|Documentation|Released Version|
+|:--|:--:|:--:|:--:|
+|Pivot Grid|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/pivot-grid/overview)|
+|Data Grid|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/grid/overview)||
+|Tree Grid|:white_check_mark:|[Docs](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/tree-grid/overview)||
+
 ## Usage
 
 ### The Lightweight Web Components Data Grid and Data Table

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

@@ -34,8 +34,16 @@ export const styles = css `:host {
 
 /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
 :host {
-  --size: max(var(--is-large, 1) * 5.5rem, var(--is-medium, 1) * 4rem, var(--is-small, 1) * 2.5rem);
-  display: inline-block;
+  --size: max(var(--is-large, 1) * max(5.5rem, -1 * 5.5rem), var(--is-medium, 1) * max(4rem, -1 * 4rem), var(--is-small, 1) * max(2.5rem, -1 * 2.5rem));
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  height: -webkit-fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
 }
 
 [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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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(--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[hidden] {\n  display: none !important;\n}\n\n/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n:host {\n  --size: max(var(--is-large, 1) * 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"]}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8GvB,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(--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[hidden] {\n  display: none !important;\n}\n\n/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n:host {\n  --size: max(var(--is-large, 1) * max(5.5rem, -1 * 5.5rem), var(--is-medium, 1) * max(4rem, -1 * 4rem), var(--is-small, 1) * max(2.5rem, -1 * 2.5rem));\n  display: -webkit-inline-box;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  width: -webkit-fit-content;\n  width: -moz-fit-content;\n  width: fit-content;\n  height: -webkit-fit-content;\n  height: -moz-fit-content;\n  height: fit-content;\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/badge/themes/light/badge.base.css.js

@@ -36,6 +36,12 @@ export const styles = css `:host {
 :host {
   --size: 1.375rem;
   --_badge-size: var(--size);
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  height: -webkit-fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8GvB,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(--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[hidden] {\n  display: none !important;\n}\n\n/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n:host {\n  --size: 1.375rem;\n  --_badge-size: var(--size);\n  display: -webkit-inline-box;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  font-weight: 500;\n  vertical-align: top;\n}\n\n[part=base] {\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  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-weight: inherit;\n}\n\n::slotted(*) {\n  --size: calc(var(--_badge-size) / 2);\n  font-size: calc(var(--_badge-size) / 2) !important;\n}\n\n:host(:not(:empty)) [part=base] {\n  padding: calc(var(--size) / 8) calc(var(--size) / 5.5);\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]) [part=base] {\n  border-radius: calc(var(--size) * 2);\n}\n\n:host([shape=square]),\n:host([outlined][shape=square]) [part=base] {\n  border-radius: 0;\n}\n\n:host([outlined]) [part=base] {\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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoHvB,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(--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[hidden] {\n  display: none !important;\n}\n\n/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n:host {\n  --size: 1.375rem;\n  --_badge-size: var(--size);\n  width: -webkit-fit-content;\n  width: -moz-fit-content;\n  width: fit-content;\n  height: -webkit-fit-content;\n  height: -moz-fit-content;\n  height: fit-content;\n  display: -webkit-inline-box;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  font-weight: 500;\n  vertical-align: top;\n}\n\n[part=base] {\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  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-weight: inherit;\n}\n\n::slotted(*) {\n  --size: calc(var(--_badge-size) / 2);\n  font-size: calc(var(--_badge-size) / 2) !important;\n}\n\n:host(:not(:empty)) [part=base] {\n  padding: calc(var(--size) / 8) calc(var(--size) / 5.5);\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]) [part=base] {\n  border-radius: calc(var(--size) * 2);\n}\n\n:host([shape=square]),\n:host([outlined][shape=square]) [part=base] {\n  border-radius: 0;\n}\n\n:host([outlined]) [part=base] {\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/button/button.js

@@ -34,13 +34,9 @@ let IgcButtonComponent = class IgcButtonComponent extends IgcButtonBaseComponent
     }
     renderContent() {
         return html `
-      <span part="prefix">
-        <slot name="prefix"></slot>
-      </span>
+      <slot name="prefix"></slot>
       <slot></slot>
-      <span part="suffix">
-        <slot name="suffix"></slot>
-      </span>
+      <slot name="suffix"></slot>
     `;
     }
 };

package/components/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAClE,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,+CAA+C,CAAC;AACpF,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,4CAA4C,CAAC;AAC9E,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,4CAA4C,CAAC;AAC9E,OAAO,EAAE,MAAM,IAAI,QAAQ,EAAE,MAAM,8CAA8C,CAAC;AAoBnE,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,sBAAsB;IAYpE;QACE,KAAK,EAAE,CAAC;QAHH,YAAO,GAA8C,WAAW,CAAC;QAItE,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC;IACvB,CAAC;IAED,IAAuB,OAAO;QAC5B,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;QAE/B,OAAO;YACL,IAAI,EAAE,OAAO,KAAK,MAAM;YACxB,QAAQ,EAAE,OAAO,KAAK,UAAU;YAChC,SAAS,EAAE,OAAO,KAAK,WAAW;YAClC,GAAG,EAAE,OAAO,KAAK,KAAK;YACtB,KAAK,EAAE,IAAI,KAAK,OAAO;YACvB,MAAM,EAAE,IAAI,KAAK,QAAQ;YACzB,KAAK,EAAE,IAAI,KAAK,OAAO;YACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC;IACJ,CAAC;IAES,aAAa;QACrB,OAAO,IAAI,CAAA;;;;;;;;KAQV,CAAC;IACJ,CAAC;;AAzCsB,0BAAO,GAAG,YAAY,CAAC;AAE7B,yBAAM,GAAG,MAAM,CAAC;AAOjC;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAC4C;AAVrD,kBAAkB;IADtC,MAAM,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC;GAC3B,kBAAkB,CA2CtC;eA3CoB,kBAAkB","sourcesContent":["import { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { IgcButtonBaseComponent } from './button-base.js';\nimport { styles } from './themes/button/light/button.base.css.js';\nimport { styles as bootstrap } from './themes/button/light/button.bootstrap.css.js';\nimport { styles as fluent } from './themes/button/light/button.fluent.css.js';\nimport { styles as indigo } from './themes/button/light/button.indigo.css.js';\nimport { styles as material } from './themes/button/light/button.material.css.js';\n\n/**\n * Represents a clickable button, used to submit forms or anywhere in a\n * document for accessible, standard button functionality.\n *\n * @element igc-button\n *\n * @slot - Renders the label of the button.\n * @slot prefix - Renders content before the label of the button.\n * @slot suffix - Renders content after the label of the button.\n *\n * @fires igcFocus - Emitted when the button gains focus.\n * @fires igcBlur - Emitted when the button loses focus.\n *\n * @csspart base - The native button element.\n * @csspart prefix - The prefix container.\n * @csspart suffix - The suffix container.\n */\n@themes({ bootstrap, indigo, fluent, material })\nexport default class IgcButtonComponent extends IgcButtonBaseComponent {\n  public static readonly tagName = 'igc-button';\n\n  protected static styles = styles;\n\n  /**\n   * Sets the variant of the button.\n   * @attr\n   */\n  @property({ reflect: true })\n  public variant: 'flat' | 'contained' | 'outlined' | 'fab' = 'contained';\n\n  constructor() {\n    super();\n    this.size = 'medium';\n  }\n\n  protected override get classes() {\n    const { size, variant } = this;\n\n    return {\n      flat: variant === 'flat',\n      outlined: variant === 'outlined',\n      contained: variant === 'contained',\n      fab: variant === 'fab',\n      small: size === 'small',\n      medium: size === 'medium',\n      large: size === 'large',\n      disabled: this.disabled,\n    };\n  }\n\n  protected renderContent() {\n    return html`\n      <span part=\"prefix\">\n        <slot name=\"prefix\"></slot>\n      </span>\n      <slot></slot>\n      <span part=\"suffix\">\n        <slot name=\"suffix\"></slot>\n      </span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-button': IgcButtonComponent;\n  }\n}\n"]}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAClE,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,+CAA+C,CAAC;AACpF,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,4CAA4C,CAAC;AAC9E,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,4CAA4C,CAAC;AAC9E,OAAO,EAAE,MAAM,IAAI,QAAQ,EAAE,MAAM,8CAA8C,CAAC;AAoBnE,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,sBAAsB;IAYpE;QACE,KAAK,EAAE,CAAC;QAHH,YAAO,GAA8C,WAAW,CAAC;QAItE,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC;IACvB,CAAC;IAED,IAAuB,OAAO;QAC5B,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;QAE/B,OAAO;YACL,IAAI,EAAE,OAAO,KAAK,MAAM;YACxB,QAAQ,EAAE,OAAO,KAAK,UAAU;YAChC,SAAS,EAAE,OAAO,KAAK,WAAW;YAClC,GAAG,EAAE,OAAO,KAAK,KAAK;YACtB,KAAK,EAAE,IAAI,KAAK,OAAO;YACvB,MAAM,EAAE,IAAI,KAAK,QAAQ;YACzB,KAAK,EAAE,IAAI,KAAK,OAAO;YACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC;IACJ,CAAC;IAES,aAAa;QACrB,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;;AArCsB,0BAAO,GAAG,YAAY,CAAC;AAE7B,yBAAM,GAAG,MAAM,CAAC;AAOjC;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAC4C;AAVrD,kBAAkB;IADtC,MAAM,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC;GAC3B,kBAAkB,CAuCtC;eAvCoB,kBAAkB","sourcesContent":["import { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { IgcButtonBaseComponent } from './button-base.js';\nimport { styles } from './themes/button/light/button.base.css.js';\nimport { styles as bootstrap } from './themes/button/light/button.bootstrap.css.js';\nimport { styles as fluent } from './themes/button/light/button.fluent.css.js';\nimport { styles as indigo } from './themes/button/light/button.indigo.css.js';\nimport { styles as material } from './themes/button/light/button.material.css.js';\n\n/**\n * Represents a clickable button, used to submit forms or anywhere in a\n * document for accessible, standard button functionality.\n *\n * @element igc-button\n *\n * @slot - Renders the label of the button.\n * @slot prefix - Renders content before the label of the button.\n * @slot suffix - Renders content after the label of the button.\n *\n * @fires igcFocus - Emitted when the button gains focus.\n * @fires igcBlur - Emitted when the button loses focus.\n *\n * @csspart base - The native button element.\n * @csspart prefix - The prefix container.\n * @csspart suffix - The suffix container.\n */\n@themes({ bootstrap, indigo, fluent, material })\nexport default class IgcButtonComponent extends IgcButtonBaseComponent {\n  public static readonly tagName = 'igc-button';\n\n  protected static styles = styles;\n\n  /**\n   * Sets the variant of the button.\n   * @attr\n   */\n  @property({ reflect: true })\n  public variant: 'flat' | 'contained' | 'outlined' | 'fab' = 'contained';\n\n  constructor() {\n    super();\n    this.size = 'medium';\n  }\n\n  protected override get classes() {\n    const { size, variant } = this;\n\n    return {\n      flat: variant === 'flat',\n      outlined: variant === 'outlined',\n      contained: variant === 'contained',\n      fab: variant === 'fab',\n      small: size === 'small',\n      medium: size === 'medium',\n      large: size === 'large',\n      disabled: this.disabled,\n    };\n  }\n\n  protected renderContent() {\n    return html`\n      <slot name=\"prefix\"></slot>\n      <slot></slot>\n      <slot name=\"suffix\"></slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-button': IgcButtonComponent;\n  }\n}\n"]}

package/components/button/icon-button.js

@@ -35,7 +35,7 @@ let IgcIconButtonComponent = class IgcIconButtonComponent extends IgcButtonBaseC
               name=${ifDefined(this.name)}
               collection=${ifDefined(this.collection)}
               .mirrored=${this.mirrored}
-              size=${ifDefined(this.size)}
+              size="small"
               aria-hidden="true"
             ></igc-icon>
             <slot></slot>

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;AASpB,IAAM,sBAAsB,GAA5B,MAAM,sBAAuB,SAAQ,sBAAsB;IAA3D;;QAwBN,aAAQ,GAAG,KAAK,CAAC;QAOjB,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;IAGe,AAAN,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;;AAlEsB,8BAAO,GAAG,iBAAiB,CAAC;AAClC,6BAAM,GAAG,MAAM,CAAC;AAQjC;IAFC,aAAa,CAAC,UAAU,CAAC;IACzB,QAAQ,EAAE;oDACU;AAOrB;IADC,QAAQ,EAAE;0DACgB;AAO3B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wDACJ;AAOxB;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uDACoC;AAqBhD;IADf,aAAa,EAAE;0DAOf;AAGD;IADC,aAAa,EAAE;kEAOf;AAnEkB,sBAAsB;IAD1C,MAAM,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;GAC3B,sBAAsB,CAoE1C;eApEoB,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  /**\n   * The name of the icon.\n   * @attr\n   */\n  @alternateName('iconName')\n  @property()\n  public name!: string;\n\n  /**\n   * The name of the icon collection.\n   * @attr\n   */\n  @property()\n  public collection!: string;\n\n  /**\n   * Whether to flip the icon button. Useful for RTL layouts.\n   * @attr\n   */\n  @property({ type: Boolean })\n  public mirrored = false;\n\n  /**\n   * The visual variant of the icon button.\n   * @attr\n   */\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"]}
+{"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;AASpB,IAAM,sBAAsB,GAA5B,MAAM,sBAAuB,SAAQ,sBAAsB;IAA3D;;QAwBN,aAAQ,GAAG,KAAK,CAAC;QAOjB,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;;;;;WAK5B;YACH,CAAC,CAAC,IAAI,CAAA,eAAe;KACxB,CAAC;IACJ,CAAC;IAGe,AAAN,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;;AAlEsB,8BAAO,GAAG,iBAAiB,CAAC;AAClC,6BAAM,GAAG,MAAM,CAAC;AAQjC;IAFC,aAAa,CAAC,UAAU,CAAC;IACzB,QAAQ,EAAE;oDACU;AAOrB;IADC,QAAQ,EAAE;0DACgB;AAO3B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wDACJ;AAOxB;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uDACoC;AAqBhD;IADf,aAAa,EAAE;0DAOf;AAGD;IADC,aAAa,EAAE;kEAOf;AAnEkB,sBAAsB;IAD1C,MAAM,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;GAC3B,sBAAsB,CAoE1C;eApEoB,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  /**\n   * The name of the icon.\n   * @attr\n   */\n  @alternateName('iconName')\n  @property()\n  public name!: string;\n\n  /**\n   * The name of the icon collection.\n   * @attr\n   */\n  @property()\n  public collection!: string;\n\n  /**\n   * Whether to flip the icon button. Useful for RTL layouts.\n   * @attr\n   */\n  @property({ type: Boolean })\n  public mirrored = false;\n\n  /**\n   * The visual variant of the icon button.\n   * @attr\n   */\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=\"small\"\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/light/button.base.css.js

@@ -34,16 +34,21 @@ export const styles = css `:host {
 
 /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
 :host {
-  --size: max(var(--is-large, 1) * 2.25rem, var(--is-medium, 1) * 1.875rem, var(--is-small, 1) * 1.5rem);
+  --size: max(var(--is-large, 1) * max(2.25rem, -1 * 2.25rem), var(--is-medium, 1) * max(1.875rem, -1 * 1.875rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem));
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
   vertical-align: middle;
+  height: var(--size);
 }
-:host ::slotted(span) {
+:host ::slotted(*) {
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  font-size: inherit !important;
 }
 
 :host([size=small]) {
@@ -60,7 +65,7 @@ export const styles = css `:host {
 
 [part=base] {
   border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 0.25rem), 0.25rem);
-  font-family: var(--ig-button-font-family);
+  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);
@@ -94,18 +99,8 @@ export const styles = css `:host {
   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;
-  content: "";
-  width: 100%;
-  height: 100%;
-  z-index: -1;
-  will-change: opacity;
-  -webkit-transition: all 0.1s ease-out;
-  -o-transition: all 0.1s ease-out;
-  transition: all 0.1s ease-out;
+  padding: 0 max(var(--is-large, 1) * max(16px, -1 * 16px) * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * max(12px, -1 * 12px) * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * max(8px, -1 * 8px) * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));
+  gap: 0.5rem;
 }
 
 :host(:not([disabled])) [part=base]:hover {
@@ -122,40 +117,18 @@ export const styles = css `:host {
           box-shadow: none;
 }
 
-[name=prefix]::slotted(*) {
-  -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: 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],
-span[part=suffix] {
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-}
-
 :host(:not([disabled])[variant=outlined]) [part=base], :host(:not([disabled])[variant=flat]) [part=base] {
   color: hsla(var(--ig-secondary-500), var(--ig-secondary-a));
   background: transparent;
+  -webkit-transition: background-color 0.1s ease-out 0s;
+  -o-transition: background-color 0.1s ease-out 0s;
+  transition: background-color 0.1s ease-out 0s;
 }
-:host(:not([disabled])[variant=outlined]) [part=base]::before, :host(:not([disabled])[variant=flat]) [part=base]::before {
-  opacity: 0;
-}
-:host(:not([disabled])[variant=outlined]) [part=base]:hover::before, :host(:not([disabled])[variant=flat]) [part=base]:hover::before {
-  background: hsla(var(--ig-secondary-500), var(--ig-secondary-a));
-  opacity: 0.12;
+:host(:not([disabled])[variant=outlined]) [part=base]:hover, :host(:not([disabled])[variant=flat]) [part=base]:hover {
+  background: hsla(var(--ig-secondary-500), 0.12);
 }
-: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 {
-  background: hsla(var(--ig-secondary-500), var(--ig-secondary-a));
-  opacity: 0.24;
+:host(:not([disabled])[variant=outlined]) [part=base]:focus, :host(:not([disabled])[variant=flat]) [part=base]:focus, :host(:not([disabled])[variant=outlined]) [part=base]:active, :host(:not([disabled])[variant=flat]) [part=base]:active {
+  background: hsla(var(--ig-secondary-500), 0.24);
 }
 
 :host([disabled][variant=flat]) [part=base] {
@@ -163,14 +136,14 @@ span[part=suffix] {
 }
 
 :host(:not([disabled])[variant=outlined]) [part=base] {
-  -webkit-box-shadow: inset 0 0 0 1px hsla(var(--ig-secondary-500), var(--ig-secondary-a));
-          box-shadow: inset 0 0 0 1px hsla(var(--ig-secondary-500), var(--ig-secondary-a));
+  -webkit-box-shadow: inset 0 0 0 0.0625rem hsla(var(--ig-secondary-500), var(--ig-secondary-a));
+          box-shadow: inset 0 0 0 0.0625rem hsla(var(--ig-secondary-500), var(--ig-secondary-a));
 }
 
 :host([disabled][variant=outlined]) [part=base] {
   background: transparent;
-  -webkit-box-shadow: inset 0 0 0 1px hsla(var(--ig-gray-300), var(--ig-gray-a));
-          box-shadow: inset 0 0 0 1px hsla(var(--ig-gray-300), var(--ig-gray-a));
+  -webkit-box-shadow: inset 0 0 0 0.0625rem hsla(var(--ig-gray-300), var(--ig-gray-a));
+          box-shadow: inset 0 0 0 0.0625rem hsla(var(--ig-gray-300), var(--ig-gray-a));
 }
 
 :host(:not([disabled])[variant=fab]) [part=base], :host(:not([disabled])[variant=contained]) [part=base] {
@@ -179,7 +152,7 @@ span[part=suffix] {
 }
 
 :host([variant=fab]) {
-  --size: max(var(--is-large, 1) * 3rem, var(--is-medium, 1) * 2.5rem, var(--is-small, 1) * 2rem);
+  --size: max(var(--is-large, 1) * max(3rem, -1 * 3rem), var(--is-medium, 1) * max(2.5rem, -1 * 2.5rem), var(--is-small, 1) * max(2rem, -1 * 2rem));
 }
 
 :host([variant=fab]) [part=base] {

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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(--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[hidden] {\n  display: none !important;\n}\n\n/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n:host {\n  --size: max(var(--is-large, 1) * 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"]}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgKvB,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(--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[hidden] {\n  display: none !important;\n}\n\n/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */\n:host {\n  --size: max(var(--is-large, 1) * max(2.25rem, -1 * 2.25rem), var(--is-medium, 1) * max(1.875rem, -1 * 1.875rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem));\n  display: -webkit-inline-box;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  vertical-align: middle;\n  height: var(--size);\n}\n:host ::slotted(*) {\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  font-size: inherit !important;\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, 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  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) * max(16px, -1 * 16px) * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * max(12px, -1 * 12px) * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * max(8px, -1 * 8px) * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n  gap: 0.5rem;\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(: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  -webkit-transition: background-color 0.1s ease-out 0s;\n  -o-transition: background-color 0.1s ease-out 0s;\n  transition: background-color 0.1s ease-out 0s;\n}\n:host(:not([disabled])[variant=outlined]) [part=base]:hover, :host(:not([disabled])[variant=flat]) [part=base]:hover {\n  background: hsla(var(--ig-secondary-500), 0.12);\n}\n:host(:not([disabled])[variant=outlined]) [part=base]:focus, :host(:not([disabled])[variant=flat]) [part=base]:focus, :host(:not([disabled])[variant=outlined]) [part=base]:active, :host(:not([disabled])[variant=flat]) [part=base]:active {\n  background: hsla(var(--ig-secondary-500), 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 0.0625rem hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n          box-shadow: inset 0 0 0 0.0625rem 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 0.0625rem hsla(var(--ig-gray-300), var(--ig-gray-a));\n          box-shadow: inset 0 0 0 0.0625rem 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) * max(3rem, -1 * 3rem), var(--is-medium, 1) * max(2.5rem, -1 * 2.5rem), var(--is-small, 1) * max(2rem, -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,7 +1,7 @@
 import { css } from 'lit';
 export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
 :host {
-  --size: max(var(--is-large, 1) * 3rem, var(--is-medium, 1) * 2.375rem, var(--is-small, 1) * 1.9375rem);
+  --size: max(var(--is-large, 1) * max(3rem, -1 * 3rem), var(--is-medium, 1) * max(2.375rem, -1 * 2.375rem), var(--is-small, 1) * max(1.9375rem, -1 * 1.9375rem));
 }
 
 :host [part=base] {
@@ -9,30 +9,6 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
   -o-transition: all 0.15s ease-out;
   transition: all 0.15s ease-out;
 }
-:host [part=base]::before {
-  -webkit-transition: all 0.15s ease-out;
-  -o-transition: all 0.15s ease-out;
-  transition: all 0.15s ease-out;
-}
-
-:host([disabled][variant=flat]) [part=base] {
-  background: transparent;
-  color: hsla(var(--ig-primary-100), var(--ig-primary-a));
-}
-
-:host([disabled][variant=fab]) [part=base],
-:host([disabled][variant=contained]) [part=base] {
-  background: hsla(var(--ig-primary-200), var(--ig-primary-a));
-  color: var(--ig-primary-600-contrast);
-}
-
-:host([disabled][variant=outlined]) [part=base] {
-  color: hsla(var(--ig-primary-500), var(--ig-primary-a));
-  -webkit-box-shadow: 0 0 0 1px hsla(var(--ig-primary-500), var(--ig-primary-a));
-          box-shadow: 0 0 0 1px hsla(var(--ig-primary-500), var(--ig-primary-a));
-  opacity: 0.65;
-  background: transparent;
-}
 
 :host(:not([disabled])[variant=flat]) [part=base] {
   border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 0.25rem), 0.25rem);
@@ -40,24 +16,32 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
 }
 :host(:not([disabled])[variant=flat]) [part=base]:hover {
   color: hsla(var(--ig-primary-800), var(--ig-primary-a));
+  background: transparent;
 }
 :host(:not([disabled])[variant=flat]) [part=base]:focus, :host(:not([disabled])[variant=flat]) [part=base]:active {
   color: hsla(var(--ig-primary-600), var(--ig-primary-a));
   -webkit-box-shadow: 0 0 0 0.25rem hsla(var(--ig-primary-200), 0.5);
           box-shadow: 0 0 0 0.25rem hsla(var(--ig-primary-200), 0.5);
-}
-:host(:not([disabled])[variant=flat]) [part=base]:hover::before {
   background: transparent;
 }
-:host(:not([disabled])[variant=flat]) [part=base]:focus::before, :host(:not([disabled])[variant=flat]) [part=base]:active::before {
+
+:host([disabled][variant=flat]) [part=base] {
   background: transparent;
-  opacity: 1;
+  color: hsla(var(--ig-primary-100), var(--ig-primary-a));
+}
+
+:host([disabled][variant=fab]) [part=base],
+:host([disabled][variant=contained]) [part=base] {
+  background: hsla(var(--ig-primary-200), var(--ig-primary-a));
+  color: var(--ig-primary-600-contrast);
 }
 
 :host(:not([disabled])[variant=contained]) [part=base] {
   color: var(--ig-primary-600-contrast);
   -webkit-box-shadow: var(--ig-elevation-0);
           box-shadow: var(--ig-elevation-0);
+  background: hsla(var(--ig-primary-500), var(--ig-primary-a));
+  opacity: 1;
 }
 :host(:not([disabled])[variant=contained]) [part=base]:hover {
   color: var(--ig-primary-600-contrast);
@@ -67,43 +51,33 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
   -webkit-box-shadow: 0 0 0 0.25rem hsla(var(--ig-primary-200), 0.5);
           box-shadow: 0 0 0 0.25rem hsla(var(--ig-primary-200), 0.5);
 }
-:host(:not([disabled])[variant=contained]) [part=base]::before {
-  background: hsla(var(--ig-primary-500), var(--ig-primary-a));
-  opacity: 1;
-}
-: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 {
+:host(:not([disabled])[variant=contained]) [part=base]:hover, :host(:not([disabled])[variant=contained]) [part=base]:focus, :host(:not([disabled])[variant=contained]) [part=base]:active {
   background: hsla(var(--ig-primary-600), var(--ig-primary-a));
-  opacity: 1;
 }
 
 :host(:not([disabled])[variant=outlined]) [part=base] {
   color: hsla(var(--ig-primary-500), var(--ig-primary-a));
-  -webkit-box-shadow: 0 0 0 1px hsla(var(--ig-primary-500), var(--ig-primary-a));
-          box-shadow: 0 0 0 1px hsla(var(--ig-primary-500), var(--ig-primary-a));
+  border: 0.0625rem solid hsla(var(--ig-primary-500), var(--ig-primary-a));
+  -webkit-box-shadow: none;
+          box-shadow: none;
   overflow: visible;
 }
-:host(:not([disabled])[variant=outlined]) [part=base]::after {
-  border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 0.25rem), 0.25rem);
-  position: absolute;
-  content: "";
-  width: 100%;
-  height: 100%;
-}
-:host(:not([disabled])[variant=outlined]) [part=base]:hover {
-  background: hsla(var(--ig-primary-600), var(--ig-primary-a));
-  color: var(--ig-primary-600-contrast);
+:host(:not([disabled])[variant=outlined]) [part=base]:focus {
+  background: transparent;
+  -webkit-box-shadow: 0 0 0 0.25rem hsla(var(--ig-primary-200), 0.5);
+          box-shadow: 0 0 0 0.25rem hsla(var(--ig-primary-200), 0.5);
 }
-:host(:not([disabled])[variant=outlined]) [part=base]:hover::before {
+:host(:not([disabled])[variant=outlined]) [part=base]:hover, :host(:not([disabled])[variant=outlined]) [part=base]:active {
   background: hsla(var(--ig-primary-500), var(--ig-primary-a));
-  opacity: 1;
+  color: var(--ig-primary-600-contrast);
 }
-:host(:not([disabled])[variant=outlined]) [part=base]:focus::before, :host(:not([disabled])[variant=outlined]) [part=base]:active::before {
+
+:host([disabled][variant=outlined]) [part=base] {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  color: hsla(var(--ig-primary-200), var(--ig-primary-a));
+  border: 0.0625rem solid hsla(var(--ig-primary-200), var(--ig-primary-a));
   background: transparent;
-  opacity: 1;
-}
-:host(:not([disabled])[variant=outlined]) [part=base]:focus::after, :host(:not([disabled])[variant=outlined]) [part=base]:active::after {
-  -webkit-box-shadow: 0 0 0 0.25rem hsla(var(--ig-primary-200), 0.5);
-          box-shadow: 0 0 0 0.25rem hsla(var(--ig-primary-200), 0.5);
 }
 
 :host([variant=fab][size=large]) [part=base] {
@@ -122,6 +96,7 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
   color: var(--ig-primary-600-contrast);
   -webkit-box-shadow: var(--ig-elevation-0);
           box-shadow: var(--ig-elevation-0);
+  background: hsla(var(--ig-primary-500), var(--ig-primary-a));
 }
 :host(:not([disabled])[variant=fab]) [part=base]:hover {
   color: var(--ig-primary-600-contrast);
@@ -131,12 +106,7 @@ export const styles = css `/* stylelint-disable max-line-length */ /* stylelint-
   -webkit-box-shadow: 0 0 0 0.25rem hsla(var(--ig-primary-200), 0.5);
           box-shadow: 0 0 0 0.25rem hsla(var(--ig-primary-200), 0.5);
 }
-:host(:not([disabled])[variant=fab]) [part=base]::before {
-  background: hsla(var(--ig-primary-500), var(--ig-primary-a));
-  opacity: 1;
-}
-: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 {
+:host(:not([disabled])[variant=fab]) [part=base]:hover, :host(:not([disabled])[variant=fab]) [part=base]:focus, :host(:not([disabled])[variant=fab]) [part=base]:active {
   background: hsla(var(--ig-primary-600), var(--ig-primary-a));
-  opacity: 1;
 }`;
 //# sourceMappingURL=button.bootstrap.css.js.map