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

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

@@ -2,134 +2,125 @@ import type { AutoUpdateOptions, DetectOverflowOptions, FlipOptions, Placement,
 import type { ComponentInterface } from '../../stencil-public-runtime';
 import type { OffsetOptions } from '../../helpers';
 /**
- * @experimental
  * @slot Content to display in the dropdown.
  * @see https://quartz.se.com/build/components/dropdown
  */
 export declare class Dropdown implements ComponentInterface {
-  /**
-   * Options to pass to Floating UI's
-   * [`autoUpdate()` function](https://floating-ui.com/docs/autoUpdate).
-   *
-   * @see https://floating-ui.com/docs/autoupdate#options
-   */
-  readonly 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
-   */
-  readonly flipOptions?: Partial<DetectOverflowOptions & FlipOptions>;
-  /**
-   * Disable Floating UI's
-   * [`flip` middleware](https://floating-ui.com/docs/flip).
-   */
-  readonly noFlip: boolean;
-  /**
-   * Disable Floating UI's
-   * [`shift` middleware](https://floating-ui.com/docs/shift).
-   */
-  readonly 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
-   */
-  readonly offsetOptions?: OffsetOptions;
-  /**
-   * Where to place the dropdown relative to the `target`.
-   *
-   * @see https://floating-ui.com/docs/tutorial#placements
-   */
-  readonly 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
-   */
-  readonly shiftOptions?: Partial<DetectOverflowOptions & ShiftOptions>;
-  /**
-   * The CSS position strategy to use.
-   *
-   * @see https://floating-ui.com/docs/computeposition#strategy
-   */
-  readonly 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
-   */
-  readonly target: ReferenceElement | string | (() => ReferenceElement | string);
-  /**
-   * 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.
-   */
-  private readonly cancelEmitter;
-  /**
-   * Emitted when the dropdown is closed.
-   */
-  private readonly closeEmitter;
-  private readonly element;
-  private hostAriaLabelledBy?;
-  private hostDisplay?;
-  private hostPosition?;
-  private hostTransform?;
-  private cleanup?;
-  private middleware?;
-  private referenceElement?;
-  private open;
-  /**
-   * Show the dropdown.
-   */
-  show(): Promise<void>;
-  /**
-   * Close the dropdown.
-   */
-  close(): Promise<void>;
-  /**
-   * Update the dropdown's middleware and position.
-   */
-  update(): Promise<void>;
-  protected handleMouseDown(event: MouseEvent): Promise<void>;
-  private updateReferenceElement;
-  private updateMiddleware;
-  private updatePosition;
-  private startAutoUpdate;
-  componentWillLoad(): Promise<void>;
-  disconnectedCallback(): void;
-  render(): any;
-  private handleFocusOut;
-  private readonly boundFocusout;
-  private handleEscape;
-  private readonly boundEscape;
-  private handleReferenceClick;
-  private readonly boundReferenceClick;
-  private disconnectReferenceElement;
+    #private;
+    /**
+     * Options to pass to Floating UI's
+     * [`autoUpdate()` function](https://floating-ui.com/docs/autoUpdate).
+     *
+     * @see https://floating-ui.com/docs/autoupdate#options
+     */
+    readonly autoUpdateOptions?: AutoUpdateOptions;
+    /**
+     * Prevents the dropdown from being shown by user interaction. The dropdown
+     * can still be displayed by calling the `show()` method.
+     */
+    readonly 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
+     */
+    readonly flipOptions?: Partial<DetectOverflowOptions & FlipOptions>;
+    /**
+     * Disable Floating UI's
+     * [`flip` middleware](https://floating-ui.com/docs/flip).
+     */
+    readonly noFlip: boolean;
+    /**
+     * Disable Floating UI's
+     * [`shift` middleware](https://floating-ui.com/docs/shift).
+     */
+    readonly 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
+     */
+    readonly offsetOptions?: OffsetOptions;
+    /**
+     * Where to place the dropdown relative to the `target`.
+     *
+     * @see https://floating-ui.com/docs/tutorial#placements
+     */
+    readonly 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
+     */
+    readonly shiftOptions?: Partial<DetectOverflowOptions & ShiftOptions>;
+    /**
+     * The CSS position strategy to use.
+     *
+     * @see https://floating-ui.com/docs/computeposition#strategy
+     */
+    readonly strategy?: Strategy;
+    /**
+     * The trigger element that will trigger the dropdown. The target specified
+     * can be any of the following:
+     *
+     * - A CSS selector string
+     * - A reference to an [`Element`][] or [Virtual Element][]
+     * - A function returning a reference to an [`Element`][],
+     * [Virtual Element][], or a CSS selector string
+     *
+     * [`Element`]: https://developer.mozilla.org/docs/Web/API/Element
+     * [Virtual Element]: https://floating-ui.com/docs/virtual-elements
+     */
+    readonly target: ReferenceElement | string | (() => ReferenceElement | string);
+    /**
+     * By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for
+     * dropdowns that allow for multiple interactions.
+     */
+    readonly keepOpenOnSelect: boolean;
+    /**
+     * 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.
+     */
+    private readonly cancelEmitter;
+    /**
+     * Emitted when the dropdown is closed.
+     */
+    private readonly closeEmitter;
+    private readonly host;
+    private readonly internals;
+    /**
+     * Updates the gap between the dropdown and its target element.
+     */
+    updateGap(): Promise<void>;
+    /**
+     * Shows the dropdown.
+     */
+    show(): Promise<void>;
+    /**
+     * Closes the dropdown.
+     */
+    close(): Promise<void>;
+    protected handleMouseDown(event: MouseEvent): Promise<void>;
+    protected onItemClick(event: MouseEvent): Promise<void>;
+    private updateReferenceElement;
+    private updateMiddleware;
+    private updatePosition;
+    private startAutoUpdate;
+    componentWillLoad(): Promise<void>;
+    disconnectedCallback(): void;
+    render(): any;
 }
 //# sourceMappingURL=dropdown.d.ts.map

package/dist/types/components/form-message/form-message.d.ts

@@ -1,6 +1,6 @@
 import type { ComponentInterface } from '../../stencil-public-runtime';
-export type FormMessageSize = 'large' | 'small' | 'standard';
-export type Status = 'error' | 'info' | 'success' | 'warning';
+import type { Size, Status } from '../shared';
+export type FormMessageStatus = Status | 'neutral';
 /**
  * `<qds-form-message>` elements represent messages for a form field in a user
  * interface.
@@ -8,28 +8,36 @@ export type Status = 'error' | 'info' | 'success' | 'warning';
  * @see https://quartz.se.com/build/components/form-message
  */
 export declare class FormMessage implements ComponentInterface {
-  /**
-   * Adds vertical margin to the form message for alignment.
-   *
-   * This is useful when creating inline layouts so that the first lines have
-   * the correct vertical centering.
-   */
-  readonly inline: boolean;
-  /**
-   * The form message's size.
-   */
-  readonly size: FormMessageSize;
-  /**
-   * The form message's status.
-   */
-  readonly status: Status;
-  /**
-   * The form message's text.
-   */
-  readonly text?: string;
-  private readonly element;
-  private inheritedAttributes;
-  componentWillLoad(): void;
-  render(): any;
+    #private;
+    /**
+     * Adds vertical margin to the form message for alignment.
+     *
+     * This is useful when creating inline layouts so that the first lines have
+     * the correct vertical centering.
+     */
+    readonly inline: boolean;
+    /**
+     * The form message's size.
+     */
+    readonly size?: Size;
+    /**
+     * The form message's status.
+     */
+    readonly status?: FormMessageStatus;
+    /**
+     * Adds accessible text to the icon's form message that will be used by screen readers.
+     *
+     * @example
+     * <qds-form-message status-description="Error" text="Password is required."></qds-form-message>
+     * // This form message will be read by screen readers as "Error Password is required."
+     */
+    readonly statusDescription?: string;
+    /**
+     * The form message's text.
+     */
+    readonly text?: string;
+    private readonly host;
+    componentWillLoad(): void;
+    render(): any;
 }
 //# sourceMappingURL=form-message.d.ts.map

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

@@ -3,29 +3,29 @@ import type { ComponentInterface } from '../../stencil-public-runtime';
  * @experimental
  */
 export declare class Icon implements ComponentInterface {
-  /**
-   * 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;
-  /**
-   * Emitted when the icon has loaded.
-   */
-  private readonly loadEmitter;
-  /**
-   * Emitted when the icon fails to load due to an error.
-   */
-  private readonly errorEmitter;
-  private readonly element;
-  private svg;
-  private inheritedAttributes;
-  private setIcon;
-  componentWillLoad(): Promise<void>;
-  render(): any;
+    #private;
+    /**
+     * 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;
+    /**
+     * Emitted when the icon has loaded.
+     */
+    private readonly loadEmitter;
+    /**
+     * Emitted when the icon fails to load due to an error.
+     */
+    private readonly errorEmitter;
+    private readonly host;
+    private svg;
+    private setIcon;
+    componentWillLoad(): Promise<void>;
+    render(): any;
 }
 //# sourceMappingURL=icon.d.ts.map

package/dist/types/components/icon/library.d.ts

@@ -1,8 +1,8 @@
 import type { Except } from 'type-fest';
 export type IconLibraryResolver = (name: string) => string;
 export interface IconLibrary {
-  name: string;
-  resolver: IconLibraryResolver;
+    name: string;
+    resolver: IconLibraryResolver;
 }
 /**
  * Returns a library from the registry.
@@ -15,5 +15,5 @@ export declare const unregisterIconLibrary: (name: string) => void;
 /**
  * Adds an icon library to the registry or overrides an existing one.
  */
-export declare const registerIconLibrary: (name: string, options: Except<IconLibrary, 'name'>) => void;
+export declare const registerIconLibrary: (name: string, options: Except<IconLibrary, "name">) => void;
 //# sourceMappingURL=library.d.ts.map

package/dist/types/components/icon/request.d.ts

@@ -1,12 +1,8 @@
-interface IconRequestOk {
-  ok: true;
-  data: string;
+interface IconResponse {
+    ok: boolean;
+    status: number;
+    data: string;
 }
-interface IconRequestError {
-  ok: false;
-  data: undefined;
-}
-type IconRequest = IconRequestError | IconRequestOk;
-declare const requestIcon: (url: string) => Promise<IconRequest>;
+declare const requestIcon: (url: string) => Promise<IconResponse>;
 export default requestIcon;
 //# sourceMappingURL=request.d.ts.map

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

@@ -0,0 +1,121 @@
+import type { ComponentInterface } from '../../stencil-public-runtime';
+import type { LiteralUnion } from 'type-fest';
+import type { Importance, Size, Target } from '../shared';
+export type IconButtonSize = Size | 'hero';
+export type IconButtonImportance = Importance | 'destructive' | 'subdued-destructive';
+/**
+ * The `<qds-icon-button>` is an interactive element activated by a user
+ * with a mouse, keyboard, finger, voice command, or other assistive technology.
+ * Once activated, it 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/icon-button
+ */
+export declare class IconButton implements ComponentInterface {
+    #private;
+    /**
+     * Prevents the icon 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 iconName: string;
+    /**
+     * The name of a registered icon library.
+     */
+    readonly iconLibrary: string;
+    /**
+     * The icon button's size.
+     */
+    readonly size?: Size | 'hero';
+    /**
+     * The icon button's importance.
+     */
+    readonly importance?: IconButtonImportance;
+    /**
+     * Displays an indicator if `true` or the empty string. Otherwise, displays a
+     * counter badge if a number or string representing a number is used.
+     *
+     * @webnative
+     */
+    readonly badge?: number | string | true;
+    /**
+     * The indicator or counter badge's accessible text that will be used by
+     * screen readers.
+     */
+    readonly badgeDescription?: string;
+    /**
+     * The indicator's status.
+     */
+    readonly badgeIndicatorStatus?: HTMLQdsBadgeIndicatorElement['status'];
+    /**
+     * 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;
+    /**
+     * Tells the browser to download the linked file as this filename. Only used
+     * when `href` is set.
+     *
+     * @webnative
+     */
+    readonly download?: string;
+    /**
+     * The icon button's accessible name.
+     */
+    readonly text?: string;
+    /**
+     * Emitted when the icon button loses focus.
+     */
+    private readonly blurEmitter;
+    /**
+     * Emitted when the icon 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): Promise<void>;
+    protected onFocus(event: FocusEvent): Promise<void>;
+    protected onKeydown(event: KeyboardEvent): void;
+    protected onKeyup(event: KeyboardEvent): void;
+    componentWillLoad(): void;
+    render(): any;
+}
+//# sourceMappingURL=icon-button.d.ts.map

package/dist/types/components/icon-tab/icon-tab.d.ts

@@ -0,0 +1,110 @@
+import type { ComponentInterface } from '../../stencil-public-runtime';
+import type { Importance, Size } from '../shared';
+export type Placement = 'bottom' | 'left' | 'right' | 'top';
+export type IndicatorPosition = 'block-end' | 'block-start' | 'inline-end' | 'inline-start';
+export type IconTabImportance = Exclude<Importance, 'emphasized'>;
+/**
+ * <qds-icon-tab> is a navigational element that is used in different horizontal or vertical navigation bars
+ * (Main Navigation, secondary navigation, Tab bar, etc.)
+ * as trigger points for opening a menu list or switching content in Tab bar.
+ *
+ * @see https://quartz.se.com/build/components/icon-tab
+ */
+export declare class IconTab implements ComponentInterface {
+    #private;
+    /**
+     * Displays an indicator if `true` or the empty string. Otherwise, displays a
+     * counter badge if a number or string representing a number is used.
+     */
+    readonly badge?: number | string | true;
+    /**
+     * The tab's counter importance.
+     */
+    readonly badgeCounterImportance?: HTMLQdsBadgeCounterElement['importance'];
+    /**
+     * The indicator or counter badge's accessible text that will be used by
+     * screen readers.
+     */
+    readonly badgeDescription?: string;
+    /**
+     * The indicator's status.
+     */
+    readonly badgeIndicatorStatus?: HTMLQdsBadgeIndicatorElement['status'];
+    /**
+     * Prevents the tab from being interacted with: it cannot be
+     * selected or focused.
+     */
+    readonly disabled?: boolean;
+    /**
+     * The name of a registered icon library.
+     */
+    readonly iconLibrary: string;
+    /**
+     * The name of the icon to render.
+     *
+     * Available names depend on the icon library being used.
+     */
+    readonly iconName: string;
+    /**
+     * The tab's importance.
+     */
+    readonly importance?: IconTabImportance;
+    /**
+     * The tab's indicator position.
+     */
+    readonly indicatorPosition?: IndicatorPosition;
+    /**
+     * The tab panel element associated with this tab. The `panel` specified
+     * can be any of the following:
+     *
+     * - A CSS selector string
+     * - A reference to an [`Element`][]
+     * - A function returning a reference to an [`Element`][] or a CSS selector
+     * string
+     *
+     * [`Element`]: https://developer.mozilla.org/docs/Web/API/Element
+     */
+    readonly panel: Element | string | (() => Element | string);
+    /**
+     * Whether or not the tab is selected.
+     */
+    selected: boolean;
+    /**
+     * The tab's size.
+     */
+    readonly size?: Size;
+    /**
+     * Icon tab's accessible name.
+     */
+    readonly text?: string;
+    /**
+     * When set, the underlying tab will be rendered as an `<a>` with this
+     * `href` instead of a `<button>`.
+     *
+     * This property has no effect if the tab has an `action`.
+     *
+     * @webnative
+     */
+    readonly href?: string;
+    /**
+     * Emitted when the tab loses focus.
+     */
+    private readonly blurEmitter;
+    /**
+     * Emitted when the tab gains focus.
+     */
+    private readonly focusEmitter;
+    private readonly host;
+    private tabIndex?;
+    private isIndicatorOnTop;
+    private readonly internals;
+    protected panelChanged(): void;
+    protected onClick(event: MouseEvent): void;
+    protected tabindexChanged(newValue: string): void;
+    componentWillLoad(): void;
+    componentWillRender(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    render(): any;
+}
+//# sourceMappingURL=icon-tab.d.ts.map