@tmorrow/cre8-wc 1.0.14

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

@@ -0,0 +1,131 @@
+import { Cre8Element } from '../cre8-element';
+import '../remove-tag/remove-tag';
+import '../field-note/field-note';
+import '../button/button';
+import '../checkbox-field-item/checkbox-field-item';
+/**
+ * Multiselect is used when multiple options can be chosen from a static dropdown
+ * This component has a list of items in the dropdown that can be added as "selected tags"
+ * The checkbox will always reflect the selected nature of the item and is not removed
+ * from the dropdown when clicked, the tags will be added and removed based on their state.
+ *
+ * Event `selectedItemsChange` emits whenever a tag is added or remove from the list and the
+ * current list after the change is given in the detail.
+ */
+export declare class Cre8MultiSelect extends Cre8Element {
+    static styles: import("lit").CSSResult[];
+    /**
+     * The list of string items the user can choose in the dropdown
+     *
+     * Note: For passing props containing arrays and complex types, you should pass the props using a
+     * period in from of the prop like so: `.items="[]"`
+     * (this is only needed for Web Components and not the React version)
+     * @attr {string[]}
+     */
+    items: string[];
+    selectedTagItems: string[];
+    /**
+     * The list of string items that are initially in the selected list of tags
+     * Note: This list MUST be a subset of the array of items to function.
+     * i.e. if items=['cat', 'dog', 'bird'], preselectedItems=['cat'] is valid
+     * while preselectedItems=['cat', 'goat'] is not and will break the component.
+     *
+     * Note: For passing props containing arrays and complex types, you should pass the props using a
+     * period in from of the prop like so: `.items="[]"`
+     * (this is only needed for Web Components and not the React version)
+     * @attr {string[]}
+     */
+    preselectedItems: string[];
+    dropdownOpen: boolean;
+    /**
+     * The required label that appears above the multiselect
+     * @attr {string}
+     */
+    label: 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 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;
+    constructor();
+    firstUpdated(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _renderDropdownItems;
+    private _renderSelectedTags;
+    private setPreselectedItemsinDropdown;
+    private clearAllTags;
+    private emitSelectedItems;
+    private toggleDropDown;
+    private _handleOnClick;
+    private _handleListItemClick;
+    private _handleDropdownItemInput;
+    private _handleRemoveTagClick;
+    private dropdownArrowClick;
+    private _handleButtonToListKeydown;
+    private _handleListKeydown;
+    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;
+    /**
+     * 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-multi-select': Cre8MultiSelect;
+    }
+}
+export default Cre8MultiSelect;
+//# sourceMappingURL=multi-select.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"multi-select.d.ts","sourceRoot":"","sources":["../../../components/multi-select/multi-select.ts"],"names":[],"mappings":"AAYA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,0BAA0B,CAAC;AAClC,OAAO,0BAA0B,CAAC;AAClC,OAAO,kBAAkB,CAAC;AAC1B,OAAO,4CAA4C,CAAC;AAIpD;;;;;;;;GAQG;AACH,qBAAa,eAAgB,SAAQ,WAAW;IAC9C,MAAM,CAAC,MAAM,4BAAY;IAGzB;;;;;;;OAOG;IAEH,KAAK,EAAE,MAAM,EAAE,CAAM;IAGrB,gBAAgB,EAAE,MAAM,EAAE,CAAM;IAEhC;;;;;;;;;;OAUG;IAEH,gBAAgB,EAAE,MAAM,EAAE,CAAC;IAG3B,YAAY,EAAE,OAAO,CAAS;IAE9B;;;OAGG;IAEH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IAGH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IAEH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;OAGG;IAEH,yBAAyB,CAAC,EAAE,MAAM,CAAC;IAEnC;;;OAGG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IAEH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IAEH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IAEH,WAAW,CAAC,EAAE,MAAM,CAAC;;IASrB,YAAY;IAMZ,iBAAiB;IAKjB,oBAAoB,IAAI,IAAI;IAO5B,OAAO,CAAC,oBAAoB;IAkB5B,OAAO,CAAC,mBAAmB;IAmB3B,OAAO,CAAC,6BAA6B;IAMrC,OAAO,CAAC,YAAY;IAgBpB,OAAO,CAAC,iBAAiB;IAWzB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,cAAc;IAkCtB,OAAO,CAAC,oBAAoB;IAY5B,OAAO,CAAC,wBAAwB;YAYlB,qBAAqB;IAanC,OAAO,CAAC,kBAAkB;IAM1B,OAAO,CAAC,0BAA0B;IAQlC,OAAO,CAAC,kBAAkB;IAO1B,OAAO,CAAC,eAAe;IAUvB;;;;;;;OAOG;IACH,OAAO,CAAC,cAAc;IAUtB;;;;OAIG;IACH,OAAO,CAAC,4BAA4B;IA0BpC,MAAM;CA6EP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF;AAED,eAAe,eAAe,CAAC"}

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

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

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

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

package/lib/components/nav-container/nav-container.d.ts

@@ -0,0 +1,15 @@
+import { Cre8Element } from '../cre8-element';
+/**
+ * @slot - The navigation container content
+ */
+export declare class Cre8NavContainer extends Cre8Element {
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cre8-nav-container': Cre8NavContainer;
+    }
+}
+export default Cre8NavContainer;
+//# sourceMappingURL=nav-container.d.ts.map

package/lib/components/nav-container/nav-container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-container.d.ts","sourceRoot":"","sources":["../../../components/nav-container/nav-container.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG9C;;GAEG;AACH,qBAAa,gBAAiB,SAAQ,WAAW;IAC7C,MAAM,CAAC,MAAM,4BAAY;IAEzB,MAAM;CAST;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,gBAAgB,CAAC;KACxC;CACF;AAED,eAAe,gBAAgB,CAAC"}

package/lib/components/nav-container/nav-container.styles.d.ts

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

package/lib/components/nav-container/nav-container.styles.d.ts.map

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

package/lib/components/page-header/page-header.d.ts

@@ -0,0 +1,19 @@
+import { Cre8Element } from '../cre8-element';
+/**
+ * @slot - The page header content
+ */
+export declare class Cre8PageHeader extends Cre8Element {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Page header title
+     */
+    heading: string;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cre8-page-header': Cre8PageHeader;
+    }
+}
+export default Cre8PageHeader;
+//# sourceMappingURL=page-header.d.ts.map

