igniteui-webcomponents 7.2.4 → 7.3.0-beta.1

package/components/stepper/stepper.d.ts

@@ -1,14 +1,14 @@
 import { LitElement, type PropertyValues } from 'lit';
-import type { Constructor } from '../common/mixins/constructor.js';
+import type { Constructor } from '#internals/mixins/constructor.js';
 import type { HorizontalTransitionAnimation, StepperOrientation, StepperStepType, StepperTitlePosition, StepperVerticalAnimation } from '../types.js';
 import type { IgcStepperComponentEventMap } from './common/types.js';
 import IgcStepComponent from './step.js';
-declare const IgcStepperComponent_base: Constructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcStepperComponentEventMap>> & Constructor<LitElement>;
+declare const IgcStepperComponent_base: Constructor<import("#internals/mixins/event-emitter.js").EventEmitterInterface<IgcStepperComponentEventMap>> & Constructor<LitElement>;
 /**
  * A stepper component that provides a wizard-like workflow by dividing content into logical steps.
  *
  * @remarks
- * The stepper component allows the user to navigate between multiple `igc-step` elements.
+ * The stepper component allows the user to navigate between multiple step children.
  * It supports horizontal and vertical orientation, linear and non-linear navigation,
  * keyboard navigation, and provides API methods to control the active step.
  *
@@ -17,7 +17,7 @@ declare const IgcStepperComponent_base: Constructor<import("../common/mixins/eve
  *
  * @element igc-stepper
  *
- * @slot - Renders `igc-step` components inside the default slot.
+ * @slot - Renders the steps of the stepper inside the default slot.
  *
  * @fires igcActiveStepChanging - Emitted when the active step is about to change. Cancelable.
  * @fires igcActiveStepChanged - Emitted after the active step has changed.
@@ -59,8 +59,6 @@ export default class IgcStepperComponent extends IgcStepperComponent_base {
     static styles: import("lit").CSSResult;
     static register(): void;
     private readonly _state;
-    private readonly _contextProvider;
-    private readonly _internals;
     private readonly _slots;
     private get _isHorizontal();
     /** Returns all of the stepper's steps. */
