@tmorrow/cre8-wc 1.0.14

package/lib/components/select/select.d.ts

@@ -0,0 +1,173 @@
+import { Cre8FormElement } from '../cre8-form-element';
+import '../field-note/field-note';
+export interface Cre8SelectOption {
+    label: string;
+    value: number | string;
+}
+export interface Cre8SelectOptionGroup {
+    optGroupLabel: string;
+    options: Cre8SelectOption[];
+}
+/**
+ * The Select control is designed and built to be used for selecting between choices in a form.
+ * It is not a Dropdown control which is generally used for displaying lists of choices
+ * that act as links or actions, like filter options.
+ *
+ * Consider the use of a Select control carefully.
+ * When you have less than 5 options for the user to choose from,
+ * Radio or Checkbox inputs may be a better choice to display all of the options at once.
+ * Users have to slow down to scan a list with more than 15 options,
+ * so using an option group to give the options hierarchy may help users find their choice faster.
+ * Alternately, a text input field might be a more appropriate control to use when there are too many options,
+ * especially when used with typeahead/auto-complete.
+ *
+ * ## How to use
+ * 1. The collapsed default state always shows a default placeholder value or a selected value.
+ * 2. Sort list items in a logical order, such as grouping highly related options together,
+ *    placing most common options first, using alphabetical or numeric orders or dates in chronological order.
+ * 3. A list that includes 6+ items should show a scrollbar.
+ * 4. Users should be able to use a keystroke to quickly jump
+ *    to selecting an option that begins with the entered letter.
+ * 5. Utilize appropriate native controls for when a user is on a mobile device rather than our custom Select.
+ * 6. Adhere to our common form field conventions and always include a Label,
+ *    provide short and clear error messages in context, avoid using the Read-only
+ *    and Disabled states as much as possible, and utilize the info/formatting tip
+ *    or helpful link rather than placeholder text.
+ *
+ * @slot fieldNote - Container for optional field note content
+ */
+export declare class Cre8Select extends Cre8FormElement {
+    readonly type = "select";
+    static styles: import("lit").CSSResult[];
+    /**
+     * A mix of Cre8SelectOption and Cre8SelectOptionGroup definitions:
+     * - Cre8SelectOption
+     *   - label: option label text - `string`
+     *   - value: option value - `number | string`
+     * - Cre8SelectOptionGroup
+     *  - optGroupLabel: optgroup label text - `string`
+     *  - options: Array of multiple Cre8SelectOption items - `Cre8SelectOption[]`
+     */
+    items: Array<Cre8SelectOption | Cre8SelectOptionGroup>;
+    /**
+     * The required label that appears above the select
+     * @attr {string}
+     */
+    label: string;
+    /**
+     * The name property on the select
+     * @attr {string}
+     */
+    name?: string;
+    /**
+    * The unique id of the select
+    * @attr {string}
+    */
+    fieldId?: string;
+    /**
+     * Optional field note text can be added to provide additional field guidance.
+     * @attr {string}
+     */
+    fieldNote?: string;
+    /**
+     * Used to connect the field note in text field to the text menu for accessibility
+     * @attr {string}
+     */
+    ariaDescribedBy?: string;
+    /**
+     * Additional aria-describedby connection to id for additional success and error notes to be accessible
+     * @attr {string}
+     */
+    validationAriaDescribedBy?: string;
+    /**
+     * The required attribute on the select
+     * @attr {boolean}
+     */
+    required?: boolean;
+    /**
+     * The disabled attribute on the select
+     * @attr {boolean}
+     */
+    disabled?: boolean;
+    /**
+     * Changes the component's treatment to represent an error state
+     * @attr {boolean}
+     */
+    isError?: boolean;
+    /**
+     * The error field note that appears below the default field note
+     * @attr {string}
+     */
+    errorNote?: string;
+    /**
+     * Changes the component's treatment to represent a success state
+     * @attr {boolean}
+     */
+    isSuccess?: boolean;
+    /**
+     * The success field note that appears below the default field note
+     * @attr {string}
+     */
+    successNote?: string;
+    /**
+     * Select input querySelector
+     */
+    field: HTMLSelectElement;
+    /**
+     * Get all select option elements
+     */
+    private _selectOptions;
+    /**
+     * Selected item value
+     */
+    private selectedItem;
+    /**
+     * Initialize aria attributes
+     */
+    private _initializeAria;
+    /**
+     * Aria describedby string based on field notes and error/success notes
+     * 1) If both validationAriaDescribedBy (error/success note) and field note exists,
+     * render both in the input's `aria-describedby` attribute
+     * 2) Otherwise, if only validationAriaDescribedBy exists, then render only that as
+     * the `aria-describedby` attribute (input without field note initially, but then error/success is added).
+     * 3) Otherwise, render only the `ariaDescribedBy` property (field note only)
+     */
+    private _fieldNoteAria;
+    /**
+     * First updatedLifecycle
+     * 1) Get the option in the items array with selected set to true. Set that as the selected item
+     * 2) The default value is set to the `option` with the `selected` if one exists. Otherwise, use the
+     * select the first item value like the native select.
+     */
+    firstUpdated(): void;
+    /**
+   * Set form data
+   * 1) Set the element internals to the selected item value if it exists,
+   *    otherwise the default selected item is the first one
+   */
+    private _setFormData;
+    /**
+     * Handle On Change
+     * 1. Set the value when the select is changed.
+     * 2. Fire the custom event with the current value.
+     */
+    private _handleOnChange;
+    /**
+     * Render the select options
+     */
+    private _renderSelectOptions;
+    /**
+     * Render the success or error field notes
+     * 1. If there is a successNote, then return the field note with the success message and state.
+     * 2. If there is a errorNote, then return the field note with the error message and state.
+     */
+    private _renderSuccessErrorFieldNote;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cre8-select': Cre8Select;
+    }
+}
+//# sourceMappingURL=select.d.ts.map