package/lib/components/page-header/page-header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-header.d.ts","sourceRoot":"","sources":["../../../components/page-header/page-header.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG9C;;GAEG;AACH,qBAAa,cAAe,SAAQ,WAAW;IAC3C,MAAM,CAAC,MAAM,4BAAY;IAE3B;;OAEG;IAEC,OAAO,EAAE,MAAM,CAAuB;IAE1C,MAAM;CAkBP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF;AAED,eAAe,cAAc,CAAC"}

package/lib/components/page-header/page-header.styles.d.ts

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

package/lib/components/page-header/page-header.styles.d.ts.map

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

package/lib/components/pagination/page-counter/page-counter.d.ts

@@ -0,0 +1,20 @@
+import { Cre8Element } from '../../cre8-element';
+/**
+ * @slot - The component content
+ */
+export declare class Cre8PageCounter extends Cre8Element {
+    static styles: import("lit").CSSResult[];
+    rangeVariant?: boolean;
+    currentPage: number;
+    totalResults: number;
+    pageSize: number;
+    display?: 'compact' | 'icon-only' | 'default';
+    private get _totalPages();
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cre8-page-counter': Cre8PageCounter;
+    }
+}
+//# sourceMappingURL=page-counter.d.ts.map

package/lib/components/pagination/page-counter/page-counter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-counter.d.ts","sourceRoot":"","sources":["../../../../components/pagination/page-counter/page-counter.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAGjD;;GAEG;AACH,qBAAa,eAAgB,SAAQ,WAAW;IAC5C,MAAM,CAAC,MAAM,4BAAY;IAGvB,YAAY,CAAC,EAAE,OAAO,CAAC;IAGvB,WAAW,EAAE,MAAM,CAAK;IAGxB,YAAY,EAAE,MAAM,CAAC;IAGrB,QAAQ,EAAE,MAAM,CAAC;IAGjB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,CAAa;IAiB9D,OAAO,KAAK,WAAW,GAEtB;IAED,MAAM;CAcP;AAMD,OAAO,CAAC,MAAM,CAAC;IAAE,UAAU,qBAAqB;QAAG,mBAAmB,EAAE,eAAe,CAAC;KAAE;CAAE"}

