@gov-design-system-ce/components 4.0.8-rc22 → 4.1.0-rc02

package/dist/types/components/gov-pagination/gov-pagination.d.ts

@@ -1,12 +1,14 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { PaginationSizeType, PaginationType, PaginationVariantType } from "./constants";
+import { PaginationColorType, PaginationSizeType, PaginationType } from "./constants";
 import { Pagination } from "./pagination";
 import { PaginationEvent } from "./gov-pagination.types";
+import { Attributes } from "../../helpers/Dom/attribute";
 export declare class GovPagination {
     private h;
     private readonly pageSelectId;
     private readonly selectId;
     private spreadSelectRef?;
+    private attributeObserver;
     constructor();
     readonly host: HTMLGovPaginationElement;
     /**
@@ -21,10 +23,6 @@ export declare class GovPagination {
      * Total count of entries
      */
     readonly total: number;
-    /**
-     * Set on active page
-     */
-    readonly inverse: boolean;
     /**
      * Custom select identifier.
      */
@@ -36,7 +34,7 @@ export declare class GovPagination {
     /**
      * Style variation of the pagination.
      */
-    readonly variant?: PaginationVariantType;
+    readonly color?: PaginationColorType;
     /**
      * Maximum number of entries per page
      */
@@ -51,22 +49,14 @@ export declare class GovPagination {
      * Note that in the case of paging through a link, it is always necessary to send to the component the current page where the user is.
      */
     readonly link: string;
-    /**
-     * Adds accessible label for the pagination that is only shown for screen readers.
-     */
-    readonly wcagLabel: string;
-    /**
-     * Indicates the id of a component that labels the pagination.
-     */
-    readonly wcagLabelledBy: string;
     /**
      * Adds accessible label for the page select
      */
-    readonly wcagSelectLabel: string;
+    readonly accessibleSelectLabel: string;
     /**
      * Adds accessible label for the page item
      */
-    readonly wcagPageLabel: string;
+    readonly accessiblePageLabel: string;
     /**
      * Description of the possibility to go back one page
      */
@@ -88,12 +78,15 @@ export declare class GovPagination {
      */
     govPage: EventEmitter<PaginationEvent>;
     pagination: Pagination;
+    inheritedAttributes: Attributes;
     validateType(newValue: string): void;
     validateSize(newValue: string): void;
-    validateVariant(newValue: string): void;
+    validateColor(newValue: string): void;
     recalculate(): void;
+    componentDidLoad(): void;
     componentWillLoad(): void;
-    componentDidRender(): Promise<void>;
+    disconnectedCallback(): void;
+    onAriaAttributeChange(attributeName: string, newValue: string): void;
     private recalculatePagination;
     private isActivePageClass;
     private prepareLinkUrl;
@@ -101,8 +94,4 @@ export declare class GovPagination {
     render(): any;
     private onClickHandler;
     private onSelectHandler;
-    /**
-     * Validate the WCAG attributes of the component
-     */
-    validateWcag(): Promise<void>;
 }

package/dist/types/components/gov-spacer/constants.d.ts

@@ -1,6 +1,6 @@
 import { Sizes } from '../../core/constants/sizes';
 import { ValueOf } from '../../types/interfaces';
-export declare const SpacerSize: Pick<typeof Sizes, "_XS" | "_S" | "_M" | "_L" | "_2XS" | "_XL" | "_2XL" | "_3XL" | "_4XL">;
+export declare const SpacerSize: Pick<typeof Sizes, "_XS" | "_S" | "_M" | "_L" | "_XL" | "_2XS" | "_2XL" | "_3XL" | "_4XL">;
 export type SpacerSizeType = `${ValueOf<typeof SpacerSize>}`;
 export declare enum SpacerBreakpoints {
     NONE = "none",

package/dist/types/components/gov-stepper/constants.d.ts

@@ -1,22 +1,19 @@
-import { Variants } from '../../core/constants/variants';
+import { Colors } from '../../core/constants/colors';
 import { Sizes } from '../../core/constants/sizes';
 import { ValueOf } from '../../types/interfaces';
-export declare const StepperVariants: Pick<typeof Variants, "PRIMARY" | "SECONDARY" | "SUCCESS" | "ERROR" | "WARNING">;
-export type StepperVariantType = `${ValueOf<typeof StepperVariants>}`;
-export declare const StepperSizes: Pick<typeof Sizes, "_XS" | "_S" | "_M">;
+export declare const StepperColors: Pick<typeof Colors, "PRIMARY" | "NEUTRAL" | "SUCCESS" | "ERROR" | "WARNING">;
+export type StepperColorType = `${ValueOf<typeof StepperColors>}`;
+export declare const StepperSizes: Pick<typeof Sizes, "_S" | "_M" | "_L">;
 export type StepperSizesType = `${ValueOf<typeof StepperSizes>}`;
 export declare const StepperClass: {
     root: string;
 };
 export declare const StepperItemClass: {
     root: string;
-    rootWithAnnot: string;
     header: string;
-    title: string;
     label: string;
-    name: string;
-    annot: string;
     prefix: string;
+    headline: string;
+    annotation: string;
     content: string;
-    suffix: string;
 };

package/dist/types/components/gov-stepper/gov-stepper-item.d.ts

@@ -1,17 +1,17 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { StepperSizesType, StepperVariantType } from './constants';
+import { StepperSizesType, StepperColorType } from './constants';
 import { GovStepperItemChangeEvent } from './gov-stepper-item.d';
 export declare class GovStepperItem {
     private h;
     private readonly triggerId;
     private readonly contentId;
+    private hydrated;
     constructor();
     readonly host: HTMLGovStepperItemElement;
-    isExpandedState: boolean;
     /**
      * Style variation of the button.
      */
-    readonly variant?: StepperVariantType;
+    readonly color?: StepperColorType;
     /**
      * Size of stepper
      */
@@ -20,29 +20,12 @@ export declare class GovStepperItem {
      * Custom stepper item identifier. Otherwise, it will be generated
      */
     readonly identifier: string;
-    /**
-     * Item name of the stepper
-     */
-    readonly label: string;
-    /**
-     * Item annotation of the stepper
-     */
-    readonly annotation: string;
-    /**
-     * Used to change the HMTL tag in the stepper trigger for correct semantic structure
-     */
-    readonly triggerTag: string;
     /**
      * Called when the accordion state changes
      */
     govChange: EventEmitter<GovStepperItemChangeEvent>;
-    validateLabel(newValue: string): void;
-    validateTriggerTag(newValue: string): void;
-    validateVariant(newValue: string): void;
+    validateColor(newValue: string): void;
     componentWillLoad(): void;
+    connectedCallback(): void;
     render(): any;
-    /**
-     * Returns the current state of the component
-     */
-    currentState(): Promise<boolean>;
 }

package/dist/types/components/gov-stepper/gov-stepper.d.ts

@@ -3,6 +3,7 @@ import { StepperSizesType } from './constants';
 import { GovStepperItemChangeEvent } from './gov-stepper-item.d';
 export declare class GovStepper {
     private h;
+    private hydrated;
     constructor();
     readonly host: HTMLGovStepperElement;
     /**
@@ -16,5 +17,6 @@ export declare class GovStepper {
     validateSize(newValue: string): void;
     componentWillLoad(): void;
     componentDidLoad(): void;
+    connectedCallback(): void;
     render(): any;
 }

package/dist/types/components/gov-tabs/constants.d.ts

@@ -1,7 +1,10 @@
-import { Variants } from '../../core/constants/variants';
 import { ValueOf } from '../../types/interfaces';
-export declare const TabVariants: Pick<typeof Variants, "PRIMARY" | "SECONDARY" | "SUCCESS" | "ERROR" | "WARNING">;
-export type VariantType = `${ValueOf<typeof TabVariants>}`;
+import { Sizes } from "../../core/constants/sizes";
+import { Colors } from '../../core/constants/colors';
+export declare const TabSizes: Pick<typeof Sizes, "_XS" | "_S" | "_M" | "_L" | "_XL">;
+export type TabSizeType = `${ValueOf<typeof TabSizes>}`;
+export declare const TabColors: Pick<typeof Colors, "PRIMARY" | "NEUTRAL">;
+export type ColorType = `${ValueOf<typeof TabColors>}`;
 export declare enum TabTypes {
     TEXT = "text",
     CHIP = "chip"

package/dist/types/components/gov-tabs/gov-tabs-item.d.ts

@@ -20,6 +20,14 @@ export declare class GovTabsItem {
      * Item disable state
      */
     readonly disabled: boolean;
+    /**
+     * Icon definition at the stat. Use the type/name notation
+     */
+    readonly iconStart: string;
+    /**
+     * Icon definition at the end. Use the type/name notation
+     */
+    readonly iconEnd: string;
     /**
      * Default selected tab
      */

package/dist/types/components/gov-tabs/gov-tabs.d.ts

@@ -1,55 +1,54 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { Nullable } from "../../types/interfaces";
-import { TabOrientationType, TabType, VariantType } from "./constants";
+import { ColorType, TabOrientationType, TabSizeType, TabType } from "./constants";
 import { GovTabControllerItem } from "./gov-tabs.types";
+import { Nullable } from "../../types/interfaces";
+import { Attributes } from "../../helpers/Dom/attribute";
 export declare class GovTabs {
     private h;
     private triggerRefs;
-    private readonly formSelectId;
+    private attributeObserver;
     constructor();
     host: HTMLGovTabsElement;
-    controllers: GovTabControllerItem[];
-    focusIndex: number;
-    compactControls: boolean;
     /**
      * Tabs type
      */
     readonly type: TabType;
+    /**
+     * Tabs size.
+     */
+    readonly size?: TabSizeType;
     /**
      * Style variation of the tab chips.
      */
-    readonly variant?: VariantType;
+    readonly color?: ColorType;
     /**
      * Tabs orientation
      */
     readonly orientation: TabOrientationType;
     /**
-     * Adds accessible label for the tabs that is only shown for screen readers.
-     */
-    readonly wcagLabel: string;
-    /**
-     * Adds accessible label for the tabs select
-     */
-    readonly wcagSelectLabel: string;
-    /**
-     * Indicates the id of a component that labels the tabs.
+     * Icon and description display direction
      */
-    readonly wcagLabelledBy: string;
+    readonly direction: 'row' | 'column';
     /**
      * Emitted when the tab is changed.
      */
     govChange: EventEmitter<HTMLGovTabsItemElement>;
     validateType(newValue: string): void;
-    validateVariant(newValue: string): void;
+    validateColor(newValue: string): void;
+    validateSize(newValue: string): void;
+    controllers: GovTabControllerItem[];
+    focusIndex: number;
+    inheritedAttributes: Attributes;
+    componentDidLoad(): void;
     componentWillLoad(): void;
-    componentDidRender(): Promise<void>;
+    disconnectedCallback(): void;
+    onAriaAttributeChange(attributeName: string, newValue: string): void;
     private prepareControllers;
     private setActiveByIdentifier;
     private reRender;
     render(): any;
     private getCurrentTab;
     private onSelectHandler;
-    private onChangeHandler;
     private onKeydownHandler;
     private goToPrevNext;
     /**
@@ -68,8 +67,4 @@ export declare class GovTabs {
      * Regenerate tabs controllers
      */
     rerender(): Promise<void>;
-    /**
-     * Validate the WCAG attributes of the component
-     */
-    validateWcag(): Promise<void>;
 }

package/dist/types/components/gov-tabs/gov-tabs.types.d.ts

@@ -1,3 +1,5 @@
+import { Nullable } from "../../types/interfaces";
+import { IconType } from "../gov-icon/helpers";
 export interface GovTabControllerItem {
     label: string;
     contentIdentifier: string;
@@ -6,4 +8,7 @@ export interface GovTabControllerItem {
     active: boolean;
     default: boolean;
     disabled: boolean;
+    iconStart: Nullable<IconType>;
+    iconEnd: Nullable<IconType>;
+    direction: string;
 }

package/dist/types/components/gov-tag/constants.d.ts

@@ -1,3 +1,12 @@
+import { Sizes } from "../../core/constants/sizes";
+import { ValueOf } from "../../types/interfaces";
+export declare const TagSizes: Pick<typeof Sizes, "_XS" | "_S" | "_M">;
+export type TagSizesType = `${ValueOf<typeof TagSizes>}`;
+export declare enum TagType {
+    BOLD = "bold",
+    SUBTLE = "subtle"
+}
+export type TagTypesType = `${ValueOf<typeof TagType>}`;
 export declare const TagClass: {
     root: string;
 };

package/dist/types/components/gov-tag/gov-tag.d.ts

@@ -1,12 +1,9 @@
-import { ButtonSizesType, ButtonVariantType } from '../gov-button/button/constants';
+import { ButtonColorType } from '../gov-button/button/constants';
+import { TagSizesType, TagTypesType } from './constants';
 export declare class GovTag {
     private h;
     constructor();
     host: HTMLGovTagElement;
-    /**
-     * Determine if component should have inverse colors to be used on dark background
-     */
-    readonly inverse: boolean;
     /**
      * Definition of the button icon on the left. The icon must be defined in the form "type/name".
      */
@@ -18,12 +15,16 @@ export declare class GovTag {
     /**
      * Tag’s size.
      */
-    readonly size: ButtonSizesType;
+    readonly size: TagSizesType;
     /**
      * Style variation of the tag.
      */
-    readonly variant: ButtonVariantType;
-    validateVariant(newValue: string): void;
+    readonly color: ButtonColorType;
+    /**
+     * Tag’s type
+     */
+    readonly type: TagTypesType;
+    validateColor(newValue: string): void;
     validateSize(newValue: string): void;
     componentWillLoad(): void;
     render(): any;

package/dist/types/components/gov-theme-switch/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const ThemeSwitchClass: {
+    root: string;
+};
+export declare const ATTRIBUTE_THEME_NAME = "data-theme";

package/dist/types/components/gov-theme-switch/gov-theme-switch.d.ts

@@ -0,0 +1,18 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { ThemeList, ThemeSwitchEvent } from "./gov-theme-switch.types";
+export declare class GovThemeSwitch {
+    private h;
+    constructor();
+    host: HTMLGovLoadingElement;
+    /**
+     * Called when the theme is changed by the user
+     */
+    govChange: EventEmitter<ThemeSwitchEvent>;
+    theme: ThemeList;
+    private get localStorageValue();
+    private get htmlElement();
+    componentWillLoad(): void;
+    private initDefaultState;
+    private setThemeState;
+    render(): any;
+}

package/dist/types/components/gov-theme-switch/gov-theme-switch.types.d.ts

@@ -0,0 +1,10 @@
+import { GovBaseEvent } from "../../types/event.types";
+export declare enum ThemeList {
+    auto = "auto",
+    light = "light",
+    dark = "dark"
+}
+export interface ThemeSwitchEvent extends GovBaseEvent {
+    ref: HTMLGovThemeSwitchElement;
+    state: ThemeList;
+}

package/dist/types/components/gov-tile/constants.d.ts

@@ -1,9 +1,13 @@
+import { Sizes } from "../../core/constants/sizes";
+import { ValueOf } from "../../types/interfaces";
+export declare const TileSizes: Pick<typeof Sizes, "_S" | "_M" | "_L">;
+export type TileSizesType = `${ValueOf<typeof TileSizes>}`;
 export declare const TileClass: {
     root: string;
-    icon: string;
-    arrow: string;
-    title: string;
     link: string;
     content: string;
-    heading: string;
+    text: string;
+    title: string;
+    icon: string;
+    annotation: string;
 };

package/dist/types/components/gov-tile/container/gov-tiles.d.ts

@@ -2,14 +2,9 @@ export declare class GovTiles {
     private h;
     constructor();
     /**
-     * Number of columns between 1-4
+     * Number of columns between 2-6
      */
     readonly columns: number;
-    /**
-     * Tiles border
-     */
-    readonly noBorder: boolean;
     host: HTMLGovTilesElement;
-    get classNames(): string;
     render(): any;
 }

package/dist/types/components/gov-tile/gov-tile.d.ts

@@ -1,6 +1,19 @@
+import { TileSizesType } from "./constants";
 import { ButtonTargetType } from "../gov-button/button/constants";
 export declare class GovTile {
     host: HTMLGovTileElement;
+    /**
+     * Tile’s size
+     */
+    readonly size?: TileSizesType;
+    /**
+     * Style variation of the tile.
+     */
+    readonly orientation: "vertical" | "horizontal";
+    /**
+     * Tiles border
+     */
+    readonly noBorder: boolean;
     /**
      * Link on whole tile
      */

package/dist/types/components/gov-toast/constants.d.ts

@@ -1,13 +1,15 @@
-import { Variants, Types } from '../../core/constants/variants';
+import { Colors } from '../../core/constants/colors';
 import { ValueOf } from '../../types/interfaces';
-export declare const ToastVariants: Pick<typeof Variants, "PRIMARY" | "SECONDARY" | "SUCCESS" | "ERROR" | "WARNING">;
-export type ToastVariantType = `${ValueOf<typeof ToastVariants>}`;
-export declare const ToastTypes: Pick<typeof Types, "SOLID" | "CLASSIC">;
-export type ToastTypesType = `${ValueOf<typeof ToastTypes>}`;
+export declare const ToastColors: Pick<typeof Colors, "PRIMARY" | "NEUTRAL" | "SUCCESS" | "ERROR" | "WARNING">;
+export type ToastColorType = `${ValueOf<typeof ToastColors>}`;
+export declare enum ToastType {
+    BOLD = "bold",
+    SUBTLE = "subtle"
+}
+export type ToastTypesType = `${ValueOf<typeof ToastType>}`;
 export declare const ToastClass: {
     root: string;
     hidden: string;
-    icon: string;
     content: string;
     close: string;
     timer: string;

package/dist/types/components/gov-toast/gov-toast.d.ts

@@ -1,15 +1,17 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { ToastTypesType, ToastVariantType } from "./constants";
+import { ToastColorType, ToastTypesType } from "./constants";
+import { Attributes } from "../../helpers/Dom/attribute";
 export declare class GovToast {
     private h;
     private timeout;
     private readonly toastId;
+    private attributeObserver;
     constructor();
     host: HTMLGovToastElement;
     /**
      * Style variation of the toast message.
      */
-    readonly variant?: ToastVariantType;
+    readonly color?: ToastColorType;
     /**
      * Toast’s gravity
      */
@@ -33,18 +35,21 @@ export declare class GovToast {
     /**
      * Aria label for the closing button. It is mandatory if the alert is closable
      */
-    readonly wcagCloseLabel: string;
+    readonly accessibleCloseLabel: string;
     /**
      * Called when the close button is clicked
      */
     govClose: EventEmitter<string>;
-    validateVariant(newValue: string): void;
+    validateColor(newValue: string): void;
+    inheritedAttributes: Attributes;
+    componentDidLoad(): void;
     componentWillLoad(): void;
     disconnectedCallback(): void;
+    onAriaAttributeChange(attributeName: string, newValue: string): void;
     private runTimer;
     render(): any;
     private onCloseHandler;
-    get isSolid(): boolean;
+    get isBold(): boolean;
     get isTimer(): boolean;
     /**
      * Remove toast from dom

package/dist/types/components/gov-tooltip/constants.d.ts

@@ -1,8 +1,8 @@
-import { Variants } from '../../core/constants/variants';
+import { Colors } from '../../core/constants/colors';
 import { Sizes } from '../../core/constants/sizes';
 import { ValueOf } from '../../types/interfaces';
-export declare const TooltipVariant: Pick<typeof Variants, "PRIMARY" | "SECONDARY">;
-export type TooltipVariantType = `${ValueOf<typeof TooltipVariant>}`;
+export declare const TooltipColors: Pick<typeof Colors, "PRIMARY" | "NEUTRAL">;
+export type TooltipColorType = `${ValueOf<typeof TooltipColors>}`;
 export declare const TooltipSize: Pick<typeof Sizes, "_S" | "_M" | "_L">;
 export type TooltipSizeType = `${ValueOf<typeof TooltipSize>}`;
 export declare enum TooltipPosition {

package/dist/types/components/gov-tooltip/gov-tooltip-content.d.ts

@@ -1,11 +1,11 @@
-import { TooltipSizeType, TooltipVariantType } from "./constants";
+import { TooltipSizeType, TooltipColorType } from "./constants";
 export declare class GovTooltipContent {
     private timeout;
     host: HTMLGovTooltipContentElement;
     /**
      * Style variation of the tooltip
      */
-    readonly variant?: TooltipVariantType;
+    readonly color?: TooltipColorType;
     /**
      * Tooltip’s size.
      */

package/dist/types/components/gov-tooltip/gov-tooltip.d.ts

@@ -1,4 +1,4 @@
-import { TooltipPositionType, TooltipSizeType, TooltipVariantType } from "./constants";
+import { TooltipPositionType, TooltipSizeType, TooltipColorType } from "./constants";
 export declare class GovTooltip {
     private h;
     private readonly tooltipContentId;
@@ -8,7 +8,7 @@ export declare class GovTooltip {
     /**
      * Style variation of the tooltip
      */
-    readonly variant?: TooltipVariantType;
+    readonly color?: TooltipColorType;
     /**
      * Tooltip’s size.
      */
@@ -30,7 +30,7 @@ export declare class GovTooltip {
      */
     readonly icon: boolean;
     persist: boolean;
-    validateVariant(newValue: string): void;
+    validateColor(newValue: string): void;
     validateSize(newValue: string): void;
     validatePosition(newValue: string): void;
     rerenderMessage(): void;

package/dist/types/components/gov-wizard/constants.d.ts

@@ -1,9 +1,9 @@
-import { Variants } from '../../core/constants/variants';
+import { Colors } from '../../core/constants/colors';
 import { Sizes } from '../../core/constants/sizes';
 import { ValueOf } from '../../types/interfaces';
-export declare const WizardVariants: Pick<typeof Variants, "PRIMARY" | "SECONDARY" | "SUCCESS" | "ERROR" | "WARNING">;
-export type WizardVariantsType = `${ValueOf<typeof WizardVariants>}`;
-export declare const WizardSizes: Pick<typeof Sizes, "_XS" | "_S" | "_M">;
+export declare const WizardColors: Pick<typeof Colors, "PRIMARY" | "NEUTRAL" | "SUCCESS" | "ERROR" | "WARNING">;
+export type WizardColorType = `${ValueOf<typeof WizardColors>}`;
+export declare const WizardSizes: Pick<typeof Sizes, "_S" | "_M" | "_L">;
 export type WizardSizesType = `${ValueOf<typeof WizardSizes>}`;
 export declare const WizardClass: {
     root: string;
@@ -11,11 +11,9 @@ export declare const WizardClass: {
 export declare const WizardItemClass: {
     root: string;
     header: string;
-    arrow: string;
-    title: string;
-    name: string;
-    label: string;
-    annot: string;
     prefix: string;
+    label: string;
+    headline: string;
+    chevron: string;
     content: string;
 };