@@ -131,22 +129,13 @@ export default class IgcStepperComponent extends IgcStepperComponent_base {
     constructor();
     protected update(properties: PropertyValues<this>): void;
     private _skipKeyboard;
-    private _handleHomeKey;
-    private _handleEndKey;
-    private _handleArrowDown;
-    private _handleArrowUp;
-    private _handleArrowLeft;
-    private _handleArrowRight;
     private _handleInteraction;
     private _handleSlotChange;
-    private _syncStepperAttributes;
     private _animateSteps;
     private _emitChanging;
     private _emitChanged;
     private _activateStep;
     private _moveToNextStep;
-    private _getNextStep;
-    private _getPreviousStep;
     private _getActiveStepComponent;
     private _getStepHeader;
     /** Activates the step at a given index. */
@@ -156,7 +145,7 @@ export default class IgcStepperComponent extends IgcStepperComponent_base {
     /** Activates the previous enabled step. */
     prev(): void;
     /**
-     * Resets the stepper to its initial state i.e. activates the first step.
+     * Resets the stepper to its initial state, i.e. activates the first step.
      *
      * @remarks
      * The steps' content will not be automatically reset.

package/components/stepper/stepper.js

@@ -4,16 +4,17 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { ContextProvider } from '@lit/context';
 import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
-import { addThemingController } from '../../theming/theming-controller.js';
-import { addInternalsController } from '../common/controllers/internals.js';
-import { addKeybindings, arrowDown, arrowLeft, arrowRight, arrowUp, endKey, homeKey, } from '../common/controllers/key-bindings.js';
-import { addSlotController, setSlots } from '../common/controllers/slot.js';
-import { registerComponent } from '../common/definitions/register.js';
-import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
-import { addSafeEventListener, first, getElementFromPath, getRoot, isLTR, last, wrap, } from '../common/util.js';
+import { addContextProvider } from '#internals/controllers/context-provider.js';
+import { addInternalsController } from '#internals/controllers/internals.js';
+import { addRovingFocusController } from '#internals/controllers/roving-focus.js';
+import { addSlotController, setSlots } from '#internals/controllers/slot.js';
+import { registerComponent } from '#internals/definitions/register.js';
+import { EventEmitterMixin } from '#internals/mixins/event-emitter.js';
+import { getRoot } from '#internals/utils/dom.js';
+import { addSafeEventListener, getElementFromPath, } from '#internals/utils/events.js';
+import { addThemingController } from '#theming/theming-controller.js';
 import { STEPPER_CONTEXT } from './common/context.js';
 import { createStepperState } from './common/state.js';
 import IgcStepComponent from './step.js';
@@ -45,18 +46,6 @@ export default class IgcStepperComponent extends EventEmitterMixin(LitElement) {
     constructor() {
         super();
         this._state = createStepperState();
-        this._contextProvider = new ContextProvider(this, {
-            context: STEPPER_CONTEXT,
-            initialValue: {
-                stepper: this,
-                state: this._state,
-            },
-        });
-        this._internals = addInternalsController(this, {
-            initialARIA: {
-                role: 'tablist',
-            },
-        });
         this._slots = addSlotController(this, {
             slots: setSlots(),
             onChange: this._handleSlotChange,
@@ -70,26 +59,30 @@ export default class IgcStepperComponent extends EventEmitterMixin(LitElement) {
         this.animationDuration = 320;
         this.titlePosition = 'auto';
         addSafeEventListener(this, 'click', this._handleInteraction);
+        addInternalsController(this, {
+            initialARIA: { role: 'tablist' },
+            aria: () => ({ ariaOrientation: this.orientation }),
+        });
+        const context = { stepper: this, state: this._state };
+        addContextProvider(this, {
+            context: STEPPER_CONTEXT,
+            watch: STEPPER_SYNC_PROPERTIES,
+            value: () => context,
+        });
         addThemingController(this, {
             light: { bootstrap, fluent, indigo },
             dark: { bootstrap, fluent, indigo },
         });
-        addKeybindings(this, {
-            skip: this._skipKeyboard,
-        })
-            .set(arrowUp, this._handleArrowUp)
-            .set(arrowDown, this._handleArrowDown)
-            .set(arrowLeft, this._handleArrowLeft)
-            .set(arrowRight, this._handleArrowRight)
-            .set(homeKey, this._handleHomeKey)
-            .set(endKey, this._handleEndKey)
-            .setActivateHandler(this._handleInteraction);
+        addRovingFocusController(this, {
+            keybindings: { skip: this._skipKeyboard },
+            items: () => this._state.accessibleSteps,
+            current: () => this._getActiveStepComponent(),
+            vertical: () => !this._isHorizontal,
+            focusItem: (step) => this._getStepHeader(step)?.focus(),
+            activateItem: (step) => this._activateStep(step),
+        });
     }
     update(properties) {
-        this._syncStepperAttributes(properties);
-        if (properties.has('orientation')) {
-            this._internals.setARIA({ ariaOrientation: this.orientation });
-        }
         if (properties.has('linear')) {
             this._state.setVisitedState(this.linear);
         }
@@ -103,46 +96,6 @@ export default class IgcStepperComponent extends EventEmitterMixin(LitElement) {
     _skipKeyboard(_, event) {
         return !getElementFromPath('[data-step-header]', event);
     }
-    _handleHomeKey() {
-        this._getStepHeader(first(this._state.accessibleSteps))?.focus();
-    }
-    _handleEndKey() {
-        this._getStepHeader(last(this._state.accessibleSteps))?.focus();
-    }
-    _handleArrowDown() {
-        if (!this._isHorizontal) {
-            const step = this._getActiveStepComponent();
-            if (step) {
-                this._getStepHeader(this._getNextStep(step))?.focus();
-            }
-        }
-    }
-    _handleArrowUp() {
-        if (!this._isHorizontal) {
-            const step = this._getActiveStepComponent();
-            if (step) {
-                this._getStepHeader(this._getPreviousStep(step))?.focus();
-            }
-        }
-    }
-    _handleArrowLeft() {
-        const step = this._getActiveStepComponent();
-        if (step) {
-            const next = isLTR(this)
-                ? this._getPreviousStep(step)
-                : this._getNextStep(step);
-            this._getStepHeader(next)?.focus();
-        }
-    }
-    _handleArrowRight() {
-        const step = this._getActiveStepComponent();
-        if (step) {
-            const next = isLTR(this)
-                ? this._getNextStep(step)
-                : this._getPreviousStep(step);
-            this._getStepHeader(next)?.focus();
-        }
-    }
     _handleInteraction(event) {
         const step = getElementFromPath(IgcStepComponent.tagName, event);
         if (step && this._state.isAccessible(step)) {
@@ -156,11 +109,6 @@ export default class IgcStepperComponent extends EventEmitterMixin(LitElement) {
         this._state.stepsChanged();
         this.style.setProperty('--steps-count', this.steps.length.toString());
     }
-    _syncStepperAttributes(properties) {
-        if (STEPPER_SYNC_PROPERTIES.some((p) => properties.has(p))) {
-            this._contextProvider.updateObservers();
-        }
-    }
     _animateSteps(nextStep, currentStep) {
         const steps = this._state.steps;
         if (steps.indexOf(nextStep) > steps.indexOf(currentStep)) {
@@ -213,16 +161,6 @@ export default class IgcStepperComponent extends EventEmitterMixin(LitElement) {
             this._state.changeActiveStep(step);
         }
     }
-    _getNextStep(step) {
-        const steps = this._state.accessibleSteps;
-        const next = wrap(0, steps.length - 1, steps.indexOf(step) + 1);
-        return steps[next];
-    }
-    _getPreviousStep(step) {
-        const steps = this._state.accessibleSteps;
-        const previous = wrap(0, steps.length - 1, steps.indexOf(step) - 1);
-        return steps[previous];
-    }
     _getActiveStepComponent() {
         const active = getRoot(this).activeElement;
         return active ? active.closest(IgcStepComponent.tagName) : null;

package/components/stepper/stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"stepper.js","sourceRoot":"","sources":["../../../src/components/stepper/stepper.ts"],"names":[],"mappings":"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","sourcesContent":["import { ContextProvider } from '@lit/context';\nimport { html, LitElement, type PropertyValues } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport { addInternalsController } from '../common/controllers/internals.js';\nimport {\n  addKeybindings,\n  arrowDown,\n  arrowLeft,\n  arrowRight,\n  arrowUp,\n  endKey,\n  homeKey,\n} from '../common/controllers/key-bindings.js';\nimport { addSlotController, setSlots } from '../common/controllers/slot.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport type { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport {\n  addSafeEventListener,\n  first,\n  getElementFromPath,\n  getRoot,\n  isLTR,\n  last,\n  wrap,\n} from '../common/util.js';\nimport type {\n  HorizontalTransitionAnimation,\n  StepperOrientation,\n  StepperStepType,\n  StepperTitlePosition,\n  StepperVerticalAnimation,\n} from '../types.js';\nimport { STEPPER_CONTEXT } from './common/context.js';\nimport { createStepperState } from './common/state.js';\nimport type {\n  IgcActiveStepChangedEventArgs,\n  IgcActiveStepChangingEventArgs,\n  IgcStepperComponentEventMap,\n} from './common/types.js';\nimport IgcStepComponent from './step.js';\nimport { styles } from './themes/stepper/stepper.base.css.js';\nimport { styles as bootstrap } from './themes/stepper/stepper.bootstrap.css.js';\nimport { styles as fluent } from './themes/stepper/stepper.fluent.css.js';\nimport { styles as indigo } from './themes/stepper/stepper.indigo.css.js';\n\nconst STEPPER_SYNC_PROPERTIES: (keyof IgcStepperComponent)[] = [\n  'orientation',\n  'stepType',\n  'contentTop',\n  'verticalAnimation',\n  'horizontalAnimation',\n  'animationDuration',\n  'titlePosition',\n];\n\n/**\n * A stepper component that provides a wizard-like workflow by dividing content into logical steps.\n *\n * @remarks\n * The stepper component allows the user to navigate between multiple `igc-step` elements.\n * It supports horizontal and vertical orientation, linear and non-linear navigation,\n * keyboard navigation, and provides API methods to control the active step.\n *\n * In linear mode, the user can only advance to the next step if the current step is valid\n * (not marked as `invalid`).\n *\n * @element igc-stepper\n *\n * @slot - Renders `igc-step` components inside the default slot.\n *\n * @fires igcActiveStepChanging - Emitted when the active step is about to change. Cancelable.\n * @fires igcActiveStepChanged - Emitted after the active step has changed.\n *\n * @example\n * ```html\n * <igc-stepper>\n *   <igc-step>\n *     <span slot=\"title\">Step 1</span>\n *     <p>Step 1 content</p>\n *   </igc-step>\n *   <igc-step>\n *     <span slot=\"title\">Step 2</span>\n *     <p>Step 2 content</p>\n *   </igc-step>\n * </igc-stepper>\n * ```\n *\n * @example Linear stepper with vertical orientation\n * ```html\n * <igc-stepper orientation=\"vertical\" linear>\n *   <igc-step complete>\n *     <span slot=\"title\">Completed step</span>\n *     <p>This step is already complete.</p>\n *   </igc-step>\n *   <igc-step active>\n *     <span slot=\"title\">Current step</span>\n *     <p>Fill in the details to proceed.</p>\n *   </igc-step>\n *   <igc-step>\n *     <span slot=\"title\">Next step</span>\n *     <p>Upcoming content.</p>\n *   </igc-step>\n * </igc-stepper>\n * ```\n */\nexport default class IgcStepperComponent extends EventEmitterMixin<\n  IgcStepperComponentEventMap,\n  Constructor<LitElement>\n>(LitElement) {\n  public static readonly tagName = 'igc-stepper';\n  public static styles = styles;\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcStepperComponent, IgcStepComponent);\n  }\n\n  //#region Internal state and properties\n\n  private readonly _state = createStepperState();\n\n  private readonly _contextProvider = new ContextProvider(this, {\n    context: STEPPER_CONTEXT,\n    initialValue: {\n      stepper: this,\n      state: this._state,\n    },\n  });\n\n  private readonly _internals = addInternalsController(this, {\n    initialARIA: {\n      role: 'tablist',\n    },\n  });\n\n  private readonly _slots = addSlotController(this, {\n    slots: setSlots(),\n    onChange: this._handleSlotChange,\n  });\n\n  private get _isHorizontal(): boolean {\n    return this.orientation === 'horizontal';\n  }\n\n  //#endregion\n\n  //#region Public attributes and properties\n\n  /** Returns all of the stepper's steps. */\n  public get steps(): readonly IgcStepComponent[] {\n    return this._state.steps;\n  }\n\n  /**\n   * The orientation of the stepper.\n   *\n   * @attr orientation\n   * @default 'horizontal'\n   */\n  @property({ reflect: true })\n  public orientation: StepperOrientation = 'horizontal';\n\n  /**\n   * The visual type of the steps.\n   *\n   * @attr step-type\n   * @default 'full'\n   */\n  @property({ reflect: true, attribute: 'step-type' })\n  public stepType: StepperStepType = 'full';\n\n  /**\n   * Whether the stepper is linear.\n   *\n   * @remarks\n   * If the stepper is in linear mode and if the active step is valid only then the user is able to move forward.\n   *\n   * @attr linear\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  public linear = false;\n\n  /**\n   * Whether the content is displayed above the steps.\n   *\n   * @attr content-top\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'content-top' })\n  public contentTop = false;\n\n  /**\n   * The animation type when in vertical mode.\n   *\n   * @attr vertical-animation\n   * @default 'grow'\n   */\n  @property({ attribute: 'vertical-animation' })\n  public verticalAnimation: StepperVerticalAnimation = 'grow';\n\n  /**\n   * The animation type when in horizontal mode.\n   *\n   * @attr horizontal-animation\n   * @default 'slide'\n   */\n  @property({ attribute: 'horizontal-animation' })\n  public horizontalAnimation: HorizontalTransitionAnimation = 'slide';\n\n  /**\n   * The animation duration in either vertical or horizontal mode in milliseconds.\n   *\n   * @attr animation-duration\n   * @default 320\n   */\n  @property({ type: Number, attribute: 'animation-duration' })\n  public animationDuration = 320;\n\n  /**\n   * The position of the steps title.\n   *\n   * @remarks\n   * When the stepper is horizontally orientated the title is positioned below the indicator.\n   * When the stepper is vertically orientated the title is positioned on the right side of the indicator.\n   *\n   * @attr title-position\n   * @default 'auto'\n   */\n  @property({ reflect: false, attribute: 'title-position' })\n  public titlePosition: StepperTitlePosition = 'auto';\n\n  //#endregion\n\n  constructor() {\n    super();\n\n    addSafeEventListener(this, 'click', this._handleInteraction);\n\n    addThemingController(this, {\n      light: { bootstrap, fluent, indigo },\n      dark: { bootstrap, fluent, indigo },\n    });\n\n    addKeybindings(this, {\n      skip: this._skipKeyboard,\n    })\n      .set(arrowUp, this._handleArrowUp)\n      .set(arrowDown, this._handleArrowDown)\n      .set(arrowLeft, this._handleArrowLeft)\n      .set(arrowRight, this._handleArrowRight)\n      .set(homeKey, this._handleHomeKey)\n      .set(endKey, this._handleEndKey)\n      .setActivateHandler(this._handleInteraction);\n  }\n\n  //#region Lifecycle hooks\n\n  protected override update(properties: PropertyValues<this>): void {\n    this._syncStepperAttributes(properties);\n\n    if (properties.has('orientation')) {\n      this._internals.setARIA({ ariaOrientation: this.orientation });\n    }\n\n    if (properties.has('linear')) {\n      this._state.setVisitedState(this.linear);\n    }\n\n    if (\n      properties.has('horizontalAnimation') ||\n      properties.has('animationDuration')\n    ) {\n      const duration =\n        this.horizontalAnimation !== 'none' ? this.animationDuration : 0;\n\n      this.style.setProperty('--animation-duration', `${duration}ms`);\n    }\n\n    super.update(properties);\n  }\n\n  //#endregion\n\n  //#region Keyboard navigation handlers\n\n  private _skipKeyboard(_: Element, event: KeyboardEvent): boolean {\n    return !getElementFromPath('[data-step-header]', event);\n  }\n\n  private _handleHomeKey(): void {\n    this._getStepHeader(first(this._state.accessibleSteps))?.focus();\n  }\n\n  private _handleEndKey(): void {\n    this._getStepHeader(last(this._state.accessibleSteps))?.focus();\n  }\n\n  private _handleArrowDown(): void {\n    if (!this._isHorizontal) {\n      const step = this._getActiveStepComponent();\n\n      if (step) {\n        this._getStepHeader(this._getNextStep(step))?.focus();\n      }\n    }\n  }\n\n  private _handleArrowUp(): void {\n    if (!this._isHorizontal) {\n      const step = this._getActiveStepComponent();\n\n      if (step) {\n        this._getStepHeader(this._getPreviousStep(step))?.focus();\n      }\n    }\n  }\n\n  private _handleArrowLeft(): void {\n    const step = this._getActiveStepComponent();\n\n    if (step) {\n      const next = isLTR(this)\n        ? this._getPreviousStep(step)\n        : this._getNextStep(step);\n\n      this._getStepHeader(next)?.focus();\n    }\n  }\n\n  private _handleArrowRight(): void {\n    const step = this._getActiveStepComponent();\n\n    if (step) {\n      const next = isLTR(this)\n        ? this._getNextStep(step)\n        : this._getPreviousStep(step);\n\n      this._getStepHeader(next)?.focus();\n    }\n  }\n\n  //#endregion\n\n  //#region Event handlers\n\n  private _handleInteraction(event: Event): void {\n    const step = getElementFromPath(IgcStepComponent.tagName, event);\n\n    if (step && this._state.isAccessible(step)) {\n      this._activateStep(step);\n    }\n  }\n\n  private _handleSlotChange(): void {\n    this._state.setSteps(\n      this._slots.getAssignedElements('[default]', {\n        selector: IgcStepComponent.tagName,\n      })\n    );\n\n    this._state.stepsChanged();\n    this.style.setProperty('--steps-count', this.steps.length.toString());\n  }\n\n  //#endregion\n\n  //#region Internal methods\n\n  private _syncStepperAttributes(properties: PropertyValues<this>): void {\n    if (STEPPER_SYNC_PROPERTIES.some((p) => properties.has(p))) {\n      this._contextProvider.updateObservers();\n    }\n  }\n\n  private _animateSteps(\n    nextStep: IgcStepComponent,\n    currentStep: IgcStepComponent\n  ): void {\n    const steps = this._state.steps;\n\n    if (steps.indexOf(nextStep) > steps.indexOf(currentStep)) {\n      // Animate steps in ascending/next direction\n      currentStep.toggleAnimation('out');\n      nextStep.toggleAnimation('in');\n    } else {\n      // Animate steps in descending/previous direction\n      currentStep.toggleAnimation('in', 'reverse');\n      nextStep.toggleAnimation('out', 'reverse');\n    }\n  }\n\n  private _emitChanging(args: IgcActiveStepChangingEventArgs): boolean {\n    return this.emitEvent('igcActiveStepChanging', {\n      detail: args,\n      cancelable: true,\n    });\n  }\n\n  private _emitChanged(args: IgcActiveStepChangedEventArgs): void {\n    this.emitEvent('igcActiveStepChanged', {\n      detail: args,\n    });\n  }\n\n  private _activateStep(step: IgcStepComponent, shouldEmit = true): void {\n    if (step === this._state.activeStep) {\n      return;\n    }\n\n    if (!shouldEmit) {\n      this._state.changeActiveStep(step);\n      return;\n    }\n\n    const steps = this._state.steps;\n    const activeIndex = steps.indexOf(this._state.activeStep!);\n    const index = steps.indexOf(step);\n\n    const args = { oldIndex: activeIndex, newIndex: index };\n\n    if (!this._emitChanging(args)) {\n      return;\n    }\n\n    if (this._state.activeStep) {\n      this._animateSteps(step, this._state.activeStep);\n    }\n\n    this._state.changeActiveStep(step);\n    this._emitChanged({ index });\n  }\n\n  private _moveToNextStep(next = true): void {\n    const step = this._state.getAdjacentStep(next);\n\n    if (step) {\n      if (this._state.activeStep) {\n        this._animateSteps(step, this._state.activeStep);\n      }\n      this._state.changeActiveStep(step);\n    }\n  }\n\n  private _getNextStep(step: IgcStepComponent): IgcStepComponent {\n    const steps = this._state.accessibleSteps;\n    const next = wrap(0, steps.length - 1, steps.indexOf(step) + 1);\n\n    return steps[next];\n  }\n\n  private _getPreviousStep(step: IgcStepComponent): IgcStepComponent {\n    const steps = this._state.accessibleSteps;\n    const previous = wrap(0, steps.length - 1, steps.indexOf(step) - 1);\n\n    return steps[previous];\n  }\n\n  private _getActiveStepComponent(): IgcStepComponent | null {\n    const active = getRoot(this).activeElement;\n    return active ? active.closest(IgcStepComponent.tagName) : null;\n  }\n\n  private _getStepHeader(step?: IgcStepComponent): HTMLElement | null {\n    return step?.renderRoot.querySelector('[data-step-header]') ?? null;\n  }\n\n  //#endregion\n\n  //#region Public API\n\n  /** Activates the step at a given index. */\n  public navigateTo(index: number): void {\n    const step = this._state.steps[index];\n\n    if (step) {\n      this._activateStep(step, false);\n    }\n  }\n\n  /** Activates the next enabled step. */\n  public next(): void {\n    this._moveToNextStep();\n  }\n\n  /** Activates the previous enabled step. */\n  public prev(): void {\n    this._moveToNextStep(false);\n  }\n\n  /**\n   * Resets the stepper to its initial state i.e. activates the first step.\n   *\n   * @remarks\n   * The steps' content will not be automatically reset.\n   */\n  public reset(): void {\n    this._state.reset();\n  }\n\n  //#endregion\n\n  protected override render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-stepper': IgcStepperComponent;\n  }\n}\n"]}
+{"version":3,"file":"stepper.js","sourceRoot":"","sources":["../../../src/components/stepper/stepper.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, type PropertyValues } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { addContextProvider } from '#internals/controllers/context-provider.js';\nimport { addInternalsController } from '#internals/controllers/internals.js';\nimport { addRovingFocusController } from '#internals/controllers/roving-focus.js';\nimport { addSlotController, setSlots } from '#internals/controllers/slot.js';\nimport { registerComponent } from '#internals/definitions/register.js';\nimport type { Constructor } from '#internals/mixins/constructor.js';\nimport { EventEmitterMixin } from '#internals/mixins/event-emitter.js';\nimport { getRoot } from '#internals/utils/dom.js';\nimport {\n  addSafeEventListener,\n  getElementFromPath,\n} from '#internals/utils/events.js';\nimport { addThemingController } from '#theming/theming-controller.js';\nimport type {\n  HorizontalTransitionAnimation,\n  StepperOrientation,\n  StepperStepType,\n  StepperTitlePosition,\n  StepperVerticalAnimation,\n} from '../types.js';\nimport { STEPPER_CONTEXT } from './common/context.js';\nimport { createStepperState } from './common/state.js';\nimport type {\n  IgcActiveStepChangedEventArgs,\n  IgcActiveStepChangingEventArgs,\n  IgcStepperComponentEventMap,\n} from './common/types.js';\nimport IgcStepComponent from './step.js';\nimport { styles } from './themes/stepper/stepper.base.css.js';\nimport { styles as bootstrap } from './themes/stepper/stepper.bootstrap.css.js';\nimport { styles as fluent } from './themes/stepper/stepper.fluent.css.js';\nimport { styles as indigo } from './themes/stepper/stepper.indigo.css.js';\n\n/** Property changes that the stepper republishes its context for. */\nconst STEPPER_SYNC_PROPERTIES: (keyof IgcStepperComponent)[] = [\n  'orientation',\n  'stepType',\n  'contentTop',\n  'verticalAnimation',\n  'horizontalAnimation',\n  'animationDuration',\n  'titlePosition',\n];\n\n/**\n * A stepper component that provides a wizard-like workflow by dividing content into logical steps.\n *\n * @remarks\n * The stepper component allows the user to navigate between multiple step children.\n * It supports horizontal and vertical orientation, linear and non-linear navigation,\n * keyboard navigation, and provides API methods to control the active step.\n *\n * In linear mode, the user can only advance to the next step if the current step is valid\n * (not marked as `invalid`).\n *\n * @element igc-stepper\n *\n * @slot - Renders the steps of the stepper inside the default slot.\n *\n * @fires igcActiveStepChanging - Emitted when the active step is about to change. Cancelable.\n * @fires igcActiveStepChanged - Emitted after the active step has changed.\n *\n * @example\n * ```html\n * <igc-stepper>\n *   <igc-step>\n *     <span slot=\"title\">Step 1</span>\n *     <p>Step 1 content</p>\n *   </igc-step>\n *   <igc-step>\n *     <span slot=\"title\">Step 2</span>\n *     <p>Step 2 content</p>\n *   </igc-step>\n * </igc-stepper>\n * ```\n *\n * @example Linear stepper with vertical orientation\n * ```html\n * <igc-stepper orientation=\"vertical\" linear>\n *   <igc-step complete>\n *     <span slot=\"title\">Completed step</span>\n *     <p>This step is already complete.</p>\n *   </igc-step>\n *   <igc-step active>\n *     <span slot=\"title\">Current step</span>\n *     <p>Fill in the details to proceed.</p>\n *   </igc-step>\n *   <igc-step>\n *     <span slot=\"title\">Next step</span>\n *     <p>Upcoming content.</p>\n *   </igc-step>\n * </igc-stepper>\n * ```\n */\nexport default class IgcStepperComponent extends EventEmitterMixin<\n  IgcStepperComponentEventMap,\n  Constructor<LitElement>\n>(LitElement) {\n  public static readonly tagName = 'igc-stepper';\n  public static styles = styles;\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcStepperComponent, IgcStepComponent);\n  }\n\n  //#region Internal state and properties\n\n  private readonly _state = createStepperState();\n\n  private readonly _slots = addSlotController(this, {\n    slots: setSlots(),\n    onChange: this._handleSlotChange,\n  });\n\n  private get _isHorizontal(): boolean {\n    return this.orientation === 'horizontal';\n  }\n\n  //#endregion\n\n  //#region Public attributes and properties\n\n  /** Returns all of the stepper's steps. */\n  public get steps(): readonly IgcStepComponent[] {\n    return this._state.steps;\n  }\n\n  /**\n   * The orientation of the stepper.\n   *\n   * @attr orientation\n   * @default 'horizontal'\n   */\n  @property({ reflect: true })\n  public orientation: StepperOrientation = 'horizontal';\n\n  /**\n   * The visual type of the steps.\n   *\n   * @attr step-type\n   * @default 'full'\n   */\n  @property({ reflect: true, attribute: 'step-type' })\n  public stepType: StepperStepType = 'full';\n\n  /**\n   * Whether the stepper is linear.\n   *\n   * @remarks\n   * If the stepper is in linear mode and if the active step is valid only then the user is able to move forward.\n   *\n   * @attr linear\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  public linear = false;\n\n  /**\n   * Whether the content is displayed above the steps.\n   *\n   * @attr content-top\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'content-top' })\n  public contentTop = false;\n\n  /**\n   * The animation type when in vertical mode.\n   *\n   * @attr vertical-animation\n   * @default 'grow'\n   */\n  @property({ attribute: 'vertical-animation' })\n  public verticalAnimation: StepperVerticalAnimation = 'grow';\n\n  /**\n   * The animation type when in horizontal mode.\n   *\n   * @attr horizontal-animation\n   * @default 'slide'\n   */\n  @property({ attribute: 'horizontal-animation' })\n  public horizontalAnimation: HorizontalTransitionAnimation = 'slide';\n\n  /**\n   * The animation duration in either vertical or horizontal mode in milliseconds.\n   *\n   * @attr animation-duration\n   * @default 320\n   */\n  @property({ type: Number, attribute: 'animation-duration' })\n  public animationDuration = 320;\n\n  /**\n   * The position of the steps title.\n   *\n   * @remarks\n   * When the stepper is horizontally orientated the title is positioned below the indicator.\n   * When the stepper is vertically orientated the title is positioned on the right side of the indicator.\n   *\n   * @attr title-position\n   * @default 'auto'\n   */\n  @property({ reflect: false, attribute: 'title-position' })\n  public titlePosition: StepperTitlePosition = 'auto';\n\n  //#endregion\n\n  constructor() {\n    super();\n\n    addSafeEventListener(this, 'click', this._handleInteraction);\n\n    addInternalsController(this, {\n      initialARIA: { role: 'tablist' },\n      aria: () => ({ ariaOrientation: this.orientation }),\n    });\n\n    const context = { stepper: this, state: this._state };\n\n    addContextProvider(this, {\n      context: STEPPER_CONTEXT,\n      watch: STEPPER_SYNC_PROPERTIES,\n      value: () => context,\n    });\n\n    addThemingController(this, {\n      light: { bootstrap, fluent, indigo },\n      dark: { bootstrap, fluent, indigo },\n    });\n\n    addRovingFocusController(this, {\n      keybindings: { skip: this._skipKeyboard },\n      items: () => this._state.accessibleSteps,\n      current: () => this._getActiveStepComponent(),\n      vertical: () => !this._isHorizontal,\n      focusItem: (step) => this._getStepHeader(step)?.focus(),\n      activateItem: (step) => this._activateStep(step),\n    });\n  }\n\n  //#region Lifecycle hooks\n\n  protected override update(properties: PropertyValues<this>): void {\n    if (properties.has('linear')) {\n      this._state.setVisitedState(this.linear);\n    }\n\n    if (\n      properties.has('horizontalAnimation') ||\n      properties.has('animationDuration')\n    ) {\n      const duration =\n        this.horizontalAnimation !== 'none' ? this.animationDuration : 0;\n\n      this.style.setProperty('--animation-duration', `${duration}ms`);\n    }\n\n    super.update(properties);\n  }\n\n  //#endregion\n\n  //#region Keyboard navigation handlers\n\n  private _skipKeyboard(_: Element, event: KeyboardEvent): boolean {\n    return !getElementFromPath('[data-step-header]', event);\n  }\n\n  //#endregion\n\n  //#region Event handlers\n\n  private _handleInteraction(event: Event): void {\n    const step = getElementFromPath(IgcStepComponent.tagName, event);\n\n    if (step && this._state.isAccessible(step)) {\n      this._activateStep(step);\n    }\n  }\n\n  private _handleSlotChange(): void {\n    this._state.setSteps(\n      this._slots.getAssignedElements('[default]', {\n        selector: IgcStepComponent.tagName,\n      })\n    );\n\n    this._state.stepsChanged();\n    this.style.setProperty('--steps-count', this.steps.length.toString());\n  }\n\n  //#endregion\n\n  //#region Internal methods\n\n  private _animateSteps(\n    nextStep: IgcStepComponent,\n    currentStep: IgcStepComponent\n  ): void {\n    const steps = this._state.steps;\n\n    if (steps.indexOf(nextStep) > steps.indexOf(currentStep)) {\n      // Animate steps in ascending/next direction\n      currentStep.toggleAnimation('out');\n      nextStep.toggleAnimation('in');\n    } else {\n      // Animate steps in descending/previous direction\n      currentStep.toggleAnimation('in', 'reverse');\n      nextStep.toggleAnimation('out', 'reverse');\n    }\n  }\n\n  private _emitChanging(args: IgcActiveStepChangingEventArgs): boolean {\n    return this.emitEvent('igcActiveStepChanging', {\n      detail: args,\n      cancelable: true,\n    });\n  }\n\n  private _emitChanged(args: IgcActiveStepChangedEventArgs): void {\n    this.emitEvent('igcActiveStepChanged', {\n      detail: args,\n    });\n  }\n\n  private _activateStep(step: IgcStepComponent, shouldEmit = true): void {\n    if (step === this._state.activeStep) {\n      return;\n    }\n\n    if (!shouldEmit) {\n      this._state.changeActiveStep(step);\n      return;\n    }\n\n    const steps = this._state.steps;\n    const activeIndex = steps.indexOf(this._state.activeStep!);\n    const index = steps.indexOf(step);\n\n    const args = { oldIndex: activeIndex, newIndex: index };\n\n    if (!this._emitChanging(args)) {\n      return;\n    }\n\n    if (this._state.activeStep) {\n      this._animateSteps(step, this._state.activeStep);\n    }\n\n    this._state.changeActiveStep(step);\n    this._emitChanged({ index });\n  }\n\n  private _moveToNextStep(next = true): void {\n    const step = this._state.getAdjacentStep(next);\n\n    if (step) {\n      if (this._state.activeStep) {\n        this._animateSteps(step, this._state.activeStep);\n      }\n      this._state.changeActiveStep(step);\n    }\n  }\n\n  private _getActiveStepComponent(): IgcStepComponent | null {\n    const active = getRoot(this).activeElement;\n    return active ? active.closest(IgcStepComponent.tagName) : null;\n  }\n\n  private _getStepHeader(step?: IgcStepComponent): HTMLElement | null {\n    return step?.renderRoot.querySelector('[data-step-header]') ?? null;\n  }\n\n  //#endregion\n\n  //#region Public API\n\n  /** Activates the step at a given index. */\n  public navigateTo(index: number): void {\n    const step = this._state.steps[index];\n\n    if (step) {\n      this._activateStep(step, false);\n    }\n  }\n\n  /** Activates the next enabled step. */\n  public next(): void {\n    this._moveToNextStep();\n  }\n\n  /** Activates the previous enabled step. */\n  public prev(): void {\n    this._moveToNextStep(false);\n  }\n\n  /**\n   * Resets the stepper to its initial state, i.e. activates the first step.\n   *\n   * @remarks\n   * The steps' content will not be automatically reset.\n   */\n  public reset(): void {\n    this._state.reset();\n  }\n\n  //#endregion\n\n  protected override render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-stepper': IgcStepperComponent;\n  }\n}\n"]}

package/components/stepper/themes/step/themes.d.ts

@@ -1,2 +1,2 @@
-import type { Themes } from '../../../../theming/types.js';
+import type { Themes } from '#theming/types.js';
 export declare const all: Themes;

package/components/stepper/themes/step/themes.js.map

@@ -1 +1 @@
-{"version":3,"file":"themes.js","sourceRoot":"","sources":["../../../../../src/components/stepper/themes/step/themes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAI1B,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,8BAA8B,CAAC;AACvE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,6BAA6B,CAAC;AACrE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAEjE,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,+BAA+B,CAAC;AACzE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACnE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACnE,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,8BAA8B,CAAC;AACvE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAEnE,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAE/D,MAAM,KAAK,GAAG;IACZ,MAAM,EAAE,GAAG,CAAA;MACP,WAAW;GACd;IACD,SAAS,EAAE,GAAG,CAAA;MACV,SAAS,IAAI,cAAc;GAC9B;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,aAAa;GAChB;IACD,MAAM,EAAE,GAAG,CAAA;MACP,WAAW;GACd;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,WAAW;GACxB;CACF,CAAC;AAEF,MAAM,IAAI,GAAG;IACX,MAAM,EAAE,GAAG,CAAA;MACP,UAAU;GACb;IACD,SAAS,EAAE,GAAG,CAAA;MACV,SAAS,IAAI,aAAa;GAC7B;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,YAAY;GACf;IACD,MAAM,EAAE,GAAG,CAAA;MACP,UAAU;GACb;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,UAAU;GACvB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAW,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC","sourcesContent":["import { css } from 'lit';\n\nimport type { Themes } from '../../../../theming/types.js';\n// Dark Overrides\nimport { styles as bootstrapDark } from './dark/step.bootstrap.css.js';\nimport { styles as fluentDark } from './dark/step.fluent.css.js';\nimport { styles as indigoDark } from './dark/step.indigo.css.js';\nimport { styles as materialDark } from './dark/step.material.css.js';\nimport { styles as sharedDark } from './dark/step.shared.css.js';\n// Light Overrides\nimport { styles as bootstrapLight } from './light/step.bootstrap.css.js';\nimport { styles as fluentLight } from './light/step.fluent.css.js';\nimport { styles as indigoLight } from './light/step.indigo.css.js';\nimport { styles as materialLight } from './light/step.material.css.js';\nimport { styles as sharedLight } from './light/step.shared.css.js';\n// Shared Styles\nimport { styles as bootstrap } from './shared/step.bootstrap.css.js';\nimport { styles as indigo } from './shared/step.indigo.css.js';\n\nconst light = {\n  shared: css`\n    ${sharedLight}\n  `,\n  bootstrap: css`\n    ${bootstrap} ${bootstrapLight}\n  `,\n  material: css`\n    ${materialLight}\n  `,\n  fluent: css`\n    ${fluentLight}\n  `,\n  indigo: css`\n    ${indigo} ${indigoLight}\n  `,\n};\n\nconst dark = {\n  shared: css`\n    ${sharedDark}\n  `,\n  bootstrap: css`\n    ${bootstrap} ${bootstrapDark}\n  `,\n  material: css`\n    ${materialDark}\n  `,\n  fluent: css`\n    ${fluentDark}\n  `,\n  indigo: css`\n    ${indigo} ${indigoDark}\n  `,\n};\n\nexport const all: Themes = { light, dark };\n"]}
+{"version":3,"file":"themes.js","sourceRoot":"","sources":["../../../../../src/components/stepper/themes/step/themes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAI1B,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,8BAA8B,CAAC;AACvE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,6BAA6B,CAAC;AACrE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAEjE,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,+BAA+B,CAAC;AACzE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACnE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACnE,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,8BAA8B,CAAC;AACvE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAEnE,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAE/D,MAAM,KAAK,GAAG;IACZ,MAAM,EAAE,GAAG,CAAA;MACP,WAAW;GACd;IACD,SAAS,EAAE,GAAG,CAAA;MACV,SAAS,IAAI,cAAc;GAC9B;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,aAAa;GAChB;IACD,MAAM,EAAE,GAAG,CAAA;MACP,WAAW;GACd;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,WAAW;GACxB;CACF,CAAC;AAEF,MAAM,IAAI,GAAG;IACX,MAAM,EAAE,GAAG,CAAA;MACP,UAAU;GACb;IACD,SAAS,EAAE,GAAG,CAAA;MACV,SAAS,IAAI,aAAa;GAC7B;IACD,QAAQ,EAAE,GAAG,CAAA;MACT,YAAY;GACf;IACD,MAAM,EAAE,GAAG,CAAA;MACP,UAAU;GACb;IACD,MAAM,EAAE,GAAG,CAAA;MACP,MAAM,IAAI,UAAU;GACvB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAW,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC","sourcesContent":["import { css } from 'lit';\n\nimport type { Themes } from '#theming/types.js';\n// Dark Overrides\nimport { styles as bootstrapDark } from './dark/step.bootstrap.css.js';\nimport { styles as fluentDark } from './dark/step.fluent.css.js';\nimport { styles as indigoDark } from './dark/step.indigo.css.js';\nimport { styles as materialDark } from './dark/step.material.css.js';\nimport { styles as sharedDark } from './dark/step.shared.css.js';\n// Light Overrides\nimport { styles as bootstrapLight } from './light/step.bootstrap.css.js';\nimport { styles as fluentLight } from './light/step.fluent.css.js';\nimport { styles as indigoLight } from './light/step.indigo.css.js';\nimport { styles as materialLight } from './light/step.material.css.js';\nimport { styles as sharedLight } from './light/step.shared.css.js';\n// Shared Styles\nimport { styles as bootstrap } from './shared/step.bootstrap.css.js';\nimport { styles as indigo } from './shared/step.indigo.css.js';\n\nconst light = {\n  shared: css`\n    ${sharedLight}\n  `,\n  bootstrap: css`\n    ${bootstrap} ${bootstrapLight}\n  `,\n  material: css`\n    ${materialLight}\n  `,\n  fluent: css`\n    ${fluentLight}\n  `,\n  indigo: css`\n    ${indigo} ${indigoLight}\n  `,\n};\n\nconst dark = {\n  shared: css`\n    ${sharedDark}\n  `,\n  bootstrap: css`\n    ${bootstrap} ${bootstrapDark}\n  `,\n  material: css`\n    ${materialDark}\n  `,\n  fluent: css`\n    ${fluentDark}\n  `,\n  indigo: css`\n    ${indigo} ${indigoDark}\n  `,\n};\n\nexport const all: Themes = { light, dark };\n"]}

package/components/tabs/tab-dom.d.ts

@@ -1,8 +1,15 @@
 import type { Ref } from 'lit/directives/ref.js';
 import type IgcTabComponent from './tab.js';
 import type IgcTabsComponent from './tabs.js';
+type TabsStyleProperties = {
+    '--_tabs-count': string;
+    '--_ig-tabs-width': string;
+};
+type ScrollButtonsState = {
+    start: boolean;
+    end: boolean;
+};
 declare class TabsHelpers {
-    private static readonly SCROLL_AMOUNT;
     private readonly _host;
     private readonly _container;
     private readonly _indicator;
@@ -10,45 +17,40 @@ declare class TabsHelpers {
     private _hasScrollButtons;
     private _scrollButtonsDisabled;
     private _isLeftToRight;
-    /**
-     * Returns the DOM container holding the tabs headers.
-     */
+    /** The DOM container holding the tab headers. */
     get container(): HTMLElement | undefined;
-    /**
-     * Returns the selected indicator DOM element.
-     */
+    /** The selected tab indicator element. */
     get indicator(): HTMLElement | undefined;
-    /**
-     * Returns the internal CSS variables used for the layout of the tabs component.
-     */
-    get styleProperties(): {
-        '--_tabs-count': string;
-        '--_ig-tabs-width': string;
-    };
-    /**
-     * Whether the scroll buttons of the tabs header strip should be shown.
-     */
+    /** The internal CSS variables driving the layout of the tabs component. */
+    get styleProperties(): TabsStyleProperties;
+    /** Whether the header strip overflows and needs its scroll buttons. */
     get hasScrollButtons(): boolean;
-    /**
-     * Returns the disabled state of the tabs header strip scroll buttons.
-     */
-    get scrollButtonsDisabled(): {
-        start: boolean;
-        end: boolean;
-    };
-    get isLeftToRightChanged(): boolean;
+    /** The disabled state of the header strip scroll buttons. */
+    get scrollButtonsDisabled(): ScrollButtonsState;
     constructor(host: IgcTabsComponent, container: Ref<HTMLElement>, indicator: Ref<HTMLElement>);
     /**
      * Sets the internal CSS variables used for the layout of the tabs component.
-     * Triggers an update cycle (rerender) of the `igc-tabs` component.
+     * Triggers an update cycle (rerender) of the `igc-tabs` component if needed.
      */
     setStyleProperties(): void;
+    checkAndUpdateDirection(): boolean;
     /**
      * Sets the type of the `scroll-snap-align` CSS property for the tabs header strip.
      */
     setScrollSnap(type?: 'start' | 'end'): void;
     /**
-     * Scrolls the tabs header strip in the given direction with `scroll-snap-align` set.
+     * The horizontal bounds of the strip that are not covered by the sticky scroll
+     * buttons, which is the area a tab has to fit in to count as being in view.
+     */
+    private _getVisibleBounds;
+    /**
+     * The distance needed to bring the closest tab that is not fully in view for the
+     * given direction inside the visible bounds, or `0` when every tab is in view.
+     */
+    private _getScrollOffset;
+    /**
+     * Scrolls the tabs header strip to the closest tab that is out of view in the given
+     * direction, with `scroll-snap-align` set.
      */
     scrollTabs(direction: 'start' | 'end'): void;
     /**
@@ -62,5 +64,6 @@ declare class TabsHelpers {
     setIndicator(active?: IgcTabComponent): Promise<void>;
 }
 export declare function createTabHelpers(host: IgcTabsComponent, container: Ref<HTMLElement>, indicator: Ref<HTMLElement>): TabsHelpers;
-export declare function getTabHeader(tab: IgcTabComponent): HTMLElement;
+/** Returns the header element of the given tab, or `null` if it has not rendered yet. */
+export declare function getTabHeader(tab: IgcTabComponent): HTMLElement | null;
 export {};

package/components/tabs/tab-dom.js

@@ -1,6 +1,7 @@
-import { getScaleFactor, isLTR, setStyles } from '../common/util.js';
+import { getScaleFactor, isLTR, setStyles } from '#internals/utils/dom.js';
+import { asNumber } from '#internals/utils/math.js';
+const EDGE_TOLERANCE = 1;
 class TabsHelpers {
-    static { this.SCROLL_AMOUNT = 180; }
     get container() {
         return this._container.value;
     }
@@ -16,76 +17,125 @@ class TabsHelpers {
     get scrollButtonsDisabled() {
         return this._scrollButtonsDisabled;
     }
-    get isLeftToRightChanged() {
-        const isLeftToRight = isLTR(this._host);
-        if (this._isLeftToRight !== isLeftToRight) {
-            this._isLeftToRight = isLeftToRight;
-            return true;
-        }
-        return false;
-    }
     constructor(host, container, indicator) {
         this._styleProperties = {
             '--_tabs-count': '',
             '--_ig-tabs-width': '',
         };
         this._hasScrollButtons = false;
-        this._scrollButtonsDisabled = { start: true, end: false };
+        this._scrollButtonsDisabled = {
+            start: true,
+            end: false,
+        };
         this._isLeftToRight = false;
         this._host = host;
         this._container = container;
         this._indicator = indicator;
     }
     setStyleProperties() {
+        const count = String(this._host.tabs.length);
+        const width = this.container
+            ? `${this.container.getBoundingClientRect().width}px`
+            : '';
+        const current = this._styleProperties;
+        if (current['--_tabs-count'] === count &&
+            current['--_ig-tabs-width'] === width) {
+            return;
+        }
         this._styleProperties = {
-            '--_tabs-count': this._host.tabs.length.toString(),
-            '--_ig-tabs-width': this.container
-                ? `${this.container.getBoundingClientRect().width}px`
-                : '',
+            '--_tabs-count': count,
+            '--_ig-tabs-width': width,
         };
         this._host.requestUpdate();
     }
+    checkAndUpdateDirection() {
+        const isLeftToRight = isLTR(this._host);
+        if (this._isLeftToRight !== isLeftToRight) {
+            this._isLeftToRight = isLeftToRight;
+            return true;
+        }
+        return false;
+    }
     setScrollSnap(type) {
         if (this.container) {
             this.container.style.setProperty('--_ig-tab-snap', type || 'unset');
         }
     }
+    _getVisibleBounds(container) {
+        const { scrollPaddingInlineStart, scrollPaddingInlineEnd } = getComputedStyle(container);
+        const { left, right } = container.getBoundingClientRect();
+        const start = asNumber(scrollPaddingInlineStart);
+        const end = asNumber(scrollPaddingInlineEnd);
+        return isLTR(this._host)
+            ? { min: left + start, max: right - end }
+            : { min: left + end, max: right - start };
+    }
+    _getScrollOffset(container, direction) {
+        const isEnd = direction === 'end';
+        const { min, max } = this._getVisibleBounds(container);
+        const useRightEdge = isEnd === isLTR(this._host);
+        const isOutOfView = (header) => {
+            const { left, right } = header.getBoundingClientRect();
+            return useRightEdge
+                ? right > max + EDGE_TOLERANCE
+                : left < min - EDGE_TOLERANCE;
+        };
+        const headers = this._host.tabs
+            .map((tab) => getTabHeader(tab))
+            .filter((header) => header !== null);
+        const target = isEnd
+            ? headers.find(isOutOfView)
+            : headers.findLast(isOutOfView);
+        if (!target) {
+            return 0;
+        }
+        const { left, right } = target.getBoundingClientRect();
+        return useRightEdge ? right - max : left - min;
+    }
     scrollTabs(direction) {
-        if (!this.container) {
+        const container = this.container;
+        if (!container) {
+            return;
+        }
+        const offset = this._getScrollOffset(container, direction);
+        if (!offset) {
             return;
         }
-        const factor = isLTR(this._host) ? 1 : -1;
-        const amount = direction === 'start'
-            ? -TabsHelpers.SCROLL_AMOUNT
-            : TabsHelpers.SCROLL_AMOUNT;
         this.setScrollSnap(direction);
-        this.container.scrollBy({ left: factor * amount, behavior: 'smooth' });
+        container.scrollBy({ left: offset, behavior: 'smooth' });
     }
     setScrollButtonState() {
         if (!this.container) {
             return;
         }
         const { scrollLeft, scrollWidth, clientWidth } = this.container;
-        this._hasScrollButtons = scrollWidth > clientWidth;
-        this._scrollButtonsDisabled = {
-            start: scrollLeft === 0,
-            end: Math.abs(Math.abs(scrollLeft) + clientWidth - scrollWidth) <= 1,
-        };
+        const disabled = this._scrollButtonsDisabled;
+        const hasScrollButtons = scrollWidth > clientWidth;
+        const start = Math.abs(scrollLeft) <= 1;
+        const end = Math.abs(Math.abs(scrollLeft) + clientWidth - scrollWidth) <= 1;
+        if (this._hasScrollButtons === hasScrollButtons &&
+            disabled.start === start &&
+            disabled.end === end) {
+            return;
+        }
+        this._hasScrollButtons = hasScrollButtons;
+        this._scrollButtonsDisabled = { start, end };
         this._host.requestUpdate();
     }
     async setIndicator(active) {
-        if (!(this.container && this.indicator)) {
+        await this._host.updateComplete;
+        const { container, indicator } = this;
+        if (!(container && indicator)) {
             return;
         }
+        const header = active ? getTabHeader(active) : null;
         const styles = {
-            visibility: active ? 'visible' : 'hidden',
+            visibility: header ? 'visible' : 'hidden',
         };
-        await this._host.updateComplete;
-        if (active) {
-            const header = getTabHeader(active);
-            const { offsetLeft: containerLeft, offsetWidth: containerWidth } = this.container;
+        if (header) {
+            const { offsetLeft: containerLeft, offsetWidth: containerWidth } = container;
             const scaledWidth = header.getBoundingClientRect().width * getScaleFactor(header).x;
-            const offset = this._isLeftToRight
+            const offset = isLTR(this._host)
                 ? header.offsetLeft - containerLeft
                 : header.offsetLeft + scaledWidth - containerWidth;
             Object.assign(styles, {
@@ -93,7 +143,7 @@ class TabsHelpers {
                 transform: `translateX(${offset}px)`,
             });
         }
-        setStyles(this.indicator, styles);
+        setStyles(indicator, styles);
     }
 }
 export function createTabHelpers(host, container, indicator) {