package/lib/components/pagination/page-counter/page-counter.styles.d.ts

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

package/lib/components/pagination/page-counter/page-counter.styles.d.ts.map

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

package/lib/components/pagination/pagination.d.ts

@@ -0,0 +1,126 @@
+import { HTMLTemplateResult } from 'lit';
+import { Cre8Element } from '../cre8-element';
+import { Cre8Button } from '../button/button';
+import './page-counter/page-counter';
+/**
+ * The Pagination component is used to split up a large amount of results
+ *  by showing only a certain amount on each page. You can cycle through
+ *  the pages using Page Numbers, Next and Previous Buttons, or optional
+ *  First Page and Last Page Buttons. This component is also used by Table
+ *  to cycle through rows of results. Pagination has 3 display options:
+ *
+ * **default**:  Can contain up to seven Page Numbers (ellipses included)
+ *  at a time flanked by Next and Previous Buttons. When there are more than
+ *  seven pages, numbers start getting replaced by ellipses. Use this option
+ *  when you have a lot of horizontal space in a layout. It should not be used
+ *  for mobile web layouts since its buttons are smaller than the minimum touch target of 44px.
+ *  The component has built in responsivity to mobile page size so you dont have tohandle this
+ *  seperately
+ *
+ *
+ * **compact** : Best used as a summary of where you are among pages or table rows flanked by
+ * Previous and Next Buttons. Use this option when you have limited horizontal space but still
+ * need to show where users are among results. Great for mobile layouts.
+ *
+ *
+ * **icon-only** : Use this option in very tight spaces when it’s not required to show users
+ * where they are among results. Great for mobile layouts.
+ *
+ *
+ * ## HOW TO USE
+ *
+ * Select an option from the “display” dropdown depending on layout width
+ * Select where your current page is from the “Page” dropdown
+ * To show less pages when using Full Numbers, use the "visiblePages” toggles
+ * To hide the First Page and Last Page Buttons, turn on the “hideFirstLastButton” toggle
+ * To change the states of page numbers or buttons, interact with the buttond to invoke each “State”
+ * When using Compact Numbers, you can choose between “compact” and “icon-only” formats
+ *
+ *
+ * ## ACCESSIBILITY NOTE
+ *
+ * To best orient people using screen readers, push focus to the top of
+ * the list of results after any of the pagination buttons have been triggered,
+ * **except for the currently selected one**. Focus target could be a visual results heading,
+ * or the top heading of the results container of the page selected
+ * via a programmatic selector, e.g. < section id=“results” aria-label="results-section" > or
+ * < div role= “group” aria-label=“results” >.
+ *
+ * @dependency cre8-button, cre8-icon, cre8-pagination-counter
+ * @csspart icon - distinguishes the page buttons from the icon buttons
+ * @cssproperty "--pagination-display" - controls the display css property
+ * @cssproperty "--pagination-justify-content" - controls horizontal alignment of pagination
+ * @cssproperty "--pagination-align-items" - controls vertical alignment of pagination
+ */
+export declare class Cre8Pagination extends Cre8Element {
+    static styles: import("lit").CSSResult[];
+    static elementDefinitions: {
+        'cre8-button': typeof Cre8Button;
+    };
+    _currentPage: number;
+    /**
+     * Input the total number of elements are returned from consuming app e.g. search results
+     * @attr number
+     * @required
+     */
+    totalResults: number;
+    /**
+     * how many elements will displayVariant per page, indicated by business to typically be 20
+     * @attr number
+     */
+    get pagesize(): number;
+    set pagesize(newSize: number);
+    _pageSize: number;
+    /**
+     * Controls how many page buttons are displayVarianted on the page
+     * at once, if container size permits. recommended max = 5 pages
+     *
+     * @attr number
+     */
+    visiblePages?: number;
+    /**
+     * (optional) prop that allows for a compact and icon-only variant both
+     * for mobile screen-sizes and for use in certain contexts as guided by design,
+     * the component size will show 'default' in the absence of a value on desktop and
+     * 'compact' on smaller views.
+     *
+     * @attr 'compact' | 'icon-only' | 'default'
+     * @optional
+     */
+    display?: 'compact' | 'icon-only' | 'default';
+    /**
+     *
+     *@state watches the width of the window and responds to show the accessibility approved variant.
+     */
+    windowWidth: number;
+    buttons: typeof Cre8Button[];
+    /**
+    *
+    * @optional
+    */
+    hideLastAndFirstButtons?: boolean;
+    get currentPage(): number;
+    set currentPage(newPage: number);
+    connectedCallBack(): void;
+    get maxVisiblePages(): number;
+    private get totalPages();
+    private get hasNoPreviousPage();
+    private get hasNoNextPage();
+    private _onHandleResize;
+    handleResize(): void;
+    protected get pageRange(): number[];
+    protected firstUpdated(): Promise<void>;
+    disconnectedCallback(): void;
+    displayTypes(): HTMLTemplateResult;
+    private _handleKeydown;
+    private _goToPage;
+    goToPage(page: number, buttonName?: string): any;
+    handleKeydown(page: number, buttonName?: string): (e: KeyboardEvent) => void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cre8-pagination': Cre8Pagination;
+    }
+}
+//# sourceMappingURL=pagination.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../components/pagination/pagination.ts"],"names":[],"mappings":"AAEA,OAAO,EACG,kBAAkB,EAC3B,MAAM,KAAK,CAAC;AAOb,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAC,UAAU,EAAC,MAAM,kBAAkB,CAAC;AAE5C,OAAO,6BAA6B,CAAC;AAGrC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;AAEH,qBAAa,cAAe,SAAQ,WAAW;IAC3C,MAAM,CAAC,MAAM,4BAAY;IAEzB,MAAM,CAAC,kBAAkB;;MAEvB;IAGA,YAAY,EAAE,MAAM,CAAM;IAE9B;;;;OAIG;IAEC,YAAY,EAAG,MAAM,CAAC;IAG1B;;;OAGG;IACH,IACI,QAAQ,IAIU,MAAM,CAF3B;IAED,IAAI,QAAQ,CAAC,OAAO,EAAE,MAAM,EAI3B;IAGG,SAAS,SAAM;IAGnB;;;;;OAKG;IAEC,YAAY,CAAC,EAAE,MAAM,CAAK;IAE9B;;;;;;;;OAQG;IAEC,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAE,SAAS,CAAC;IAEjD;;;OAGG;IAEC,WAAW,EAAG,MAAM,CAAC;IAGrB,OAAO,EAAE,OAAO,UAAU,EAAE,CAAC;IAEjC;;;MAGE;IAEE,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAEtC,IACI,WAAW,IAIU,MAAM,CAF9B;IAED,IAAI,WAAW,CAAC,OAAO,EAAE,MAAM,EAI9B;IAED,iBAAiB;IAIjB,IAAI,eAAe,WAelB;IAGD,OAAO,KAAK,UAAU,GAErB;IAED,OAAO,KAAK,iBAAiB,GAE5B;IAED,OAAO,KAAK,aAAa,GAExB;IAED,OAAO,CAAC,eAAe;IAIvB,YAAY;IAKZ,SAAS,KAAK,SAAS,IAAG,MAAM,EAAE,CAOjC;cAEe,YAAY;IAuB5B,oBAAoB;IAKpB,YAAY,IAAI,kBAAkB;IAUlC,OAAO,CAAC,cAAc,CAIpB;IAEF,OAAO,CAAC,SAAS,CAkBf;IAEK,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,MAAM;IAI1C,aAAa,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,MAAM,OA9Be,aAAa;IAkClF,MAAM;CAwIP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,cAAc,CAAC;KACnC;CACF"}

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

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

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

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

