igniteui-webcomponents 5.3.0-beta.1 → 5.3.0-beta.3

package/components/carousel/carousel.d.ts

@@ -0,0 +1,199 @@
+import { LitElement } from 'lit';
+import type { Constructor } from '../common/mixins/constructor.js';
+import IgcCarouselSlideComponent from './carousel-slide.js';
+export interface IgcCarouselComponentEventMap {
+    igcSlideChanged: CustomEvent<number>;
+    igcPlaying: CustomEvent<void>;
+    igcPaused: CustomEvent<void>;
+}
+declare const IgcCarouselComponent_base: Constructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcCarouselComponentEventMap>> & Constructor<LitElement>;
+/**
+ * The `igc-carousel` presents a set of `igc-carousel-slide`s by sequentially displaying a subset of one or more slides.
+ *
+ * @element igc-carousel
+ *
+ * @slot Default slot for the carousel. Any projected `igc-carousel-slide` components should be projected here.
+ * @slot previous-button - Renders content inside the previous button.
+ * @slot next-button - Renders content inside the next button.
+ *
+ * @fires igcSlideChanged - Emitted when the current active slide is changed either by user interaction or by the interval callback.
+ * @fires igcPlaying - Emitted when the carousel enters playing state by a user interaction.
+ * @fires igcPaused - Emitted when the carousel enters paused state by a user interaction.
+ *
+ * @csspart navigation - The wrapper container of each carousel navigation button.
+ * @csspart previous - The wrapper container of the carousel previous navigation button.
+ * @csspart next - The wrapper container of the carousel next navigation button.
+ * @csspart dot - The carousel dot indicator container.
+ * @csspart active - The carousel active dot indicator container.
+ * @csspart label - The label container of the carousel indicators.
+ * @csspart start - The wrapping container of all carousel indicators when indicators-orientation is set to start.
+ */
+export default class IgcCarouselComponent extends IgcCarouselComponent_base {
+    static styles: import("lit").CSSResult[];
+    static readonly tagName = "igc-carousel";
+    static register(): void;
+    private static readonly increment;
+    private _carouselId;
+    private _carouselKeyboardInteractionFocus;
+    private _internals;
+    private _lastInterval;
+    private _hasKeyboardInteractionOnIndicators;
+    private _hasMouseStop;
+    private _context;
+    private _carouselSlidesContainerRef;
+    private _indicatorsContainerRef;
+    private _prevButtonRef;
+    private _nextButtonRef;
+    private get hasProjectedIndicators();
+    private get showIndicatorsLabel();
+    private get nextIndex();
+    private get prevIndex();
+    private _defaultIndicators;
+    private _projectedIndicators;
+    private _activeSlide;
+    private _playing;
+    private _paused;
+    private _observerCallback;
+    /**
+     * Whether the carousel should skip rotating to the first slide after it reaches the last.
+     * @attr disable-loop
+     */
+    disableLoop: boolean;
+    /**
+     * Whether the carousel should ignore use interactions and not pause on them.
+     * @attr disable-pause-on-interaction
+     */
+    disablePauseOnInteraction: boolean;
+    /**
+     * Whether the carousel should skip rendering of the default navigation buttons.
+     * @attr hide-navigation
+     */
+    hideNavigation: boolean;
+    /**
+     * Whether the carousel should render the indicator controls (dots).
+     * @attr hide-indicators
+     */
+    hideIndicators: boolean;
+    /**
+     * Whether the carousel has vertical alignment.
+     * @attr vertical
+     */
+    vertical: boolean;
+    /**
+     * Sets the orientation of the indicator controls (dots).
+     * @attr indicators-orientation
+     */
+    indicatorsOrientation: 'start' | 'end';
+    /**
+     * The format used to set the aria-label on the carousel indicators.
+     * Instances of '{0}' will be replaced with the index of the corresponding slide.
+     *
+     * @attr indicators-label-format
+     */
+    indicatorsLabelFormat: string;
+    /**
+     * The format used to set the aria-label on the carousel slides and the text displayed
+     * when the number of indicators is greater than tha maximum indicator count.
+     * Instances of '{0}' will be replaced with the index of the corresponding slide.
+     * Instances of '{1}' will be replaced with the total amount of slides.
+     *
+     * @attr slides-label-format
+     */
+    slidesLabelFormat: string;
+    /**
+     * The duration in milliseconds between changing the active slide.
+     * @attr interval
+     */
+    interval: number | undefined;
+    /**
+     * Controls the maximum indicator controls (dots) that can be shown. Default value is `10`.
+     * @attr maximum-indicators-count
+     */
+    maximumIndicatorsCount: number;
+    /**
+     * The animation type.
+     * @attr animation-type
+     */
+    animationType: 'slide' | 'fade' | 'none';
+    /**
+     * The slides of the carousel.
+     */
+    slides: Array<IgcCarouselSlideComponent>;
+    /**
+     * The total number of slides.
+     */
+    get total(): number;
+    /**
+     * The index of the current active slide.
+     */
+    get current(): number;
+    /**
+     * Whether the carousel is in playing state.
+     */
+    get isPlaying(): boolean;
+    /**
+     * Whether the carousel in in paused state.
+     */
+    get isPaused(): boolean;
+    protected contextChanged(): void;
+    protected intervalChange(): void;
+    constructor();
+    private handleSlotChange;
+    private handleIndicatorSlotChange;
+    private handlePointerDown;
+    private handlePointerEnter;
+    private handlePointerLeave;
+    private handleFocusIn;
+    private handleFocusOut;
+    private handlePauseOnInteraction;
+    private handleArrowLeft;
+    private handleArrowRight;
+    private handleHomeKey;
+    private handleEndKey;
+    private handleVerticalSwipe;
+    private handleHorizontalSwipe;
+    private handleIndicatorClick;
+    private handleNavigationInteractionNext;
+    private handleNavigationInteractionPrevious;
+    private handleInteraction;
+    private activateSlide;
+    private updateProjectedIndicators;
+    private resetInterval;
+    private restartInterval;
+    private animateSlides;
+    /**
+     * Resumes playing of the carousel slides.
+     */
+    play(): void;
+    /**
+     * Pauses the carousel rotation of slides.
+     */
+    pause(): void;
+    /**
+     * Switches to the next slide, runs any animations, and returns if the operation was successful.
+     */
+    next(): Promise<boolean>;
+    /**
+     * Switches to the previous slide, runs any animations, and returns if the operation was successful.
+     */
+    prev(): Promise<boolean>;
+    /**
+     * Switches to the passed-in slide, runs any animations, and returns if the operation was successful.
+     */
+    select(slide: IgcCarouselSlideComponent, animationDirection?: 'next' | 'prev'): Promise<boolean>;
+    /**
+     * Switches to slide by index, runs any animations, and returns if the operation was successful.
+     */
+    select(index: number, animationDirection?: 'next' | 'prev'): Promise<boolean>;
+    private navigationTemplate;
+    protected renderIndicators(): Generator<import("lit-html").TemplateResult<1>, void, unknown>;
+    private indicatorTemplate;
+    private labelTemplate;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-carousel': IgcCarouselComponent;
+    }
+}
+export {};

