@tmorrow/cre8-wc 1.1.2 → 1.1.3

package/lib/components/submenu-item/submenu-item.js

@@ -1,35 +1,41 @@
-import { css as d, html as l } from "lit";
-import { property as m } from "lit/decorators.js";
-import { Cre8Element as c } from "../cre8-element.js";
-const h = d`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}.cre8-c-submenu-item__link{color:var(--cre8-color-header-submenu-content-default);background:var(--cre8-color-header-submenu-bg-default);text-decoration:none}.cre8-c-submenu-item__link:hover,.cre8-c-submenu-item__link:focus{color:var(--cre8-color-header-submenu-content-hover);background:var(--cre8-color-header-submenu-bg-hover)}.cre8-c-submenu-item__link:active{color:var(--cre8-color-header-submenu-content-pressed);background:var(--cre8-color-header-submenu-bg-pressed)}`;
-var p = Object.defineProperty, u = (a, t, n, f) => {
-  for (var e = void 0, s = a.length - 1, o; s >= 0; s--)
-    (o = a[s]) && (e = o(t, n, e) || e);
-  return e && p(t, n, e), e;
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-const i = class i extends c {
-  render() {
-    const t = this.componentClassNames("cre8-c-submenu-item", {});
-    return this.href ? l`
-        <li role="listitem" class="${t}">
+import { html, } from 'lit';
+import { property } from 'lit/decorators.js';
+import { Cre8Element } from '../cre8-element';
+import styles from './submenu-item.styles.js';
+/**
+ * @slot - The component content
+ */
+export class Cre8SubmenuItem extends Cre8Element {
+    render() {
+        const componentClassNames = this.componentClassNames('cre8-c-submenu-item', {});
+        if (this.href) {
+            return html `
+        <li role="listitem" class="${componentClassNames}">
           <a href=${this.href} class="cre8-c-submenu-item__link">
             <slot></slot>
           </a>
         </li>
-      ` : l`<li role="listitem" class="${t}">
+      `;
+        }
+        return html `<li role="listitem" class="${componentClassNames}">
         <button class="cre8-c-submenu-item__link">
           <slot></slot>
         </button>
       </li>`;
-  }
-};
-i.styles = [h];
-let r = i;
-u([
-  m()
-], r.prototype, "href");
-customElements.get("cre8-submenu-item") === void 0 && customElements.define("cre8-submenu-item", r);
-export {
-  r as Cre8SubmenuItem,
-  r as default
-};
+    }
+}
+Cre8SubmenuItem.styles = [styles];
+__decorate([
+    property()
+], Cre8SubmenuItem.prototype, "href", void 0);
+if (customElements.get('cre8-submenu-item') === undefined) {
+    customElements.define('cre8-submenu-item', Cre8SubmenuItem);
+}
+export default Cre8SubmenuItem;
+//# sourceMappingURL=submenu-item.js.map

package/lib/components/submenu-item/submenu-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"submenu-item.js","sourceRoot":"","sources":["../../../components/submenu-item/submenu-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,0BAA0B,CAAC;AAE9C;;GAEG;AACH,MAAM,OAAO,eAAgB,SAAQ,WAAW;IAS9C,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,qBAAqB,EAAE,EAAE,CAAC,CAAC;QAEhF,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACZ,OAAO,IAAI,CAAA;qCACgB,mBAAmB;oBACpC,IAAI,CAAC,IAAI;;;;OAItB,CAAC;QACF,CAAC;QACD,OAAO,IAAI,CAAA,8BAA8B,mBAAmB;;;;YAItD,CAAC;IACX,CAAC;;AAzBQ,sBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAMvB;IADH,QAAQ,EAAE;6CACO;AAsBpB,IAAI,cAAc,CAAC,GAAG,CAAC,mBAAmB,CAAC,KAAK,SAAS,EAAE,CAAC;IACxD,cAAc,CAAC,MAAM,CAAC,mBAAmB,EAAE,eAAe,CAAC,CAAC;AAChE,CAAC;AAQD,eAAe,eAAe,CAAC","sourcesContent":["import { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './submenu-item.styles.js';\n\n/**\n * @slot - The component content\n */\nexport class Cre8SubmenuItem extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * The link URL\n   */\n  @property()\n      href?: string;\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-submenu-item', {});\n\n      if (this.href) {\n          return html`\n        <li role=\"listitem\" class=\"${componentClassNames}\">\n          <a href=${this.href} class=\"cre8-c-submenu-item__link\">\n            <slot></slot>\n          </a>\n        </li>\n      `;\n      }\n      return html`<li role=\"listitem\" class=\"${componentClassNames}\">\n        <button class=\"cre8-c-submenu-item__link\">\n          <slot></slot>\n        </button>\n      </li>`;\n  }\n}\n\nif (customElements.get('cre8-submenu-item') === undefined) {\n    customElements.define('cre8-submenu-item', Cre8SubmenuItem);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-submenu-item': Cre8SubmenuItem;\n  }\n}\n\nexport default Cre8SubmenuItem;\n"]}

package/lib/components/submenu-item/submenu-item.styles.js

@@ -0,0 +1,4 @@
+import { css } from 'lit';
+const styles = css `*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}.cre8-c-submenu-item__link{color:var(--cre8-color-header-submenu-content-default);background:var(--cre8-color-header-submenu-bg-default);text-decoration:none}.cre8-c-submenu-item__link:hover,.cre8-c-submenu-item__link:focus{color:var(--cre8-color-header-submenu-content-hover);background:var(--cre8-color-header-submenu-bg-hover)}.cre8-c-submenu-item__link:active{color:var(--cre8-color-header-submenu-content-pressed);background:var(--cre8-color-header-submenu-bg-pressed)}`;
+export default styles;
+//# sourceMappingURL=submenu-item.styles.js.map

package/lib/components/submenu-item/submenu-item.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"submenu-item.styles.js","sourceRoot":"","sources":["../../../components/submenu-item/submenu-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,ouEAAouE,CAAC;AACvvE,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}.cre8-c-submenu-item__link{color:var(--cre8-color-header-submenu-content-default);background:var(--cre8-color-header-submenu-bg-default);text-decoration:none}.cre8-c-submenu-item__link:hover,.cre8-c-submenu-item__link:focus{color:var(--cre8-color-header-submenu-content-hover);background:var(--cre8-color-header-submenu-bg-hover)}.cre8-c-submenu-item__link:active{color:var(--cre8-color-header-submenu-content-pressed);background:var(--cre8-color-header-submenu-bg-pressed)}`;\nexport default styles;\n"]}

