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

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

@@ -1,115 +1,130 @@
 import type { ComponentInterface } from '../../stencil-public-runtime';
 import type { Value } from '../controls';
-export type SwitchSize = 'large' | 'small' | 'standard';
+import type { Size } from '../shared';
 /**
  * @see https://quartz.se.com/build/components/switch
  */
 export declare class Switch implements ComponentInterface {
-  /**
-   * 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.
-   */
-  readonly inline: boolean;
-  /**
-   * The name of the checked icon to render.
-   *
-   * Available names depend on the icon library being used.
-   */
-  readonly iconCheckedName?: string;
-  /**
-   * The name of a registered checked icon library.
-   */
-  readonly iconCheckedLibrary: string;
-  /**
-   * The name of the unchecked icon to render.
-   *
-   * Available names depend on the icon library being used.
-   */
-  readonly iconUncheckedName?: string;
-  /**
-   * The name of a registered unchecked icon library.
-   */
-  readonly iconUncheckedLibrary: string;
-  /**
-   * The switches's size.
-   */
-  readonly size: SwitchSize;
-  /**
-   * The switch's checked text.
-   */
-  readonly textChecked?: string;
-  /**
-   * The switch's unchecked text.
-   */
-  readonly textUnchecked?: string;
-  /**
-   * Specify whether the switch should have focus when the page loads.
-   *
-   * @webnative
-   */
-  readonly 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
-   */
-  readonly form?: string;
-  /**
-   * The name of the switch, which is submitted with the form data. An
-   *incrementing ID is used by default.
-   *
-   * @webnative
-   */
-  readonly name: string;
-  /**
-   * The value of the switch, submitted as a name/value pair with form data.
-   *
-   * @webnative
-   */
-  value?: Value;
-  /**
-   * Emitted when the switch loses focus.
-   */
-  private readonly blurEmitter;
-  /**
-   * Emitted when a change to the switch's state is committed by the user.
-   */
-  private readonly changeEmitter;
-  /**
-   * Emitted when the switch gains focus.
-   */
-  private readonly focusEmitter;
-  private readonly element;
-  private inheritedAttributes;
-  private get computedDisabled();
-  protected onClick(event: MouseEvent): void;
-  componentWillLoad(): void;
-  render(): any;
-  private readonly onBlur;
-  private readonly onFocus;
+    #private;
+    /**
+     * 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.
+     */
+    readonly inline: boolean;
+    /**
+     * The switches's size.
+     */
+    readonly size?: Size;
+    /**
+     *Sets the switch's state.
+     *
+     * @webnative
+     */
+    checked?: boolean;
+    /**
+     * Prevents the switch 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 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
+     */
+    readonly form: ElementInternals['form'] | string;
+    /**
+     * Returns a list of the [`<label>`][] elements associated with the
+     * `qds-switch` element.
+     *
+     * [`<label>`]: https://developer.mozilla.org/docs/Web/HTML/Element/label
+     *
+     * @readonly
+     * @webnative
+     */
+    readonly labels: HTMLInputElement['labels'];
+    /**
+     * The name of the switch, which is submitted with the form data.
+     *
+     * @webnative
+     */
+    readonly name?: string;
+    /**
+     * The value of the switch, submitted as a name/value pair with form data.
+     *
+     * @webnative
+     */
+    readonly value?: Value;
+    /**
+     * Display the status indicator.
+     *
+     * By default, the indicator is visible.
+     */
+    readonly noIndicator: boolean;
+    /**
+     * The error message that would be shown to the user if the `<qds-switch>`
+     * was to be checked for validity.
+     *
+     * @readonly
+     * @webnative
+     */
+    readonly validationMessage: ElementInternals['validationMessage'];
+    /**
+     * The [`ValidityState`][] object for this `<qds-switch>`.
+     *
+     * [`ValidityState`]: https://developer.mozilla.org/docs/Web/API/ValidityState
+     *
+     * @readonly
+     * @webnative
+     */
+    readonly validity: ElementInternals['validity'];
+    /**
+     * True if `<qds-switch>` will be validated when the form is submitted;
+     * false otherwise.
+     *
+     * @readonly
+     * @webnative
+     */
+    readonly willValidate: ElementInternals['willValidate'];
+    private readonly internals;
+    /**
+     * Emitted when the switch loses focus.
+     */
+    private readonly blurEmitter;
+    /**
+     * Emitted when a change to the switch's state is committed by the user.
+     */
+    private readonly changeEmitter;
+    /**
+     * Emitted when the switch gains focus.
+     */
+    private readonly focusEmitter;
+    private readonly host;
+    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;
+    protected checkedChanged(): void;
+    protected disabledChanged(): void;
+    protected tabindexChanged(newValue: string | null): void;
+    protected valueChanged(): void;
+    componentWillLoad(): void;
+    render(): any;
+    checkValidity: ElementInternals['checkValidity'];
+    reportValidity: ElementInternals['reportValidity'];
+    setCustomValidity: HTMLInputElement['setCustomValidity'];
 }
 //# sourceMappingURL=switch.d.ts.map

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