package/components/carousel/themes/carousel-indicator-container.base.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/carousel/themes/carousel-indicator.base.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/carousel/themes/carousel-slide.base.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/carousel/themes/carousel.base.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/carousel/themes/container.d.ts

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

package/components/carousel/themes/dark/carousel.bootstrap.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/carousel/themes/dark/carousel.fluent.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/carousel/themes/dark/carousel.indigo.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/carousel/themes/dark/carousel.material.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/carousel/themes/dark/carousel.shared.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/carousel/themes/indicator-container.d.ts

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

package/components/carousel/themes/light/carousel.bootstrap.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/carousel/themes/light/carousel.fluent.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/carousel/themes/light/carousel.indigo.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/carousel/themes/light/carousel.material.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/carousel/themes/light/carousel.shared.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/carousel/themes/shared/carousel.bootstrap.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/carousel/themes/shared/carousel.common.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/carousel/themes/shared/carousel.fluent.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/carousel/themes/shared/carousel.indigo.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/carousel/themes/shared/indicator-container/indicator-container.bootstrap.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/carousel/themes/shared/indicator-container/indicator-container.common.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/carousel/themes/shared/indicator-container/indicator-container.fluent.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/carousel/themes/shared/indicator-container/indicator-container.indigo.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

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

@@ -0,0 +1,51 @@
+import { LitElement } from 'lit';
+import type { Constructor } from '../common/mixins/constructor.js';
+import { type FormValue } from '../common/mixins/forms/form-value.js';
+export interface CheckboxChangeEventArgs {
+    checked: boolean;
+    value?: string;
+}
+export interface IgcCheckboxComponentEventMap {
+    igcChange: CustomEvent<CheckboxChangeEventArgs>;
+    focus: FocusEvent;
+    blur: FocusEvent;
+}
+declare const IgcCheckboxBaseComponent_base: Constructor<import("../common/mixins/forms/types.js").FormRequiredInterface & import("../common/mixins/forms/types.js").FormAssociatedCheckboxElementInterface> & Constructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcCheckboxComponentEventMap>> & Constructor<LitElement>;
+export declare class IgcCheckboxBaseComponent extends IgcCheckboxBaseComponent_base {
+    protected get __validators(): import("../common/validators.js").Validator<IgcCheckboxBaseComponent>[];
+    protected _kbFocus: import("../common/controllers/focus-ring.js").KeyboardFocusRingController;
+    protected _formValue: FormValue<boolean>;
+    protected _value: string;
+    protected input: HTMLInputElement;
+    protected label: Array<Node>;
+    protected hideLabel: boolean;
+    /**
+     * The value attribute of the control.
+     * @attr
+     */
+    set value(value: string);
+    get value(): string;
+    /**
+     * The checked state of the control.
+     * @attr
+     */
+    set checked(value: boolean);
+    get checked(): boolean;
+    /**
+     * The label position of the control.
+     * @attr label-position
+     */
+    labelPosition: 'before' | 'after';
+    constructor();
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    /** Simulates a click on the control. */
+    click(): void;
+    /** Sets focus on the control. */
+    focus(options?: FocusOptions): void;
+    /** Removes focus from the control. */
+    blur(): void;
+    protected handleClick(event: PointerEvent): void;
+    protected handleBlur(): void;
+    protected handleFocus(): void;
+}
+export {};

