kemet-ui 4.0.0 → 4.0.2

package/dist/constants-CcB9aXsT.d.ts

@@ -0,0 +1,525 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+import { F as FormSubmitController } from './form-controller-BR0gZhrG.js';
+
+interface InterfaceKemetSelectionEvent {
+    element: KemetCombo;
+    text: string;
+    id: string;
+}
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-combo
+ * @summary Allows the user to select a choice filtered through an Input. May only be used as a component of Field.
+ *
+ * @prop {string} slug - Uniquely identifies the component. Should match the slug used in a control.
+ * @prop {array} options - An array of items listed for the combo box
+ * @prop {boolean} show - Controls the display of the combo box
+ *
+ * @csspart combobox - The combo's container element.
+ * @csspart listbox - The list element in the combo.
+ *
+ * @cssproperty --kemet-combo-width - The width of the combo box.
+ * @cssproperty --kemet-combo-margin - The margins on the combo box.
+ * @cssproperty --kemet-combo-max-height - The max height of the combo box.
+ * @cssproperty --kemet-combo-border - The border of the combo box.
+ * @cssproperty --kemet-combo-border-radius - The border radius of the combo box.
+ * @cssproperty --kemet-combo-background-color - The background color of the combo box.
+ * @cssproperty --kemet-combo-shadow - The shadow of the combo box.
+ * @cssproperty --kemet-combo-hover-color - The hover item's text color.
+ * @cssproperty --kemet-combo-hover-background-color - The hover item's background color.
+ *
+ * @event kemet-selection - Fires when a selection has been made
+ *
+ */
+declare class KemetCombo extends LitElement {
+    static styles: lit.CSSResult[];
+    slug: string;
+    options: string[];
+    show: boolean;
+    filteredOptions: string[];
+    field: KemetField;
+    input: HTMLInputElement;
+    firstUpdated(): void;
+    render(): lit_html.TemplateResult<1>;
+    makeOptions(): lit_html.TemplateResult<1>[];
+    handleInput(event: CustomEvent): void;
+    handleFocus(): void;
+    handleSelection(event: KeyboardEvent): void;
+    handleOptionKeyDown(event: KeyboardEvent): void;
+    handleInputKeyDown(event: KeyboardEvent): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-combo': KemetCombo;
+    }
+}
+
+declare const inputTypes: readonly ["text", "color", "date", "datetime-local", "email", "password", "hidden", "month", "number", "reset", "search", "tel", "time", "url", "week"];
+declare enum EnumInputTypes {
+    Text = "text",
+    Color = "color",
+    Date = "date",
+    DateTimeLocal = "datetime-local",
+    Email = "email",
+    Password = "password",
+    Hidden = "hidden",
+    Month = "month",
+    Number = "number",
+    Reset = "reset",
+    Search = "search",
+    Tel = "tel",
+    Time = "time",
+    Url = "url",
+    Week = "week"
+}
+type TypeInputTypes = typeof inputTypes[number];
+declare const ariaAutoComplete: readonly ["inline", "list", "both", "none"];
+declare enum EnumAriaAutoComplete {
+    Inline = "inline",
+    List = "list",
+    Both = "both",
+    None = "none"
+}
+type TypeAriaAutoComplete = typeof ariaAutoComplete[number];
+declare const autoComplete: readonly ["on", "off", "additional-name", "address-level1", "address-level2", "address-level3", "address-level4", "address-line1", "address-line2", "address-line3", "bday", "bday-year", "bday-day", "bday-month", "billing", "cc-additional-name"];
+declare enum EnumAutoComplete {
+    On = "on",
+    Off = "off",
+    AdditionalName = "additional-name",
+    AddressLevel1 = "address-level1",
+    AddressLevel2 = "address-level2",
+    AddressLevel3 = "address-level3",
+    AddressLevel4 = "address-level4",
+    AddressLine1 = "address-line1",
+    AddressLine2 = "address-line2",
+    AddressLine3 = "address-line3",
+    Bday = "bday",
+    BdayYear = "bday-year",
+    BdayDay = "bday-day",
+    BdayMonth = "bday-month",
+    Billing = "billing",
+    CcAdditionalName = "cc-additional-name"
+}
+type TypeAutoComplete = typeof autoComplete[number];
+declare const inputModes: readonly ["none", "text", "decimal", "numeric", "tel", "search", "email", "url"];
+declare enum EnumInputModes {
+    None = "none",
+    Text = "text",
+    Decimal = "decimal",
+    Numeric = "numeric",
+    Tel = "tel",
+    Search = "search",
+    Email = "email",
+    Url = "url"
+}
+type TypeInputModes = typeof inputModes[number];
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-input
+ * @summary An enhanced input element.
+ *
+ * @prop {string} slug - Used for the id of the input. Should match the slug used in a control if applicable.
+ * @prop {string} name - The name of the input
+ * @prop {string} placeholder - The placeholder attribute
+ * @prop {string} minlength - The minlength attribute
+ * @prop {string} maxlength - The maxlength attribute
+ * @prop {string} min - The min attribute
+ * @prop {string} max - The max attribute
+ * @prop {string} step - The step attribute
+ * @prop {TypeAutoComplete} autocomplete - The autocomplete attribute
+ * @prop {string} pattern - The pattern attribute
+ * @prop {TypeInputModes} inputmode - The input mode attribute
+ * @prop {boolean} autofocus - The autofocus attribute
+ * @prop {boolean} disabled - The disable attribute
+ * @prop {boolean} readonly - The readonly attribute
+ * @prop {boolean} required - The required attribute
+ * @prop {string} type - The type of input
+ * @prop {string} value - The input's value
+ * @prop {boolean} invalid - States whether the input is invalid
+ * @prop {string} status - The status of the input
+ * @prop {boolean} validateOnBlur - Activates validation on blur
+ * @prop {TypeAriaAutoComplete} ariaAutoComplete - Aria Autocomplete
+ * @prop {string} ariaControls - Aria Controls
+ * @prop {string} ariaActiveDescendant - Aria Active Descendant
+ * @prop {TypeRoundedSizes} rounded - Displays rounded corners
+ * @prop {boolean} filled - Displays a filled input box
+ * @prop {string} iconRight - Custom Icon to the right of the input
+ * @prop {string} iconLeft - Custom Icon to the left of the input
+ * @prop {number} iconSize - Size of the icons
+ * @prop {object} validity - The HTML5 validity object.
+ * @prop {boolean} isPasswordVisible - Manages password visibility
+ * @prop {string} inputType - Input Type of keypress handled through handleInput(e)
+ * @prop {boolean} focused - Determines if the input is focused
+ *
+ * @csspart input
+ *
+ * @cssproperty --kemet-input-height - The height of the input.
+ * @cssproperty --kemet-input-padding - The padding on the input.
+ * @cssproperty --kemet-input-border - The border of the input.
+ * @cssproperty --kemet-input-border-color-error -  The border of the error state.
+ * @cssproperty --kemet-input-border-color-success - The border of the success state.
+ * @cssproperty --kemet-input-border-color-warning - The border of the warning state.
+ * @cssproperty --kemet-input-icon-left-padding - The icon-left padding.
+ * @cssproperty --kemet-input-icon-right-padding - The icon-right padding.
+ * @cssproperty --kemet-input-border-radius-rounded - The border radius on rounded.
+ * @cssproperty --kemet-input-border-filled - The border on filled.
+ * @cssproperty --kemet-input-color-filled - The color on filled.
+ * @cssproperty --kemet-input-background-color-filled - The background-color on filled.
+ * @cssproperty --kemet-input-background-color-error - The error state background color.
+ * @cssproperty --kemet-input-background-color-success - The success state background color.
+ * @cssproperty --kemet-input-background-color-warning - The warning state background color.
+ *
+ * @event kemet-focus - Fires when the input receives focus
+ * @event kemet-blur - Fires when the input loses focus
+ * @event kemet-status-change Fires when there's a change in status. This event includes an object that reports: 1) the status. 2) HTML5 validity object. 3) the component element.
+ * Use the validity object to support custom validation messages.
+ * @event kemet-input - Fires when the input receives input
+ *
+ */
+declare class KemetInput extends LitElement {
+    /** @internal */
+    formSubmitController: FormSubmitController;
+    static styles: lit.CSSResult[];
+    slug: string;
+    name: string;
+    placeholder: string;
+    minlength: number;
+    maxlength: number;
+    min: string;
+    max: string;
+    step: number;
+    autocomplete: TypeAutoComplete;
+    pattern: string;
+    inputmode: TypeInputModes;
+    autofocus: boolean;
+    disabled: boolean;
+    readonly: boolean;
+    required: boolean;
+    type: TypeInputTypes;
+    value: string;
+    invalid: boolean;
+    status: TypeStatus;
+    validateOnBlur: boolean;
+    ariaAutoComplete: TypeAriaAutoComplete;
+    ariaControls: string;
+    ariaActiveDescendant: string;
+    filled: boolean;
+    iconRight: boolean;
+    iconLeft: boolean;
+    validity: object;
+    isPasswordVisible: boolean;
+    inputType: string;
+    focused: boolean;
+    rounded: TypeRoundedSizes;
+    field: KemetField;
+    form: HTMLFormElement;
+    input: HTMLInputElement;
+    constructor();
+    firstUpdated(): void;
+    render(): lit_html.TemplateResult<1>;
+    handleLeftChange(): void;
+    handleRightChange(): void;
+    makeIconClear(): lit_html.TemplateResult<1>;
+    makeVisibilityToggle(): lit_html.TemplateResult<1>;
+    /**
+     * Handles when the input receives focus
+     * @private
+     */
+    handleFocus(): void;
+    /**
+     * Handles when the input loses focus
+     * @private
+     */
+    handleBlur(): void;
+    /**
+     * Handles when the input changes value
+     * @private
+     */
+    handleChange(event: Event): void;
+    /**
+     * Handles when the input receives input
+     * @private
+     */
+    handleInput(event: InputEvent): void;
+    /**
+     * Handles when the input has an error
+     * @private
+     */
+    handleInvalid(event: Event): void;
+    handleStatus(event: CustomEvent): void;
+    /**
+     * Toggles password visibility
+     * @private
+     */
+    togglePasswordVisibility(): void;
+    /**
+     * Handles the clear button for search
+     * @private
+     */
+    handleClear(): void;
+    /**
+     * Checks the validity of the character limit for the count component
+     * @public
+     * @method checkLimitValidity
+     * @returns {boolean}
+     */
+    checkLimitValidity(): boolean;
+    /**
+     * Checks the validity of the standard input
+     * @public
+     * @method checkValidity
+     * @returns {boolean}
+     */
+    checkValidity(): boolean;
+    /**
+     * Focuses the standard input
+     * @public
+     * @method focus
+     * @returns {void}
+     */
+    focus(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-input': KemetInput;
+    }
+}
+
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-textarea
+ * @summary An enhanced textarea element.
+ *
+ * @prop {string} slug
+ * @prop {string}  name
+ * @prop {string}  placeholder
+ * @prop {number}  minlength
+ * @prop {number}  maxlength
+ * @prop {string}  inputmode
+ * @prop {boolean}  disabled
+ * @prop {boolean}  readonly
+ * @prop {boolean}  required
+ * @prop {string}  value
+ * @prop {boolean}  invalid
+ * @prop {TypeStatus}  status
+ * @prop {boolean}  validateOnBlur
+ * @prop {TypeRoundedSizes}  rounded
+ * @prop {boolean}  filled
+ * @prop {number}  rows
+ * @prop {boolean} autocorrect
+ *
+ *
+ * @csspart textarea
+ *
+ * @cssproperty --kemet-textarea-padding - The padding on the textarea.
+ * @cssproperty --kemet-textarea-border - The border of the textarea.
+ * @cssproperty --kemet-textarea-border-color-error - The border of the error state.
+ * @cssproperty --kemet-textarea-border-color-success - The border of the success state.
+ * @cssproperty --kemet-textarea-border-color-warning - The border of the warning state.
+ * @cssproperty --kemet-textarea-border-radius-rounded - The border radius on rounded.
+ * @cssproperty --kemet-textarea-border-filled - The border on filled.
+ * @cssproperty --kemet-textarea-color-filled - The color on filled.
+ * @cssproperty --kemet-textarea-background-color-filled - The background-color on filled.
+ * @cssproperty --kemet-textarea-background-color-error - The error state background color.
+ * @cssproperty --kemet-textarea-background-color-success - The success state background color.
+ * @cssproperty --kemet-textarea-background-color-warning - The warning state background color.
+ *
+ */
+declare class KemetTextarea extends LitElement {
+    formSubmitController: FormSubmitController;
+    static styles: lit.CSSResult[];
+    slug: string;
+    name: string;
+    placeholder: string;
+    minlength: number;
+    maxlength: number;
+    inputmode: string;
+    autofocus: boolean;
+    disabled: boolean;
+    readonly: boolean;
+    required: boolean;
+    value: string;
+    invalid: boolean;
+    status: TypeStatus;
+    rows: number;
+    validateOnBlur: boolean;
+    filled: boolean;
+    rounded: TypeRoundedSizes;
+    autocorrect: boolean;
+    form: HTMLFormElement;
+    control: KemetField;
+    textarea: HTMLTextAreaElement;
+    hasFocus: boolean;
+    validity: ValidityState;
+    constructor();
+    firstUpdated(): void;
+    render(): lit_html.TemplateResult<1>;
+    /**
+     * Handles when the textarea receives focus
+     * @private
+     */
+    handleFocus(): void;
+    /**
+     * Handles when the textarea loses focus
+     * @private
+     */
+    handleBlur(): void;
+    /**
+     * Handles when the textarea changes value
+     * @private
+     */
+    handleChange(): void;
+    /**
+     * Handles when the textarea receives input
+     * @private
+     */
+    handleInput(): void;
+    /**
+     * Handles when the textarea has an error
+     * @private
+     */
+    handleInvalid(): void;
+    /**
+     * Checks the validity of the character limit for the count component
+     * @private
+     * @returns {boolean}
+     */
+    checkLimitValidity(): boolean;
+    /**
+     * Checks the validity of the standard input
+     * @public
+     * @returns {boolean}
+     */
+    checkValidity(): boolean;
+    /**
+     * Focuses the standard input
+     * @public
+     */
+    focus(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-textarea': KemetTextarea;
+    }
+}
+
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-field
+ * @summary Used in combination with Input, Select, and Textarea, to make a Field.
+ *
+ * @prop {string} slug - Uniquely identifies the control. Use the same slug for slotted subcomponents.
+ * @prop {string} label - The label text
+ * @prop {string} message - The validation message for error or success
+ * @prop {boolean} focused - Determines if the containing input is focused
+ * @prop {TypeStatus} status - The validation status of standard, error, or success
+ * @prop {boolean} filled - Is true when the containing input has a value
+ * @prop {number} length - The length of the containing input
+ * @prop {boolean} disabled - Determines the disabled state of the control
+ * @prop {string} errorIcon - The icon while in an error or warning state
+ * @prop {string} successIcon - The icon while in a success state
+ *
+ * @slot component - Allows subcomponents of the field to display.
+ *
+ * @csspart label - The label of the field.
+ * @csspart message - The validation message of the field.
+ * @csspart text - The text in the label.
+ *
+ * @event kemet-input - Fires when input fires on the input slot
+ *
+ */
+declare class KemetField extends LitElement {
+    static styles: lit.CSSResult[];
+    slug: string;
+    label: string;
+    message: string;
+    focused: boolean;
+    status: TypeStatus;
+    filled: boolean;
+    length: number;
+    disabled: boolean;
+    errorIcon: string;
+    successIcon: string;
+    slotInput: KemetInput | KemetTextarea;
+    slotCombo: KemetCombo;
+    firstUpdated(): void;
+    render(): lit_html.TemplateResult<1>;
+    makeStatusMessage(): lit_html.TemplateResult<1>;
+    handleFocused(event: CustomEvent): void;
+    handleStatus(event: CustomEvent): void;
+    handleInput(event: CustomEvent): void;
+    handleSelection(event: CustomEvent): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-field': KemetField;
+    }
+}
+
+interface InterfaceKemetStatusChangeEvent {
+    status: TypeStatus;
+    validity: ValidityState;
+    element: KemetField;
+}
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-count
+ * @summary Maintains a character count for an input field. Is to be used only in the component slot of a Field component.
+ *
+ * @prop {string} message - The text label shown to users
+ * @prop {number} remaining - The number of characters remaining
+ * @prop {number} limit - The maximum number of characters allowed
+ * @prop {boolean} validateImmediately - Set to true if the field should validate as soon as the character limit is reached
+ *
+ * @cssproperty --kemet-count-font-size - The font size. Default: 90%.
+ *
+ * @event kemet-status-change - Fires when there's a change in status.
+ *
+ */
+declare class KemetCount extends LitElement {
+    static styles: lit.CSSResult[];
+    message: string;
+    limit: number;
+    validateImmediately: boolean;
+    remaining: number;
+    field: KemetField;
+    inputSlot: KemetInput | KemetTextarea;
+    input: HTMLInputElement;
+    textarea: HTMLTextAreaElement;
+    firstUpdated(): void;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-count': KemetCount;
+    }
+}
+
+declare const directions: readonly ["none", "top", "right", "bottom", "left"];
+type TypeDirection = typeof directions[number];
+declare const statuses: readonly ["standard", "primary", "success", "warning", "error"];
+type TypeStatus = typeof statuses[number];
+declare const axis: readonly ["horizontal", "vertical"];
+type TypeAxis = typeof axis[number];
+declare const roundedSizes: readonly ["sm", "md", "lg", "xl", "circle", "pill"];
+type TypeRoundedSizes = typeof roundedSizes[number];
+interface InterfaceInputDetails {
+    status: TypeStatus;
+    validity: ValidityState;
+    element: HTMLElement | KemetCount | KemetInput;
+    value?: string;
+}
+
+export { EnumInputTypes as E, type InterfaceKemetSelectionEvent as I, KemetField as K, type TypeStatus as T, type TypeRoundedSizes as a, type TypeDirection as b, KemetCombo as c, KemetInput as d, KemetTextarea as e, type TypeAxis as f, KemetCount as g, type InterfaceInputDetails as h, inputTypes as i, type TypeInputTypes as j, ariaAutoComplete as k, EnumAriaAutoComplete as l, type TypeAriaAutoComplete as m, autoComplete as n, EnumAutoComplete as o, type TypeAutoComplete as p, inputModes as q, EnumInputModes as r, type TypeInputModes as s, type InterfaceKemetStatusChangeEvent as t };

