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

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

@@ -1,33 +1,46 @@
 import type { ComponentInterface } from '../../stencil-public-runtime';
-export type LabelSize = 'large' | 'small' | 'standard';
+import type { Importance, Size } from '../shared';
+import type { Tooltip } from '../tooltip/tooltip';
+export type LabelImportance = Exclude<Importance, 'subdued'>;
 /**
  * `<qds-label>` elements represent a caption for an item in a user interface.
  *
  * @see https://quartz.se.com/build/components/label
  */
 export declare class Label implements ComponentInterface {
-  /**
-   * 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.
-   */
-  readonly inline: boolean;
-  /**
-   * Specify the labelled item as required by appending a red asterisk (*).
-   */
-  readonly required: boolean;
-  /**
-   * The label's size.
-   */
-  readonly size: LabelSize;
-  /**
-   * The label's text.
-   */
-  readonly text?: string;
-  private readonly element;
-  private inheritedAttributes;
-  componentWillLoad(): void;
-  render(): any;
+    #private;
+    /**
+     * 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.
+     */
+    readonly inline: boolean;
+    /**
+     * Specify the labelled item as required by appending a red asterisk (*).
+     */
+    readonly required: boolean;
+    /**
+     * The label's size.
+     */
+    readonly size?: Size;
+    /**
+     * The label's importance.
+     */
+    readonly importance?: LabelImportance;
+    /**
+     * The label's text.
+     */
+    readonly text?: string;
+    /**
+     * The element to which the tooltip is anchored.
+     * By default, the tooltip is anchored to the label itself when this prop is not set.
+     */
+    readonly tooltipTarget?: Tooltip['target'];
+    private tooltip;
+    protected textChanged(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    render(): any;
 }
 //# sourceMappingURL=label.d.ts.map

package/dist/types/components/list-item/list-item.d.ts

@@ -0,0 +1,121 @@
+import type { ComponentInterface } from '../../stencil-public-runtime';
+import type { Size } from '../shared';
+export type Destination = 'navigation';
+export type ListAction = 'multiselect' | 'none' | 'radio' | 'select';
+/**
+ *
+ *
+ * @see https://quartz.se.com/build/components/list-item
+ */
+export declare class ListItem implements ComponentInterface {
+    #private;
+    /**
+     * The destination action that the list item denotes through its rightmost icon.
+     */
+    readonly destination?: Destination;
+    /**
+     * Prevents the list item from being interacted with: it cannot be selected
+     * or focused.
+     */
+    readonly disabled: boolean;
+    /**
+     * Control how to display the bottom divider line.
+     *
+     * By default, the divider is not visible.
+     */
+    readonly showDivider: boolean;
+    /**
+     * 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 URL of the avatar image to display.
+     */
+    readonly avatarSrc?: string;
+    /**
+     * The URL of the picture to display.
+     *
+     * This is used to display a picture in the list item.
+     * It is not used for the avatar image.
+     */
+    readonly imageSrc?: string;
+    /**
+     * Text to display for the kicker.
+     */
+    readonly kicker?: string;
+    /**
+     * The type of list-level action that the list item supports
+     */
+    readonly listAction: ListAction;
+    /**
+     * The list items's size.
+     */
+    readonly size?: Size;
+    /**
+     * Whether or not the list item is selected.
+     */
+    selected?: boolean;
+    /**
+     * Sets the list item to an indeterminate state, only when `list-action="indeterminate"`.
+     * This is usually applied to items that represent a "select all/none" behavior when associated
+     * items have a mix of selected and unselected states.
+     *
+     * @webnative
+     */
+    indeterminate?: boolean;
+    /**
+     * The primary text of the list item.
+     */
+    readonly text: string;
+    /**
+     * Text to display below the primary text.
+     */
+    readonly subtitle?: string;
+    /**
+     * Displays a counter badge if a number or string representing a number is used.
+     *
+     * @webnative
+     */
+    readonly badge?: number | string;
+    /**
+     * The counter badge's accessible text that will be used by
+     * screen readers.
+     */
+    readonly badgeDescription?: string;
+    /**
+     * Emitted when the list item 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 list item gains focus.
+     */
+    private readonly focusEmitter;
+    private readonly internals;
+    private readonly host;
+    private textTooltip;
+    private subtitleTooltip;
+    private hasSubmenuSlot;
+    protected onClick(event: MouseEvent): void;
+    protected onKeydown(event: KeyboardEvent): void;
+    protected onKeyup(event: KeyboardEvent): void;
+    protected onDragstart(): void;
+    protected onDragend(): void;
+    protected disabledChanged(): void;
+    protected listActionChanged(newValue: ListAction | undefined): void;
+    protected textChanged(): void;
+    protected subtitleChanged(): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    render(): any;
+}
+//# sourceMappingURL=list-item.d.ts.map

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

@@ -0,0 +1,32 @@
+import type { ComponentInterface } from '../../stencil-public-runtime';
+import type { Size } from '../shared';
+export type LoaderSize = Size | 'hero' | 'jumbo';
+export type LoaderStatus = 'error' | 'success' | 'warning';
+export type LoaderImportance = 'destructive' | 'informative' | 'neutral-contrast' | 'neutral' | 'standard';
+/**
+ * The `<qds-loader>` element displays an indicator showing that content is
+ * being loaded or processed.
+ *
+ * @see https://quartz.se.com/build/components/loader
+ */
+export declare class Loader implements ComponentInterface {
+    #private;
+    /**
+     * The loader's size.
+     */
+    readonly size?: LoaderSize;
+    /**
+     * The loader's status.
+     */
+    readonly status?: LoaderStatus;
+    /**
+     * The loader's importance.
+     */
+    readonly importance?: LoaderImportance;
+    private readonly host;
+    private readonly internals;
+    protected statusChanged(): void;
+    componentWillLoad(): void;
+    render(): any;
+}
+//# sourceMappingURL=loader.d.ts.map

package/dist/types/components/menu-item/menu-item.d.ts

@@ -0,0 +1,71 @@
+import type { ComponentInterface } from '../../stencil-public-runtime';
+import type { Size } from '../shared';
+export type Type = 'checkbox' | undefined;
+/**
+ *
+ *
+ * @see https://quartz.se.com/build/components/menu-item
+ */
+export declare class MenuItem implements ComponentInterface {
+    #private;
+    /**
+     * Prevents the menu item from being interacted with: it cannot be clicked
+     * or focused.
+     */
+    readonly disabled?: boolean;
+    /**
+     * 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 menu item's size.
+     */
+    readonly size?: Size;
+    /**
+     * Whether or not the menu item should be selectable.
+     */
+    type: Type;
+    /**
+     * Whether or not the menu item is checked.
+     */
+    checked?: boolean;
+    /**
+     * The menu item's text
+     */
+    readonly text: string;
+    /**
+     * The shortcut of the action.
+     */
+    readonly shortcut?: string;
+    private hasSubmenuSlot;
+    private tooltip;
+    /**
+     * Emitted when the menu item loses focus.
+     */
+    private readonly blurEmitter;
+    /**
+     * Emitted when the menu item gains focus.
+     */
+    private readonly focusEmitter;
+    /**
+     * Emitted when the menu item is checked.
+     */
+    private readonly selectEmitter;
+    private readonly host;
+    private readonly internals;
+    protected onBlur(event: FocusEvent): void;
+    protected onFocus(event: FocusEvent): void;
+    protected onClick(event: MouseEvent): void;
+    protected disabledChanged(): void;
+    protected checkedChanged(): void;
+    componentDidLoad(): void;
+    componentWillLoad(): void;
+    render(): any;
+}
+//# sourceMappingURL=menu-item.d.ts.map

package/dist/types/components/mini-button/mini-button.d.ts

@@ -0,0 +1,82 @@
+import type { ComponentInterface } from '../../stencil-public-runtime';
+import type { LiteralUnion } from 'type-fest';
+import type { Target } from '../shared';
+/**
+ * @experimental
+ */
+export declare class MiniButton implements ComponentInterface {
+    #private;
+    /**
+     * Prevents the mini button from being interacted with: it cannot be pressed or
+     * focused.
+     *
+     * @webnative
+     */
+    readonly disabled?: boolean;
+    /**
+     * The name of the icon to render.
+     *
+     * Available names depend on the icon library being used.
+     */
+    readonly name: string;
+    /**
+     * The name of a registered icon library.
+     */
+    readonly library: 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
+     */
+    readonly target?: LiteralUnion<Target, string>;
+    /**
+     * When set, the underlying button will be rendered as an `<a>` with this
+     * `href` instead of a `<button>`.
+     *
+     * @webnative
+     */
+    readonly href?: string;
+    /**
+     * When href is define and the button act as a link (`<a>`), the `rel` will be added to the element.
+     *
+     * @webnative
+     */
+    readonly rel?: string;
+    /**
+     * The mini button's accessible name.
+     */
+    readonly text: string;
+    /**
+     * Emitted when the button loses focus.
+     */
+    private readonly blurEmitter;
+    /**
+     * Emitted when the button gains focus.
+     */
+    private readonly focusEmitter;
+    private readonly host;
+    private readonly internals;
+    protected disabledChanged(): void;
+    protected hrefChanged(): void;
+    protected tabindexChanged(newValue: string | null): void;
+    protected textChanged(): void;
+    protected onClick(event: MouseEvent): void;
+    protected onBlur(event: FocusEvent): void;
+    protected onFocus(event: FocusEvent): void;
+    protected onKeydown(event: KeyboardEvent): void;
+    protected onKeyup(event: KeyboardEvent): void;
+    componentWillLoad(): void;
+    render(): any;
+}
+//# sourceMappingURL=mini-button.d.ts.map

package/dist/types/components/progress-bar/progress-bar.d.ts

@@ -0,0 +1,60 @@
+import type { ComponentInterface } from '../../stencil-public-runtime';
+import type { Size } from '../shared';
+/**
+ * The `<qds-progress-bar>` element displays an indicator showing the
+ * completion progress of a task.
+ *
+ * @see https://quartz.se.com/build/components/progress-bar
+ */
+export declare class ProgressBar implements ComponentInterface {
+    #private;
+    /**
+     * The progress bar's size.
+     */
+    readonly size?: Size;
+    /**
+     * Returns a list of the [`<label>`][] elements associated with the
+     * `qds-progress-bar` element.
+     *
+     * [`<label>`]: https://developer.mozilla.org/docs/Web/HTML/Element/label
+     *
+     * @readonly
+     * @webnative
+     */
+    readonly labels: ElementInternals['labels'];
+    /**
+     * Specifies how much work the task indicated by the progress bar requires.
+     * `max` must have a value greater than 0 and be a valid floating point
+     * number.
+     *
+     * @webnative
+     */
+    readonly max?: number | string;
+    /**
+     * Returns the result of dividing the current value (`value`) by the maximum
+     * value (`max`); if the progress bar is an indeterminate progress bar, it
+     * returns `-1`.
+     *
+     * @readonly
+     * @webnative
+     */
+    readonly position: number;
+    /**
+     * Specifies how much of the task has been completed. It must be a valid
+     * floating point number between `0` and `max`, or between `0` and `1` if
+     * `max` is omitted. If this attribute is not specified, the progress bar is
+     * indeterminate; this indicates that an activity is ongoing with no
+     * indication of how long it is expected to take.
+     *
+     * @webnative
+     */
+    readonly value?: number | string;
+    private readonly host;
+    private readonly internals;
+    private width;
+    protected maxChanged(): void;
+    protected valueChanged(): void;
+    componentWillLoad(): void;
+    render(): any;
+}
+//# sourceMappingURL=progress-bar.d.ts.map

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

@@ -1,6 +1,6 @@
 import type { ComponentInterface } from '../../stencil-public-runtime';
 import type { Value } from '../controls';
-export type RadioSize = 'large' | 'small' | 'standard';
+import type { Size } from '../shared';
 /**
  * `<qds-radio>` elements are rendered as circles that are filled when
  * selected. They are generally used in **radio groups** — collections of radio
@@ -12,99 +12,94 @@ export type RadioSize = 'large' | 'small' | 'standard';
  * @see https://quartz.se.com/build/components/radio
  */
 export declare class Radio implements ComponentInterface {
-  /**
-   * 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.
-   */
-  readonly inline: boolean;
-  /**
-   * The radio button's size.
-   */
-  readonly size: RadioSize;
-  /**
-   * The radio button's text.
-   */
-  readonly text?: string;
-  /**
-   * 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
-   */
-  readonly form?: string;
-  /**
-   * 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
-   */
-  readonly 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
-   */
-  readonly required?: boolean;
-  /**
-   * The value of the radio button, submitted as a name/value pair with form
-   * data.
-   *
-   * @webnative
-   */
-  value?: Value;
-  /**
-   * Emitted when the radio button loses focus.
-   */
-  private readonly blurEmitter;
-  /**
-   * Emitted when the radio button is checked by the user.
-   */
-  private readonly changeEmitter;
-  /**
-   * Emitted when the radio button gains focus.
-   */
-  private readonly focusEmitter;
-  private readonly element;
-  private inheritedAttributes;
-  private input?;
-  private get computedDisabled();
-  private get hasText();
-  protected onClick(): void;
-  componentWillLoad(): void;
-  render(): any;
-  private readonly ref;
-  private readonly onBlur;
-  private readonly onChange;
-  private readonly onFocus;
+    #private;
+    /**
+     * 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.
+     */
+    readonly inline: boolean;
+    /**
+     * The radio button's size.
+     */
+    readonly size?: Size;
+    /**
+     * The radio button's text.
+     */
+    readonly text?: string;
+    /**
+     * Sets the radio button's state.
+     *
+     * @webnative
+     */
+    checked?: boolean;
+    /**
+     * Prevents the radio button from being interacted with: it cannot be pressed
+     * or focused.
+     *
+     * @webnative
+     */
+    readonly 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
+     */
+    readonly form?: string;
+    /**
+     * 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
+     */
+    readonly 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
+     */
+    readonly required?: boolean;
+    /**
+     * The value of the radio button, submitted as a name/value pair with form
+     * data.
+     *
+     * @webnative
+     */
+    value?: Value;
+    /**
+     * Emitted when the radio button loses focus.
+     */
+    private readonly blurEmitter;
+    /**
+     * Emitted when the radio button is checked by the user.
+     */
+    private readonly changeEmitter;
+    /**
+     * Emitted when the radio button gains focus.
+     */
+    private readonly focusEmitter;
+    private readonly host;
+    private tabIndex?;
+    protected onClick(event: MouseEvent): void;
+    protected tabindexChanged(newValue: string): void;
+    componentWillLoad(): void;
+    render(): any;
 }
 //# sourceMappingURL=radio.d.ts.map