package/components/checkbox/checkbox.d.ts

@@ -0,0 +1,44 @@
+import { type TemplateResult } from 'lit';
+import { IgcCheckboxBaseComponent } from './checkbox-base.js';
+/**
+ * A check box allowing single values to be selected/deselected.
+ *
+ * @element igc-checkbox
+ *
+ * @slot - The checkbox label.
+ * @slot helper-text - Renders content below the input.
+ * @slot value-missing - Renders content when the required validation fails.
+ * @slot custom-error - Renders content when setCustomValidity(message) is set.
+ * @slot invalid - Renders content when the component is in invalid state (validity.valid = false).
+ *
+ * @fires igcChange - Emitted when the control's checked state changes.
+ *
+ * @csspart base - The base wrapper of the checkbox.
+ * @csspart control - The checkbox input element.
+ * @csspart label - The checkbox label.
+ * @csspart indicator - The checkbox indicator icon.
+ */
+export default class IgcCheckboxComponent extends IgcCheckboxBaseComponent {
+    static readonly tagName = "igc-checkbox";
+    protected static styles: import("lit").CSSResult[];
+    static register(): void;
+    private static readonly increment;
+    private inputId;
+    private labelId;
+    /**
+     * Draws the checkbox in indeterminate state.
+     * @attr
+     */
+    indeterminate: boolean;
+    protected get _isIndigo(): boolean;
+    protected handleClick(event: PointerEvent): void;
+    protected renderValidatorContainer(): TemplateResult;
+    protected renderStandard(): TemplateResult<1>;
+    protected renderIndigo(): TemplateResult<1>;
+    protected render(): TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-checkbox': IgcCheckboxComponent;
+    }
+}

package/components/checkbox/switch.d.ts