package/dist/elements/accordion-panel.d.mts

@@ -0,0 +1,55 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-accordion-panel
+ * @summary A blade for an accordion.
+ *
+ * @prop {boolean} opened - Determines the opened state of the panel
+ * @prop {string} maxHeight - Sets the max height of the panel's body
+ * @prop {string} slug - Uniquely identifies a panel for accessibility purposes
+ *
+ * @slot trigger - The trigger button that opens and closes the panel.
+ * @slot body - The body content of the panel.
+ * @slot icon - The icon for the panel.
+ *
+ * @csspart trigger - Contains the trigger for the panel.
+ * @csspart body - Contains the body for the panel.
+ *
+ * @event kemet-opened - Fires when a panel is opened
+ * @event kemet-closed - Fires when a panel is closed
+ *
+ */
+declare class KemetAccordionPanel extends LitElement {
+    static styles: lit.CSSResult[];
+    opened: boolean | undefined;
+    maxHeight: string;
+    slug: string;
+    index: number;
+    /** @internal */
+    focusableSelector: string;
+    /** @internal */
+    bodyElement: HTMLElement | null;
+    /** @internal */
+    bodyElementFirst: HTMLElement | null | undefined;
+    /** @internal */
+    bodyElementLast: HTMLElement | null | undefined;
+    firstUpdated(): void;
+    updated(prevProps: Map<string, never>): void;
+    render(): lit_html.TemplateResult<1>;
+    toggle(): void;
+    focusableBodyElements(): void;
+    a11y(): void;
+    handleKeyDown(event: KeyboardEvent): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-accordion-panel': KemetAccordionPanel;
+    }
+}
+
+export { KemetAccordionPanel as default };

