@quartzds/core 1.0.0-beta.12 → 1.0.0-beta.120

package/dist/types/helpers.d.ts

@@ -1,20 +1,8 @@
-import type { MiddlewareState, OffsetOptions as LibraryOffsetOptions } from '@floating-ui/dom';
+import type { MiddlewareState, OffsetOptions as LibraryOffsetOptions, ReferenceElement } from '@floating-ui/dom';
 import type { Except } from 'type-fest';
-export type Attributes = Record<string, string>;
-/**
- * Elements inside of web components sometimes need to inherit global attributes
- * set on the host. For example, the inner input in `qds-input` should inherit
- * the `tabindex` attribute that developers set directly on `qds-input`. This
- * helper function should be called in componentWillLoad and assigned to a variable
- * that is later used in the render function.
- *
- * This does not need to be reactive as changing attributes on the host element
- * does not trigger a re-render.
- *
- * @param element Element to inherit attributes from.
- * @param attributes Which attributes to inherit.
- */
-export declare const inheritAttributes: (element: Element, attributes?: string[]) => Attributes;
+import type { LinkIcon } from './components/shared';
+export type Attributes = Record<string, string | undefined>;
+declare const inheritAttributes: (element: Element, attributes?: string[]) => Attributes;
 /**
  * Returns an array of aria attributes that should be copied from
  * the shadow host element to a target within the light DOM.
@@ -44,8 +32,39 @@ export declare const pickInputEventAttributes: (event: InputEvent) => QdsInputEv
 export declare const propertyToPx: (element: Element, property: string) => number | undefined;
 export declare const ignorePromise: <T>(promise: Promise<T>) => void;
 export declare const isTouchDevice: () => boolean;
-export declare const roundByDPR: (value: number) => number;
-export type OffsetValue = Except<Exclude<LibraryOffsetOptions, Function | number>, 'mainAxis'>;
-export type OffsetFunction = (state: MiddlewareState) => OffsetValue;
+/**
+ * Checks if an element's ellipsis is active.
+ *
+ * @param element The element to check.
+ * @returns `true` if ellipsis is active, `false` otherwise.
+ */
+export declare const isEllipsisActive: (element: Element) => boolean;
+export declare const determineLinkIcon: (target?: string, rel?: string) => LinkIcon | undefined;
+export declare const resolveTarget: (target?: ReferenceElement | string | (() => ReferenceElement | string)) => ReferenceElement | undefined;
+/**
+ * Waits for a component to be ready for
+ * both custom element and non-custom element builds.
+ * If non-custom element build, el.componentOnReady
+ * will be used.
+ * For custom element builds, we wait a frame
+ * so that the inner contents of the component
+ * have a chance to render.
+ *
+ * Use this utility rather than calling
+ * el.componentOnReady yourself.
+ *
+ * Reference: https://stenciljs.com/docs/api#componentonready
+ */
+export declare const componentOnReady: <T extends {
+    componentOnReady?: () => Promise<T>;
+}>(element: T, callback: (element_: T) => void) => void;
+export declare const resolvePanelElement: (tab: HTMLQdsTabElement) => HTMLElement | undefined;
+type OffsetValue = Except<Exclude<LibraryOffsetOptions, Function | number>, 'mainAxis'>;
+type OffsetFunction = (state: MiddlewareState) => OffsetValue;
 export type OffsetOptions = OffsetFunction | OffsetValue;
+export declare const HORIZONTAL_MOVE_KEYS: ReadonlySet<string>;
+export declare const VERTICAL_MOVE_KEYS: ReadonlySet<string>;
+export declare const closestElement: (selector: string, base: Element) => Element | undefined;
+export declare const isCurrentPage: (url: string) => boolean;
+export {};
 //# sourceMappingURL=helpers.d.ts.map

package/dist/types/index.d.ts

@@ -1,4 +1,5 @@
 export * from './components';
 export { type IconLibrary, type IconLibraryResolver, registerIconLibrary, unregisterIconLibrary, } from './components/icon/library';
-export { getPlatform, getTheme, setPlatform, setTheme } from './utils';
+export * from './interface-overrides';
+export { defineCustomElements, getPlatform, getTheme, setPlatform, setTheme, } from './utils';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/interface-overrides.d.ts