package/lib/components/tab/tab.js

@@ -1,74 +1,85 @@
-import { css as n, html as p } from "lit";
-import { property as i, query as h } from "lit/decorators.js";
-import { Cre8Element as b } from "../cre8-element.js";
-const m = n`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:contents}.cre8-c-tab{font-family:var(--cre8-typography-label-default-font-family);font-size:var(--cre8-typography-label-default-font-size);font-weight:var(--cre8-typography-label-default-font-weight);line-height:var(--cre8-typography-label-default-line-height);text-decoration:var(--cre8-typography-label-default-text-decoration);text-transform:var(--cre8-typography-label-default-text-transform);position:relative;display:flex;margin:0;flex-shrink:0;padding:0;align-items:center;justify-content:center;gap:0.5rem;color:var(--cre8-color-content-default);background-color:rgba(0,0,0,0);border:0;border-block-end:var(--cre8-border-width-tab-selected) var(--cre8-border-style-default) var(--cre8-color-border-default);padding-block-start:0.5rem;padding-inline-end:1.5rem;padding-block-end:calc(0.5rem - var(--cre8-border-width-tab-selected));padding-inline-start:1.5rem;cursor:pointer;overflow:hidden;transition:border-color var(--cre8-anim-fade-quick) var(--cre8-anim-ease),background-color var(--cre8-anim-fade-quick) var(--cre8-anim-ease)}.cre8-c-tab:hover{background-color:var(--cre8-color-bg-brand-hover)}.cre8-c-tab:focus-visible{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem;outline-offset:calc(var(--cre8-border-width-focus)*-1);border-radius:var(--cre8-border-radius-small);border-block-end-color:rgba(0,0,0,0)}.cre8-c-tab.cre8-is-active:not(:focus-visible){color:var(--cre8-color-content-brand-strong);background-color:rgba(0,0,0,0);border-block-end:var(--cre8-border-width-tab-selected) var(--cre8-border-style-default) var(--cre8-color-border-brand-strong);padding-block-end:calc(0.5rem - var(--cre8-border-width-tab-selected))}.cre8-c-tab.cre8-c-tab--small{font-family:var(--cre8-typography-label-small-font-family);font-size:var(--cre8-typography-label-small-font-size);font-weight:var(--cre8-typography-label-small-font-weight);line-height:var(--cre8-typography-label-small-line-height);text-decoration:var(--cre8-typography-label-small-text-decoration);text-transform:var(--cre8-typography-label-small-text-transform);padding-block-start:0.25rem;padding-inline-end:1rem;padding-block-end:calc(0.25rem - var(--cre8-border-width-tab-selected));padding-inline-start:1rem}.cre8-c-tab.cre8-c-tab--small.cre8-is-active:not(:focus-visible){padding-block-end:calc(0.25rem - var(--cre8-border-width-tab-selected))}`;
-var f = Object.defineProperty, a = (s, e, d, g) => {
-  for (var r = void 0, o = s.length - 1, c; o >= 0; o--)
-    (c = s[o]) && (r = c(e, d, r) || r);
-  return r && f(e, d, r), r;
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-const l = class l extends b {
-  /**
-   * Updated
-   * 1. Called when the element's DOM has been updated and rendered.
-   * 2. If has ariaLabelledBy, then set the tab ID with the value.
-   * 3. If the tab is active, set the tabindex to 0 and aria-selected to true.
-   */
-  updated(e) {
-    e.has("ariaLabelledBy") && this._Cre8Tab.setAttribute("id", this.ariaLabelledBy), e.has("isActive") && (this._Cre8Tab.setAttribute("tabindex", this.isActive ? "0" : "-1"), this._Cre8Tab.setAttribute("aria-selected", `${this.isActive}`));
-  }
-  /**
-   * Handle Tab Selected
-   * 1. Fire the custom event on click of a tab.
-   */
-  _handleTabSelected() {
-    const e = new CustomEvent("tabSelected", {
-      detail: {
-        index: this.index
-      },
-      bubbles: !0,
-      composed: !0
-    });
-    this.dispatchEvent(e);
-  }
-  render() {
-    const e = this.componentClassNames("cre8-c-tab", {
-      "cre8-is-active": this.isActive,
-      "cre8-c-tab--small": this.size === "sm"
-    });
-    return p`
+import { html } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { Cre8Element } from '../cre8-element';
+import styles from './tab.styles.js';
+/**
+ * @slot - The component content
+ */
+export class Cre8Tab extends Cre8Element {
+    /**
+     * Updated
+     * 1. Called when the element's DOM has been updated and rendered.
+     * 2. If has ariaLabelledBy, then set the tab ID with the value.
+     * 3. If the tab is active, set the tabindex to 0 and aria-selected to true.
+     */
+    updated(changedProperties) {
+        /* 2 */
+        if (changedProperties.has('ariaLabelledBy')) {
+            this._Cre8Tab.setAttribute('id', this.ariaLabelledBy);
+        }
+        /* 3 */
+        if (changedProperties.has('isActive')) {
+            this._Cre8Tab.setAttribute('tabindex', this.isActive ? '0' : '-1');
+            this._Cre8Tab.setAttribute('aria-selected', `${this.isActive}`);
+        }
+    }
+    /**
+     * Handle Tab Selected
+     * 1. Fire the custom event on click of a tab.
+     */
+    _handleTabSelected() {
+        const customEvent = new CustomEvent('tabSelected', {
+            detail: {
+                index: this.index,
+            },
+            bubbles: true,
+            composed: true,
+        });
+        this.dispatchEvent(customEvent);
+    }
+    render() {
+        const componentClassNames = this.componentClassNames('cre8-c-tab', {
+            'cre8-is-active': this.isActive,
+            'cre8-c-tab--small': this.size === 'sm',
+        });
+        return html `
       <button
         role="tab"
         tabindex="-1"
         aria-selected="false"
         type="button"
-        class="${e}"
+        class="${componentClassNames}"
         @click=${this._handleTabSelected}
       >
         <slot></slot>
       </button>
     `;
-  }
-};
-l.styles = [m];
-let t = l;
-a([
-  i()
-], t.prototype, "size");
-a([
-  i({ type: Boolean, reflect: !0 })
-], t.prototype, "isActive");
-a([
-  i({ type: Number })
-], t.prototype, "index");
-a([
-  i()
-], t.prototype, "ariaLabelledBy");
-a([
-  h(".cre8-c-tab")
-], t.prototype, "_Cre8Tab");
-customElements.get("cre8-tab") === void 0 && customElements.define("cre8-tab", t);
-export {
-  t as Cre8Tab,
-  t as default
-};
+    }
+}
+Cre8Tab.styles = [styles];
+__decorate([
+    property()
+], Cre8Tab.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8Tab.prototype, "isActive", void 0);
+__decorate([
+    property({ type: Number })
+], Cre8Tab.prototype, "index", void 0);
+__decorate([
+    property()
+], Cre8Tab.prototype, "ariaLabelledBy", void 0);
+__decorate([
+    query('.cre8-c-tab')
+], Cre8Tab.prototype, "_Cre8Tab", void 0);
+if (customElements.get('cre8-tab') === undefined) {
+    customElements.define('cre8-tab', Cre8Tab);
+}
+export default Cre8Tab;
+//# sourceMappingURL=tab.js.map

package/lib/components/tab/tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab.js","sourceRoot":"","sources":["../../../components/tab/tab.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC;;GAEG;AAEH,MAAM,OAAO,OAAQ,SAAQ,WAAW;IA2CtC;;;;;OAKG;IACM,OAAO,CAAC,iBAAiC;QAChD,OAAO;QACL,IAAI,iBAAiB,CAAC,GAAG,CAAC,gBAAgB,CAAC,EAAE,CAAC;YAC1C,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,IAAI,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;QAC1D,CAAC;QACH,OAAO;QACL,IAAI,iBAAiB,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC;YACpC,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;YACnE,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,eAAe,EAAE,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;QACpE,CAAC;IACL,CAAC;IAED;;;OAGG;IAEK,kBAAkB;QACtB,MAAM,WAAW,GAAG,IAAI,WAAW,CAAC,aAAa,EAAE;YAC/C,MAAM,EAAE;gBACJ,KAAK,EAAE,IAAI,CAAC,KAAK;aACpB;YACD,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACjB,CAAC,CAAC;QACH,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IACpC,CAAC;IAED,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,YAAY,EAAE;YAC/D,gBAAgB,EAAE,IAAI,CAAC,QAAQ;YAC/B,mBAAmB,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;SAC1C,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;;;;;;iBAMA,mBAAmB;iBACnB,IAAI,CAAC,kBAAkB;;;;KAInC,CAAC;IACJ,CAAC;;AA9FQ,cAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAUvB;IADH,QAAQ,EAAE;qCACK;AAQZ;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCACpB;AAQnB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACR;AAQf;IADH,QAAQ,EAAE;+CACiB;AAMxB;IADH,KAAK,CAAC,aAAa,CAAC;yCACW;AAyDlC,IAAI,cAAc,CAAC,GAAG,CAAC,UAAU,CAAC,KAAK,SAAS,EAAE,CAAC;IAC/C,cAAc,CAAC,MAAM,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;AAC/C,CAAC;AAQD,eAAe,OAAO,CAAC","sourcesContent":["import { html, PropertyValues } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './tab.styles.js';\n\n/**\n * @slot - The component content\n */\n\nexport class Cre8Tab extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * Tab sizes\n   * - **default** displays the tab text with cre8-typography-label-default\n   * - **sm** displays the tab text with cre8-typography-label-small and decrease padding\n   *\n   * _*This property is dynamically set_\n   */\n  @property()\n      size?: 'sm';\n\n  /**\n   * If is true, tab has active state and cooresponding tab panel is visible.\n   *\n   * _*This property is dynamically set_\n   */\n  @property({ type: Boolean, reflect: true })\n      isActive?: boolean;\n\n  /**\n   * Used to align the tab with the tab panel\n   *\n   * _*This property is dynamically set_\n   */\n  @property({ type: Number })\n      index?: number;\n\n  /**\n   * Used to connect tab trigger and tab panel for accessibility\n   *\n   * _*This property is dynamically set_\n   */\n  @property()\n      ariaLabelledBy?: string;\n\n  /**\n   * Query the tab element\n   */\n  @query('.cre8-c-tab')\n      _Cre8Tab: HTMLButtonElement;\n\n  /**\n   * Updated\n   * 1. Called when the element's DOM has been updated and rendered.\n   * 2. If has ariaLabelledBy, then set the tab ID with the value.\n   * 3. If the tab is active, set the tabindex to 0 and aria-selected to true.\n   */\n  override updated(changedProperties: PropertyValues) {\n    /* 2 */\n      if (changedProperties.has('ariaLabelledBy')) {\n          this._Cre8Tab.setAttribute('id', this.ariaLabelledBy);\n      }\n    /* 3 */\n      if (changedProperties.has('isActive')) {\n          this._Cre8Tab.setAttribute('tabindex', this.isActive ? '0' : '-1');\n          this._Cre8Tab.setAttribute('aria-selected', `${this.isActive}`);\n      }\n  }\n\n  /**\n   * Handle Tab Selected\n   * 1. Fire the custom event on click of a tab.\n   */\n\n  private _handleTabSelected() {\n      const customEvent = new CustomEvent('tabSelected', {\n          detail: {\n              index: this.index,\n          },\n          bubbles: true,\n          composed: true,\n      });\n      this.dispatchEvent(customEvent);\n  }\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-tab', {\n          'cre8-is-active': this.isActive,\n          'cre8-c-tab--small': this.size === 'sm',\n      });\n\n      return html`\n      <button\n        role=\"tab\"\n        tabindex=\"-1\"\n        aria-selected=\"false\"\n        type=\"button\"\n        class=\"${componentClassNames}\"\n        @click=${this._handleTabSelected}\n      >\n        <slot></slot>\n      </button>\n    `;\n  }\n}\n\nif (customElements.get('cre8-tab') === undefined) {\n    customElements.define('cre8-tab', Cre8Tab);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-tab': Cre8Tab;\n  }\n}\n\nexport default Cre8Tab;\n"]}

package/lib/components/tab/tab.styles.js

@@ -0,0 +1,4 @@
+import { css } from 'lit';
+const styles = css `*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:contents}.cre8-c-tab{font-family:var(--cre8-typography-label-default-font-family);font-size:var(--cre8-typography-label-default-font-size);font-weight:var(--cre8-typography-label-default-font-weight);line-height:var(--cre8-typography-label-default-line-height);text-decoration:var(--cre8-typography-label-default-text-decoration);text-transform:var(--cre8-typography-label-default-text-transform);position:relative;display:flex;margin:0;flex-shrink:0;padding:0;align-items:center;justify-content:center;gap:0.5rem;color:var(--cre8-color-content-default);background-color:rgba(0,0,0,0);border:0;border-block-end:var(--cre8-border-width-tab-selected) var(--cre8-border-style-default) var(--cre8-color-border-default);padding-block-start:0.5rem;padding-inline-end:1.5rem;padding-block-end:calc(0.5rem - var(--cre8-border-width-tab-selected));padding-inline-start:1.5rem;cursor:pointer;overflow:hidden;transition:border-color var(--cre8-anim-fade-quick) var(--cre8-anim-ease),background-color var(--cre8-anim-fade-quick) var(--cre8-anim-ease)}.cre8-c-tab:hover{background-color:var(--cre8-color-bg-brand-hover)}.cre8-c-tab:focus-visible{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem;outline-offset:calc(var(--cre8-border-width-focus)*-1);border-radius:var(--cre8-border-radius-small);border-block-end-color:rgba(0,0,0,0)}.cre8-c-tab.cre8-is-active:not(:focus-visible){color:var(--cre8-color-content-brand-strong);background-color:rgba(0,0,0,0);border-block-end:var(--cre8-border-width-tab-selected) var(--cre8-border-style-default) var(--cre8-color-border-brand-strong);padding-block-end:calc(0.5rem - var(--cre8-border-width-tab-selected))}.cre8-c-tab.cre8-c-tab--small{font-family:var(--cre8-typography-label-small-font-family);font-size:var(--cre8-typography-label-small-font-size);font-weight:var(--cre8-typography-label-small-font-weight);line-height:var(--cre8-typography-label-small-line-height);text-decoration:var(--cre8-typography-label-small-text-decoration);text-transform:var(--cre8-typography-label-small-text-transform);padding-block-start:0.25rem;padding-inline-end:1rem;padding-block-end:calc(0.25rem - var(--cre8-border-width-tab-selected));padding-inline-start:1rem}.cre8-c-tab.cre8-c-tab--small.cre8-is-active:not(:focus-visible){padding-block-end:calc(0.25rem - var(--cre8-border-width-tab-selected))}`;
+export default styles;
+//# sourceMappingURL=tab.styles.js.map

package/lib/components/tab/tab.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab.styles.js","sourceRoot":"","sources":["../../../components/tab/tab.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,qmIAAqmI,CAAC;AACxnI,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:contents}.cre8-c-tab{font-family:var(--cre8-typography-label-default-font-family);font-size:var(--cre8-typography-label-default-font-size);font-weight:var(--cre8-typography-label-default-font-weight);line-height:var(--cre8-typography-label-default-line-height);text-decoration:var(--cre8-typography-label-default-text-decoration);text-transform:var(--cre8-typography-label-default-text-transform);position:relative;display:flex;margin:0;flex-shrink:0;padding:0;align-items:center;justify-content:center;gap:0.5rem;color:var(--cre8-color-content-default);background-color:rgba(0,0,0,0);border:0;border-block-end:var(--cre8-border-width-tab-selected) var(--cre8-border-style-default) var(--cre8-color-border-default);padding-block-start:0.5rem;padding-inline-end:1.5rem;padding-block-end:calc(0.5rem - var(--cre8-border-width-tab-selected));padding-inline-start:1.5rem;cursor:pointer;overflow:hidden;transition:border-color var(--cre8-anim-fade-quick) var(--cre8-anim-ease),background-color var(--cre8-anim-fade-quick) var(--cre8-anim-ease)}.cre8-c-tab:hover{background-color:var(--cre8-color-bg-brand-hover)}.cre8-c-tab:focus-visible{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem;outline-offset:calc(var(--cre8-border-width-focus)*-1);border-radius:var(--cre8-border-radius-small);border-block-end-color:rgba(0,0,0,0)}.cre8-c-tab.cre8-is-active:not(:focus-visible){color:var(--cre8-color-content-brand-strong);background-color:rgba(0,0,0,0);border-block-end:var(--cre8-border-width-tab-selected) var(--cre8-border-style-default) var(--cre8-color-border-brand-strong);padding-block-end:calc(0.5rem - var(--cre8-border-width-tab-selected))}.cre8-c-tab.cre8-c-tab--small{font-family:var(--cre8-typography-label-small-font-family);font-size:var(--cre8-typography-label-small-font-size);font-weight:var(--cre8-typography-label-small-font-weight);line-height:var(--cre8-typography-label-small-line-height);text-decoration:var(--cre8-typography-label-small-text-decoration);text-transform:var(--cre8-typography-label-small-text-transform);padding-block-start:0.25rem;padding-inline-end:1rem;padding-block-end:calc(0.25rem - var(--cre8-border-width-tab-selected));padding-inline-start:1rem}.cre8-c-tab.cre8-c-tab--small.cre8-is-active:not(:focus-visible){padding-block-end:calc(0.25rem - var(--cre8-border-width-tab-selected))}`;\nexport default styles;\n"]}

package/lib/components/tab-panel/tab-panel.js

@@ -1,47 +1,53 @@
-import { css as p, html as c } from "lit";
-import { property as a, query as h } from "lit/decorators.js";
-import { Cre8Element as m } from "../cre8-element.js";
-const f = p`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:contents}.cre8-c-tab-panel{visibility:hidden;display:none}.cre8-c-tab-panel:focus-visible{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-c-tab-panel.cre8-is-active{visibility:visible;display:block}`;
-var x = Object.defineProperty, r = (d, i, n, y) => {
-  for (var t = void 0, s = d.length - 1, o; s >= 0; s--)
-    (o = d[s]) && (t = o(i, n, t) || t);
-  return t && x(i, n, t), t;
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-const l = class l extends m {
-  /**
-   * First updated
-   * 1. If skipFocusOnPanel is not true, then allow tabbing to the panel.
-   */
-  firstUpdated() {
-    this.skipFocusOnPanel || this._Cre8TabPanel.setAttribute("tabindex", "0");
-  }
-  render() {
-    const i = this.componentClassNames("cre8-c-tab-panel", {
-      "cre8-is-active": this.isActive
-    });
-    return c`
-      <div role="tabpanel" class="${i}">
+import { html, } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { Cre8Element } from '../cre8-element';
+import styles from './tab-panel.styles.js';
+/**
+ * @slot - The component content
+ */
+export class Cre8TabPanel extends Cre8Element {
+    /**
+     * First updated
+     * 1. If skipFocusOnPanel is not true, then allow tabbing to the panel.
+     */
+    firstUpdated() {
+        /* 1 */
+        if (!this.skipFocusOnPanel) {
+            this._Cre8TabPanel.setAttribute('tabindex', '0');
+        }
+    }
+    render() {
+        const componentClassNames = this.componentClassNames('cre8-c-tab-panel', {
+            'cre8-is-active': this.isActive,
+        });
+        return html `
+      <div role="tabpanel" class="${componentClassNames}">
         <slot></slot>
       </div>
     `;
-  }
-};
-l.styles = [f];
-let e = l;
-r([
-  a({ type: Boolean, reflect: !0 })
-], e.prototype, "skipFocusOnPanel");
-r([
-  a({ type: Boolean, reflect: !0 })
-], e.prototype, "isActive");
-r([
-  a({ type: Number })
-], e.prototype, "index");
-r([
-  h(".cre8-c-tab-panel")
-], e.prototype, "_Cre8TabPanel");
-customElements.get("cre8-tab-panel") === void 0 && customElements.define("cre8-tab-panel", e);
-export {
-  e as Cre8TabPanel,
-  e as default
-};
+    }
+}
+Cre8TabPanel.styles = [styles];
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8TabPanel.prototype, "skipFocusOnPanel", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8TabPanel.prototype, "isActive", void 0);
+__decorate([
+    property({ type: Number })
+], Cre8TabPanel.prototype, "index", void 0);
+__decorate([
+    query('.cre8-c-tab-panel')
+], Cre8TabPanel.prototype, "_Cre8TabPanel", void 0);
+if (customElements.get('cre8-tab-panel') === undefined) {
+    customElements.define('cre8-tab-panel', Cre8TabPanel);
+}
+export default Cre8TabPanel;
+//# sourceMappingURL=tab-panel.js.map

