@uh-design-system/component-library 1.5.2 → 1.6.0-rc.1

package/dist/types/constants.d.ts

@@ -5,3 +5,6 @@ export declare const BACKDROP_TRANSITION_IN_DURATION = 180;
 export declare const BACKDROP_TRANSITION_OUT_DURATION = 160;
 export declare const MODAL_TRANSITION_IN_DURATION = 220;
 export declare const MODAL_TRANSITION_OUT_DURATION = 160;
+export declare const UHDS_APP_NAME_ATTR = "data-uhds-app-name";
+export declare const CHECKBOX_GROUP_TREE_TRANSITION_IN_DURATION_MS = 140;
+export declare const CHECKBOX_GROUP_TREE_TRANSITION_OUT_DURATION_MS = 100;

package/dist/types/declarations.d.ts

@@ -3,15 +3,12 @@ declare module '!!raw-loader!*' {
   export default content;
 }
 
-export {};
+declare module '*.css' {
+  const content: Record<string, string>;
+  export default content;
+}
 
-declare global {
-  var takeScreenshot: (identifier: string) => Promise<void>;
-  var waitForBodyTransitionEnd: () => Promise<void>;
-  var _mtm: Array<Record<string, unknown>> | undefined;
-  /**
-   * Probability is set in Matomo Tag Manager.
-   */
-  var _uhdsMatomoCollectionProbability: number | undefined;
-  var _uhdsMatomoAppName: string | undefined;
+declare module '*.scss' {
+  const content: Record<string, string>;
+  export default content;
 }

package/dist/types/global.d.ts

@@ -0,0 +1,12 @@
+export {}; // treat this heading file as a module
+
+declare global {
+  var takeScreenshot: (identifier: string) => Promise<void>;
+  var waitForBodyTransitionEnd: () => Promise<void>;
+  var _mtm: Array<Record<string, unknown>> | undefined;
+  /**
+   * Probability is set in Matomo Tag Manager.
+   */
+  var _uhdsMatomoCollectionProbability: number | undefined;
+  var _uhdsMatomoAppName: string | undefined;
+}

package/dist/types/index.d.ts

@@ -1,6 +1,6 @@
 export type * from './components.d.ts';
 export type * as DataTypes from './data';
 export { default as appData } from './data.json';
-export { componentOnReady } from './utils/utils';
+export { componentOnReady, injectMatomoScript } from './utils/utils';
 export { calculatePaginationPages } from './utils/pagination/paginationUtils';
 export type { PaginationPageItem } from './utils/pagination/paginationUtils';

package/dist/types/stencil-public-runtime.d.ts

@@ -1070,6 +1070,7 @@ export declare namespace JSXBase {
         importance?: 'low' | 'auto' | 'high';
         height?: number | string;
         loading?: 'lazy' | 'auto' | 'eager';
+        referrerPolicy?: ReferrerPolicy;
         sizes?: string;
         src?: string;
         srcSet?: string;

package/dist/types/store.d.ts

@@ -1,14 +1,16 @@
+import type { ObservableMap } from '@stencil/store';
 declare const languages: readonly ["fi", "sv", "en"];
 export type Language = (typeof languages)[number];
 interface ConfigurationOptions {
     language?: Language;
 }
-export declare const defaultLanguage: Language;
-declare const state: {
-    language: Language;
-}, dispose: () => void, onChange: import("@stencil/store/dist/types").OnChangeHandler<{
+interface State {
     language: Language;
-}>;
+}
+export declare const defaultLanguage: Language;
+declare const state: State;
+declare const dispose: ObservableMap<State>['dispose'];
+declare const onChange: ObservableMap<State>['onChange'];
 export declare const getLanguage: () => "fi" | "sv" | "en";
 export declare const setLanguage: (language: Language) => void;
 export declare const initialize: ({ language }?: ConfigurationOptions) => void;

package/dist/types/testing/screenshotCommand.d.ts

@@ -0,0 +1,6 @@
+import type { BrowserCommandContext } from 'vitest/node';
+export declare const matchScreenshotCommand: (ctx: BrowserCommandContext, base64: string, identifier: string) => Promise<{
+    matched: boolean;
+    reason?: string;
+    diffPath?: string;
+}>;

package/dist/types/utils/datepicker/datepickerUtils.d.ts

@@ -10,24 +10,24 @@ export interface CalendarDay {
     date: Date;
 }
 export declare const createDate: (year: number, month: number, day?: number) => Date;
-export declare const parseISODate: (dateString: string) => Date | null;
+export declare const parseISODate: (dateString: string) => Date;
 export declare const dateToString: (date: Date) => string;
 export declare const formatDisplayDate: (dateString: string) => string;
-export declare const parseInputDate: (input: string) => string | null;
+export declare const parseInputDate: (input: string) => string;
 export declare const isDateDisabled: (date: Date, constraints: DateConstraints) => boolean;
 export declare const isDateSelected: (date: Date, selectedDateString: string) => boolean;
 export declare const getCalendarDays: (year: number, month: number) => CalendarDay[];
 export declare const generateYearOptions: (minYear?: number, maxYear?: number) => number[];
-export declare const findFirstSelectableDateInMonth: (year: number, month: number, constraints: DateConstraints) => Date | null;
-export declare const findLastSelectableDateInMonth: (year: number, month: number, constraints: DateConstraints) => Date | null;
+export declare const findFirstSelectableDateInMonth: (year: number, month: number, constraints: DateConstraints) => Date;
+export declare const findLastSelectableDateInMonth: (year: number, month: number, constraints: DateConstraints) => Date;
 export declare const getFirstSelectableDate: (constraints: DateConstraints) => Date;
 export interface MonthYear {
     month: number;
     year: number;
 }
 export declare function navigateMonth(currentMonth: number, currentYear: number, direction: 'prev' | 'next'): MonthYear;
-export declare function getKeyboardNavigationStep(key: string): number;
-export declare function getNextSelectableDate(startDate: Date, step: number, constraints: DateConstraints, maxIterations?: number): Date | null;
+export declare function getKeyboardNavigationStep(key: string): 1 | 0 | -1 | 7 | -7;
+export declare function getNextSelectableDate(startDate: Date, step: number, constraints: DateConstraints, maxIterations?: number): Date;
 export declare function handleDateInputKeyDown(event: KeyboardEvent): void;
 export declare const openDatePicker: (selectedDate?: Date | null) => string;
 export declare const closeDatePicker: (selectedDate?: Date | null) => string;

package/dist/types/utils/pagination/paginationUtils.d.ts

@@ -10,3 +10,4 @@ export declare const goToLastPage: () => "Viimeinen sivu" | "Sista sidan" | "Las
 export declare const goToPreviousPage: () => "Edellinen sivu" | "Föregående sida" | "Previous page";
 export declare const goToNextPage: () => "Seuraava sivu" | "Nästa sida" | "Next page";
 export declare const currentPage: () => "Nykyinen sivu" | "Nuvarande sida" | "Current page";
+export declare const pageNumber: (pageNumber: number) => string;

package/dist/types/utils/storybook/storybookUtils.d.ts

@@ -1,4 +1,10 @@
 import { TemplateResult } from 'lit';
+export declare const storybookA11yMode: {
+    readonly todo: "todo";
+    readonly error: "error";
+    readonly off: "off";
+};
+export type StorybookConfigA11y = (typeof storybookA11yMode)[keyof typeof storybookA11yMode];
 export declare const generateLoremIpsum: ({ paragraphs, wordsPerParagraph, startWithLorem, consistent }?: {
     paragraphs?: number;
     wordsPerParagraph?: number;
@@ -13,3 +19,4 @@ export declare const getCssVariablesFromStyleSheet: (categories: Record<string,
     category: string;
 }[];
 export declare const getEventsStoryStyles: () => string;
+export declare const sortedIconNames: string[];

package/dist/types/utils/tests/testUtils.d.ts

@@ -1,106 +1,9 @@
 import { HTMLStencilElement } from '../../stencil-public-runtime';
-export declare const withinShadowRoot: (customElem: HTMLElement | HTMLStencilElement, selector: string) => Promise<{
-    getByLabelText<T extends HTMLElement = HTMLElement>(id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").SelectorMatcherOptions): ReturnType<import("@testing-library/dom").GetByText<T>>;
-    getAllByLabelText<T extends HTMLElement = HTMLElement>(id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").SelectorMatcherOptions): ReturnType<import("@testing-library/dom").AllByText<T>>;
-    queryByLabelText<T extends HTMLElement = HTMLElement>(id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").SelectorMatcherOptions): ReturnType<import("@testing-library/dom").QueryByText<T>>;
-    queryAllByLabelText<T extends HTMLElement = HTMLElement>(id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").SelectorMatcherOptions): ReturnType<import("@testing-library/dom").AllByText<T>>;
-    findByLabelText<T extends HTMLElement = HTMLElement>(id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").SelectorMatcherOptions, waitForElementOptions?: import("@testing-library/dom").waitForOptions): ReturnType<import("@testing-library/dom").FindByText<T>>;
-    findAllByLabelText<T extends HTMLElement = HTMLElement>(id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").SelectorMatcherOptions, waitForElementOptions?: import("@testing-library/dom").waitForOptions): ReturnType<import("@testing-library/dom").FindAllByText<T>>;
-    getByPlaceholderText<T extends HTMLElement = HTMLElement>(id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").MatcherOptions): ReturnType<import("@testing-library/dom").GetByBoundAttribute<T>>;
-    getAllByPlaceholderText<T extends HTMLElement = HTMLElement>(id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").MatcherOptions): ReturnType<import("@testing-library/dom").AllByBoundAttribute<T>>;
-    queryByPlaceholderText<T extends HTMLElement = HTMLElement>(id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").MatcherOptions): ReturnType<import("@testing-library/dom").QueryByBoundAttribute<T>>;
-    queryAllByPlaceholderText<T extends HTMLElement = HTMLElement>(id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").MatcherOptions): ReturnType<import("@testing-library/dom").AllByBoundAttribute<T>>;
-    findByPlaceholderText<T extends HTMLElement = HTMLElement>(id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").MatcherOptions, waitForElementOptions?: import("@testing-library/dom").waitForOptions): ReturnType<import("@testing-library/dom").FindByBoundAttribute<T>>;
-    findAllByPlaceholderText<T extends HTMLElement = HTMLElement>(id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").MatcherOptions, waitForElementOptions?: import("@testing-library/dom").waitForOptions): ReturnType<import("@testing-library/dom").FindAllByBoundAttribute<T>>;
-    getByText<T extends HTMLElement = HTMLElement>(id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").SelectorMatcherOptions): ReturnType<import("@testing-library/dom").GetByText<T>>;
-    getAllByText<T extends HTMLElement = HTMLElement>(id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").SelectorMatcherOptions): ReturnType<import("@testing-library/dom").AllByText<T>>;
-    queryByText<T extends HTMLElement = HTMLElement>(id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").SelectorMatcherOptions): ReturnType<import("@testing-library/dom").QueryByText<T>>;
-    queryAllByText<T extends HTMLElement = HTMLElement>(id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").SelectorMatcherOptions): ReturnType<import("@testing-library/dom").AllByText<T>>;
-    findByText<T extends HTMLElement = HTMLElement>(id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").SelectorMatcherOptions, waitForElementOptions?: import("@testing-library/dom").waitForOptions): ReturnType<import("@testing-library/dom").FindByText<T>>;
-    findAllByText<T extends HTMLElement = HTMLElement>(id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").SelectorMatcherOptions, waitForElementOptions?: import("@testing-library/dom").waitForOptions): ReturnType<import("@testing-library/dom").FindAllByText<T>>;
-    getByAltText<T extends HTMLElement = HTMLElement>(id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").MatcherOptions): ReturnType<import("@testing-library/dom").GetByBoundAttribute<T>>;
-    getAllByAltText<T extends HTMLElement = HTMLElement>(id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").MatcherOptions): ReturnType<import("@testing-library/dom").AllByBoundAttribute<T>>;
-    queryByAltText<T extends HTMLElement = HTMLElement>(id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").MatcherOptions): ReturnType<import("@testing-library/dom").QueryByBoundAttribute<T>>;
-    queryAllByAltText<T extends HTMLElement = HTMLElement>(id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").MatcherOptions): ReturnType<import("@testing-library/dom").AllByBoundAttribute<T>>;
-    findByAltText<T extends HTMLElement = HTMLElement>(id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").MatcherOptions, waitForElementOptions?: import("@testing-library/dom").waitForOptions): ReturnType<import("@testing-library/dom").FindByBoundAttribute<T>>;
-    findAllByAltText<T extends HTMLElement = HTMLElement>(id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").MatcherOptions, waitForElementOptions?: import("@testing-library/dom").waitForOptions): ReturnType<import("@testing-library/dom").FindAllByBoundAttribute<T>>;
-    getByTitle<T extends HTMLElement = HTMLElement>(id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").MatcherOptions): ReturnType<import("@testing-library/dom").GetByBoundAttribute<T>>;
-    getAllByTitle<T extends HTMLElement = HTMLElement>(id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").MatcherOptions): ReturnType<import("@testing-library/dom").AllByBoundAttribute<T>>;
-    queryByTitle<T extends HTMLElement = HTMLElement>(id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").MatcherOptions): ReturnType<import("@testing-library/dom").QueryByBoundAttribute<T>>;
-    queryAllByTitle<T extends HTMLElement = HTMLElement>(id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").MatcherOptions): ReturnType<import("@testing-library/dom").AllByBoundAttribute<T>>;
-    findByTitle<T extends HTMLElement = HTMLElement>(id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").MatcherOptions, waitForElementOptions?: import("@testing-library/dom").waitForOptions): ReturnType<import("@testing-library/dom").FindByBoundAttribute<T>>;
-    findAllByTitle<T extends HTMLElement = HTMLElement>(id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").MatcherOptions, waitForElementOptions?: import("@testing-library/dom").waitForOptions): ReturnType<import("@testing-library/dom").FindAllByBoundAttribute<T>>;
-    getByDisplayValue<T extends HTMLElement = HTMLElement>(id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").MatcherOptions): ReturnType<import("@testing-library/dom").GetByBoundAttribute<T>>;
-    getAllByDisplayValue<T extends HTMLElement = HTMLElement>(id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").MatcherOptions): ReturnType<import("@testing-library/dom").AllByBoundAttribute<T>>;
-    queryByDisplayValue<T extends HTMLElement = HTMLElement>(id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").MatcherOptions): ReturnType<import("@testing-library/dom").QueryByBoundAttribute<T>>;
-    queryAllByDisplayValue<T extends HTMLElement = HTMLElement>(id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").MatcherOptions): ReturnType<import("@testing-library/dom").AllByBoundAttribute<T>>;
-    findByDisplayValue<T extends HTMLElement = HTMLElement>(id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").MatcherOptions, waitForElementOptions?: import("@testing-library/dom").waitForOptions): ReturnType<import("@testing-library/dom").FindByBoundAttribute<T>>;
-    findAllByDisplayValue<T extends HTMLElement = HTMLElement>(id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").MatcherOptions, waitForElementOptions?: import("@testing-library/dom").waitForOptions): ReturnType<import("@testing-library/dom").FindAllByBoundAttribute<T>>;
-    getByRole<T extends HTMLElement = HTMLElement>(role: import("@testing-library/dom").ByRoleMatcher, options?: import("@testing-library/dom").ByRoleOptions): ReturnType<import("@testing-library/dom").GetByRole<T>>;
-    getAllByRole<T extends HTMLElement = HTMLElement>(role: import("@testing-library/dom").ByRoleMatcher, options?: import("@testing-library/dom").ByRoleOptions): ReturnType<import("@testing-library/dom").AllByRole<T>>;
-    queryByRole<T extends HTMLElement = HTMLElement>(role: import("@testing-library/dom").ByRoleMatcher, options?: import("@testing-library/dom").ByRoleOptions): ReturnType<import("@testing-library/dom").QueryByRole<T>>;
-    queryAllByRole<T extends HTMLElement = HTMLElement>(role: import("@testing-library/dom").ByRoleMatcher, options?: import("@testing-library/dom").ByRoleOptions): ReturnType<import("@testing-library/dom").AllByRole<T>>;
-    findByRole<T extends HTMLElement = HTMLElement>(role: import("@testing-library/dom").ByRoleMatcher, options?: import("@testing-library/dom").ByRoleOptions, waitForElementOptions?: import("@testing-library/dom").waitForOptions): ReturnType<import("@testing-library/dom").FindByRole<T>>;
-    findAllByRole<T extends HTMLElement = HTMLElement>(role: import("@testing-library/dom").ByRoleMatcher, options?: import("@testing-library/dom").ByRoleOptions, waitForElementOptions?: import("@testing-library/dom").waitForOptions): ReturnType<import("@testing-library/dom").FindAllByRole<T>>;
-    getByTestId<T extends HTMLElement = HTMLElement>(id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").MatcherOptions): ReturnType<import("@testing-library/dom").GetByBoundAttribute<T>>;
-    getAllByTestId<T extends HTMLElement = HTMLElement>(id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").MatcherOptions): ReturnType<import("@testing-library/dom").AllByBoundAttribute<T>>;
-    queryByTestId<T extends HTMLElement = HTMLElement>(id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").MatcherOptions): ReturnType<import("@testing-library/dom").QueryByBoundAttribute<T>>;
-    queryAllByTestId<T extends HTMLElement = HTMLElement>(id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").MatcherOptions): ReturnType<import("@testing-library/dom").AllByBoundAttribute<T>>;
-    findByTestId<T extends HTMLElement = HTMLElement>(id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").MatcherOptions, waitForElementOptions?: import("@testing-library/dom").waitForOptions): ReturnType<import("@testing-library/dom").FindByBoundAttribute<T>>;
-    findAllByTestId<T extends HTMLElement = HTMLElement>(id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").MatcherOptions, waitForElementOptions?: import("@testing-library/dom").waitForOptions): ReturnType<import("@testing-library/dom").FindAllByBoundAttribute<T>>;
-} & {
-    getByLabelText: (id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").SelectorMatcherOptions) => HTMLElement;
-    getAllByLabelText: (id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").SelectorMatcherOptions) => HTMLElement[];
-    queryByLabelText: (id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").SelectorMatcherOptions) => HTMLElement;
-    queryAllByLabelText: (id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").SelectorMatcherOptions) => HTMLElement[];
-    findByLabelText: (id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").SelectorMatcherOptions, waitForElementOptions?: import("@testing-library/dom").waitForOptions) => Promise<HTMLElement>;
-    findAllByLabelText: (id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").SelectorMatcherOptions, waitForElementOptions?: import("@testing-library/dom").waitForOptions) => Promise<HTMLElement[]>;
-    getByPlaceholderText: (id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").MatcherOptions) => HTMLElement;
-    getAllByPlaceholderText: (id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").MatcherOptions) => HTMLElement[];
-    queryByPlaceholderText: (id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").MatcherOptions) => HTMLElement;
-    queryAllByPlaceholderText: (id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").MatcherOptions) => HTMLElement[];
-    findByPlaceholderText: (id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").MatcherOptions, waitForElementOptions?: import("@testing-library/dom").waitForOptions) => Promise<HTMLElement>;
-    findAllByPlaceholderText: (id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").MatcherOptions, waitForElementOptions?: import("@testing-library/dom").waitForOptions) => Promise<HTMLElement[]>;
-    getByText: (id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").SelectorMatcherOptions) => HTMLElement;
-    getAllByText: (id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").SelectorMatcherOptions) => HTMLElement[];
-    queryByText: (id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").SelectorMatcherOptions) => HTMLElement;
-    queryAllByText: (id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").SelectorMatcherOptions) => HTMLElement[];
-    findByText: (id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").SelectorMatcherOptions, waitForElementOptions?: import("@testing-library/dom").waitForOptions) => Promise<HTMLElement>;
-    findAllByText: (id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").SelectorMatcherOptions, waitForElementOptions?: import("@testing-library/dom").waitForOptions) => Promise<HTMLElement[]>;
-    getByAltText: (id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").MatcherOptions) => HTMLElement;
-    getAllByAltText: (id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").MatcherOptions) => HTMLElement[];
-    queryByAltText: (id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").MatcherOptions) => HTMLElement;
-    queryAllByAltText: (id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").MatcherOptions) => HTMLElement[];
-    findByAltText: (id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").MatcherOptions, waitForElementOptions?: import("@testing-library/dom").waitForOptions) => Promise<HTMLElement>;
-    findAllByAltText: (id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").MatcherOptions, waitForElementOptions?: import("@testing-library/dom").waitForOptions) => Promise<HTMLElement[]>;
-    getByTitle: (id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").MatcherOptions) => HTMLElement;
-    getAllByTitle: (id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").MatcherOptions) => HTMLElement[];
-    queryByTitle: (id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").MatcherOptions) => HTMLElement;
-    queryAllByTitle: (id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").MatcherOptions) => HTMLElement[];
-    findByTitle: (id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").MatcherOptions, waitForElementOptions?: import("@testing-library/dom").waitForOptions) => Promise<HTMLElement>;
-    findAllByTitle: (id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").MatcherOptions, waitForElementOptions?: import("@testing-library/dom").waitForOptions) => Promise<HTMLElement[]>;
-    getByDisplayValue: (id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").MatcherOptions) => HTMLElement;
-    getAllByDisplayValue: (id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").MatcherOptions) => HTMLElement[];
-    queryByDisplayValue: (id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").MatcherOptions) => HTMLElement;
-    queryAllByDisplayValue: (id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").MatcherOptions) => HTMLElement[];
-    findByDisplayValue: (id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").MatcherOptions, waitForElementOptions?: import("@testing-library/dom").waitForOptions) => Promise<HTMLElement>;
-    findAllByDisplayValue: (id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").MatcherOptions, waitForElementOptions?: import("@testing-library/dom").waitForOptions) => Promise<HTMLElement[]>;
-    getByRole: (role: import("@testing-library/dom").ByRoleMatcher, options?: import("@testing-library/dom").ByRoleOptions) => HTMLElement;
-    getAllByRole: (role: import("@testing-library/dom").ByRoleMatcher, options?: import("@testing-library/dom").ByRoleOptions) => HTMLElement[];
-    queryByRole: (role: import("@testing-library/dom").ByRoleMatcher, options?: import("@testing-library/dom").ByRoleOptions) => HTMLElement;
-    queryAllByRole: (role: import("@testing-library/dom").ByRoleMatcher, options?: import("@testing-library/dom").ByRoleOptions) => HTMLElement[];
-    findByRole: (role: import("@testing-library/dom").ByRoleMatcher, options?: import("@testing-library/dom").ByRoleOptions, waitForElementOptions?: import("@testing-library/dom").waitForOptions) => Promise<HTMLElement>;
-    findAllByRole: (role: import("@testing-library/dom").ByRoleMatcher, options?: import("@testing-library/dom").ByRoleOptions, waitForElementOptions?: import("@testing-library/dom").waitForOptions) => Promise<HTMLElement[]>;
-    getByTestId: (id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").MatcherOptions) => HTMLElement;
-    getAllByTestId: (id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").MatcherOptions) => HTMLElement[];
-    queryByTestId: (id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").MatcherOptions) => HTMLElement;
-    queryAllByTestId: (id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").MatcherOptions) => HTMLElement[];
-    findByTestId: (id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").MatcherOptions, waitForElementOptions?: import("@testing-library/dom").waitForOptions) => Promise<HTMLElement>;
-    findAllByTestId: (id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").MatcherOptions, waitForElementOptions?: import("@testing-library/dom").waitForOptions) => Promise<HTMLElement[]>;
-}>;
+import { within } from 'storybook/test';
+export declare const withinShadowRoot: (customElem: HTMLElement | HTMLStencilElement, selector: string) => Promise<ReturnType<typeof within>>;
 export declare const getShadowRoot: (customElem: HTMLElement | HTMLStencilElement, selector: string) => Promise<ShadowRoot>;
 export declare const getDsElem: (customElem: HTMLElement | HTMLStencilElement, selector: string) => Promise<Element>;
-export declare const addMockEventListener: (container: HTMLElement | HTMLStencilElement, selector: string, eventName: string) => import("@vitest/spy").Mock<(...args: any[]) => any>;
+export declare const addMockEventListener: (container: HTMLElement | HTMLStencilElement, selector: string, eventName: string) => import("storybook/test").Mock<(...args: any[]) => any>;
 export declare const waitForElem: (elem: HTMLElement | HTMLStencilElement | ShadowRoot, selector: string) => Promise<void>;
 export declare const sleep: (ms: number) => Promise<unknown>;
 export declare const classNameWithVersion: (className: string, suffix: string) => string;

package/dist/types/utils/utils.d.ts

@@ -1,8 +1,8 @@
 import { JSX } from '../stencil-public-runtime';
+export declare const isBrowser: () => boolean;
 export declare const formatAs: (value: string, suffix: string) => string;
 export declare const formatAsRem: (value: string) => string;
 export declare const formatAsPx: (value: string) => string;
-export declare const slugifyText: (text: any) => any;
 export declare const remToPx: (remString: string) => string;
 export declare const pxToRem: (pxString: string) => string;
 export declare function idGenerator(id: string): Generator<string, void, unknown>;
@@ -12,8 +12,8 @@ export declare const debounce: (func: Function, wait?: number, immediate?: boole
 };
 export declare const throttle: (func: Function, timeFrame?: number) => (...args: unknown[]) => void;
 export declare const transformTagName: <T extends keyof JSX.IntrinsicElements>(tagToBeTransformed: T, knownUntransformedTag: keyof JSX.IntrinsicElements, knownUntransformedTagElementReference: HTMLElement) => T;
-export declare const declareComponentDependencies: (t: JSX.IntrinsicElements[]) => boolean;
-export declare const arrayGroupBy: <T, K extends keyof T>(arr: T[], key: K) => Record<string | number | symbol, T[]>;
+export declare const declareComponentDependencies: (_t: JSX.IntrinsicElements[]) => void;
+export declare const arrayGroupBy: <T, K extends keyof T>(arr: T[], key: K) => Record<PropertyKey, T[]>;
 export declare const parseBoolean: (value?: string) => boolean;
 export declare const omit: <T extends Record<string, unknown>, K extends keyof T>(obj: T, keys: K[]) => Omit<T, K>;
 export declare const ifDefined: <T>(key: string, value: T | undefined) => {
@@ -29,6 +29,12 @@ export declare function isArrowKey(key: string, excludes?: readonly ArrowKey[]):
 declare const selectionKeys: readonly ["Enter", " "];
 type SelectionKey = (typeof selectionKeys)[number];
 export declare function isSelectionKey(key: string, excludes?: readonly SelectionKey[]): key is SelectionKey;
-export declare const injectMatomoScript: (appName: string) => void;
+export declare const getShadowHost: (el: HTMLElement) => HTMLElement;
+export declare const getComposedParent: (el: HTMLElement) => HTMLElement;
+export declare const hasComposedClosest: (el: HTMLElement | null, selector: string) => boolean;
+export declare const getComposedClosestElement: (el: HTMLElement, selector: string) => HTMLElement;
+export declare const resolveMatomoAppName: (el: HTMLElement) => string;
+export declare const injectMatomoScript: () => void;
 export declare const isEventWithinElement: (event: Event, elem: HTMLElement) => boolean;
+export declare const nextFrame: () => Promise<void>;
 export {};

package/dist/types/vitest-globals.d.ts

@@ -0,0 +1 @@
+/// <reference types="vitest/globals" />

package/dist/vitest.config.js

@@ -0,0 +1,65 @@
+import { defineConfig } from "vitest/config";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { storybookTest } from "@storybook/addon-vitest/vitest-plugin";
+import { playwright } from "@vitest/browser-playwright";
+import { matchScreenshotCommand } from "./src/testing/screenshotCommand";
+const dirname = typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
+export default defineConfig({
+    test: {
+        projects: [
+            {
+                extends: true,
+                test: {
+                    name: 'unit',
+                    globals: true,
+                    environment: 'jsdom',
+                    setupFiles: ['src/testing/vitest-setup.ts'],
+                    include: ['src/**/*.spec.ts'],
+                    exclude: ['**/node_modules/**', '**/dist/**', 'src/**/*.stories.ts', 'src/**/*.stories.tsx'],
+                },
+            },
+            {
+                extends: true,
+                plugins: [
+                    storybookTest({
+                        configDir: path.join(dirname, '.storybook'),
+                    }),
+                ],
+                test: {
+                    name: 'storybook',
+                    setupFiles: ['src/testing/silence-lit-warnings.ts'],
+                    retry: 1,
+                    browser: {
+                        enabled: true,
+                        headless: true,
+                        provider: playwright({
+                            launchOptions: {
+                                args: [
+                                    '--disable-skia-runtime-opts',
+                                    '--disable-gpu',
+                                    '--use-gl=swiftshader',
+                                    '--in-process-gpu',
+                                    '--font-render-hinting=none',
+                                    '--disable-font-subpixel-positioning',
+                                    '--disable-lcd-text',
+                                ],
+                            },
+                            contextOptions: {
+                                reducedMotion: 'reduce',
+                            },
+                        }),
+                        commands: {
+                            matchScreenshot: matchScreenshotCommand,
+                        },
+                        instances: [
+                            {
+                                browser: 'chromium',
+                            },
+                        ],
+                    },
+                },
+            },
+        ],
+    },
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uh-design-system/component-library",
-  "version": "1.5.2",
+  "version": "1.6.0-rc.1",
   "publishConfig": {
     "access": "public"
   },
@@ -60,13 +60,14 @@
     "stencil.build": "stencil build",
     "stencil.build:watch": "stencil build --watch",
     "stencil.build:serve": "stencil build --watch --serve",
-    "stencil.test": "stencil test --spec",
-    "stencil.test:watch": "stencil test --spec --watchAll",
+    "test:unit": "vitest run --project=unit",
+    "test:unit:watch": "vitest --project=unit",
+    "test:storybook": "vitest run --project=storybook",
+    "test:storybook:watch": "vitest --project=storybook",
+    "test:storybook:update": "UPDATE_SNAPSHOTS=true vitest run --project=storybook --update",
     "stencil.generate": "stencil generate",
     "storybook.dev": "storybook dev -p 6006",
     "storybook.build": "storybook build",
-    "storybook.test": "test-storybook",
-    "storybook.test:update": "rm -rf __snapshots__ && storybook.test -- -u",
     "styles.write-version": "ts-node ./scripts/write-package-version-for-sass.ts",
     "styles.build:helpers": "sass src/styles/helpers.scss dist/styles/helpers.css",
     "styles.build:variables": "sass src/styles/variables.scss dist/styles/variables.css",
@@ -74,46 +75,41 @@
     "version": "npm run build:publish"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^3.2.7",
+    "@chromatic-com/storybook": "^5.2.1",
     "@material-symbols/svg-700": "^0.30.0",
-    "@pxtrn/storybook-addon-docs-stencil": "^8.0.0",
-    "@stencil/core": "^4.38.2",
+    "@stencil/core": "^4.43.5",
     "@stencil/react-output-target": "1.4.2",
-    "@stencil/sass": "^3.2.2",
-    "@stencil/store": "^2.2.0",
-    "@storybook/addon-a11y": "^8.6.14",
-    "@storybook/addon-essentials": "^8.6.14",
-    "@storybook/addon-interactions": "^8.6.14",
-    "@storybook/addon-links": "^8.6.14",
-    "@storybook/addon-styling-webpack": "^1.0.1",
-    "@storybook/addon-webpack5-compiler-swc": "^3.0.0",
-    "@storybook/blocks": "^8.4.5",
-    "@storybook/manager-api": "^8.4.5",
-    "@storybook/test": "^8.4.5",
-    "@storybook/test-runner": "^0.22.1",
-    "@storybook/theming": "^8.4.5",
-    "@storybook/web-components": "^8.4.5",
-    "@storybook/web-components-webpack5": "^8.6.14",
-    "@types/jest": "^29.5.14",
-    "@types/node": "^22.17.0",
-    "axe-playwright": "^2.1.0",
+    "@stencil/sass": "^3.2.3",
+    "@stencil/store": "^2.2.2",
+    "@storybook/addon-a11y": "10.4.1",
+    "@storybook/addon-docs": "10.4.1",
+    "@storybook/addon-links": "10.4.1",
+    "@storybook/addon-vitest": "^10.4.1",
+    "@storybook/web-components-vite": "10.4.1",
+    "@types/node": "^22.19.19",
+    "@types/pixelmatch": "^5.2.6",
+    "@types/pngjs": "^6.0.5",
+    "@uh-design-system/storybook-stencil-docs-utils": "1.0.0",
+    "@vitest/browser": "^4.1.8",
+    "@vitest/browser-playwright": "^4.1.8",
+    "@vitest/coverage-v8": "^4.1.8",
     "classnames": "^2.5.1",
     "cross-env": "^7.0.3",
-    "css-loader": "^7.1.2",
-    "jest": "^29.7.0",
-    "jest-cli": "^29.7.0",
-    "jest-image-snapshot": "^6.5.1",
-    "lit": "^3.3.1",
-    "raw-loader": "^4.0.2",
+    "eslint-plugin-storybook": "10.4.1",
+    "jsdom": "^29.1.1",
+    "lit": "^3.3.3",
+    "pixelmatch": "^5.3.0",
+    "playwright": "^1.60.0",
+    "pngjs": "^3.4.0",
     "sass": "^1.89.2",
-    "sass-loader": "^16.0.5",
     "stencil-inline-svg": "^1.1.0",
-    "storybook": "^8.6.14",
-    "storybook-dark-mode": "^4.0.2",
-    "style-loader": "^4.0.0",
-    "svgo": "^3.3.2",
-    "ts-node": "^10.9.2"
+    "storybook": "10.4.1",
+    "storybook-dark-mode": "^5.0.0",
+    "svgo": "^3.3.3",
+    "ts-node": "^10.9.2",
+    "vite": "^6.4.3",
+    "vitest": "^4.1.8"
   },
   "license": "MIT",
-  "gitHead": "6a02f0179984163bb3a67ec2df014aae50b1bf07"
+  "gitHead": "bcb947da81acf062186187629951e2a57451cf5c"
 }

package/dist/cjs/ariaDeprecationFactory-DXnYDFcg.js

@@ -1,29 +0,0 @@
-'use strict';
-
-var index = require('./index-CPg45o9h.js');
-var attributes = require('./attributes-5eBKMo1N.js');
-
-const ariaDeprecationFactory = (Base) => {
-    const AriaDeprecation = class extends Base {
-        constructor(hostRef) {
-            super();
-            index.registerInstance(this, hostRef);
-        }
-        dsMuteAriaDeprecationWarning = false;
-        getDeprecationWarningForAriaAttribute = (el, attr) => {
-            if (this.dsMuteAriaDeprecationWarning)
-                return;
-            if (el.hasAttribute(attr)) {
-                console.warn(`[DEPRECATION] The use of the '${attr}' attribute on <${el.tagName.toLowerCase()}> is deprecated and will be removed in a future version (tba). Please refer to the documentation for alternative ds-prefixed property name. If the attribute you are using does not have a corresponding ds-prefixed property name, please contact developers at #designsystem Slack channel. In the future, any aria-attributes set on the web component will remain on the host element. To mute all warnings on this component instance, set the "dsMuteAriaDeprecationWarning" property.`);
-            }
-        };
-        getDeprecationWarningsForAriaAttributes = (el) => {
-            if (this.dsMuteAriaDeprecationWarning)
-                return;
-            attributes.ariaAttributes.forEach(attr => this.getDeprecationWarningForAriaAttribute(el, attr));
-        };
-    };
-    return AriaDeprecation;
-};
-
-exports.ariaDeprecationFactory = ariaDeprecationFactory;

package/dist/cjs/attributes-5eBKMo1N.js

@@ -1,93 +0,0 @@
-'use strict';
-
-const kebabToCamelCase = (str) => str.replace(/-./g, x => x[1].toUpperCase());
-const inheritSpecifiedAttributes = (el, attributes = []) => {
-    const attributeObject = {};
-    attributes.forEach(attr => {
-        if (el.hasAttribute(attr)) {
-            const value = el.getAttribute(attr);
-            if (value !== null) {
-                attributeObject[attr] = el.getAttribute(attr);
-            }
-            el.removeAttribute(attr);
-        }
-    });
-    return attributeObject;
-};
-const ariaAttributes = [
-    'role',
-    'aria-activedescendant',
-    'aria-atomic',
-    'aria-autocomplete',
-    'aria-braillelabel',
-    'aria-brailleroledescription',
-    'aria-busy',
-    'aria-checked',
-    'aria-colcount',
-    'aria-colindex',
-    'aria-colindextext',
-    'aria-colspan',
-    'aria-controls',
-    'aria-current',
-    'aria-describedby',
-    'aria-description',
-    'aria-details',
-    'aria-disabled',
-    'aria-errormessage',
-    'aria-expanded',
-    'aria-flowto',
-    'aria-haspopup',
-    'aria-hidden',
-    'aria-invalid',
-    'aria-keyshortcuts',
-    'aria-label',
-    'aria-labelledby',
-    'aria-level',
-    'aria-live',
-    'aria-multiline',
-    'aria-multiselectable',
-    'aria-orientation',
-    'aria-owns',
-    'aria-placeholder',
-    'aria-posinset',
-    'aria-pressed',
-    'aria-readonly',
-    'aria-relevant',
-    'aria-required',
-    'aria-roledescription',
-    'aria-rowcount',
-    'aria-rowindex',
-    'aria-rowindextext',
-    'aria-rowspan',
-    'aria-selected',
-    'aria-setsize',
-    'aria-sort',
-    'aria-valuemax',
-    'aria-valuemin',
-    'aria-valuenow',
-    'aria-valuetext',
-];
-const inheritAriaAttributes = (el, ignoreList) => {
-    let attributesToInherit = [...ariaAttributes];
-    if (ignoreList && ignoreList.length > 0) {
-        attributesToInherit = attributesToInherit.filter(attr => !ignoreList.includes(attr));
-    }
-    return inheritSpecifiedAttributes(el, attributesToInherit);
-};
-const inheritAttributes = (component, el, attrsToIgnore = []) => {
-    const attributesToIgnore = new Set(['id', 'class', 'style', ...ariaAttributes, ...attrsToIgnore]);
-    const propsToIgnore = new Set(Object.keys(component));
-    const attributes = {};
-    Array.from(el.attributes).forEach(attr => {
-        if (!propsToIgnore.has(kebabToCamelCase(attr.name)) && !attributesToIgnore.has(attr.name)) {
-            attributes[attr.name] = el.getAttribute(attr.name);
-            el.removeAttribute(attr.name);
-        }
-    });
-    return attributes;
-};
-
-exports.ariaAttributes = ariaAttributes;
-exports.inheritAriaAttributes = inheritAriaAttributes;
-exports.inheritAttributes = inheritAttributes;
-exports.inheritSpecifiedAttributes = inheritSpecifiedAttributes;