igniteui-webcomponents 3.3.0 → 4.0.0-alpha.2

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

@@ -1,3 +1,186 @@
 import { css } from 'lit';
-export const styles = css `:host{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(--igc-gray-400), var(--igc-gray-a))) var(--igc-scrollbar-track-color, hsla(var(--igc-gray-200), var(--igc-gray-a)))}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;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(--igc-gray-200), var(--igc-gray-a)))}:host ::-webkit-scrollbar-thumb{background:var(--igc-scrollbar-thumb-color, hsla(var(--igc-gray-400), var(--igc-gray-a)))}[hidden]{display:none !important}:host{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle}[part=base]{border-radius:clamp(0rem,var(--igc-radius-factor)*.25rem,.25rem);position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-flex:1;-ms-flex:1;flex:1;border:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline-style:none;-webkit-tap-highlight-color:rgba(0,0,0,0);overflow:hidden;white-space:nowrap;text-decoration:none;z-index:0;font-family:var(--igc-button-font-family);font-weight:var(--igc-button-font-weight);font-size:var(--igc-button-font-size);font-style:var(--igc-button-font-style);letter-spacing:var(--igc-button-letter-spacing);line-height:var(--igc-button-line-height);text-transform:var(--igc-button-text-transform)}[part=base]::before{position:absolute;content:"";width:100%;height:100%;z-index:-1;will-change:opacity;-webkit-transition:all .1s ease-out;-o-transition:all .1s ease-out;transition:all .1s ease-out}:host(:not([disabled])) [part=base]:hover{cursor:pointer}:host([disabled]){pointer-events:none}:host([disabled]) [part=base]{background:hsla(var(--igc-gray-300), var(--igc-gray-a));color:hsla(var(--igc-gray-500), var(--igc-gray-a));-webkit-box-shadow:none;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)}[name=suffix]::slotted(*){-webkit-margin-start:var(--igc-spacing-large);margin-inline-start:var(--igc-spacing-large)}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(--igc-secondary-500), var(--igc-secondary-a));background:rgba(0,0,0,0)}: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(--igc-secondary-500), var(--igc-secondary-a));opacity:.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(--igc-secondary-500), var(--igc-secondary-a));opacity:.24}:host([disabled][variant=flat]) [part=base]{background:rgba(0,0,0,0)}:host(:not([disabled])[variant=outlined]) [part=base]{-webkit-box-shadow:inset 0 0 0 1px hsla(var(--igc-secondary-500), var(--igc-secondary-a));box-shadow:inset 0 0 0 1px hsla(var(--igc-secondary-500), var(--igc-secondary-a))}:host([disabled][variant=outlined]) [part=base]{background:rgba(0,0,0,0);-webkit-box-shadow:inset 0 0 0 1px hsla(var(--igc-gray-300), var(--igc-gray-a));box-shadow:inset 0 0 0 1px hsla(var(--igc-gray-300), var(--igc-gray-a))}:host(:not([disabled])[variant=fab]) [part=base],:host(:not([disabled])[variant=contained]) [part=base]{background:hsla(var(--igc-secondary-500), var(--igc-secondary-a));color:var(--igc-secondary-500-contrast)}:host([variant=fab]) [part=base]{border-radius:clamp(0rem,var(--igc-radius-factor)*var(--size)/2,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}`;
+export const styles = css `:host {
+  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)));
+}
+:host *,
+:host *::before,
+:host *::after {
+  -webkit-box-sizing: border-box;
+          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)));
+}
+:host ::-webkit-scrollbar-thumb {
+  background: var(--igc-scrollbar-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+}
+
+[hidden] {
+  display: none !important;
+}
+
+/* stylelint-disable max-line-length */
+:host {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  vertical-align: middle;
+}
+
+[part=base] {
+  border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 0.25rem), 0.25rem);
+  font-family: var(--ig-button-font-family);
+  font-size: var(--ig-button-font-size);
+  font-weight: var(--ig-button-font-weight);
+  font-style: var(--ig-button-font-style);
+  line-height: var(--ig-button-line-height);
+  letter-spacing: var(--ig-button-letter-spacing);
+  text-transform: var(--ig-button-text-transform);
+  margin-top: var(--ig-button-margin-top);
+  margin-bottom: var(--ig-button-margin-bottom);
+  position: relative;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  border: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  outline-style: none;
+  -webkit-tap-highlight-color: transparent;
+  overflow: hidden;
+  white-space: nowrap;
+  text-decoration: none;
+  z-index: 0;
+}
+[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;
+}
+
+:host(:not([disabled])) [part=base]:hover {
+  cursor: pointer;
+}
+
+:host([disabled]) {
+  pointer-events: none;
+}
+:host([disabled]) [part=base] {
+  background: hsla(var(--ig-gray-300), var(--ig-gray-a));
+  color: hsla(var(--ig-gray-500), var(--ig-gray-a));
+  -webkit-box-shadow: none;
+          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);
+}
+
+[name=suffix]::slotted(*) {
+  -webkit-margin-start: var(--igc-spacing-large);
+          margin-inline-start: var(--igc-spacing-large);
+}
+
+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;
+}
+: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]: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([disabled][variant=flat]) [part=base] {
+  background: transparent;
+}
+
+: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));
+}
+
+: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));
+}
+
+:host(:not([disabled])[variant=fab]) [part=base], :host(:not([disabled])[variant=contained]) [part=base] {
+  background: hsla(var(--ig-secondary-500), var(--ig-secondary-a));
+  color: var(--ig-secondary-500-contrast);
+}
+
+:host([variant=fab]) [part=base] {
+  border-radius: clamp(0rem, calc(var(--ig-radius-factor) * calc(var(--size) / 2)), calc(var(--size) / 2));
+  min-width: var(--size);
+  min-height: var(--size);
+}
+
+:host([variant=fab][size=large]) [part=base] {
+  --size: 3rem;
+}
+
+:host([variant=fab][size=medium]) [part=base] {
+  --size: 2.5rem;
+}
+
+:host([variant=fab][size=small]) [part=base] {
+  --size: 2rem;
+}`;
 //# sourceMappingURL=button.base.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"button.base.css.js","sourceRoot":"","sources":["../../../../../../src/components/button/themes/button/light/button.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,ktJAAktJ,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{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(--igc-gray-400), var(--igc-gray-a))) var(--igc-scrollbar-track-color, hsla(var(--igc-gray-200), var(--igc-gray-a)))}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;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(--igc-gray-200), var(--igc-gray-a)))}:host ::-webkit-scrollbar-thumb{background:var(--igc-scrollbar-thumb-color, hsla(var(--igc-gray-400), var(--igc-gray-a)))}[hidden]{display:none !important}:host{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle}[part=base]{border-radius:clamp(0rem,var(--igc-radius-factor)*.25rem,.25rem);position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-flex:1;-ms-flex:1;flex:1;border:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline-style:none;-webkit-tap-highlight-color:rgba(0,0,0,0);overflow:hidden;white-space:nowrap;text-decoration:none;z-index:0;font-family:var(--igc-button-font-family);font-weight:var(--igc-button-font-weight);font-size:var(--igc-button-font-size);font-style:var(--igc-button-font-style);letter-spacing:var(--igc-button-letter-spacing);line-height:var(--igc-button-line-height);text-transform:var(--igc-button-text-transform)}[part=base]::before{position:absolute;content:\"\";width:100%;height:100%;z-index:-1;will-change:opacity;-webkit-transition:all .1s ease-out;-o-transition:all .1s ease-out;transition:all .1s ease-out}:host(:not([disabled])) [part=base]:hover{cursor:pointer}:host([disabled]){pointer-events:none}:host([disabled]) [part=base]{background:hsla(var(--igc-gray-300), var(--igc-gray-a));color:hsla(var(--igc-gray-500), var(--igc-gray-a));-webkit-box-shadow:none;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)}[name=suffix]::slotted(*){-webkit-margin-start:var(--igc-spacing-large);margin-inline-start:var(--igc-spacing-large)}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(--igc-secondary-500), var(--igc-secondary-a));background:rgba(0,0,0,0)}: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(--igc-secondary-500), var(--igc-secondary-a));opacity:.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(--igc-secondary-500), var(--igc-secondary-a));opacity:.24}:host([disabled][variant=flat]) [part=base]{background:rgba(0,0,0,0)}:host(:not([disabled])[variant=outlined]) [part=base]{-webkit-box-shadow:inset 0 0 0 1px hsla(var(--igc-secondary-500), var(--igc-secondary-a));box-shadow:inset 0 0 0 1px hsla(var(--igc-secondary-500), var(--igc-secondary-a))}:host([disabled][variant=outlined]) [part=base]{background:rgba(0,0,0,0);-webkit-box-shadow:inset 0 0 0 1px hsla(var(--igc-gray-300), var(--igc-gray-a));box-shadow:inset 0 0 0 1px hsla(var(--igc-gray-300), var(--igc-gray-a))}:host(:not([disabled])[variant=fab]) [part=base],:host(:not([disabled])[variant=contained]) [part=base]{background:hsla(var(--igc-secondary-500), var(--igc-secondary-a));color:var(--igc-secondary-500-contrast)}:host([variant=fab]) [part=base]{border-radius:clamp(0rem,var(--igc-radius-factor)*var(--size)/2,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}`;\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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"]}

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