package/lib/components/percent-bar/percent-bar.d.ts

@@ -0,0 +1,26 @@
+import { Cre8Element } from '../cre8-element';
+import '../button/button';
+import '../text-passage/text-passage';
+import '../progress-meter/progress-meter';
+/**
+ * The percent bar visually indicates a user's current progress and has a few features: a basic display bar with
+ * a percentage, an actionable icon that allows a user to revisit a prior step and an actionable link that
+ * allows a user save their progress before exiting.
+ */
+export declare class Cre8PercentBar extends Cre8Element {
+    static styles: import("lit").CSSResult[];
+    value: number;
+    max: number;
+    disableActionLeft?: boolean;
+    private _handleClick;
+    private fractionAsPercent;
+    private isFirstStep;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cre8-percent-bar': Cre8PercentBar;
+    }
+}
+export default Cre8PercentBar;
+//# sourceMappingURL=percent-bar.d.ts.map

package/lib/components/percent-bar/percent-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"percent-bar.d.ts","sourceRoot":"","sources":["../../../components/percent-bar/percent-bar.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,kBAAkB,CAAC;AAC1B,OAAO,8BAA8B,CAAC;AACtC,OAAO,kCAAkC,CAAC;AAG1C;;;;GAIG;AACH,qBAAa,cAAe,SAAQ,WAAW;IAC7C,MAAM,CAAC,MAAM,4BAAY;IAOzB,KAAK,EAAE,MAAM,CAAC;IAMd,GAAG,EAAE,MAAM,CAAC;IAMZ,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,WAAW;IAInB,MAAM;CAmCP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF;AAED,eAAe,cAAc,CAAC"}

