igniteui-webcomponents 7.1.2 → 7.1.3

package/CHANGELOG.md

@@ -4,6 +4,15 @@ 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/).
 
+## [7.1.3] - 2026-04-28
+### Changed
+- #### AI-Assisted Development
+  - Updated and enhanced the library provided skills [#2207](https://github.com/IgniteUI/igniteui-webcomponents/pull/2207)
+
+### Fixed
+- #### Stepper
+  - In horizontal orientation, the content area height can now driven by the active step's content instead of always being sized to the tallest step. A new `--body-grid-rows` CSS custom property controls the internal row sizing of each step body — its default value of `1fr` expands the body to fit its content, while setting it to `0fr` collapses the body to zero height, enabling fully variable step heights. [#2209](https://github.com/IgniteUI/igniteui-webcomponents/issues/2209)
+
 ## [7.1.2] - 2026-04-22
 ### Changed
 - #### AI-Assisted Development
@@ -1306,6 +1315,7 @@ Initial release of Ignite UI Web Components
 - Ripple component
 - Switch component
 
+[7.1.3]: https://github.com/IgniteUI/igniteui-webcomponents/compare/7.1.2...7.1.3
 [7.1.2]: https://github.com/IgniteUI/igniteui-webcomponents/compare/7.1.1...7.1.2
 [7.1.1]: https://github.com/IgniteUI/igniteui-webcomponents/compare/7.1.0...7.1.1
 [7.1.0]: https://github.com/IgniteUI/igniteui-webcomponents/compare/7.0.1...7.1.0

package/components/stepper/stepper.js

@@ -93,6 +93,11 @@ export default class IgcStepperComponent extends EventEmitterMixin(LitElement) {
         if (properties.has('linear')) {
             this._state.setVisitedState(this.linear);
         }
+        if (properties.has('horizontalAnimation') ||
+            properties.has('animationDuration')) {
+            const duration = this.horizontalAnimation !== 'none' ? this.animationDuration : 0;
+            this.style.setProperty('--animation-duration', `${duration}ms`);
+        }
         super.update(properties);
     }
     _skipKeyboard(_, event) {

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    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 { 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"]}

package/components/stepper/themes/step/step.base.css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{align-items:flex-start}[part~=header-container],[part~=header]{width:var(--header-width-vertical, auto)}[part~=header-container]::before,[part~=header]::before{content:"";width:auto;flex:1;border-block-start-width:var(--separator-size);height:var(--separator-size);position:relative}[part~=header-container]{display:flex;pointer-events:none;position:relative;justify-content:center;z-index:0}[part~=header-container] [part~=header]{pointer-events:all;align-items:center}[part~=header-container] [part=indicator],[part~=header-container] [part=title],[part~=header-container] [part=subtitle]{pointer-events:none}[part~=header-container]::before{min-width:var(--separator-min-width);display:var(--hide-horizontal-separator, var(--horizontal-separator-display--first-of-type))}[part~=header]{display:flex;align-items:var(--align-items, flex-start);grid-row:var(--header-bottom, 1);position:relative;overflow:hidden;padding:var(--header-padding);justify-content:flex-start;gap:var(--header-gap);z-index:var(--vertical-header-z-index)}[part~=header]::before,[part~=header]::after{content:"";flex:1;border-block-start-width:var(--separator-size);height:var(--separator-size);min-width:var(--separator-min-width--header);width:calc(50% - var(--indicator-size)/2 - var(--header-padding));position:absolute;z-index:-1}[part~=header]::before{inset-inline-start:0;display:var(--hide-horizontal-separator, var(--separator-disply-not-full, var(--horizontal-separator-display--first-of-type)))}[part~=header]::after{inset-inline-end:0;display:var(--hide-horizontal-separator, var(--separator-disply-not-full, var(--horizontal-separator-display--last-of-type)))}[part~=header]:focus,[part~=header]:hover{cursor:pointer;outline:none}[part~=header]:hover::before,[part~=header]:hover::after{visibility:var(--header-separator-visibility--hover)}[part~=header]:focus::before,[part~=header]:focus::after,[part~=header]:focus-within::before,[part~=header]:focus-within::after,[part~=header]:active::before,[part~=header]:active::after{visibility:var(--header-separator-visibility--hover)}[part~=body]{display:block;grid-row-start:var(--body-top, 2);grid-column:1/span var(--steps-count);padding-inline-start:calc(var(--body-indent--vertical)/2);z-index:1;position:relative;overflow:hidden;width:0;height:var(--vertical-body-height, auto);min-width:100%}[part~=body]::before{display:var(--hide-last-separator, var(--hide-first-separator, var(--vertical-separator-visibility)));content:"";position:absolute;inset-inline-start:calc(var(--body-indent--vertical)/2 - var(--separator-size)/2);height:100%;inset-block-start:0 !important;border-inline-start-style:var(--separator-type);border-inline-start-width:var(--separator-size)}[part=content]{display:block;height:auto;overflow:auto;opacity:0}[part=content]>slot{display:block;padding-inline:var(--horizontal-body-padding, calc(var(--body-indent--vertical) / 2)) var(--horizontal-body-padding, var(--vertical-body-padding));padding-block:var(--horizontal-body-padding, var(--vertical-body-padding)) var(--horizontal-body-padding, var(--vertical-body-padding))}[part~=top]{align-items:var(--step-not-full-header-aligmnet, flex-end)}[part~=top]::before,[part~=top]::after{inset-block-end:var(--step-separator-position)}[part~=top] [part~=header]{align-items:var(--align-items, flex-start);flex-direction:column-reverse}[part~=top] [part~=header]::before,[part~=top] [part~=header]::after{inset-block-end:var(--step-separator-position)}[part~=bottom]{align-items:var(--step-not-full-header-aligmnet, start)}[part~=bottom]::before,[part~=bottom]::after{inset-block-start:var(--step-separator-position)}[part~=bottom] [part~=header]{align-items:var(--align-items, flex-start);flex-direction:column}[part~=bottom] [part~=header]::before,[part~=bottom] [part~=header]::after{inset-block-start:var(--step-separator-position)}[part~=top] [part~=text],[part~=bottom] [part~=text]{width:100%}[part~=start]{--align-text: end}[part~=start] [part=text]{order:-1}[part~=end]{--align-text: start}[part~=start],[part~=end]{align-items:center}[part~=start] [part~=text],[part~=end] [part~=text]{overflow:hidden}[part~=start] [part~=header]::before,[part~=start] [part~=header]::after,[part~=end] [part~=header]::before,[part~=end] [part~=header]::after{display:none}[part~=indicator]{font-family:var(--ig-caption-font-family, var(--ig-font-family));font-size:var(--ig-caption-font-size);font-weight:var(--ig-caption-font-weight);font-style:var(--ig-caption-font-style);line-height:var(--ig-caption-line-height);letter-spacing:var(--ig-caption-letter-spacing);text-transform:var(--ig-caption-text-transform);margin-top:var(--ig-caption-margin-top);margin-bottom:var(--ig-caption-margin-bottom);width:var(--indicator-size);min-width:var(--indicator-size);height:var(--indicator-size);position:relative}[part~=indicator],::slotted([slot=indicator]){display:flex;align-items:center;justify-content:center}::slotted([slot=indicator]){--diameter: calc(var(--indicator-size) - 0.125rem);--ig-icon-size: 1.125rem}[part~=text]{text-align:var(--align-text, initial);min-width:var(--indicator-size)}[part~=subtitle],[part~=title]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[part~=title]{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom)}[part~=subtitle]{font-family:var(--ig-caption-font-family, var(--ig-font-family));font-size:var(--ig-caption-font-size);font-weight:var(--ig-caption-font-weight);font-style:var(--ig-caption-font-style);line-height:var(--ig-caption-line-height);letter-spacing:var(--ig-caption-letter-spacing);text-transform:var(--ig-caption-text-transform);margin-top:var(--ig-caption-margin-top);margin-bottom:var(--ig-caption-margin-bottom)}[part~=empty]{display:none}:host([active]) [part~=body]{height:100%}:host([active]) [part~="body bottom"]::before{inset-block-start:0}:host([active]) [part=content]{pointer-events:all;opacity:1}[part~=disabled] [part=header]{cursor:default}`;
+export const styles = css `:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{align-items:flex-start}[part~=header-container],[part~=header]{width:var(--header-width-vertical, auto)}[part~=header-container]::before,[part~=header]::before{content:"";width:auto;flex:1;border-block-start-width:var(--separator-size);height:var(--separator-size);position:relative}[part~=header-container]{display:flex;pointer-events:none;position:relative;justify-content:center;z-index:0}[part~=header-container] [part~=header]{pointer-events:all;align-items:center}[part~=header-container] [part=indicator],[part~=header-container] [part=title],[part~=header-container] [part=subtitle]{pointer-events:none}[part~=header-container]::before{min-width:var(--separator-min-width);display:var(--hide-horizontal-separator, var(--horizontal-separator-display--first-of-type))}[part~=header]{display:flex;align-items:var(--align-items, flex-start);grid-row:var(--header-bottom, 1);position:relative;overflow:hidden;padding:var(--header-padding);justify-content:flex-start;gap:var(--header-gap);z-index:var(--vertical-header-z-index)}[part~=header]::before,[part~=header]::after{content:"";flex:1;border-block-start-width:var(--separator-size);height:var(--separator-size);min-width:var(--separator-min-width--header);width:calc(50% - var(--indicator-size)/2 - var(--header-padding));position:absolute;z-index:-1}[part~=header]::before{inset-inline-start:0;display:var(--hide-horizontal-separator, var(--separator-disply-not-full, var(--horizontal-separator-display--first-of-type)))}[part~=header]::after{inset-inline-end:0;display:var(--hide-horizontal-separator, var(--separator-disply-not-full, var(--horizontal-separator-display--last-of-type)))}[part~=header]:focus,[part~=header]:hover{cursor:pointer;outline:none}[part~=header]:hover::before,[part~=header]:hover::after{visibility:var(--header-separator-visibility--hover)}[part~=header]:focus::before,[part~=header]:focus::after,[part~=header]:focus-within::before,[part~=header]:focus-within::after,[part~=header]:active::before,[part~=header]:active::after{visibility:var(--header-separator-visibility--hover)}[part~=body]{display:var(--body-display, block);grid-template-rows:var(--body-grid-rows, none);grid-row-start:var(--body-top, 2);grid-column:1/span var(--steps-count);padding-inline-start:calc(var(--body-indent--vertical)/2);z-index:1;transition:grid-template-rows var(--animation-duration, 320ms) var(--body-transition-delay, 0ms);position:relative;overflow:hidden;width:0;height:var(--vertical-body-height, auto);min-width:100%}[part~=body]::before{display:var(--hide-last-separator, var(--hide-first-separator, var(--vertical-separator-visibility)));content:"";position:absolute;inset-inline-start:calc(var(--body-indent--vertical)/2 - var(--separator-size)/2);height:100%;inset-block-start:0 !important;border-inline-start-style:var(--separator-type);border-inline-start-width:var(--separator-size)}[part=content]{display:block;min-height:0;overflow:hidden;opacity:0}[part=content]>slot{display:block;padding-inline:var(--horizontal-body-padding, calc(var(--body-indent--vertical) / 2)) var(--horizontal-body-padding, var(--vertical-body-padding));padding-block:var(--horizontal-body-padding, var(--vertical-body-padding)) var(--horizontal-body-padding, var(--vertical-body-padding))}[part~=top]{align-items:var(--step-not-full-header-aligmnet, flex-end)}[part~=top]::before,[part~=top]::after{inset-block-end:var(--step-separator-position)}[part~=top] [part~=header]{align-items:var(--align-items, flex-start);flex-direction:column-reverse}[part~=top] [part~=header]::before,[part~=top] [part~=header]::after{inset-block-end:var(--step-separator-position)}[part~=bottom]{align-items:var(--step-not-full-header-aligmnet, start)}[part~=bottom]::before,[part~=bottom]::after{inset-block-start:var(--step-separator-position)}[part~=bottom] [part~=header]{align-items:var(--align-items, flex-start);flex-direction:column}[part~=bottom] [part~=header]::before,[part~=bottom] [part~=header]::after{inset-block-start:var(--step-separator-position)}[part~=top] [part~=text],[part~=bottom] [part~=text]{width:100%}[part~=start]{--align-text: end}[part~=start] [part=text]{order:-1}[part~=end]{--align-text: start}[part~=start],[part~=end]{align-items:center}[part~=start] [part~=text],[part~=end] [part~=text]{overflow:hidden}[part~=start] [part~=header]::before,[part~=start] [part~=header]::after,[part~=end] [part~=header]::before,[part~=end] [part~=header]::after{display:none}[part~=indicator]{font-family:var(--ig-caption-font-family, var(--ig-font-family));font-size:var(--ig-caption-font-size);font-weight:var(--ig-caption-font-weight);font-style:var(--ig-caption-font-style);line-height:var(--ig-caption-line-height);letter-spacing:var(--ig-caption-letter-spacing);text-transform:var(--ig-caption-text-transform);margin-top:var(--ig-caption-margin-top);margin-bottom:var(--ig-caption-margin-bottom);width:var(--indicator-size);min-width:var(--indicator-size);height:var(--indicator-size);position:relative}[part~=indicator],::slotted([slot=indicator]){display:flex;align-items:center;justify-content:center}::slotted([slot=indicator]){--diameter: calc(var(--indicator-size) - 0.125rem);--ig-icon-size: 1.125rem}[part~=text]{text-align:var(--align-text, initial);min-width:var(--indicator-size)}[part~=subtitle],[part~=title]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[part~=title]{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom)}[part~=subtitle]{font-family:var(--ig-caption-font-family, var(--ig-font-family));font-size:var(--ig-caption-font-size);font-weight:var(--ig-caption-font-weight);font-style:var(--ig-caption-font-style);line-height:var(--ig-caption-line-height);letter-spacing:var(--ig-caption-letter-spacing);text-transform:var(--ig-caption-text-transform);margin-top:var(--ig-caption-margin-top);margin-bottom:var(--ig-caption-margin-bottom)}[part~=empty]{display:none}:host([active]) [part~=body]{height:100%}:host([active]) [part~="body bottom"]::before{inset-block-start:0}:host([active]) [part=content]{pointer-events:all;opacity:1}[part~=disabled] [part=header]{cursor:default}`;
 //# sourceMappingURL=step.base.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"step.base.css.js","sourceRoot":"","sources":["../../../../../src/components/stepper/themes/step/step.base.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,0kOAA0kO,CAAC","sourcesContent":["\n  import { css } from 'lit';\n  export const styles = css`:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{align-items:flex-start}[part~=header-container],[part~=header]{width:var(--header-width-vertical, auto)}[part~=header-container]::before,[part~=header]::before{content:\"\";width:auto;flex:1;border-block-start-width:var(--separator-size);height:var(--separator-size);position:relative}[part~=header-container]{display:flex;pointer-events:none;position:relative;justify-content:center;z-index:0}[part~=header-container] [part~=header]{pointer-events:all;align-items:center}[part~=header-container] [part=indicator],[part~=header-container] [part=title],[part~=header-container] [part=subtitle]{pointer-events:none}[part~=header-container]::before{min-width:var(--separator-min-width);display:var(--hide-horizontal-separator, var(--horizontal-separator-display--first-of-type))}[part~=header]{display:flex;align-items:var(--align-items, flex-start);grid-row:var(--header-bottom, 1);position:relative;overflow:hidden;padding:var(--header-padding);justify-content:flex-start;gap:var(--header-gap);z-index:var(--vertical-header-z-index)}[part~=header]::before,[part~=header]::after{content:\"\";flex:1;border-block-start-width:var(--separator-size);height:var(--separator-size);min-width:var(--separator-min-width--header);width:calc(50% - var(--indicator-size)/2 - var(--header-padding));position:absolute;z-index:-1}[part~=header]::before{inset-inline-start:0;display:var(--hide-horizontal-separator, var(--separator-disply-not-full, var(--horizontal-separator-display--first-of-type)))}[part~=header]::after{inset-inline-end:0;display:var(--hide-horizontal-separator, var(--separator-disply-not-full, var(--horizontal-separator-display--last-of-type)))}[part~=header]:focus,[part~=header]:hover{cursor:pointer;outline:none}[part~=header]:hover::before,[part~=header]:hover::after{visibility:var(--header-separator-visibility--hover)}[part~=header]:focus::before,[part~=header]:focus::after,[part~=header]:focus-within::before,[part~=header]:focus-within::after,[part~=header]:active::before,[part~=header]:active::after{visibility:var(--header-separator-visibility--hover)}[part~=body]{display:block;grid-row-start:var(--body-top, 2);grid-column:1/span var(--steps-count);padding-inline-start:calc(var(--body-indent--vertical)/2);z-index:1;position:relative;overflow:hidden;width:0;height:var(--vertical-body-height, auto);min-width:100%}[part~=body]::before{display:var(--hide-last-separator, var(--hide-first-separator, var(--vertical-separator-visibility)));content:\"\";position:absolute;inset-inline-start:calc(var(--body-indent--vertical)/2 - var(--separator-size)/2);height:100%;inset-block-start:0 !important;border-inline-start-style:var(--separator-type);border-inline-start-width:var(--separator-size)}[part=content]{display:block;height:auto;overflow:auto;opacity:0}[part=content]>slot{display:block;padding-inline:var(--horizontal-body-padding, calc(var(--body-indent--vertical) / 2)) var(--horizontal-body-padding, var(--vertical-body-padding));padding-block:var(--horizontal-body-padding, var(--vertical-body-padding)) var(--horizontal-body-padding, var(--vertical-body-padding))}[part~=top]{align-items:var(--step-not-full-header-aligmnet, flex-end)}[part~=top]::before,[part~=top]::after{inset-block-end:var(--step-separator-position)}[part~=top] [part~=header]{align-items:var(--align-items, flex-start);flex-direction:column-reverse}[part~=top] [part~=header]::before,[part~=top] [part~=header]::after{inset-block-end:var(--step-separator-position)}[part~=bottom]{align-items:var(--step-not-full-header-aligmnet, start)}[part~=bottom]::before,[part~=bottom]::after{inset-block-start:var(--step-separator-position)}[part~=bottom] [part~=header]{align-items:var(--align-items, flex-start);flex-direction:column}[part~=bottom] [part~=header]::before,[part~=bottom] [part~=header]::after{inset-block-start:var(--step-separator-position)}[part~=top] [part~=text],[part~=bottom] [part~=text]{width:100%}[part~=start]{--align-text: end}[part~=start] [part=text]{order:-1}[part~=end]{--align-text: start}[part~=start],[part~=end]{align-items:center}[part~=start] [part~=text],[part~=end] [part~=text]{overflow:hidden}[part~=start] [part~=header]::before,[part~=start] [part~=header]::after,[part~=end] [part~=header]::before,[part~=end] [part~=header]::after{display:none}[part~=indicator]{font-family:var(--ig-caption-font-family, var(--ig-font-family));font-size:var(--ig-caption-font-size);font-weight:var(--ig-caption-font-weight);font-style:var(--ig-caption-font-style);line-height:var(--ig-caption-line-height);letter-spacing:var(--ig-caption-letter-spacing);text-transform:var(--ig-caption-text-transform);margin-top:var(--ig-caption-margin-top);margin-bottom:var(--ig-caption-margin-bottom);width:var(--indicator-size);min-width:var(--indicator-size);height:var(--indicator-size);position:relative}[part~=indicator],::slotted([slot=indicator]){display:flex;align-items:center;justify-content:center}::slotted([slot=indicator]){--diameter: calc(var(--indicator-size) - 0.125rem);--ig-icon-size: 1.125rem}[part~=text]{text-align:var(--align-text, initial);min-width:var(--indicator-size)}[part~=subtitle],[part~=title]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[part~=title]{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom)}[part~=subtitle]{font-family:var(--ig-caption-font-family, var(--ig-font-family));font-size:var(--ig-caption-font-size);font-weight:var(--ig-caption-font-weight);font-style:var(--ig-caption-font-style);line-height:var(--ig-caption-line-height);letter-spacing:var(--ig-caption-letter-spacing);text-transform:var(--ig-caption-text-transform);margin-top:var(--ig-caption-margin-top);margin-bottom:var(--ig-caption-margin-bottom)}[part~=empty]{display:none}:host([active]) [part~=body]{height:100%}:host([active]) [part~=\"body bottom\"]::before{inset-block-start:0}:host([active]) [part=content]{pointer-events:all;opacity:1}[part~=disabled] [part=header]{cursor:default}`;\n  "]}