package/lib/components/select/select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../components/select/select.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,0BAA0B,CAAC;AAGlC,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,gBAAgB,EAAE,CAAC;CAC7B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,qBAAa,UAAW,SAAQ,eAAe;IAC3C,QAAQ,CAAC,IAAI,YAAY;IAEzB,MAAM,CAAC,MAAM,4BAAY;IAE3B;;;;;;;;OAQG;IAEC,KAAK,EAAE,KAAK,CAAC,gBAAgB,GAAC,qBAAqB,CAAC,CAAM;IAE9D;;;OAGG;IAEC,KAAK,EAAE,MAAM,CAAW;IAE5B;;;OAGG;IAEC,IAAI,CAAC,EAAE,MAAM,CAAC;IAEpB;;;MAGE;IAEI,OAAO,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IAEC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IAEC,eAAe,CAAC,EAAE,MAAM,CAAC;IAE7B;;;OAGG;IAEC,yBAAyB,CAAC,EAAE,MAAM,CAAC;IAEvC;;;OAGG;IAEC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEvB;;;OAGG;IAEC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEvB;;;OAGG;IAEC,OAAO,CAAC,EAAE,OAAO,CAAC;IAEtB;;;OAGG;IAEC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IAEC,SAAS,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IAEC,WAAW,CAAC,EAAE,MAAM,CAAC;IAEzB;;OAEG;IAEC,KAAK,EAAG,iBAAiB,CAAC;IAG9B;;OAEG;IAEH,OAAO,CAAC,cAAc,CAAsB;IAG5C;;OAEG;IACH,OAAO,CAAC,YAAY,CAAS;IAE7B;;OAEG;IACH,OAAO,CAAC,eAAe;IAUvB;;;;;;;OAOG;IACH,OAAO,CAAC,cAAc;IAUtB;;;;;OAKG;IACH,YAAY;IAaV;;;;KAIC;IACH,OAAO,CAAC,YAAY;IAOpB;;;;OAIG;IACH,OAAO,CAAC,eAAe;IAmBvB;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAc5B;;;;OAIG;IACH,OAAO,CAAC,4BAA4B;IA4BpC,MAAM;CAoCP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/lib/components/select/select.styles.d.ts

