@quartzds/core 1.0.0-beta.9 → 1.0.0-beta.91

package/dist/types/components/checkbox/checkbox.d.ts

@@ -1,6 +1,6 @@
 import type { ComponentInterface } from '../../stencil-public-runtime';
+import type { Size } from '../shared';
 export type CheckboxValue = number | string | null;
-export type CheckboxSize = 'large' | 'small' | 'standard';
 /**
  * `<qds-checkbox>` elements are rendered as boxes that are checked (ticked)
  * when activated, like you might see in an official government paper form. A
@@ -9,128 +9,141 @@ export type CheckboxSize = 'large' | 'small' | 'standard';
  * @see https://quartz.se.com/build/components/checkbox
  */
 export declare class Checkbox implements ComponentInterface {
-  /**
-   * 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.
-   */
-  readonly inline: boolean;
-  /**
-   * The checkbox's size.
-   */
-  readonly size: CheckboxSize;
-  /**
-   * The checkbox's text.
-   */
-  readonly text?: string;
-  /**
-   * Specify whether the checkbox should have focus when the page loads.
-   *
-   * @webnative
-   */
-  readonly 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
-   */
-  readonly 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;
-  /**
-   * The name of the checkbox, which is submitted with the form data. An
-   * incrementing ID is used by default.
-   *
-   * @webnative
-   */
-  readonly name: string;
-  /**
-   * 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
-   */
-  readonly required?: boolean;
-  /**
-   * The value of the checkbox, submitted as a name/value pair with form data.
-   *
-   * @webnative
-   */
-  value?: CheckboxValue;
-  /**
-   * Emitted when the checkbox loses focus.
-   */
-  private readonly blurEmitter;
-  /**
-   * Emitted when a change to the checkbox's state is committed by the user.
-   */
-  private readonly changeEmitter;
-  /**
-   * Emitted when the checkbox gains focus.
-   */
-  private readonly focusEmitter;
-  private readonly element;
-  private inheritedAttributes;
-  private input?;
-  private get computedDisabled();
-  private get computedIndeterminate();
-  private get hasText();
-  /**
-   * Returns whether a form will validate this checkbox when it is submitted
-   * without having to submit it.
-   */
-  checkValidity(): Promise<boolean>;
-  /**
-   * 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>;
-  /**
-   * 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>;
-  protected onClick(event: MouseEvent): void;
-  componentWillLoad(): void;
-  render(): any;
-  private readonly ref;
-  private readonly onBlur;
-  private readonly onFocus;
+    #private;
+    /**
+     * 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.
+     */
+    readonly inline: boolean;
+    /**
+     * The checkbox's size.
+     */
+    readonly size?: Size;
+    /**
+     * The checkbox's text.
+     *
+     * Its value will also be used as the `aria-label` value when the
+     * `checkbox-only` attribute is specified.
+     */
+    readonly text: string;
+    /**
+     * Sets the checkbox's state.
+     *
+     * @webnative
+     */
+    checked?: boolean;
+    /**
+     * Prevents the checkbox from being interacted with: it cannot be pressed or
+     * focused.
+     *
+     * @webnative
+     */
+    readonly disabled?: boolean;
+    /**
+     * The [`<form>`][] element to associate the checkbox 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-checkbox>` is associated
+     * with its ancestor `<form>` element, if any.
+     *
+     * This attribute 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.
+     *
+     * [`<form>`]: https://developer.mozilla.org/docs/Web/HTML/Element/form
+     *
+     * @readonly
+     * @webnative
+     */
+    readonly form: ElementInternals['form'] | string;
+    /**
+     * Sets the checkbox to an indeterminate state. This is usually applied to
+     * checkboxes that represent a "select all/none" behavior when associated
+     * checkboxes have a mix of checked and unchecked states.
+     *
+     * @webnative
+     */
+    indeterminate?: boolean;
+    /**
+     * The name of the checkbox, which is submitted with the form data.
+     *
+     * @webnative
+     */
+    readonly name?: string;
+    /**
+     * 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
+     */
+    readonly required?: boolean;
+    /**
+     * The error message that would be shown to the user if the `<qds-checkbox>`
+     * was to be checked for validity.
+     *
+     * @readonly
+     * @webnative
+     */
+    readonly validationMessage: ElementInternals['validationMessage'];
+    /**
+     * The [`ValidityState`][] object for this `<qds-checkbox>`.
+     *
+     * [`ValidityState`]: https://developer.mozilla.org/docs/Web/API/ValidityState
+     *
+     * @readonly
+     * @webnative
+     */
+    readonly validity: ElementInternals['validity'];
+    /**
+     * The value of the checkbox, submitted as a name/value pair with form data.
+     *
+     * @webnative
+     */
+    readonly value?: CheckboxValue;
+    /**
+     * True if `<qds-checkbox>` will be validated when the form is submitted;
+     * false otherwise.
+     *
+     * @readonly
+     * @webnative
+     */
+    readonly willValidate: ElementInternals['willValidate'];
+    /**
+     * Whether or not the text is displayed.
+     */
+    readonly checkboxOnly: boolean;
+    private readonly internals;
+    /**
+     * Emitted when the checkbox loses focus.
+     */
+    private readonly blurEmitter;
+    /**
+     * Emitted when a change to the checkbox's state is committed by the user.
+     */
+    private readonly changeEmitter;
+    /**
+     * Emitted when the checkbox gains focus.
+     */
+    private readonly focusEmitter;
+    private readonly host;
+    private tabIndex?;
+    protected onClick(event: MouseEvent): void;
+    protected checkedChanged(): void;
+    protected disabledChanged(): void;
+    protected tabindexChanged(newValue: string): void;
+    protected valueChanged(): void;
+    componentWillLoad(): void;
+    render(): any;
+    checkValidity: ElementInternals['checkValidity'];
+    reportValidity: ElementInternals['reportValidity'];
+    setCustomValidity: HTMLInputElement['setCustomValidity'];
 }
 //# sourceMappingURL=checkbox.d.ts.map

