@sebgroup/green-core 1.0.0-beta.4 → 1.0.0-beta.8

package/README.md

@@ -0,0 +1,151 @@
+# ![image](https://user-images.githubusercontent.com/11420341/121186039-f6eeda00-c866-11eb-9d80-21d01d065f0a.png) green
+
+Green is an opinionated design system for building content and functionality for SEB. It builds on a set of principles and techniques aimed at maximizing code quality, code reuse, consistency and collaboration.
+
+
+## View
+
+View the components in our [Storybook](https://sebgroup.github.io/green/latest/chlorophyll/)
+
+
+## Philosophy
+
+Dream big! Start small! Learn fast!
+
+
+### We only build what we need
+
+If no-one needs a component, we will not build it. If someone needs a component, we will build it. This means that some things in Design Library might not make it into Green. It all depends on what gets used.
+
+
+### Ease of use, not ease of build
+
+The components of Green will be used more times than one. This puts a multiplier on the value of every hour spent improving ease of use.
+
+
+### Minimum possible flexibility, but _not_ less
+
+Flexibility means decisions must be made. This puts strain on every user of a system. Green goes the other way: Minimum flexibility, maximum clarity. If our users cannot do what they need, we solve that specific problem in a generalized way - no more, no less. Remember: The most flexible system possible is your terminal.
+
+
+### We don't solve problems we do not have
+
+If something _might_ be a performance problem, that is ok. If something _might_ give a to large payload, that is ok. When we suspect a problem, we measure it. If it _is_ a problem, we fix it. See [premature optimization](https://xkcd.com/1691/)
+
+
+### We work from right to left
+
+If something can be deployed, we deploy. Then, if a PR needs a review, we review. Then, and only then, if something can be built, we build. Flow is more important than speed.
+
+
+## The design process
+
+Green is tightly integrated with the design process. The design responsible are part of the team so that decisions can be made effectively and by those most suited.
+
+For the most part we follow the existing design. When changes have to be made for practical reasons, clarity, uniformity, accessibility or any other reason, the design responsible make the call and the change is integrated.
+
+This can, and will, lead to minor inconsistencies in different parts of our offering, especially as Green is not yet (even close to) at 100% adoption. This is fine. Far larger inconsistencies already exist in our current, digital ecosystem. We therefore prioritise the ability to keep moving forward and improve our customers' experience over delaying for the sake of consistency.
+
+In the long run, consistency will be achieved by automating the roll-out of changes, be they visual, functional or qualitative, to keep all parts of our offering on the latest version. When we go Green, we stay green.
+
+
+## Develop
+
+### Yarn
+
+This mono repo is based on `nx` and uses `yarn` instead of `npm`. If you are unused to yarn, see the following instructions:
+
+#### Install yarn
+
+```bash
+npm install yarn -g
+```
+Use the -g flag to install it globally on your computer.
+
+
+#### Install dependencies
+
+```bash
+yarn
+```
+
+#### Add a dependency to a workspace
+
+All projects use a common set of dependencies so if you want to add `leftpad` to the chlorophyll project, just run:
+
+```bash
+yarn add leftpad
+```
+
+#### Run a command in `package.json`
+
+Unlike `npm`, `yarn` doesn't require the `run` command. So if you want to run `lint` in your package or in the project root, simply type:
+
+```bash
+yarn lint
+```
+
+### How to contribute?
+
+- Clone the project locally from GitHub - `git clone https://github.com/sebgroup/green.git`.
+- Create a new branch each time - `git checkout -b "DESCRIPTIVE NAME"`.
+- Commit with the Semantic everything inscructions underneath.
+- Pull the latest - `git pull`.
+- Push eveything - `git push`.
+- Make a pull request in GitHub - `https://github.com/sebgroup/green/compare`.
+
+### Semantic everything
+
+All projects in Green use [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/) to power [semantic releases](https://semantic-release.gitbook.io/semantic-release/). In order to simplify using this format, install:
+
+```bash
+npm install git-cz -g
+```
+
+To commit, just run `git-cz` in the terminal. Always try to add reference to an issue in the longer description with # and the issue number. Eg `#1337`. 
+
+### Start Storybook
+
+You start the common storybooks with these commands:
+
+```bash
+npx nx run chlorophyll:storybook
+npx nx run react:storybook
+npx nx run angular:storybook
+```
+
+Or the general `npx nx run [PROJECT]:storybook` where you replace `[PROJECT]` with a folder name from `green\libs`.
+
+If you install nx globally you can omit the npx above.
+
+```bash
+npm install nx -g
+```
+
+#### Build
+
+If you want to build the files to see how the output looks use `build-storybook`:
+
+```bash
+npx nx run chlorophyll:build-storybook
+npx nx run react:build-storybook
+npx nx run angular:build-storybook
+```
+
+### On SEB Windows computer
+
+For the moment, `yarn` is difficult to use within the SEB environment, so instead you can install the dependencies using `npm`:
+
+```bash
+$ npm i --force
+```
+
+The `--force` flag is necessary in this case to convince `npm` that sub-dependency conflicts are OK.
+
+Don't commit the generated `package-lock.json` file, since we already have a `yarn.lock` file.
+
+If you need to add a new dependency, the `yarn.lock` file needs to be updated, and in that case you still need to use `yarn`. You can do this by temporarily disconnecting from the SEB network, or by using a non-SEB computer.
+
+## Git
+
+We reccommend using [GitHub Desktop](https://desktop.github.com/), as it will work smoothly with both on-prem GitHub and external GitHub without any manual configuration of proxies and certificates. Ask for help on Teams if you need assistance!

package/components/dropdown/dropdown.d.ts

@@ -0,0 +1,72 @@
+import 'reflect-metadata';
+import 'primitives/listbox';
+import type { GdsOption, OptionsContainer } from 'primitives/listbox';
+import 'primitives/popover';
+import { GdsFormControlElement } from '../form-control';
+/**
+ * @element gds-dropdown
+ * A dropdown consist of a trigger button and a list of selectable options. It is used to select a single value from a list of options.
+ *
+ * @status beta
+ *
+ * @slot - Options for the dropdown. Accepts `gds-option` elements.
+ * @slot button - The trigger button for the dropdown. Custom content for the button can be assigned through this slot.
+ * @slot sub-label - Renders between the label and the trigger button.
+ * @slot message - Renders below the trigger button. Will be red if there is a validation error.
+ *
+ * @event change - Fired when the value of the dropdown is changed through user interaction (not when value prop is set programatically).
+ * @event gds-ui-state - Fired when the dropdown is opened or closed.
+ */
+export declare class GdsDropdown<ValueT = any> extends GdsFormControlElement<ValueT | ValueT[]> implements OptionsContainer {
+    #private;
+    static styles: import("lit").CSSResult;
+    static shadowRootOptions: ShadowRootInit;
+    /**
+     * The label of the dropdown.
+     * Will only render if this property is set to a non-empty string.
+     */
+    label: string;
+    /**
+     * Sets the open state of the dropdown.
+     */
+    open: boolean;
+    /**
+     * Whether the dropdown should be searchable.
+     */
+    searchable: boolean;
+    /**
+     * Wheter the dropdown should support multiple selections.
+     * When set to true, the dropdown will render a checkbox next to each option.
+     * The value of the dropdown will be an array of the selected values.
+     */
+    multiple: boolean;
+    constructor();
+    connectedCallback(): void;
+    /**
+     * Get the options of the dropdown.
+     */
+    get options(): GdsOption[];
+    /**
+     * Return the first option with a isPlaceholder attribute.
+     * If no placeholder is found, this will be undefined.
+     */
+    get placeholder(): GdsOption | undefined;
+    /**
+     * Returns the display value as a string.
+     * If the dropdown is in multiple mode, this will be a comma separated list of the selected values.
+     */
+    get displayValue(): string;
+    render(): any;
+    /**
+     * Update value assignment and request update when the light DOM changes.
+     */
+    private _handleLightDOMChange;
+    /**
+     * Called whenever the `value` property changes
+     */
+    private _handleValueChange;
+    /**
+     * Emits `gds-ui-state`event and does some other house-keeping when the open state changes.
+     */
+    private _onOpenChange;
+}

package/components/dropdown/dropdown.styles.d.ts

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

package/components/dropdown/dropdown.trans.styles.d.ts

@@ -0,0 +1,2 @@
+export declare function register(): void;
+export default register;

package/components/form-control.d.ts

@@ -0,0 +1,36 @@
+import { LitElement } from 'lit';
+/**
+ * Abstract base class for Green Core form controls.
+ *
+ * This class sets up the form-associated custom element API, along with some
+ * other common form control functionality that all Green Core form controls share.
+ *
+ * @internal
+ */
+export declare abstract class GdsFormControlElement<ValueT = any> extends LitElement implements Partial<Omit<HTMLInputElement, 'value'>> {
+    #private;
+    static formAssociated: boolean;
+    constructor();
+    /**
+     * Validation state of the form control. Setting this to true triggers the invalid state of the control.
+     *
+     * @attr aria-invalid
+     */
+    invalid: boolean;
+    /**
+     * Get or set the value of the form control.
+     */
+    value: ValueT | undefined;
+    name: string;
+    get form(): HTMLFormElement | null;
+    get type(): string;
+    get validity(): ValidityState;
+    get validationMessage(): string;
+    get willValidate(): boolean;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private __handleValidityChange;
+    private __handleValueChange;
+}

package/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './dropdown/dropdown';
+export * from '../primitives/listbox/option';

package/generated/locale-codes.d.ts

@@ -0,0 +1,13 @@
+/**
+ * The locale code that templates in this source code are written in.
+ */
+export declare const sourceLocale = "en";
+/**
+ * The other locale codes that this application is localized into. Sorted
+ * lexicographically.
+ */
+export declare const targetLocales: readonly ["sv"];
+/**
+ * All valid project locale codes. Sorted lexicographically.
+ */
+export declare const allLocales: readonly ["en", "sv"];

package/generated/locales/sv.d.ts

@@ -0,0 +1,5 @@
+export declare const templates: {
+    s58bfb494feb8eb02: import("@lit/localize").StrResult;
+    s5d929ff1619ac0c9: string;
+    sd898d99fd9c13de6: string;
+};

package/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components';
+export * from './utils/helpers/custom-element-scoping';

package/index.js

@@ -122,7 +122,7 @@ function observeLightDOM() {
 // libs/core/src/utils/helpers/custom-element-scoping.ts
 import { html as litHtml } from "lit";
 import { customElement } from "lit/decorators.js";
-var VER_SUFFIX = "-gdsvsuffix";
+var VER_SUFFIX = "-00499f";
 var elementLookupTable = /* @__PURE__ */ new Map();
 var gdsCustomElement = (tagName) => {
   if (globalThis.GDS_DISABLE_VERSIONED_ELEMENTS) {

package/localization.d.ts

@@ -0,0 +1 @@
+export * from './utils/localization';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sebgroup/green-core",
   "description": "A carefully crafted set of Web Components, laying the foundation of the Green Design System.",
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-beta.8",
   "main": "index.js",
   "module": "index.js",
   "type": "module",

package/primitives/listbox/index.d.ts

@@ -0,0 +1,2 @@
+export * from './listbox';
+export * from './option';

package/primitives/listbox/listbox.d.ts

@@ -0,0 +1,53 @@
+import { LitElement } from 'lit';
+import { GdsOption, OptionsContainer } from './option';
+import 'reflect-metadata';
+/**
+ * @element gds-listbox
+ * @internal
+ *
+ * A listbox is a widget that allows the user to select one or more items from a list of choices.
+ * This primitive corresponds to the aria listbox role: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role
+ *
+ * The listbox handles keyboard navigation and manages focus and selection of options.
+ *
+ * Can be used together with the `gds-option` primitive.
+ *
+ * @slot - The default slot. Only `gds-option` elements should be used here.
+ */
+export declare class GdsListbox extends LitElement implements OptionsContainer {
+    #private;
+    static styles: import("lit").CSSResult;
+    /**
+     * Controls whether the listbox allows multiple selection or not.
+     */
+    multiple: boolean;
+    constructor();
+    /**
+     * Returns a list of all `gds-option` elements in the listbox.
+     */
+    get options(): GdsOption[];
+    /**
+     * Returns a list of all visible `gds-option` elements in the listbox.
+     */
+    get visibleOptionElements(): GdsOption[];
+    /**
+     * Returns a list of all visible `gds-option` elements in the listbox.
+     */
+    get visibleSelectedOptionElements(): GdsOption[];
+    /**
+     * Returns a list of all selected `gds-option` elements in the listbox.
+     */
+    get selection(): GdsOption[];
+    set selection(values: GdsOption[] | any[]);
+    connectedCallback(): void;
+    /**
+     * Focuses the first selected option in the listbox.
+     * If no option is selected, the first visible option is focused.
+     */
+    focus(): void;
+    render(): any;
+    /**
+     * Re-renders all options in the listbox when the `multiple` property changes.
+     */
+    private _rerenderOptions;
+}

package/primitives/listbox/listbox.styles.d.ts

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

package/primitives/listbox/listbox.trans.styles.d.ts

@@ -0,0 +1,2 @@
+export declare function register(): void;
+export default register;

package/primitives/listbox/option.d.ts

@@ -0,0 +1,59 @@
+import { LitElement } from 'lit';
+import 'reflect-metadata';
+export interface OptionsContainer extends HTMLElement {
+    options: GdsOption[];
+    multiple: boolean;
+}
+/**
+ * @element gds-option
+ * @internal
+ *
+ * A listbox option is an option in a listbox widget.
+ * This primitive corresponds to the aria `option` role: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/option_role
+ *
+ * Can be used together with the `gds-listbox` primitive.
+ *
+ * @slot - The default slot. Custom content can be used to display the option.
+ *
+ * @event gds-select - Fired when the option is selected.
+ * @event gds-blur - Fired when the option loses focus.
+ * @event gds-focus - Fired when the option gains focus.
+ */
+export declare class GdsOption extends LitElement {
+    #private;
+    static styles: import("lit").CSSResult;
+    /**
+     * The value of the option.
+     */
+    value: any;
+    /**
+     * Controls whether the option is visible or not.
+     */
+    get hidden(): boolean;
+    set hidden(value: string | boolean);
+    /**
+     * Returns true if the option is selected.
+     * Setting this property will select or unselect the option.
+     */
+    selected: boolean;
+    /**
+     * Sets this option as a placeholder.
+     * A placehodler option does not have a value and will act as the default option.
+     *
+     * In a multiple select listbox, placeholder options will not be rendered in the list.
+     */
+    isPlaceholder: boolean;
+    constructor();
+    connectedCallback(): void;
+    get parentElement(): OptionsContainer;
+    handlePlaceholderStatusChange(): void;
+    /**
+     * Focuses the option.
+     *
+     * @param options - Focus options
+     */
+    focus(options?: FocusOptions | undefined): void;
+    onblur: (e: FocusEvent) => void;
+    onfocus: (e: FocusEvent) => void;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/primitives/listbox/option.styles.d.ts

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

package/primitives/popover/index.d.ts

@@ -0,0 +1 @@
+export * from './popover';

package/primitives/popover/popover.d.ts

@@ -0,0 +1,31 @@
+import { LitElement } from 'lit';
+/**
+ * @element gds-popover
+ * @internal
+ *
+ * A popover is a transient view that appears above other content. It is used by components such as dropdowns.
+ *
+ * GdsPopover can be supplied with a trigger through the `trigger` property. If a trigger is specified, the popover will
+ * register a keydown listener on the trigger and listen to `ArrowDown` key presses. When the trigger is focused and
+ * `ArrowDown` is pressed, the popover will open and focus the first slotted child.
+ *
+ * @slot - Content of the popover
+ * @fires gds-ui-state - Fired when the popover is opened or closed
+ */
+export declare class GdsPopover extends LitElement {
+    #private;
+    static styles: import("lit").CSSResult;
+    /**
+     * Whether the popover is open.
+     */
+    open: boolean;
+    /**
+     * Optional trigger element for the popover.
+     */
+    trigger: HTMLElement | undefined;
+    private _handleTriggerChanged;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    private _updateHidden;
+}

package/primitives/popover/popover.styles.d.ts

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

package/primitives/popover/popover.trans.styles.d.ts

@@ -0,0 +1,2 @@
+export declare function register(): void;
+export default register;

package/transitional-styles.d.ts

@@ -0,0 +1 @@
+export * from './utils/helpers/transitional-styles';

package/utils/decorators/index.d.ts

@@ -0,0 +1,2 @@
+export * from './watch';
+export * from './observe-light-dom';

package/utils/decorators/observe-light-dom.d.ts

@@ -0,0 +1,7 @@
+import type { LitElement } from 'lit';
+declare type Handler = () => void;
+/**
+ * Runs when the light DOM children of the component changes.
+ */
+export declare function observeLightDOM(): <ElemClass extends LitElement>(proto: ElemClass, _propertyKey: string, descriptor: TypedPropertyDescriptor<Handler>) => void;
+export {};

package/utils/decorators/watch.d.ts

@@ -0,0 +1,23 @@
+import type { LitElement } from 'lit';
+declare type UpdateHandler = (prev?: unknown, next?: unknown) => void;
+interface WatchOptions {
+    /**
+     * If true, will only start watching after the initial update/render
+     */
+    waitUntilFirstUpdate?: boolean;
+}
+/**
+ * Runs when observed properties change, e.g. @property or @state, but before the component updates. To wait for an
+ * update to complete after a change occurs, use `await this.updateComplete` in the handler. To start watching after the
+ * initial update/render, use `{ waitUntilFirstUpdate: true }` or `this.hasUpdated` in the handler.
+ *
+ * Usage:
+ * ```javascript
+ * \@watch('propName')
+ * handlePropChange(oldValue, newValue) {
+ *   ...
+ * }
+ * ```
+ */
+export declare function watch(propertyName: string | string[], options?: WatchOptions): <ElemClass extends LitElement>(proto: ElemClass, propertyKey: string, descriptor: TypedPropertyDescriptor<UpdateHandler>) => void;
+export {};

package/utils/helpers/constrain-slots.d.ts

@@ -0,0 +1,17 @@
+import { LitElement } from 'lit';
+/**
+ * This function is used to constrain the slots of a component to only allow
+ * certain types of slotted elements. Add the `gds-allow` attribute to the slot
+ * element and specify the allowed elements as a space-separated list. Slots
+ * without the `gds-allow` attribute will not be constrained.
+ *
+ * Example:
+ * ```html
+ * <slot gds-allow="span p"></slot>
+ * ```
+ * This will only allow `span` and `p` elements to be slotted into this slot. Any other
+ * elements will be removed from the shadow DOM.
+ *
+ * @param self The element to apply the slot constraints to
+ */
+export declare function constrainSlots(self: LitElement): void;

package/utils/helpers/custom-element-scoping.d.ts

@@ -0,0 +1,97 @@
+/**
+ * # Custom element scoping
+ *
+ * One problem with the current state of the Custom Elements standard is that there is
+ * only a single, global, `CustomElementRegistry`. This means that if you have two different
+ * libraries, or two different versions of the same library, that both define a custom
+ * element with the same name, only one of them will be registered, and the other will
+ * throw an error.
+ *
+ * This is a problem for Green, because we need it to work well in a microfrontend
+ * architecture, where multiple apps can be loaded on the same page, and each app can
+ * potentially have its own version of Green.
+ *
+ * There is a (proposal)[https://github.com/WICG/webcomponents/blob/gh-pages/proposals/Scoped-Custom-Element-Registries.md]
+ * for enabling user instantiated CustomElementRegistry scoped to a ShodowRoot, but as of
+ * mid 2023 this is still only available in Chrome canary behind experimental flags.
+ *
+ * ## Solution
+ *
+ * To get around the problem we define our own scoping mechanism. It will works like this:
+ *
+ * * Green Core has its own lookup table of custom elements, and a suffix is added to the
+ *   name of each custom element. For example, `gds-popover` becomes `gds-popover-<versionstring>`.
+ *   The version string is deterministically generated based on the version of the Green
+ *   Core package.
+ *
+ * * We also define a new `customElement` decorator that will be used to register custom
+ *   elements. `@gdsCustomElement` will automatically add the version suffix to the name of
+ *   the custom element, and register it in the lookup table. If the custom element is already
+ *   registered, it will abort silently, with the assumption that the custom element was
+ *   already registered by the same version of Green Core and is therefor compatible.
+ *
+ * * There is also a custom `html` template tag that will automatically rewrite all custom
+ *   element names from the lookup table to include the version suffix, before passing the
+ *   template on to the Lit `html` tag. Alternatively, a templte tag factory can be used
+ *   to create a custom `html` tag, if Lit is not used by the consumer
+ *
+ * ## Caveats
+ *
+ * Consumers using top-level components from Green Core will have to add the version suffix
+ * in some way. The React and Angular wrappers takes care of this automatically. Another way
+ * is to use the `html` template tag or template tag factory from Green Core, but it will only
+ * work if the consumer is using javascript template literals.
+ *
+ * If the consumer is using hard coded HTML, or a templating language that does not support
+ * template tags, the consumer will have to manually add the version suffix to the custom
+ * element names, which would be cumbersome. In this edge-case, the scoping feature can be disabled,
+ * and the consumer will have to make sure that only a single version of Green Core is used
+ * on the page.
+ *
+ * The recommendation is to only consume Green Core though the React or Angular wrappers, or to
+ * use the `html` template tag or template tag factory from Green Core.
+ *
+ * At some point in the future, when the scoped custom element registry proposal has been
+ * implemented in all major browsers, we might remove this custom scoping mechanism and
+ * switch to using native scoped registries instead.
+ */
+/**
+ * Class decorator factory that defines the decorated class as a custom element, and registers
+ * it with the custom element registry under a versioned name.
+ *
+ * ```js
+ * @gdsCustomElement('my-element')
+ * class MyElement extends LitElement {
+ *   render() {
+ *     return html``;
+ *   }
+ * }
+ * ```
+ * @category Decorator
+ * @param tagName The tag name of the custom element to define.
+ */
+export declare const gdsCustomElement: (tagName: string) => (classOrDescriptor: {
+    prototype: HTMLElement;
+} | import("@lit/reactive-element/decorators/base").ClassDescriptor) => any;
+/**
+ * Template tag factory that creates a new template tag, which rewrites all custom element names from the
+ * lookup table to include the version suffix, and then passes the template on to the provided template tag.
+ */
+export declare function htmlTemplateTagFactory(extendedTag: (strings: TemplateStringsArray, ...values: any[]) => any): (strings: TemplateStringsArray, ...values: any[]) => any;
+/**
+ * Template tag that rewrites all custom element names from the lookup table to include the
+ * version suffix, before passing the template on to the Lit `html` tag.
+ */
+export declare const html: (strings: TemplateStringsArray, ...values: any[]) => any;
+/**
+ * Returns the correctly scoped tag name for the given tag.
+ * @param tagName The tag name to scope
+ */
+export declare function getScopedTagName(tagName: string): string;
+/**
+ * Returns the unscoped tag name for the given scoped tag.
+ * @param tagName The scoped tag name to unscope
+ */
+export declare function getUnscopedTagName(tagName: string): string | undefined;
+declare const _default: {};
+export default _default;

package/utils/helpers/id.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Generate a random id with `gds-` prefix
+ */
+export declare const randomId: () => string;

package/utils/helpers/index.d.ts

@@ -0,0 +1,2 @@
+export * from './constrain-slots';
+export * from './id';

package/utils/helpers/transitional-styles.d.ts

@@ -0,0 +1,12 @@
+export declare const registerTransitionalStyles: () => void;
+declare global {
+    var __gdsTransitionalStyles: TransitionalStyles;
+}
+export declare class TransitionalStyles {
+    static get instance(): TransitionalStyles;
+    private sheets;
+    private elements;
+    apply(element: HTMLElement, styleKey: string): void;
+    applyToElement(styleKey: string, sheet: CSSStyleSheet): void;
+    register(name: string, styles: string): void;
+}

package/utils/localization.d.ts

@@ -0,0 +1,5 @@
+export declare const getLocale: (() => string) & {
+    _LIT_LOCALIZE_GET_LOCALE_?: undefined;
+}, setLocale: ((newLocale: string) => Promise<void>) & {
+    _LIT_LOCALIZE_SET_LOCALE_?: undefined;
+};

package/utils/testing/index.d.ts

@@ -0,0 +1,30 @@
+/** A testing utility that measures an element's position and clicks on it. */
+export declare function clickOnElement(
+/** The element to click */
+el: Element, 
+/** The location of the element to click */
+position?: 'top' | 'right' | 'bottom' | 'left' | 'center', 
+/** The horizontal offset to apply to the position when clicking */
+offsetX?: number, 
+/** The vertical offset to apply to the position when clicking */
+offsetY?: number): Promise<void>;
+/** A testing utility that moves the mouse onto an element. */
+export declare function moveMouseOnElement(
+/** The element to click */
+el: Element, 
+/** The location of the element to click */
+position?: 'top' | 'right' | 'bottom' | 'left' | 'center', 
+/** The horizontal offset to apply to the position when clicking */
+offsetX?: number, 
+/** The vertical offset to apply to the position when clicking */
+offsetY?: number): Promise<void>;
+/** A testing utility that drags an element with the mouse. */
+export declare function dragElement(
+/** The element to drag */
+el: Element, 
+/** The horizontal distance to drag in pixels */
+deltaX?: number, 
+/** The vertical distance to drag in pixels */
+deltaY?: number): Promise<void>;
+/** A testing utility that waits for a specified amount of time. */
+export declare function timeout(ms: number): Promise<unknown>;