@@ -0,0 +1,215 @@
+export {};
+declare global {
+    interface HTMLInputElement {
+        onsearch?: (this: HTMLInputElement, event: Event) => unknown;
+    }
+}
+interface ValidationMethods {
+    /**
+     * Returns true if element has no validity problems; false otherwise.
+     * Fires an invalid event at the element in the latter case.
+     *
+     * @webnative
+     */
+    readonly checkValidity: ElementInternals['checkValidity'];
+    /**
+     * Returns true if the element has no validity problems; otherwise, returns
+     * false, fires an invalid event at the element, and (if the event isn't
+     * canceled) reports the problem to the user.
+     *
+     * @webnative
+     */
+    readonly reportValidity: ElementInternals['reportValidity'];
+    /**
+     * Sets a custom error message that is displayed when a form is submitted.
+     *
+     * @param error The custom error message to set.
+     *
+     * @webnative
+     */
+    readonly setCustomValidity: HTMLInputElement['setCustomValidity'];
+}
+declare module './components' {
+    namespace Components {
+        interface QdsCheckbox extends ValidationMethods {
+        }
+        interface QdsDialog {
+            /**
+             * Displays the dialog over the top of any other dialogs that might be
+             * present. Everything outside of the dialog is [inert][] with interactions
+             * outside of the dialog being blocked.
+             *
+             * [inert]: https://developer.mozilla.org/docs/Web/API/HTMLElement/inert
+             */
+            show: () => void;
+            /**
+             * Closes the dialog.
+             */
+            close: () => void;
+        }
+        interface QdsInput extends ValidationMethods {
+            /**
+             * Selects the entire content of the `<qds-input>` element if the
+             * element's content is selectable.
+             */
+            readonly select: HTMLInputElement['select'];
+            /**
+             * Sets the contents of the specified range of characters in the input element to a given string.
+             *
+             * @param replacement The string to insert.
+             * @param start The 0-based index of the first character to replace. Defaults to the current `selectionStart` value (the start of the user's current selection).
+             * @param end The 0-based index of the character _after_ the last character to replace. Defaults to the current `selectionEnd` value (the end of the user's current selection).
+             * @param selectionMode A string defining how the selection should be set
+             * after the text has been replaced. Possible values:
+             * - `"select"` selects the newly inserted text.
+             * - `"start"` moves the selection to just before the inserted text.
+             * - `"end"` moves the selection to just after the inserted text.
+             * - `"preserve"` attempts to preserve the selection.
+             *
+             * @webnative
+             */
+            readonly setRangeText: HTMLInputElement['setRangeText'];
+            /**
+             * Selects the specified range of characters within the input.
+             *
+             * @param start The offset into the input for the start of the selection.
+             * @param end The offset into the input for the end of the selection.
+             * @param direction The direction in which the selection is performed.
+             *
+             * @webnative
+             */
+            readonly setSelectionRange: HTMLInputElement['setSelectionRange'];
+            /**
+             * Decrements the `value` by (`step` * n), where n defaults to 1 if not
+             * specified.
+             *
+             * @param n Amount to decrement the value by.
+             *
+             * @webnative
+             */
+            readonly stepDown: HTMLInputElement['stepDown'];
+            /**
+             * Increments the `value` by (`step` * n), where n defaults to 1 if not
+             * specified.
+             *
+             * @param n Amount to increment the value by.
+             *
+             * @webnative
+             */
+            readonly stepUp: HTMLInputElement['stepUp'];
+            /**
+             * Displays the browser picker for a `<qds-input>` element.
+             *
+             * This is the same picker that would normally be displayed when the
+             * element is selected, but can be triggered from a button press or other
+             * user interaction.
+             *
+             * Commonly browsers implement it for inputs of these types: `"date"`,
+             * `"month"`, `"week"`, `"time"`, `"datetime-local"`, or `"color"`. It
+             * can also be pre-populated with items from a [`<datalist>`][] element
+             * or [`autocomplete`][] attribute.
+             *
+             * More generally, this method should display the picker for any
+             * `<qds-input>` element on the platform that has a picker.
+             *
+             * [`<datalist>`]: https://developer.mozilla.org/docs/Web/HTML/Element/datalist
+             * [`autocomplete`]: https://developer.mozilla.org/docs/Web/HTML/Attributes/autocomplete
+             *
+             * @webnative
+             */
+            readonly showPicker: HTMLInputElement['showPicker'];
+        }
+        interface QdsSelect extends ValidationMethods {
+            /**
+             * Adds an element to the options collection.
+             *
+             * @param element The element to add.
+             * @param before An element of the options collection or a zero-based
+             * index representing the item the element should be added before. If
+             * this parameter is not specified or the index does not exist, the new
+             * element is appended to the end of the collection.
+             */
+            readonly addItem: HTMLSelectElement['add'];
+            /**
+             * Removes an element from the options collection.
+             *
+             * @param index Zero-based index of the [`HTMLOptionElement`][] to remove
+             * from the collection. If the index is not found the method has no
+             * effect.
+             *
+             * [`HTMLOptionElement`]: https://developer.mozilla.org/docs/Web/API/HTMLOptionElement
+             */
+            readonly removeItem: HTMLSelectElement['remove'];
+            /**
+             * Retrieves an element from the options collection by its index.
+             *
+             * @param index Zero-based index of the [`HTMLOptionElement`][] to
+             * retrieve.
+             *
+             * [`HTMLOptionElement`]: https://developer.mozilla.org/docs/Web/API/HTMLOptionElement
+             *
+             * @webnative
+             */
+            readonly item: HTMLSelectElement['item'];
+            /**
+             * Retrieves an element from the options collection by its name.
+             *
+             * @param name The `name` or `id` property of the [`HTMLOptionElement`][] to
+             * retrieve.
+             *
+             * [`HTMLOptionElement`]: https://developer.mozilla.org/docs/Web/API/HTMLOptionElement
+             *
+             * @webnative
+             */
+            readonly namedItem: HTMLSelectElement['namedItem'];
+        }
+        interface QdsSwitch extends ValidationMethods {
+        }
+        interface QdsTextarea extends ValidationMethods {
+            /**
+             * Selects the entire content of the `<qds-textarea>` element if the
+             * element's content is selectable.
+             *
+             * @webnative
+             */
+            readonly select: HTMLTextAreaElement['select'];
+            /**
+             * Sets the contents of the specified range of characters in the textarea
+             * element to a given string.
+             *
+             * @param replacement The string to insert.
+             * @param start The 0-based index of the first character to replace. Defaults to the current `selectionStart` value (the start of the user's current selection).
+             * @param end The 0-based index of the character _after_ the last character to replace. Defaults to the current `selectionEnd` value (the end of the user's current selection).
+             * @param selectionMode A string defining how the selection should be set
+             * after the text has been replaced. Possible values:
+             * - `"select"` selects the newly inserted text.
+             * - `"start"` moves the selection to just before the inserted text.
+             * - `"end"` moves the selection to just after the inserted text.
+             * - `"preserve"` attempts to preserve the selection.
+             *
+             * @webnative
+             */
+            readonly setRangeText: HTMLTextAreaElement['setRangeText'];
+            /**
+             * Selects the specified range of characters within the textarea.
+             *
+             * @param start The offset into the textarea for the start of the selection.
+             * @param end The offset into the textarea for the end of the selection.
+             * @param direction The direction in which the selection is performed.
+             *
+             * @webnative
+             */
+            readonly setSelectionRange: HTMLTextAreaElement['setSelectionRange'];
+        }
+        interface QdsTab {
+            /**
+             * Exposes the tab `HTMLElement` that is rendered inside the component.
+             * This can be useful to manage focus.
+             *
+             * @readonly
+             */
+            readonly tab: HTMLElement;
+        }
+    }
+}
+//# sourceMappingURL=interface-overrides.d.ts.map

