kemet-ui 4.0.2 → 5.0.0

package/dist/constants-W9QKPlZP.d.ts

@@ -0,0 +1,563 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+import { F as FormSubmitController } from './form-controller-3q581XcZ.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-combo-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: HTMLKemetFieldElement;
+    input: HTMLInputElement;
+    firstUpdated(): void;
+    render(): lit_html.TemplateResult<1>;
+    makeOptions(): lit_html.TemplateResult<1>[] | null;
+    handleInput(event: Event): void;
+    handleFocus(): void;
+    handleSelection(event: KeyboardEvent): void;
+    handleOptionKeyDown(event: KeyboardEvent): void;
+    handleInputKeyDown(event: KeyboardEvent): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-combo': KemetCombo;
+    }
+}
+
+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"
+}
+declare enum EnumAriaAutoComplete {
+    Inline = "inline",
+    List = "list",
+    Both = "both",
+    None = "none"
+}
+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"
+}
+declare enum EnumInputModes {
+    None = "none",
+    Text = "text",
+    Decimal = "decimal",
+    Numeric = "numeric",
+    Tel = "tel",
+    Search = "search",
+    Email = "email",
+    Url = "url"
+}
+/**
+ * @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 {EnumAutoComplete} autocomplete - The autocomplete attribute
+ * @prop {string} pattern - The pattern attribute
+ * @prop {EnumInputModes} 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 {EnumAriaAutoComplete} ariaAutoComplete - Aria Autocomplete
+ * @prop {string} ariaControls - Aria Controls
+ * @prop {string} ariaActiveDescendant - Aria Active Descendant
+ * @prop {EnumRoundedSizes} 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
+ *
+ * @slot left - Allows you to place an icon to the left of the input.
+ * @slot right - Allows you to place an icon to the right of the input.
+ *
+ * @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-input-focus - Fires when the input receives focus
+ * @event kemet-input-blur - Fires when the input loses focus
+ * @event kemet-input-appearance-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-input - Fires when the input receives input
+ *
+ */
+declare class HTMLKemetInputElement 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?: EnumAutoComplete;
+    pattern?: string;
+    inputmode?: EnumInputModes;
+    autofocus: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    required?: boolean;
+    type: EnumInputTypes;
+    value: string;
+    invalid?: boolean;
+    appearance: EnumAppearances;
+    validateOnBlur: boolean;
+    ariaAutoComplete: EnumAriaAutoComplete;
+    ariaControls?: string;
+    ariaActiveDescendant?: string;
+    filled?: boolean;
+    iconRight: boolean;
+    iconLeft: boolean;
+    validity: object;
+    isPasswordVisible: boolean;
+    focused: boolean;
+    rounded?: EnumRoundedSizes;
+    polarity?: 'light' | 'dark';
+    dom: string;
+    field: HTMLKemetFieldElement;
+    form: HTMLFormElement;
+    input: HTMLInputElement;
+    constructor();
+    firstUpdated(): void;
+    render(): lit_html.TemplateResult<1>;
+    handleLeftChange(): void;
+    handleRightChange(): void;
+    makeIconClear(): lit_html.TemplateResult<1> | null;
+    makeVisibilityToggle(): lit_html.TemplateResult<1> | null;
+    /**
+     * 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: Event): 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': HTMLKemetInputElement;
+    }
+}
+
+/**
+ * @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 {EnumAppearances}  appearance
+ * @prop {boolean}  validateOnBlur
+ * @prop {EnumRoundedSizes}  rounded
+ * @prop {boolean}  filled
+ * @prop {number}  rows
+ * @prop {boolean} autocorrect
+ * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background
+ * @prop {string} dom - The status of dom initalization.
+ *
+ *
+ * @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.
+ *
+ * @fires kemet-textarea-focused - Fired when the textarea is focused or blurred
+ * @detail {boolean} focused - Whether the textarea is focused
+ *
+ * @fires kemet-textarea-input - Fired when the textarea receives input
+ * @detail {string} value - The value of the textarea
+ *
+ * @fires kemet-textarea-appearance-change - Fired when the textarea appearance changes
+ * @detail {EnumAppearances} appearance - The appearance of the textarea
+ *
+ * @fires kemet-textarea-mounted - Fired when the textarea is mounted to the DOM
+ * @detail {HTMLElement} element - The textarea element
+ *
+ */
+declare class HTMLKemetTextareaElement 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;
+    appearance?: EnumAppearances;
+    rows: number;
+    validateOnBlur?: boolean;
+    filled?: boolean;
+    rounded?: EnumRoundedSizes;
+    autocorrect: boolean;
+    form: HTMLFormElement;
+    control: HTMLKemetFieldElement;
+    textarea: HTMLTextAreaElement;
+    hasFocus: boolean;
+    validity: ValidityState;
+    polarity?: 'light' | 'dark';
+    dom: string;
+    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': HTMLKemetTextareaElement;
+    }
+}
+
+/**
+ * @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 {EnumAppearances} appearance - The appearance of the input
+ * @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 HTMLKemetFieldElement extends LitElement {
+    static styles: lit.CSSResult[];
+    slug: string;
+    label: string;
+    message: string;
+    focused: boolean;
+    appearance: EnumAppearances;
+    filled: boolean;
+    length: number;
+    disabled: boolean;
+    errorIcon: string;
+    successIcon: string;
+    polarity?: 'light' | 'dark';
+    dom: string;
+    slotInput: HTMLKemetInputElement | HTMLKemetTextareaElement;
+    slotCombo: KemetCombo;
+    firstUpdated(): void;
+    render(): lit_html.TemplateResult<1>;
+    makeStatusMessage(): lit_html.TemplateResult<1> | null;
+    handleFocused(event: Event): void;
+    handleAppearance(event: Event): void;
+    handleInput(event: Event): void;
+    handleSelection(event: Event): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-field': HTMLKemetFieldElement;
+    }
+}
+
+interface InterfaceAppearanceChangeEvent {
+    appearance: EnumAppearances;
+    validity: ValidityState;
+    element: HTMLKemetFieldElement;
+}
+/**
+ * @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%.
+ *
+ * @fires kemet-count-appearance-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: HTMLKemetFieldElement;
+    inputSlot: HTMLKemetInputElement | HTMLKemetTextareaElement;
+    input: HTMLInputElement | null;
+    textarea: HTMLTextAreaElement | null;
+    firstUpdated(): void;
+    render(): lit_html.TemplateResult<1>;
+    handleInput(event: Event): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-count': KemetCount;
+    }
+}
+
+declare enum EnumDirections {
+    None = "none",
+    Top = "top",
+    Right = "right",
+    Bottom = "bottom",
+    Left = "left"
+}
+declare const appearances: readonly ["neutral", "brand", "success", "warning", "error"];
+declare enum EnumAppearances {
+    Neutral = "neutral",
+    Brand = "brand",
+    Success = "success",
+    Warning = "warning",
+    Error = "error",
+    Info = "info",
+    Link = "link"
+}
+type TypeAppearance = typeof appearances[number];
+declare enum EnumAxis {
+    Horizontal = "horizontal",
+    Vertical = "vertical"
+}
+declare const roundedSizes: readonly ["sm", "md", "lg", "xl", "circle", "pill"];
+declare enum EnumRoundedSizes {
+    SM = "sm",
+    MD = "md",
+    LG = "lg",
+    XL = "xl",
+    Circle = "circle",
+    Pill = "pill"
+}
+type TypeRoundedSizes = typeof roundedSizes[number];
+interface InterfaceInputDetails {
+    status: TypeAppearance;
+    validity: ValidityState;
+    element: HTMLElement | KemetCount | HTMLKemetInputElement;
+    value?: string;
+}
+
+export { EnumAppearances as E, HTMLKemetFieldElement as H, type InterfaceKemetSelectionEvent as I, KemetCombo as K, type TypeAppearance as T, KemetCount as a, type InterfaceInputDetails as b, HTMLKemetInputElement as c, type TypeRoundedSizes as d, EnumRoundedSizes as e, HTMLKemetTextareaElement as f, EnumAxis as g, EnumDirections as h, EnumAriaAutoComplete as i, EnumAutoComplete as j, EnumInputModes as k, EnumInputTypes as l, type InterfaceAppearanceChangeEvent as m };

package/dist/elements/accordion/index.d.ts

@@ -0,0 +1,58 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+import KemetAccordionPanel from '../accordion-panel/index.js';
+
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-accordion
+ * @summary A component that acts like a standard accordion.
+ *
+ * @prop {number} currentPanel - The index value for the most recently opened panel
+ * @prop {boolean} togglePanels - Support for closing all inactive panels when one is opened
+ *
+ * @fires kemet-accordion-mounted - Fired when the accordion is mounted to the DOM
+ * @detail {HTMLElement} element - The accordion element
+ */
+declare class KemetAccordion extends LitElement {
+    static styles: lit.CSSResult[];
+    currentPanel: number;
+    togglePanels: boolean;
+    dom: string;
+    polarity?: 'light' | 'dark';
+    panels: NodeListOf<KemetAccordionPanel>;
+    onKeyDown: (event: KeyboardEvent) => void;
+    currentPanelFocus: number;
+    handlePanelOpenedBound: (event: Event) => void;
+    constructor();
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    render(): lit_html.TemplateResult<1>;
+    handleSlotChange(): void;
+    handlePanelOpened(event: Event): void;
+    navigatePanels(direction: string): void;
+    handleKeyDown(event: KeyboardEvent): void;
+    /**
+     * Expands all panels in the accordion
+     * @public
+     * @method expandAll
+     * @returns {void}
+     */
+    expandAll(): void;
+    /**
+     * Collapses all panels in the accordion
+     * @public
+     * @method collapseAll
+     * @returns {void}
+     */
+    collapseAll(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-accordion': KemetAccordion;
+    }
+}
+
+export { KemetAccordion as default };