@@ -0,0 +1,155 @@
+import type { ComponentInterface } from '../../stencil-public-runtime';
+import type { Importance, Size, Status } from '../shared';
+export type Action = 'closable' | 'expandable';
+export type TabImportance = Exclude<Importance, 'emphasized'>;
+export type TagStatus = Status | 'neutral';
+export type IndicatorPosition = 'block-end' | 'block-start' | 'inline-end' | 'inline-start';
+/**
+ * <qds-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/tab
+ */
+export declare class Tab implements ComponentInterface {
+    #private;
+    /**
+     * The name of the action icon to render.
+     */
+    readonly action?: Action;
+    /**
+     * 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?: TabImportance;
+    /**
+     * 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);
+    /**
+     * The tag icon's accessible text that will be used by
+     * screen readers.
+     */
+    readonly tagIconDescription?: string;
+    /**
+     * The name of the tab's tag icon to render.
+     *
+     * Available names depend on the icon library being used.
+     */
+    readonly tagIconName?: string;
+    /**
+     * The name of a registered icon library.
+     */
+    readonly tagIconLibrary: string;
+    /**
+     * The tab's tag importance.
+     */
+    readonly tagImportance?: HTMLQdsTagElement['importance'];
+    /**
+     * The tab's tag size.
+     */
+    readonly tagSize?: Size;
+    /**
+     * The tab's tag status.
+     */
+    readonly tagStatus?: Status;
+    /**
+     * The tab's tag text.
+     */
+    readonly tagText?: string;
+    /**
+     * Whether or not the tab is selected.
+     */
+    selected: boolean;
+    /**
+     * The tab's size.
+     */
+    readonly size?: Size;
+    /**
+     * Text to display for the subtitle.
+     */
+    readonly subtitle?: string;
+    /**
+     * Primary text to display.
+     */
+    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 is closed.
+     */
+    private readonly closeEmitter;
+    /**
+     * 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;
+    protected actionChanged(): void;
+    componentWillLoad(): void;
+    componentWillRender(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    render(): any;
+}
+//# sourceMappingURL=tab.d.ts.map

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

@@ -0,0 +1,56 @@
+import type { ComponentInterface } from '../../stencil-public-runtime';
+export type Layer = 'accessory' | 'main' | 'panel' | 'popup';
+export type Level = 'root' | 'section' | 'subsection';
+export type Orientation = 'horizontal' | 'vertical';
+export type Alignment = 'centered' | 'left';
+/**
+ * `<qds-tabbar>` is the component that facilitates navigation between the groups
+ * of related content within the page.
+ * It allows users to switch between groups by clicking on Tabs without going to another page.
+ */
+export declare class Tabbar implements ComponentInterface {
+    #private;
+    /**
+     * The tabbar's layer.
+     */
+    layer?: Layer;
+    /**
+     * The tabbar's level.
+     */
+    level?: Level;
+    /**
+     * The tabbar's orientation.
+     */
+    orientation?: Orientation;
+    /**
+     * the tablist Description
+     */
+    readonly tablistDescription?: string;
+    /**
+     * Displays a divider line.
+     */
+    showDivider?: boolean;
+    /**
+     * The alignment of tabs. Only applicable for horizontal orientation.
+     */
+    readonly alignment?: Alignment;
+    /**
+     * Emitted when the user selects the tab.
+     */
+    private readonly showEmitter;
+    /**
+     * Emitted when the user selects the tab.
+     */
+    private readonly hideEmitter;
+    private readonly host;
+    private disableEndArrow;
+    private disableStartArrow;
+    private activeTab?;
+    protected windowResize(): void;
+    componentWillLoad(): void;
+    componentDidRender(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    render(): any;
+}
+//# sourceMappingURL=tabbar.d.ts.map

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

@@ -0,0 +1,14 @@
+import type { ComponentInterface } from '../../stencil-public-runtime';
+/**
+ * The `<qds-table>` element represents tabular data — that is, information
+ * presented in a two-dimensional table comprised of rows and columns of cells
+ * containing data.
+ *
+ * @see https://quartz.se.com/build/components/table
+ */
+export declare class Table implements ComponentInterface {
+    private readonly internals;
+    componentWillLoad(): void;
+    render(): any;
+}
+//# sourceMappingURL=table.d.ts.map

package/dist/types/components/table-cell/table-cell.d.ts

@@ -0,0 +1,33 @@
+import type { ComponentInterface } from '../../stencil-public-runtime';
+/**
+ * The `<qds-table-cell>` element defines a cell of a table that contains data.
+ * It participates in the *table model*.
+ *
+ * @see https://quartz.se.com/build/components/table
+ */
+export declare class TableCell implements ComponentInterface {
+    /**
+     * Non-negative integer value that indicates for how many columns the cell
+     * extends. Its default value is `1`. Values higher than 1000 will be
+     * considered as incorrect and will be set to the default value (1).
+     *
+     * @webnative
+     */
+    readonly colSpan?: number;
+    /**
+     * Non-negative integer value that indicates for how many rows the cell
+     * extends. Its default value is `1`; if its value is set to `0`, it extends
+     * until the end of the table section (`<qds-table-head>` or
+     * `<qds-table-body>`, even if implicitly defined), that the cell belongs to.
+     * Values higher than 65534 are clipped down to 65534.
+     *
+     * @webnative
+     */
+    readonly rowSpan?: number;
+    private readonly internals;
+    protected colSpanChanged(newValue: number | undefined): void;
+    protected rowSpanChanged(newValue: number | undefined): void;
+    componentWillLoad(): void;
+    render(): any;
+}
+//# sourceMappingURL=table-cell.d.ts.map

package/dist/types/components/table-head-cell/table-head-cell.d.ts

@@ -0,0 +1,50 @@
+import type { ComponentInterface } from '../../stencil-public-runtime';
+export type Scope = 'col' | 'row';
+/**
+ * The `<qds-table-head-cell>` element defines a cell as the header of a group
+ * of table cells. The exact nature of this group is defined by the `scope`
+ * attribute.
+ *
+ * @see https://quartz.se.com/build/components/table
+ */
+export declare class TableHeadCell implements ComponentInterface {
+    /**
+     * Non-negative integer value that indicates for how many columns the cell
+     * extends. Its default value is `1`. Values higher than 1000 will be
+     * considered as incorrect and will be set to the default value (1).
+     *
+     * @webnative
+     */
+    readonly colSpan?: number;
+    /**
+     * Non-negative integer value that indicates for how many rows the cell
+     * extends. Its default value is `1`; if its value is set to `0`, it extends
+     * until the end of the table section (`<qds-table-head>` or
+     * `<qds-table-body>`, even if implicitly defined), that the cell belongs to.
+     * Values higher than 65534 are clipped down to 65534.
+     *
+     * @webnative
+     */
+    readonly rowSpan?: number;
+    /**
+     * Defines the cells that the header element relates to. It may have the
+     * following values:
+     *
+     * - `row`: The header relates to all cells of the row it belongs to.
+     * - `col`: The header relates to all cells of the column it belongs to.
+     *
+     * If the `scope` attribute is not specified, or its value is not `row` or
+     * `col`, then browsers automatically select the set of cells to which the
+     * header cell applies.
+     *
+     * @webnative
+     */
+    readonly scope?: Scope;
+    private readonly internals;
+    protected colSpanChanged(newValue: number | undefined): void;
+    protected rowSpanChanged(newValue: number | undefined): void;
+    protected scopeChanged(newValue: Scope | undefined): void;
+    componentWillLoad(): void;
+    render(): any;
+}
+//# sourceMappingURL=table-head-cell.d.ts.map

package/dist/types/components/table-row/table-row.d.ts

@@ -0,0 +1,14 @@
+import type { ComponentInterface } from '../../stencil-public-runtime';
+/**
+ * The `<qds-table-row>` element defines a row of cells in a table. The row's
+ * cells can then be established using a mix of `<qds-table-cell>` (data cell)
+ * and `<qds-table-head-cell>` (header cell) elements.
+ *
+ * @see https://quartz.se.com/build/components/table
+ */
+export declare class TableRow implements ComponentInterface {
+    private readonly internals;
+    componentWillLoad(): void;
+    render(): any;
+}
+//# sourceMappingURL=table-row.d.ts.map

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

@@ -0,0 +1,55 @@
+import type { ComponentInterface } from '../../stencil-public-runtime';
+import type { Importance, Size, Status } from '../shared';
+export type TagStatus = Status | 'neutral';
+/**
+ * The `<qds-tag>` element is a static descriptor used for items that need to
+ * be labeled, categorized, or organized using keywords that describe them.
+ *
+ * @see https://quartz.se.com/build/components/tag
+ */
+export declare class Tag 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 tag's importance.
+     */
+    readonly importance?: Importance;
+    /**
+     * The tag's status.
+     */
+    readonly status?: TagStatus;
+    /**
+     * The tag's size.
+     */
+    readonly size?: Size;
+    /**
+     * The tag's text.
+     */
+    readonly text?: string;
+    /**
+     * Provides a text description of the icon for screen readers.
+     */
+    readonly iconDescription?: string;
+    /**
+     * Displays an indicator if `true`.
+     */
+    readonly badge?: boolean;
+    /**
+     * The indicator badge's accessible text that will be used by
+     * screen readers.
+     */
+    readonly badgeDescription?: string;
+    private readonly host;
+    componentWillLoad(): void;
+    render(): any;
+}
+//# sourceMappingURL=tag.d.ts.map