package/dist/types/qds-test.d.ts

@@ -1,18 +1,29 @@
-import type { Page } from '@playwright/test';
-import type { EventSpy } from 'stencil-playwright/dist/page/event-spy';
+import type { Locator, Page } from '@playwright/test';
+import type { EventSpy } from '@stencil/playwright/dist/page/event-spy';
 declare module '@playwright/test' {
-  interface Locator {
-    spyOnEvent: (eventName: string) => Promise<EventSpy>;
-  }
+    interface Locator {
+        /**
+         * Creates a new EventSpy and listens on the window for an event.
+         * The test will timeout if the event never fires.
+         *
+         * Usage:
+         * ```ts
+         * const ionChange = await page.spyOnEvent('ionChange');
+         * ...
+         * await ionChange.next();
+         * ```
+         */
+        spyOnEvent: (eventName: string) => Promise<EventSpy>;
+    }
 }
 interface QuartzPageOptions {
-  addBrandFont?: boolean;
-  content?: string;
-  platform?: 'desktop' | 'mobile';
-  theme?: 'dark' | 'light';
+    addBrandFont?: boolean;
+    content?: string;
+    platform?: 'desktop' | 'mobile';
+    theme?: 'dark' | 'light';
 }
 export declare const setupQuartzPage: (page: Page, options?: QuartzPageOptions) => Promise<void>;