package/lib/components/percent-bar/percent-bar.styles.d.ts

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

package/lib/components/percent-bar/percent-bar.styles.d.ts.map

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

package/lib/components/popover/popover.d.ts

@@ -0,0 +1,155 @@
+import { Cre8Element } from '../cre8-element';
+import '../heading/heading';
+/**
+ * The Popover is for progressive disclosure of relevant content often hidden behind a help or info icon.
+ * Its content should be no longer than 3-4 lines in addition to a line of heading text and an optional button.
+ * @slot - The component content
+ */
+export declare class Cre8Popover extends Cre8Element {
+    static styles: import("lit").CSSResult[];
+    /**
+     * The heading text that appears at the top of the popover panel. Should only be 2-3 lines max.
+     *  @attr {string | undefined}
+     */
+    heading?: string;
+    /**
+     * Positions the popover panel absolutely to the trigger
+     * - **default** positions the popover panel below the trigger
+     * - **top** positions the popover panel below the trigger
+     * - **left** positions the popover panel below the trigger
+     * - **right** positions the popover panel below the trigger
+     *  @attr {string | undefined}
+     */
+    position?: 'top' | 'left' | 'right';
+    /**
+     * Set to prevent the popover panel from hiding on scroll
+     *  @attr {boolean | undefined}
+     */
+    isVisibleOnScroll?: boolean;
+    /**
+     * The dynamic state for the popover
+     * - If true, the popover panel placement is determined by its position in the viewport
+     * - If false, the popover panel placement will be placed according to the position value
+     *  @attr {boolean | undefined}
+     */
+    isDynamic?: boolean;
+    /**
+     * The dynamic active state
+     * _This property is dynamically set_
+     *  @attr {boolean | undefined}
+     */
+    isActiveDynamic?: boolean;
+    /**
+     * The active state for the popover
+     * - If true, the popover panel is visible
+     * - If false, the popover panel is hidden
+     *
+     * _This property is dynamically set_
+     *  @attr {boolean | undefined}
+     */
+    isActive?: boolean;
+    /**
+     * Query the popover panel element
+     */
+    _Cre8Popover: HTMLElement;
+    /**
+     * Query the popover panel element
+     */
+    _Cre8PopoverPanel: HTMLElement;
+    /**
+     * Query the assigned elements in the trigger slot
+     */
+    _Cre8PopoverTrigger: Array<HTMLElement>;
+    /**
+     * Query the assigned elements in the footer slot
+     */
+    _Cre8PopoverFooter: Array<HTMLElement>;
+    /**
+     * Query the document direction value
+     * <br/><br/> _*This property is dynamically set_
+     */
+    get isRTL(): boolean;
+    /**
+     * Connected Callback Lifecycle
+     * 1. Add window resize event listener
+     * 2. Add window scroll event listener
+     * 3. Add window orientation change event listener
+     * 4. Add mousedown event listener
+     */
+    connectedCallback(): void;
+    /**
+     * Disconnected Callback Lifecycle
+     * 1. Remove window resize event listener
+     * 2. Remove window scroll event listener
+     * 3. Remove window orientation change event listener
+     * 4. Remove mousedown event listener
+     */
+    disconnectedCallback(): void;
+    /**
+     * First Updated Lifecycle
+     * 1. Set attribute since aria expanded can't be passed down through the slot
+     */
+    firstUpdated(): void;
+    /**
+     * Add aria attributes on the trigger button
+     * 1. Select the element within the trigger slot
+     * 2. Set aria-expanded on the popover trigger to the active state if provided. Otherwise, set to false.
+     * 3 Set the type to button.
+     */
+    addAria(): void;
+    /**
+     * Handle all dynamic placement
+     */
+    dynamicPosition(): void;
+    /**
+     * Set Popover Active State
+     * 1. Toggle the active state between true and false
+     * 2. Set attribute since aria expanded can't be passed down through the slot
+     * 3. If the active state is toggled to false, close the panel and return focus to the dropdown trigger.
+     * This accounts for both design system buttons and native HTML buttons
+     */
+    private _toggleActive;
+    /**
+     * Handle Keydown
+     * 1. If the panel is open and escape is keyed, close the popover panel and return focus to the trigger button
+     * 2. If the panel is opened, tab away closes the popover panel
+     * 3. The panel can be opened and closed by Enter or Space keys.
+     */
+    private _handleKeydown;
+    private _handleTabNavigation;
+    private _navigateInsidePopover;
+    private _getFocusableElements;
+    private _closePopoverAndFocusTrigger;
+    /**
+     * Handle click outside the component
+     * 1. Close the show/hide popover panel on click outside
+     * 2. If the popover panel is already closed then we don't care about outside clicks and we can bail early
+     * 3. By the time a user clicks on the page the shadowRoot will almost certainly be
+     * defined, but TypeScript isn't that trusting and sees this.shadowRoot as possibly
+     * undefined. To work around that we'll check that we have a shadowRoot (and a
+     * rendered .host) element here to appease the TypeScript compiler. This should never
+     * actually be shown or run for a human end user.
+     * 4. Check to see if we clicked inside the active panel
+     * 5. If the panel is active and we've clicked outside of the panel then it should be closed.
+     */
+    handleOnClickOutside: (e: MouseEvent) => void;
+    /**
+     * Remove Active State on Scroll
+     * 1. If a scroll event is fired and visibileOnScroll is not true, remove the active state
+     * 2. If the popover height is less than the window height, then allow the active to remove on scroll
+     */
+    removeActiveOnScroll: () => void;
+    /**
+     * Remove Active State
+     * 1. If a specific event is fired, remove the active state.
+     */
+    removeActive: () => void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cre8-popover': Cre8Popover;
+    }
+}
+export default Cre8Popover;
+//# sourceMappingURL=popover.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../components/popover/popover.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,oBAAoB,CAAC;AAI5B;;;;GAIG;AAEH,qBAAa,WAAY,SAAQ,WAAW;IACxC,MAAM,CAAC,MAAM,4BAAY;IAE3B;;;OAGG;IAEC,OAAO,CAAC,EAAE,MAAM,CAAC;IAErB;;;;;;;OAOG;IAEC,QAAQ,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC;IAExC;;;OAGG;IAEC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAEhC;;;;;OAKG;IAEC,SAAS,CAAC,EAAE,OAAO,CAAC;IAExB;;;;OAIG;IAEC,eAAe,CAAC,EAAE,OAAO,CAAC;IAE9B;;;;;;;OAOG;IAEC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAGvB;;OAEG;IAEC,YAAY,EAAE,WAAW,CAAC;IAE9B;;OAEG;IAEC,iBAAiB,EAAE,WAAW,CAAC;IAEnC;;OAEG;IAEC,mBAAmB,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;IAE5C;;OAEG;IAEC,kBAAkB,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;IAE3C;;;OAGG;IACH,IAAI,KAAK,YAER;IAED;;;;;;OAMG;IACH,iBAAiB;IAQjB;;;;;;OAMG;IACH,oBAAoB;IAQpB;;;OAGG;IACH,YAAY;IAIZ;;;;;OAKG;IACH,OAAO;IAaP;;OAEG;IACH,eAAe;IAyCf;;;;;;OAMG;IACH,OAAO,CAAC,aAAa;IA8BrB;;;;;OAKG;IACH,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,oBAAoB;IAM5B,OAAO,CAAC,sBAAsB;IAe9B,OAAO,CAAC,qBAAqB;IAK7B,OAAO,CAAC,4BAA4B;IAKpC;;;;;;;;;;;OAWG;IACH,oBAAoB,GAAI,GAAG,UAAU,UAoBnC;IAEF;;;;OAIG;IACH,oBAAoB,aAYlB;IAEF;;;OAGG;IACH,YAAY,aAIV;IAEF,MAAM;CAsCP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF;AAED,eAAe,WAAW,CAAC"}

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

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

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

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

