@quartzds/core 1.0.0-beta.1

package/dist/types/components.d.ts

@@ -0,0 +1,1692 @@
+/* eslint-disable */
+/* tslint:disable */
+/**
+ * This is an autogenerated file created by the Stencil compiler.
+ * It contains typing information for all components that exist in this project.
+ */
+import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
+import { ButtonSize, ButtonTarget, ButtonType, FormMethod, Importance } from "./components/button/button";
+import { LiteralUnion } from "type-fest";
+import { OffsetOptions, QdsFocusEventDetail } from "./helpers";
+import { CheckboxSize, CheckboxValue } from "./components/checkbox/checkbox";
+import { AutoUpdateOptions, DetectOverflowOptions, FlipOptions, Placement, ReferenceElement, ShiftOptions, Strategy } from "@floating-ui/dom";
+import { Target } from "./components/inline-link/inline-link";
+import { AutoCapitalize, AutoComplete, EnterKeyHint, InputMode, InputSize, InputType, InputValue, QdsInputEventDetail, SelectDirection } from "./components/input/input";
+import { LabelSize } from "./components/label/label";
+import { RadioSize, RadioValue } from "./components/radio/radio";
+import { SwitchSize, SwitchValue } from "./components/switch/switch";
+import { Layer, Level, Tag } from "./components/title/title";
+export { ButtonSize, ButtonTarget, ButtonType, FormMethod, Importance } from "./components/button/button";
+export { LiteralUnion } from "type-fest";
+export { OffsetOptions, QdsFocusEventDetail } from "./helpers";
+export { CheckboxSize, CheckboxValue } from "./components/checkbox/checkbox";
+export { AutoUpdateOptions, DetectOverflowOptions, FlipOptions, Placement, ReferenceElement, ShiftOptions, Strategy } from "@floating-ui/dom";
+export { Target } from "./components/inline-link/inline-link";
+export { AutoCapitalize, AutoComplete, EnterKeyHint, InputMode, InputSize, InputType, InputValue, QdsInputEventDetail, SelectDirection } from "./components/input/input";
+export { LabelSize } from "./components/label/label";
+export { RadioSize, RadioValue } from "./components/radio/radio";
+export { SwitchSize, SwitchValue } from "./components/switch/switch";
+export { Layer, Level, Tag } from "./components/title/title";
+export namespace Components {
+    /**
+     * The `<qds-button>` element is an interactive element activated by a user
+     * with a mouse, keyboard, finger, voice command, or other assistive technology.
+     * Once activated, it then performs a programmable action, such as submitting a
+     * [form](https://developer.mozilla.org/docs/Learn/Forms)
+     * or opening a dialog.
+     * @see https://quartz.se.com/build/components/button
+     */
+    interface QdsButton {
+        /**
+          * Prevents the button from being interacted with: it cannot be pressed or focused.
+          * @webnative
+         */
+        "disabled"?: boolean;
+        /**
+          * Tells the browser to download the linked file as this filename. Only used when `href` is set.
+          * @webnative
+         */
+        "download"?: string;
+        /**
+          * The [`<form>`](https://developer.mozilla.org/docs/Web/HTML/Element/form) element to associate the button with (its form owner).  The value of this attribute must be the id of a `<form>` in the same document. If this attribute is not set, the `<button>` is associated with its ancestor `<form>` element, if any.  This attribute lets you associate `<button>` elements to `<form>`s anywhere in the document, not just inside a `<form>`. It can also override an ancestor `<form>` element.
+          * @webnative
+         */
+        "form"?: string;
+        /**
+          * The URL that processes the information submitted by the button. Overrides the [`action`](https://developer.mozilla.org/docs/Web/HTML/Element/button#attr-formaction) attribute of the button's form owner. Does nothing if there is no form owner.
+          * @webnative
+         */
+        "formAction"?: string;
+        /**
+          * If the button is a submit button (it's inside/associated with a `<form>` and doesn't have `type="button"`), this attribute specifies the [HTTP method](https://developer.mozilla.org/docs/Web/HTTP/Methods) used to submit the form. Possible values:  - `get`: The form data are appended to the form's action URL, with a ? as a separator, and the resulting URL is sent to the server. Use this method when the form has no side effects, like search forms. - `post`: The data from the form are included in the body of the HTTP request when sent to the server. Use when the form contains information that shouldn't be public, like login credentials.  If specified, this attribute overrides the method attribute of the button's form owner.
+          * @webnative
+         */
+        "formMethod"?: FormMethod;
+        /**
+          * If the button is a submit button, this attribute specifies that the form is not to be [validated](https://developer.mozilla.org/docs/Learn/Forms/Form_validation) when it is submitted. If this attribute is specified, it overrides the [`novalidate`](https://developer.mozilla.org/docs/Web/HTML/Element/form#attr-novalidate) attribute of the button's form owner.
+          * @webnative
+         */
+        "formNoValidate": boolean;
+        /**
+          * If the button is a submit button, this attribute is an author-defined name or standardized, underscore-prefixed keyword indicating where to display the response from submitting the form. This is the `name` of, or keyword for, a browsing context (a tab, window, or [`<iframe>`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe)). If this attribute is specified, it overrides the [`target`](https://developer.mozilla.org/docs/Web/HTML/Element/form#attr-target) attribute of the button's form owner. The following keywords have special meanings:  - `_blank`: Load the response into a new unnamed browsing context — usually a new tab or window, depending on the user's browser settings. - `_parent`: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as `_self`. - `_self`: Load the response into the same browsing context as the current one. - `_top`: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as `_self`.
+          * @webnative
+         */
+        "formTarget": LiteralUnion<ButtonTarget, string>;
+        /**
+          * When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.
+          * @webnative
+         */
+        "href"?: string;
+        /**
+          * The name of a registered icon library.
+         */
+        "iconLibrary": string;
+        /**
+          * The name of the icon to render.  Available names depend on the icon library being used.
+         */
+        "iconName"?: string;
+        /**
+          * The button's importance.
+         */
+        "importance": Importance;
+        /**
+          * The name of the button, submitted as a pair with the button's `value` as part of the form data, when that button is used to submit the form. Ignored when `href` is set.
+          * @webnative
+         */
+        "name"?: string;
+        /**
+          * The button's size.
+         */
+        "size": ButtonSize;
+        /**
+          * Where to display the linked URL, as the name for a browsing context (a tab, window, or [`<iframe>`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe). The following keywords have special meanings for where to load the URL:  - `_blank`: usually a new tab, but users can configure browsers to open a new   window instead. - `_parent`: the parent browsing context of the current one. If no parent,   behaves as `_self`. - `_self`: the current browsing context. - `_top`: the topmost browsing context (the "highest" context that's an   ancestor of the current one). If no ancestors, behaves as `_self`.
+          * @webnative
+         */
+        "target": LiteralUnion<ButtonTarget, string>;
+        /**
+          * The button's text.
+         */
+        "text"?: string;
+        /**
+          * The type of button.  `button`: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.  `submit`: The button submits the form data to the server. This is the default if the attribute is not specified for buttons associated with a `<form>`, or if the attribute is an empty or invalid value.  `reset`: The button resets all the controls to their initial values.
+          * @webnative
+         */
+        "type"?: ButtonType;
+        /**
+          * Defines the value associated with the button's `name` when it's submitted with the form data. This value is passed to the server in params when the form is submitted using this button. Ignored when `href` is set.
+          * @webnative
+         */
+        "value"?: string;
+    }
+    /**
+     * `<qds-checkbox>` elements are rendered as boxes that are checked (ticked)
+     * when activated, like you might see in an official government paper form. A
+     * checkbox allows you to select single values for submission in a form (or not).
+     * @see https://quartz.se.com/build/components/checkbox
+     */
+    interface QdsCheckbox {
+        /**
+          * Specify whether the checkbox should have focus when the page loads.
+          * @webnative
+         */
+        "autoFocus"?: boolean;
+        /**
+          * Returns whether a form will validate this checkbox when it is submitted without having to submit it.
+         */
+        "checkValidity": () => Promise<boolean>;
+        /**
+          * Sets the checkbox's state.
+          * @webnative
+         */
+        "checked"?: boolean;
+        /**
+          * Prevents the checkbox from being interacted with: it cannot be pressed or focused.
+          * @webnative
+         */
+        "disabled"?: boolean;
+        /**
+          * The [`<form>`](https://developer.mozilla.org/docs/Web/HTML/Element/form) element to associate the checkbox with (its form owner).  The value of this property must be the id of a `<form>` in the same document. If this property is not set, the `<qds-checkbox>` is associated with its ancestor `<form>` element, if any.  This property lets you associate `<qds-checkbox>` elements to `<form>`s anywhere in the document, not just inside a `<form>`. It can also override an ancestor `<form>` element.
+          * @webnative
+         */
+        "form"?: string;
+        /**
+          * Sets the checkbox to an indeterminate state. This is usually applied to checkboxes that represents a "select all/none" behavior when associated checkboxes have a mix of checked and unchecked states.
+          * @webnative
+         */
+        "indeterminate"?: boolean;
+        /**
+          * Adds vertical margin to the checkbox for alignment.  This is useful when creating inline layouts so that the first lines have the correct vertical centering.
+         */
+        "inline": boolean;
+        /**
+          * The name of the checkbox, which is submitted with the form data. An incrementing ID is used by default.
+          * @webnative
+         */
+        "name": string;
+        /**
+          * Returns true if the checkbox's value passes validity checks; otherwise, returns false, and (if the event isn't canceled) reports the problem to the user.
+         */
+        "reportValidity": () => Promise<boolean>;
+        /**
+          * A value must be specified for the checkbox before the owning form can be submitted.  See [Client-side validation](https://developer.mozilla.org/docs/Web/HTML/Element/input#client-side_validation) and the [HTML attribute: `required`](https://developer.mozilla.org/docs/Web/HTML/Attributes/required) for more information.
+          * @webnative
+         */
+        "required"?: boolean;
+        /**
+          * Sets a custom validity message for the checkbox. If this message is not the empty string, then the checkbox is considered invalid.
+         */
+        "setCustomValidity": (message: string) => Promise<void>;
+        /**
+          * The checkbox's size.
+         */
+        "size": CheckboxSize;
+        /**
+          * The checkbox's text.
+         */
+        "text"?: string;
+        /**
+          * The value of the checkbox, submitted as a name/value pair with form data.
+          * @webnative
+         */
+        "value"?: CheckboxValue;
+    }
+    /**
+     * @experimental 
+     * @see https://quartz.se.com/build/components/dropdown
+     */
+    interface QdsDropdown {
+        /**
+          * Options to pass to Floating UI's [`autoUpdate()` function](https://floating-ui.com/docs/autoUpdate).
+          * @see https://floating-ui.com/docs/autoupdate#options
+         */
+        "autoUpdateOptions"?: AutoUpdateOptions;
+        /**
+          * Close the dropdown.
+         */
+        "close": () => Promise<void>;
+        /**
+          * Prevents the dropdown from being shown by user interaction. The dropdown can still be displayed by calling the `show()` method.
+         */
+        "disabled": boolean;
+        /**
+          * Options to pass to Floating UI's [`flip` middleware](https://floating-ui.com/docs/flip).  The [`crossAxis` option](https://floating-ui.com/docs/flip#crossaxis) is set to the value of the `noShift` property by default for interoperability with the [`shift` middleware](https://floating-ui.com/docs/shift).
+          * @see https://floating-ui.com/docs/flip#options
+         */
+        "flipOptions"?: Partial<
+    DetectOverflowOptions & FlipOptions
+  >;
+        /**
+          * Disable Floating UI's [`flip` middleware](https://floating-ui.com/docs/flip).
+         */
+        "noFlip": boolean;
+        /**
+          * Disable Floating UI's [`shift` middleware](https://floating-ui.com/docs/shift).
+         */
+        "noShift": boolean;
+        /**
+          * Options to pass to Floating UI's [`offset` middleware](https://floating-ui.com/docs/offset).  The [`mainAxis` option](https://floating-ui.com/docs/offset#mainaxis) is not supported.
+          * @see https://floating-ui.com/docs/offset#options
+         */
+        "offsetOptions"?: OffsetOptions;
+        /**
+          * Where to place the dropdown relative to the `target`.
+          * @see https://floating-ui.com/docs/tutorial#placements
+         */
+        "placement": Placement;
+        /**
+          * Options to pass to Floating UI's [`shift` middleware](https://floating-ui.com/docs/shift).
+          * @see https://floating-ui.com/docs/shift#options
+         */
+        "shiftOptions"?: Partial<
+    DetectOverflowOptions & ShiftOptions
+  >;
+        /**
+          * Show the dropdown.
+         */
+        "show": () => Promise<void>;
+        /**
+          * The CSS position strategy to use.
+          * @see https://floating-ui.com/docs/computeposition#strategy
+         */
+        "strategy"?: Strategy;
+        /**
+          * The trigger element that will trigger the dropdown. The target specified can be any of the follow:  - A CSS selector string - A reference to an [`Element`](https://developer.mozilla.org/docs/Web/API/Element) or [Virtual Element](https://floating-ui.com/docs/virtual-elements) - A function returning a reference to an [`Element`](https://developer.mozilla.org/docs/Web/API/Element), [Virtual Element](https://floating-ui.com/docs/virtual-elements), or a CSS selector string
+         */
+        "target": | ReferenceElement
+    | string
+    | (() => ReferenceElement | string);
+        /**
+          * Update the dropdown's middleware and position.
+         */
+        "update": () => Promise<void>;
+    }
+    /**
+     * @experimental 
+     */
+    interface QdsIcon {
+        /**
+          * The name of a registered icon library.
+         */
+        "library": string;
+        /**
+          * The name of the icon to render.  Available names depend on the icon library being used.
+         */
+        "name": string;
+    }
+    /**
+     * `<qds-inline-link>` elements, with their `href` property, create a hyperlink
+     * to web pages, files, email addresses, locations in the same page, or
+     * anything else a URL can address.
+     * Content within each `<qds-inline-link>` *should* indicate the inline link's
+     * destination. If the `href` property is present, pressing the enter key while
+     * focused on the `<qds-inline-link>` element will activate it.
+     * @see https://quartz.se.com/build/components/inline-link
+     */
+    interface QdsInlineLink {
+        /**
+          * Prevents the inline link from being interacted with: it cannot be pressed or focused.
+         */
+        "disabled": boolean;
+        /**
+          * Causes the browser to treat the linked URL as a download. Can be used with or without a `filename` value:  - Without a value, the browser will suggest a filename/extension, generated from various sources:    - The   [`Content-Disposition`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Disposition)   HTTP header   - The final segment in the URL   [path](https://developer.mozilla.org/docs/Web/API/URL/pathname)   - The   [media type](https://developer.mozilla.org/docs/Glossary/MIME_type)   (from the   [`Content-Type`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Type)   header, the start of a   [`data:` URL](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URLs),   or   [`Blob.type`](https://developer.mozilla.org/docs/Web/API/Blob/type)   for a   [`blob:` URL](https://developer.mozilla.org/docs/Web/API/URL/createObjectURL)) - `filename`: defining a value suggests it as the filename. `/` and `\` characters are converted to underscores (`_`). Filesystems may forbid other characters in filenames, so browsers will adjust the suggested name if necessary.
+          * @webnative
+         */
+        "download"?: boolean | string;
+        /**
+          * The URL that the inline link points to. Inline links are not restricted to HTTP-based URLs — they can use any URL scheme supported by browsers:  - Sections of a page with document fragments - Specific text portions with [text fragments](https://developer.mozilla.org/docs/Web/Text_fragments) - Pieces of media files with media fragments - Telephone numbers with `tel:` URLs - Email addresses with `mailto:` URLs - While web browsers may not support other URL schemes, websites can with [`registerProtocolHandler()`](https://developer.mozilla.org/docs/Web/API/Navigator/registerProtocolHandler)
+          * @webnative
+         */
+        "href"?: string;
+        /**
+          * Hints at the human language of the linked URL. No built-in functionality. Allowed values are the same as [the global `lang` attribute](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/lang).
+          * @webnative
+         */
+        "hreflang"?: string;
+        /**
+          * How much of the [referrer](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer) to send when following the inline link.  - `no-referrer`: The [`Referer`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer) header will not be sent. - `no-referrer-when-downgrade`: The [`Referer`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer) header will not be sent to [origin](https://developer.mozilla.org/docs/Glossary/Origin)s without [TLS](https://developer.mozilla.org/docs/Glossary/TLS) ([HTTPS](https://developer.mozilla.org/docs/Glossary/HTTPS)). - `origin`: The sent referrer will be limited to the origin of the referring page: its [scheme](https://developer.mozilla.org/docs/Learn/Common_questions/What_is_a_URL), [host](https://developer.mozilla.org/docs/Glossary/Host), and [port](https://developer.mozilla.org/docs/Glossary/Port). - `origin-when-cross-origin`: The referrer sent to other origins will be limited to the scheme, the host, and the port. Navigations on the same origin will still include the path. - `same-origin`: A referrer will be sent for [same origin](https://developer.mozilla.org/docs/Glossary/Same-origin_policy), but cross-origin requests will contain no referrer information. - `strict-origin`: Only send the origin of the document as the referrer when the protocol security level stays the same (HTTPS→HTTPS), but don't send it to a less secure destination (HTTPS→HTTP). - `strict-origin-when-cross-origin` (default): Send a full URL when performing a same-origin request, only send the origin when the protocol security level stays the same (HTTPS→HTTPS), and send no header to a less secure destination (HTTPS→HTTP). - `unsafe-url`: The referrer will include the origin and the path (but not the [fragment](https://developer.mozilla.org/docs/Web/API/HTMLAnchorElement/hash), [password](https://developer.mozilla.org/docs/Web/API/HTMLAnchorElement/password), or [username](https://developer.mozilla.org/docs/Web/API/HTMLAnchorElement/username)). **This value is unsafe** because it leaks origins and paths from TLS-protected resources to insecure origins.
+          * @webnative
+         */
+        "referrerPolicy"?: ReferrerPolicy;
+        /**
+          * The relationship of the linked URL as space-separated [link types](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel).  The following list includes some of the most important existing keywords. Every keyword within a space-separated value should be unique within that value.  - [`alternate`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-alternate): Alternate representations of the current document. - [`author`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-author): Author of the current document or article. - [`bookmark`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-bookmark): Permalink for the nearest ancestor section. - [`external`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-external): The referenced document is not part of the same site as the current document. An icon will be rendered next to the text if this value is specified. - [`help`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-help): Link to context-sensitive help. - [`license`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-license): Indicates that the main content of the current document is covered by the copyright license described by the referenced document. - [`me`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/me): Indicates that the current document represents the person who owns the linked content. - [`next`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-next): Indicates that the current document is a part of a series and that the next document in the series is the referenced document. - [`nofollow`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-nofollow): Indicates that the current document's original author or publisher does not endorse the referenced document. - [`noopener`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/noopener): Creates a top-level browsing context that is not an auxiliary browsing context if the hyperlink would create either of those, to begin with (i.e., has an appropriate `target` attribute value). - [`noreferrer`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-noreferrer): No `Referer` header will be included. Additionally, has the same effect as `noopener`. - [`opener`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-opener): Creates an auxiliary browsing context if the hyperlink would otherwise create a top-level browsing context that is not an auxiliary browsing context (i.e., has "`_blank`" as `target` attribute value). - [`prev`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-prev): Indicates that the current document is a part of a series and that the previous document in the series is the referenced document. - [`search`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-search): Gives a link to a resource that can be used to search through the current document and its related pages. - [`tag`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-tag): Gives a tag (identified by the given address) that applies to the current document.
+          * @webnative
+         */
+        "rel"?: string;
+        /**
+          * Where to display the linked URL, as the name for a browsing context (a tab, window, or [`<iframe>`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe). The following keywords have special meanings for where to load the URL:  - `_blank`: usually a new tab, but users can configure browsers to open a new   window instead. - `_parent`: the parent browsing context of the current one. If no parent,   behaves as `_self`. - `_self`: the current browsing context. - `_top`: the topmost browsing context (the "highest" context that's an   ancestor of the current one). If no ancestors, behaves as `_self`.
+          * @webnative
+         */
+        "target": LiteralUnion<Target, string>;
+    }
+    /**
+     * The `<qds-input>` element is used to create interactive controls for
+     * web-based forms in order to accept data from the user; a wide variety of
+     * types of input data and control widgets are available, depending on the
+     * device and
+     * [user agent](https://developer.mozilla.org/docs/Glossary/User_agent).
+     * @see https://quartz.se.com/build/components/input
+     */
+    interface QdsInput {
+        /**
+          * Controls whether and how input is automatically capitalized as it is entered/edited by the user. Only valid for `search`, `tel`, and `text` inputs. Possible values:  - `"off"` or `"none"`: No auto-capitalization is applied (all letters default to lowercase). - `"on"` or `"sentences"`: The first letter of each sentence defaults to a capital letter; all other letters default to lowercase. - `"words"`: The first letter of each word defaults to a capital letter; all other letters default to lowercase. - `"characters"`: All letters default to uppercase.
+          * @webnative
+         */
+        "autoCapitalize"?: AutoCapitalize;
+        /**
+          * Indicates whether the value of the input can be automatically completed by the browser.
+          * @webnative
+         */
+        "autoComplete"?: AutoComplete;
+        /**
+          * Specify whether the input should have focus when the page loads.
+          * @webnative
+         */
+        "autoFocus"?: boolean;
+        /**
+          * Prevents the input from being interacted with: it cannot be pressed or focused.
+          * @webnative
+         */
+        "disabled"?: boolean;
+        /**
+          * What action label (or icon) to present for the enter key on virtual keyboards. Possible values:  - `"done"`: Typically meaning there is nothing more to input and the input method editor (IME) will be closed. - `"enter"`:	Typically inserting a new line. - `"go"`: 	Typically meaning to take the user to the target of the text they typed. - `"next"`: 	Typically taking the user to the next field that will accept text. - `"previous"`: Typically taking the user to the previous field that will accept text. - `"search"`: Typically taking the user to the results of searching for the text they have typed. - `"send"`: Typically delivering the text to its target.
+          * @webnative
+         */
+        "enterkeyhint"?: EnterKeyHint;
+        /**
+          * The [`<form>`](https://developer.mozilla.org/docs/Web/HTML/Element/form) element to associate the input with (its form owner).  The value of this attribute must be the id of a `<form>` in the same document. If this attribute is not set, the `<qds-input>` is associated with its ancestor `<form>` element, if any.  This attribute lets you associate `<qds-input>` elements to `<form>`s anywhere in the document, not just inside a `<form>`. It can also override an ancestor `<form>` element.
+          * @webnative
+         */
+        "form"?: string;
+        /**
+          * Provide a hint to browsers as to the type of virtual keyboard configuration to use when editing this element or its contents.
+          * @webnative
+         */
+        "inputmode"?: InputMode;
+        /**
+          * Defines if the input is in an invalid state. Validity is determined by attributes such as `type`, `pattern`, `min`, `max`, `required`, `step`, `minlength`, and `maxlength` using [constraint validation](https://developer.mozilla.org/docs/Web/Guide/HTML/Constraint_validation).
+         */
+        "invalid"?: boolean;
+        /**
+          * Defines the greatest value in the range of permitted values. If the `value` entered into the input exceeds this, the input fails [constraint validation](https://developer.mozilla.org/docs/Web/Guide/HTML/Constraint_validation). Only valid for `date`, `datetime-local`, `month`, `time`, and `week` inputs.  If this value isn't a valid number, then the input has no maximum value.
+          * @webnative
+         */
+        "max"?: number | string;
+        /**
+          * The maximum number of characters (as UTF-16 code units) the user can enter into the input. This must be an non-negative integer value. If no `maxlength` is specified, or an invalid value is specified, the input has no maximum length. Only valid for `email`, `password`, `search`, `tel`, `text`, and `url` inputs.  The input will fail [constraint validation](https://developer.mozilla.org/docs/Web/Guide/HTML/Constraint_validation) if the length of the text entered into the field is greater than `maxlength` UTF-16 code units long. By default, browsers prevent users from entering more characters than allowed by the `maxlength` attribute. See [Client-side validation](https://developer.mozilla.org/docs/Web/HTML/Element/input#client-side_validation) for more information.
+          * @webnative
+         */
+        "maxLength"?: number;
+        /**
+          * Defines the most negative value in the range of permitted values. If the `value` entered into the input is less than this, the input fails [constraint validation](https://developer.mozilla.org/docs/Web/Guide/HTML/Constraint_validation). Only valid for `date`, `datetime-local`, `month`, `time`, and `week` inputs.  This value must be less than or equal to the value of the `max` attribute. If this value isn't a valid number, then the input has no minimum value.
+          * @webnative
+         */
+        "min"?: number | string;
+        /**
+          * The minimum number of characters (as UTF-16 code units) the user can enter into the input. This must be an non-negative integer value smaller than or equal to the value specified by `maxlength`. If no `minlength` is specified, or an invalid value is specified, the input has no minimum length. Only valid for `email`, `password`, `search`, `tel`, `text`, and `url` inputs.  The input will fail [constraint validation](https://developer.mozilla.org/docs/Web/Guide/HTML/Constraint_validation) if the length of the text entered into the field is fewer than `minlength` UTF-16 code units long, preventing form submission. See [Client-side validation](https://developer.mozilla.org/docs/Web/HTML/Element/input#client-side_validation) for more information.
+          * @webnative
+         */
+        "minLength"?: number;
+        /**
+          * Specifies if multiple comma-separated email addresses can be entered. Only valid for `email` inputs.
+          * @webnative
+         */
+        "multiple"?: boolean;
+        /**
+          * The name of the control, which is submitted with the form data. An incrementing input ID is used by default.
+          * @webnative
+         */
+        "name": string;
+        /**
+          * Defines a regular expression that the input's `value` must match in order for the value to pass [constraint validation](https://developer.mozilla.org/docs/Web/Guide/HTML/Constraint_validation). It must be a valid JavaScript regular expression, as used by the [`RegExp`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/RegExp) type, and as documented in MDN's [guide on regular expressions](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Regular_Expressions); the `'u'` flag is specified when compiling the regular expression, so that the pattern is treated as a sequence of Unicode code points, instead of as ASCII. No forward slashes should be specified around the pattern text. Only valid for `email`, `password`, `search`, `tel`, `text`, and `url` inputs.  If the `pattern` is invalid, no regular expression is applied and this property is ignored. If the pattern is valid and a non-empty value does not match the pattern, constraint validation will prevent form submission.
+          * @webnative
+         */
+        "pattern"?: string;
+        /**
+          * Text that appears in the input when it has no value set. Only valid for `email`, `number`, `password`, `search`, `tel`, `text`, and `url` inputs.
+          * @webnative
+         */
+        "placeholder"?: string;
+        /**
+          * The value of the input cannot be edited. Not valid for `color` inputs.
+          * @webnative
+         */
+        "readOnly"?: boolean;
+        /**
+          * Returns true if the element's value passes validity checks; otherwise, returns false, fires an invalid event at the element, and (if the event isn't canceled) reports the problem to the user.
+         */
+        "reportValidity": () => Promise<boolean>;
+        /**
+          * A value must be specified for the input before the owning form can be submitted. Not valid for `color` inputs.  See [Client-side validation](https://developer.mozilla.org/docs/Web/HTML/Element/input#client-side_validation) and the [HTML attribute: `required`](https://developer.mozilla.org/docs/Web/HTML/Attributes/required) for more information.
+          * @webnative
+         */
+        "required"?: boolean;
+        /**
+          * Selects the entire content of the `<qds-input>` element if the element's content is selectable.
+         */
+        "select": () => Promise<void>;
+        /**
+          * Sets a custom validity message for the input. If this message is not the empty string, then the element is considered invalid.
+         */
+        "setCustomValidity": (message: string) => Promise<void>;
+        /**
+          * 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.
+         */
+        "setRangeText": (replacement: string, start: number, end: number, selectionMode?: SelectionMode) => Promise<void>;
+        /**
+          * 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.
+         */
+        "setSelectionRange": (start: number | null, end: number | null, direction?: SelectDirection) => Promise<void>;
+        /**
+          * The input's size.  > **_NOTE:_** The native [`size` HTML attribute](https://developer.mozilla.org/docs/Web/HTML/Attributes/size) is not supported. CSS `width` should be used instead if this functionality is needed.
+         */
+        "size": InputSize;
+        /**
+          * Defines whether the input may be checked for spelling errors.
+          * @webnative
+         */
+        "spellCheck"?: boolean;
+        /**
+          * Specifies the granularity that the `value` must adhere to. Only valid for `date`, `datetime-local`, `month`, `number`, `time`, and `week` inputs.  The value must be a positive number—integer or float—or the special value `any`, which means no stepping is implied, and any value is allowed (barring other constraints, such as `min` and `max`).  If `any` is not explicitly set, valid values for the `number` are the basis for stepping — the `min` value and increments of the step value, up to the `max` value, if specified.
+          * @webnative
+         */
+        "step"?: number | 'any';
+        /**
+          * Decrements the `value` by (`step` * n), where n defaults to 1 if not specified.
+          * @param n Amount to decrement the value by.
+         */
+        "stepDown": (n?: number) => Promise<void>;
+        /**
+          * Increments the `value` by (`step` * n), where n defaults to 1 if not specified.
+          * @param n Amount to increment the value by.
+         */
+        "stepUp": (n?: number) => Promise<void>;
+        /**
+          * The type of input to render:  - `"date"`: An input for entering a date (year, month, and day, with no time). Opens a date picker or numeric wheels for year, month, day when active in supporting browsers. - `"datetime-local"`: An input for entering a date and time, with no time zone. Opens a date picker or numeric wheels for date and time components when active in supporting browsers. - `"email"`: An input for editing an email address. Looks like a `"text"` input, but has validation parameters and relevant keyboard in supporting browsers and devices with dynamic keyboards. - `"month"`: An input for entering a month and year, with no time zone. - `"number"`: An input for entering a number. Displays a spinner and adds default validation when supported. Displays a numeric keypad in some devices with dynamic keypads. - `"password"`: A single-line text input whose value is obscured. Will alert user if site is not secure. - `"search"`: A single-line text input for entering search strings. Line-breaks are automatically removed from the input value. May include a delete icon in supporting browsers that can be used to clear the input. Displays a search icon instead of enter key on some devices with dynamic keypads. - `"tel"`: An input for entering a telephone number. Displays a telephone keypad in some devices with dynamic keypads. - `"text"`: A single-line text input. Line-breaks are automatically removed from the input value. - `"time"`: An input for entering a time value with no time zone. - `"url"`: An input for entering a URL. Looks like a `"text"` input, but has validation parameters and relevant keyboard in supporting browsers and devices with dynamic keyboards. - `"week"`: An input for entering a date consisting of a week-year number and a week number with no time zone.
+          * @webnative
+         */
+        "type"?: InputType;
+        /**
+          * The value of the input.
+          * @webnative
+         */
+        "value"?: InputValue;
+    }
+    /**
+     * `<qds-label>` elements represent a caption for an item in a user interface.
+     * @see https://quartz.se.com/build/components/label
+     */
+    interface QdsLabel {
+        /**
+          * Adds vertical margin to the label for alignment.  This is useful when creating inline layouts so that the first lines have the correct vertical centering.
+         */
+        "inline": boolean;
+        /**
+          * Specify the labelled item as required by appending a red asterisk (*).
+         */
+        "required": boolean;
+        /**
+          * The label's size.
+         */
+        "size": LabelSize;
+        /**
+          * The label's text.
+         */
+        "text"?: string;
+    }
+    /**
+     * `<qds-radio>` elements are rendered as circles that are filled when
+     * selected. They are generally used in **radio groups** — collections of radio
+     * buttons describing a set of related options.
+     * Only one radio button in a given radio group can be selected at the same
+     * time.
+     * @see https://quartz.se.com/build/components/radio
+     */
+    interface QdsRadio {
+        /**
+          * Sets the radio button's state.
+          * @webnative
+         */
+        "checked"?: boolean;
+        /**
+          * Prevents the radio button from being interacted with: it cannot be pressed or focused.
+          * @webnative
+         */
+        "disabled"?: boolean;
+        /**
+          * The [`<form>`](https://developer.mozilla.org/docs/Web/HTML/Element/form) element to associate the radio button with (its form owner).  The value of this property must be the id of a `<form>` in the same document. If this property is not set, the `<qds-radio>` is associated with its ancestor `<form>` element, if any.  This property lets you associate `<qds-radio>` elements to `<form>`s anywhere in the document, not just inside a `<form>`. It can also override an ancestor `<form>` element.
+          * @webnative
+         */
+        "form"?: string;
+        /**
+          * Adds vertical margin to the radio for alignment.  This is useful when creating inline layouts so that the first lines have the correct vertical centering.
+         */
+        "inline": boolean;
+        /**
+          * Specify the radio group this radio button belongs to.  Once a radio group is established, selecting any radio button in that group automatically deselects any currently-selected radio button in the same group.
+          * @webnative
+         */
+        "name"?: string;
+        /**
+          * Specify the group the radio button belongs to as required.  If any radio button in a same-named group of radio buttons has the `required` attribute, a radio button in that group must be checked, although it doesn't have to be the one with the attribute applied.
+          * @webnative
+         */
+        "required"?: boolean;
+        /**
+          * The radio button's size.
+         */
+        "size": RadioSize;
+        /**
+          * The radio button's text.
+         */
+        "text"?: string;
+        /**
+          * The value of the radio button, submitted as a name/value pair with form data.
+          * @webnative
+         */
+        "value"?: RadioValue;
+    }
+    /**
+     * @see https://quartz.se.com/build/components/switch
+     */
+    interface QdsSwitch {
+        /**
+          * Specify whether the switch should have focus when the page loads.
+          * @webnative
+         */
+        "autoFocus"?: boolean;
+        /**
+          * Sets the switch's state.
+          * @webnative
+         */
+        "checked"?: boolean;
+        /**
+          * Prevents the switch from being interacted with: it cannot be pressed or focused.
+          * @webnative
+         */
+        "disabled"?: boolean;
+        /**
+          * The [`<form>`](https://developer.mozilla.org/docs/Web/HTML/Element/form) element to associate the switch with (its form owner).  The value of this property must be the id of a `<form>` in the same document. If this property is not set, the `<qds-switch>` is associated with its ancestor `<form>` element, if any.  This property lets you associate `<qds-switch>` elements to `<form>`s anywhere in the document, not just inside a `<form>`. It can also override an ancestor `<form>` element.
+          * @webnative
+         */
+        "form"?: string;
+        /**
+          * The name of a registered checked icon library.
+         */
+        "iconCheckedLibrary": string;
+        /**
+          * The name of the checked icon to render.  Available names depend on the icon library being used.
+         */
+        "iconCheckedName"?: string;
+        /**
+          * The name of a registered unchecked icon library.
+         */
+        "iconUncheckedLibrary": string;
+        /**
+          * The name of the unchecked icon to render.  Available names depend on the icon library being used.
+         */
+        "iconUncheckedName"?: string;
+        /**
+          * Adds vertical margin to the switch for alignment.  This is useful when creating inline layouts so that the first lines have the correct vertical centering.
+         */
+        "inline": boolean;
+        /**
+          * The name of the switch, which is submitted with the form data. An incrementing ID is used by default.
+          * @webnative
+         */
+        "name": string;
+        /**
+          * The switches's size.
+         */
+        "size": SwitchSize;
+        /**
+          * The switch's checked text.
+         */
+        "textChecked"?: string;
+        /**
+          * The switch's unchecked text.
+         */
+        "textUnchecked"?: string;
+        /**
+          * The value of the switch, submitted as a name/value pair with form data.
+          * @webnative
+         */
+        "value"?: SwitchValue;
+    }
+    /**
+     * @see https://quartz.se.com/build/components/title
+     */
+    interface QdsTitle {
+        /**
+          * The name of a registered icon library.
+         */
+        "iconLibrary": string;
+        /**
+          * The name of the icon to render.  Available names depend on the icon library being used.
+         */
+        "iconName"?: string;
+        /**
+          * Text to display for the kicker.
+         */
+        "kicker"?: string;
+        "layer": Layer;
+        "level"?: Level;
+        /**
+          * Text to display for the subtitle.
+         */
+        "subtitle"?: string;
+        /**
+          * HTML tag to use to render the title.
+         */
+        "tag": Tag;
+    }
+    /**
+     * @experimental 
+     * @see https://quartz.se.com/build/components/tooltip
+     */
+    interface QdsTooltip {
+        /**
+          * Options to pass to Floating UI's [`autoUpdate()` function](https://floating-ui.com/docs/autoUpdate).
+          * @see https://floating-ui.com/docs/autoupdate#options
+         */
+        "autoUpdateOptions"?: AutoUpdateOptions;
+        /**
+          * Close the tooltip.
+         */
+        "close": () => Promise<void>;
+        /**
+          * Prevents the tooltip from being shown by user interaction. The tooltip can still be displayed by calling the `show()` method.
+         */
+        "disabled": boolean;
+        /**
+          * Options to pass to Floating UI's [`flip` middleware](https://floating-ui.com/docs/flip).  The [`crossAxis` option](https://floating-ui.com/docs/flip#crossaxis) is set to the value of the `noShift` property by default for interoperability with the [`shift` middleware](https://floating-ui.com/docs/shift).
+          * @see https://floating-ui.com/docs/flip#options
+         */
+        "flipOptions"?: Partial<
+    DetectOverflowOptions & FlipOptions
+  >;
+        /**
+          * Disable Floating UI's [`flip` middleware](https://floating-ui.com/docs/flip).
+         */
+        "noFlip": boolean;
+        /**
+          * Disable Floating UI's [`shift` middleware](https://floating-ui.com/docs/shift).
+         */
+        "noShift": boolean;
+        /**
+          * Options to pass to Floating UI's [`offset` middleware](https://floating-ui.com/docs/offset).  The [`mainAxis` option](https://floating-ui.com/docs/offset#mainaxis) is not supported.
+          * @see https://floating-ui.com/docs/offset#options
+         */
+        "offsetOptions"?: OffsetOptions;
+        /**
+          * Where to place the tooltip relative to the `target`.
+          * @see https://floating-ui.com/docs/tutorial#placements
+         */
+        "placement": Placement;
+        /**
+          * Options to pass to Floating UI's [`shift` middleware](https://floating-ui.com/docs/shift).
+          * @see https://floating-ui.com/docs/shift#options
+         */
+        "shiftOptions"?: Partial<
+    DetectOverflowOptions & ShiftOptions
+  >;
+        /**
+          * Show the tooltip.
+         */
+        "show": () => Promise<void>;
+        /**
+          * The CSS position strategy to use.
+          * @see https://floating-ui.com/docs/computeposition#strategy
+         */
+        "strategy"?: Strategy;
+        /**
+          * The trigger element that will trigger the tooltip. The target specified can be any of the follow:  - A CSS selector string - A reference to an [`Element`](https://developer.mozilla.org/docs/Web/API/Element) or [Virtual Element](https://floating-ui.com/docs/virtual-elements) - A function returning a reference to an [`Element`](https://developer.mozilla.org/docs/Web/API/Element), [Virtual Element](https://floating-ui.com/docs/virtual-elements), or a CSS selector string
+         */
+        "target": | ReferenceElement
+    | string
+    | (() => ReferenceElement | string);
+        /**
+          * Update the tooltip's arrow.  This method should typically be called when the Quartz platform was changed.
+         */
+        "updateArrow": () => Promise<void>;
+    }
+}
+export interface QdsButtonCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLQdsButtonElement;
+}
+export interface QdsCheckboxCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLQdsCheckboxElement;
+}
+export interface QdsDropdownCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLQdsDropdownElement;
+}
+export interface QdsIconCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLQdsIconElement;
+}
+export interface QdsInlineLinkCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLQdsInlineLinkElement;
+}
+export interface QdsInputCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLQdsInputElement;
+}
+export interface QdsRadioCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLQdsRadioElement;
+}
+export interface QdsSwitchCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLQdsSwitchElement;
+}
+export interface QdsTooltipCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLQdsTooltipElement;
+}
+declare global {
+    /**
+     * The `<qds-button>` element is an interactive element activated by a user
+     * with a mouse, keyboard, finger, voice command, or other assistive technology.
+     * Once activated, it then performs a programmable action, such as submitting a
+     * [form](https://developer.mozilla.org/docs/Learn/Forms)
+     * or opening a dialog.
+     * @see https://quartz.se.com/build/components/button
+     */
+    interface HTMLQdsButtonElement extends Components.QdsButton, HTMLStencilElement {
+    }
+    var HTMLQdsButtonElement: {
+        prototype: HTMLQdsButtonElement;
+        new (): HTMLQdsButtonElement;
+    };
+    /**
+     * `<qds-checkbox>` elements are rendered as boxes that are checked (ticked)
+     * when activated, like you might see in an official government paper form. A
+     * checkbox allows you to select single values for submission in a form (or not).
+     * @see https://quartz.se.com/build/components/checkbox
+     */
+    interface HTMLQdsCheckboxElement extends Components.QdsCheckbox, HTMLStencilElement {
+    }
+    var HTMLQdsCheckboxElement: {
+        prototype: HTMLQdsCheckboxElement;
+        new (): HTMLQdsCheckboxElement;
+    };
+    /**
+     * @experimental 
+     * @see https://quartz.se.com/build/components/dropdown
+     */
+    interface HTMLQdsDropdownElement extends Components.QdsDropdown, HTMLStencilElement {
+    }
+    var HTMLQdsDropdownElement: {
+        prototype: HTMLQdsDropdownElement;
+        new (): HTMLQdsDropdownElement;
+    };
+    /**
+     * @experimental 
+     */
+    interface HTMLQdsIconElement extends Components.QdsIcon, HTMLStencilElement {
+    }
+    var HTMLQdsIconElement: {
+        prototype: HTMLQdsIconElement;
+        new (): HTMLQdsIconElement;
+    };
+    /**
+     * `<qds-inline-link>` elements, with their `href` property, create a hyperlink
+     * to web pages, files, email addresses, locations in the same page, or
+     * anything else a URL can address.
+     * Content within each `<qds-inline-link>` *should* indicate the inline link's
+     * destination. If the `href` property is present, pressing the enter key while
+     * focused on the `<qds-inline-link>` element will activate it.
+     * @see https://quartz.se.com/build/components/inline-link
+     */
+    interface HTMLQdsInlineLinkElement extends Components.QdsInlineLink, HTMLStencilElement {
+    }
+    var HTMLQdsInlineLinkElement: {
+        prototype: HTMLQdsInlineLinkElement;
+        new (): HTMLQdsInlineLinkElement;
+    };
+    /**
+     * The `<qds-input>` element is used to create interactive controls for
+     * web-based forms in order to accept data from the user; a wide variety of
+     * types of input data and control widgets are available, depending on the
+     * device and
+     * [user agent](https://developer.mozilla.org/docs/Glossary/User_agent).
+     * @see https://quartz.se.com/build/components/input
+     */
+    interface HTMLQdsInputElement extends Components.QdsInput, HTMLStencilElement {
+    }
+    var HTMLQdsInputElement: {
+        prototype: HTMLQdsInputElement;
+        new (): HTMLQdsInputElement;
+    };
+    /**
+     * `<qds-label>` elements represent a caption for an item in a user interface.
+     * @see https://quartz.se.com/build/components/label
+     */
+    interface HTMLQdsLabelElement extends Components.QdsLabel, HTMLStencilElement {
+    }
+    var HTMLQdsLabelElement: {
+        prototype: HTMLQdsLabelElement;
+        new (): HTMLQdsLabelElement;
+    };
+    /**
+     * `<qds-radio>` elements are rendered as circles that are filled when
+     * selected. They are generally used in **radio groups** — collections of radio
+     * buttons describing a set of related options.
+     * Only one radio button in a given radio group can be selected at the same
+     * time.
+     * @see https://quartz.se.com/build/components/radio
+     */
+    interface HTMLQdsRadioElement extends Components.QdsRadio, HTMLStencilElement {
+    }
+    var HTMLQdsRadioElement: {
+        prototype: HTMLQdsRadioElement;
+        new (): HTMLQdsRadioElement;
+    };
+    /**
+     * @see https://quartz.se.com/build/components/switch
+     */
+    interface HTMLQdsSwitchElement extends Components.QdsSwitch, HTMLStencilElement {
+    }
+    var HTMLQdsSwitchElement: {
+        prototype: HTMLQdsSwitchElement;
+        new (): HTMLQdsSwitchElement;
+    };
+    /**
+     * @see https://quartz.se.com/build/components/title
+     */
+    interface HTMLQdsTitleElement extends Components.QdsTitle, HTMLStencilElement {
+    }
+    var HTMLQdsTitleElement: {
+        prototype: HTMLQdsTitleElement;
+        new (): HTMLQdsTitleElement;
+    };
+    /**
+     * @experimental 
+     * @see https://quartz.se.com/build/components/tooltip
+     */
+    interface HTMLQdsTooltipElement extends Components.QdsTooltip, HTMLStencilElement {
+    }
+    var HTMLQdsTooltipElement: {
+        prototype: HTMLQdsTooltipElement;
+        new (): HTMLQdsTooltipElement;
+    };
+    interface HTMLElementTagNameMap {
+        "qds-button": HTMLQdsButtonElement;
+        "qds-checkbox": HTMLQdsCheckboxElement;
+        "qds-dropdown": HTMLQdsDropdownElement;
+        "qds-icon": HTMLQdsIconElement;
+        "qds-inline-link": HTMLQdsInlineLinkElement;
+        "qds-input": HTMLQdsInputElement;
+        "qds-label": HTMLQdsLabelElement;
+        "qds-radio": HTMLQdsRadioElement;
+        "qds-switch": HTMLQdsSwitchElement;
+        "qds-title": HTMLQdsTitleElement;
+        "qds-tooltip": HTMLQdsTooltipElement;
+    }
+}
+declare namespace LocalJSX {
+    /**
+     * The `<qds-button>` element is an interactive element activated by a user
+     * with a mouse, keyboard, finger, voice command, or other assistive technology.
+     * Once activated, it then performs a programmable action, such as submitting a
+     * [form](https://developer.mozilla.org/docs/Learn/Forms)
+     * or opening a dialog.
+     * @see https://quartz.se.com/build/components/button
+     */
+    interface QdsButton {
+        /**
+          * Prevents the button from being interacted with: it cannot be pressed or focused.
+          * @webnative
+         */
+        "disabled"?: boolean;
+        /**
+          * Tells the browser to download the linked file as this filename. Only used when `href` is set.
+          * @webnative
+         */
+        "download"?: string;
+        /**
+          * The [`<form>`](https://developer.mozilla.org/docs/Web/HTML/Element/form) element to associate the button with (its form owner).  The value of this attribute must be the id of a `<form>` in the same document. If this attribute is not set, the `<button>` is associated with its ancestor `<form>` element, if any.  This attribute lets you associate `<button>` elements to `<form>`s anywhere in the document, not just inside a `<form>`. It can also override an ancestor `<form>` element.
+          * @webnative
+         */
+        "form"?: string;
+        /**
+          * The URL that processes the information submitted by the button. Overrides the [`action`](https://developer.mozilla.org/docs/Web/HTML/Element/button#attr-formaction) attribute of the button's form owner. Does nothing if there is no form owner.
+          * @webnative
+         */
+        "formAction"?: string;
+        /**
+          * If the button is a submit button (it's inside/associated with a `<form>` and doesn't have `type="button"`), this attribute specifies the [HTTP method](https://developer.mozilla.org/docs/Web/HTTP/Methods) used to submit the form. Possible values:  - `get`: The form data are appended to the form's action URL, with a ? as a separator, and the resulting URL is sent to the server. Use this method when the form has no side effects, like search forms. - `post`: The data from the form are included in the body of the HTTP request when sent to the server. Use when the form contains information that shouldn't be public, like login credentials.  If specified, this attribute overrides the method attribute of the button's form owner.
+          * @webnative
+         */
+        "formMethod"?: FormMethod;
+        /**
+          * If the button is a submit button, this attribute specifies that the form is not to be [validated](https://developer.mozilla.org/docs/Learn/Forms/Form_validation) when it is submitted. If this attribute is specified, it overrides the [`novalidate`](https://developer.mozilla.org/docs/Web/HTML/Element/form#attr-novalidate) attribute of the button's form owner.
+          * @webnative
+         */
+        "formNoValidate"?: boolean;
+        /**
+          * If the button is a submit button, this attribute is an author-defined name or standardized, underscore-prefixed keyword indicating where to display the response from submitting the form. This is the `name` of, or keyword for, a browsing context (a tab, window, or [`<iframe>`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe)). If this attribute is specified, it overrides the [`target`](https://developer.mozilla.org/docs/Web/HTML/Element/form#attr-target) attribute of the button's form owner. The following keywords have special meanings:  - `_blank`: Load the response into a new unnamed browsing context — usually a new tab or window, depending on the user's browser settings. - `_parent`: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as `_self`. - `_self`: Load the response into the same browsing context as the current one. - `_top`: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as `_self`.
+          * @webnative
+         */
+        "formTarget"?: LiteralUnion<ButtonTarget, string>;
+        /**
+          * When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.
+          * @webnative
+         */
+        "href"?: string;
+        /**
+          * The name of a registered icon library.
+         */
+        "iconLibrary"?: string;
+        /**
+          * The name of the icon to render.  Available names depend on the icon library being used.
+         */
+        "iconName"?: string;
+        /**
+          * The button's importance.
+         */
+        "importance"?: Importance;
+        /**
+          * The name of the button, submitted as a pair with the button's `value` as part of the form data, when that button is used to submit the form. Ignored when `href` is set.
+          * @webnative
+         */
+        "name"?: string;
+        /**
+          * Emitted when the button loses focus.
+         */
+        "onQdsBlur"?: (event: QdsButtonCustomEvent<QdsFocusEventDetail>) => void;
+        /**
+          * Emitted when the button gains focus.
+         */
+        "onQdsFocus"?: (event: QdsButtonCustomEvent<QdsFocusEventDetail>) => void;
+        /**
+          * The button's size.
+         */
+        "size"?: ButtonSize;
+        /**
+          * Where to display the linked URL, as the name for a browsing context (a tab, window, or [`<iframe>`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe). The following keywords have special meanings for where to load the URL:  - `_blank`: usually a new tab, but users can configure browsers to open a new   window instead. - `_parent`: the parent browsing context of the current one. If no parent,   behaves as `_self`. - `_self`: the current browsing context. - `_top`: the topmost browsing context (the "highest" context that's an   ancestor of the current one). If no ancestors, behaves as `_self`.
+          * @webnative
+         */
+        "target"?: LiteralUnion<ButtonTarget, string>;
+        /**
+          * The button's text.
+         */
+        "text"?: string;
+        /**
+          * The type of button.  `button`: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.  `submit`: The button submits the form data to the server. This is the default if the attribute is not specified for buttons associated with a `<form>`, or if the attribute is an empty or invalid value.  `reset`: The button resets all the controls to their initial values.
+          * @webnative
+         */
+        "type"?: ButtonType;
+        /**
+          * Defines the value associated with the button's `name` when it's submitted with the form data. This value is passed to the server in params when the form is submitted using this button. Ignored when `href` is set.
+          * @webnative
+         */
+        "value"?: string;
+    }
+    /**
+     * `<qds-checkbox>` elements are rendered as boxes that are checked (ticked)
+     * when activated, like you might see in an official government paper form. A
+     * checkbox allows you to select single values for submission in a form (or not).
+     * @see https://quartz.se.com/build/components/checkbox
+     */
+    interface QdsCheckbox {
+        /**
+          * Specify whether the checkbox should have focus when the page loads.
+          * @webnative
+         */
+        "autoFocus"?: boolean;
+        /**
+          * Sets the checkbox's state.
+          * @webnative
+         */
+        "checked"?: boolean;
+        /**
+          * Prevents the checkbox from being interacted with: it cannot be pressed or focused.
+          * @webnative
+         */
+        "disabled"?: boolean;
+        /**
+          * The [`<form>`](https://developer.mozilla.org/docs/Web/HTML/Element/form) element to associate the checkbox with (its form owner).  The value of this property must be the id of a `<form>` in the same document. If this property is not set, the `<qds-checkbox>` is associated with its ancestor `<form>` element, if any.  This property lets you associate `<qds-checkbox>` elements to `<form>`s anywhere in the document, not just inside a `<form>`. It can also override an ancestor `<form>` element.
+          * @webnative
+         */
+        "form"?: string;
+        /**
+          * Sets the checkbox to an indeterminate state. This is usually applied to checkboxes that represents a "select all/none" behavior when associated checkboxes have a mix of checked and unchecked states.
+          * @webnative
+         */
+        "indeterminate"?: boolean;
+        /**
+          * Adds vertical margin to the checkbox for alignment.  This is useful when creating inline layouts so that the first lines have the correct vertical centering.
+         */
+        "inline"?: boolean;
+        /**
+          * The name of the checkbox, which is submitted with the form data. An incrementing ID is used by default.
+          * @webnative
+         */
+        "name"?: string;
+        /**
+          * Emitted when the checkbox loses focus.
+         */
+        "onQdsBlur"?: (event: QdsCheckboxCustomEvent<QdsFocusEventDetail>) => void;
+        /**
+          * Emitted when a change to the checkbox's state is committed by the user.
+         */
+        "onQdsChange"?: (event: QdsCheckboxCustomEvent<void>) => void;
+        /**
+          * Emitted when the checkbox gains focus.
+         */
+        "onQdsFocus"?: (event: QdsCheckboxCustomEvent<QdsFocusEventDetail>) => void;
+        /**
+          * A value must be specified for the checkbox before the owning form can be submitted.  See [Client-side validation](https://developer.mozilla.org/docs/Web/HTML/Element/input#client-side_validation) and the [HTML attribute: `required`](https://developer.mozilla.org/docs/Web/HTML/Attributes/required) for more information.
+          * @webnative
+         */
+        "required"?: boolean;
+        /**
+          * The checkbox's size.
+         */
+        "size"?: CheckboxSize;
+        /**
+          * The checkbox's text.
+         */
+        "text"?: string;
+        /**
+          * The value of the checkbox, submitted as a name/value pair with form data.
+          * @webnative
+         */
+        "value"?: CheckboxValue;
+    }
+    /**
+     * @experimental 
+     * @see https://quartz.se.com/build/components/dropdown
+     */
+    interface QdsDropdown {
+        /**
+          * Options to pass to Floating UI's [`autoUpdate()` function](https://floating-ui.com/docs/autoUpdate).
+          * @see https://floating-ui.com/docs/autoupdate#options
+         */
+        "autoUpdateOptions"?: AutoUpdateOptions;
+        /**
+          * Prevents the dropdown from being shown by user interaction. The dropdown can still be displayed by calling the `show()` method.
+         */
+        "disabled"?: boolean;
+        /**
+          * Options to pass to Floating UI's [`flip` middleware](https://floating-ui.com/docs/flip).  The [`crossAxis` option](https://floating-ui.com/docs/flip#crossaxis) is set to the value of the `noShift` property by default for interoperability with the [`shift` middleware](https://floating-ui.com/docs/shift).
+          * @see https://floating-ui.com/docs/flip#options
+         */
+        "flipOptions"?: Partial<
+    DetectOverflowOptions & FlipOptions
+  >;
+        /**
+          * Disable Floating UI's [`flip` middleware](https://floating-ui.com/docs/flip).
+         */
+        "noFlip"?: boolean;
+        /**
+          * Disable Floating UI's [`shift` middleware](https://floating-ui.com/docs/shift).
+         */
+        "noShift"?: boolean;
+        /**
+          * Options to pass to Floating UI's [`offset` middleware](https://floating-ui.com/docs/offset).  The [`mainAxis` option](https://floating-ui.com/docs/offset#mainaxis) is not supported.
+          * @see https://floating-ui.com/docs/offset#options
+         */
+        "offsetOptions"?: OffsetOptions;
+        /**
+          * Emitted when the user instructs the browser that they wish to dismiss the current open dropdown by pressing the `Esc` key.  When a dropdown is dismissed with the `Esc` key, both the `qdsCancel` and `qdsClose` events are emitted.
+         */
+        "onQdsCancel"?: (event: QdsDropdownCustomEvent<void>) => void;
+        /**
+          * Emitted when the dropdown is closed.
+         */
+        "onQdsClose"?: (event: QdsDropdownCustomEvent<void>) => void;
+        /**
+          * Where to place the dropdown relative to the `target`.
+          * @see https://floating-ui.com/docs/tutorial#placements
+         */
+        "placement"?: Placement;
+        /**
+          * Options to pass to Floating UI's [`shift` middleware](https://floating-ui.com/docs/shift).
+          * @see https://floating-ui.com/docs/shift#options
+         */
+        "shiftOptions"?: Partial<
+    DetectOverflowOptions & ShiftOptions
+  >;
+        /**
+          * The CSS position strategy to use.
+          * @see https://floating-ui.com/docs/computeposition#strategy
+         */
+        "strategy"?: Strategy;
+        /**
+          * The trigger element that will trigger the dropdown. The target specified can be any of the follow:  - A CSS selector string - A reference to an [`Element`](https://developer.mozilla.org/docs/Web/API/Element) or [Virtual Element](https://floating-ui.com/docs/virtual-elements) - A function returning a reference to an [`Element`](https://developer.mozilla.org/docs/Web/API/Element), [Virtual Element](https://floating-ui.com/docs/virtual-elements), or a CSS selector string
+         */
+        "target": | ReferenceElement
+    | string
+    | (() => ReferenceElement | string);
+    }
+    /**
+     * @experimental 
+     */
+    interface QdsIcon {
+        /**
+          * The name of a registered icon library.
+         */
+        "library"?: string;
+        /**
+          * The name of the icon to render.  Available names depend on the icon library being used.
+         */
+        "name": string;
+        /**
+          * Emitted when the icon fails to load due to an error.
+         */
+        "onQdsError"?: (event: QdsIconCustomEvent<void>) => void;
+        /**
+          * Emitted when the icon has loaded.
+         */
+        "onQdsLoad"?: (event: QdsIconCustomEvent<void>) => void;
+    }
+    /**
+     * `<qds-inline-link>` elements, with their `href` property, create a hyperlink
+     * to web pages, files, email addresses, locations in the same page, or
+     * anything else a URL can address.
+     * Content within each `<qds-inline-link>` *should* indicate the inline link's
+     * destination. If the `href` property is present, pressing the enter key while
+     * focused on the `<qds-inline-link>` element will activate it.
+     * @see https://quartz.se.com/build/components/inline-link
+     */
+    interface QdsInlineLink {
+        /**
+          * Prevents the inline link from being interacted with: it cannot be pressed or focused.
+         */
+        "disabled"?: boolean;
+        /**
+          * Causes the browser to treat the linked URL as a download. Can be used with or without a `filename` value:  - Without a value, the browser will suggest a filename/extension, generated from various sources:    - The   [`Content-Disposition`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Disposition)   HTTP header   - The final segment in the URL   [path](https://developer.mozilla.org/docs/Web/API/URL/pathname)   - The   [media type](https://developer.mozilla.org/docs/Glossary/MIME_type)   (from the   [`Content-Type`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Type)   header, the start of a   [`data:` URL](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URLs),   or   [`Blob.type`](https://developer.mozilla.org/docs/Web/API/Blob/type)   for a   [`blob:` URL](https://developer.mozilla.org/docs/Web/API/URL/createObjectURL)) - `filename`: defining a value suggests it as the filename. `/` and `\` characters are converted to underscores (`_`). Filesystems may forbid other characters in filenames, so browsers will adjust the suggested name if necessary.
+          * @webnative
+         */
+        "download"?: boolean | string;
+        /**
+          * The URL that the inline link points to. Inline links are not restricted to HTTP-based URLs — they can use any URL scheme supported by browsers:  - Sections of a page with document fragments - Specific text portions with [text fragments](https://developer.mozilla.org/docs/Web/Text_fragments) - Pieces of media files with media fragments - Telephone numbers with `tel:` URLs - Email addresses with `mailto:` URLs - While web browsers may not support other URL schemes, websites can with [`registerProtocolHandler()`](https://developer.mozilla.org/docs/Web/API/Navigator/registerProtocolHandler)
+          * @webnative
+         */
+        "href"?: string;
+        /**
+          * Hints at the human language of the linked URL. No built-in functionality. Allowed values are the same as [the global `lang` attribute](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/lang).
+          * @webnative
+         */
+        "hreflang"?: string;
+        /**
+          * Emitted when the inline link loses focus.
+         */
+        "onQdsBlur"?: (event: QdsInlineLinkCustomEvent<QdsFocusEventDetail>) => void;
+        /**
+          * Emitted when the inline link gains focus.
+         */
+        "onQdsFocus"?: (event: QdsInlineLinkCustomEvent<QdsFocusEventDetail>) => void;
+        /**
+          * How much of the [referrer](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer) to send when following the inline link.  - `no-referrer`: The [`Referer`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer) header will not be sent. - `no-referrer-when-downgrade`: The [`Referer`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer) header will not be sent to [origin](https://developer.mozilla.org/docs/Glossary/Origin)s without [TLS](https://developer.mozilla.org/docs/Glossary/TLS) ([HTTPS](https://developer.mozilla.org/docs/Glossary/HTTPS)). - `origin`: The sent referrer will be limited to the origin of the referring page: its [scheme](https://developer.mozilla.org/docs/Learn/Common_questions/What_is_a_URL), [host](https://developer.mozilla.org/docs/Glossary/Host), and [port](https://developer.mozilla.org/docs/Glossary/Port). - `origin-when-cross-origin`: The referrer sent to other origins will be limited to the scheme, the host, and the port. Navigations on the same origin will still include the path. - `same-origin`: A referrer will be sent for [same origin](https://developer.mozilla.org/docs/Glossary/Same-origin_policy), but cross-origin requests will contain no referrer information. - `strict-origin`: Only send the origin of the document as the referrer when the protocol security level stays the same (HTTPS→HTTPS), but don't send it to a less secure destination (HTTPS→HTTP). - `strict-origin-when-cross-origin` (default): Send a full URL when performing a same-origin request, only send the origin when the protocol security level stays the same (HTTPS→HTTPS), and send no header to a less secure destination (HTTPS→HTTP). - `unsafe-url`: The referrer will include the origin and the path (but not the [fragment](https://developer.mozilla.org/docs/Web/API/HTMLAnchorElement/hash), [password](https://developer.mozilla.org/docs/Web/API/HTMLAnchorElement/password), or [username](https://developer.mozilla.org/docs/Web/API/HTMLAnchorElement/username)). **This value is unsafe** because it leaks origins and paths from TLS-protected resources to insecure origins.
+          * @webnative
+         */
+        "referrerPolicy"?: ReferrerPolicy;
+        /**
+          * The relationship of the linked URL as space-separated [link types](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel).  The following list includes some of the most important existing keywords. Every keyword within a space-separated value should be unique within that value.  - [`alternate`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-alternate): Alternate representations of the current document. - [`author`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-author): Author of the current document or article. - [`bookmark`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-bookmark): Permalink for the nearest ancestor section. - [`external`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-external): The referenced document is not part of the same site as the current document. An icon will be rendered next to the text if this value is specified. - [`help`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-help): Link to context-sensitive help. - [`license`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-license): Indicates that the main content of the current document is covered by the copyright license described by the referenced document. - [`me`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/me): Indicates that the current document represents the person who owns the linked content. - [`next`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-next): Indicates that the current document is a part of a series and that the next document in the series is the referenced document. - [`nofollow`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-nofollow): Indicates that the current document's original author or publisher does not endorse the referenced document. - [`noopener`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/noopener): Creates a top-level browsing context that is not an auxiliary browsing context if the hyperlink would create either of those, to begin with (i.e., has an appropriate `target` attribute value). - [`noreferrer`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-noreferrer): No `Referer` header will be included. Additionally, has the same effect as `noopener`. - [`opener`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-opener): Creates an auxiliary browsing context if the hyperlink would otherwise create a top-level browsing context that is not an auxiliary browsing context (i.e., has "`_blank`" as `target` attribute value). - [`prev`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-prev): Indicates that the current document is a part of a series and that the previous document in the series is the referenced document. - [`search`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-search): Gives a link to a resource that can be used to search through the current document and its related pages. - [`tag`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-tag): Gives a tag (identified by the given address) that applies to the current document.
+          * @webnative
+         */
+        "rel"?: string;
+        /**
+          * Where to display the linked URL, as the name for a browsing context (a tab, window, or [`<iframe>`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe). The following keywords have special meanings for where to load the URL:  - `_blank`: usually a new tab, but users can configure browsers to open a new   window instead. - `_parent`: the parent browsing context of the current one. If no parent,   behaves as `_self`. - `_self`: the current browsing context. - `_top`: the topmost browsing context (the "highest" context that's an   ancestor of the current one). If no ancestors, behaves as `_self`.
+          * @webnative
+         */
+        "target"?: LiteralUnion<Target, string>;
+    }
+    /**
+     * The `<qds-input>` element is used to create interactive controls for
+     * web-based forms in order to accept data from the user; a wide variety of
+     * types of input data and control widgets are available, depending on the
+     * device and
+     * [user agent](https://developer.mozilla.org/docs/Glossary/User_agent).
+     * @see https://quartz.se.com/build/components/input
+     */
+    interface QdsInput {
+        /**
+          * Controls whether and how input is automatically capitalized as it is entered/edited by the user. Only valid for `search`, `tel`, and `text` inputs. Possible values:  - `"off"` or `"none"`: No auto-capitalization is applied (all letters default to lowercase). - `"on"` or `"sentences"`: The first letter of each sentence defaults to a capital letter; all other letters default to lowercase. - `"words"`: The first letter of each word defaults to a capital letter; all other letters default to lowercase. - `"characters"`: All letters default to uppercase.
+          * @webnative
+         */
+        "autoCapitalize"?: AutoCapitalize;
+        /**
+          * Indicates whether the value of the input can be automatically completed by the browser.
+          * @webnative
+         */
+        "autoComplete"?: AutoComplete;
+        /**
+          * Specify whether the input should have focus when the page loads.
+          * @webnative
+         */
+        "autoFocus"?: boolean;
+        /**
+          * Prevents the input from being interacted with: it cannot be pressed or focused.
+          * @webnative
+         */
+        "disabled"?: boolean;
+        /**
+          * What action label (or icon) to present for the enter key on virtual keyboards. Possible values:  - `"done"`: Typically meaning there is nothing more to input and the input method editor (IME) will be closed. - `"enter"`:	Typically inserting a new line. - `"go"`: 	Typically meaning to take the user to the target of the text they typed. - `"next"`: 	Typically taking the user to the next field that will accept text. - `"previous"`: Typically taking the user to the previous field that will accept text. - `"search"`: Typically taking the user to the results of searching for the text they have typed. - `"send"`: Typically delivering the text to its target.
+          * @webnative
+         */
+        "enterkeyhint"?: EnterKeyHint;
+        /**
+          * The [`<form>`](https://developer.mozilla.org/docs/Web/HTML/Element/form) element to associate the input with (its form owner).  The value of this attribute must be the id of a `<form>` in the same document. If this attribute is not set, the `<qds-input>` is associated with its ancestor `<form>` element, if any.  This attribute lets you associate `<qds-input>` elements to `<form>`s anywhere in the document, not just inside a `<form>`. It can also override an ancestor `<form>` element.
+          * @webnative
+         */
+        "form"?: string;
+        /**
+          * Provide a hint to browsers as to the type of virtual keyboard configuration to use when editing this element or its contents.
+          * @webnative
+         */
+        "inputmode"?: InputMode;
+        /**
+          * Defines if the input is in an invalid state. Validity is determined by attributes such as `type`, `pattern`, `min`, `max`, `required`, `step`, `minlength`, and `maxlength` using [constraint validation](https://developer.mozilla.org/docs/Web/Guide/HTML/Constraint_validation).
+         */
+        "invalid"?: boolean;
+        /**
+          * Defines the greatest value in the range of permitted values. If the `value` entered into the input exceeds this, the input fails [constraint validation](https://developer.mozilla.org/docs/Web/Guide/HTML/Constraint_validation). Only valid for `date`, `datetime-local`, `month`, `time`, and `week` inputs.  If this value isn't a valid number, then the input has no maximum value.
+          * @webnative
+         */
+        "max"?: number | string;
+        /**
+          * The maximum number of characters (as UTF-16 code units) the user can enter into the input. This must be an non-negative integer value. If no `maxlength` is specified, or an invalid value is specified, the input has no maximum length. Only valid for `email`, `password`, `search`, `tel`, `text`, and `url` inputs.  The input will fail [constraint validation](https://developer.mozilla.org/docs/Web/Guide/HTML/Constraint_validation) if the length of the text entered into the field is greater than `maxlength` UTF-16 code units long. By default, browsers prevent users from entering more characters than allowed by the `maxlength` attribute. See [Client-side validation](https://developer.mozilla.org/docs/Web/HTML/Element/input#client-side_validation) for more information.
+          * @webnative
+         */
+        "maxLength"?: number;
+        /**
+          * Defines the most negative value in the range of permitted values. If the `value` entered into the input is less than this, the input fails [constraint validation](https://developer.mozilla.org/docs/Web/Guide/HTML/Constraint_validation). Only valid for `date`, `datetime-local`, `month`, `time`, and `week` inputs.  This value must be less than or equal to the value of the `max` attribute. If this value isn't a valid number, then the input has no minimum value.
+          * @webnative
+         */
+        "min"?: number | string;
+        /**
+          * The minimum number of characters (as UTF-16 code units) the user can enter into the input. This must be an non-negative integer value smaller than or equal to the value specified by `maxlength`. If no `minlength` is specified, or an invalid value is specified, the input has no minimum length. Only valid for `email`, `password`, `search`, `tel`, `text`, and `url` inputs.  The input will fail [constraint validation](https://developer.mozilla.org/docs/Web/Guide/HTML/Constraint_validation) if the length of the text entered into the field is fewer than `minlength` UTF-16 code units long, preventing form submission. See [Client-side validation](https://developer.mozilla.org/docs/Web/HTML/Element/input#client-side_validation) for more information.
+          * @webnative
+         */
+        "minLength"?: number;
+        /**
+          * Specifies if multiple comma-separated email addresses can be entered. Only valid for `email` inputs.
+          * @webnative
+         */
+        "multiple"?: boolean;
+        /**
+          * The name of the control, which is submitted with the form data. An incrementing input ID is used by default.
+          * @webnative
+         */
+        "name"?: string;
+        /**
+          * Emitted when the input loses focus.
+         */
+        "onQdsBlur"?: (event: QdsInputCustomEvent<QdsFocusEventDetail>) => void;
+        /**
+          * Emitted when an alteration to the input's value is committed by the user.
+         */
+        "onQdsChange"?: (event: QdsInputCustomEvent<void>) => void;
+        /**
+          * Emitted when the input gains focus.
+         */
+        "onQdsFocus"?: (event: QdsInputCustomEvent<QdsFocusEventDetail>) => void;
+        /**
+          * Emitted when the input's value changes.
+         */
+        "onQdsInput"?: (event: QdsInputCustomEvent<QdsInputEventDetail>) => void;
+        /**
+          * Defines a regular expression that the input's `value` must match in order for the value to pass [constraint validation](https://developer.mozilla.org/docs/Web/Guide/HTML/Constraint_validation). It must be a valid JavaScript regular expression, as used by the [`RegExp`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/RegExp) type, and as documented in MDN's [guide on regular expressions](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Regular_Expressions); the `'u'` flag is specified when compiling the regular expression, so that the pattern is treated as a sequence of Unicode code points, instead of as ASCII. No forward slashes should be specified around the pattern text. Only valid for `email`, `password`, `search`, `tel`, `text`, and `url` inputs.  If the `pattern` is invalid, no regular expression is applied and this property is ignored. If the pattern is valid and a non-empty value does not match the pattern, constraint validation will prevent form submission.
+          * @webnative
+         */
+        "pattern"?: string;
+        /**
+          * Text that appears in the input when it has no value set. Only valid for `email`, `number`, `password`, `search`, `tel`, `text`, and `url` inputs.
+          * @webnative
+         */
+        "placeholder"?: string;
+        /**
+          * The value of the input cannot be edited. Not valid for `color` inputs.
+          * @webnative
+         */
+        "readOnly"?: boolean;
+        /**
+          * A value must be specified for the input before the owning form can be submitted. Not valid for `color` inputs.  See [Client-side validation](https://developer.mozilla.org/docs/Web/HTML/Element/input#client-side_validation) and the [HTML attribute: `required`](https://developer.mozilla.org/docs/Web/HTML/Attributes/required) for more information.
+          * @webnative
+         */
+        "required"?: boolean;
+        /**
+          * The input's size.  > **_NOTE:_** The native [`size` HTML attribute](https://developer.mozilla.org/docs/Web/HTML/Attributes/size) is not supported. CSS `width` should be used instead if this functionality is needed.
+         */
+        "size"?: InputSize;
+        /**
+          * Defines whether the input may be checked for spelling errors.
+          * @webnative
+         */
+        "spellCheck"?: boolean;
+        /**
+          * Specifies the granularity that the `value` must adhere to. Only valid for `date`, `datetime-local`, `month`, `number`, `time`, and `week` inputs.  The value must be a positive number—integer or float—or the special value `any`, which means no stepping is implied, and any value is allowed (barring other constraints, such as `min` and `max`).  If `any` is not explicitly set, valid values for the `number` are the basis for stepping — the `min` value and increments of the step value, up to the `max` value, if specified.
+          * @webnative
+         */
+        "step"?: number | 'any';
+        /**
+          * The type of input to render:  - `"date"`: An input for entering a date (year, month, and day, with no time). Opens a date picker or numeric wheels for year, month, day when active in supporting browsers. - `"datetime-local"`: An input for entering a date and time, with no time zone. Opens a date picker or numeric wheels for date and time components when active in supporting browsers. - `"email"`: An input for editing an email address. Looks like a `"text"` input, but has validation parameters and relevant keyboard in supporting browsers and devices with dynamic keyboards. - `"month"`: An input for entering a month and year, with no time zone. - `"number"`: An input for entering a number. Displays a spinner and adds default validation when supported. Displays a numeric keypad in some devices with dynamic keypads. - `"password"`: A single-line text input whose value is obscured. Will alert user if site is not secure. - `"search"`: A single-line text input for entering search strings. Line-breaks are automatically removed from the input value. May include a delete icon in supporting browsers that can be used to clear the input. Displays a search icon instead of enter key on some devices with dynamic keypads. - `"tel"`: An input for entering a telephone number. Displays a telephone keypad in some devices with dynamic keypads. - `"text"`: A single-line text input. Line-breaks are automatically removed from the input value. - `"time"`: An input for entering a time value with no time zone. - `"url"`: An input for entering a URL. Looks like a `"text"` input, but has validation parameters and relevant keyboard in supporting browsers and devices with dynamic keyboards. - `"week"`: An input for entering a date consisting of a week-year number and a week number with no time zone.
+          * @webnative
+         */
+        "type"?: InputType;
+        /**
+          * The value of the input.
+          * @webnative
+         */
+        "value"?: InputValue;
+    }
+    /**
+     * `<qds-label>` elements represent a caption for an item in a user interface.
+     * @see https://quartz.se.com/build/components/label
+     */
+    interface QdsLabel {
+        /**
+          * Adds vertical margin to the label for alignment.  This is useful when creating inline layouts so that the first lines have the correct vertical centering.
+         */
+        "inline"?: boolean;
+        /**
+          * Specify the labelled item as required by appending a red asterisk (*).
+         */
+        "required"?: boolean;
+        /**
+          * The label's size.
+         */
+        "size"?: LabelSize;
+        /**
+          * The label's text.
+         */
+        "text"?: string;
+    }
+    /**
+     * `<qds-radio>` elements are rendered as circles that are filled when
+     * selected. They are generally used in **radio groups** — collections of radio
+     * buttons describing a set of related options.
+     * Only one radio button in a given radio group can be selected at the same
+     * time.
+     * @see https://quartz.se.com/build/components/radio
+     */
+    interface QdsRadio {
+        /**
+          * Sets the radio button's state.
+          * @webnative
+         */
+        "checked"?: boolean;
+        /**
+          * Prevents the radio button from being interacted with: it cannot be pressed or focused.
+          * @webnative
+         */
+        "disabled"?: boolean;
+        /**
+          * The [`<form>`](https://developer.mozilla.org/docs/Web/HTML/Element/form) element to associate the radio button with (its form owner).  The value of this property must be the id of a `<form>` in the same document. If this property is not set, the `<qds-radio>` is associated with its ancestor `<form>` element, if any.  This property lets you associate `<qds-radio>` elements to `<form>`s anywhere in the document, not just inside a `<form>`. It can also override an ancestor `<form>` element.
+          * @webnative
+         */
+        "form"?: string;
+        /**
+          * Adds vertical margin to the radio for alignment.  This is useful when creating inline layouts so that the first lines have the correct vertical centering.
+         */
+        "inline"?: boolean;
+        /**
+          * Specify the radio group this radio button belongs to.  Once a radio group is established, selecting any radio button in that group automatically deselects any currently-selected radio button in the same group.
+          * @webnative
+         */
+        "name"?: string;
+        /**
+          * Emitted when the radio button loses focus.
+         */
+        "onQdsBlur"?: (event: QdsRadioCustomEvent<QdsFocusEventDetail>) => void;
+        /**
+          * Emitted when the radio button is checked by the user.
+         */
+        "onQdsChange"?: (event: QdsRadioCustomEvent<void>) => void;
+        /**
+          * Emitted when the radio button gains focus.
+         */
+        "onQdsFocus"?: (event: QdsRadioCustomEvent<QdsFocusEventDetail>) => void;
+        /**
+          * Specify the group the radio button belongs to as required.  If any radio button in a same-named group of radio buttons has the `required` attribute, a radio button in that group must be checked, although it doesn't have to be the one with the attribute applied.
+          * @webnative
+         */
+        "required"?: boolean;
+        /**
+          * The radio button's size.
+         */
+        "size"?: RadioSize;
+        /**
+          * The radio button's text.
+         */
+        "text"?: string;
+        /**
+          * The value of the radio button, submitted as a name/value pair with form data.
+          * @webnative
+         */
+        "value"?: RadioValue;
+    }
+    /**
+     * @see https://quartz.se.com/build/components/switch
+     */
+    interface QdsSwitch {
+        /**
+          * Specify whether the switch should have focus when the page loads.
+          * @webnative
+         */
+        "autoFocus"?: boolean;
+        /**
+          * Sets the switch's state.
+          * @webnative
+         */
+        "checked"?: boolean;
+        /**
+          * Prevents the switch from being interacted with: it cannot be pressed or focused.
+          * @webnative
+         */
+        "disabled"?: boolean;
+        /**
+          * The [`<form>`](https://developer.mozilla.org/docs/Web/HTML/Element/form) element to associate the switch with (its form owner).  The value of this property must be the id of a `<form>` in the same document. If this property is not set, the `<qds-switch>` is associated with its ancestor `<form>` element, if any.  This property lets you associate `<qds-switch>` elements to `<form>`s anywhere in the document, not just inside a `<form>`. It can also override an ancestor `<form>` element.
+          * @webnative
+         */
+        "form"?: string;
+        /**
+          * The name of a registered checked icon library.
+         */
+        "iconCheckedLibrary"?: string;
+        /**
+          * The name of the checked icon to render.  Available names depend on the icon library being used.
+         */
+        "iconCheckedName"?: string;
+        /**
+          * The name of a registered unchecked icon library.
+         */
+        "iconUncheckedLibrary"?: string;
+        /**
+          * The name of the unchecked icon to render.  Available names depend on the icon library being used.
+         */
+        "iconUncheckedName"?: string;
+        /**
+          * Adds vertical margin to the switch for alignment.  This is useful when creating inline layouts so that the first lines have the correct vertical centering.
+         */
+        "inline"?: boolean;
+        /**
+          * The name of the switch, which is submitted with the form data. An incrementing ID is used by default.
+          * @webnative
+         */
+        "name"?: string;
+        /**
+          * Emitted when the switch loses focus.
+         */
+        "onQdsBlur"?: (event: QdsSwitchCustomEvent<QdsFocusEventDetail>) => void;
+        /**
+          * Emitted when a change to the switch's state is committed by the user.
+         */
+        "onQdsChange"?: (event: QdsSwitchCustomEvent<void>) => void;
+        /**
+          * Emitted when the switch gains focus.
+         */
+        "onQdsFocus"?: (event: QdsSwitchCustomEvent<QdsFocusEventDetail>) => void;
+        /**
+          * The switches's size.
+         */
+        "size"?: SwitchSize;
+        /**
+          * The switch's checked text.
+         */
+        "textChecked"?: string;
+        /**
+          * The switch's unchecked text.
+         */
+        "textUnchecked"?: string;
+        /**
+          * The value of the switch, submitted as a name/value pair with form data.
+          * @webnative
+         */
+        "value"?: SwitchValue;
+    }
+    /**
+     * @see https://quartz.se.com/build/components/title
+     */
+    interface QdsTitle {
+        /**
+          * The name of a registered icon library.
+         */
+        "iconLibrary"?: string;
+        /**
+          * The name of the icon to render.  Available names depend on the icon library being used.
+         */
+        "iconName"?: string;
+        /**
+          * Text to display for the kicker.
+         */
+        "kicker"?: string;
+        "layer"?: Layer;
+        "level"?: Level;
+        /**
+          * Text to display for the subtitle.
+         */
+        "subtitle"?: string;
+        /**
+          * HTML tag to use to render the title.
+         */
+        "tag"?: Tag;
+    }
+    /**
+     * @experimental 
+     * @see https://quartz.se.com/build/components/tooltip
+     */
+    interface QdsTooltip {
+        /**
+          * Options to pass to Floating UI's [`autoUpdate()` function](https://floating-ui.com/docs/autoUpdate).
+          * @see https://floating-ui.com/docs/autoupdate#options
+         */
+        "autoUpdateOptions"?: AutoUpdateOptions;
+        /**
+          * Prevents the tooltip from being shown by user interaction. The tooltip can still be displayed by calling the `show()` method.
+         */
+        "disabled"?: boolean;
+        /**
+          * Options to pass to Floating UI's [`flip` middleware](https://floating-ui.com/docs/flip).  The [`crossAxis` option](https://floating-ui.com/docs/flip#crossaxis) is set to the value of the `noShift` property by default for interoperability with the [`shift` middleware](https://floating-ui.com/docs/shift).
+          * @see https://floating-ui.com/docs/flip#options
+         */
+        "flipOptions"?: Partial<
+    DetectOverflowOptions & FlipOptions
+  >;
+        /**
+          * Disable Floating UI's [`flip` middleware](https://floating-ui.com/docs/flip).
+         */
+        "noFlip"?: boolean;
+        /**
+          * Disable Floating UI's [`shift` middleware](https://floating-ui.com/docs/shift).
+         */
+        "noShift"?: boolean;
+        /**
+          * Options to pass to Floating UI's [`offset` middleware](https://floating-ui.com/docs/offset).  The [`mainAxis` option](https://floating-ui.com/docs/offset#mainaxis) is not supported.
+          * @see https://floating-ui.com/docs/offset#options
+         */
+        "offsetOptions"?: OffsetOptions;
+        /**
+          * Emitted when the tooltip is closed.
+         */
+        "onQdsClose"?: (event: QdsTooltipCustomEvent<void>) => void;
+        /**
+          * Where to place the tooltip relative to the `target`.
+          * @see https://floating-ui.com/docs/tutorial#placements
+         */
+        "placement"?: Placement;
+        /**
+          * Options to pass to Floating UI's [`shift` middleware](https://floating-ui.com/docs/shift).
+          * @see https://floating-ui.com/docs/shift#options
+         */
+        "shiftOptions"?: Partial<
+    DetectOverflowOptions & ShiftOptions
+  >;
+        /**
+          * The CSS position strategy to use.
+          * @see https://floating-ui.com/docs/computeposition#strategy
+         */
+        "strategy"?: Strategy;
+        /**
+          * The trigger element that will trigger the tooltip. The target specified can be any of the follow:  - A CSS selector string - A reference to an [`Element`](https://developer.mozilla.org/docs/Web/API/Element) or [Virtual Element](https://floating-ui.com/docs/virtual-elements) - A function returning a reference to an [`Element`](https://developer.mozilla.org/docs/Web/API/Element), [Virtual Element](https://floating-ui.com/docs/virtual-elements), or a CSS selector string
+         */
+        "target": | ReferenceElement
+    | string
+    | (() => ReferenceElement | string);
+    }
+    interface IntrinsicElements {
+        "qds-button": QdsButton;
+        "qds-checkbox": QdsCheckbox;
+        "qds-dropdown": QdsDropdown;
+        "qds-icon": QdsIcon;
+        "qds-inline-link": QdsInlineLink;
+        "qds-input": QdsInput;
+        "qds-label": QdsLabel;
+        "qds-radio": QdsRadio;
+        "qds-switch": QdsSwitch;
+        "qds-title": QdsTitle;
+        "qds-tooltip": QdsTooltip;
+    }
+}
+export { LocalJSX as JSX };
+declare module "@stencil/core" {
+    export namespace JSX {
+        interface IntrinsicElements {
+            /**
+             * The `<qds-button>` element is an interactive element activated by a user
+             * with a mouse, keyboard, finger, voice command, or other assistive technology.
+             * Once activated, it then performs a programmable action, such as submitting a
+             * [form](https://developer.mozilla.org/docs/Learn/Forms)
+             * or opening a dialog.
+             * @see https://quartz.se.com/build/components/button
+             */
+            "qds-button": LocalJSX.QdsButton & JSXBase.HTMLAttributes<HTMLQdsButtonElement>;
+            /**
+             * `<qds-checkbox>` elements are rendered as boxes that are checked (ticked)
+             * when activated, like you might see in an official government paper form. A
+             * checkbox allows you to select single values for submission in a form (or not).
+             * @see https://quartz.se.com/build/components/checkbox
+             */
+            "qds-checkbox": LocalJSX.QdsCheckbox & JSXBase.HTMLAttributes<HTMLQdsCheckboxElement>;
+            /**
+             * @experimental 
+             * @see https://quartz.se.com/build/components/dropdown
+             */
+            "qds-dropdown": LocalJSX.QdsDropdown & JSXBase.HTMLAttributes<HTMLQdsDropdownElement>;
+            /**
+             * @experimental 
+             */
+            "qds-icon": LocalJSX.QdsIcon & JSXBase.HTMLAttributes<HTMLQdsIconElement>;
+            /**
+             * `<qds-inline-link>` elements, with their `href` property, create a hyperlink
+             * to web pages, files, email addresses, locations in the same page, or
+             * anything else a URL can address.
+             * Content within each `<qds-inline-link>` *should* indicate the inline link's
+             * destination. If the `href` property is present, pressing the enter key while
+             * focused on the `<qds-inline-link>` element will activate it.
+             * @see https://quartz.se.com/build/components/inline-link
+             */
+            "qds-inline-link": LocalJSX.QdsInlineLink & JSXBase.HTMLAttributes<HTMLQdsInlineLinkElement>;
+            /**
+             * The `<qds-input>` element is used to create interactive controls for
+             * web-based forms in order to accept data from the user; a wide variety of
+             * types of input data and control widgets are available, depending on the
+             * device and
+             * [user agent](https://developer.mozilla.org/docs/Glossary/User_agent).
+             * @see https://quartz.se.com/build/components/input
+             */
+            "qds-input": LocalJSX.QdsInput & JSXBase.HTMLAttributes<HTMLQdsInputElement>;
+            /**
+             * `<qds-label>` elements represent a caption for an item in a user interface.
+             * @see https://quartz.se.com/build/components/label
+             */
+            "qds-label": LocalJSX.QdsLabel & JSXBase.HTMLAttributes<HTMLQdsLabelElement>;
+            /**
+             * `<qds-radio>` elements are rendered as circles that are filled when
+             * selected. They are generally used in **radio groups** — collections of radio
+             * buttons describing a set of related options.
+             * Only one radio button in a given radio group can be selected at the same
+             * time.
+             * @see https://quartz.se.com/build/components/radio
+             */
+            "qds-radio": LocalJSX.QdsRadio & JSXBase.HTMLAttributes<HTMLQdsRadioElement>;
+            /**
+             * @see https://quartz.se.com/build/components/switch
+             */
+            "qds-switch": LocalJSX.QdsSwitch & JSXBase.HTMLAttributes<HTMLQdsSwitchElement>;
+            /**
+             * @see https://quartz.se.com/build/components/title
+             */
+            "qds-title": LocalJSX.QdsTitle & JSXBase.HTMLAttributes<HTMLQdsTitleElement>;
+            /**
+             * @experimental 
+             * @see https://quartz.se.com/build/components/tooltip
+             */
+            "qds-tooltip": LocalJSX.QdsTooltip & JSXBase.HTMLAttributes<HTMLQdsTooltipElement>;
+        }
+    }
+}