package/lib/components/tab-panel/tab-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-panel.js","sourceRoot":"","sources":["../../../components/tab-panel/tab-panel.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,uBAAuB,CAAC;AAE3C;;GAEG;AAEH,MAAM,OAAO,YAAa,SAAQ,WAAW;IA6B3C;;;OAGG;IACH,YAAY;QACV,OAAO;QACL,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACzB,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;QACrD,CAAC;IACL,CAAC;IAED,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,kBAAkB,EAAE;YACrE,gBAAgB,EAAE,IAAI,CAAC,QAAQ;SAClC,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;oCACmB,mBAAmB;;;KAGlD,CAAC;IACJ,CAAC;;AAjDQ,mBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAMvB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sDACZ;AAO3B;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CACpB;AAOnB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACR;AAMf;IADH,KAAK,CAAC,mBAAmB,CAAC;mDACI;AA0BjC,IAAI,cAAc,CAAC,GAAG,CAAC,gBAAgB,CAAC,KAAK,SAAS,EAAE,CAAC;IACrD,cAAc,CAAC,MAAM,CAAC,gBAAgB,EAAE,YAAY,CAAC,CAAC;AAC1D,CAAC;AAQD,eAAe,YAAY,CAAC","sourcesContent":["import { html,  } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './tab-panel.styles.js';\n\n/**\n * @slot - The component content\n */\n\nexport class Cre8TabPanel extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * This will remove focus on panel element\n   */\n  @property({ type: Boolean, reflect: true })\n      skipFocusOnPanel?: boolean;\n\n  /**\n   * Indicates if the panel is active\n   * <br/><br/> _*This property is dynamically set_\n   */\n  @property({ type: Boolean, reflect: true })\n      isActive?: boolean;\n\n  /**\n   * Used to align the tab panel with the tab\n   * <br/><br/> _*This property is dynamically set_\n   */\n  @property({ type: Number })\n      index?: number;\n\n  /**\n   * Query the tab panel element\n   */\n  @query('.cre8-c-tab-panel')\n      _Cre8TabPanel: HTMLElement;\n\n  /**\n   * First updated\n   * 1. If skipFocusOnPanel is not true, then allow tabbing to the panel.\n   */\n  firstUpdated() {\n    /* 1 */\n      if (!this.skipFocusOnPanel) {\n          this._Cre8TabPanel.setAttribute('tabindex', '0');\n      }\n  }\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-tab-panel', {\n          'cre8-is-active': this.isActive,\n      });\n\n      return html`\n      <div role=\"tabpanel\" class=\"${componentClassNames}\">\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\nif (customElements.get('cre8-tab-panel') === undefined) {\n    customElements.define('cre8-tab-panel', Cre8TabPanel);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-tab-panel': Cre8TabPanel;\n  }\n}\n\nexport default Cre8TabPanel;\n"]}