@@ -0,0 +1,3 @@
+declare const styles: import("lit").CSSResult;
+export default styles;
+//# sourceMappingURL=select.styles.d.ts.map

package/lib/components/select/select.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.styles.d.ts","sourceRoot":"","sources":["../../../components/select/select.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAoEX,CAAC;AACF,eAAe,MAAM,CAAC"}

package/lib/components/select-tile/select-tile-checkbox-controller.d.ts

@@ -0,0 +1,40 @@
+import { ReactiveController } from 'lit';
+import { Cre8FormElement } from '../cre8-form-element';
+type FormElement = Cre8FormElement & {
+    form: HTMLFormElement;
+    name?: string;
+    checked?: boolean;
+};
+/**
+ * This Controller handles the special checkbox logic.
+ * This should be a lot simpler than the radio version.
+ *
+ * See https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/checkbox_role
+ */
+export declare class SelectTileCheckboxController implements ReactiveController {
+    private host;
+    constructor(host: FormElement);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    /**
+     * Handle clicking on the radio button
+     * @see _checkAndFocus
+     */
+    private _clickHandler;
+    /**
+     * Set the element to `checked`
+     * 2) Set us to checked.
+     */
+    private _checkAndFocus;
+    /**
+     * Handle keydown
+     */
+    private _handleKeyDown;
+    /**
+     * Handle Enter and Space
+     * @see _checkAndFocus
+     */
+    private _handleEnterSpace;
+}
+export default SelectTileCheckboxController;
+//# sourceMappingURL=select-tile-checkbox-controller.d.ts.map

package/lib/components/select-tile/select-tile-checkbox-controller.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-tile-checkbox-controller.d.ts","sourceRoot":"","sources":["../../../components/select-tile/select-tile-checkbox-controller.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,KAAK,CAAC;AACzC,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAEvD,KAAK,WAAW,GAAG,eAAe,GAAG;IAAE,IAAI,EAAE,eAAe,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAGjG;;;;;GAKG;AACH,qBAAa,4BAA6B,YAAW,kBAAkB;IACnE,OAAO,CAAC,IAAI,CAAc;gBAEd,IAAI,EAAE,WAAW;IAK7B,aAAa,IAAI,IAAI;IAQrB,gBAAgB,IAAI,IAAI;IAQ1B;;;OAGG;IACD,OAAO,CAAC,aAAa,CAGnB;IAEJ;;;OAGG;IACD,OAAO,CAAC,cAAc,CAIpB;IAEJ;;OAEG;IACD,OAAO,CAAC,cAAc,CAKpB;IAEJ;;;OAGG;IACD,OAAO,CAAC,iBAAiB,CAGvB;CACL;AAED,eAAe,4BAA4B,CAAC"}

package/lib/components/select-tile/select-tile-radio-controller.d.ts