@@ -1,3 +1,150 @@
 import { css } from 'lit';
-export const styles = css `:host [part=base]{-webkit-transition:all .15s ease-out;-o-transition:all .15s ease-out;transition:all .15s ease-out}:host [part=base]::before{-webkit-transition:all .15s ease-out;-o-transition:all .15s ease-out;transition:all .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:rgba(0,0,0,0);color:hsla(var(--igc-primary-100), var(--igc-primary-a))}:host([disabled][variant=fab]) [part=base],:host([disabled][variant=contained]) [part=base]{background:hsla(var(--igc-primary-200), var(--igc-primary-a));color:var(--igc-primary-600-contrast)}:host([disabled][variant=outlined]) [part=base]{color:hsla(var(--igc-primary-500), var(--igc-primary-a));-webkit-box-shadow:0 0 0 1px hsla(var(--igc-primary-500), var(--igc-primary-a));box-shadow:0 0 0 1px hsla(var(--igc-primary-500), var(--igc-primary-a));opacity:.65;background:rgba(0,0,0,0)}:host(:not([disabled])[variant=flat]) [part=base]{border-radius:clamp(0rem,var(--igc-radius-factor)*.25rem,.25rem);color:hsla(var(--igc-primary-500), var(--igc-primary-a))}:host(:not([disabled])[variant=flat]) [part=base]:hover{color:hsla(var(--igc-primary-800), var(--igc-primary-a))}:host(:not([disabled])[variant=flat]) [part=base]:focus,:host(:not([disabled])[variant=flat]) [part=base]:active{color:hsla(var(--igc-primary-600), var(--igc-primary-a));-webkit-box-shadow:0 0 0 .25rem hsla(var(--igc-primary-200), 0.5);box-shadow:0 0 0 .25rem hsla(var(--igc-primary-200), 0.5)}:host(:not([disabled])[variant=flat]) [part=base]:hover::before{background:rgba(0,0,0,0)}:host(:not([disabled])[variant=flat]) [part=base]:focus::before,:host(:not([disabled])[variant=flat]) [part=base]:active::before{background:rgba(0,0,0,0);opacity:1}:host(:not([disabled])[variant=contained]) [part=base]{color:var(--igc-primary-600-contrast);-webkit-box-shadow:var(--igc-elevation-0);box-shadow:var(--igc-elevation-0)}:host(:not([disabled])[variant=contained]) [part=base]:hover{color:var(--igc-primary-600-contrast)}:host(:not([disabled])[variant=contained]) [part=base]:focus,:host(:not([disabled])[variant=contained]) [part=base]:active{color:var(--igc-primary-600-contrast);-webkit-box-shadow:0 0 0 .25rem hsla(var(--igc-primary-200), 0.5);box-shadow:0 0 0 .25rem hsla(var(--igc-primary-200), 0.5)}:host(:not([disabled])[variant=contained]) [part=base]::before{background:hsla(var(--igc-primary-500), var(--igc-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{background:hsla(var(--igc-primary-600), var(--igc-primary-a));opacity:1}:host(:not([disabled])[variant=outlined]) [part=base]{color:hsla(var(--igc-primary-500), var(--igc-primary-a));-webkit-box-shadow:0 0 0 1px hsla(var(--igc-primary-500), var(--igc-primary-a));box-shadow:0 0 0 1px hsla(var(--igc-primary-500), var(--igc-primary-a));overflow:visible}:host(:not([disabled])[variant=outlined]) [part=base]::after{border-radius:clamp(0rem,var(--igc-radius-factor)*.25rem,.25rem);position:absolute;content:"";width:100%;height:100%}:host(:not([disabled])[variant=outlined]) [part=base]:hover{background:hsla(var(--igc-primary-600), var(--igc-primary-a));color:var(--igc-primary-600-contrast)}:host(:not([disabled])[variant=outlined]) [part=base]:hover::before{background:hsla(var(--igc-primary-500), var(--igc-primary-a));opacity:1}:host(:not([disabled])[variant=outlined]) [part=base]:focus::before,:host(:not([disabled])[variant=outlined]) [part=base]:active::before{background:rgba(0,0,0,0);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 .25rem hsla(var(--igc-primary-200), 0.5);box-shadow:0 0 0 .25rem hsla(var(--igc-primary-200), 0.5)}:host([variant=fab][size=large]) [part=base]{border-radius:clamp(0rem,var(--igc-radius-factor)*1rem,1rem)}:host([variant=fab][size=medium]) [part=base]{border-radius:clamp(0rem,var(--igc-radius-factor)*.75rem,.75rem)}:host([variant=fab][size=small]) [part=base]{border-radius:clamp(0rem,var(--igc-radius-factor)*.5rem,.5rem)}:host(:not([disabled])[variant=fab]) [part=base]{color:var(--igc-primary-600-contrast);-webkit-box-shadow:var(--igc-elevation-0);box-shadow:var(--igc-elevation-0)}:host(:not([disabled])[variant=fab]) [part=base]:hover{color:var(--igc-primary-600-contrast)}:host(:not([disabled])[variant=fab]) [part=base]:focus,:host(:not([disabled])[variant=fab]) [part=base]:active{color:var(--igc-primary-600-contrast);-webkit-box-shadow:0 0 0 .25rem hsla(var(--igc-primary-200), 0.5);box-shadow:0 0 0 .25rem hsla(var(--igc-primary-200), 0.5)}:host(:not([disabled])[variant=fab]) [part=base]::before{background:hsla(var(--igc-primary-500), var(--igc-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{background:hsla(var(--igc-primary-600), var(--igc-primary-a));opacity:1}`;
+export const styles = css `/* stylelint-disable max-line-length */
+:host [part=base] {
+  -webkit-transition: all 0.15s ease-out;
+  -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([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));
+}
+
+: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);
+  color: hsla(var(--ig-primary-500), var(--ig-primary-a));
+}
+:host(:not([disabled])[variant=flat]) [part=base]:hover {
+  color: hsla(var(--ig-primary-800), var(--ig-primary-a));
+}
+: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 {
+  background: transparent;
+  opacity: 1;
+}
+
+: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);
+}
+:host(:not([disabled])[variant=contained]) [part=base]:hover {
+  color: var(--ig-primary-600-contrast);
+}
+:host(:not([disabled])[variant=contained]) [part=base]:focus, :host(:not([disabled])[variant=contained]) [part=base]:active {
+  color: var(--ig-primary-600-contrast);
+  -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 {
+  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));
+  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]:hover::before {
+  background: hsla(var(--ig-primary-500), var(--ig-primary-a));
+  opacity: 1;
+}
+:host(:not([disabled])[variant=outlined]) [part=base]:focus::before, :host(:not([disabled])[variant=outlined]) [part=base]:active::before {
+  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] {
+  border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 1rem), 1rem);
+}
+
+:host([variant=fab][size=medium]) [part=base] {
+  border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 0.75rem), 0.75rem);
+}
+
+:host([variant=fab][size=small]) [part=base] {
+  border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 0.5rem), 0.5rem);
+}
+
+:host(:not([disabled])[variant=fab]) [part=base] {
+  color: var(--ig-primary-600-contrast);
+  -webkit-box-shadow: var(--ig-elevation-0);
+          box-shadow: var(--ig-elevation-0);
+}
+:host(:not([disabled])[variant=fab]) [part=base]:hover {
+  color: var(--ig-primary-600-contrast);
+}
+:host(:not([disabled])[variant=fab]) [part=base]:focus, :host(:not([disabled])[variant=fab]) [part=base]:active {
+  color: var(--ig-primary-600-contrast);
+  -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 {
+  background: hsla(var(--ig-primary-600), var(--ig-primary-a));
+  opacity: 1;
+}`;
 //# sourceMappingURL=button.bootstrap.css.js.map

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

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

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