package/dist/types/components/chip/chip.d.ts

@@ -0,0 +1,109 @@
+import type { ComponentInterface } from '../../stencil-public-runtime';
+import type { Value } from '../controls';
+import type { Size } from '../shared';
+export type ChipType = 'closable' | 'selectable';
+/**
+ * `<qds-chip>` elements are interactive elements that represent selections.
+ * Chips allow users to make a selection from a list of options or display
+ * items like filters or tags.
+ *
+ * @see https://quartz.se.com/build/components/chip
+ */
+export declare class Chip implements ComponentInterface {
+    #private;
+    /**
+     * The name of the icon to render.
+     *
+     * Available names depend on the icon library being used.
+     */
+    readonly iconName?: string;
+    /**
+     * The name of a registered icon library.
+     */
+    readonly iconLibrary: string;
+    /**
+     * The chip's size.
+     */
+    readonly size?: Size;
+    /**
+     * The chip's type.
+     */
+    readonly type?: ChipType;
+    /**
+     * The chip's text.
+     */
+    readonly text?: string;
+    /**
+     * Sets the selectable chip's state.
+     *
+     * @webnative
+     */
+    checked?: boolean;
+    /**
+     * The [`<form>`](https://developer.mozilla.org/docs/Web/HTML/Element/form)
+     * element to associate the chip 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-chip>` is associated
+     * with its ancestor `<form>` element, if any.
+     *
+     * This property lets you associate `<qds-chip>` elements to `<form>`s
+     * anywhere in the document, not just inside a `<form>`. It can also override
+     *an ancestor `<form>` element.
+     *
+     * @webnative
+     */
+    readonly form: ElementInternals['form'] | string;
+    /**
+     * Prevents the chip from being interacted with: it cannot be pressed or
+     * focused.
+     *
+     */
+    readonly disabled?: boolean;
+    /**
+     * The name of the chip, which is submitted with the form data.
+     *
+     * @webnative
+     */
+    readonly name?: string;
+    /**
+     * The value of the chip, submitted as a name/value pair with form data.
+     *
+     * @webnative
+     */
+    readonly value?: Value;
+    /**
+     * Emitted when the chip loses focus.
+     */
+    private readonly blurEmitter;
+    /**
+     * Emitted when the chip gains focus.
+     */
+    private readonly focusEmitter;
+    /**
+     * Emitted when the chip is closed.
+     */
+    private readonly closeEmitter;
+    /**
+     * Emitted when a change to the selectable chip's state is committed by the user.
+     */
+    private readonly changeEmitter;
+    private readonly host;
+    private readonly internals;
+    private isPressed;
+    private isSelected;
+    private tabIndex?;
+    private tooltip;
+    protected onClick(event: MouseEvent): void;
+    protected handleKeyDown(event: KeyboardEvent): void;
+    protected handleKeyUp(event: KeyboardEvent): void;
+    protected checkedChanged(): void;
+    protected disabledChanged(): void;
+    protected tabindexChanged(newValue: string): void;
+    protected valueChanged(): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    render(): any;
+}
+//# sourceMappingURL=chip.d.ts.map