@@ -0,0 +1,87 @@
+import { ReactiveController } from 'lit';
+import { Cre8FormElement } from '../cre8-form-element';
+type FormElement = Cre8FormElement & {
+    form: HTMLFormElement;
+    name?: string;
+    checked?: boolean;
+};
+/**
+ * This Controller handles the special radio button logic.
+ *
+ * - Handle clicks and key presses, which involves
+ *   - Unchecking other select-tile's when this one is checked, if they are in the same form.
+ *   - Changing focus between `0` and `-1`, and moving focus correctly on key press
+ *   - checking/unchecking on spacebar
+ *
+ * See also https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/radio_role
+ * and https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/radiogroup_role
+ *
+ * Also see https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-autonomous-drawbacks
+ *
+ * This started out as a copy of radio-field-item.ts.
+ *
+ * Part of the reason I extracted this was to see if I could share this logic with radio-field-item,
+ * but that would be separate refactor.
+ *
+ * It might also be good for the "checkbox" mode of select-tile.
+ *
+ * And it might also just be a cleaner separation of concerns.
+ */
+export declare class SelectTileRadioController implements ReactiveController {
+    private host;
+    constructor(host: FormElement);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    hostUpdate(): void;
+    /**
+     * Find all elements that are in the same "radio button group", following the HTML 5 spec,
+     * except that we're looking at `[role="radio"]` instead of `input[type="radio"]`.
+     *
+     * - They have the attribute role="radio" set
+     * - They have the same form owner, or both have no form owner
+     * - They're in the same tree (same document, don't look at shadow dom)
+     * - They both have non-empty name attributes, and the names are the same
+     *
+     */
+    findAllElementsInSameRadioButtonGroup({ excludeDisabled }?: {
+        excludeDisabled?: boolean;
+    }): Element[];
+    /**
+      * Remove checked
+      * 1) Reset the form field to not checked
+      * 2) Remove checked property from all items and set tabindex to -1
+      */
+    removeChecked(): void;
+    /**
+     * Handle clicking on the radio button
+     * @see _checkAndFocus
+     */
+    private _clickHandler;
+    /**
+     * Set the element to `checked`
+     * 1) Remove `checked` and set tabindex to -1 on all elements in our radio group
+     * 2) Set us to checked.
+     * 3) Set our tabindex to 0
+     */
+    private _checkAndFocus;
+    /**
+     * Handle keydown
+     * 1) If left or up arrow key is struck and radio field item exists before current item,
+     *    remove checked from all items and add it to the next item
+     * 2) If right or down arrow key is struck and radio field item exists after current item,
+     *    remove checked from all items and add checked to the next item.
+     *    Focus on this item and set tabindex for when focusing out of radio field and back onto checked item.
+     * 3) If the element is in focused, then for event emission the
+     *    current focues element should be clicked to emit event.
+     * 4) If the Enter key is pressed, then check the radio if no other radio items are checked
+     */
+    private _handleKeyDown;
+    private _handleArrowKeys;
+    /**
+     * Handle Enter and Space
+     * @see _checkAndFocus
+     */
+    private _handleEnterSpace;
+}
+export default SelectTileRadioController;
+//# sourceMappingURL=select-tile-radio-controller.d.ts.map

package/lib/components/select-tile/select-tile-radio-controller.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-tile-radio-controller.d.ts","sourceRoot":"","sources":["../../../components/select-tile/select-tile-radio-controller.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,KAAK,CAAC;AACzC,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAGvD,KAAK,WAAW,GAAG,eAAe,GAAG;IAAE,IAAI,EAAE,eAAe,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAcjG;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBAAa,yBAA0B,YAAW,kBAAkB;IAChE,OAAO,CAAC,IAAI,CAAc;gBAEd,IAAI,EAAE,WAAW;IAK7B,aAAa,IAAI,IAAI;IAUrB,gBAAgB,IAAI,IAAI;IASxB,UAAU,IAAI,IAAI;IAIlB;;;;;;;;;OASG;IACH,qCAAqC,CAAC,EAAE,eAAe,EAAE,GAAE;QAAE,eAAe,CAAC,EAAE,OAAO,CAAA;KAAM;IAqB/F;;;;QAII;IACD,aAAa;IAQf;;;OAGG;IACD,OAAO,CAAC,aAAa,CAGnB;IAEJ;;;;;OAKG;IACD,OAAO,CAAC,cAAc,CAUpB;IAEJ;;;;;;;;;;OAUG;IACD,OAAO,CAAC,cAAc,CASpB;IAEF,OAAO,CAAC,gBAAgB,CAmBtB;IAEJ;;;OAGG;IACD,OAAO,CAAC,iBAAiB,CAGvB;CACL;AAED,eAAe,yBAAyB,CAAC"}

package/lib/components/select-tile/select-tile.d.ts

