@tmorrow/cre8-wc 1.2.4 → 1.2.6

package/lib/components/table-row/table-row.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-row.styles.js","sourceRoot":"","sources":["../../../components/table-row/table-row.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkrBhB,CAAC;AACH,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`.cre8-u-content-knockout-brand {\n  color: var(----cre8-color-content-knockout-brand);\n}\n\n.cre8-u-is-hidden {\n  display: none !important;\n  visibility: hidden !important;\n}\n\n.cre8-u-is-vishidden {\n  position: absolute !important;\n  overflow: hidden;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  border: 0;\n  clip: rect(1px, 1px, 1px, 1px);\n}\n\n@media all and (min-width: 23.4375rem) {\n  .cre8-u-hide-sm {\n    display: none !important;\n  }\n}\n@media all and (min-width: 35rem) {\n  .cre8-u-hide-sm-2 {\n    display: none !important;\n  }\n}\n@media all and (min-width: 48rem) {\n  .cre8-u-hide-md {\n    display: none !important;\n  }\n}\n@media all and (min-width: 60rem) {\n  .cre8-u-hide-lg {\n    display: none !important;\n  }\n}\n@media all and (min-width: 75rem) {\n  .cre8-u-hide-xl {\n    display: none !important;\n  }\n}\n@media all and (max-width: 23.4375rem) {\n  .cre8-u-show-sm {\n    display: none !important;\n  }\n}\n@media all and (max-width: 35rem) {\n  .cre8-u-show-sm-2 {\n    display: none !important;\n  }\n}\n@media all and (max-width: 48rem) {\n  .cre8-u-show-md {\n    display: none !important;\n  }\n}\n@media all and (max-width: 60rem) {\n  .cre8-u-show-lg {\n    display: none !important;\n  }\n}\n@media all and (max-width: 75rem) {\n  .cre8-u-show-xl {\n    display: none !important;\n  }\n}\n.cre8-u-margin-none {\n  margin: 0 !important;\n}\n\n.cre8-u-margin-sm {\n  margin: size(1) !important;\n}\n\n.cre8-u-margin-md {\n  margin: size(2) !important;\n}\n\n.cre8-u-margin-lg {\n  margin: size(3) !important;\n}\n\n.cre8-u-margin-xl {\n  margin: size(4) !important;\n}\n\n.cre8-u-margin-xxl {\n  margin: size(8) !important;\n}\n\n.cre8-u-margin-top-none {\n  margin-top: 0 !important;\n}\n\n.cre8-u-margin-top-sm {\n  margin-top: size(1) !important;\n}\n\n.cre8-u-margin-top-md {\n  margin-top: size(2) !important;\n}\n\n.cre8-u-margin-top-lg {\n  margin-top: size(3) !important;\n}\n\n.cre8-u-margin-top-xl {\n  margin-top: size(4) !important;\n}\n\n.cre8-u-margin-top-xxl {\n  margin-top: size(8) !important;\n}\n\n.cre8-u-margin-right-none {\n  margin-right: 0 !important;\n}\n\n.cre8-u-margin-right-sm {\n  margin-right: size(1) !important;\n}\n\n.cre8-u-margin-right-md {\n  margin-right: size(2) !important;\n}\n\n.cre8-u-margin-right-lg {\n  margin-right: size(3) !important;\n}\n\n.cre8-u-margin-right-xl {\n  margin-right: size(4) !important;\n}\n\n.cre8-u-margin-right-xxl {\n  margin-right: size(8) !important;\n}\n\n.cre8-u-margin-bottom-none {\n  margin-bottom: 0 !important;\n}\n\n.cre8-u-margin-bottom-sm {\n  margin-bottom: size(1) !important;\n}\n\n.cre8-u-margin-bottom-md {\n  margin-bottom: size(2) !important;\n}\n\n.cre8-u-margin-bottom-lg {\n  margin-bottom: size(3) !important;\n}\n\n.cre8-u-margin-bottom-xl {\n  margin-bottom: size(4) !important;\n}\n\n.cre8-u-margin-bottom-xxl {\n  margin-bottom: size(8) !important;\n}\n\n.cre8-u-margin-bottom-xl-xxl {\n  margin-bottom: size(4) !important;\n}\n\n@media all and (min-width: 768px) {\n  .cre8-u-margin-bottom-xl-xxl {\n    margin-bottom: size(8) !important;\n  }\n}\n.cre8-u-margin-left-none {\n  margin-left: 0 !important;\n}\n\n.cre8-u-margin-left-sm {\n  margin-left: size(1) !important;\n}\n\n.cre8-u-margin-left-md {\n  margin-left: size(2) !important;\n}\n\n.cre8-u-margin-left-lg {\n  margin-left: size(3) !important;\n}\n\n.cre8-u-margin-left-xl {\n  margin-left: size(4) !important;\n}\n\n.cre8-u-margin-left-xxl {\n  margin-left: size(8) !important;\n}\n\n.cre8-u-padding-none {\n  padding: 0 !important;\n}\n\n.cre8-u-padding-sm {\n  padding: size(1) !important;\n}\n\n.cre8-u-padding-md {\n  padding: size(2) !important;\n}\n\n.cre8-u-padding-lg {\n  padding: size(3) !important;\n}\n\n.cre8-u-padding-xl {\n  padding: size(4) !important;\n}\n\n.cre8-u-padding-xxl {\n  padding: size(8) !important;\n}\n\n.cre8-u-padding-top-none {\n  padding-top: 0 !important;\n}\n\n.cre8-u-padding-top-sm {\n  padding-top: size(1) !important;\n}\n\n.cre8-u-padding-top-md {\n  padding-top: size(2) !important;\n}\n\n.cre8-u-padding-top-lg {\n  padding-top: size(3) !important;\n}\n\n.cre8-u-padding-top-xl {\n  padding-top: size(4) !important;\n}\n\n.cre8-u-padding-top-xxl {\n  padding-top: size(8) !important;\n}\n\n.cre8-u-padding-right-none {\n  padding-right: 0 !important;\n}\n\n.cre8-u-padding-right-sm {\n  padding-right: size(1) !important;\n}\n\n.cre8-u-padding-right-md {\n  padding-right: size(2) !important;\n}\n\n.cre8-u-padding-right-lg {\n  padding-right: size(3) !important;\n}\n\n.cre8-u-padding-right-xl {\n  padding-right: size(4) !important;\n}\n\n.cre8-u-padding-right-xxl {\n  padding-right: size(8) !important;\n}\n\n.cre8-u-padding-bottom-none {\n  padding-bottom: 0 !important;\n}\n\n.cre8-u-padding-bottom-sm {\n  padding-bottom: size(1) !important;\n}\n\n.cre8-u-padding-bottom-md {\n  padding-bottom: size(2) !important;\n}\n\n.cre8-u-padding-bottom-lg {\n  padding-bottom: size(3) !important;\n}\n\n.cre8-u-padding-bottom-xl {\n  padding-bottom: size(4) !important;\n}\n\n.cre8-u-padding-bottom-xxl {\n  padding-bottom: size(8) !important;\n}\n\n.cre8-u-padding-left-none {\n  padding-left: 0 !important;\n}\n\n.cre8-u-padding-left-sm {\n  padding-left: size(1) !important;\n}\n\n.cre8-u-padding-left-md {\n  padding-left: size(2) !important;\n}\n\n.cre8-u-padding-left-lg {\n  padding-left: size(3) !important;\n}\n\n.cre8-u-padding-left-xl {\n  padding-left: size(4) !important;\n}\n\n.cre8-u-padding-left-xxl {\n  padding-left: size(8) !important;\n}\n\n.cre8-u-display-flex {\n  display: flex !important;\n}\n\n.cre8-u-display-block {\n  display: block !important;\n}\n\nbody {\n  font-family: var(--cre8-typography-body-default-font-family);\n  font-size: var(--cre8-typography-body-default-font-size);\n  font-weight: var(--cre8-typography-body-default-font-weight);\n  line-height: var(--cre8-typography-body-default-line-height);\n  -webkit-text-decoration: var(--cre8-typography-body-default-text-decoration);\n  text-decoration: var(--cre8-typography-body-default-text-decoration);\n  text-transform: var(--cre8-typography-body-default-text-transform);\n  display: flex;\n  flex-direction: column;\n  padding: 0;\n  margin: 0;\n  color: var(--cre8-color-content-default);\n  background: var(--background-default);\n}\n\n@media all and (min-width: 60rem) {\n  .page-container {\n    background: linear-gradient(90deg, #fff 0, #fff 66.66%, #f8f8f9 0, #f8f8f9 0);\n  }\n}\n.band__inner {\n  margin-left: 2rem;\n  margin-right: 2rem;\n}\n\n@media all and (min-width: 60rem) {\n  .band__inner {\n    margin-right: 0;\n  }\n}\nimg {\n  max-width: 100%;\n  height: auto;\n}\n\n/**\n * Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/\n */\n*,\n::slotted(*),\n*:before,\n*:after {\n  box-sizing: border-box;\n}\n\n:root {\n  --size-base-unit: 0.5rem;\n}\n\n/**\n * RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n */\n[dir=rtl] {\n  --rtlTranslateX: 50%;\n  /* 1 */\n  --rtlGradientToRight: 270deg;\n  /* 2 */\n  --rtlRotate45Inverse: -45deg;\n  /* 3 */\n}\n\n/**\n * Visible focus outline for elements on a light background\n */\n/**\n * Visible focus outline for elements with an error status\n */\n/**\n * Visible focus outline for elements on a dark background\n */\n/**\n* Focus state for themes that need a dashed outline for focus\n* state\n**/\n/**\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n */\n/**\n * Visually hidden from display\n */\n/*\n=======\nAnimations\n=======\n*/\n:host {\n  --cre8-z-index-1: 1;\n  --cre8-z-index-50: 50;\n  --cre8-z-index-100: 100;\n  --cre8-z-index-200: 200;\n  --cre8-z-index-1030: 1030;\n  --cre8-anim-fade-quick: 0.35s;\n  --cre8-anim-ease: ease;\n}\n\n@keyframes fadeIn {\n  100% {\n    opacity: 1;\n  }\n}\n@keyframes slideIn {\n  100% {\n    transform: translateX(0);\n  }\n}\n@keyframes slideInFwd {\n  100% {\n    width: 272px;\n    height: 272px;\n  }\n}\n@keyframes slideOutRight {\n  100% {\n    width: 272px;\n    height: 272px;\n  }\n}\n@keyframes slideUp {\n  100% {\n    transform: translateY(0);\n  }\n}\n@media (width >= 481px) {\n  @keyframes slideInFwd {\n    100% {\n      width: 417px;\n      height: 417px;\n    }\n  }\n  @keyframes slideOutRight {\n    100% {\n      width: 417px;\n      height: 417px;\n    }\n  }\n}\n@media (width >= 48rem) {\n  @keyframes slideInFwd {\n    100% {\n      width: 330px;\n      height: 330px;\n    }\n  }\n  @keyframes slideOutRight {\n    100% {\n      width: 330px;\n      height: 330px;\n      transform: translateX(calc(100vw - 45px));\n    }\n  }\n}\n@media (width >= 60rem) {\n  @keyframes slideInFwd {\n    100% {\n      width: 460px;\n      height: 460px;\n    }\n  }\n  @keyframes slideOutRight {\n    100% {\n      width: 460px;\n      height: 460px;\n      transform: translateX(calc(100vw - 45px));\n    }\n  }\n}\n@media (width >= 75rem) {\n  @keyframes slideInFwd {\n    100% {\n      width: 592px;\n      height: 591px;\n    }\n  }\n  @keyframes slideOutRight {\n    100% {\n      width: 592px;\n      height: 591px;\n      transform: translateX(calc(100vw - 45px));\n    }\n  }\n}\n@media (width >= 87.5rem) {\n  @keyframes slideOutRight {\n    100% {\n      width: 592px;\n      height: 591px;\n      transform: translateX(calc(100vw - 120px));\n    }\n  }\n}\n@media (width >= 2200px) {\n  @keyframes slideOutRight {\n    100% {\n      width: 592px;\n      height: 591px;\n      transform: translateX(calc(100vw - 592px));\n    }\n  }\n}\nspan.ripple {\n  position: absolute;\n  border-radius: 50%;\n  transform: scale(0);\n  animation: ripple 600ms linear;\n  background-color: var(--ripple-bg-color);\n}\n\n@keyframes ripple {\n  to {\n    transform: scale(4);\n    opacity: 1;\n  }\n}\n:root {\n  --size-base-unit: 0.5rem;\n}\n\n/**\n * RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n */\n[dir=rtl] {\n  --rtlTranslateX: 50%;\n  /* 1 */\n  --rtlGradientToRight: 270deg;\n  /* 2 */\n  --rtlRotate45Inverse: -45deg;\n  /* 3 */\n}\n\n/**\n * Visible focus outline for elements on a light background\n */\n/**\n * Visible focus outline for elements with an error status\n */\n/**\n * Visible focus outline for elements on a dark background\n */\n/**\n* Focus state for themes that need a dashed outline for focus\n* state\n**/\n/**\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n */\n/**\n * Visually hidden from display\n */\n/*------------------------------------*\\\\\n#TABLE ROW\n\\\\*------------------------------------*/\n/**\n* Set the host to display the contents within the table header or table body wrapper\n*/\n:host {\n  display: contents;\n}\n\n/**\n* 1) Row of the cre8 table\n*/\n.cre8-c-table__row {\n  display: var(--cre8-table-row-display, table-row);\n  border-bottom: var(--cre8-table-row-border-bottom);\n  /**\n  * Table row hover state\n  * 1) Set the row hover background via custom property to allow\n  * the table variant to control the color\n  */\n}\n.cre8-c-table__row:hover {\n  background: var(--cre8-table-row-hover-background);\n}\n.cre8-c-table__row {\n  /**\n  * Table row within odd cre8-table-row wrappers\n  * 1) Set the odd row and odd row hover background via\n  * custom property to allow the table variant to control the color\n  */\n}\n:host(:nth-child(odd)) .cre8-c-table__row {\n  background: var(--cre8-table-row-odd-background, none);\n}\n:host(:nth-child(odd)) .cre8-c-table__row:hover {\n  background: var(--cre8-table-row-odd-hover-background, inherit);\n}\n@media all and (min-width: 768px) {\n  .cre8-c-table__row {\n    border-bottom: inherit;\n    display: table-row;\n  }\n}\n\n/**\n * Bare variant to remove border\n */\n.cre8-c-table__row--bare {\n  --cre8-table-cell-border-bottom-color: transparent;\n}\n\n/**\n* Slotted table row in expanded content following expandable table row\n* 1) Don't show the collapsed table row by default\n*/\n.cre8-c-table__row--expandable + ::slotted(cre8-table-row) {\n  display: none; /* 1 */\n}\n\n.cre8-c-table__row--expandable.cre8-is-expanded {\n  --cre8-table-cell-border-bottom-color: transparent;\n}\n\n/**\n* Slotted table row in expanded content following expanded table row class\n* 1) Display contents to get the proper table-row display for the row\n*/\n.cre8-c-table__row--expandable.cre8-is-expanded + ::slotted(cre8-table-row) {\n  display: contents; /* 1 */\n}\n\n/**\n* Button that expands the next table row\n*/\n.cre8-c-table__expand-button {\n  background-color: var(--cre8-color-bg-transparent);\n  border-width: var(--cre8-border-width-none);\n}\n\n/**\n* Text within the button that expands the next table row\n*/\n.cre8-c-table__expand-button-text {\n  border: 0;\n  clip: rect(0 0 0 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  width: 1px;\n}\n\n/**\n* Icon within the button that expands the next table row\n*/\n.cre8-c-table__expand-button-icon {\n  display: block;\n  transition: transform 0.2s ease;\n  /**\n  * Icon within the button that expands the next table row when the table row is expanded\n  * 1) Rotate the icon to show that it's open\n  */\n}\n.cre8-is-expanded .cre8-c-table__expand-button-icon {\n  transform: rotate(90deg); /* 1 */\n}`;\nexport default styles;\n"]}