package/dist/types/components/controls.d.ts

@@ -1,6 +1,9 @@
+export type AutoComplete = 'additional-name' | 'address-level1' | 'address-level2' | 'address-level3' | 'address-level4' | 'address-line1' | 'address-line2' | 'address-line3' | 'bday-day' | 'bday-month' | 'bday-year' | 'bday' | 'cc-additional-name' | 'cc-csc' | 'cc-exp-month' | 'cc-exp-year' | 'cc-exp' | 'cc-family-name' | 'cc-given-name' | 'cc-name' | 'cc-number' | 'cc-type' | 'country-name' | 'country' | 'current-password' | 'email' | 'family-name' | 'given-name' | 'honorific-prefix' | 'honorific-suffix' | 'impp' | 'language' | 'name' | 'new-password' | 'nickname' | 'off' | 'on' | 'one-time-code' | 'organization-title' | 'organization' | 'photo' | 'postal-code' | 'sex' | 'street-address' | 'tel-area-code' | 'tel-country-code' | 'tel-extension' | 'tel-local' | 'tel-national' | 'tel' | 'transaction-amount' | 'transaction-currency' | 'url' | 'username';
 export type AutoCapitalize = 'characters' | 'none' | 'off' | 'on' | 'sentences' | 'words';
 export type EnterKeyHint = 'done' | 'enter' | 'go' | 'next' | 'previous' | 'search' | 'send';
 export type InputMode = 'decimal' | 'email' | 'none' | 'numeric' | 'search' | 'tel' | 'text' | 'url';
-export type SelectDirection = 'backward' | 'forward' | 'none';
 export type Value = number | string | null;
+export declare const CUSTOM_ERROR_FLAGS: ValidityStateFlags;
+export declare const NO_ERROR_FLAGS: ValidityStateFlags;
+export declare const VALID_STATE: ValidityState;
 //# sourceMappingURL=controls.d.ts.map

package/dist/types/components/dialog/dialog.d.ts

@@ -0,0 +1,35 @@
+import type { ComponentInterface } from '../../stencil-public-runtime';
+/**
+ * The `<qds-dialog>` element represent a dialog box or other interactive
+ * component, such as a dismissible alert, inspector, or subwindow.
+ *
+ * @see https://quartz.se.com/build/components/dialog
+ */
+export declare class Dialog implements ComponentInterface {
+    #private;
+    /**
+     * Indicates whether or not the dialog is open. You can toggle this attribute
+     * to show and hide the dialog, or you can use the `show()` and `close()`
+     * methods and this attribute will reflect the dialog’s open state.
+     */
+    open: boolean;
+    private readonly host;
+    /**
+     * Emitted when the user instructs the browser that they wish to dismiss the
+     * currently open dialog. The browser fires this event when the user presses
+     * the `Esc` key.
+     *
+     * When a dialog is dismissed with the `Esc` key, both the `qdsCancel` and
+     * `qdsClose` events are fired.
+     */
+    private readonly cancelEmitter;
+    /** Emitted when the dialog has been closed. */
+    private readonly closeEmitter;
+    protected openChanged(): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    render(): any;
+    show(): void;
+    close(): void;
+}
+//# sourceMappingURL=dialog.d.ts.map

package/dist/types/components/divider/divider.d.ts

@@ -1,5 +1,5 @@
 import type { ComponentInterface } from '../../stencil-public-runtime';
-export type DividerImportance = 'emphasized' | 'standard';
+import type { Importance } from '../shared';
 /**
  * The `<qds-divider>` element a thematic break between paragraph-level
  * elements: for example, a change of scene in a story, or a shift of topic
@@ -10,13 +10,17 @@ export type DividerImportance = 'emphasized' | 'standard';
  * @see https://quartz.se.com/build/components/divider
  */
 export declare class Divider implements ComponentInterface {
-  /**
-   * The divider's importance.
-   */
-  readonly importance: DividerImportance;
-  private readonly element;
-  private inheritedAttributes;
-  componentWillLoad(): void;
-  render(): any;
+    #private;
+    /**
+     * The divider's importance.
+     */
+    readonly importance?: Importance;
+    /**
+     * Display the divider in vertical orientation.
+     */
+    readonly vertical: boolean;
+    protected verticalChanged(): void;
+    componentWillLoad(): void;
+    render(): any;
 }
 //# sourceMappingURL=divider.d.ts.map