@@ -0,0 +1,163 @@
+import { PropertyValues } from 'lit';
+import { Cre8FormElement } from '../cre8-form-element';
+import '../icon/icon';
+/**
+ * The Select Tile component is a short block of content inside a visual
+ * container that can be used in place of checkboxes, radio buttons, and
+ * links.  It allows you to add more descriptive and visually appealing
+ * content for these actions while letting you compare different choices
+ * either side-by-side or on top of each other.
+ *
+ * Typically you could use the "header" slot for an icon, and the "title"
+ * and "body" slots for a content title and body text below it.
+ *
+ * The css parts are shown here wrapped in ::part() because otherwise Storybook
+ * won't render them and the slots if they have the same name.
+ * See https://developer.mozilla.org/en-US/docs/Web/CSS/::part
+ *
+ * @fires change
+ * @fires input
+ * @slot "" - The default slot goes into the center, main part of the Select Tile.
+ *         Consider using title and body instead.
+ * @slot "header" - The top or left part of the Select Tile
+ * @slot footer - The bottom or right part of the Select Tile
+ * @slot title - The title part of the Select Tile, use with body slot and
+ *               instead of the default slot for appropriate typography.
+ * @slot "body" - The "body" part of the Select Tile, which appears under
+ *                the title slot and receives apporpriate typography.
+ *
+ * @csspart ::part(select-tile) - The main wrapping element
+ * @csspart ::part(header) - The header element wrapping the left or top element
+ * @csspart ::part(footer) - The footer element wrapping the right element
+ * @csspart ::part(body) - The main body of the select-tile, wrapper around the default slot
+ * @csspart ::part(body-title) - The element that wraps the "title" slot
+ * @csspart ::part(body-body) - The element that wraps the "body" slot
+ *
+*/
+export declare class Cre8SelectTile extends Cre8FormElement {
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        clonable?: boolean;
+        customElementRegistry?: CustomElementRegistry;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
+    private _controller;
+    /**
+     * Should this Select Tile behave as a radio button or a checkbox?
+     */
+    type: 'radio' | 'checkbox';
+    /**
+     * Get the radio field item input
+     */
+    field: HTMLInputElement;
+    static styles: import("lit").CSSResult[];
+    /**
+     * Style variants
+     * - **bare** renders a select-tile without a border and without padding around the content
+     * - **horizontal** renders a select-tile with header, body, footer oriented in a row rather than a column
+     * - **horizontal-bare** renders a select-tile with header, body, footer
+     *   oriented in a row rather than a column without a border and without padding around the content
+     */
+    variant?: 'bare' | 'horizontal' | 'horizontal-bare';
+    /**
+     * Which breakpoint, if any, to switch to verticial.
+     * Only useful for horizontal variants. Defaults to 'sm'.
+     */
+    variantBreakToVertical: 'sm' | 'sm-2' | 'md' | 'lg' | 'xl' | 'xxl' | 'none';
+    /**
+     * Where does the checkmark or radio button go?
+     * It disappears on 'none'. Only top-right is supported for vertical variants.
+     */
+    checkPosition: 'left' | 'right' | 'top-right' | 'none';
+    /**
+     * In radio mode, whether to use the circle with the dot, or the rounded check.
+     */
+    radioVariant: 'dot' | 'check';
+    /**
+     * Align variants
+     * <cre8-text-passage size="sm">
+     * <ul>
+     * <li>**center** renders a select-tile that has center aligned content/text</li>
+     * </ul>
+     * </cre8-text-passage>
+     */
+    align?: 'center';
+    /**
+     * Error State
+     */
+    isError?: boolean;
+    /**
+     * Disabled State
+     */
+    disabled?: boolean;
+    /**
+     * Required attribute
+     */
+    required?: boolean;
+    /**
+     * Checked State.
+     * Note: the `checked` attribute sets the `defaultChecked` property, as well
+     * as sets the initial value for the `checked` property.
+     */
+    checked?: boolean;
+    /**
+     * The default checked state when the element first renders or is reset.
+     *
+     * Note: the attribute is named `checked` and the property is
+     * named `defaultChecked`. This is the same as a regular radio button.
+     */
+    defaultChecked: boolean;
+    /**
+     * Select Tile FieldId
+     */
+    fieldId?: string;
+    /**
+     * Name of the form control.
+     */
+    name?: string;
+    /**
+     * Radio item fieldnote aria describe by
+     */
+    private ariaDescribedBy?;
+    /**
+     * Radio item fieldnote isSuccess
+     */
+    isSuccess?: boolean;
+    /**
+     * The form associated with this field
+     *
+     * TOOD: maybe this goes on Cre8FormElement
+     */
+    get form(): HTMLFormElement;
+    /**
+     * Connected callback lifecycle
+     * 1) Auto-generate the fieldId if a user doesn't provided so that the form field is accessible
+     * 2) Initialize the correct controller
+     */
+    connectedCallback(): void;
+    /**
+     * Reset form callback
+     * 1) Remove the checked state from all radio elements
+     * 2) Set the checked state to the initial checked state
+     * 3) Set the radio field input checked attribute to the initial checked state
+     */
+    formResetCallback(): void;
+    /**
+     * Whenever the "checked" property changes, update our form value, aria-checked,
+     * and the checked property of `this.field`.
+     *
+     */
+    updated(changedProps: PropertyValues): void;
+    renderInput(): import("lit-html").TemplateResult<1>;
+    renderCheckboxIcon(): import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cre8-select-tile': Cre8SelectTile;
+    }
+}
+export default Cre8SelectTile;
+//# sourceMappingURL=select-tile.d.ts.map