@@ -0,0 +1,29 @@
+import { IgcCheckboxBaseComponent } from './checkbox-base.js';
+/**
+ * Similar to a checkbox, a switch controls the state of a single setting on or off.
+ *
+ * @element igc-switch
+ *
+ * @slot - The switch label.
+ *
+ * @fires igcChange - Emitted when the control's checked state changes.
+ *
+ * @csspart base - The base wrapper of the switch.
+ * @csspart control - The switch input element.
+ * @csspart thumb - The position indicator of the switch.
+ * @csspart label - The switch label.
+ */
+export default class IgcSwitchComponent extends IgcCheckboxBaseComponent {
+    static readonly tagName = "igc-switch";
+    static styles: import("lit").CSSResult[];
+    static register(): void;
+    private static readonly increment;
+    private inputId;
+    private labelId;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-switch': IgcSwitchComponent;
+    }
+}

package/components/checkbox/themes/checkbox-themes.d.ts

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

package/components/checkbox/themes/checkbox.base.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/checkbox/themes/dark/checkbox/checkbox.bootstrap.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/checkbox/themes/dark/checkbox/checkbox.fluent.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/checkbox/themes/dark/checkbox/checkbox.indigo.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/checkbox/themes/dark/checkbox/checkbox.material.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/checkbox/themes/dark/switch/switch.bootstrap.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/checkbox/themes/dark/switch/switch.fluent.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/checkbox/themes/dark/switch/switch.indigo.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/checkbox/themes/dark/switch/switch.material.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/checkbox/themes/light/checkbox/checkbox.bootstrap.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/checkbox/themes/light/checkbox/checkbox.fluent.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/checkbox/themes/light/checkbox/checkbox.indigo.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/checkbox/themes/light/checkbox/checkbox.material.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/checkbox/themes/light/checkbox/checkbox.shared.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/checkbox/themes/light/switch/switch.bootstrap.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/checkbox/themes/light/switch/switch.fluent.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/checkbox/themes/light/switch/switch.indigo.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/checkbox/themes/light/switch/switch.material.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/checkbox/themes/light/switch/switch.shared.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/checkbox/themes/shared/checkbox/checkbox.bootstrap.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/checkbox/themes/shared/checkbox/checkbox.common.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/checkbox/themes/shared/checkbox/checkbox.fluent.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/checkbox/themes/shared/checkbox/checkbox.indigo.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/checkbox/themes/shared/checkbox/checkbox.material.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/checkbox/themes/shared/switch/switch.bootstrap.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/checkbox/themes/shared/switch/switch.common.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/checkbox/themes/shared/switch/switch.fluent.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/checkbox/themes/shared/switch/switch.indigo.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/checkbox/themes/shared/switch/switch.material.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/checkbox/themes/switch-themes.d.ts

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

package/components/checkbox/themes/switch.base.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/checkbox/validators.d.ts

@@ -0,0 +1,3 @@
+import { type Validator } from '../common/validators.js';
+import type { IgcCheckboxBaseComponent } from './checkbox-base.js';
+export declare const checkBoxValidators: Validator<IgcCheckboxBaseComponent>[];

package/components/chip/chip.d.ts

@@ -0,0 +1,66 @@
+import { LitElement } from 'lit';
+import type { Constructor } from '../common/mixins/constructor.js';
+import type { StyleVariant } from '../types.js';
+export interface IgcChipComponentEventMap {
+    igcRemove: CustomEvent<boolean>;
+    igcSelect: CustomEvent<boolean>;
+}
+declare const IgcChipComponent_base: Constructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcChipComponentEventMap>> & Constructor<LitElement>;
+/**
+ * Chips help people enter information, make selections, filter content, or trigger actions.
+ *
+ * @element igc-chip
+ *
+ * @slot - Renders the chip data.
+ * @slot prefix - Renders content before the data of the chip.
+ * @slot suffix - Renders content after the data of the chip.
+ *
+ * @fires igcRemove - Emits an event when the chip component is removed. Returns the removed chip component.
+ * @fires igcSelect - Emits event when the chip component is selected/deselected and any related animations and transitions also end.
+ *
+ * @csspart base - The base wrapper of the chip.
+ * @csspart prefix - The prefix container of the chip.
+ * @csspart suffix - The suffix container of the chip.
+ */
+export default class IgcChipComponent extends IgcChipComponent_base {
+    static readonly tagName = "igc-chip";
+    static styles: import("lit").CSSResult[];
+    static register(): void;
+    private _removePartRef;
+    /**
+     * Sets the disabled state for the chip.
+     * @attr
+     */
+    disabled: boolean;
+    /**
+     * Defines if the chip is removable or not.
+     * @attr
+     */
+    removable: boolean;
+    /**
+     * Defines if the chip is selectable or not.
+     * @attr
+     */
+    selectable: boolean;
+    /**
+     * Defines if the chip is selected or not.
+     * @attr
+     */
+    selected: boolean;
+    /**
+     * A property that sets the color variant of the chip component.
+     * @attr
+     */
+    variant: StyleVariant;
+    constructor();
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    protected handleSelect(): void;
+    protected handleRemove(e: Event): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-chip': IgcChipComponent;
+    }
+}
+export {};