@@ -1,3 +1,170 @@
 import { css } from 'lit';
-export const styles = css `[part=base]{border-radius:clamp(0rem,var(--igc-radius-factor)*.125rem,.125rem)}:host([size=small]) [part=base]{--size: 1.5rem;padding:0 .5rem}:host([size=medium]) [part=base]{--size: 2rem;padding:0 1rem}:host([size=large]) [part=base]{--size: 2.375rem;padding:0 1rem}:host(:not([disabled])[variant=flat]) [part=base]{color:hsla(var(--igc-gray-900), var(--igc-gray-a))}:host(:not([disabled])[variant=flat]) [part=base]:hover{color:hsla(var(--igc-primary-500), var(--igc-primary-a))}:host(:not([disabled])[variant=flat]) [part=base]:active{color:hsla(var(--igc-gray-900), var(--igc-gray-a))}: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{background:rgba(0,0,0,0)}:host(:not([disabled])[variant=outlined]) [part=base]{color:hsla(var(--igc-gray-900), var(--igc-gray-a));-webkit-transition:color .15s ease-out;-o-transition:color .15s ease-out;transition:color .15s ease-out;-webkit-box-shadow:0 0 0 1px hsla(var(--igc-gray-700), var(--igc-gray-a));box-shadow:0 0 0 1px hsla(var(--igc-gray-700), var(--igc-gray-a))}:host(:not([disabled])[variant=outlined]) [part=base]:hover::before,:host(:not([disabled])[variant=outlined]) [part=base]:focus:hover::before{opacity:1;background:hsla(var(--igc-gray-100), var(--igc-gray-a))}:host(:not([disabled])[variant=outlined]) [part=base]:focus::before{opacity:1;background:rgba(0,0,0,0)}:host(:not([disabled])[variant=outlined]) [part=base]:focus:active::before{opacity:1;background:hsla(var(--igc-gray-200), var(--igc-gray-a))}:host(:not([disabled])[variant=outlined]) [part=base]:hover,:host(:not([disabled])[variant=outlined]) [part=base]:focus,:host(:not([disabled])[variant=outlined]) [part=base]:active{color:hsla(var(--igc-gray-900), var(--igc-gray-a))}: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{opacity:1;background:hsla(var(--igc-gray-200), var(--igc-gray-a))}:host(:not([disabled])[variant=outlined]) [part=base]:focus-visible:hover::before{opacity:1;background:hsla(var(--igc-gray-100), var(--igc-gray-a))}:host(:not([disabled])[variant=flat]) [part=base]:focus-visible,:host(:not([disabled])[variant=outlined]) [part=base]:focus-visible{position:relative}:host(:not([disabled])[variant=flat]) [part=base]:focus-visible::after,:host(:not([disabled])[variant=outlined]) [part=base]:focus-visible::after{content:"";-webkit-box-shadow:0 0 0 1px hsla(var(--igc-gray-800), var(--igc-gray-a));box-shadow:0 0 0 1px hsla(var(--igc-gray-800), var(--igc-gray-a));position:absolute;top:2px;left:2px;pointer-events:none;width:calc(100% - 4px);height:calc(100% - 4px)}:host(:not([disabled])[variant=flat]) [part=base]:focus-visible::before,:host(:not([disabled])[variant=outlined]) [part=base]:focus-visible::before{background:rgba(0,0,0,0)}:host(:not([disabled])[variant=contained]) [part=base],:host(:not([disabled])[variant=fab]) [part=base]{color:var(--text-color, var(--igc-primary-600-contrast));-webkit-box-shadow:var(--igc-elevation-0);box-shadow:var(--igc-elevation-0)}:host(:not([disabled])[variant=contained]) [part=base]:hover,:host(:not([disabled])[variant=contained]) [part=base]:focus-visible:hover,:host(:not([disabled])[variant=fab]) [part=base]:hover,:host(:not([disabled])[variant=fab]) [part=base]:focus-visible:hover{color:var(--text-color, var(--igc-primary-600-contrast))}:host(:not([disabled])[variant=contained]) [part=base]:hover::before,:host(:not([disabled])[variant=contained]) [part=base]:focus-visible:hover::before,:host(:not([disabled])[variant=fab]) [part=base]:hover::before,:host(:not([disabled])[variant=fab]) [part=base]:focus-visible:hover::before{opacity:1;background:var(--hover-background, hsla(var(--igc-primary-600), var(--igc-primary-a)))}:host(:not([disabled])[variant=contained]) [part=base]:focus,:host(:not([disabled])[variant=contained]) [part=base]:active,:host(:not([disabled])[variant=fab]) [part=base]:focus,:host(:not([disabled])[variant=fab]) [part=base]:active{color:var(--text-color, var(--igc-primary-600-contrast))}:host(:not([disabled])[variant=contained]) [part=base]::before,:host(:not([disabled])[variant=fab]) [part=base]::before{opacity:1;background:hsla(var(--igc-primary-500), var(--igc-primary-a))}:host(:not([disabled])[variant=contained]) [part=base]:active::before,:host(:not([disabled])[variant=contained]) [part=base]:focus-visible:active::before,:host(:not([disabled])[variant=fab]) [part=base]:active::before,:host(:not([disabled])[variant=fab]) [part=base]:focus-visible:active::before{opacity:1;background:var(--active-background, hsla(var(--igc-primary-700), var(--igc-primary-a)))}:host(:not([disabled])[variant=contained]) [part=base]:focus-visible,:host(:not([disabled])[variant=fab]) [part=base]:focus-visible{position:relative}:host(:not([disabled])[variant=contained]) [part=base]:focus-visible::after,:host(:not([disabled])[variant=fab]) [part=base]:focus-visible::after{content:"";-webkit-box-shadow:0 0 0 1px var(--igc-primary-600-contrast);box-shadow:0 0 0 1px var(--igc-primary-600-contrast);position:absolute;top:3px;left:3px;pointer-events:none;width:calc(100% - 6px);height:calc(100% - 6px)}:host(:not([disabled])[variant=contained]) [part=base]:focus-visible::before,:host(:not([disabled])[variant=fab]) [part=base]:focus-visible::before{background:rgba(0,0,0,0)}:host([variant=fab]) [part=base]{border-radius:clamp(0rem,var(--igc-radius-factor)*.875rem,.875rem)}:host([variant=fab]) [part=base]::after{border-radius:clamp(0rem,var(--igc-radius-factor)*.75rem,.75rem)}:host([disabled][variant=flat]) [part=base]{color:hsla(var(--igc-gray-400), var(--igc-gray-a));background:rgba(0,0,0,0)}:host([disabled][variant=fab]) [part=base],:host([disabled][variant=contained]) [part=base]{color:hsla(var(--igc-gray-400), var(--igc-gray-a))}:host([disabled][variant=fab]) [part=base]::before,:host([disabled][variant=contained]) [part=base]::before{opacity:1;background:hsla(var(--igc-gray-100), var(--igc-gray-a))}:host([disabled][variant=outlined]) [part=base]{-webkit-box-shadow:none;box-shadow:none;color:hsla(var(--igc-gray-500), 8);background:hsla(var(--igc-gray-200), var(--igc-gray-a))}`;
+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=medium]) [part=base] {
+  --size: 2rem;
+  padding: 0 1rem;
+}
+
+:host([size=large]) [part=base] {
+  --size: 2.375rem;
+  padding: 0 1rem;
+}
+
+:host(:not([disabled])[variant=flat]) [part=base] {
+  color: hsla(var(--ig-gray-900), var(--ig-gray-a));
+}
+:host(:not([disabled])[variant=flat]) [part=base]:hover {
+  color: hsla(var(--ig-primary-500), var(--ig-primary-a));
+}
+:host(:not([disabled])[variant=flat]) [part=base]:active {
+  color: hsla(var(--ig-gray-900), var(--ig-gray-a));
+}
+: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 {
+  background: transparent;
+}
+
+:host(:not([disabled])[variant=outlined]) [part=base] {
+  color: hsla(var(--ig-gray-900), var(--ig-gray-a));
+  -webkit-transition: color 0.15s ease-out;
+  -o-transition: color 0.15s ease-out;
+  transition: color 0.15s ease-out;
+  -webkit-box-shadow: 0 0 0 1px hsla(var(--ig-gray-700), var(--ig-gray-a));
+          box-shadow: 0 0 0 1px hsla(var(--ig-gray-700), var(--ig-gray-a));
+}
+:host(:not([disabled])[variant=outlined]) [part=base]:hover::before, :host(:not([disabled])[variant=outlined]) [part=base]:focus:hover::before {
+  opacity: 1;
+  background: hsla(var(--ig-gray-100), var(--ig-gray-a));
+}
+:host(:not([disabled])[variant=outlined]) [part=base]:focus::before {
+  opacity: 1;
+  background: transparent;
+}
+:host(:not([disabled])[variant=outlined]) [part=base]:focus:active::before {
+  opacity: 1;
+  background: hsla(var(--ig-gray-200), var(--ig-gray-a));
+}
+:host(:not([disabled])[variant=outlined]) [part=base]:hover, :host(:not([disabled])[variant=outlined]) [part=base]:focus, :host(:not([disabled])[variant=outlined]) [part=base]:active {
+  color: hsla(var(--ig-gray-900), var(--ig-gray-a));
+}
+: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 {
+  opacity: 1;
+  background: hsla(var(--ig-gray-200), var(--ig-gray-a));
+}
+:host(:not([disabled])[variant=outlined]) [part=base]:focus-visible:hover::before {
+  opacity: 1;
+  background: hsla(var(--ig-gray-100), var(--ig-gray-a));
+}
+
+:host(:not([disabled])[variant=flat]) [part=base]:focus-visible,
+:host(:not([disabled])[variant=outlined]) [part=base]:focus-visible {
+  position: relative;
+}
+:host(:not([disabled])[variant=flat]) [part=base]:focus-visible::after,
+:host(:not([disabled])[variant=outlined]) [part=base]:focus-visible::after {
+  content: "";
+  -webkit-box-shadow: 0 0 0 1px hsla(var(--ig-gray-800), var(--ig-gray-a));
+          box-shadow: 0 0 0 1px hsla(var(--ig-gray-800), var(--ig-gray-a));
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  pointer-events: none;
+  width: calc(100% - 4px);
+  height: calc(100% - 4px);
+}
+:host(:not([disabled])[variant=flat]) [part=base]:focus-visible::before,
+:host(:not([disabled])[variant=outlined]) [part=base]:focus-visible::before {
+  background: transparent;
+}
+
+:host(:not([disabled])[variant=contained]) [part=base],
+:host(:not([disabled])[variant=fab]) [part=base] {
+  color: var(--text-color, var(--ig-primary-600-contrast));
+  -webkit-box-shadow: var(--ig-elevation-0);
+          box-shadow: var(--ig-elevation-0);
+}
+:host(:not([disabled])[variant=contained]) [part=base]:hover, :host(:not([disabled])[variant=contained]) [part=base]:focus-visible:hover,
+:host(:not([disabled])[variant=fab]) [part=base]:hover,
+:host(:not([disabled])[variant=fab]) [part=base]:focus-visible:hover {
+  color: var(--text-color, var(--ig-primary-600-contrast));
+}
+:host(:not([disabled])[variant=contained]) [part=base]:hover::before, :host(:not([disabled])[variant=contained]) [part=base]:focus-visible:hover::before,
+:host(:not([disabled])[variant=fab]) [part=base]:hover::before,
+:host(:not([disabled])[variant=fab]) [part=base]:focus-visible:hover::before {
+  opacity: 1;
+  background: var(--hover-background, hsla(var(--ig-primary-600), var(--ig-primary-a)));
+}
+:host(:not([disabled])[variant=contained]) [part=base]:focus, :host(:not([disabled])[variant=contained]) [part=base]:active,
+:host(:not([disabled])[variant=fab]) [part=base]:focus,
+:host(:not([disabled])[variant=fab]) [part=base]:active {
+  color: var(--text-color, var(--ig-primary-600-contrast));
+}
+:host(:not([disabled])[variant=contained]) [part=base]::before,
+:host(:not([disabled])[variant=fab]) [part=base]::before {
+  opacity: 1;
+  background: hsla(var(--ig-primary-500), var(--ig-primary-a));
+}
+:host(:not([disabled])[variant=contained]) [part=base]:active::before, :host(:not([disabled])[variant=contained]) [part=base]:focus-visible:active::before,
+:host(:not([disabled])[variant=fab]) [part=base]:active::before,
+:host(:not([disabled])[variant=fab]) [part=base]:focus-visible:active::before {
+  opacity: 1;
+  background: var(--active-background, hsla(var(--ig-primary-700), var(--ig-primary-a)));
+}
+:host(:not([disabled])[variant=contained]) [part=base]:focus-visible,
+:host(:not([disabled])[variant=fab]) [part=base]:focus-visible {
+  position: relative;
+}
+:host(:not([disabled])[variant=contained]) [part=base]:focus-visible::after,
+:host(:not([disabled])[variant=fab]) [part=base]:focus-visible::after {
+  content: "";
+  -webkit-box-shadow: 0 0 0 1px var(--ig-primary-600-contrast);
+          box-shadow: 0 0 0 1px var(--ig-primary-600-contrast);
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  pointer-events: none;
+  width: calc(100% - 6px);
+  height: calc(100% - 6px);
+}
+:host(:not([disabled])[variant=contained]) [part=base]:focus-visible::before,
+:host(:not([disabled])[variant=fab]) [part=base]:focus-visible::before {
+  background: transparent;
+}
+
+:host([variant=fab]) [part=base] {
+  border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 0.875rem), 0.875rem);
+}
+:host([variant=fab]) [part=base]::after {
+  border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 0.75rem), 0.75rem);
+}
+
+:host([disabled][variant=flat]) [part=base] {
+  color: hsla(var(--ig-gray-400), var(--ig-gray-a));
+  background: transparent;
+}
+
+:host([disabled][variant=fab]) [part=base],
+:host([disabled][variant=contained]) [part=base] {
+  color: hsla(var(--ig-gray-400), var(--ig-gray-a));
+}
+:host([disabled][variant=fab]) [part=base]::before,
+:host([disabled][variant=contained]) [part=base]::before {
+  opacity: 1;
+  background: hsla(var(--ig-gray-100), var(--ig-gray-a));
+}
+
+:host([disabled][variant=outlined]) [part=base] {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  color: hsla(var(--ig-gray-500), 8);
+  background: hsla(var(--ig-gray-200), var(--ig-gray-a));
+}`;
 //# sourceMappingURL=button.fluent.css.js.map