package/lib/components/select-tile/select-tile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-tile.d.ts","sourceRoot":"","sources":["../../../components/select-tile/select-tile.ts"],"names":[],"mappings":"AACA,OAAO,EACS,cAAc,EAC7B,MAAM,KAAK,CAAC;AAKb,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,cAAc,CAAC;AAMlB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgCE;AACN,qBAAa,cAAe,SAAQ,eAAe;IAC/C,MAAM,CAAC,iBAAiB;;;;;;;MAA6D;IAErF,OAAO,CAAC,WAAW,CAAmF;IAEtG;;OAEG;IAEC,IAAI,EAAE,OAAO,GAAG,UAAU,CAAW;IAEzC;;OAEG;IAEC,KAAK,EAAG,gBAAgB,CAAC;IAE7B,MAAM,CAAC,MAAM,4BAAY;IAEzB;;;;;;OAMG;IAEC,OAAO,CAAC,EAAE,MAAM,GAAG,YAAY,GAAG,iBAAiB,CAAC;IAExD;;;OAGG;IAEC,sBAAsB,EAAE,IAAI,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,MAAM,CAAQ;IAEvF;;;OAGG;IAEC,aAAa,EAAE,MAAM,GAAG,OAAO,GAAG,WAAW,GAAG,MAAM,CAAW;IAErE;;OAEG;IAEC,YAAY,EAAE,KAAK,GAAG,OAAO,CAAS;IAE1C;;;;;;;OAOG;IAEC,KAAK,CAAC,EAAE,QAAQ,CAAC;IAErB;;OAEG;IAEC,OAAO,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IAEC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IAEC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;OAIG;IAEC,OAAO,CAAC,EAAE,OAAO,CAAC;IAEtB;;;;;OAKG;IAEC,cAAc,EAAE,OAAO,CAAC;IAE5B;;OAEG;IAEC,OAAO,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IAEC,IAAI,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IAEH,OAAO,CAAC,eAAe,CAAC,CAAS;IAEjC;;OAEG;IAEC,SAAS,CAAC,EAAE,OAAO,CAAC;IAExB;;;;OAIG;IACH,IAAI,IAAI,oBAEP;IAED;;;;OAIG;IACH,iBAAiB;IAWjB;;;;;OAKG;IACH,iBAAiB,IAAI,IAAI;IAMzB;;;;OAIG;IACH,OAAO,CAAC,YAAY,EAAE,cAAc;IAwBpC,WAAW;IAgBX,kBAAkB;IASlB,MAAM;CA8DT;AAMD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,kBAAkB,EAAE,cAAc,CAAC;KACtC;CACJ;AAED,eAAe,cAAc,CAAC"}

package/lib/components/select-tile/select-tile.styles.d.ts

@@ -0,0 +1,3 @@
+declare const styles: import("lit").CSSResult;
+export default styles;
+//# sourceMappingURL=select-tile.styles.d.ts.map

