Merge branch 'master' into bpachilova/range-editable-date-input

Author: ddaribo

package-lock.json

@@ -58,14 +58,14 @@
     "lit": "^3.3.1"
   },
   "devDependencies": {
-    "@biomejs/biome": "~2.1.1",
+    "@biomejs/biome": "~2.1.2",
     "@custom-elements-manifest/analyzer": "^0.10.4",
     "@igniteui/material-icons-extended": "^3.1.0",
     "@open-wc/testing": "^4.0.0",
-    "@storybook/addon-a11y": "^9.0.16",
-    "@storybook/addon-docs": "^9.0.16",
-    "@storybook/addon-links": "^9.0.16",
-    "@storybook/web-components-vite": "^9.0.16",
+    "@storybook/addon-a11y": "^9.0.18",
+    "@storybook/addon-docs": "^9.0.18",
+    "@storybook/addon-links": "^9.0.18",
+    "@storybook/web-components-vite": "^9.0.18",
     "@types/mocha": "^10.0.10",
     "@web/dev-server-esbuild": "^1.0.4",
     "@web/test-runner": "^0.20.2",
@@ -78,8 +78,8 @@
     "custom-element-vs-code-integration": "^1.5.0",
     "globby": "^14.1.0",
     "husky": "^9.1.7",
-    "ig-typedoc-theme": "^6.2.2",
-    "igniteui-theming": "^19.1.2",
+    "ig-typedoc-theme": "^6.2.3",
+    "igniteui-theming": "^19.2.1",
     "keep-a-changelog": "^2.6.2",
     "lint-staged": "^16.1.2",
     "lit-analyzer": "^2.0.3",
@@ -91,8 +91,8 @@
     "rimraf": "^6.0.1",
     "sass-embedded": "~1.78.0",
     "sinon": "^21.0.0",
-    "storybook": "^9.0.16",
-    "stylelint": "^16.21.1",
+    "storybook": "^9.0.18",
+    "stylelint": "^16.22.0",
     "stylelint-config-standard-scss": "^15.0.1",
     "stylelint-prettier": "^5.0.3",
     "stylelint-scss": "^6.12.1",
@@ -101,7 +101,7 @@
     "typedoc": "~0.27.9",
     "typedoc-plugin-localization": "^3.0.6",
     "typescript": "^5.8.3",
-    "vite": "^7.0.4"
+    "vite": "^7.0.6"
   },
   "browserslist": [
     "defaults"

package.json

@@ -3,17 +3,24 @@ import { css } from 'lit';
 import type { Themes } from '../../../theming/types.js';
 // Shared Styles
 import { styles as bootstrap } from './shared/content/card.content.bootstrap.css.js';
+import { styles as indigo } from './shared/content/card.content.indigo.css.js';
 
 const light = {
   bootstrap: css`
     ${bootstrap}
   `,
+  indigo: css`
+    ${indigo}
+  `,
 };
 
 const dark = {
   bootstrap: css`
     ${bootstrap}
   `,
+  indigo: css`
+    ${indigo}
+  `,
 };
 
 export const all: Themes = { light, dark };

src/components/card/themes/content.ts

@@ -0,0 +1,7 @@
+@use 'styles/utilities' as *;
+
+:host {
+     ::slotted(igc-avatar) {
+        --ig-size: 3;
+    }
+}

src/components/card/themes/shared/content/card.content.indigo.scss

@@ -35,7 +35,7 @@ export default class IgcCarouselIndicatorComponent extends LitElement {
   });
 
   @consume({ context: carouselContext, subscribe: true })
-  private _carousel?: IgcCarouselComponent;
+  private readonly _carousel?: IgcCarouselComponent;
 
   protected get _labelFormat(): string {
     return this._carousel ? this._carousel.indicatorsLabelFormat : '';

src/components/carousel/carousel-indicator.ts

@@ -6,11 +6,13 @@ import { addAnimationController } from '../../animations/player.js';
 import { carouselContext } from '../common/context.js';
 import { addInternalsController } from '../common/controllers/internals.js';
 import { registerComponent } from '../common/definitions/register.js';
-import { createCounter, formatString } from '../common/util.js';
+import { formatString } from '../common/util.js';
 import { animations } from './animations.js';
 import type IgcCarouselComponent from './carousel.js';
 import { styles } from './themes/carousel-slide.base.css.js';
 
+let nextId = 1;
+
 /**
  * A single content container within a set of containers used in the context of an `igc-carousel`.
  *
@@ -27,25 +29,23 @@ export default class IgcCarouselSlideComponent extends LitElement {
     registerComponent(IgcCarouselSlideComponent);
   }
 
-  private static readonly increment = createCounter();
-
   private readonly _internals = addInternalsController(this, {
     initialARIA: {
       role: 'tabpanel',
       ariaRoleDescription: 'slide',
     },
   });
 
-  private readonly _animationPlayer = addAnimationController(this);
+  private readonly _player = addAnimationController(this);
 
   @consume({ context: carouselContext, subscribe: true })
-  private _carousel?: IgcCarouselComponent;
+  private readonly _carousel?: IgcCarouselComponent;
 
-  protected get _index() {
+  protected get _index(): number {
     return this._carousel ? this._carousel.slides.indexOf(this) : 0;
   }
 
-  protected get _total() {
+  protected get _total(): number {
     return this._carousel ? this._carousel.slides.length : 0;
   }
 
@@ -59,7 +59,7 @@ export default class IgcCarouselSlideComponent extends LitElement {
     return animation;
   }
 
-  protected get _labelFormat() {
+  protected get _labelFormat(): string {
     return this._carousel ? this._carousel.slidesLabelFormat : '';
   }
 
@@ -81,21 +81,16 @@ export default class IgcCarouselSlideComponent extends LitElement {
   public async toggleAnimation(
     type: 'in' | 'out',
     direction: 'normal' | 'reverse' = 'normal'
-  ) {
+  ): Promise<boolean> {
     const animation = animations.get(this._animation)!.get(type)!;
 
-    const options: KeyframeAnimationOptions = {
-      duration: 320,
-      easing: EaseInOut.Quad,
-      direction,
-    };
-
-    const [_, event] = await Promise.all([
-      this._animationPlayer.stopAll(),
-      this._animationPlayer.play(animation(options)),
-    ]);
-
-    return event.type === 'finish';
+    return await this._player.playExclusive(
+      animation({
+        duration: 320,
+        easing: EaseInOut.Quad,
+        direction,
+      })
+    );
   }
 
   protected override willUpdate(): void {
@@ -104,15 +99,14 @@ export default class IgcCarouselSlideComponent extends LitElement {
     });
   }
 
+  /** @internal */
   public override connectedCallback(): void {
     super.connectedCallback();
-
-    this.id =
-      this.id || `igc-carousel-slide-${IgcCarouselSlideComponent.increment()}`;
+    this.id = this.id || `igc-carousel-slide-${nextId++}`;
   }
 
   protected override render() {
-    return html` <slot></slot> `;
+    return html`<slot></slot>`;
   }
 }