igniteui-webcomponents 3.3.0-beta.0 → 4.0.0-alpha

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

@@ -1,3 +1,34 @@
 import { css } from 'lit';
-export const styles = css `:host{padding:0 .5rem;background:hsla(var(--igc-surface-500), var(--igc-surface-a));color:var(--igc-surface-500-contrast);-webkit-box-shadow:none;box-shadow:none}::slotted(igc-icon){color:var(--igc-surface-500-contrast)}[part=base]{-webkit-padding-start:.25rem;padding-inline-start:.25rem;-webkit-padding-end:.25rem;padding-inline-end:.25rem}::slotted(*){font-family:var(--igc-h5-font-family);font-weight:var(--igc-h5-font-weight);font-size:var(--igc-h5-font-size);font-style:var(--igc-h5-font-style);letter-spacing:var(--igc-h5-letter-spacing);text-transform:var(--igc-h5-text-transform);line-height:var(--igc-h5-line-height);margin-top:var(--igc-h5-margin-top);margin-bottom:var(--igc-h5-margin-bottom);line-height:normal;margin:0}`;
+export const styles = css `:host {
+  padding: 0 0.5rem;
+  background: hsla(var(--ig-surface-500), var(--ig-surface-a));
+  color: var(--ig-surface-500-contrast);
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+::slotted(igc-icon) {
+  color: var(--ig-surface-500-contrast);
+}
+
+[part=base] {
+  -webkit-padding-start: 0.25rem;
+          padding-inline-start: 0.25rem;
+  -webkit-padding-end: 0.25rem;
+          padding-inline-end: 0.25rem;
+}
+
+::slotted(*) {
+  font-family: var(--ig-h5-font-family);
+  font-size: var(--ig-h5-font-size);
+  font-weight: var(--ig-h5-font-weight);
+  font-style: var(--ig-h5-font-style);
+  line-height: var(--ig-h5-line-height);
+  letter-spacing: var(--ig-h5-letter-spacing);
+  text-transform: var(--ig-h5-text-transform);
+  margin-top: var(--ig-h5-margin-top);
+  margin-bottom: var(--ig-h5-margin-bottom);
+  line-height: normal;
+  margin: 0;
+}`;
 //# sourceMappingURL=navbar.bootstrap.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"navbar.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/navbar/themes/light/navbar.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,+tBAA+tB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{padding:0 .5rem;background:hsla(var(--igc-surface-500), var(--igc-surface-a));color:var(--igc-surface-500-contrast);-webkit-box-shadow:none;box-shadow:none}::slotted(igc-icon){color:var(--igc-surface-500-contrast)}[part=base]{-webkit-padding-start:.25rem;padding-inline-start:.25rem;-webkit-padding-end:.25rem;padding-inline-end:.25rem}::slotted(*){font-family:var(--igc-h5-font-family);font-weight:var(--igc-h5-font-weight);font-size:var(--igc-h5-font-size);font-style:var(--igc-h5-font-style);letter-spacing:var(--igc-h5-letter-spacing);text-transform:var(--igc-h5-text-transform);line-height:var(--igc-h5-line-height);margin-top:var(--igc-h5-margin-top);margin-bottom:var(--igc-h5-margin-bottom);line-height:normal;margin:0}`;\n"]}
+{"version":3,"file":"navbar.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/navbar/themes/light/navbar.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+BvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  padding: 0 0.5rem;\n  background: hsla(var(--ig-surface-500), var(--ig-surface-a));\n  color: var(--ig-surface-500-contrast);\n  -webkit-box-shadow: none;\n          box-shadow: none;\n}\n\n::slotted(igc-icon) {\n  color: var(--ig-surface-500-contrast);\n}\n\n[part=base] {\n  -webkit-padding-start: 0.25rem;\n          padding-inline-start: 0.25rem;\n  -webkit-padding-end: 0.25rem;\n          padding-inline-end: 0.25rem;\n}\n\n::slotted(*) {\n  font-family: var(--ig-h5-font-family);\n  font-size: var(--ig-h5-font-size);\n  font-weight: var(--ig-h5-font-weight);\n  font-style: var(--ig-h5-font-style);\n  line-height: var(--ig-h5-line-height);\n  letter-spacing: var(--ig-h5-letter-spacing);\n  text-transform: var(--ig-h5-text-transform);\n  margin-top: var(--ig-h5-margin-top);\n  margin-bottom: var(--ig-h5-margin-bottom);\n  line-height: normal;\n  margin: 0;\n}`;\n"]}

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

@@ -1,3 +1,15 @@
 import { css } from 'lit';
-export const styles = css `::slotted(*){font-family:var(--igc-subtitle-2-font-family);font-weight:var(--igc-subtitle-2-font-weight);font-size:var(--igc-subtitle-2-font-size);font-style:var(--igc-subtitle-2-font-style);letter-spacing:var(--igc-subtitle-2-letter-spacing);text-transform:var(--igc-subtitle-2-text-transform);line-height:var(--igc-subtitle-2-line-height);margin-top:var(--igc-subtitle-2-margin-top);margin-bottom:var(--igc-subtitle-2-margin-bottom);line-height:normal;margin:0}`;
+export const styles = css `::slotted(*) {
+  font-family: var(--ig-subtitle-2-font-family);
+  font-size: var(--ig-subtitle-2-font-size);
+  font-weight: var(--ig-subtitle-2-font-weight);
+  font-style: var(--ig-subtitle-2-font-style);
+  line-height: var(--ig-subtitle-2-line-height);
+  letter-spacing: var(--ig-subtitle-2-letter-spacing);
+  text-transform: var(--ig-subtitle-2-text-transform);
+  margin-top: var(--ig-subtitle-2-margin-top);
+  margin-bottom: var(--ig-subtitle-2-margin-bottom);
+  line-height: normal;
+  margin: 0;
+}`;
 //# sourceMappingURL=navbar.fluent.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"navbar.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/navbar/themes/light/navbar.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,idAAid,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`::slotted(*){font-family:var(--igc-subtitle-2-font-family);font-weight:var(--igc-subtitle-2-font-weight);font-size:var(--igc-subtitle-2-font-size);font-style:var(--igc-subtitle-2-font-style);letter-spacing:var(--igc-subtitle-2-letter-spacing);text-transform:var(--igc-subtitle-2-text-transform);line-height:var(--igc-subtitle-2-line-height);margin-top:var(--igc-subtitle-2-margin-top);margin-bottom:var(--igc-subtitle-2-margin-bottom);line-height:normal;margin:0}`;\n"]}
+{"version":3,"file":"navbar.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/navbar/themes/light/navbar.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;EAYvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`::slotted(*) {\n  font-family: var(--ig-subtitle-2-font-family);\n  font-size: var(--ig-subtitle-2-font-size);\n  font-weight: var(--ig-subtitle-2-font-weight);\n  font-style: var(--ig-subtitle-2-font-style);\n  line-height: var(--ig-subtitle-2-line-height);\n  letter-spacing: var(--ig-subtitle-2-letter-spacing);\n  text-transform: var(--ig-subtitle-2-text-transform);\n  margin-top: var(--ig-subtitle-2-margin-top);\n  margin-bottom: var(--ig-subtitle-2-margin-bottom);\n  line-height: normal;\n  margin: 0;\n}`;\n"]}

package/components/navbar/themes/light/navbar.indigo.css.js