package/lib/components/select-tile/select-tile.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-tile.styles.d.ts","sourceRoot":"","sources":["../../../components/select-tile/select-tile.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAwaX,CAAC;AACF,eAAe,MAAM,CAAC"}

package/lib/components/select-tile-list/select-tile-list.d.ts

@@ -0,0 +1,52 @@
+import { Cre8Element } from '../cre8-element';
+import '../field-note/field-note';
+/**
+ * Select Tile List is a container design to hold multiple Select Tile Components.
+ *
+ * @slot "" - The default slot norminally contains multiple `<select-tile />` Components.
+ * @cssprop "--cre8-select-tile-list-item-width" - Width of each child. Not used for horizontal.
+ */
+export declare class Cre8SelectTileList extends Cre8Element {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Whether to show the tiles side by side (columns) or stacked vertically (rows).
+     */
+    variant: 'columns' | 'rows';
+    /**
+     * Select Tile container label
+     */
+    label?: string;
+    /**
+     * Select Tile container fieldnote
+     */
+    fieldNote?: string;
+    /**
+     * Select Tile container fieldnote aria describe by
+     */
+    ariaDescribedBy?: string;
+    /**
+     * Select Tile container fieldnote icon name
+     */
+    fieldNoteIconName?: string;
+    /**
+     * Select Tile container fieldnote knockout
+     */
+    fieldNoteKnockout?: boolean;
+    /**
+     * Select Tile container fieldnote isSuccess
+     */
+    fieldNoteIsSuccess?: boolean;
+    /**
+     * Select Tile container fieldnote isError
+     */
+    fieldNoteIsError?: boolean;
+    connectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cre8-select-tile-list': Cre8SelectTileList;
+    }
+}
+export default Cre8SelectTileList;
+//# sourceMappingURL=select-tile-list.d.ts.map

package/lib/components/select-tile-list/select-tile-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-tile-list.d.ts","sourceRoot":"","sources":["../../../components/select-tile-list/select-tile-list.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,0BAA0B,CAAC;AAGlC;;;;;GAKG;AACH,qBAAa,kBAAmB,SAAQ,WAAW;IAC/C,MAAM,CAAC,MAAM,4BAAY;IAE3B;;OAEG;IAEC,OAAO,EAAE,SAAS,GAAG,MAAM,CAAa;IAE5C;;OAEG;IAEC,KAAK,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IAEC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IAEC,eAAe,CAAC,EAAE,MAAM,CAAC;IAE7B;;OAEG;IAEC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE/B;;OAEG;IAEC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAEhC;;OAEG;IAEC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAEjC;;OAEG;IAEC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE/B,iBAAiB;IAOjB,MAAM;CA+BP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,uBAAuB,EAAE,kBAAkB,CAAC;KAC7C;CACF;AAED,eAAe,kBAAkB,CAAC"}

package/lib/components/select-tile-list/select-tile-list.styles.d.ts

@@ -0,0 +1,3 @@
+declare const styles: import("lit").CSSResult;
+export default styles;
+//# sourceMappingURL=select-tile-list.styles.d.ts.map

package/lib/components/select-tile-list/select-tile-list.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-tile-list.styles.d.ts","sourceRoot":"","sources":["../../../components/select-tile-list/select-tile-list.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAsCX,CAAC;AACF,eAAe,MAAM,CAAC"}

package/lib/components/skeleton-loader/skeleton-loader.d.ts