+{"version":3,"file":"step.base.css.js","sourceRoot":"","sources":["../../../../../src/components/stepper/themes/step/step.base.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,kvOAAkvO,CAAC","sourcesContent":["\n  import { css } from 'lit';\n  export const styles = css`:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{align-items:flex-start}[part~=header-container],[part~=header]{width:var(--header-width-vertical, auto)}[part~=header-container]::before,[part~=header]::before{content:\"\";width:auto;flex:1;border-block-start-width:var(--separator-size);height:var(--separator-size);position:relative}[part~=header-container]{display:flex;pointer-events:none;position:relative;justify-content:center;z-index:0}[part~=header-container] [part~=header]{pointer-events:all;align-items:center}[part~=header-container] [part=indicator],[part~=header-container] [part=title],[part~=header-container] [part=subtitle]{pointer-events:none}[part~=header-container]::before{min-width:var(--separator-min-width);display:var(--hide-horizontal-separator, var(--horizontal-separator-display--first-of-type))}[part~=header]{display:flex;align-items:var(--align-items, flex-start);grid-row:var(--header-bottom, 1);position:relative;overflow:hidden;padding:var(--header-padding);justify-content:flex-start;gap:var(--header-gap);z-index:var(--vertical-header-z-index)}[part~=header]::before,[part~=header]::after{content:\"\";flex:1;border-block-start-width:var(--separator-size);height:var(--separator-size);min-width:var(--separator-min-width--header);width:calc(50% - var(--indicator-size)/2 - var(--header-padding));position:absolute;z-index:-1}[part~=header]::before{inset-inline-start:0;display:var(--hide-horizontal-separator, var(--separator-disply-not-full, var(--horizontal-separator-display--first-of-type)))}[part~=header]::after{inset-inline-end:0;display:var(--hide-horizontal-separator, var(--separator-disply-not-full, var(--horizontal-separator-display--last-of-type)))}[part~=header]:focus,[part~=header]:hover{cursor:pointer;outline:none}[part~=header]:hover::before,[part~=header]:hover::after{visibility:var(--header-separator-visibility--hover)}[part~=header]:focus::before,[part~=header]:focus::after,[part~=header]:focus-within::before,[part~=header]:focus-within::after,[part~=header]:active::before,[part~=header]:active::after{visibility:var(--header-separator-visibility--hover)}[part~=body]{display:var(--body-display, block);grid-template-rows:var(--body-grid-rows, none);grid-row-start:var(--body-top, 2);grid-column:1/span var(--steps-count);padding-inline-start:calc(var(--body-indent--vertical)/2);z-index:1;transition:grid-template-rows var(--animation-duration, 320ms) var(--body-transition-delay, 0ms);position:relative;overflow:hidden;width:0;height:var(--vertical-body-height, auto);min-width:100%}[part~=body]::before{display:var(--hide-last-separator, var(--hide-first-separator, var(--vertical-separator-visibility)));content:\"\";position:absolute;inset-inline-start:calc(var(--body-indent--vertical)/2 - var(--separator-size)/2);height:100%;inset-block-start:0 !important;border-inline-start-style:var(--separator-type);border-inline-start-width:var(--separator-size)}[part=content]{display:block;min-height:0;overflow:hidden;opacity:0}[part=content]>slot{display:block;padding-inline:var(--horizontal-body-padding, calc(var(--body-indent--vertical) / 2)) var(--horizontal-body-padding, var(--vertical-body-padding));padding-block:var(--horizontal-body-padding, var(--vertical-body-padding)) var(--horizontal-body-padding, var(--vertical-body-padding))}[part~=top]{align-items:var(--step-not-full-header-aligmnet, flex-end)}[part~=top]::before,[part~=top]::after{inset-block-end:var(--step-separator-position)}[part~=top] [part~=header]{align-items:var(--align-items, flex-start);flex-direction:column-reverse}[part~=top] [part~=header]::before,[part~=top] [part~=header]::after{inset-block-end:var(--step-separator-position)}[part~=bottom]{align-items:var(--step-not-full-header-aligmnet, start)}[part~=bottom]::before,[part~=bottom]::after{inset-block-start:var(--step-separator-position)}[part~=bottom] [part~=header]{align-items:var(--align-items, flex-start);flex-direction:column}[part~=bottom] [part~=header]::before,[part~=bottom] [part~=header]::after{inset-block-start:var(--step-separator-position)}[part~=top] [part~=text],[part~=bottom] [part~=text]{width:100%}[part~=start]{--align-text: end}[part~=start] [part=text]{order:-1}[part~=end]{--align-text: start}[part~=start],[part~=end]{align-items:center}[part~=start] [part~=text],[part~=end] [part~=text]{overflow:hidden}[part~=start] [part~=header]::before,[part~=start] [part~=header]::after,[part~=end] [part~=header]::before,[part~=end] [part~=header]::after{display:none}[part~=indicator]{font-family:var(--ig-caption-font-family, var(--ig-font-family));font-size:var(--ig-caption-font-size);font-weight:var(--ig-caption-font-weight);font-style:var(--ig-caption-font-style);line-height:var(--ig-caption-line-height);letter-spacing:var(--ig-caption-letter-spacing);text-transform:var(--ig-caption-text-transform);margin-top:var(--ig-caption-margin-top);margin-bottom:var(--ig-caption-margin-bottom);width:var(--indicator-size);min-width:var(--indicator-size);height:var(--indicator-size);position:relative}[part~=indicator],::slotted([slot=indicator]){display:flex;align-items:center;justify-content:center}::slotted([slot=indicator]){--diameter: calc(var(--indicator-size) - 0.125rem);--ig-icon-size: 1.125rem}[part~=text]{text-align:var(--align-text, initial);min-width:var(--indicator-size)}[part~=subtitle],[part~=title]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[part~=title]{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom)}[part~=subtitle]{font-family:var(--ig-caption-font-family, var(--ig-font-family));font-size:var(--ig-caption-font-size);font-weight:var(--ig-caption-font-weight);font-style:var(--ig-caption-font-style);line-height:var(--ig-caption-line-height);letter-spacing:var(--ig-caption-letter-spacing);text-transform:var(--ig-caption-text-transform);margin-top:var(--ig-caption-margin-top);margin-bottom:var(--ig-caption-margin-bottom)}[part~=empty]{display:none}:host([active]) [part~=body]{height:100%}:host([active]) [part~=\"body bottom\"]::before{inset-block-start:0}:host([active]) [part=content]{pointer-events:all;opacity:1}[part~=disabled] [part=header]{cursor:default}`;\n  "]}

package/components/stepper/themes/stepper/stepper.base.css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{font-family:var(--ig-font-family);overflow:hidden;--margin: 1rem;--body-padding: 1rem;--header-gap: 0.5rem;--header-padding: 0.5rem;--vertical-body-padding: var(--body-padding);--indicator-size: 1.5rem;--indicator-roundness: calc(var(--indicator-size) / 2);--indicator-box-shadow-size: 0.0625rem;--separator-size: 0.0625rem;--separator-type: dashed;--separator-type--completed: solid;--separator-position: calc(var(--header-padding) + (var(--indicator-size) / 2) - (var(--separator-size) / 2));--separator-min-width: 2.25rem;--separator-min-width--header: 0.25rem;--separator-min-width--full: calc(var(--separator-min-width) + var(--separator-min-width--header));--text-min-width: var(--indicator-size);--header-min-width: calc(var(--indicator-size) + (var(--header-padding) * 2));--step-min-width: calc(var(--header-min-width) + var(--separator-min-width--full));--step-min-width--first-step: var(--header-min-width)}:host([orientation=horizontal]){--horizontal-content-disply: block;--vertical-separator-visibility: none;--horizontal-body-padding: 1rem;display:grid;grid-template-columns:minmax(var(--step-min-width--first-step), max-content) repeat(calc(var(--steps-count) - 1), minmax(var(--step-min-width), auto));grid-template-rows:auto 1fr}:host([orientation=horizontal]) ::slotted(igc-step){display:contents;pointer-events:none;--align-text: center;--align-items: center}:host([orientation=horizontal]) ::slotted(igc-step:first-of-type){--horizontal-separator-visibility--first-of-type: none}:host([orientation=horizontal]) ::slotted(igc-step:last-of-type){--horizontal-separator-visibility--last-of-type: none}:host([orientation=horizontal][title-position=start]),:host([orientation=horizontal][title-position=end]){--step-min-width--first-step: calc(var(--header-min-width) + var(--indicator-size) + var(--header-padding));--step-min-width: calc(var(--header-min-width) + var(--separator-min-width--full) - var(--separator-min-width--header) + var(--indicator-size) + var(--header-padding))}::slotted(igc-step:first-of-type){--horizontal-separator-display--first-of-type: none}::slotted(igc-step:last-of-type){--vertical-body-disply--last-of-type: none;--horizontal-separator-display--last-of-type: none}:host(:not([step-type=full])){--step-min-width: calc(var(--header-min-width) + var(--separator-min-width--full) - var(--separator-min-width--header));--separator-disply-not-full: none}:host(:not([step-type=full])) ::slotted(igc-step){--step-not-full-header-aligmnet: center}:host([step-type=full]) ::slotted(igc-step){--step-separator-position: var(--separator-position)}:host([content-top]) ::slotted(igc-step){--header-bottom: 2;--body-top: 1}:host(:not([orientation=horizontal])){--vertical-header-z-index: 2;--vertical-body-disply: block;--vertical-body-height: 1.5rem;--header-width-vertical: 100%;--hide-horizontal-separator: none;display:flex;flex-direction:column;width:100%}:host(:not([orientation=horizontal])) ::slotted(igc-step){--horizontal-separator-display: none;--step-hide-last-of-type: none;--step-hide-first-of-type: none;--step-width: 100%;--body-indent--vertical: calc(var(--header-padding) + var(--indicator-size) + var(--header-gap));display:flex;flex-direction:column}:host(:not([orientation=horizontal])) ::slotted(igc-step:last-of-type){--vertical-body-height: 0;--hide-last-separator: none}`;
+export const styles = css `:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{font-family:var(--ig-font-family);overflow:hidden;--margin: 1rem;--body-padding: 1rem;--header-gap: 0.5rem;--header-padding: 0.5rem;--vertical-body-padding: var(--body-padding);--indicator-size: 1.5rem;--indicator-roundness: calc(var(--indicator-size) / 2);--indicator-box-shadow-size: 0.0625rem;--separator-size: 0.0625rem;--separator-type: dashed;--separator-type--completed: solid;--separator-position: calc(var(--header-padding) + (var(--indicator-size) / 2) - (var(--separator-size) / 2));--separator-min-width: 2.25rem;--separator-min-width--header: 0.25rem;--separator-min-width--full: calc(var(--separator-min-width) + var(--separator-min-width--header));--text-min-width: var(--indicator-size);--header-min-width: calc(var(--indicator-size) + (var(--header-padding) * 2));--step-min-width: calc(var(--header-min-width) + var(--separator-min-width--full));--step-min-width--first-step: var(--header-min-width)}:host([orientation=horizontal]){--horizontal-content-disply: block;--vertical-separator-visibility: none;--horizontal-body-padding: 1rem;--body-display: grid;--body-grid-rows: 1fr;--body-transition-delay: var(--animation-duration, 320ms);display:grid;grid-template-columns:minmax(var(--step-min-width--first-step), max-content) repeat(calc(var(--steps-count) - 1), minmax(var(--step-min-width), auto));grid-template-rows:auto 1fr}:host([orientation=horizontal]) ::slotted(igc-step){display:contents;pointer-events:none;--align-text: center;--align-items: center}:host([orientation=horizontal]) ::slotted(igc-step[active]){--body-grid-rows: 1fr;--body-transition-delay: 0ms}:host([orientation=horizontal]) ::slotted(igc-step:first-of-type){--horizontal-separator-visibility--first-of-type: none}:host([orientation=horizontal]) ::slotted(igc-step:last-of-type){--horizontal-separator-visibility--last-of-type: none}:host([orientation=horizontal][title-position=start]),:host([orientation=horizontal][title-position=end]){--step-min-width--first-step: calc(var(--header-min-width) + var(--indicator-size) + var(--header-padding));--step-min-width: calc(var(--header-min-width) + var(--separator-min-width--full) - var(--separator-min-width--header) + var(--indicator-size) + var(--header-padding))}::slotted(igc-step:first-of-type){--horizontal-separator-display--first-of-type: none}::slotted(igc-step:last-of-type){--vertical-body-disply--last-of-type: none;--horizontal-separator-display--last-of-type: none}:host(:not([step-type=full])){--step-min-width: calc(var(--header-min-width) + var(--separator-min-width--full) - var(--separator-min-width--header));--separator-disply-not-full: none}:host(:not([step-type=full])) ::slotted(igc-step){--step-not-full-header-aligmnet: center}:host([step-type=full]) ::slotted(igc-step){--step-separator-position: var(--separator-position)}:host([content-top]) ::slotted(igc-step){--header-bottom: 2;--body-top: 1}:host(:not([orientation=horizontal])){--vertical-header-z-index: 2;--vertical-body-disply: block;--vertical-body-height: 1.5rem;--header-width-vertical: 100%;--hide-horizontal-separator: none;display:flex;flex-direction:column;width:100%}:host(:not([orientation=horizontal])) ::slotted(igc-step){--horizontal-separator-display: none;--step-hide-last-of-type: none;--step-hide-first-of-type: none;--step-width: 100%;--body-indent--vertical: calc(var(--header-padding) + var(--indicator-size) + var(--header-gap));display:flex;flex-direction:column}:host(:not([orientation=horizontal])) ::slotted(igc-step:last-of-type){--vertical-body-height: 0;--hide-last-separator: none}`;
 //# sourceMappingURL=stepper.base.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"stepper.base.css.js","sourceRoot":"","sources":["../../../../../src/components/stepper/themes/stepper/stepper.base.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,mtIAAmtI,CAAC","sourcesContent":["\n  import { css } from 'lit';\n  export const styles = css`:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{font-family:var(--ig-font-family);overflow:hidden;--margin: 1rem;--body-padding: 1rem;--header-gap: 0.5rem;--header-padding: 0.5rem;--vertical-body-padding: var(--body-padding);--indicator-size: 1.5rem;--indicator-roundness: calc(var(--indicator-size) / 2);--indicator-box-shadow-size: 0.0625rem;--separator-size: 0.0625rem;--separator-type: dashed;--separator-type--completed: solid;--separator-position: calc(var(--header-padding) + (var(--indicator-size) / 2) - (var(--separator-size) / 2));--separator-min-width: 2.25rem;--separator-min-width--header: 0.25rem;--separator-min-width--full: calc(var(--separator-min-width) + var(--separator-min-width--header));--text-min-width: var(--indicator-size);--header-min-width: calc(var(--indicator-size) + (var(--header-padding) * 2));--step-min-width: calc(var(--header-min-width) + var(--separator-min-width--full));--step-min-width--first-step: var(--header-min-width)}:host([orientation=horizontal]){--horizontal-content-disply: block;--vertical-separator-visibility: none;--horizontal-body-padding: 1rem;display:grid;grid-template-columns:minmax(var(--step-min-width--first-step), max-content) repeat(calc(var(--steps-count) - 1), minmax(var(--step-min-width), auto));grid-template-rows:auto 1fr}:host([orientation=horizontal]) ::slotted(igc-step){display:contents;pointer-events:none;--align-text: center;--align-items: center}:host([orientation=horizontal]) ::slotted(igc-step:first-of-type){--horizontal-separator-visibility--first-of-type: none}:host([orientation=horizontal]) ::slotted(igc-step:last-of-type){--horizontal-separator-visibility--last-of-type: none}:host([orientation=horizontal][title-position=start]),:host([orientation=horizontal][title-position=end]){--step-min-width--first-step: calc(var(--header-min-width) + var(--indicator-size) + var(--header-padding));--step-min-width: calc(var(--header-min-width) + var(--separator-min-width--full) - var(--separator-min-width--header) + var(--indicator-size) + var(--header-padding))}::slotted(igc-step:first-of-type){--horizontal-separator-display--first-of-type: none}::slotted(igc-step:last-of-type){--vertical-body-disply--last-of-type: none;--horizontal-separator-display--last-of-type: none}:host(:not([step-type=full])){--step-min-width: calc(var(--header-min-width) + var(--separator-min-width--full) - var(--separator-min-width--header));--separator-disply-not-full: none}:host(:not([step-type=full])) ::slotted(igc-step){--step-not-full-header-aligmnet: center}:host([step-type=full]) ::slotted(igc-step){--step-separator-position: var(--separator-position)}:host([content-top]) ::slotted(igc-step){--header-bottom: 2;--body-top: 1}:host(:not([orientation=horizontal])){--vertical-header-z-index: 2;--vertical-body-disply: block;--vertical-body-height: 1.5rem;--header-width-vertical: 100%;--hide-horizontal-separator: none;display:flex;flex-direction:column;width:100%}:host(:not([orientation=horizontal])) ::slotted(igc-step){--horizontal-separator-display: none;--step-hide-last-of-type: none;--step-hide-first-of-type: none;--step-width: 100%;--body-indent--vertical: calc(var(--header-padding) + var(--indicator-size) + var(--header-gap));display:flex;flex-direction:column}:host(:not([orientation=horizontal])) ::slotted(igc-step:last-of-type){--vertical-body-height: 0;--hide-last-separator: none}`;\n  "]}
+{"version":3,"file":"stepper.base.css.js","sourceRoot":"","sources":["../../../../../src/components/stepper/themes/stepper/stepper.base.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,u6IAAu6I,CAAC","sourcesContent":["\n  import { css } from 'lit';\n  export const styles = css`:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{font-family:var(--ig-font-family);overflow:hidden;--margin: 1rem;--body-padding: 1rem;--header-gap: 0.5rem;--header-padding: 0.5rem;--vertical-body-padding: var(--body-padding);--indicator-size: 1.5rem;--indicator-roundness: calc(var(--indicator-size) / 2);--indicator-box-shadow-size: 0.0625rem;--separator-size: 0.0625rem;--separator-type: dashed;--separator-type--completed: solid;--separator-position: calc(var(--header-padding) + (var(--indicator-size) / 2) - (var(--separator-size) / 2));--separator-min-width: 2.25rem;--separator-min-width--header: 0.25rem;--separator-min-width--full: calc(var(--separator-min-width) + var(--separator-min-width--header));--text-min-width: var(--indicator-size);--header-min-width: calc(var(--indicator-size) + (var(--header-padding) * 2));--step-min-width: calc(var(--header-min-width) + var(--separator-min-width--full));--step-min-width--first-step: var(--header-min-width)}:host([orientation=horizontal]){--horizontal-content-disply: block;--vertical-separator-visibility: none;--horizontal-body-padding: 1rem;--body-display: grid;--body-grid-rows: 1fr;--body-transition-delay: var(--animation-duration, 320ms);display:grid;grid-template-columns:minmax(var(--step-min-width--first-step), max-content) repeat(calc(var(--steps-count) - 1), minmax(var(--step-min-width), auto));grid-template-rows:auto 1fr}:host([orientation=horizontal]) ::slotted(igc-step){display:contents;pointer-events:none;--align-text: center;--align-items: center}:host([orientation=horizontal]) ::slotted(igc-step[active]){--body-grid-rows: 1fr;--body-transition-delay: 0ms}:host([orientation=horizontal]) ::slotted(igc-step:first-of-type){--horizontal-separator-visibility--first-of-type: none}:host([orientation=horizontal]) ::slotted(igc-step:last-of-type){--horizontal-separator-visibility--last-of-type: none}:host([orientation=horizontal][title-position=start]),:host([orientation=horizontal][title-position=end]){--step-min-width--first-step: calc(var(--header-min-width) + var(--indicator-size) + var(--header-padding));--step-min-width: calc(var(--header-min-width) + var(--separator-min-width--full) - var(--separator-min-width--header) + var(--indicator-size) + var(--header-padding))}::slotted(igc-step:first-of-type){--horizontal-separator-display--first-of-type: none}::slotted(igc-step:last-of-type){--vertical-body-disply--last-of-type: none;--horizontal-separator-display--last-of-type: none}:host(:not([step-type=full])){--step-min-width: calc(var(--header-min-width) + var(--separator-min-width--full) - var(--separator-min-width--header));--separator-disply-not-full: none}:host(:not([step-type=full])) ::slotted(igc-step){--step-not-full-header-aligmnet: center}:host([step-type=full]) ::slotted(igc-step){--step-separator-position: var(--separator-position)}:host([content-top]) ::slotted(igc-step){--header-bottom: 2;--body-top: 1}:host(:not([orientation=horizontal])){--vertical-header-z-index: 2;--vertical-body-disply: block;--vertical-body-height: 1.5rem;--header-width-vertical: 100%;--hide-horizontal-separator: none;display:flex;flex-direction:column;width:100%}:host(:not([orientation=horizontal])) ::slotted(igc-step){--horizontal-separator-display: none;--step-hide-last-of-type: none;--step-hide-first-of-type: none;--step-width: 100%;--body-indent--vertical: calc(var(--header-padding) + var(--indicator-size) + var(--header-gap));display:flex;flex-direction:column}:host(:not([orientation=horizontal])) ::slotted(igc-step:last-of-type){--vertical-body-height: 0;--hide-last-separator: none}`;\n  "]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-webcomponents",
-  "version": "7.1.2",
+  "version": "7.1.3",
   "description": "Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.",
   "author": "Infragistics",
   "license": "MIT",

package/skills/igniteui-wc-choose-components/SKILL.md

@@ -8,6 +8,26 @@ user-invocable: true
 
 This skill helps AI agents and developers identify the best Ignite UI components for any UI requirement, then provides direct links to official documentation, usage examples, and API references.
 
+## Prerequisites
+
+- The **Ignite UI CLI MCP server** (`igniteui-cli`) available as a tool provider
+
+> **AGENT INSTRUCTION — MCP Server Setup (REQUIRED)**
+>
+> Before using the Ignite UI CLI MCP tools, you MUST verify the MCP server is available
+> by calling `list_components`. If the tool is not available or the call fails,
+> you MUST automatically configure it by following the setup instructions in
+> [`reference/mcp-setup.md`](./reference/mcp-setup.md).
+>
+> After writing the file, inform the user that the MCP server has been
+> configured and they may need to reload the editor for the tools to activate.
+> Start the MCP server and wait for that MCP server to start before continuing the component-related work.
+> Do NOT skip this step or ask the user to do it manually.
+
+## Setting Up the Ignite UI CLI MCP Server
+
+> **Full setup instructions for VS Code, Cursor, Claude Desktop, and JetBrains IDEs are in [`reference/mcp-setup.md`](./reference/mcp-setup.md).** Read that file for editor-specific configuration steps and verification.
+
 ## Before You Answer
 
 - Choose the package before writing imports or install steps.

package/skills/igniteui-wc-choose-components/reference/mcp-setup.md

@@ -0,0 +1,82 @@
+# Setting Up the Ignite UI CLI MCP Server
+
+> **Part of the [`igniteui-wc-choose-components`](../SKILL.md) skill hub.**
+
+## Contents
+
+- [Setting Up the Ignite UI CLI MCP Server](#setting-up-the-ignite-ui-cli-mcp-server)
+  - [Contents](#contents)
+  - [VS Code](#vs-code)
+  - [Cursor](#cursor)
+  - [Claude Desktop](#claude-desktop)
+  - [WebStorm / JetBrains IDEs](#webstorm--jetbrains-ides)
+  - [Verifying the Setup](#verifying-the-setup)
+
+The Ignite UI CLI MCP server enables AI assistants to discover Ignite UI components, access component documentation, and support related Ignite UI workflows. It must be configured in your editor before these tools become available.
+
+## VS Code
+
+Create or edit `.vscode/mcp.json` in your project:
+
+```json
+{
+  "servers": {
+    "igniteui-cli": {
+      "command": "npx",
+      "args": ["-y", "igniteui-cli", "mcp"]
+    }
+  }
+}
+```
+
+This works whether `igniteui-cli` is installed locally in `node_modules` or needs to be pulled from the npm registry — `npx -y` handles both cases.
+
+## Cursor
+
+Create or edit `.cursor/mcp.json`:
+
+```json
+{
+  "mcpServers": {
+    "igniteui-cli": {
+      "command": "npx",
+      "args": ["-y", "igniteui-cli", "mcp"]
+    }
+  }
+}
+```
+
+## Claude Desktop
+
+Edit the Claude Desktop config file:
+
+- **macOS**: `~/Library/Application Support/Claude/claude_desktop_config.json`
+- **Windows**: `%APPDATA%\Claude\claude_desktop_config.json`
+
+```json
+{
+  "mcpServers": {
+    "igniteui-cli": {
+      "command": "npx",
+      "args": ["-y", "igniteui-cli", "mcp"]
+    }
+  }
+}
+```
+
+## WebStorm / JetBrains IDEs
+
+1. Go to **Settings → Tools → AI Assistant → MCP Servers**
+2. Click **+ Add MCP Server**
+3. Set Command to `npx` and Arguments to `-y igniteui-cli mcp`
+4. Click OK and restart the AI Assistant
+
+> The `-y` flag skips interactive prompts if `igniteui-cli` is not already installed locally.
+
+## Verifying the Setup
+
+After configuring the MCP server, ask your AI assistant:
+
+> "List all available Ignite UI components"
+
+If the MCP server is running, the `list_components` tool will return all available components for the detected framework.