@@ -1,3 +1,6 @@
 import { css } from 'lit';
-export const styles = css `:host{-webkit-box-shadow:none;box-shadow:none}`;
+export const styles = css `:host {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}`;
 //# sourceMappingURL=navbar.indigo.css.js.map

package/components/navbar/themes/light/navbar.indigo.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"navbar.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/navbar/themes/light/navbar.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,gDAAgD,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host{-webkit-box-shadow:none;box-shadow:none}`;\n"]}
+{"version":3,"file":"navbar.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/navbar/themes/light/navbar.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;EAGvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  -webkit-box-shadow: none;\n          box-shadow: none;\n}`;\n"]}

package/components/progress/circular-progress.d.ts

@@ -1,5 +1,5 @@
 import { IgcProgressBaseComponent } from './base.js';
-import type IgcCircularGradientComponent from './circular-gradient';
+import IgcCircularGradientComponent from './circular-gradient.js';
 /**
  * A circular progress indicator used to express unspecified wait time or display
  * the length of a process.

package/components/progress/circular-progress.js

@@ -14,6 +14,9 @@ import { styles } from './themes/circular/circular.progress.base.css.js';
 import { styles as bootstrap } from './themes/circular/circular.progress.bootstrap.css.js';
 import { styles as fluent } from './themes/circular/circular.progress.fluent.css.js';
 import { themes } from '../../theming/theming-decorator.js';
+import { defineComponents } from '../common/definitions/defineComponents.js';
+import IgcCircularGradientComponent from './circular-gradient.js';
+defineComponents(IgcCircularGradientComponent);
 let IgcCircularProgressComponent = class IgcCircularProgressComponent extends IgcProgressBaseComponent {
     constructor() {
         super(...arguments);

package/components/progress/circular-progress.js.map

@@ -1 +1 @@
-{"version":3,"file":"circular-progress.js","sourceRoot":"","sources":["../../../src/components/progress/circular-progress.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AACzC,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAE,wBAAwB,EAAE,MAAM,WAAW,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,iDAAiD,CAAC;AACzE,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,sDAAsD,CAAC;AAC3F,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,mDAAmD,CAAC;AAErF,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AA2B5D,IAAqB,4BAA4B,GAAjD,MAAqB,4BAA6B,SAAQ,wBAAwB;IAAlF;;QAIY,eAAU,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;IAiEjD,CAAC;IA5DC,IAAc,MAAM;QAClB,OAAO;YACL,MAAM,EAAE,QAAQ,IAAI,CAAC,UAAU,GAAG;YAClC,cAAc,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC,QAAQ,EAAE;YAClE,YAAY,EAAE,IAAI,CAAC,iBAAiB,GAAG,IAAI;SAC5C,CAAC;IACJ,CAAC;IAED,IAAc,QAAQ;QACpB,OAAO;YACL,aAAa,EAAE,IAAI,CAAC,aAAa;SAClC,CAAC;IACJ,CAAC;IAEO,cAAc;QACpB,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAES,SAAS;QACjB,OAAO,GAAG,CAAA;4BACc,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC;uBAC/B,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC;;;+BAGb,IAAI,CAAC,UAAU;YAClC,IAAI,CACJ,IAAI,CAAC,gBAAgB,CAAC,MAAM,EAC5B,GAAG,EAAE,CACH,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,EAAgC,EAAE,EAAE;YAC7D,OAAO,GAAG,CAAA,gBAAgB,EAAE,CAAC,MAAM,eAAe,EAAE,CAAC,KAAK,iBAAiB,EAAE,CAAC,OAAO,IAAI,CAAC;QAC5F,CAAC,CAAC,EACJ,GAAG,EAAE,CAAC,GAAG,CAAA;;;WAGV,CACA;;;KAGN,CAAC;IACJ,CAAC;IAES,aAAa;QACrB,OAAO,IAAI,CAAA;;oBAEK,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC;;;wBAGtB,IAAI,CAAC,GAAG;wBACR,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK;;UAEvD,IAAI,CAAC,SAAS,EAAE;;0CAEgB,IAAI,CAAC,cAAc;QACrD,IAAI,CAAC,iBAAiB,EAAE;KAC3B,CAAC;IACJ,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAC,aAAa,EAAE,CAAC;IAC9B,CAAC;CACF,CAAA;AApEwB,oCAAO,GAAG,uBAAwB,CAAA;AAClC,mCAAM,GAAG,MAAO,CAAA;AAKvC;IADC,qBAAqB,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC;sEACqB;AAP9C,4BAA4B;IADhD,MAAM,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC;GACT,4BAA4B,CAqEhD;eArEoB,4BAA4B","sourcesContent":["import { html, nothing, svg } from 'lit';\nimport { queryAssignedElements } from 'lit/decorators.js';\nimport { when } from 'lit/directives/when.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { asPercent, partNameMap } from '../common/util.js';\nimport { IgcProgressBaseComponent } from './base.js';\nimport { styles } from './themes/circular/circular.progress.base.css.js';\nimport { styles as bootstrap } from './themes/circular/circular.progress.bootstrap.css.js';\nimport { styles as fluent } from './themes/circular/circular.progress.fluent.css.js';\nimport type IgcCircularGradientComponent from './circular-gradient';\nimport { themes } from '../../theming/theming-decorator.js';\n\n/**\n * A circular progress indicator used to express unspecified wait time or display\n * the length of a process.\n *\n * @element igc-circular-progress\n *\n * @slot - The text area container.\n * @slot gradient - Customize the progress bar in order to use a color gradient instead of a solid color. Accepts `igc-circular-gradient` elements.\n *\n * @csspart svg\n * @csspart gradient_start\n * @csspart gradient_end\n * @csspart track\n * @csspart fill\n * @csspart label\n * @csspart value\n * @csspart indeterminate\n * @csspart primary\n * @csspart danger\n * @csspart warning\n * @csspart info\n * @csspart success\n */\n\n@themes({ bootstrap, fluent })\nexport default class IgcCircularProgressComponent extends IgcProgressBaseComponent {\n  public static readonly tagName = 'igc-circular-progress';\n  public static override styles = styles;\n\n  protected gradientId = Date.now().toString(16);\n\n  @queryAssignedElements({ slot: 'gradient' })\n  protected gradientElements!: Array<IgcCircularGradientComponent>;\n\n  protected get stroke() {\n    return {\n      stroke: `url(#${this.gradientId})`,\n      '--percentage': (asPercent(this.value, this.max) / 100).toString(),\n      '--duration': this.animationDuration + 'ms',\n    };\n  }\n\n  protected get svgParts() {\n    return {\n      indeterminate: this.indeterminate,\n    };\n  }\n\n  private gradientChange() {\n    this.requestUpdate();\n  }\n\n  protected renderSvg() {\n    return svg`\n      <circle part=\"track ${partNameMap(this.svgParts)}\"/>\n      <circle style=\"${styleMap(this.stroke)}\" part=\"fill\"/>\n\n      <defs>\n          <linearGradient id=${this.gradientId} gradientTransform=\"rotate(90)\">\n          ${when(\n            this.gradientElements.length,\n            () =>\n              this.gradientElements.map((el: IgcCircularGradientComponent) => {\n                return svg`<stop offset=${el.offset} stop-color=${el.color} stop-opacity=${el.opacity}/>`;\n              }),\n            () => svg`\n              <stop offset=\"0%\" part=\"gradient_start\" />\n              <stop offset=\"100%\" part=\"gradient_end\" />\n          `\n          )}\n          </linearGradient>\n      </defs>\n    `;\n  }\n\n  protected renderWrapper() {\n    return html`\n      <svg\n        part=\"svg ${partNameMap(this.svgParts)}\"\n        role=\"progressbar\"\n        aria-valuemin=\"0\"\n        aria-valuemax=${this.max}\n        aria-valuenow=${this.indeterminate ? nothing : this.value}\n      >\n        ${this.renderSvg()}\n      </svg>\n      <slot name=\"gradient\" @slotchange=${this.gradientChange}></slot>\n      ${this.renderDefaultSlot()}\n    `;\n  }\n\n  protected override render() {\n    return this.renderWrapper();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-circular-progress': IgcCircularProgressComponent;\n  }\n}\n"]}
+{"version":3,"file":"circular-progress.js","sourceRoot":"","sources":["../../../src/components/progress/circular-progress.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AACzC,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAE,wBAAwB,EAAE,MAAM,WAAW,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,iDAAiD,CAAC;AACzE,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,sDAAsD,CAAC;AAC3F,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,mDAAmD,CAAC;AACrF,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAE5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,2CAA2C,CAAC;AAC7E,OAAO,4BAA4B,MAAM,wBAAwB,CAAC;AAElE,gBAAgB,CAAC,4BAA4B,CAAC,CAAC;AA2B/C,IAAqB,4BAA4B,GAAjD,MAAqB,4BAA6B,SAAQ,wBAAwB;IAAlF;;QAIY,eAAU,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;IAiEjD,CAAC;IA5DC,IAAc,MAAM;QAClB,OAAO;YACL,MAAM,EAAE,QAAQ,IAAI,CAAC,UAAU,GAAG;YAClC,cAAc,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC,QAAQ,EAAE;YAClE,YAAY,EAAE,IAAI,CAAC,iBAAiB,GAAG,IAAI;SAC5C,CAAC;IACJ,CAAC;IAED,IAAc,QAAQ;QACpB,OAAO;YACL,aAAa,EAAE,IAAI,CAAC,aAAa;SAClC,CAAC;IACJ,CAAC;IAEO,cAAc;QACpB,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAES,SAAS;QACjB,OAAO,GAAG,CAAA;4BACc,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC;uBAC/B,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC;;;+BAGb,IAAI,CAAC,UAAU;YAClC,IAAI,CACJ,IAAI,CAAC,gBAAgB,CAAC,MAAM,EAC5B,GAAG,EAAE,CACH,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,EAAgC,EAAE,EAAE;YAC7D,OAAO,GAAG,CAAA,gBAAgB,EAAE,CAAC,MAAM,eAAe,EAAE,CAAC,KAAK,iBAAiB,EAAE,CAAC,OAAO,IAAI,CAAC;QAC5F,CAAC,CAAC,EACJ,GAAG,EAAE,CAAC,GAAG,CAAA;;;WAGV,CACA;;;KAGN,CAAC;IACJ,CAAC;IAES,aAAa;QACrB,OAAO,IAAI,CAAA;;oBAEK,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC;;;wBAGtB,IAAI,CAAC,GAAG;wBACR,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK;;UAEvD,IAAI,CAAC,SAAS,EAAE;;0CAEgB,IAAI,CAAC,cAAc;QACrD,IAAI,CAAC,iBAAiB,EAAE;KAC3B,CAAC;IACJ,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAC,aAAa,EAAE,CAAC;IAC9B,CAAC;CACF,CAAA;AApEwB,oCAAO,GAAG,uBAAwB,CAAA;AAClC,mCAAM,GAAG,MAAO,CAAA;AAKvC;IADC,qBAAqB,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC;sEACqB;AAP9C,4BAA4B;IADhD,MAAM,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC;GACT,4BAA4B,CAqEhD;eArEoB,4BAA4B","sourcesContent":["import { html, nothing, svg } from 'lit';\nimport { queryAssignedElements } from 'lit/decorators.js';\nimport { when } from 'lit/directives/when.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { asPercent, partNameMap } from '../common/util.js';\nimport { IgcProgressBaseComponent } from './base.js';\nimport { styles } from './themes/circular/circular.progress.base.css.js';\nimport { styles as bootstrap } from './themes/circular/circular.progress.bootstrap.css.js';\nimport { styles as fluent } from './themes/circular/circular.progress.fluent.css.js';\nimport { themes } from '../../theming/theming-decorator.js';\n\nimport { defineComponents } from '../common/definitions/defineComponents.js';\nimport IgcCircularGradientComponent from './circular-gradient.js';\n\ndefineComponents(IgcCircularGradientComponent);\n\n/**\n * A circular progress indicator used to express unspecified wait time or display\n * the length of a process.\n *\n * @element igc-circular-progress\n *\n * @slot - The text area container.\n * @slot gradient - Customize the progress bar in order to use a color gradient instead of a solid color. Accepts `igc-circular-gradient` elements.\n *\n * @csspart svg\n * @csspart gradient_start\n * @csspart gradient_end\n * @csspart track\n * @csspart fill\n * @csspart label\n * @csspart value\n * @csspart indeterminate\n * @csspart primary\n * @csspart danger\n * @csspart warning\n * @csspart info\n * @csspart success\n */\n\n@themes({ bootstrap, fluent })\nexport default class IgcCircularProgressComponent extends IgcProgressBaseComponent {\n  public static readonly tagName = 'igc-circular-progress';\n  public static override styles = styles;\n\n  protected gradientId = Date.now().toString(16);\n\n  @queryAssignedElements({ slot: 'gradient' })\n  protected gradientElements!: Array<IgcCircularGradientComponent>;\n\n  protected get stroke() {\n    return {\n      stroke: `url(#${this.gradientId})`,\n      '--percentage': (asPercent(this.value, this.max) / 100).toString(),\n      '--duration': this.animationDuration + 'ms',\n    };\n  }\n\n  protected get svgParts() {\n    return {\n      indeterminate: this.indeterminate,\n    };\n  }\n\n  private gradientChange() {\n    this.requestUpdate();\n  }\n\n  protected renderSvg() {\n    return svg`\n      <circle part=\"track ${partNameMap(this.svgParts)}\"/>\n      <circle style=\"${styleMap(this.stroke)}\" part=\"fill\"/>\n\n      <defs>\n          <linearGradient id=${this.gradientId} gradientTransform=\"rotate(90)\">\n          ${when(\n            this.gradientElements.length,\n            () =>\n              this.gradientElements.map((el: IgcCircularGradientComponent) => {\n                return svg`<stop offset=${el.offset} stop-color=${el.color} stop-opacity=${el.opacity}/>`;\n              }),\n            () => svg`\n              <stop offset=\"0%\" part=\"gradient_start\" />\n              <stop offset=\"100%\" part=\"gradient_end\" />\n          `\n          )}\n          </linearGradient>\n      </defs>\n    `;\n  }\n\n  protected renderWrapper() {\n    return html`\n      <svg\n        part=\"svg ${partNameMap(this.svgParts)}\"\n        role=\"progressbar\"\n        aria-valuemin=\"0\"\n        aria-valuemax=${this.max}\n        aria-valuenow=${this.indeterminate ? nothing : this.value}\n      >\n        ${this.renderSvg()}\n      </svg>\n      <slot name=\"gradient\" @slotchange=${this.gradientChange}></slot>\n      ${this.renderDefaultSlot()}\n    `;\n  }\n\n  protected override render() {\n    return this.renderWrapper();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-circular-progress': IgcCircularProgressComponent;\n  }\n}\n"]}

package/components/progress/linear-progress.js

@@ -51,6 +51,7 @@ let IgcLinearProgressComponent = class IgcLinearProgressComponent extends IgcPro
           part="${partNameMap(this.wrapperParts)}"
           style="${styleMap(this.animInfo)}"
         ></div>
+        <div part="${partNameMap(this.wrapperParts)} secondary"></div>
       </div>
       ${this.renderDefaultSlot()}
     `;

package/components/progress/linear-progress.js.map

@@ -1 +1 @@
-{"version":3,"file":"linear-progress.js","sourceRoot":"","sources":["../../../src/components/progress/linear-progress.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAE,wBAAwB,EAAE,MAAM,WAAW,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,6CAA6C,CAAC;AACrE,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,kDAAkD,CAAC;AACvF,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,+CAA+C,CAAC;AACjF,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,+CAA+C,CAAC;AACjF,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAuB5D,IAAqB,0BAA0B,GAA/C,MAAqB,0BAA2B,SAAQ,wBAAwB;IAAhF;;QAMS,YAAO,GAAG,KAAK,CAAC;QAIhB,eAAU,GAME,WAAW,CAAC;IAuCjC,CAAC;IArCC,IAAc,YAAY;QACxB,OAAO;YACL,IAAI,EAAE,IAAI;YACV,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,aAAa,EAAE,IAAI,CAAC,aAAa;YACjC,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YACnC,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YACnC,MAAM,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;YACjC,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YACnC,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;SAC9B,CAAC;IACJ,CAAC;IAED,IAAc,QAAQ;QACpB,OAAO;YACL,KAAK,EAAE,SAAS,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG;YAC5C,YAAY,EAAE,IAAI,CAAC,iBAAiB,GAAG,IAAI;SAC5C,CAAC;IACJ,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;;;;wBAKS,IAAI,CAAC,GAAG;wBACR,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK;;;kBAG/C,WAAW,CAAC,IAAI,CAAC,YAAY,CAAC;mBAC7B,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC;;;QAGlC,IAAI,CAAC,iBAAiB,EAAE;KAC3B,CAAC;IACJ,CAAC;CACF,CAAA;AAtDwB,kCAAO,GAAG,qBAAsB,CAAA;AAChC,iCAAM,GAAG,MAAO,CAAA;AAIvC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2DACpB;AAIvB;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8DAOvB;AAhBZ,0BAA0B;IAD9C,MAAM,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;GACjB,0BAA0B,CAuD9C;eAvDoB,0BAA0B","sourcesContent":["import { html, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { asPercent, partNameMap } from '../common/util.js';\nimport { IgcProgressBaseComponent } from './base.js';\nimport { styles } from './themes/linear/linear.progress.base.css.js';\nimport { styles as bootstrap } from './themes/linear/linear.progress.bootstrap.css.js';\nimport { styles as fluent } from './themes/linear/linear.progress.fluent.css.js';\nimport { styles as indigo } from './themes/linear/linear.progress.indigo.css.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { themes } from '../../theming/theming-decorator.js';\n\n/**\n * A linear progress indicator used to express unspecified wait time or display\n * the length of a process.\n *\n * @element igc-linear-progress\n *\n * @slot - The text area container.\n *\n * @csspart track\n * @csspart fill\n * @csspart striped\n * @csspart label\n * @csspart value\n * @csspart indeterminate\n * @csspart primary\n * @csspart danger\n * @csspart warning\n * @csspart info\n * @csspart success\n */\n@themes({ bootstrap, indigo, fluent })\nexport default class IgcLinearProgressComponent extends IgcProgressBaseComponent {\n  public static readonly tagName = 'igc-linear-progress';\n  public static override styles = styles;\n\n  /** Sets the striped look of the control. */\n  @property({ type: Boolean, reflect: true })\n  public striped = false;\n\n  /** The position for the default label of the control. */\n  @property({ attribute: 'label-align', reflect: true })\n  public labelAlign:\n    | 'top-start'\n    | 'top'\n    | 'top-end'\n    | 'bottom-start'\n    | 'bottom'\n    | 'bottom-end' = 'top-start';\n\n  protected get wrapperParts() {\n    return {\n      fill: true,\n      striped: this.striped,\n      indeterminate: this.indeterminate,\n      primary: this.variant === 'primary',\n      success: this.variant === 'success',\n      danger: this.variant === 'danger',\n      warning: this.variant === 'warning',\n      info: this.variant === 'info',\n    };\n  }\n\n  protected get animInfo() {\n    return {\n      width: asPercent(this.value, this.max) + '%',\n      '--duration': this.animationDuration + 'ms',\n    };\n  }\n\n  protected override render() {\n    return html`\n      <div\n        part=\"track\"\n        role=\"progressbar\"\n        aria-valuemin=\"0\"\n        aria-valuemax=${this.max}\n        aria-valuenow=${this.indeterminate ? nothing : this.value}\n      >\n        <div\n          part=\"${partNameMap(this.wrapperParts)}\"\n          style=\"${styleMap(this.animInfo)}\"\n        ></div>\n      </div>\n      ${this.renderDefaultSlot()}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-linear-progress': IgcLinearProgressComponent;\n  }\n}\n"]}
+{"version":3,"file":"linear-progress.js","sourceRoot":"","sources":["../../../src/components/progress/linear-progress.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAE,wBAAwB,EAAE,MAAM,WAAW,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,6CAA6C,CAAC;AACrE,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,kDAAkD,CAAC;AACvF,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,+CAA+C,CAAC;AACjF,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,+CAA+C,CAAC;AACjF,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAuB5D,IAAqB,0BAA0B,GAA/C,MAAqB,0BAA2B,SAAQ,wBAAwB;IAAhF;;QAMS,YAAO,GAAG,KAAK,CAAC;QAIhB,eAAU,GAME,WAAW,CAAC;IAwCjC,CAAC;IAtCC,IAAc,YAAY;QACxB,OAAO;YACL,IAAI,EAAE,IAAI;YACV,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,aAAa,EAAE,IAAI,CAAC,aAAa;YACjC,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YACnC,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YACnC,MAAM,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;YACjC,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YACnC,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;SAC9B,CAAC;IACJ,CAAC;IAED,IAAc,QAAQ;QACpB,OAAO;YACL,KAAK,EAAE,SAAS,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG;YAC5C,YAAY,EAAE,IAAI,CAAC,iBAAiB,GAAG,IAAI;SAC5C,CAAC;IACJ,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;;;;wBAKS,IAAI,CAAC,GAAG;wBACR,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK;;;kBAG/C,WAAW,CAAC,IAAI,CAAC,YAAY,CAAC;mBAC7B,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC;;qBAErB,WAAW,CAAC,IAAI,CAAC,YAAY,CAAC;;QAE3C,IAAI,CAAC,iBAAiB,EAAE;KAC3B,CAAC;IACJ,CAAC;CACF,CAAA;AAvDwB,kCAAO,GAAG,qBAAsB,CAAA;AAChC,iCAAM,GAAG,MAAO,CAAA;AAIvC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2DACpB;AAIvB;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8DAOvB;AAhBZ,0BAA0B;IAD9C,MAAM,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;GACjB,0BAA0B,CAwD9C;eAxDoB,0BAA0B","sourcesContent":["import { html, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { asPercent, partNameMap } from '../common/util.js';\nimport { IgcProgressBaseComponent } from './base.js';\nimport { styles } from './themes/linear/linear.progress.base.css.js';\nimport { styles as bootstrap } from './themes/linear/linear.progress.bootstrap.css.js';\nimport { styles as fluent } from './themes/linear/linear.progress.fluent.css.js';\nimport { styles as indigo } from './themes/linear/linear.progress.indigo.css.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { themes } from '../../theming/theming-decorator.js';\n\n/**\n * A linear progress indicator used to express unspecified wait time or display\n * the length of a process.\n *\n * @element igc-linear-progress\n *\n * @slot - The text area container.\n *\n * @csspart track\n * @csspart fill\n * @csspart striped\n * @csspart label\n * @csspart value\n * @csspart indeterminate\n * @csspart primary\n * @csspart danger\n * @csspart warning\n * @csspart info\n * @csspart success\n */\n@themes({ bootstrap, indigo, fluent })\nexport default class IgcLinearProgressComponent extends IgcProgressBaseComponent {\n  public static readonly tagName = 'igc-linear-progress';\n  public static override styles = styles;\n\n  /** Sets the striped look of the control. */\n  @property({ type: Boolean, reflect: true })\n  public striped = false;\n\n  /** The position for the default label of the control. */\n  @property({ attribute: 'label-align', reflect: true })\n  public labelAlign:\n    | 'top-start'\n    | 'top'\n    | 'top-end'\n    | 'bottom-start'\n    | 'bottom'\n    | 'bottom-end' = 'top-start';\n\n  protected get wrapperParts() {\n    return {\n      fill: true,\n      striped: this.striped,\n      indeterminate: this.indeterminate,\n      primary: this.variant === 'primary',\n      success: this.variant === 'success',\n      danger: this.variant === 'danger',\n      warning: this.variant === 'warning',\n      info: this.variant === 'info',\n    };\n  }\n\n  protected get animInfo() {\n    return {\n      width: asPercent(this.value, this.max) + '%',\n      '--duration': this.animationDuration + 'ms',\n    };\n  }\n\n  protected override render() {\n    return html`\n      <div\n        part=\"track\"\n        role=\"progressbar\"\n        aria-valuemin=\"0\"\n        aria-valuemax=${this.max}\n        aria-valuenow=${this.indeterminate ? nothing : this.value}\n      >\n        <div\n          part=\"${partNameMap(this.wrapperParts)}\"\n          style=\"${styleMap(this.animInfo)}\"\n        ></div>\n        <div part=\"${partNameMap(this.wrapperParts)} secondary\"></div>\n      </div>\n      ${this.renderDefaultSlot()}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-linear-progress': IgcLinearProgressComponent;\n  }\n}\n"]}

package/components/progress/themes/circular/circular.progress.base.css.js

@@ -1,3 +1,458 @@
 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}@-webkit-keyframes indeterminate-bar{0%{-webkit-transform:scaleX(0) translateX(-100%);transform:scaleX(0) translateX(-100%);-webkit-transform-origin:left;transform-origin:left}50%{-webkit-transform:scaleX(1) translateX(50%);transform:scaleX(1) translateX(50%);-webkit-transform-origin:right;transform-origin:right}100%{-webkit-transform:scaleX(0) translateX(200%);transform:scaleX(0) translateX(200%);-webkit-transform-origin:right;transform-origin:right}}@keyframes indeterminate-bar{0%{-webkit-transform:scaleX(0) translateX(-100%);transform:scaleX(0) translateX(-100%);-webkit-transform-origin:left;transform-origin:left}50%{-webkit-transform:scaleX(1) translateX(50%);transform:scaleX(1) translateX(50%);-webkit-transform-origin:right;transform-origin:right}100%{-webkit-transform:scaleX(0) translateX(200%);transform:scaleX(0) translateX(200%);-webkit-transform-origin:right;transform-origin:right}}@-webkit-keyframes indeterminate-bar-fluent{from{-webkit-transform:translateX(-100%);transform:translateX(-100%);-webkit-transform-origin:left;transform-origin:left}to{-webkit-transform:translateX(310%);transform:translateX(310%);-webkit-transform-origin:right;transform-origin:right}}@keyframes indeterminate-bar-fluent{from{-webkit-transform:translateX(-100%);transform:translateX(-100%);-webkit-transform-origin:left;transform-origin:left}to{-webkit-transform:translateX(310%);transform:translateX(310%);-webkit-transform-origin:right;transform-origin:right}}@-webkit-keyframes indeterminate-bar-fluent-rtl{from{-webkit-transform:translateX(-310%);transform:translateX(-310%);-webkit-transform-origin:right;transform-origin:right}to{-webkit-transform:translateX(100%);transform:translateX(100%);-webkit-transform-origin:left;transform-origin:left}}@keyframes indeterminate-bar-fluent-rtl{from{-webkit-transform:translateX(-310%);transform:translateX(-310%);-webkit-transform-origin:right;transform-origin:right}to{-webkit-transform:translateX(100%);transform:translateX(100%);-webkit-transform-origin:left;transform-origin:left}}@-webkit-keyframes indeterminate-accordion{from{stroke-dashoffset:calc(calc(calc(var(--diameter) / 2 - var(--stroke-thickness) * 0.5) * 2 * 3.1416) * 2);stroke-dasharray:calc(calc(calc(var(--diameter) / 2 - var(--stroke-thickness) * 0.5) * 2 * 3.1416) * 9 / 10)}to{stroke-dashoffset:calc(calc(calc(var(--diameter) / 2 - var(--stroke-thickness) * 0.5) * 2 * 3.1416) * 2 / 5)}}@keyframes indeterminate-accordion{from{stroke-dashoffset:calc(calc(calc(var(--diameter) / 2 - var(--stroke-thickness) * 0.5) * 2 * 3.1416) * 2);stroke-dasharray:calc(calc(calc(var(--diameter) / 2 - var(--stroke-thickness) * 0.5) * 2 * 3.1416) * 9 / 10)}to{stroke-dashoffset:calc(calc(calc(var(--diameter) / 2 - var(--stroke-thickness) * 0.5) * 2 * 3.1416) * 2 / 5)}}@-webkit-keyframes indeterminate-accordion-rtl{from{stroke-dashoffset:calc(calc(calc(var(--diameter) / 2 - var(--stroke-thickness) * 0.5) * 2 * 3.1416) * -2);stroke-dasharray:calc(calc(calc(var(--diameter) / 2 - var(--stroke-thickness) * 0.5) * 2 * 3.1416) * 9 / 10)}to{stroke-dashoffset:calc(calc(calc(var(--diameter) / 2 - var(--stroke-thickness) * 0.5) * 2 * 3.1416) * -2 / 5)}}@keyframes indeterminate-accordion-rtl{from{stroke-dashoffset:calc(calc(calc(var(--diameter) / 2 - var(--stroke-thickness) * 0.5) * 2 * 3.1416) * -2);stroke-dasharray:calc(calc(calc(var(--diameter) / 2 - var(--stroke-thickness) * 0.5) * 2 * 3.1416) * 9 / 10)}to{stroke-dashoffset:calc(calc(calc(var(--diameter) / 2 - var(--stroke-thickness) * 0.5) * 2 * 3.1416) * -2 / 5)}}@-webkit-keyframes rotate-center{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate-center{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}:host{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;font-family:var(--igc-font-family);color:hsla(var(--igc-gray-900), var(--igc-gray-a))}[part~=label]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:inherit;font-weight:600}:host{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;position:relative;--stroke-thickness: 0.125rem;--diameter: 1.875rem}[part~=label]{fill:hsla(var(--igc-gray-900), var(--igc-gray-a));position:absolute;-webkit-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);top:50%;left:50%}[part~=label],[part~=value]{font-size:calc(var(--diameter)/3 - var(--stroke-thickness));line-height:normal}[part="svg indeterminate"]{-webkit-transform-origin:50% 50%;-ms-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-animation:3s linear 0s infinite normal none running rotate-center;animation:3s linear 0s infinite normal none running rotate-center}[part="svg indeterminate"] [part~=fill]{stroke-dashoffset:calc(calc(calc(var(--diameter) / 2 - var(--stroke-thickness) * 0.5) * 2 * 3.1416) * 2);-webkit-animation:indeterminate-accordion 1.5s cubic-bezier(0, 0.085, 0.68, 0.53) normal infinite;animation:indeterminate-accordion 1.5s cubic-bezier(0, 0.085, 0.68, 0.53) normal infinite}[part~=svg]{width:calc(var(--diameter) + var(--stroke-thickness));height:calc(var(--diameter) + var(--stroke-thickness))}[part~=track]{stroke:hsla(var(--igc-gray-300), var(--igc-gray-a))}[part~=fill]{stroke-dasharray:calc(calc(var(--diameter) / 2 - var(--stroke-thickness) * 0.5) * 2 * 3.1416) calc(calc(var(--diameter) / 2 - var(--stroke-thickness) * 0.5) * 2 * 3.1416);stroke-dashoffset:calc(calc(calc(var(--diameter) / 2 - var(--stroke-thickness) * 0.5) * 2 * 3.1416) - var(--percentage) * calc(calc(var(--diameter) / 2 - var(--stroke-thickness) * 0.5) * 2 * 3.1416));-webkit-transition:stroke-dashoffset var(--duration) linear;-o-transition:stroke-dashoffset var(--duration) linear;transition:stroke-dashoffset var(--duration) linear;-webkit-transform-origin:50% 50%;-ms-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);--percentage: 0;--duration: 500ms}[part~=track],[part~=fill]{fill:rgba(0,0,0,0);stroke-width:var(--stroke-thickness);cx:calc(calc(var(--diameter) + var(--stroke-thickness)) / 2);cy:calc(calc(var(--diameter) + var(--stroke-thickness)) / 2);r:calc(var(--diameter)/2 - var(--stroke-thickness)*.5)}[part~=gradient_start],[part~=gradient_end]{stop-color:hsla(var(--igc-primary-500), var(--igc-primary-a))}:host([variant=danger]) [part~=gradient_start],:host([variant=danger]) [part~=gradient_end]{stop-color:hsla(var(--igc-error-500), var(--igc-error-a))}:host([variant=warning]) [part~=gradient_start],:host([variant=warning]) [part~=gradient_end]{stop-color:hsla(var(--igc-warn-500), var(--igc-warn-a))}:host([variant=info]) [part~=gradient_start],:host([variant=info]) [part~=gradient_end]{stop-color:hsla(var(--igc-info-500), var(--igc-info-a))}:host([variant=success]) [part~=gradient_start],:host([variant=success]) [part~=gradient_end]{stop-color:hsla(var(--igc-success-500), var(--igc-success-a))}:host([dir=rtl]) [part="svg indeterminate"] [part~=fill]{-webkit-animation-name:indeterminate-accordion-rtl;animation-name:indeterminate-accordion-rtl}:host([dir=rtl]) [part~=indeterminate]{animation-direction:reverse}:host([dir=rtl]) [part~=indeterminate] [part~=track]{animation-direction:reverse}:host([dir=rtl]) [part~=fill]{stroke-dashoffset:calc(calc(calc(var(--diameter) / 2 - var(--stroke-thickness) * 0.5) * 2 * 3.1416) + var(--percentage) * calc(calc(var(--diameter) / 2 - var(--stroke-thickness) * 0.5) * 2 * 3.1416))}`;
+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;
+}
+
+@-webkit-keyframes indeterminate-primary {
+  0% {
+    -webkit-transform: translateX(0);
+            transform: translateX(0);
+  }
+  20% {
+    -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.7017, 0.4958);
+            animation-timing-function: cubic-bezier(0.5, 0, 0.7017, 0.4958);
+    -webkit-transform: translateX(0);
+            transform: translateX(0);
+  }
+  59.15% {
+    -webkit-animation-timing-function: cubic-bezier(0.3024, 0.3813, 0.55, 0.9563);
+            animation-timing-function: cubic-bezier(0.3024, 0.3813, 0.55, 0.9563);
+    -webkit-transform: translateX(83.671%);
+            transform: translateX(83.671%);
+  }
+  100% {
+    -webkit-transform: translateX(200.611%);
+            transform: translateX(200.611%);
+  }
+}
+
+@keyframes indeterminate-primary {
+  0% {
+    -webkit-transform: translateX(0);
+            transform: translateX(0);
+  }
+  20% {
+    -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.7017, 0.4958);
+            animation-timing-function: cubic-bezier(0.5, 0, 0.7017, 0.4958);
+    -webkit-transform: translateX(0);
+            transform: translateX(0);
+  }
+  59.15% {
+    -webkit-animation-timing-function: cubic-bezier(0.3024, 0.3813, 0.55, 0.9563);
+            animation-timing-function: cubic-bezier(0.3024, 0.3813, 0.55, 0.9563);
+    -webkit-transform: translateX(83.671%);
+            transform: translateX(83.671%);
+  }
+  100% {
+    -webkit-transform: translateX(200.611%);
+            transform: translateX(200.611%);
+  }
+}
+@-webkit-keyframes indeterminate-primary-scale {
+  0% {
+    -webkit-transform: scaleX(0.08);
+            transform: scaleX(0.08);
+  }
+  36.65% {
+    -webkit-animation-timing-function: cubic-bezier(0.3347, 0.124, 0.7858, 1);
+            animation-timing-function: cubic-bezier(0.3347, 0.124, 0.7858, 1);
+    -webkit-transform: scaleX(0.08);
+            transform: scaleX(0.08);
+  }
+  69.15% {
+    -webkit-animation-timing-function: cubic-bezier(0.3347, 0.124, 0.7858, 1);
+            animation-timing-function: cubic-bezier(0.3347, 0.124, 0.7858, 1);
+    -webkit-transform: scaleX(0.6614);
+            transform: scaleX(0.6614);
+  }
+  100% {
+    -webkit-transform: scaleX(0.08);
+            transform: scaleX(0.08);
+  }
+}
+@keyframes indeterminate-primary-scale {
+  0% {
+    -webkit-transform: scaleX(0.08);
+            transform: scaleX(0.08);
+  }
+  36.65% {
+    -webkit-animation-timing-function: cubic-bezier(0.3347, 0.124, 0.7858, 1);
+            animation-timing-function: cubic-bezier(0.3347, 0.124, 0.7858, 1);
+    -webkit-transform: scaleX(0.08);
+            transform: scaleX(0.08);
+  }
+  69.15% {
+    -webkit-animation-timing-function: cubic-bezier(0.3347, 0.124, 0.7858, 1);
+            animation-timing-function: cubic-bezier(0.3347, 0.124, 0.7858, 1);
+    -webkit-transform: scaleX(0.6614);
+            transform: scaleX(0.6614);
+  }
+  100% {
+    -webkit-transform: scaleX(0.08);
+            transform: scaleX(0.08);
+  }
+}
+@-webkit-keyframes indeterminate-secondary {
+  0% {
+    -webkit-animation-timing-function: cubic-bezier(0.15, 0, 0.515, 0.4096);
+            animation-timing-function: cubic-bezier(0.15, 0, 0.515, 0.4096);
+    -webkit-transform: translateX(0);
+            transform: translateX(0);
+  }
+  25% {
+    -webkit-animation-timing-function: cubic-bezier(0.31, 0.284, 0.8, 0.7337);
+            animation-timing-function: cubic-bezier(0.31, 0.284, 0.8, 0.7337);
+    -webkit-transform: translateX(37.6519%);
+            transform: translateX(37.6519%);
+  }
+  48.35% {
+    -webkit-animation-timing-function: cubic-bezier(0.4, 0.627, 0.6, 0.902);
+            animation-timing-function: cubic-bezier(0.4, 0.627, 0.6, 0.902);
+    -webkit-transform: translateX(84.3861%);
+            transform: translateX(84.3861%);
+  }
+  100% {
+    -webkit-transform: translateX(160.2777%);
+            transform: translateX(160.2777%);
+  }
+}
+@keyframes indeterminate-secondary {
+  0% {
+    -webkit-animation-timing-function: cubic-bezier(0.15, 0, 0.515, 0.4096);
+            animation-timing-function: cubic-bezier(0.15, 0, 0.515, 0.4096);
+    -webkit-transform: translateX(0);
+            transform: translateX(0);
+  }
+  25% {
+    -webkit-animation-timing-function: cubic-bezier(0.31, 0.284, 0.8, 0.7337);
+            animation-timing-function: cubic-bezier(0.31, 0.284, 0.8, 0.7337);
+    -webkit-transform: translateX(37.6519%);
+            transform: translateX(37.6519%);
+  }
+  48.35% {
+    -webkit-animation-timing-function: cubic-bezier(0.4, 0.627, 0.6, 0.902);
+            animation-timing-function: cubic-bezier(0.4, 0.627, 0.6, 0.902);
+    -webkit-transform: translateX(84.3861%);
+            transform: translateX(84.3861%);
+  }
+  100% {
+    -webkit-transform: translateX(160.2777%);
+            transform: translateX(160.2777%);
+  }
+}
+@-webkit-keyframes indeterminate-secondary-scale {
+  0% {
+    -webkit-animation-timing-function: cubic-bezier(0.15, 0, 0.515, 0.4096);
+            animation-timing-function: cubic-bezier(0.15, 0, 0.515, 0.4096);
+    -webkit-transform: scaleX(0.08);
+            transform: scaleX(0.08);
+  }
+  19.15% {
+    -webkit-animation-timing-function: cubic-bezier(0.31, 0.284, 0.8, 0.7337);
+            animation-timing-function: cubic-bezier(0.31, 0.284, 0.8, 0.7337);
+    -webkit-transform: scaleX(0.4571);
+            transform: scaleX(0.4571);
+  }
+  44.15% {
+    -webkit-animation-timing-function: cubic-bezier(0.4, 0.627, 0.6, 0.902);
+            animation-timing-function: cubic-bezier(0.4, 0.627, 0.6, 0.902);
+    -webkit-transform: scaleX(0.727);
+            transform: scaleX(0.727);
+  }
+  100% {
+    -webkit-transform: scaleX(0.08);
+            transform: scaleX(0.08);
+  }
+}
+@keyframes indeterminate-secondary-scale {
+  0% {
+    -webkit-animation-timing-function: cubic-bezier(0.15, 0, 0.515, 0.4096);
+            animation-timing-function: cubic-bezier(0.15, 0, 0.515, 0.4096);
+    -webkit-transform: scaleX(0.08);
+            transform: scaleX(0.08);
+  }
+  19.15% {
+    -webkit-animation-timing-function: cubic-bezier(0.31, 0.284, 0.8, 0.7337);
+            animation-timing-function: cubic-bezier(0.31, 0.284, 0.8, 0.7337);
+    -webkit-transform: scaleX(0.4571);
+            transform: scaleX(0.4571);
+  }
+  44.15% {
+    -webkit-animation-timing-function: cubic-bezier(0.4, 0.627, 0.6, 0.902);
+            animation-timing-function: cubic-bezier(0.4, 0.627, 0.6, 0.902);
+    -webkit-transform: scaleX(0.727);
+            transform: scaleX(0.727);
+  }
+  100% {
+    -webkit-transform: scaleX(0.08);
+            transform: scaleX(0.08);
+  }
+}
+@-webkit-keyframes indeterminate-bar-fluent {
+  from {
+    -webkit-transform: translateX(-100%);
+            transform: translateX(-100%);
+    -webkit-transform-origin: left;
+            transform-origin: left;
+  }
+  to {
+    -webkit-transform: translateX(310%);
+            transform: translateX(310%);
+    -webkit-transform-origin: right;
+            transform-origin: right;
+  }
+}
+@keyframes indeterminate-bar-fluent {
+  from {
+    -webkit-transform: translateX(-100%);
+            transform: translateX(-100%);
+    -webkit-transform-origin: left;
+            transform-origin: left;
+  }
+  to {
+    -webkit-transform: translateX(310%);
+            transform: translateX(310%);
+    -webkit-transform-origin: right;
+            transform-origin: right;
+  }
+}
+@-webkit-keyframes indeterminate-bar-fluent-rtl {
+  from {
+    -webkit-transform: translateX(-310%);
+            transform: translateX(-310%);
+    -webkit-transform-origin: right;
+            transform-origin: right;
+  }
+  to {
+    -webkit-transform: translateX(100%);
+            transform: translateX(100%);
+    -webkit-transform-origin: left;
+            transform-origin: left;
+  }
+}
+@keyframes indeterminate-bar-fluent-rtl {
+  from {
+    -webkit-transform: translateX(-310%);
+            transform: translateX(-310%);
+    -webkit-transform-origin: right;
+            transform-origin: right;
+  }
+  to {
+    -webkit-transform: translateX(100%);
+            transform: translateX(100%);
+    -webkit-transform-origin: left;
+            transform-origin: left;
+  }
+}
+@-webkit-keyframes indeterminate-accordion {
+  from {
+    stroke-dashoffset: calc(calc(calc(var(--diameter) / 2 - var(--stroke-thickness) * 0.5) * 2 * 3.1416) * 2);
+    stroke-dasharray: calc(calc(calc(var(--diameter) / 2 - var(--stroke-thickness) * 0.5) * 2 * 3.1416) * 9 / 10);
+  }
+  to {
+    stroke-dashoffset: calc(calc(calc(var(--diameter) / 2 - var(--stroke-thickness) * 0.5) * 2 * 3.1416) * 2 / 5);
+  }
+}
+@keyframes indeterminate-accordion {
+  from {
+    stroke-dashoffset: calc(calc(calc(var(--diameter) / 2 - var(--stroke-thickness) * 0.5) * 2 * 3.1416) * 2);
+    stroke-dasharray: calc(calc(calc(var(--diameter) / 2 - var(--stroke-thickness) * 0.5) * 2 * 3.1416) * 9 / 10);
+  }
+  to {
+    stroke-dashoffset: calc(calc(calc(var(--diameter) / 2 - var(--stroke-thickness) * 0.5) * 2 * 3.1416) * 2 / 5);
+  }
+}
+@-webkit-keyframes indeterminate-accordion-rtl {
+  from {
+    stroke-dashoffset: calc(calc(calc(var(--diameter) / 2 - var(--stroke-thickness) * 0.5) * 2 * 3.1416) * -2);
+    stroke-dasharray: calc(calc(calc(var(--diameter) / 2 - var(--stroke-thickness) * 0.5) * 2 * 3.1416) * 9 / 10);
+  }
+  to {
+    stroke-dashoffset: calc(calc(calc(var(--diameter) / 2 - var(--stroke-thickness) * 0.5) * 2 * 3.1416) * -2 / 5);
+  }
+}
+@keyframes indeterminate-accordion-rtl {
+  from {
+    stroke-dashoffset: calc(calc(calc(var(--diameter) / 2 - var(--stroke-thickness) * 0.5) * 2 * 3.1416) * -2);
+    stroke-dasharray: calc(calc(calc(var(--diameter) / 2 - var(--stroke-thickness) * 0.5) * 2 * 3.1416) * 9 / 10);
+  }
+  to {
+    stroke-dashoffset: calc(calc(calc(var(--diameter) / 2 - var(--stroke-thickness) * 0.5) * 2 * 3.1416) * -2 / 5);
+  }
+}
+@-webkit-keyframes rotate-center {
+  0% {
+    -webkit-transform: rotate(0);
+            transform: rotate(0);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+  }
+}
+@keyframes rotate-center {
+  0% {
+    -webkit-transform: rotate(0);
+            transform: rotate(0);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+  }
+}
+:host {
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  font-family: var(--ig-font-family);
+  color: hsla(var(--ig-gray-900), var(--ig-gray-a));
+}
+
+[part~=label] {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  color: inherit;
+  font-weight: 600;
+}
+
+:host {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  position: relative;
+  --stroke-thickness: 0.125rem;
+  --diameter: 1.875rem;
+}
+
+[part~=label] {
+  fill: hsla(var(--ig-gray-900), var(--ig-gray-a));
+  position: absolute;
+  -webkit-transform: translate(-50%, -50%);
+      -ms-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+  top: 50%;
+  left: 50%;
+}
+
+[part~=label],
+[part~=value] {
+  font-size: calc(var(--diameter) / 3 - var(--stroke-thickness));
+  line-height: normal;
+}
+
+[part="svg indeterminate"] {
+  -webkit-transform-origin: 50% 50%;
+      -ms-transform-origin: 50% 50%;
+          transform-origin: 50% 50%;
+  -webkit-animation: 3s linear 0s infinite normal none running rotate-center;
+          animation: 3s linear 0s infinite normal none running rotate-center;
+}
+
+[part="svg indeterminate"] [part~=fill] {
+  stroke-dashoffset: calc(calc(calc(var(--diameter) / 2 - var(--stroke-thickness) * 0.5) * 2 * 3.1416) * 2);
+  -webkit-animation: indeterminate-accordion 1.5s cubic-bezier(0, 0.085, 0.68, 0.53) normal infinite;
+          animation: indeterminate-accordion 1.5s cubic-bezier(0, 0.085, 0.68, 0.53) normal infinite;
+}
+
+[part~=svg] {
+  width: calc(var(--diameter) + var(--stroke-thickness));
+  height: calc(var(--diameter) + var(--stroke-thickness));
+}
+
+[part~=track] {
+  stroke: hsla(var(--ig-gray-300), var(--ig-gray-a));
+}
+
+[part~=fill] {
+  stroke-dasharray: calc(calc(var(--diameter) / 2 - var(--stroke-thickness) * 0.5) * 2 * 3.1416) calc(calc(var(--diameter) / 2 - var(--stroke-thickness) * 0.5) * 2 * 3.1416);
+  stroke-dashoffset: calc(calc(calc(var(--diameter) / 2 - var(--stroke-thickness) * 0.5) * 2 * 3.1416) - var(--percentage) * calc(calc(var(--diameter) / 2 - var(--stroke-thickness) * 0.5) * 2 * 3.1416));
+  -webkit-transition: stroke-dashoffset var(--duration) linear;
+  -o-transition: stroke-dashoffset var(--duration) linear;
+  transition: stroke-dashoffset var(--duration) linear;
+  -webkit-transform-origin: 50% 50%;
+      -ms-transform-origin: 50% 50%;
+          transform-origin: 50% 50%;
+  -webkit-transform: rotate(-90deg);
+      -ms-transform: rotate(-90deg);
+          transform: rotate(-90deg);
+  --percentage: 0;
+  --duration: 500ms;
+}
+
+[part~=track],
+[part~=fill] {
+  fill: transparent;
+  stroke-width: var(--stroke-thickness);
+  cx: calc(calc(var(--diameter) + var(--stroke-thickness)) / 2);
+  cy: calc(calc(var(--diameter) + var(--stroke-thickness)) / 2);
+  r: calc(var(--diameter) / 2 - var(--stroke-thickness) * 0.5);
+}
+
+[part~=gradient_start],
+[part~=gradient_end] {
+  stop-color: hsla(var(--ig-primary-500), var(--ig-primary-a));
+}
+
+:host([variant=danger]) [part~=gradient_start],
+:host([variant=danger]) [part~=gradient_end] {
+  stop-color: hsla(var(--ig-error-500), var(--ig-error-a));
+}
+
+:host([variant=warning]) [part~=gradient_start],
+:host([variant=warning]) [part~=gradient_end] {
+  stop-color: hsla(var(--ig-warn-500), var(--ig-warn-a));
+}
+
+:host([variant=info]) [part~=gradient_start],
+:host([variant=info]) [part~=gradient_end] {
+  stop-color: hsla(var(--ig-info-500), var(--ig-info-a));
+}
+
+:host([variant=success]) [part~=gradient_start],
+:host([variant=success]) [part~=gradient_end] {
+  stop-color: hsla(var(--ig-success-500), var(--ig-success-a));
+}
+
+:host([dir=rtl]) [part="svg indeterminate"] [part~=fill] {
+  -webkit-animation-name: indeterminate-accordion-rtl;
+          animation-name: indeterminate-accordion-rtl;
+}
+:host([dir=rtl]) [part~=indeterminate] {
+  animation-direction: reverse;
+}
+:host([dir=rtl]) [part~=indeterminate] [part~=track] {
+  animation-direction: reverse;
+}
+:host([dir=rtl]) [part~=fill] {
+  stroke-dashoffset: calc(calc(calc(var(--diameter) / 2 - var(--stroke-thickness) * 0.5) * 2 * 3.1416) + var(--percentage) * calc(calc(var(--diameter) / 2 - var(--stroke-thickness) * 0.5) * 2 * 3.1416));
+}`;
 //# sourceMappingURL=circular.progress.base.css.js.map