@@ -0,0 +1,53 @@
+import { Cre8Element } from '../cre8-element';
+/**
+ * Skeleton Loader allows for the ability to create placeholder UI loading states.
+ * Developers are encouraged to pass into the Skeleton Loader their own parameters
+ * to create simple (or complex) loading screens.
+ *
+ * ## How to Use
+ * Skeleton states are simplified versions of components used on an initial page load
+ * to indicate that the information on the page has not fully loaded yet.
+ * They only appear for only a few seconds, disappearing once components and content populate the page.
+ * These loaders use motion to convey that the page is not stuck and that data is still being loaded.
+ * This can help to reduce user uncertainty. Skeleton objects should generally be visualized
+ * by simple primitives which mimic the original content in a recognizable way.
+ * It is recommended to use a more elaborate form if that is needed to make the component recognizable.
+ *
+ * Never represent toast notifications, overflow menus, dropdown items, modals, and loaders with skeleton states.
+ * Elements inside a modal may have a skeleton state, but the modal itself should not.
+ *
+ * **IMPORTANT!** This is not a loading element and will provide no value to a screen reader user,
+ * this is a decorative element only!
+ */
+export declare class Cre8SkeletonLoader extends Cre8Element {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Style variant
+     * - **rectangle** renders a featureless rectangle as a placeholder for loading elements
+     * - **square** renders a featureless square as a placeholder for loading elements
+     * - **circle** renders a featureless circle as a placeholder for loading elements
+     * @type {"rectangle" | "square" | "circle"}
+     * @attr {string}
+     */
+    variant?: 'rectangle' | 'square' | 'circle';
+    /**
+     * Height inline style
+     * 1. Used to set a height on the skeleton if specific size is needed
+     * @attr {string}
+     */
+    height?: string;
+    /**
+     * Width inline style
+     * 1. Used to set a width on the skeleton if specific size is needed
+     * @attr {string}
+     */
+    width?: string;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cre8-skeleton-loader': Cre8SkeletonLoader;
+    }
+}
+export default Cre8SkeletonLoader;
+//# sourceMappingURL=skeleton-loader.d.ts.map

package/lib/components/skeleton-loader/skeleton-loader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton-loader.d.ts","sourceRoot":"","sources":["../../../components/skeleton-loader/skeleton-loader.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG9C;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,qBAAa,kBAAmB,SAAQ,WAAW;IAC/C,MAAM,CAAC,MAAM,4BAAY;IAE7B;;;;;;;OAOG;IAEC,OAAO,CAAC,EAAE,WAAW,GAAG,QAAQ,GAAG,QAAQ,CAAe;IAE9D;;;;OAIG;IAEC,MAAM,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;OAIG;IAEC,KAAK,CAAC,EAAE,MAAM,CAAC;IAEnB,MAAM;CAcL;AAMD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,sBAAsB,EAAE,kBAAkB,CAAC;KAC9C;CACJ;AAED,eAAe,kBAAkB,CAAC"}

package/lib/components/skeleton-loader/skeleton-loader.styles.d.ts

@@ -0,0 +1,3 @@
+declare const styles: import("lit").CSSResult;
+export default styles;
+//# sourceMappingURL=skeleton-loader.styles.d.ts.map

package/lib/components/skeleton-loader/skeleton-loader.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton-loader.styles.d.ts","sourceRoot":"","sources":["../../../components/skeleton-loader/skeleton-loader.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAsDX,CAAC;AACF,eAAe,MAAM,CAAC"}

package/lib/components/split-button/split-button.d.ts

@@ -0,0 +1,34 @@
+import { Cre8Element } from '../cre8-element';
+import '../button/button';
+/**
+ * @slot - The component content , this will consist of the dropdown when the user clicks the caret
+ */
+export declare class Cre8SplitButton extends Cre8Element {
+    static styles: import("lit").CSSResult[];
+    dropdownOpen: boolean;
+    disabled?: boolean;
+    /**
+     * Size variant
+     * <cre8-text-passage size="sm">
+     * <ul>
+     * <li>**sm** shrinks the button typography and overall size</li>
+     * <li>**lg** increases the button typography size and overall size</li>
+     * </ul>
+     * </cre8-text-passage>
+     */
+    size?: 'sm' | 'lg';
+    /**
+     * Display text on the button
+     */
+    buttonText: string;
+    render(): import("lit-html").TemplateResult<1>;
+    private _textClick;
+    private _dropdownClick;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cre8-split-button': Cre8SplitButton;
+    }
+}
+export default Cre8SplitButton;
+//# sourceMappingURL=split-button.d.ts.map