-export declare const press: (page: Page, selector: string) => Promise<void>;
+export declare const press: (locator: Locator) => Promise<void>;
 export { expect } from '@playwright/test';
-export { test } from 'stencil-playwright';
+export { test } from '@stencil/playwright';
 //# sourceMappingURL=qds-test.d.ts.map

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

@@ -1,8 +1,19 @@
 declare type CustomMethodDecorator<T> = (target: Object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>) => TypedPropertyDescriptor<T> | void;
+type UnionToIntersection<U> = (U extends any ? (x: U) => void : never) extends (x: infer I) => void ? I : never;
 export interface ComponentDecorator {
     (opts?: ComponentOptions): ClassDecorator;
 }
 export interface ComponentOptions {
+    /**
+     * When set to `true` this component will be form-associated. See
+     * https://stenciljs.com/docs/next/form-associated documentation on how to
+     * build form-associated Stencil components that integrate into forms like
+     * native browser elements such as `<input>` and `<textarea>`.
+     *
+     * The {@link AttachInternals} decorator allows for access to the
+     * `ElementInternals` object to modify the associated form.
+     */
+    formAssociated?: boolean;
     /**
      * Tag name of the web component. Ideally, the tag name must be globally unique,
      * so it's recommended to choose an unique prefix for all your components within the same collection.
@@ -62,7 +73,7 @@ export interface PropOptions {
     /**
      * The name of the associated DOM attribute.
      * Stencil uses different heuristics to determine the default name of the attribute,
-     * but using this property, you can override the default behaviour.
+     * but using this property, you can override the default behavior.
      */
     attribute?: string | null;
     /**
@@ -107,6 +118,9 @@ export interface EventOptions {
      */
     composed?: boolean;
 }
+export interface AttachInternalsDecorator {
+    (): PropertyDecorator;
+}
 export interface ListenDecorator {
     (eventName: string, opts?: ListenOptions): CustomMethodDecorator<any>;
 }