package/components/chip/themes/chip.base.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/chip/themes/chip.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{display:inline-flex;vertical-align:top}:host button{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);display:flex;justify-content:center;align-items:center;font-family:var(--ig-font-family);border-style:none;box-shadow:none;cursor:pointer;padding:max(var(--is-large, 1)*max(12px, -1 * 12px)*var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)),var(--is-medium, 1)*max(6px, -1 * 6px)*var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)),var(--is-small, 1)*max(2px, -1 * 2px)*var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)))}:host button[disabled]{pointer-events:none}:host([variant=primary]) button,:host([selected][variant=primary]) button:not([disabled]){background:var(--ig-primary-500);color:var(--ig-primary-500-contrast)}:host([variant=primary]) button:focus,:host([selected][variant=primary]) button:not([disabled]):focus{background:var(--ig-primary-800);color:var(--ig-primary-800-contrast)}:host([variant=primary]) button:hover,:host([selected][variant=primary]) button:not([disabled]):hover{background:var(--ig-primary-600);color:var(--ig-primary-600-contrast)}:host([variant=info]) button,:host([selected][variant=info]) button:not([disabled]){background:var(--ig-info-500);color:var(--ig-info-500-contrast)}:host([variant=info]) button:focus,:host([selected][variant=info]) button:not([disabled]):focus{background:var(--ig-info-800);color:var(--ig-info-800-contrast)}:host([variant=info]) button:hover,:host([selected][variant=info]) button:not([disabled]):hover{background:var(--ig-info-600);color:var(--ig-info-600-contrast)}:host([variant=success]) button,:host([selected][variant=success]) button:not([disabled]){background:var(--ig-success-500);color:var(--ig-success-500-contrast)}:host([variant=success]) button:focus,:host([selected][variant=success]) button:not([disabled]):focus{background:var(--ig-success-800);color:var(--ig-success-800-contrast)}:host([variant=success]) button:hover,:host([selected][variant=success]) button:not([disabled]):hover{background:var(--ig-success-600);color:var(--ig-success-600-contrast)}:host([variant=warning]) button,:host([selected][variant=warning]) button:not([disabled]){background:var(--ig-warn-500);color:var(--ig-warn-500-contrast)}:host([variant=warning]) button:focus,:host([selected][variant=warning]) button:not([disabled]):focus{background:var(--ig-warn-800);color:var(--ig-warn-800-contrast)}:host([variant=warning]) button:hover,:host([selected][variant=warning]) button:not([disabled]):hover{background:var(--ig-warn-600);color:var(--ig-warn-600-contrast)}:host([variant=danger]) button,:host([selected][variant=danger]) button:not([disabled]){background:var(--ig-error-500);color:var(--ig-error-500-contrast)}:host([variant=danger]) button:focus,:host([selected][variant=danger]) button:not([disabled]):focus{background:var(--ig-error-800);color:var(--ig-error-800-contrast)}:host([variant=danger]) button:hover,:host([selected][variant=danger]) button:not([disabled]):hover{background:var(--ig-error-600);color:var(--ig-error-600-contrast)}[part=prefix],[part=suffix]{display:flex;align-items:center;justify-content:center}[part=prefix]{margin-inline-end:max(var(--is-large, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)),var(--is-medium, 1)*max(0.375rem, -1 * 0.375rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)),var(--is-small, 1)*max(0.1875rem, -1 * 0.1875rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)))}[part=suffix]{margin-inline-start:max(var(--is-large, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)),var(--is-medium, 1)*max(0.375rem, -1 * 0.375rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)),var(--is-small, 1)*max(0.1875rem, -1 * 0.1875rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)))}::slotted(*){display:flex}`;
+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{display:inline-block;vertical-align:top}:host button{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);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:grid;grid-auto-flow:column;justify-content:center;align-items:center;font-family:var(--ig-font-family);border-style:none;box-shadow:none;cursor:pointer;padding:0 max(var(--is-large, 1)*max(0.75rem, -1 * 0.75rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, --ig-spacing)),var(--is-medium, 1)*max(0.375rem, -1 * 0.375rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, --ig-spacing)),var(--is-small, 1)*max(0.125rem, -1 * 0.125rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, --ig-spacing)));gap:max(var(--is-large, 1)*max(0.5rem, -1 * 0.5rem),var(--is-medium, 1)*max(0.375rem, -1 * 0.375rem),var(--is-small, 1)*max(0.1875rem, -1 * 0.1875rem))}:host button[disabled]{pointer-events:none}:host([variant=primary]) button,:host([selected][variant=primary]) button:not([disabled]){background:var(--ig-primary-500);color:var(--ig-primary-500-contrast)}:host([variant=primary]) button:focus,:host([selected][variant=primary]) button:not([disabled]):focus{background:var(--ig-primary-800);color:var(--ig-primary-800-contrast)}:host([variant=primary]) button:hover,:host([selected][variant=primary]) button:not([disabled]):hover{background:var(--ig-primary-600);color:var(--ig-primary-600-contrast)}:host([variant=info]) button,:host([selected][variant=info]) button:not([disabled]){background:var(--ig-info-500);color:var(--ig-info-500-contrast)}:host([variant=info]) button:focus,:host([selected][variant=info]) button:not([disabled]):focus{background:var(--ig-info-800);color:var(--ig-info-800-contrast)}:host([variant=info]) button:hover,:host([selected][variant=info]) button:not([disabled]):hover{background:var(--ig-info-600);color:var(--ig-info-600-contrast)}:host([variant=success]) button,:host([selected][variant=success]) button:not([disabled]){background:var(--ig-success-500);color:var(--ig-success-500-contrast)}:host([variant=success]) button:focus,:host([selected][variant=success]) button:not([disabled]):focus{background:var(--ig-success-800);color:var(--ig-success-800-contrast)}:host([variant=success]) button:hover,:host([selected][variant=success]) button:not([disabled]):hover{background:var(--ig-success-600);color:var(--ig-success-600-contrast)}:host([variant=warning]) button,:host([selected][variant=warning]) button:not([disabled]){background:var(--ig-warn-500);color:var(--ig-warn-500-contrast)}:host([variant=warning]) button:focus,:host([selected][variant=warning]) button:not([disabled]):focus{background:var(--ig-warn-800);color:var(--ig-warn-800-contrast)}:host([variant=warning]) button:hover,:host([selected][variant=warning]) button:not([disabled]):hover{background:var(--ig-warn-600);color:var(--ig-warn-600-contrast)}:host([variant=danger]) button,:host([selected][variant=danger]) button:not([disabled]){background:var(--ig-error-500);color:var(--ig-error-500-contrast)}:host([variant=danger]) button:focus,:host([selected][variant=danger]) button:not([disabled]):focus{background:var(--ig-error-800);color:var(--ig-error-800-contrast)}:host([variant=danger]) button:hover,:host([selected][variant=danger]) button:not([disabled]):hover{background:var(--ig-error-600);color:var(--ig-error-600-contrast)}[part=prefix],[part=suffix]{display:flex;align-items:center;justify-content:center}::slotted(*){white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:32ch}`;
 //# sourceMappingURL=chip.base.css.js.map