package/lib/components/tabs/tabs.d.ts

@@ -0,0 +1,238 @@
+import { Cre8Element } from '../cre8-element';
+import { Cre8TabPanel } from '../tab-panel/tab-panel';
+import { Cre8Tab } from '../tab/tab';
+/**
+ * Tabs are used to quickly navigate back and forth between views.
+ * The Tab design and interaction varies depending on the requirements for your organization and project.
+ * Standardizing on the best individual controls will improve usability and reduce development and QA time.
+ *
+ * Create a standard set of Tab controls:
+ * Primary Tabs (for system navigation), Secondary Tabs (for sub navigation within a screen).
+ *
+ * ## Usability Guidelines
+ * - The selected Tab should be visually differentiated from the other Tabs.
+ *   The deselected Tabs should still look enabled.
+ *   Dimming the other Tabs decreases the legibility of items that are actually active and clickable.
+ * - There must be a minimum of 2 Tabs.
+ * - Showing status in a Tab is non-standard (such as 0%, 10%).
+ * - Tab labels and content should be parallel, with the exception of a Summary or Overview Tab
+ *   which can be a rollup of content across other Tabs.
+ * - Keep the font size of the Tabs the same.
+ *   If the Tabs are a fixed width and one of the labels is too long,
+ *   don't resize the text to fit and consider wrapping text to a second line.
+ * - If possible, don't truncate text because it makes it harder to understand what's in the Tab.
+ * - Try not to use more than six Tabs to keep the UI uncluttered.
+ * - Do not stack Tabs on top of each other, and do not nest Tabs within Tabs.
+ *   Find alternate ways of navigating page hierarchy.
+ *
+ * @slot default - Default, unnamed slot container for each `cre8-tab` button
+ * @slot panel - Container for each `cre8-tab-panel` content item
+ */
+export declare class Cre8Tabs extends Cre8Element {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Tab sizes
+     * - **default** displays the cre8-tab text with cre8-typography-label-default
+     * - **sm** displays the cre8-tab text with cre8-typography-label-small
+     * @type {"sm"}
+     * @attr
+     */
+    size?: 'sm';
+    /**
+     * Displays a set of tabs with a spanning the width of the element
+     * @attr {boolean}
+     */
+    fullWidth?: boolean;
+    /**
+     * Auto Increment id to sync tab and tab panel
+     *
+     * _*This property is dynamically set_
+     */
+    tabId: string;
+    /**
+     * Sets the initial active tab (e.g. 0 sets the first tab, 1 sets the second tab, etc.)
+     * @attr {number}
+     */
+    activeIndex?: number;
+    /**
+     * The active tab
+     *
+     * _*This property is dynamically set_
+     */
+    activeTab?: Cre8Tab;
+    /**
+     * If position from left is greater than 0, set isStart to false. Otherwise set isStart to true.
+     *
+     * _*This property is dynamically set_
+     * @attr {boolean}
+     */
+    isStart?: boolean;
+    /**
+     * If last child is fully in the viewport, set isEnd to true. Otherwise, set isEnd to false.
+     *
+     * _*This property is dynamically set_
+     * @attr {boolean}
+     */
+    isEnd?: boolean;
+    /**
+     * Query all the tab items
+     */
+    _Cre8TabItems: Array<Cre8Tab>;
+    /**
+     * Query all the tab panels
+     */
+    _Cre8TabPanels: Array<Cre8TabPanel>;
+    /**
+     * Query the tabs header element
+     */
+    _Cre8TabsHeader: HTMLElement;
+    /**
+     * Query the tabs header list element
+     */
+    _Cre8TabsHeaderList: HTMLElement;
+    /**
+     * Query the document direction value
+     *
+     * _*This property is dynamically set_
+     */
+    get isRTL(): boolean;
+    /**
+     * Initialize Functions
+     */
+    constructor();
+    /**
+     * Connected Callback Lifecycle
+     * 1. Fires each time a custom element is appended into a document-connected element.
+     */
+    connectedCallback(): void;
+    /**
+     * Disconnected Callback Lifecycle
+     * 1. Removes the event listeners to ensure that any memory allocated by your component
+     *    will be cleaned up when your component is destroyed or disconnected from the page.
+     */
+    disconnectedCallback(): void;
+    /**
+     * First Updated Lifecycle Hook
+     * 1. Sets the `aria-labelledby` prop for accessible tabs if user doesn't define the `ariaLabelledBy` prop.
+     * 2. Sets the active tab if activeIndex is defined. Otherwise, set the first tab as active by default.
+     * 3. Initialize isStart and isEnd.
+     * 4. Set the varaint on the cre8-tab according to the cre8-tabs variant.
+     */
+    firstUpdated(): Promise<void>;
+    /**
+     * Updated Lifecycle Hook
+     * 1. remove selected state from previously selected tab
+     * 2. Checks to see if the old `activeIndex` property has been updated.
+     *    If the new value doesn't equal the old value, activate the proper tab
+     */
+    updated(changedProperties: Map<string, unknown>): Promise<void>;
+    /**
+     * Handle Resize
+     * 1. On resize, if position from left is greater than 0, set isStart to false. Otherwise set isStart to true.
+     * 2. On resize, If last child is fully in the viewport, set isEnd to true. Otherwise, set isEnd to false.
+     * @fires resize
+     */
+    handleResize(): void;
+    /**
+     * Handle Scroll
+     * 1. On scroll, if position from left is greater than 0, set isStart to false. Otherwise set isStart to true.
+     * 2. On scroll, If last child is fully in the viewport, set isEnd to true. Otherwise, set isEnd to false.
+     * @fires scroll
+     */
+    handleScroll(): void;
+    /**
+     * Set isStart State
+     * 1. If position from left is greater than 0, set isStart to false. Otherwise set isStart to true.
+     */
+    setIsStart(): void;
+    /**
+     * Set isEnd State
+     * 1. If last child is fully in the viewport, set isEnd to true. Otherwise, set isEnd to false.
+     */
+    setIsEnd(): void;
+    /**
+     * Check if last overflow list item is in the viewport
+     * 1. Get children of the overflow list inner container and get bounding client rectangle of last child
+     * 2. Return true if the left property is greater than or equal to 0 and if the right property is less
+     * than or equal to the window inner width or document client width
+     */
+    isInViewport(): boolean;
+    /**
+     * Set Tab Variant
+     * 1. Loop through all the cre8-tab Components and set the size to 'sm' if the parent has size 'sm'.
+     */
+    setTabVariant(): void;
+    /**
+     * Set the attributes on tab and tab panel
+     * 1. Sets the index value on the tab items.
+     * 2. Sets the `aria-labelledby` on the tab items.
+     * 3. Set the index and id on the tab-panel to match the tab.
+     */
+    setTabAttributes(): void;
+    /**
+     * Set Active Tab
+     * 1. Sets the active state for the selected tab.
+     * 2. Sets the active state for the tab panel with the same index value as the selected tab.
+     */
+    setActiveTab(): void;
+    /**
+     * Set Active Tab Focus
+     */
+    setActiveTabFocus(): void;
+    /**
+     * Handle Tab Selected
+     * 1. Only continue if event target is a tab
+     * 2. If tab is active, make the previous selected tab inactive.
+     * 3. Set the clicked tab active.
+     * 4. Emit the custom event.
+     * @fires tabSelected
+     */
+    handleTabSelected(event: MouseEvent): void;
+    /**
+     * Handle Keydown
+     * 1. If the active tab is not focused then handle the keydown events.
+     * 2. On keydown of the right arrow, make the next tab active.
+     * 3. On keydown of the left arrow, make the previous tab active.
+     * 4. On keydown of the home key, make the first tab active.
+     * 5. On keydown of the end key, make the last tab active.
+     * 6. On keydown of the escape key, remove the focus.
+     * @fires keydown
+     */
+    handleKeydown(event: KeyboardEvent): void;
+    /**
+     * Set Selected To Previous Tab
+     * 1. Get current selected Tab index then deactivate previously selected tab.
+     * 2. If current activeIndex is in first position then move the tab focus to last tab.
+     * 3. Set the active tab and focus.
+     * 4. Emit custom event.
+     * @fires tabChange
+     */
+    setSelectedToPreviousTab(currentTab: Cre8Tab): void;
+    /**
+     * Set Selected To Next Tab
+     * 1. Get current selected Tab index then deactivate previously selected tab.
+     * 2. If current activeIndex is in last position then move the tab focus to first tab.
+     * 3. Set the active tab and focus.
+     * 4. Emit custom event.
+     * @fires tabChange
+     */
+    setSelectedToNextTab(currentTab: Cre8Tab): void;
+    /**
+     * Remove Active from Previous Tab
+     * 1. Get current selected Tab index then deactivate previously selected tab
+     * 2. If current activeIndex is in first position then move the tab focus to last tab
+     */
+    removePreviousActiveTab(): void;
+    /**
+     * Emit custom event
+     */
+    emitEvent(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cre8-tabs': Cre8Tabs;
+    }
+}
+export default Cre8Tabs;
+//# sourceMappingURL=tabs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../components/tabs/tabs.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAKrC;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,qBAAa,QAAS,SAAQ,WAAW;IACrC,MAAM,CAAC,MAAM,4BAAY;IAEzB;;;;;;OAMG;IAEH,IAAI,CAAC,EAAE,IAAI,CAAC;IAEZ;;;OAGG;IAEH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IAEH,WAAW,CAAC,EAAE,MAAM,CAAK;IAEzB;;;;OAIG;IAEH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;OAKG;IAEH,OAAO,CAAC,EAAE,OAAO,CAAQ;IAEzB;;;;;OAKG;IAEH,KAAK,CAAC,EAAE,OAAO,CAAS;IAExB;;OAEG;IAEH,aAAa,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;IAE9B;;OAEG;IAEH,cAAc,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;IAEpC;;OAEG;IAEH,eAAe,EAAE,WAAW,CAAC;IAE7B;;OAEG;IAEH,mBAAmB,EAAE,WAAW,CAAC;IAEjC;;;;OAIG;IACH,IAAI,KAAK,YAER;IAED;;OAEG;;IAgBH;;;OAGG;IACH,iBAAiB;IAKjB;;;;OAIG;IACH,oBAAoB;IAKpB;;;;;;OAMG;IACG,YAAY;IAiBlB;;;;;OAKG;IACG,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAerD;;;;;OAKG;IACH,YAAY;IAKZ;;;;;OAKG;IACH,YAAY;IAKZ;;;OAGG;IACH,UAAU;IAcV;;;OAGG;IACH,QAAQ;IAQR;;;;;OAKG;IACH,YAAY;IAYZ;;;OAGG;IACH,aAAa;IAQb;;;;;OAKG;IACH,gBAAgB;IAiBhB;;;;OAIG;IACH,YAAY;IAWZ;;OAEG;IACH,iBAAiB;IAIjB;;;;;;;OAOG;IACH,iBAAiB,CAAC,KAAK,EAAE,UAAU;IAqBnC;;;;;;;;;OASG;IACH,aAAa,CAAC,KAAK,EAAE,aAAa;IAqClC;;;;;;;OAOG;IACH,wBAAwB,CAAC,UAAU,EAAE,OAAO;IAwB5C;;;;;;;OAOG;IACH,oBAAoB,CAAC,UAAU,EAAE,OAAO;IAwBxC;;;;OAIG;IACH,uBAAuB;IAWvB;;OAEG;IACH,SAAS;IAYT,MAAM;CA2BT;AAMD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,WAAW,EAAE,QAAQ,CAAC;KACzB;CACJ;AAED,eAAe,QAAQ,CAAC"}