npm - igniteui-webcomponents - Versions diffs - 4.0.0-alpha.2 → 4.0.0 - Mend

igniteui-webcomponents 4.0.0-alpha.2 → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (240) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -5,11 +5,38 @@ 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/).
-## Unreleased
+## [4.0.0] - 2022-11-02
+### Changed
+- Themes
+  - Build - Utilize [Ignite UI Theming](https://github.com/IgniteUI/igniteui-theming) package when building themes [#415](https://github.com/IgniteUI/igniteui-webcomponents/issues/415)
+  - Sizing - Introduced CSS variables that allow runtime CSS configuration of the size for all or individual components [#115](https://github.com/IgniteUI/igniteui-webcomponents/issues/115)
+  - Spacing - Introduced CSS variables that allow runtime CSS configuration of the internal spacing (padding/margin) of components [#506](https://github.com/IgniteUI/igniteui-webcomponents/issues/506)
+  - Scrollbars - Added the ability to style application-level scrollbars by setting the `ig-scrollbar` CSS class on any element [#141](https://github.com/IgniteUI/igniteui-webcomponents/issues/141)
+## [3.4.2] - 2022-11-01
 ### Fixed
-- Chip - made remove button accessible with the keyboard [#480](https://github.com/IgniteUI/igniteui-webcomponents/issues/480)
+- Resolved importing error for `DateRangeType` [#535](https://github.com/IgniteUI/igniteui-webcomponents/issues/535)
+## [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
@@ -148,6 +175,10 @@ Initial release of Ignite UI Web Components
 - Ripple component
 - Switch component
+[4.0.0]: https://github.com/IgniteUI/igniteui-webcomponents/compare/3.4.2...4.0.0
+[3.4.2]: https://github.com/IgniteUI/igniteui-webcomponents/compare/3.4.1...3.4.2
+[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 CHANGED Viewed

@@ -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/avatar/themes/avatar.base.css.js CHANGED Viewed

@@ -1,10 +1,17 @@
 import { css } from 'lit';
 export const styles = css `:host {
+  --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);
+  --is-medium:
+      min(
+          clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),
+          clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)
+      );
+  --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);
   position: relative;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
-  scrollbar-width: var(--scrolbar-size, 0.875rem);
-  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)));
+  scrollbar-width: var(--ig-scrollbar-size);
+  scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);
 }
 :host *,
 :host *::before,
@@ -13,12 +20,12 @@ export const styles = css `:host {
           box-sizing: border-box;
 }
 :host ::-webkit-scrollbar {
-  width: var(--scrolbar-size, 0.875rem);
-  height: var(--scrolbar-size, 0.875rem);
-  background: var(--igc-scrollbar-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  width: var(--ig-scrollbar-size);
+  height: var(--ig-scrollbar-size);
+  background: var(--ig-scrollbar-track-background);
 }
 :host ::-webkit-scrollbar-thumb {
-  background: var(--igc-scrollbar-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  background: var(--ig-scrollbar-thumb-background);
 }
 [hidden] {
@@ -27,6 +34,7 @@ export const styles = css `:host {
 /* 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;
 }
@@ -75,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 CHANGED Viewed

	@@ -1 +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~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8FvB~~,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/ stylelint-disable max-line-length */\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"]}
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 /\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/badge/themes/light/badge.base.css.js CHANGED Viewed

@@ -1,10 +1,17 @@
 import { css } from 'lit';
 export const styles = css `:host {
+  --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);
+  --is-medium:
+      min(
+          clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),
+          clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)
+      );
+  --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);
   position: relative;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
-  scrollbar-width: var(--scrolbar-size, 0.875rem);
-  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)));
+  scrollbar-width: var(--ig-scrollbar-size);
+  scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);
 }
 :host *,
 :host *::before,
@@ -13,12 +20,12 @@ export const styles = css `:host {
           box-sizing: border-box;
 }
 :host ::-webkit-scrollbar {
-  width: var(--scrolbar-size, 0.875rem);
-  height: var(--scrolbar-size, 0.875rem);
-  background: var(--igc-scrollbar-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  width: var(--ig-scrollbar-size);
+  height: var(--ig-scrollbar-size);
+  background: var(--ig-scrollbar-track-background);
 }
 :host ::-webkit-scrollbar-thumb {
-  background: var(--igc-scrollbar-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  background: var(--ig-scrollbar-thumb-background);
 }
 [hidden] {

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

	@@ -1 +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~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmGvB~~,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/ 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"]}
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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(--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 /\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/button/icon-button.js CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
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;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/light/button.base.css.js CHANGED Viewed

@@ -1,10 +1,17 @@
 import { css } from 'lit';
 export const styles = css `:host {
+  --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);
+  --is-medium:
+      min(
+          clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),
+          clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)
+      );
+  --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);
   position: relative;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
-  scrollbar-width: var(--scrolbar-size, 0.875rem);
-  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)));
+  scrollbar-width: var(--ig-scrollbar-size);
+  scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);
 }
 :host *,
 :host *::before,
@@ -13,12 +20,12 @@ export const styles = css `:host {
           box-sizing: border-box;
 }
 :host ::-webkit-scrollbar {
-  width: var(--scrolbar-size, 0.875rem);
-  height: var(--scrolbar-size, 0.875rem);
-  background: var(--igc-scrollbar-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  width: var(--ig-scrollbar-size);
+  height: var(--ig-scrollbar-size);
+  background: var(--ig-scrollbar-track-background);
 }
 :host ::-webkit-scrollbar-thumb {
-  background: var(--igc-scrollbar-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  background: var(--ig-scrollbar-thumb-background);
 }
 [hidden] {
@@ -27,11 +34,29 @@ export const styles = css `:host {
 /* 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);
@@ -68,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;
@@ -95,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],
@@ -166,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 CHANGED Viewed

	@@ -1 +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~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuLvB~~,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/ stylelint-disable max-line-length /\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"]}
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 /\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 CHANGED Viewed

@@ -1,5 +1,9 @@
 import { css } from 'lit';
 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;
@@ -11,18 +15,6 @@ export const styles = css `/* stylelint-disable max-line-length */
   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 CHANGED Viewed

	@@ -1 +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~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmJvB~~,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length /\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([~~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"]}
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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 CHANGED Viewed

@@ -1,22 +1,12 @@
 import { css } from 'lit';
 export const styles = css `/* stylelint-disable max-line-length */
-[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;
+: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 CHANGED Viewed

	@@ -1 +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~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuKvB~~,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length /\n[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"]}
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"]}