package/lib/components/tab-panel/tab-panel.styles.js

@@ -0,0 +1,4 @@
+import { css } from 'lit';
+const styles = css `*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:contents}.cre8-c-tab-panel{visibility:hidden;display:none}.cre8-c-tab-panel:focus-visible{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-c-tab-panel.cre8-is-active{visibility:visible;display:block}`;
+export default styles;
+//# sourceMappingURL=tab-panel.styles.js.map

package/lib/components/tab-panel/tab-panel.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-panel.styles.js","sourceRoot":"","sources":["../../../components/tab-panel/tab-panel.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,iiEAAiiE,CAAC;AACpjE,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:contents}.cre8-c-tab-panel{visibility:hidden;display:none}.cre8-c-tab-panel:focus-visible{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-c-tab-panel.cre8-is-active{visibility:visible;display:block}`;\nexport default styles;\n"]}

package/lib/components/table/table.js

@@ -1,45 +1,50 @@
-import { css as p, html as l } from "lit";
-import { property as a } from "lit/decorators.js";
-import { Cre8Element as h } from "../cre8-element.js";
-const b = p`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:block}.cre8-c-table{width:100%;border-collapse:collapse;border-spacing:0;max-width:100%;background-color:var(--cre8-color-bg-transparent)}.cre8-c-table--striped{--cre8-table-row-odd-background: var(--cre8-color-bg-subtle);--cre8-table-row-odd-hover-background: var(--cre8-color-bg-subtle)}.cre8-c-table--hoverable{--cre8-table-row-hover-background: var(--cre8-color-bg-default-hover);--cre8-table-row-odd-hover-background: var(--cre8-color-bg-default-hover)}.cre8-c-table--responsive{--cre8-table-cell-before-content: attr(data-header);--cre8-table-header-display: none;--cre8-table-row-display: block;--cre8-table-cell-display: block;--cre8-table-cell-border-bottom-width: 0;--cre8-table-row-border-bottom: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-default)}@media all and (min-width: 768px){.cre8-c-table--responsive{--cre8-table-cell-border-bottom-width: var(--cre8-border-width-default)}}`;
-var m = Object.defineProperty, o = (d, t, c, f) => {
-  for (var r = void 0, i = d.length - 1, n; i >= 0; i--)
-    (n = d[i]) && (r = n(t, c, r) || r);
-  return r && m(t, c, r), r;
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-const s = class s extends h {
-  render() {
-    const t = this.componentClassNames("cre8-c-table", {
-      "cre8-c-table--hoverable": this.isHoverable,
-      "cre8-c-table--striped": this.variant === "striped",
-      "cre8-c-table--responsive": this.behavior === "responsive"
-    });
-    return l`
-      <table role="table" class="${t}">
-        ${this.caption ? l`<caption class="cre8-c-table__caption">
+import { html, } from 'lit';
+import { property } from 'lit/decorators.js';
+import { Cre8Element } from '../cre8-element';
+import styles from './table.styles.js';
+/**
+ * @slot - The component content
+ */
+export class Cre8Table extends Cre8Element {
+    render() {
+        const componentClassNames = this.componentClassNames('cre8-c-table', {
+            'cre8-c-table--hoverable': this.isHoverable,
+            'cre8-c-table--striped': this.variant === 'striped',
+            'cre8-c-table--responsive': this.behavior === 'responsive',
+        });
+        return html `
+      <table role="table" class="${componentClassNames}">
+        ${this.caption
+            ? html `<caption class="cre8-c-table__caption">
             ${this.caption}
-          </caption>` : ""}
-        ${l`<slot></slot>`}
+          </caption>`
+            : ''}
+        ${html `<slot></slot>`}
       </table>
     `;
-  }
-};
-s.styles = [b];
-let e = s;
-o([
-  a()
-], e.prototype, "caption");
-o([
-  a()
-], e.prototype, "behavior");
-o([
-  a({ type: Boolean, reflect: !0 })
-], e.prototype, "isHoverable");
-o([
-  a()
-], e.prototype, "variant");
-customElements.get("cre8-table") === void 0 && customElements.define("cre8-table", e);
-export {
-  e as Cre8Table,
-  e as default
-};
+    }
+}
+Cre8Table.styles = [styles];
+__decorate([
+    property()
+], Cre8Table.prototype, "caption", void 0);
+__decorate([
+    property()
+], Cre8Table.prototype, "behavior", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8Table.prototype, "isHoverable", void 0);
+__decorate([
+    property()
+], Cre8Table.prototype, "variant", void 0);
+if (customElements.get('cre8-table') === undefined) {
+    customElements.define('cre8-table', Cre8Table);
+}
+export default Cre8Table;
+//# sourceMappingURL=table.js.map

