igniteui-webcomponents 4.3.1 → 4.5.0-beta.1

package/CHANGELOG.md

@@ -4,6 +4,64 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [Unreleased]
+### Deprecated
+  - The `size` property and attribute have been deprecated for all components. Use the `--ig-size` CSS custom property instead.
+    The following example sets the size of the avatar component to small:
+    ```css
+      igc-avatar {
+        --ig-size: var(--ig-size-small);
+      }
+    ```
+
+## [4.4.0] - 2023-08-30
+### Added
+- The following components are now Form Associated Custom Elements. They are automatically associated with a parent `<form>`
+  and behave like a browser-provided control:
+  - Button & Icon button
+  - Checkbox
+  - Combo
+  - DateTime input
+  - Input
+  - Masked input
+  - Radio
+  - Rating
+  - Single slider
+  - Select
+  - Switch
+- Stepper now supports animations [#861](https://github.com/IgniteUI/igniteui-webcomponents/issues/861)
+
+### Changed
+- Rating fluent theme colors [#481](https://github.com/IgniteUI/igniteui-webcomponents/issues/481)
+- Stepper indicator styles and color schemas [#766](https://github.com/IgniteUI/igniteui-webcomponents/issues/766) [#868](https://github.com/IgniteUI/igniteui-webcomponents/issues/868)
+
+### Deprecated
+- IgcForm component is deprecated
+- Input component:
+  - `minlength` property is deprecated and will be removed in the next major version. Use `minLength` instead.
+  - `maxlength` property is deprecated and will be removed in the next major version. Use `maxLength` instead.
+  - `readonly` property is deprecated and will be removed in the next major version. Use `readOnly` instead.
+- Mask input component:
+  - `readonly` property is deprecated and will be removed in the next major version. Use `readOnly` instead.
+- DateTime input component:
+  - `readonly` property is deprecated and will be removed in the next major version. Use `readOnly` instead.
+  - `minValue` property is deprecated and will be removed in the next major version. Use `min` instead.
+  - `maxValue` property is deprecated and will be removed in the next major version. Use `max` instead.
+- Rating component:
+  - `readonly` property is deprecated and will be removed in the next major version. Use `readOnly` instead.
+
+### Removed
+- Removed our own `dir` attribute which shadowed the default one. This is a **non-breaking change**.
+- Slider - `ariaLabel` shadowed property. This is a **non-breaking change**.
+- Checkbox - `ariaLabelledBy` shadowed attribute. This is a **non-breaking change**.
+- Switch - `ariaLabelledBy` shadowed attribute. This is a **non-breaking change**.
+- Radio - `ariaLabelledBy` shadowed attribute. This is a **non-breaking change**.
+
+### Fixed
+- Input - outlined variant styling issues [#875](https://github.com/IgniteUI/igniteui-webcomponents/issues/875) and indigo theme issues [#879](https://github.com/IgniteUI/igniteui-webcomponents/issues/879)
+- Select - outlined variant styling issues [#880](https://github.com/IgniteUI/igniteui-webcomponents/issues/880)
+- DateTime Input - `spinUp/spinDown` calls moving the caret when the input is focused [#859](https://github.com/IgniteUI/igniteui-webcomponents/issues/859)
+
 ## [4.3.1] - 2023-08-02
 ### Added
 - Tree - component animations [#846](https://github.com/IgniteUI/igniteui-webcomponents/issues/846)
@@ -290,6 +348,7 @@ Initial release of Ignite UI Web Components
 - Ripple component
 - Switch component
 
+[4.4.0]: https://github.com/IgniteUI/igniteui-webcomponents/compare/4.3.1...4.4.0
 [4.3.1]: https://github.com/IgniteUI/igniteui-webcomponents/compare/4.3.0...4.3.1
 [4.3.0]: https://github.com/IgniteUI/igniteui-webcomponents/compare/4.2.3...4.3.0
 [4.2.3]: https://github.com/IgniteUI/igniteui-webcomponents/compare/4.2.2...4.2.3

package/animations/presets/fade/index.d.ts

@@ -1,3 +1,3 @@
-declare const fadeIn: import("../../types.js").AnimationReferenceMetadata;
-declare const fadeOut: import("../../types.js").AnimationReferenceMetadata;
+declare const fadeIn: (options?: KeyframeAnimationOptions) => import("../../types.js").AnimationReferenceMetadata;
+declare const fadeOut: (options?: KeyframeAnimationOptions) => import("../../types.js").AnimationReferenceMetadata;
 export { fadeIn, fadeOut };

package/animations/presets/fade/index.js

@@ -1,12 +1,10 @@
 import { EaseOut } from '../../easings.js';
 import { animation } from '../../types.js';
-const fadeIn = animation([{ opacity: 0 }, { opacity: 1 }], {
+const baseOptions = {
     duration: 350,
     easing: EaseOut.Sine,
-});
-const fadeOut = animation([{ opacity: 1 }, { opacity: 0 }], {
-    duration: 350,
-    easing: EaseOut.Sine,
-});
+};
+const fadeIn = (options = baseOptions) => animation([{ opacity: 0 }, { opacity: 1 }], options);
+const fadeOut = (options = baseOptions) => animation([{ opacity: 1 }, { opacity: 0 }], options);
 export { fadeIn, fadeOut };
 //# sourceMappingURL=index.js.map

package/animations/presets/fade/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/animations/presets/fade/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,MAAM,MAAM,GAAG,SAAS,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE;IACzD,QAAQ,EAAE,GAAG;IACb,MAAM,EAAE,OAAO,CAAC,IAAI;CACrB,CAAC,CAAC;AAEH,MAAM,OAAO,GAAG,SAAS,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE;IAC1D,QAAQ,EAAE,GAAG;IACb,MAAM,EAAE,OAAO,CAAC,IAAI;CACrB,CAAC,CAAC;AAEH,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC","sourcesContent":["import { EaseOut } from '../../easings.js';\nimport { animation } from '../../types.js';\n\nconst fadeIn = animation([{ opacity: 0 }, { opacity: 1 }], {\n  duration: 350,\n  easing: EaseOut.Sine,\n});\n\nconst fadeOut = animation([{ opacity: 1 }, { opacity: 0 }], {\n  duration: 350,\n  easing: EaseOut.Sine,\n});\n\nexport { fadeIn, fadeOut };\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/animations/presets/fade/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,MAAM,WAAW,GAA6B;IAC5C,QAAQ,EAAE,GAAG;IACb,MAAM,EAAE,OAAO,CAAC,IAAI;CACrB,CAAC;AAEF,MAAM,MAAM,GAAG,CAAC,OAAO,GAAG,WAAW,EAAE,EAAE,CACvC,SAAS,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,OAAO,CAAC,CAAC;AAEvD,MAAM,OAAO,GAAG,CAAC,OAAO,GAAG,WAAW,EAAE,EAAE,CACxC,SAAS,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,OAAO,CAAC,CAAC;AAEvD,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC","sourcesContent":["import { EaseOut } from '../../easings.js';\nimport { animation } from '../../types.js';\n\nconst baseOptions: KeyframeAnimationOptions = {\n  duration: 350,\n  easing: EaseOut.Sine,\n};\n\nconst fadeIn = (options = baseOptions) =>\n  animation([{ opacity: 0 }, { opacity: 1 }], options);\n\nconst fadeOut = (options = baseOptions) =>\n  animation([{ opacity: 1 }, { opacity: 0 }], options);\n\nexport { fadeIn, fadeOut };\n"]}

package/animations/presets/grow/index.d.ts

@@ -1,3 +1,3 @@
-declare const growVerIn: import("../../types.js").AnimationReferenceMetadata;
-declare const growVerOut: import("../../types.js").AnimationReferenceMetadata;
+declare const growVerIn: (options?: KeyframeAnimationOptions) => import("../../types.js").AnimationReferenceMetadata;
+declare const growVerOut: (options?: KeyframeAnimationOptions) => import("../../types.js").AnimationReferenceMetadata;
 export { growVerIn, growVerOut };

package/animations/presets/grow/index.js

@@ -1,18 +1,16 @@
 import { EaseOut } from '../../easings.js';
 import { animation } from '../../types.js';
-const growVerIn = animation([
-    { opacity: 0, height: 0 },
-    { opacity: 1, height: 'auto' },
-], {
+const baseOptions = {
     duration: 350,
     easing: EaseOut.Quad,
-});
-const growVerOut = animation([
+};
+const growVerIn = (options = baseOptions) => animation([
+    { opacity: 0, height: 0 },
+    { opacity: 1, height: 'auto' },
+], options);
+const growVerOut = (options = baseOptions) => animation([
     { opacity: 1, height: 'auto' },
     { opacity: 0, height: 0 },
-], {
-    duration: 350,
-    easing: EaseOut.Quad,
-});
+], options);
 export { growVerIn, growVerOut };
 //# sourceMappingURL=index.js.map

package/animations/presets/grow/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/animations/presets/grow/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,MAAM,SAAS,GAAG,SAAS,CACzB;IACE,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;IACzB,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE;CAC/B,EACD;IACE,QAAQ,EAAE,GAAG;IACb,MAAM,EAAE,OAAO,CAAC,IAAI;CACrB,CACF,CAAC;AAEF,MAAM,UAAU,GAAG,SAAS,CAC1B;IACE,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE;IAC9B,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;CAC1B,EACD;IACE,QAAQ,EAAE,GAAG;IACb,MAAM,EAAE,OAAO,CAAC,IAAI;CACrB,CACF,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC","sourcesContent":["import { EaseOut } from '../../easings.js';\nimport { animation } from '../../types.js';\n\nconst growVerIn = animation(\n  [\n    { opacity: 0, height: 0 },\n    { opacity: 1, height: 'auto' },\n  ],\n  {\n    duration: 350,\n    easing: EaseOut.Quad,\n  }\n);\n\nconst growVerOut = animation(\n  [\n    { opacity: 1, height: 'auto' },\n    { opacity: 0, height: 0 },\n  ],\n  {\n    duration: 350,\n    easing: EaseOut.Quad,\n  }\n);\n\nexport { growVerIn, growVerOut };\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/animations/presets/grow/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,MAAM,WAAW,GAA6B;IAC5C,QAAQ,EAAE,GAAG;IACb,MAAM,EAAE,OAAO,CAAC,IAAI;CACrB,CAAC;AAEF,MAAM,SAAS,GAAG,CAAC,OAAO,GAAG,WAAW,EAAE,EAAE,CAC1C,SAAS,CACP;IACE,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;IACzB,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE;CAC/B,EACD,OAAO,CACR,CAAC;AAEJ,MAAM,UAAU,GAAG,CAAC,OAAO,GAAG,WAAW,EAAE,EAAE,CAC3C,SAAS,CACP;IACE,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE;IAC9B,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;CAC1B,EACD,OAAO,CACR,CAAC;AAEJ,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC","sourcesContent":["import { EaseOut } from '../../easings.js';\nimport { animation } from '../../types.js';\n\nconst baseOptions: KeyframeAnimationOptions = {\n  duration: 350,\n  easing: EaseOut.Quad,\n};\n\nconst growVerIn = (options = baseOptions) =>\n  animation(\n    [\n      { opacity: 0, height: 0 },\n      { opacity: 1, height: 'auto' },\n    ],\n    options\n  );\n\nconst growVerOut = (options = baseOptions) =>\n  animation(\n    [\n      { opacity: 1, height: 'auto' },\n      { opacity: 0, height: 0 },\n    ],\n    options\n  );\n\nexport { growVerIn, growVerOut };\n"]}

package/animations/presets/index.d.ts

@@ -1,2 +1,3 @@
 export * from './grow/index.js';
 export * from './fade/index.js';
+export * from './slide/index.js';

package/animations/presets/index.js

@@ -1,3 +1,4 @@
 export * from './grow/index.js';
 export * from './fade/index.js';
+export * from './slide/index.js';
 //# sourceMappingURL=index.js.map

package/animations/presets/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/animations/presets/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC","sourcesContent":["export * from './grow/index.js';\nexport * from './fade/index.js';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/animations/presets/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC","sourcesContent":["export * from './grow/index.js';\nexport * from './fade/index.js';\nexport * from './slide/index.js';\n"]}

package/animations/presets/slide/index.d.ts

@@ -0,0 +1,3 @@
+declare const slideInHor: (options?: KeyframeAnimationOptions) => import("../../types.js").AnimationReferenceMetadata;
+declare const slideOutHor: (options?: KeyframeAnimationOptions) => import("../../types.js").AnimationReferenceMetadata;
+export { slideInHor, slideOutHor };

package/animations/presets/slide/index.js

@@ -0,0 +1,16 @@
+import { EaseInOut } from '../../easings.js';
+import { animation } from '../../types.js';
+const baseOptions = {
+    duration: 350,
+    easing: EaseInOut.Quad,
+};
+const slideInHor = (options = baseOptions) => animation([
+    { transform: `translateX(100%)`, opacity: 0 },
+    { transform: `translateX(0)`, opacity: 1 },
+], options);
+const slideOutHor = (options = baseOptions) => animation([
+    { transform: `translateX(0)`, opacity: 1 },
+    { transform: `translateX(-100%)`, opacity: 0 },
+], options);
+export { slideInHor, slideOutHor };
+//# sourceMappingURL=index.js.map

package/animations/presets/slide/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/animations/presets/slide/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,MAAM,WAAW,GAA6B;IAC5C,QAAQ,EAAE,GAAG;IACb,MAAM,EAAE,SAAS,CAAC,IAAI;CACvB,CAAC;AAEF,MAAM,UAAU,GAAG,CAAC,OAAO,GAAG,WAAW,EAAE,EAAE,CAC3C,SAAS,CACP;IACE,EAAE,SAAS,EAAE,kBAAkB,EAAE,OAAO,EAAE,CAAC,EAAE;IAC7C,EAAE,SAAS,EAAE,eAAe,EAAE,OAAO,EAAE,CAAC,EAAE;CAC3C,EACD,OAAO,CACR,CAAC;AAEJ,MAAM,WAAW,GAAG,CAAC,OAAO,GAAG,WAAW,EAAE,EAAE,CAC5C,SAAS,CACP;IACE,EAAE,SAAS,EAAE,eAAe,EAAE,OAAO,EAAE,CAAC,EAAE;IAC1C,EAAE,SAAS,EAAE,mBAAmB,EAAE,OAAO,EAAE,CAAC,EAAE;CAC/C,EACD,OAAO,CACR,CAAC;AAEJ,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,CAAC","sourcesContent":["import { EaseInOut } from '../../easings.js';\nimport { animation } from '../../types.js';\n\nconst baseOptions: KeyframeAnimationOptions = {\n  duration: 350,\n  easing: EaseInOut.Quad,\n};\n\nconst slideInHor = (options = baseOptions) =>\n  animation(\n    [\n      { transform: `translateX(100%)`, opacity: 0 },\n      { transform: `translateX(0)`, opacity: 1 },\n    ],\n    options\n  );\n\nconst slideOutHor = (options = baseOptions) =>\n  animation(\n    [\n      { transform: `translateX(0)`, opacity: 1 },\n      { transform: `translateX(-100%)`, opacity: 0 },\n    ],\n    options\n  );\n\nexport { slideInHor, slideOutHor };\n"]}

package/components/avatar/avatar.js

@@ -11,18 +11,18 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { themes } from '../../theming/theming-decorator.js';
 import { watch } from '../common/decorators/watch.js';
 import { SizableMixin } from '../common/mixins/sizable.js';
-import { styles } from './themes/light/avatar.base.css.js';
+import { styles } from './themes/avatar.base.css.js';
+import { styles as material } from './themes/light/avatar.material.css.js';
 import { styles as bootstrap } from './themes/light/avatar.bootstrap.css.js';
+import { styles as fluent } from './themes/light/avatar.fluent.css.js';
+import { styles as indigo } from './themes/light/avatar.indigo.css.js';
 let IgcAvatarComponent = class IgcAvatarComponent extends SizableMixin(LitElement) {
     get classes() {
-        const { size, shape } = this;
+        const { shape } = this;
         return {
             circle: shape === 'circle',
             rounded: shape === 'rounded',
             square: shape === 'square',
-            small: size === 'small',
-            medium: size === 'medium',
-            large: size === 'large',
         };
     }
     constructor() {
@@ -40,7 +40,7 @@ let IgcAvatarComponent = class IgcAvatarComponent extends SizableMixin(LitElemen
         part="base"
         role="img"
         aria-label="avatar"
-        aria-roledescription=${this.size + ' ' + this.shape}
+        aria-roledescription=${this.shape}
         class=${classMap(this.classes)}
       >
         ${this.initials
@@ -81,7 +81,7 @@ __decorate([
     watch('src')
 ], IgcAvatarComponent.prototype, "handleErrorState", null);
 IgcAvatarComponent = __decorate([
-    themes({ bootstrap })
+    themes({ bootstrap, material, fluent, indigo })
 ], IgcAvatarComponent);
 export default IgcAvatarComponent;
 //# sourceMappingURL=avatar.js.map

package/components/avatar/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../../src/components/avatar/avatar.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,mCAAmC,CAAC;AAC3D,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,wCAAwC,CAAC;AAgB7E,IAAqB,kBAAkB,GAAvC,MAAqB,kBAAmB,SAAQ,YAAY,CAAC,UAAU,CAAC;IAmCtE,IAAY,OAAO;QACjB,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QAE7B,OAAO;YACL,MAAM,EAAE,KAAK,KAAK,QAAQ;YAC1B,OAAO,EAAE,KAAK,KAAK,SAAS;YAC5B,MAAM,EAAE,KAAK,KAAK,QAAQ;YAC1B,KAAK,EAAE,IAAI,KAAK,OAAO;YACvB,MAAM,EAAE,IAAI,KAAK,QAAQ;YACzB,KAAK,EAAE,IAAI,KAAK,OAAO;SACxB,CAAC;IACJ,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QArCF,aAAQ,GAAG,KAAK,CAAC;QAqBlB,UAAK,GAAoC,QAAQ,CAAC;QAiBvD,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC;IACtB,CAAC;IAGS,gBAAgB;QACxB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;IACxB,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;;;;+BAKgB,IAAI,CAAC,IAAI,GAAG,GAAG,GAAG,IAAI,CAAC,KAAK;gBAC3C,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC;;UAE5B,IAAI,CAAC,QAAQ;YACb,CAAC,CAAC,IAAI,CAAA,yBAAyB,IAAI,CAAC,QAAQ,SAAS;YACrD,CAAC,CAAC,IAAI,CAAA,iBAAiB;UACvB,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ;YAC1B,CAAC,CAAC,IAAI,CAAA;;;sBAGM,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;sBACnB,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;0BACf,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;;aAEzC;YACH,CAAC,CAAC,EAAE;;KAET,CAAC;IACJ,CAAC;;AAjFsB,0BAAO,GAAG,YAAY,AAAf,CAAgB;AACvB,yBAAM,GAAG,MAAM,AAAT,CAAU;AAOhC;IADN,QAAQ,EAAE;+CACS;AAGZ;IADP,KAAK,EAAE;oDACiB;AAOlB;IADN,QAAQ,EAAE;+CACS;AAOb;IADN,QAAQ,EAAE;oDACc;AAOlB;IADN,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAC6B;AAqB/C;IADT,KAAK,CAAC,KAAK,CAAC;0DAGZ;AAxDkB,kBAAkB;IADtC,MAAM,CAAC,EAAE,SAAS,EAAE,CAAC;GACD,kBAAkB,CAmFtC;eAnFoB,kBAAkB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { watch } from '../common/decorators/watch.js';\nimport { SizableMixin } from '../common/mixins/sizable.js';\nimport { styles } from './themes/light/avatar.base.css.js';\nimport { styles as bootstrap } from './themes/light/avatar.bootstrap.css.js';\n\n/**\n * An avatar component is used as a representation of a user identity\n * typically in a user profile.\n *\n * @element igc-avatar\n *\n * @slot - Renders an icon inside the default slot.\n *\n * @csspart base - The base wrapper of the avatar.\n * @csspart initials - The initials wrapper of the avatar.\n * @csspart image - The image wrapper of the avatar.\n * @csspart icon - The icon wrapper of the avatar.\n */\n@themes({ bootstrap })\nexport default class IgcAvatarComponent extends SizableMixin(LitElement) {\n  public static readonly tagName = 'igc-avatar';\n  public static override styles = styles;\n\n  /**\n   * The image source to use.\n   * @attr\n   */\n  @property()\n  public src!: string;\n\n  @state()\n  private hasError = false;\n\n  /**\n   * Alternative text for the image.\n   * @attr\n   */\n  @property()\n  public alt!: string;\n\n  /**\n   * Initials to use as a fallback when no image is available.\n   * @attr\n   */\n  @property()\n  public initials!: string;\n\n  /**\n   * The shape of the avatar.\n   * @attr\n   */\n  @property({ reflect: true })\n  public shape: 'circle' | 'rounded' | 'square' = 'square';\n\n  private get classes() {\n    const { size, shape } = this;\n\n    return {\n      circle: shape === 'circle',\n      rounded: shape === 'rounded',\n      square: shape === 'square',\n      small: size === 'small',\n      medium: size === 'medium',\n      large: size === 'large',\n    };\n  }\n\n  constructor() {\n    super();\n    this.size = 'small';\n  }\n\n  @watch('src')\n  protected handleErrorState() {\n    this.hasError = false;\n  }\n\n  protected override render() {\n    return html`\n      <div\n        part=\"base\"\n        role=\"img\"\n        aria-label=\"avatar\"\n        aria-roledescription=${this.size + ' ' + this.shape}\n        class=${classMap(this.classes)}\n      >\n        ${this.initials\n          ? html`<span part=\"initials\">${this.initials}</span>`\n          : html` <slot></slot> `}\n        ${this.src && !this.hasError\n          ? html`\n              <img\n                part=\"image\"\n                alt=${ifDefined(this.alt)}\n                src=${ifDefined(this.src)}\n                @error=\"${() => (this.hasError = true)}\"\n              />\n            `\n          : ''}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-avatar': IgcAvatarComponent;\n  }\n}\n"]}
+{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../../src/components/avatar/avatar.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AACrD,OAAO,EAAE,MAAM,IAAI,QAAQ,EAAE,MAAM,uCAAuC,CAAC;AAC3E,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,wCAAwC,CAAC;AAC7E,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,qCAAqC,CAAC;AACvE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,qCAAqC,CAAC;AAgBvE,IAAqB,kBAAkB,GAAvC,MAAqB,kBAAmB,SAAQ,YAAY,CAAC,UAAU,CAAC;IAmCtE,IAAY,OAAO;QACjB,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QAEvB,OAAO;YACL,MAAM,EAAE,KAAK,KAAK,QAAQ;YAC1B,OAAO,EAAE,KAAK,KAAK,SAAS;YAC5B,MAAM,EAAE,KAAK,KAAK,QAAQ;SAC3B,CAAC;IACJ,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QAlCF,aAAQ,GAAG,KAAK,CAAC;QAqBlB,UAAK,GAAoC,QAAQ,CAAC;QAcvD,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC;IACtB,CAAC;IAGS,gBAAgB;QACxB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;IACxB,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;;;;+BAKgB,IAAI,CAAC,KAAK;gBACzB,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC;;UAE5B,IAAI,CAAC,QAAQ;YACb,CAAC,CAAC,IAAI,CAAA,yBAAyB,IAAI,CAAC,QAAQ,SAAS;YACrD,CAAC,CAAC,IAAI,CAAA,iBAAiB;UACvB,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ;YAC1B,CAAC,CAAC,IAAI,CAAA;;;sBAGM,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;sBACnB,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;0BACf,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;;aAEzC;YACH,CAAC,CAAC,EAAE;;KAET,CAAC;IACJ,CAAC;;AA9EsB,0BAAO,GAAG,YAAY,AAAf,CAAgB;AACvB,yBAAM,GAAG,MAAM,AAAT,CAAU;AAOhC;IADN,QAAQ,EAAE;+CACS;AAGZ;IADP,KAAK,EAAE;oDACiB;AAOlB;IADN,QAAQ,EAAE;+CACS;AAOb;IADN,QAAQ,EAAE;oDACc;AAOlB;IADN,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAC6B;AAkB/C;IADT,KAAK,CAAC,KAAK,CAAC;0DAGZ;AArDkB,kBAAkB;IADtC,MAAM,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;GAC3B,kBAAkB,CAgFtC;eAhFoB,kBAAkB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { watch } from '../common/decorators/watch.js';\nimport { SizableMixin } from '../common/mixins/sizable.js';\nimport { styles } from './themes/avatar.base.css.js';\nimport { styles as material } from './themes/light/avatar.material.css.js';\nimport { styles as bootstrap } from './themes/light/avatar.bootstrap.css.js';\nimport { styles as fluent } from './themes/light/avatar.fluent.css.js';\nimport { styles as indigo } from './themes/light/avatar.indigo.css.js';\n\n/**\n * An avatar component is used as a representation of a user identity\n * typically in a user profile.\n *\n * @element igc-avatar\n *\n * @slot - Renders an icon inside the default slot.\n *\n * @csspart base - The base wrapper of the avatar.\n * @csspart initials - The initials wrapper of the avatar.\n * @csspart image - The image wrapper of the avatar.\n * @csspart icon - The icon wrapper of the avatar.\n */\n@themes({ bootstrap, material, fluent, indigo })\nexport default class IgcAvatarComponent extends SizableMixin(LitElement) {\n  public static readonly tagName = 'igc-avatar';\n  public static override styles = styles;\n\n  /**\n   * The image source to use.\n   * @attr\n   */\n  @property()\n  public src!: string;\n\n  @state()\n  private hasError = false;\n\n  /**\n   * Alternative text for the image.\n   * @attr\n   */\n  @property()\n  public alt!: string;\n\n  /**\n   * Initials to use as a fallback when no image is available.\n   * @attr\n   */\n  @property()\n  public initials!: string;\n\n  /**\n   * The shape of the avatar.\n   * @attr\n   */\n  @property({ reflect: true })\n  public shape: 'circle' | 'rounded' | 'square' = 'square';\n\n  private get classes() {\n    const { shape } = this;\n\n    return {\n      circle: shape === 'circle',\n      rounded: shape === 'rounded',\n      square: shape === 'square',\n    };\n  }\n\n  constructor() {\n    super();\n    this.size = 'small';\n  }\n\n  @watch('src')\n  protected handleErrorState() {\n    this.hasError = false;\n  }\n\n  protected override render() {\n    return html`\n      <div\n        part=\"base\"\n        role=\"img\"\n        aria-label=\"avatar\"\n        aria-roledescription=${this.shape}\n        class=${classMap(this.classes)}\n      >\n        ${this.initials\n          ? html`<span part=\"initials\">${this.initials}</span>`\n          : html` <slot></slot> `}\n        ${this.src && !this.hasError\n          ? html`\n              <img\n                part=\"image\"\n                alt=${ifDefined(this.alt)}\n                src=${ifDefined(this.src)}\n                @error=\"${() => (this.hasError = true)}\"\n              />\n            `\n          : ''}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-avatar': IgcAvatarComponent;\n  }\n}\n"]}

package/components/avatar/themes/{light/avatar.base.css.js → avatar.base.css.js}

@@ -32,11 +32,6 @@ export const styles = css `:host {
   display: none !important;
 }
 :host {
-  --background: var(--ig-avatar-background, hsla(var(--ig-gray-400), 0.54));
-  --color: var(--ig-avatar-color, hsla(var(--ig-gray-800), 0.96));
-  --border-radius: var(--ig-avatar-border-radius, 0rem);
-  --size: var(--ig-avatar-size, max(var(--is-large, 1) * max(5.5rem, -1 * 5.5rem), var(--is-medium, 1) * max(4rem, -1 * 4rem), var(--is-small, 1) * max(2.5rem, -1 * 2.5rem)));
-  --size: max(var(--is-large, 1) * max(5.5rem, -1 * 5.5rem), var(--is-medium, 1) * max(4rem, -1 * 4rem), var(--is-small, 1) * max(2.5rem, -1 * 2.5rem));
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
@@ -63,20 +58,11 @@ export const styles = css `:host {
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
-  color: var(--color);
-  background: var(--background);
-  border-radius: 0;
   outline-style: none;
   -ms-flex-negative: 0;
       flex-shrink: 0;
   overflow: hidden;
   font-family: var(--ig-font-family);
-  width: var(--size);
-  height: var(--size);
-}
-[part=base] [part=initials] {
-  font-size: calc(var(--size) / 2);
-  line-height: calc(var(--size) / 2);
 }
 
 img {
@@ -93,23 +79,7 @@ img {
   text-transform: uppercase;
 }
 
-:host([size=large]) {
-  --component-size: var(--ig-size, var(--ig-size-large));
-}
-
-:host([size=medium]) {
-  --component-size: var(--ig-size, var(--ig-size-medium));
-}
-
-:host([size=small]) {
-  --component-size: var(--ig-size, var(--ig-size-small));
-}
-
-:host([shape=rounded]) [part=base] {
-  border-radius: var(--border-radius);
-}
-
-:host([shape=circle]) [part=base] {
-  border-radius: calc(var(--size) / 2);
+:host([shape=square]) [part=base] {
+  border-radius: 0;
 }`;
 //# sourceMappingURL=avatar.base.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.base.css.js","sourceRoot":"","sources":["../../../../src/components/avatar/themes/avatar.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkFvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n  --is-medium: min(\n      clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n      clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n  );\n  --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n  position: relative;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  scrollbar-width: var(--ig-scrollbar-size);\n  scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\n}\n:host *,\n:host *::before,\n:host *::after {\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n  width: var(--ig-scrollbar-size);\n  height: var(--ig-scrollbar-size);\n  background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n  background: var(--ig-scrollbar-thumb-background);\n}\n\n:host([hidden]),\n[hidden] {\n  display: none !important;\n}\n:host {\n  display: -webkit-inline-box;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  width: -webkit-fit-content;\n  width: -moz-fit-content;\n  width: fit-content;\n  height: -webkit-fit-content;\n  height: -moz-fit-content;\n  height: fit-content;\n}\n\n[part=base] {\n  position: relative;\n  display: -webkit-inline-box;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  outline-style: none;\n  -ms-flex-negative: 0;\n      flex-shrink: 0;\n  overflow: hidden;\n  font-family: var(--ig-font-family);\n}\n\nimg {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border-radius: inherit;\n  background-color: inherit;\n  -o-object-fit: cover;\n     object-fit: cover;\n}\n\n[part=initials] {\n  text-transform: uppercase;\n}\n\n:host([shape=square]) [part=base] {\n  border-radius: 0;\n}`;\n"]}

package/components/{nav-drawer/themes/dark/nav-drawer-item.base.css.js → avatar/themes/dark/avatar.bootstrap.css.js}

@@ -1,3 +1,3 @@
 import { css } from 'lit';
 export const styles = css ``;
-//# sourceMappingURL=nav-drawer-item.base.css.js.map
+//# sourceMappingURL=avatar.bootstrap.css.js.map

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

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

package/components/avatar/themes/dark/{avatar.base.bootstrap.css.js → avatar.fluent.css.js}

@@ -1,3 +1,3 @@
 import { css } from 'lit';
 export const styles = css ``;
-//# sourceMappingURL=avatar.base.bootstrap.css.js.map
+//# sourceMappingURL=avatar.fluent.css.js.map

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

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

package/components/{nav-drawer/themes/dark/nav-drawer-item.indigo.css.js → avatar/themes/dark/avatar.indigo.css.js}

@@ -1,3 +1,3 @@
 import { css } from 'lit';
 export const styles = css ``;
-//# sourceMappingURL=nav-drawer-item.indigo.css.js.map
+//# sourceMappingURL=avatar.indigo.css.js.map

package/components/avatar/themes/dark/avatar.indigo.css.js.map

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

package/components/{nav-drawer/themes/dark/nav-drawer-item.fluent.css.js → avatar/themes/dark/avatar.material.css.js}

@@ -1,3 +1,3 @@
 import { css } from 'lit';
 export const styles = css ``;
-//# sourceMappingURL=nav-drawer-item.fluent.css.js.map
+//# sourceMappingURL=avatar.material.css.js.map

package/components/avatar/themes/dark/avatar.material.css.js.map

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

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

@@ -2,12 +2,26 @@ import { css } from 'lit';
 export const styles = css `:host {
   --background: var(--ig-avatar-background, hsla(var(--ig-gray-400), var(--ig-gray-a)));
   --color: var(--ig-avatar-color, var(--ig-gray-400-contrast));
-  --border-radius: var(--ig-avatar-border-radius, 0.25rem);
+  --border-radius: var(--ig-avatar-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 0.25rem), 0.25rem));
   --size: var(--ig-avatar-size, max(var(--is-large, 1) * max(5.5rem, -1 * 5.5rem), var(--is-medium, 1) * max(4rem, -1 * 4rem), var(--is-small, 1) * max(2.5rem, -1 * 2.5rem)));
 }
 
-:host([shape=square]) [part=base],
+[part=base] {
+  color: var(--color);
+  background: var(--background);
+  width: var(--size);
+  height: var(--size);
+}
+[part=base] [part=initials] {
+  font-size: calc(var(--size) / 2);
+  line-height: calc(var(--size) / 2);
+}
+
 :host([shape=rounded]) [part=base] {
-  border-radius: 0.25rem;
+  border-radius: var(--border-radius);
+}
+
+:host([shape=circle]) [part=base] {
+  border-radius: calc(var(--size) / 2);
 }`;
 //# sourceMappingURL=avatar.bootstrap.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"avatar.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/avatar/themes/light/avatar.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;EAUvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --background: var(--ig-avatar-background, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n  --color: var(--ig-avatar-color, var(--ig-gray-400-contrast));\n  --border-radius: var(--ig-avatar-border-radius, 0.25rem);\n  --size: var(--ig-avatar-size, max(var(--is-large, 1) * max(5.5rem, -1 * 5.5rem), var(--is-medium, 1) * max(4rem, -1 * 4rem), var(--is-small, 1) * max(2.5rem, -1 * 2.5rem)));\n}\n\n:host([shape=square]) [part=base],\n:host([shape=rounded]) [part=base] {\n  border-radius: 0.25rem;\n}`;\n"]}
+{"version":3,"file":"avatar.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/avatar/themes/light/avatar.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;EAwBvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --background: var(--ig-avatar-background, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n  --color: var(--ig-avatar-color, var(--ig-gray-400-contrast));\n  --border-radius: var(--ig-avatar-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 0.25rem), 0.25rem));\n  --size: var(--ig-avatar-size, max(var(--is-large, 1) * max(5.5rem, -1 * 5.5rem), var(--is-medium, 1) * max(4rem, -1 * 4rem), var(--is-small, 1) * max(2.5rem, -1 * 2.5rem)));\n}\n\n[part=base] {\n  color: var(--color);\n  background: var(--background);\n  width: var(--size);\n  height: var(--size);\n}\n[part=base] [part=initials] {\n  font-size: calc(var(--size) / 2);\n  line-height: calc(var(--size) / 2);\n}\n\n:host([shape=rounded]) [part=base] {\n  border-radius: var(--border-radius);\n}\n\n:host([shape=circle]) [part=base] {\n  border-radius: calc(var(--size) / 2);\n}`;\n"]}

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

@@ -0,0 +1,27 @@
+import { css } from 'lit';
+export const styles = css `:host {
+  --background: var(--ig-avatar-background, hsla(var(--ig-gray-400), 0.54));
+  --color: var(--ig-avatar-color, hsla(var(--ig-gray-800), 0.96));
+  --border-radius: var(--ig-avatar-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 0.5rem), 0.5rem));
+  --size: var(--ig-avatar-size, max(var(--is-large, 1) * max(5.5rem, -1 * 5.5rem), var(--is-medium, 1) * max(4rem, -1 * 4rem), var(--is-small, 1) * max(2.5rem, -1 * 2.5rem)));
+}
+
+[part=base] {
+  color: var(--color);
+  background: var(--background);
+  width: var(--size);
+  height: var(--size);
+}
+[part=base] [part=initials] {
+  font-size: calc(var(--size) / 2);
+  line-height: calc(var(--size) / 2);
+}
+
+:host([shape=rounded]) [part=base] {
+  border-radius: var(--border-radius);
+}
+
+:host([shape=circle]) [part=base] {
+  border-radius: calc(var(--size) / 2);
+}`;
+//# sourceMappingURL=avatar.fluent.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/avatar/themes/light/avatar.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;EAwBvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --background: var(--ig-avatar-background, hsla(var(--ig-gray-400), 0.54));\n  --color: var(--ig-avatar-color, hsla(var(--ig-gray-800), 0.96));\n  --border-radius: var(--ig-avatar-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 0.5rem), 0.5rem));\n  --size: var(--ig-avatar-size, max(var(--is-large, 1) * max(5.5rem, -1 * 5.5rem), var(--is-medium, 1) * max(4rem, -1 * 4rem), var(--is-small, 1) * max(2.5rem, -1 * 2.5rem)));\n}\n\n[part=base] {\n  color: var(--color);\n  background: var(--background);\n  width: var(--size);\n  height: var(--size);\n}\n[part=base] [part=initials] {\n  font-size: calc(var(--size) / 2);\n  line-height: calc(var(--size) / 2);\n}\n\n:host([shape=rounded]) [part=base] {\n  border-radius: var(--border-radius);\n}\n\n:host([shape=circle]) [part=base] {\n  border-radius: calc(var(--size) / 2);\n}`;\n"]}

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

@@ -0,0 +1,27 @@
+import { css } from 'lit';
+export const styles = css `:host {
+  --background: var(--ig-avatar-background, hsla(var(--ig-gray-400), 0.54));
+  --color: var(--ig-avatar-color, hsla(var(--ig-gray-800), 0.96));
+  --border-radius: var(--ig-avatar-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 0.5rem), 0.5rem));
+  --size: var(--ig-avatar-size, max(var(--is-large, 1) * max(5.5rem, -1 * 5.5rem), var(--is-medium, 1) * max(4rem, -1 * 4rem), var(--is-small, 1) * max(2.5rem, -1 * 2.5rem)));
+}
+
+[part=base] {
+  color: var(--color);
+  background: var(--background);
+  width: var(--size);
+  height: var(--size);
+}
+[part=base] [part=initials] {
+  font-size: calc(var(--size) / 2);
+  line-height: calc(var(--size) / 2);
+}
+
+:host([shape=rounded]) [part=base] {
+  border-radius: var(--border-radius);
+}
+
+:host([shape=circle]) [part=base] {
+  border-radius: calc(var(--size) / 2);
+}`;
+//# sourceMappingURL=avatar.indigo.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/avatar/themes/light/avatar.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;EAwBvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --background: var(--ig-avatar-background, hsla(var(--ig-gray-400), 0.54));\n  --color: var(--ig-avatar-color, hsla(var(--ig-gray-800), 0.96));\n  --border-radius: var(--ig-avatar-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 0.5rem), 0.5rem));\n  --size: var(--ig-avatar-size, max(var(--is-large, 1) * max(5.5rem, -1 * 5.5rem), var(--is-medium, 1) * max(4rem, -1 * 4rem), var(--is-small, 1) * max(2.5rem, -1 * 2.5rem)));\n}\n\n[part=base] {\n  color: var(--color);\n  background: var(--background);\n  width: var(--size);\n  height: var(--size);\n}\n[part=base] [part=initials] {\n  font-size: calc(var(--size) / 2);\n  line-height: calc(var(--size) / 2);\n}\n\n:host([shape=rounded]) [part=base] {\n  border-radius: var(--border-radius);\n}\n\n:host([shape=circle]) [part=base] {\n  border-radius: calc(var(--size) / 2);\n}`;\n"]}

package/components/avatar/themes/light/avatar.material.css.js

@@ -0,0 +1,27 @@
+import { css } from 'lit';
+export const styles = css `:host {
+  --background: var(--ig-avatar-background, hsla(var(--ig-gray-400), 0.54));
+  --color: var(--ig-avatar-color, hsla(var(--ig-gray-800), 0.96));
+  --border-radius: var(--ig-avatar-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 0.5rem), 0.5rem));
+  --size: var(--ig-avatar-size, max(var(--is-large, 1) * max(5.5rem, -1 * 5.5rem), var(--is-medium, 1) * max(4rem, -1 * 4rem), var(--is-small, 1) * max(2.5rem, -1 * 2.5rem)));
+}
+
+[part=base] {
+  color: var(--color);
+  background: var(--background);
+  width: var(--size);
+  height: var(--size);
+}
+[part=base] [part=initials] {
+  font-size: calc(var(--size) / 2);
+  line-height: calc(var(--size) / 2);
+}
+
+:host([shape=rounded]) [part=base] {
+  border-radius: var(--border-radius);
+}
+
+:host([shape=circle]) [part=base] {
+  border-radius: calc(var(--size) / 2);
+}`;
+//# sourceMappingURL=avatar.material.css.js.map

package/components/avatar/themes/light/avatar.material.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.material.css.js","sourceRoot":"","sources":["../../../../../src/components/avatar/themes/light/avatar.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;EAwBvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --background: var(--ig-avatar-background, hsla(var(--ig-gray-400), 0.54));\n  --color: var(--ig-avatar-color, hsla(var(--ig-gray-800), 0.96));\n  --border-radius: var(--ig-avatar-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 0.5rem), 0.5rem));\n  --size: var(--ig-avatar-size, max(var(--is-large, 1) * max(5.5rem, -1 * 5.5rem), var(--is-medium, 1) * max(4rem, -1 * 4rem), var(--is-small, 1) * max(2.5rem, -1 * 2.5rem)));\n}\n\n[part=base] {\n  color: var(--color);\n  background: var(--background);\n  width: var(--size);\n  height: var(--size);\n}\n[part=base] [part=initials] {\n  font-size: calc(var(--size) / 2);\n  line-height: calc(var(--size) / 2);\n}\n\n:host([shape=rounded]) [part=base] {\n  border-radius: var(--border-radius);\n}\n\n:host([shape=circle]) [part=base] {\n  border-radius: calc(var(--size) / 2);\n}`;\n"]}

package/components/button/button-base.d.ts

@@ -6,13 +6,15 @@ export interface IgcButtonEventMap {
 }
 declare const IgcButtonBaseComponent_base: Constructor<import("../common/mixins/sizable.js").SizableInterface> & import("../common/mixins/constructor.js").AbstractConstructor<import("../common//mixins/event-emitter.js").EventEmitterInterface<IgcButtonEventMap>> & Constructor<LitElement>;
 export declare abstract class IgcButtonBaseComponent extends IgcButtonBaseComponent_base {
+    #private;
+    static readonly formAssociated = true;
     protected static shadowRootOptions: {
         delegatesFocus: boolean;
         mode: ShadowRootMode;
         slotAssignment?: SlotAssignmentMode | undefined;
     };
     private nativeElement;
-    private _ariaLabel;
+    protected _disabled: boolean;
     /**
      * The type of the button. Defaults to undefined.
      * @attr
@@ -40,19 +42,25 @@ export declare abstract class IgcButtonBaseComponent extends IgcButtonBaseCompon
      */
     rel: string;
     /**
-     * Determines whether the button is disabled.
-     * @attr
+     * The disabled state of the component
+     * @attr [disabled=false]
      */
-    disabled: boolean;
-    set ariaLabel(value: string);
-    get ariaLabel(): string;
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    /** Returns the HTMLFormElement associated with this element. */
+    get form(): HTMLFormElement | null;
+    constructor();
     /** Sets focus in the button. */
     focus(options?: FocusOptions): void;
+    /** Simulates a mouse click on the element */
+    click(): void;
     /** Removes focus from the button. */
     blur(): void;
     protected handleFocus(): void;
     protected handleBlur(): void;
     protected get classes(): {};
+    protected handleClick(): void;
+    protected formDisabledCallback(state: boolean): void;
     private renderButton;
     private renderLinkButton;
     protected abstract renderContent(): TemplateResult;