package/dist/elements/accordion-panel.d.ts

@@ -0,0 +1,55 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-accordion-panel
+ * @summary A blade for an accordion.
+ *
+ * @prop {boolean} opened - Determines the opened state of the panel
+ * @prop {string} maxHeight - Sets the max height of the panel's body
+ * @prop {string} slug - Uniquely identifies a panel for accessibility purposes
+ *
+ * @slot trigger - The trigger button that opens and closes the panel.
+ * @slot body - The body content of the panel.
+ * @slot icon - The icon for the panel.
+ *
+ * @csspart trigger - Contains the trigger for the panel.
+ * @csspart body - Contains the body for the panel.
+ *
+ * @event kemet-opened - Fires when a panel is opened
+ * @event kemet-closed - Fires when a panel is closed
+ *
+ */
+declare class KemetAccordionPanel extends LitElement {
+    static styles: lit.CSSResult[];
+    opened: boolean | undefined;
+    maxHeight: string;
+    slug: string;
+    index: number;
+    /** @internal */
+    focusableSelector: string;
+    /** @internal */
+    bodyElement: HTMLElement | null;
+    /** @internal */
+    bodyElementFirst: HTMLElement | null | undefined;
+    /** @internal */
+    bodyElementLast: HTMLElement | null | undefined;
+    firstUpdated(): void;
+    updated(prevProps: Map<string, never>): void;
+    render(): lit_html.TemplateResult<1>;
+    toggle(): void;
+    focusableBodyElements(): void;
+    a11y(): void;
+    handleKeyDown(event: KeyboardEvent): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-accordion-panel': KemetAccordionPanel;
+    }
+}
+
+export { KemetAccordionPanel as default };