package/lib/components/table/table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.js","sourceRoot":"","sources":["../../../components/table/table.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC;;GAEG;AAEH,MAAM,OAAO,SAAU,SAAQ,WAAW;IAuCxC,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,cAAc,EAAE;YACjE,yBAAyB,EAAE,IAAI,CAAC,WAAW;YAC3C,uBAAuB,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YACnD,0BAA0B,EAAE,IAAI,CAAC,QAAQ,KAAK,YAAY;SAC7D,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;mCACkB,mBAAmB;UAC5C,IAAI,CAAC,OAAO;YACd,CAAC,CAAC,IAAI,CAAA;cACA,IAAI,CAAC,OAAO;qBACL;YACb,CAAC,CAAC,EAAE;UACF,IAAI,CAAA,eAAe;;KAExB,CAAC;IACJ,CAAC;;AAvDQ,gBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAOvB;IADH,QAAQ,EAAE;0CACU;AAWjB;IADH,QAAQ,EAAE;2CACiB;AAOxB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CACjB;AAWtB;IADH,QAAQ,EAAE;0CACa;AAsB1B,IAAI,cAAc,CAAC,GAAG,CAAC,YAAY,CAAC,KAAK,SAAS,EAAE,CAAC;IACjD,cAAc,CAAC,MAAM,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;AACnD,CAAC;AAQD,eAAe,SAAS,CAAC","sourcesContent":["import { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './table.styles.js';\n\n/**\n * @slot - The component content\n */\n\nexport class Cre8Table extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * Specifies the caption/title of the table, visible to all users.\n   * Increases accessibility of table.\n   */\n  @property()\n      caption?: string;\n\n  /**\n   * Behavior variants\n   * <cre8-text-passage size=\"sm\">\n   * <ul>\n   * <li>**responsive** stacks column headers with respective table cells on small screens</li>\n   * </ul>\n   * </cre8-text-passage>\n   */\n  @property()\n      behavior?: 'responsive';\n\n  /**\n   * Hoverable rows variant\n   * 1) Allows the table rows to be styled on hover\n   */\n  @property({ type: Boolean, reflect: true })\n      isHoverable?: boolean;\n\n  /**\n   * Style variants\n   * <cre8-text-passage size=\"sm\">\n   * <ul>\n   * <li>**striped** add zebra-striping to table rows within the `<tbody>`</li>\n   * </ul>\n   * </cre8-text-passage>\n   */\n  @property()\n      variant?: 'striped';\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-table', {\n          'cre8-c-table--hoverable': this.isHoverable,\n          'cre8-c-table--striped': this.variant === 'striped',\n          'cre8-c-table--responsive': this.behavior === 'responsive',\n      });\n\n      return html`\n      <table role=\"table\" class=\"${componentClassNames}\">\n        ${this.caption\n        ? html`<caption class=\"cre8-c-table__caption\">\n            ${this.caption}\n          </caption>`\n        : ''}\n        ${html`<slot></slot>`}\n      </table>\n    `;\n  }\n}\n\nif (customElements.get('cre8-table') === undefined) {\n    customElements.define('cre8-table', Cre8Table);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-table': Cre8Table;\n  }\n}\n\nexport default Cre8Table;\n"]}