@@ -128,7 +142,7 @@ export interface ListenOptions {
      * By default, Stencil uses several heuristics to determine if
      * it must attach a `passive` event listener or not.
      *
-     * Using the `passive` option can be used to change the default behaviour.
+     * Using the `passive` option can be used to change the default behavior.
      * Please see https://developers.google.com/web/updates/2016/06/passive-event-listeners for further information.
      */
     passive?: boolean;
@@ -175,6 +189,12 @@ export declare const Element: ElementDecorator;
  * https://stenciljs.com/docs/events
  */
 export declare const Event: EventDecorator;
+/**
+ * If the `formAssociated` option is set in options passed to the
+ * `@Component()` decorator then this decorator may be used to get access to the
+ * `ElementInternals` instance associated with the component.
+ */
+export declare const AttachInternals: AttachInternalsDecorator;
 /**
  * The `Listen()` decorator is for listening DOM events, including the ones
  * dispatched from `@Events()`.
@@ -241,6 +261,25 @@ export declare function setPlatformHelpers(helpers: {
  * @returns the base path
  */
 export declare function getAssetPath(path: string): string;
+/**
+ * Method to render a virtual DOM tree to a container element.
+ *
+ * @example
+ * ```tsx
+ * import { render } from '@stencil/core';
+ *
+ * const vnode = (
+ *   <div>
+ *     <h1>Hello, world!</h1>
+ *   </div>
+ * );
+ * render(vnode, document.body);
+ * ```
+ *
+ * @param vnode - The virtual DOM tree to render
+ * @param container - The container element to render the virtual DOM tree to
+ */
+export declare function render(vnode: VNode, container: Element): void;
 /**
  * Used to manually set the base path where assets can be found. For lazy-loaded
  * builds the asset path is automatically set and assets copied to the correct
@@ -311,6 +350,28 @@ export declare function readTask(task: RafCallback): void;
  * Unhandled exception raised while rendering, during event handling, or lifecycles will trigger the custom event handler.
  */
 export declare const setErrorHandler: (handler: ErrorHandler) => void;
+export type MixinFactory = <TBase extends new (...args: any[]) => any>(base: TBase) => abstract new (...args: ConstructorParameters<TBase>) => any;
+/**
+ * Compose multiple mixin classes into a single constructor.
+ * The resulting class has the combined instance types of all mixed-in classes.
+ *
+ * Example:
+ * ```
+ * import { Mixin, MixinFactory } from '@stencil/core';
+ *
+ * const AWrap: MixinFactory = (Base) => {class A extends Base { propA = A }; return A;}
+ * const BWrap: MixinFactory = (Base) => {class B extends Base { propB = B }; return B;}
+ * const CWrap: MixinFactory = (Base) => {class C extends Base { propC = C }; return C;}
+ *
+ * class X extends Mixin(AWrap, BWrap, CWrap) {
+ *   render() { return <div>{this.propA} {this.propB} {this.propC}</div>; }
+ * }
+ * ```
+ *
+ * @param mixinFactories mixin factory functions that return a class which extends from the provided class.
+ * @returns a class that that is composed from extending each of the provided classes in the order they were provided.
+ */
+export declare function Mixin<TMixins extends readonly MixinFactory[]>(...mixinFactories: TMixins): abstract new (...args: any[]) => UnionToIntersection<InstanceType<ReturnType<TMixins[number]>>>;
 /**
  * This file gets copied to all distributions of stencil component collections.
  * - no imports
@@ -432,7 +493,7 @@ export interface QueueApi {
 /**
  * Host
  */
-interface HostAttributes {
+export interface HostAttributes {
     class?: string | {
         [className: string]: boolean;
     };
@@ -471,7 +532,7 @@ export interface FunctionalUtilities {
     /**
      * Utility for reading the children of a functional component at runtime.
      * Since the Stencil runtime uses a different interface for children it is
-     * not recommendeded to read the children directly, and is preferable to use
+     * not recommended to read the children directly, and is preferable to use
      * this utility to, for instance, perform a side effect for each child.
      */
     forEach: (children: VNode[], cb: (vnode: ChildNode, index: number, array: ChildNode[]) => void) => void;
@@ -749,6 +810,7 @@ export declare namespace JSXBase {
         hrefLang?: string;
         hreflang?: string;
         media?: string;
+        ping?: string;
         rel?: string;
         target?: string;
         referrerPolicy?: ReferrerPolicy;
@@ -775,7 +837,6 @@ export declare namespace JSXBase {
         cite?: string;
     }
     interface ButtonHTMLAttributes<T> extends HTMLAttributes<T> {
-        autoFocus?: boolean;
         disabled?: boolean;
         form?: string;
         formAction?: string;
@@ -791,6 +852,9 @@ export declare namespace JSXBase {
         name?: string;
         type?: string;
         value?: string | string[] | number;
+        popoverTargetAction?: string;
+        popoverTargetElement?: Element | null;
+        popoverTarget?: string;
     }
     interface CanvasHTMLAttributes<T> extends HTMLAttributes<T> {
         height?: number | string;
@@ -804,7 +868,8 @@ export declare namespace JSXBase {
     }
     interface DetailsHTMLAttributes<T> extends HTMLAttributes<T> {
         open?: boolean;
-        onToggle?: (event: Event) => void;
+        name?: string;
+        onToggle?: (event: ToggleEvent) => void;
     }
     interface DelHTMLAttributes<T> extends HTMLAttributes<T> {
         cite?: string;
@@ -872,6 +937,8 @@ export declare namespace JSXBase {
     }
     interface ImgHTMLAttributes<T> extends HTMLAttributes<T> {
         alt?: string;
+        crossOrigin?: string;
+        crossorigin?: string;
         decoding?: 'async' | 'auto' | 'sync';
         importance?: 'low' | 'auto' | 'high';
         height?: number | string;
@@ -897,8 +964,6 @@ export declare namespace JSXBase {
         autocapitalize?: string;
         autoComplete?: string;
         autocomplete?: string;
-        autoFocus?: boolean;
-        autofocus?: boolean | string;
         capture?: string;
         checked?: boolean;
         crossOrigin?: string;
@@ -930,6 +995,8 @@ export declare namespace JSXBase {
         minlength?: number | string;
         multiple?: boolean;
         name?: string;
+        onSelect?: (event: Event) => void;
+        onselect?: (event: Event) => void;
         pattern?: string;
         placeholder?: string;
         readOnly?: boolean;
@@ -948,10 +1015,11 @@ export declare namespace JSXBase {
         webkitdirectory?: boolean;
         webkitEntries?: any;
         width?: number | string;
+        popoverTargetAction?: string;
+        popoverTargetElement?: Element | null;
+        popoverTarget?: string;
     }
     interface KeygenHTMLAttributes<T> extends HTMLAttributes<T> {
-        autoFocus?: boolean;
-        autofocus?: boolean | string;
         challenge?: string;
         disabled?: boolean;
         form?: string;
@@ -964,7 +1032,6 @@ export declare namespace JSXBase {
     interface LabelHTMLAttributes<T> extends HTMLAttributes<T> {
         form?: string;
         htmlFor?: string;
-        htmlfor?: string;
     }
     interface LiHTMLAttributes<T> extends HTMLAttributes<T> {
         value?: string | string[] | number;
@@ -991,6 +1058,8 @@ export declare namespace JSXBase {
         autoPlay?: boolean;
         autoplay?: boolean | string;
         controls?: boolean;
+        controlslist?: 'nodownload' | 'nofullscreen' | 'noremoteplayback';
+        controlsList?: 'nodownload' | 'nofullscreen' | 'noremoteplayback';
         crossOrigin?: string;
         crossorigin?: string;
         loop?: boolean;
@@ -1075,7 +1144,6 @@ export declare namespace JSXBase {
     interface OutputHTMLAttributes<T> extends HTMLAttributes<T> {
         form?: string;
         htmlFor?: string;
-        htmlfor?: string;
         name?: string;
     }
     interface ParamHTMLAttributes<T> extends HTMLAttributes<T> {
@@ -1100,7 +1168,6 @@ export declare namespace JSXBase {
         type?: string;
     }
     interface SelectHTMLAttributes<T> extends HTMLAttributes<T> {
-        autoFocus?: boolean;
         disabled?: boolean;
         form?: string;
         multiple?: boolean;
@@ -1111,11 +1178,13 @@ export declare namespace JSXBase {
         autocomplete?: string;
     }
     interface SourceHTMLAttributes<T> extends HTMLAttributes<T> {
+        height?: number;
         media?: string;
         sizes?: string;
         src?: string;
         srcSet?: string;
         type?: string;
+        width?: number;
     }
     interface StyleHTMLAttributes<T> extends HTMLAttributes<T> {
         media?: string;
@@ -1133,8 +1202,6 @@ export declare namespace JSXBase {
     interface TextareaHTMLAttributes<T> extends HTMLAttributes<T> {
         autoComplete?: string;
         autocomplete?: string;
-        autoFocus?: boolean;
-        autofocus?: boolean | string;
         cols?: number;
         disabled?: boolean;
         form?: string;
@@ -1143,6 +1210,8 @@ export declare namespace JSXBase {
         minLength?: number;
         minlength?: number | string;
         name?: string;
+        onSelect?: (event: Event) => void;
+        onselect?: (event: Event) => void;
         placeholder?: string;
         readOnly?: boolean;
         readonly?: boolean | string;
@@ -1185,6 +1254,8 @@ export declare namespace JSXBase {
     interface HTMLAttributes<T = HTMLElement> extends DOMAttributes<T> {
         innerHTML?: string;
         accessKey?: string;
+        autoFocus?: boolean;
+        autofocus?: boolean | string;
         class?: string | {
             [className: string]: boolean;
         };
@@ -1196,6 +1267,7 @@ export declare namespace JSXBase {
         draggable?: boolean;
         hidden?: boolean;
         id?: string;
+        inert?: boolean;
         lang?: string;
         spellcheck?: 'true' | 'false' | any;
         style?: {
@@ -1204,6 +1276,7 @@ export declare namespace JSXBase {
         tabIndex?: number;
         tabindex?: number | string;
         title?: string;
+        popover?: string | null;
         inputMode?: string;
         inputmode?: string;
         enterKeyHint?: string;
@@ -1289,7 +1362,7 @@ export declare namespace JSXBase {
         clipPathUnits?: number | string;
         'clip-rule'?: number | string;
         'color-interpolation'?: number | string;
-        'color-interpolation-filters'?: 'auto' | 's-rGB' | 'linear-rGB' | 'inherit';
+        'color-interpolation-filters'?: 'auto' | 'sRGB' | 'linearRGB';
         'color-profile'?: number | string;
         'color-rendering'?: number | string;
         contentScriptType?: number | string;
@@ -1502,6 +1575,13 @@ export declare namespace JSXBase {
         z?: number | string;
         zoomAndPan?: string;
     }
+    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/ToggleEvent) */
+    interface ToggleEvent extends Event {
+        /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/ToggleEvent/newState) */
+        readonly newState: string;
+        /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/ToggleEvent/oldState) */
+        readonly oldState: string;
+    }
     interface DOMAttributes<T> extends JSXAttributes<T> {
         slot?: string;
         part?: string;
@@ -1518,6 +1598,10 @@ export declare namespace JSXBase {
         onCompositionstartCapture?: (event: CompositionEvent) => void;
         onCompositionupdate?: (event: CompositionEvent) => void;
         onCompositionupdateCapture?: (event: CompositionEvent) => void;
+        onBeforeToggle?: (event: ToggleEvent) => void;
+        onBeforeToggleCapture?: (event: ToggleEvent) => void;
+        onToggle?: (event: ToggleEvent) => void;
+        onToggleCapture?: (event: ToggleEvent) => void;
         onFocus?: (event: FocusEvent) => void;
         onFocusCapture?: (event: FocusEvent) => void;
         onFocusin?: (event: FocusEvent) => void;
@@ -1547,7 +1631,7 @@ export declare namespace JSXBase {
         onKeyUp?: (event: KeyboardEvent) => void;
         onKeyUpCapture?: (event: KeyboardEvent) => void;
         onAuxClick?: (event: MouseEvent) => void;
-        onClick?: (event: MouseEvent) => void;
+        onClick?: (event: PointerEvent) => void;
         onClickCapture?: (event: MouseEvent) => void;
         onContextMenu?: (event: MouseEvent) => void;
         onContextMenuCapture?: (event: MouseEvent) => void;
@@ -1619,8 +1703,16 @@ export declare namespace JSXBase {
         onAnimationEndCapture?: (event: AnimationEvent) => void;
         onAnimationIteration?: (event: AnimationEvent) => void;
         onAnimationIterationCapture?: (event: AnimationEvent) => void;
+        onTransitionCancel?: (event: TransitionEvent) => void;
+        onTransitionCancelCapture?: (event: TransitionEvent) => void;
         onTransitionEnd?: (event: TransitionEvent) => void;
         onTransitionEndCapture?: (event: TransitionEvent) => void;
+        onTransitionRun?: (event: TransitionEvent) => void;
+        onTransitionRunCapture?: (event: TransitionEvent) => void;
+        onTransitionStart?: (event: TransitionEvent) => void;
+        onTransitionStartCapture?: (event: TransitionEvent) => void;
+        [key: `aria-${string}`]: string | boolean | undefined;
+        [key: `aria${string}`]: string | boolean | undefined;
     }
 }
 export interface JSXAttributes<T = Element> {