package/lib/components/primary-nav/primary-nav.d.ts

@@ -0,0 +1,33 @@
+import { Cre8Element } from '../cre8-element';
+/**
+ * @slot - The primary navigation items
+ */
+export declare class Cre8PrimaryNav extends Cre8Element {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Inverted variant
+     * 1) Used for dark backgrounds
+     */
+    inverted?: boolean;
+    /**
+     * Behavior variant
+     * <cre8-text-passage size="sm">
+     * <ul>
+     * <li>**side-by-side** keeps the primary nav item always in a horizontal pattern</li>
+     * </ul>
+     * </cre8-text-passage>
+     */
+    behavior?: 'side-by-side';
+    /**
+     * aria-label attribute to designate at name for the nav. Can be override by user
+     */
+    navAriaLabel: string;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cre8-primary-nav': Cre8PrimaryNav;
+    }
+}
+export default Cre8PrimaryNav;
+//# sourceMappingURL=primary-nav.d.ts.map

package/lib/components/primary-nav/primary-nav.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"primary-nav.d.ts","sourceRoot":"","sources":["../../../components/primary-nav/primary-nav.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG9C;;GAEG;AACH,qBAAa,cAAe,SAAQ,WAAW;IAC3C,MAAM,CAAC,MAAM,4BAAY;IAE3B;;;OAGG;IAEC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;;;;OAOG;IAEC,QAAQ,CAAC,EAAE,cAAc,CAAC;IAE9B;;OAEG;IAEC,YAAY,EAAE,MAAM,CAAU;IAElC,MAAM;CAcP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF;AAED,eAAe,cAAc,CAAC"}

package/lib/components/primary-nav/primary-nav.styles.d.ts

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

package/lib/components/primary-nav/primary-nav.styles.d.ts.map

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