package/lib/components/table/table.styles.js

@@ -0,0 +1,4 @@
+import { css } from 'lit';
+const styles = css `*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:block}.cre8-c-table{width:100%;border-collapse:collapse;border-spacing:0;max-width:100%;background-color:var(--cre8-color-bg-transparent)}.cre8-c-table--striped{--cre8-table-row-odd-background: var(--cre8-color-bg-subtle);--cre8-table-row-odd-hover-background: var(--cre8-color-bg-subtle)}.cre8-c-table--hoverable{--cre8-table-row-hover-background: var(--cre8-color-bg-default-hover);--cre8-table-row-odd-hover-background: var(--cre8-color-bg-default-hover)}.cre8-c-table--responsive{--cre8-table-cell-before-content: attr(data-header);--cre8-table-header-display: none;--cre8-table-row-display: block;--cre8-table-cell-display: block;--cre8-table-cell-border-bottom-width: 0;--cre8-table-row-border-bottom: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-default)}@media all and (min-width: 768px){.cre8-c-table--responsive{--cre8-table-cell-border-bottom-width: var(--cre8-border-width-default)}}`;
+export default styles;
+//# sourceMappingURL=table.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table.styles.js","sourceRoot":"","sources":["../../../components/table/table.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,osFAAosF,CAAC;AACvtF,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:block}.cre8-c-table{width:100%;border-collapse:collapse;border-spacing:0;max-width:100%;background-color:var(--cre8-color-bg-transparent)}.cre8-c-table--striped{--cre8-table-row-odd-background: var(--cre8-color-bg-subtle);--cre8-table-row-odd-hover-background: var(--cre8-color-bg-subtle)}.cre8-c-table--hoverable{--cre8-table-row-hover-background: var(--cre8-color-bg-default-hover);--cre8-table-row-odd-hover-background: var(--cre8-color-bg-default-hover)}.cre8-c-table--responsive{--cre8-table-cell-before-content: attr(data-header);--cre8-table-header-display: none;--cre8-table-row-display: block;--cre8-table-cell-display: block;--cre8-table-cell-border-bottom-width: 0;--cre8-table-row-border-bottom: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-default)}@media all and (min-width: 768px){.cre8-c-table--responsive{--cre8-table-cell-border-bottom-width: var(--cre8-border-width-default)}}`;\nexport default styles;\n"]}