@tmorrow/cre8-wc 1.0.25 → 1.1.1

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

@@ -1,122 +1,16 @@
-import { a as p } from "../../icon-DImqxDiW.js";
-import { css as b, html as n } from "lit";
-import { property as o } from "lit/decorators.js";
-import { Cre8Element as h } from "../cre8-element.js";
+import { a as s } from "../../icon-D22g8aWB.js";
+import { css as c, html as n } from "lit";
+import { property as r } from "lit/decorators.js";
+import { Cre8Element as g } from "../cre8-element.js";
 import "../button/button.js";
 import "../table-cell/table-cell.js";
-const x = b`
-@import '../../design-tokens/core/scss/theming/component';
-
-/*------------------------------------*\
-#TABLE ROW
-\*------------------------------------*/
-
-/**
-* Set the host to display the contents within the table header or table body wrapper
-*/
-:host {
-    display: contents;
-}
-
-/**
-* 1) Row of the cre8 table
-*/
-.cre8-c-table__row {
-    display: var(--cre8-table-row-display, table-row);
-    border-bottom: var(--cre8-table-row-border-bottom);
-
-    /**
-    * Table row hover state
-    * 1) Set the row hover background via custom property to allow
-    * the table variant to control the color
-    */
-    &:hover {
-        background: var(--cre8-table-row-hover-background);
-    }
-
-    /**
-    * Table row within odd cre8-table-row wrappers
-    * 1) Set the odd row and odd row hover background via
-    * custom property to allow the table variant to control the color
-    */
-    :host(:nth-child(odd)) & {
-        background: var(--cre8-table-row-odd-background, none);
-
-        &:hover {
-            background: var(--cre8-table-row-odd-hover-background, inherit);
-        }
-    }
-
-    @media all and (min-width:$cre8-breakpoint-md) {
-        border-bottom: inherit;
-        display: table-row;
-    }
-}
-
-/**
- * Bare variant to remove border
- */
-.cre8-c-table__row--bare {
-    --cre8-table-cell-border-bottom-color: transparent;
-}
-
-/**
-* Slotted table row in expanded content following expandable table row
-* 1) Don't show the collapsed table row by default
-*/
-.cre8-c-table__row--expandable + ::slotted(cre8-table-row) {
-    display: none; /* 1 */
-}
-
-.cre8-c-table__row--expandable.cre8-is-expanded {
-    --cre8-table-cell-border-bottom-color: transparent;
-}
-
-/**
-* Slotted table row in expanded content following expanded table row class
-* 1) Display contents to get the proper table-row display for the row
-*/
-.cre8-c-table__row--expandable.cre8-is-expanded + ::slotted(cre8-table-row) {
-    display: contents; /* 1 */
-}
-
-/**
-* Button that expands the next table row
-*/
-.cre8-c-table__expand-button {
-    background-color: var(--cre8-color-bg-transparent);
-    border-width: var(--cre8-border-width-none);
-}
-
-/**
-* Text within the button that expands the next table row
-*/
-.cre8-c-table__expand-button-text {
-    @include visuallyHidden;
-}
-
-/**
-* Icon within the button that expands the next table row
-*/
-.cre8-c-table__expand-button-icon {
-    display: block;
-    transition: transform 0.2s ease;
-
-    /**
-    * Icon within the button that expands the next table row when the table row is expanded
-    * 1) Rotate the icon to show that it's open
-    */
-    .cre8-is-expanded & {
-        transform: rotate(90deg); /* 1 */
-    }
-}
-`;
-var w = Object.defineProperty, a = (d, r, c, u) => {
-  for (var t = void 0, l = d.length - 1, i; l >= 0; l--)
-    (i = d[l]) && (t = i(r, c, t) || t);
-  return t && w(r, c, t), t;
+const h = c`.cre8-u-content-knockout-brand{color:var(----cre8-color-content-knockout-brand)}.cre8-u-is-hidden{display:none !important;visibility:hidden !important}.cre8-u-is-vishidden{position:absolute !important;overflow:hidden;width:1px;height:1px;padding:0;border:0;clip:rect(1px, 1px, 1px, 1px)}@media all and (min-width: 23.4375rem){.cre8-u-hide-sm{display:none !important}}@media all and (min-width: 35rem){.cre8-u-hide-sm-2{display:none !important}}@media all and (min-width: 48rem){.cre8-u-hide-md{display:none !important}}@media all and (min-width: 60rem){.cre8-u-hide-lg{display:none !important}}@media all and (min-width: 75rem){.cre8-u-hide-xl{display:none !important}}@media all and (max-width: 23.4375rem){.cre8-u-show-sm{display:none !important}}@media all and (max-width: 35rem){.cre8-u-show-sm-2{display:none !important}}@media all and (max-width: 48rem){.cre8-u-show-md{display:none !important}}@media all and (max-width: 60rem){.cre8-u-show-lg{display:none !important}}@media all and (max-width: 75rem){.cre8-u-show-xl{display:none !important}}.cre8-u-margin-none{margin:0 !important}.cre8-u-margin-sm{margin:size(1) !important}.cre8-u-margin-md{margin:size(2) !important}.cre8-u-margin-lg{margin:size(3) !important}.cre8-u-margin-xl{margin:size(4) !important}.cre8-u-margin-xxl{margin:size(8) !important}.cre8-u-margin-top-none{margin-top:0 !important}.cre8-u-margin-top-sm{margin-top:size(1) !important}.cre8-u-margin-top-md{margin-top:size(2) !important}.cre8-u-margin-top-lg{margin-top:size(3) !important}.cre8-u-margin-top-xl{margin-top:size(4) !important}.cre8-u-margin-top-xxl{margin-top:size(8) !important}.cre8-u-margin-right-none{margin-right:0 !important}.cre8-u-margin-right-sm{margin-right:size(1) !important}.cre8-u-margin-right-md{margin-right:size(2) !important}.cre8-u-margin-right-lg{margin-right:size(3) !important}.cre8-u-margin-right-xl{margin-right:size(4) !important}.cre8-u-margin-right-xxl{margin-right:size(8) !important}.cre8-u-margin-bottom-none{margin-bottom:0 !important}.cre8-u-margin-bottom-sm{margin-bottom:size(1) !important}.cre8-u-margin-bottom-md{margin-bottom:size(2) !important}.cre8-u-margin-bottom-lg{margin-bottom:size(3) !important}.cre8-u-margin-bottom-xl{margin-bottom:size(4) !important}.cre8-u-margin-bottom-xxl{margin-bottom:size(8) !important}.cre8-u-margin-bottom-xl-xxl{margin-bottom:size(4) !important}@media all and (min-width: 768px){.cre8-u-margin-bottom-xl-xxl{margin-bottom:size(8) !important}}.cre8-u-margin-left-none{margin-left:0 !important}.cre8-u-margin-left-sm{margin-left:size(1) !important}.cre8-u-margin-left-md{margin-left:size(2) !important}.cre8-u-margin-left-lg{margin-left:size(3) !important}.cre8-u-margin-left-xl{margin-left:size(4) !important}.cre8-u-margin-left-xxl{margin-left:size(8) !important}.cre8-u-padding-none{padding:0 !important}.cre8-u-padding-sm{padding:size(1) !important}.cre8-u-padding-md{padding:size(2) !important}.cre8-u-padding-lg{padding:size(3) !important}.cre8-u-padding-xl{padding:size(4) !important}.cre8-u-padding-xxl{padding:size(8) !important}.cre8-u-padding-top-none{padding-top:0 !important}.cre8-u-padding-top-sm{padding-top:size(1) !important}.cre8-u-padding-top-md{padding-top:size(2) !important}.cre8-u-padding-top-lg{padding-top:size(3) !important}.cre8-u-padding-top-xl{padding-top:size(4) !important}.cre8-u-padding-top-xxl{padding-top:size(8) !important}.cre8-u-padding-right-none{padding-right:0 !important}.cre8-u-padding-right-sm{padding-right:size(1) !important}.cre8-u-padding-right-md{padding-right:size(2) !important}.cre8-u-padding-right-lg{padding-right:size(3) !important}.cre8-u-padding-right-xl{padding-right:size(4) !important}.cre8-u-padding-right-xxl{padding-right:size(8) !important}.cre8-u-padding-bottom-none{padding-bottom:0 !important}.cre8-u-padding-bottom-sm{padding-bottom:size(1) !important}.cre8-u-padding-bottom-md{padding-bottom:size(2) !important}.cre8-u-padding-bottom-lg{padding-bottom:size(3) !important}.cre8-u-padding-bottom-xl{padding-bottom:size(4) !important}.cre8-u-padding-bottom-xxl{padding-bottom:size(8) !important}.cre8-u-padding-left-none{padding-left:0 !important}.cre8-u-padding-left-sm{padding-left:size(1) !important}.cre8-u-padding-left-md{padding-left:size(2) !important}.cre8-u-padding-left-lg{padding-left:size(3) !important}.cre8-u-padding-left-xl{padding-left:size(4) !important}.cre8-u-padding-left-xxl{padding-left:size(8) !important}.cre8-u-display-flex{display:flex !important}.cre8-u-display-block{display:block !important}body{font-family:var(--cre8-typography-body-default-font-family);font-size:var(--cre8-typography-body-default-font-size);font-weight:var(--cre8-typography-body-default-font-weight);line-height:var(--cre8-typography-body-default-line-height);text-decoration:var(--cre8-typography-body-default-text-decoration);text-transform:var(--cre8-typography-body-default-text-transform);display:flex;flex-direction:column;padding:0;margin:0;color:var(--cre8-color-content-default);background:var(--background-default)}@media all and (min-width: 60rem){.page-container{background:linear-gradient(90deg, #fff 0, #fff 66.66%, #f8f8f9 0, #f8f8f9 0)}}.band__inner{margin-left:2rem;margin-right:2rem}@media all and (min-width: 60rem){.band__inner{margin-right:0}}img{max-width:100%;height:auto}*,::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-table__row{display:var(--cre8-table-row-display, table-row);border-bottom:var(--cre8-table-row-border-bottom)}.cre8-c-table__row:hover{background:var(--cre8-table-row-hover-background)}:host(:nth-child(odd)) .cre8-c-table__row{background:var(--cre8-table-row-odd-background, none)}:host(:nth-child(odd)) .cre8-c-table__row:hover{background:var(--cre8-table-row-odd-hover-background, inherit)}@media all and (min-width: 768px){.cre8-c-table__row{border-bottom:inherit;display:table-row}}.cre8-c-table__row--bare{--cre8-table-cell-border-bottom-color: transparent}.cre8-c-table__row--expandable+::slotted(cre8-table-row){display:none}.cre8-c-table__row--expandable.cre8-is-expanded{--cre8-table-cell-border-bottom-color: transparent}.cre8-c-table__row--expandable.cre8-is-expanded+::slotted(cre8-table-row){display:contents}.cre8-c-table__expand-button{background-color:var(--cre8-color-bg-transparent);border-width:var(--cre8-border-width-none)}.cre8-c-table__expand-button-text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.cre8-c-table__expand-button-icon{display:block;transition:transform .2s ease}.cre8-is-expanded .cre8-c-table__expand-button-icon{transform:rotate(90deg)}`;
+var x = Object.defineProperty, i = (p, a, m, u) => {
+  for (var e = void 0, o = p.length - 1, l; o >= 0; o--)
+    (l = p[o]) && (e = l(a, m, e) || e);
+  return e && x(a, m, e), e;
 };
-const s = class s extends h {
+const d = class d extends g {
   constructor() {
     super(...arguments), this.expandedButtonText = "Collapse Table Row", this.collapsedButtonText = "Expand Table Row";
   }
@@ -124,13 +18,13 @@ const s = class s extends h {
     this.isExpanded = !this.isExpanded, this.classList.contains("cre8-is-expanded") ? this.classList.remove("cre8-is-expanded") : this.classList.add("cre8-is-expanded");
   }
   render() {
-    const r = this.componentClassNames("cre8-c-table__row", {
+    const a = this.componentClassNames("cre8-c-table__row", {
       "cre8-c-table__row--expandable": this.isExpandable,
       "cre8-c-table__row--bare": this.variant === "bare",
       "cre8-is-expanded": this.isExpanded
     });
     return n`
-      <tr role="row" class="${r}">
+      <tr role="row" class="${a}">
         ${this.isExpandable ? n`<cre8-table-cell>
               <button
                 class="cre8-c-table__expand-button" 
@@ -140,7 +34,7 @@ const s = class s extends h {
                 <span class="cre8-c-table__expand-button-text">
                   ${this.isExpanded ? this.expandedButtonText : this.collapsedButtonText}
                 </span>
-                <cre8-icon svg='${p}' rotate="90" class="cre8-c-table__expand-button-icon"></cre8-icon>
+                <cre8-icon svg='${s}' rotate="90" class="cre8-c-table__expand-button-icon"></cre8-icon>
               </button>
             </cre8-table-cell>` : ""}
         ${n`<slot></slot>`}
@@ -149,25 +43,25 @@ const s = class s extends h {
     `;
   }
 };
-s.styles = [x];
-let e = s;
-a([
-  o({ type: Boolean, reflect: !0 })
-], e.prototype, "isExpanded");
-a([
-  o({ type: Boolean, reflect: !0 })
-], e.prototype, "isExpandable");
-a([
-  o()
-], e.prototype, "variant");
-a([
-  o()
-], e.prototype, "expandedButtonText");
-a([
-  o()
-], e.prototype, "collapsedButtonText");
-customElements.get("cre8-table-row") === void 0 && customElements.define("cre8-table-row", e);
+d.styles = [h];
+let t = d;
+i([
+  r({ type: Boolean, reflect: !0 })
+], t.prototype, "isExpanded");
+i([
+  r({ type: Boolean, reflect: !0 })
+], t.prototype, "isExpandable");
+i([
+  r()
+], t.prototype, "variant");
+i([
+  r()
+], t.prototype, "expandedButtonText");
+i([
+  r()
+], t.prototype, "collapsedButtonText");
+customElements.get("cre8-table-row") === void 0 && customElements.define("cre8-table-row", t);
 export {
-  e as Cre8TableRow,
-  e as default
+  t as Cre8TableRow,
+  t as default
 };

package/lib/components/table-row/table-row.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-row.styles.d.ts","sourceRoot":"","sources":["../../../components/table-row/table-row.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBA0GX,CAAC;AACF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"table-row.styles.d.ts","sourceRoot":"","sources":["../../../components/table-row/table-row.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAAgqQ,CAAC;AAC7qQ,eAAe,MAAM,CAAC"}

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

@@ -1 +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;IAEC,IAAI,CAAC,EAAE,IAAI,CAAC;IAEhB;;;OAGG;IAEC,SAAS,CAAC,EAAE,OAAO,CAAC;IAExB;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IAEC,WAAW,CAAC,EAAE,MAAM,CAAK;IAE7B;;;;OAIG;IAEC,SAAS,CAAC,EAAE,OAAO,CAAC;IAExB;;;;;OAKG;IAEC,OAAO,CAAC,EAAE,OAAO,CAAQ;IAE7B;;;;;OAKG;IAEC,KAAK,CAAC,EAAE,OAAO,CAAS;IAE5B;;OAEG;IAEC,aAAa,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;IAElC;;OAEG;IAEC,cAAc,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;IAExC;;OAEG;IAEC,eAAe,EAAE,WAAW,CAAC;IAEjC;;OAEG;IAEC,mBAAmB,EAAE,WAAW,CAAC;IAErC;;;;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"}
+{"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"}

package/lib/components/tabs/tabs.js

@@ -1,116 +1,15 @@
-import { css as u, html as f } from "lit";
-import { property as o, state as c, queryAssignedElements as v, query as T } from "lit/decorators.js";
-import { nanoid as p } from "nanoid";
-import { Cre8Element as m } from "../cre8-element.js";
-const I = u`@import '../../design-tokens/core/scss/theming/component';
-/*------------------------------------*\
- #TABS
-\*------------------------------------*/
-
-:host {
-  display: block;
-}
-
-/**
- * Tabs header
- */
-.cre8-c-tabs__header {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: baseline;
-  overflow: hidden;
-
-  /**
-   * Tabs inner where the beginning of the tabs list isn't fully in the viewport
-   */
-  .cre8-c-tabs:not(.cre8-is-start) & {
-    /**
-     * Left overflow gradient for the tabs list
-     */
-    &::before {
-      content: '';
-      display: block;
-      position: absolute;
-      pointer-events: none;
-      background: linear-gradient(var(--rtlGradientToRight, 90deg), var(--cre8-color-bg-default), rgb(255 255 255 / 0.1%) 30%);
-      height: 100%;
-      inset-block-start: 0;
-      inset-inline-start: 0;
-      width: calc(8px * 6);
-      z-index: 1;
-    }
-  }
-
-  /**
-   * Tabs inner where the end of the tabs list isn't fully in the viewport
-   */
-  .cre8-c-tabs:not(.cre8-is-end) & {
-    /**
-     * Right overflow gradient for the tabs list
-     */
-    &::after {
-      content: '';
-      display: block !important;
-      position: absolute;
-      pointer-events: none;
-      background: linear-gradient(var(--rtlGradientToRight, 90deg), rgb(255 255 255 / 0.1%) 30%, var(--cre8-color-bg-default));
-      height: 100%;
-      inset-block-start: 0;
-      inset-inline-end: 0;
-      width: calc(8px * 6);
-      z-index: 1;
-    }
-  }
-}
-
-/**
- * Tabs list
- * 1) The div that contains the cre8-tab's
- */
-.cre8-c-tabs__list {
-  display: flex;
-  overflow: auto;
-  width: 100%;
-  margin: 0;
-  position: relative;
-  padding: var(--cre8-border-width-focus);
-
-  /**
-   * Visually hides the scrollbar
-   */
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}
-
-/**
- * Tabs body
- * 1) The div that contains the tab panel content
- */
-.cre8-c-tabs__body {
-  padding-block-start: calc(8px * 2);
-
-  /**
-   * Full Width Variant - border default bar across tabs
-   */
-   .cre8-c-tabs--full-width & {
-    border-top: var(--cre8-border-width-tab-selected) var(--cre8-border-style-default) var(--cre8-color-border-default);
-    // To match the border of the tabs to this full width line
-    // Shift border up by the tab bottom border width + Width of the padding on the list of tabs
-    margin-top: calc(var(--cre8-border-width-tab-selected) * -2);
-  }
-}
-`;
-var _ = Object.defineProperty, r = (d, t, e, i) => {
-  for (var s = void 0, n = d.length - 1, h; n >= 0; n--)
-    (h = d[n]) && (s = h(t, e, s) || s);
-  return s && _(t, e, s), s;
+import { css as p, html as f } from "lit";
+import { property as d, state as c, queryAssignedElements as v, query as m } from "lit/decorators.js";
+import { nanoid as u } from "nanoid";
+import { Cre8Element as T } from "../cre8-element.js";
+const x = 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-tabs__header{position:relative;display:flex;flex-direction:column;align-items:baseline;overflow:hidden}.cre8-c-tabs:not(.cre8-is-start) .cre8-c-tabs__header::before{content:"";display:block;position:absolute;pointer-events:none;background:linear-gradient(var(--rtlGradientToRight, 90deg), var(--cre8-color-bg-default), rgba(255, 255, 255, 0.001) 30%);height:100%;inset-block-start:0;inset-inline-start:0;width:3rem;z-index:1}.cre8-c-tabs:not(.cre8-is-end) .cre8-c-tabs__header::after{content:"";display:block !important;position:absolute;pointer-events:none;background:linear-gradient(var(--rtlGradientToRight, 90deg), rgba(255, 255, 255, 0.001) 30%, var(--cre8-color-bg-default));height:100%;inset-block-start:0;inset-inline-end:0;width:3rem;z-index:1}.cre8-c-tabs__list{display:flex;overflow:auto;width:100%;margin:0;position:relative;padding:var(--cre8-border-width-focus);scrollbar-width:none;-ms-overflow-style:none}.cre8-c-tabs__list::-webkit-scrollbar{display:none}.cre8-c-tabs__body{padding-block-start:1rem}.cre8-c-tabs--full-width .cre8-c-tabs__body{border-top:var(--cre8-border-width-tab-selected) var(--cre8-border-style-default) var(--cre8-color-border-default);margin-top:calc(var(--cre8-border-width-tab-selected)*-2)}`;
+var g = Object.defineProperty, r = (l, e, t, i) => {
+  for (var s = void 0, n = l.length - 1, h; n >= 0; n--)
+    (h = l[n]) && (s = h(e, t, s) || s);
+  return s && g(e, t, s), s;
 };
 let b = 1;
-const l = class l extends m {
+const o = class o extends T {
   /**
    * Initialize Functions
    */
@@ -156,9 +55,9 @@ const l = class l extends m {
    * 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
    */
-  async updated(t) {
-    t.forEach(async (e, i) => {
-      i === "activeIndex" && this.activeIndex !== e && (await this.updateComplete, this.activeTab && this.removePreviousActiveTab(), this.activeTab = this._Cre8TabItems[this.activeIndex], this.setActiveTab());
+  async updated(e) {
+    e.forEach(async (t, i) => {
+      i === "activeIndex" && this.activeIndex !== t && (await this.updateComplete, this.activeTab && this.removePreviousActiveTab(), this.activeTab = this._Cre8TabItems[this.activeIndex], this.setActiveTab());
     });
   }
   /**
@@ -200,10 +99,10 @@ const l = class l extends m {
    * than or equal to the window inner width or document client width
    */
   isInViewport() {
-    const e = this._Cre8TabItems[this._Cre8TabItems.length - 1].shadowRoot?.querySelector(".cre8-c-tab");
-    if (!e)
+    const t = this._Cre8TabItems[this._Cre8TabItems.length - 1].shadowRoot?.querySelector(".cre8-c-tab");
+    if (!t)
       return !1;
-    const i = e.getBoundingClientRect(), s = window.innerWidth || document.documentElement.clientWidth;
+    const i = t.getBoundingClientRect(), s = window.innerWidth || document.documentElement.clientWidth;
     return i.left >= 0 && i.right <= s;
   }
   /**
@@ -211,8 +110,8 @@ const l = class l extends m {
    * 1. Loop through all the cre8-tab Components and set the size to 'sm' if the parent has size 'sm'.
    */
   setTabVariant() {
-    this.size === "sm" && this._Cre8TabItems.forEach((t) => {
-      t.size = "sm";
+    this.size === "sm" && this._Cre8TabItems.forEach((e) => {
+      e.size = "sm";
     });
   }
   /**
@@ -222,12 +121,12 @@ const l = class l extends m {
    * 3. Set the index and id on the tab-panel to match the tab.
    */
   setTabAttributes() {
-    this._Cre8TabItems.forEach((t, e) => {
-      t.index = e;
-      const s = t.ariaLabelledBy || p();
-      t.ariaLabelledBy = s;
-      const n = this._Cre8TabPanels[e];
-      n.index = e;
+    this._Cre8TabItems.forEach((e, t) => {
+      e.index = t;
+      const s = e.ariaLabelledBy || u();
+      e.ariaLabelledBy = s;
+      const n = this._Cre8TabPanels[t];
+      n.index = t;
     });
   }
   /**
@@ -237,8 +136,8 @@ const l = class l extends m {
    */
   setActiveTab() {
     this.activeTab.isActive = !0;
-    const t = this._Cre8TabPanels.find((e) => e.index === this.activeTab.index);
-    t && (t.isActive = !0);
+    const e = this._Cre8TabPanels.find((t) => t.index === this.activeTab.index);
+    e && (e.isActive = !0);
   }
   /**
    * Set Active Tab Focus
@@ -254,10 +153,10 @@ const l = class l extends m {
    * 4. Emit the custom event.
    * @fires tabSelected
    */
-  handleTabSelected(t) {
-    const { target: e } = t;
-    if (this._Cre8TabItems.includes(e)) {
-      this.activeTab && this.removePreviousActiveTab(), this.activeTab = e;
+  handleTabSelected(e) {
+    const { target: t } = e;
+    if (this._Cre8TabItems.includes(t)) {
+      this.activeTab && this.removePreviousActiveTab(), this.activeTab = t;
       const i = this._Cre8TabItems.findIndex((s) => s === this.activeTab);
       this.activeIndex = i, this.setActiveTab(), this.emitEvent();
     }
@@ -272,25 +171,25 @@ const l = class l extends m {
    * 6. On keydown of the escape key, remove the focus.
    * @fires keydown
    */
-  handleKeydown(t) {
-    const { target: e } = t;
+  handleKeydown(e) {
+    const { target: t } = e;
     if (document.activeElement.matches("cre8-tab"))
-      switch (t.key) {
+      switch (e.key) {
         /* 2 */
         case "ArrowRight":
-          t.preventDefault(), this.setSelectedToNextTab(e);
+          e.preventDefault(), this.setSelectedToNextTab(t);
           break;
         /* 3 */
         case "ArrowLeft":
-          t.preventDefault(), this.setSelectedToPreviousTab(e);
+          e.preventDefault(), this.setSelectedToPreviousTab(t);
           break;
         /* 4 */
         case "Home":
-          t.preventDefault(), this.setSelectedToNextTab(this._Cre8TabItems[this._Cre8TabItems.length - 1]);
+          e.preventDefault(), this.setSelectedToNextTab(this._Cre8TabItems[this._Cre8TabItems.length - 1]);
           break;
         /* 5 */
         case "End":
-          t.preventDefault(), this.setSelectedToPreviousTab(this._Cre8TabItems[0]);
+          e.preventDefault(), this.setSelectedToPreviousTab(this._Cre8TabItems[0]);
           break;
         /* 6 */
         case "Escape":
@@ -306,14 +205,14 @@ const l = class l extends m {
    * 4. Emit custom event.
    * @fires tabChange
    */
-  setSelectedToPreviousTab(t) {
-    const e = t.index;
+  setSelectedToPreviousTab(e) {
+    const t = e.index;
     this.removePreviousActiveTab();
     const i = this._Cre8TabItems.length - 1;
-    if (e === 0)
+    if (t === 0)
       this.activeIndex = i, this.activeTab = this._Cre8TabItems[i];
     else {
-      const s = e - 1;
+      const s = t - 1;
       this.activeIndex = s, this.activeTab = this._Cre8TabItems[s];
     }
     this.setActiveTab(), this.setActiveTabFocus(), this.emitEvent();
@@ -326,14 +225,14 @@ const l = class l extends m {
    * 4. Emit custom event.
    * @fires tabChange
    */
-  setSelectedToNextTab(t) {
-    const e = t.index;
+  setSelectedToNextTab(e) {
+    const t = e.index;
     this.removePreviousActiveTab();
     const i = this._Cre8TabItems.length - 1;
-    if (e === i)
+    if (t === i)
       this.activeIndex = 0, this.activeTab = this._Cre8TabItems[0];
     else {
-      const s = e + 1;
+      const s = t + 1;
       this.activeIndex = s, this.activeTab = this._Cre8TabItems[s];
     }
     this.setActiveTab(), this.setActiveTabFocus(), this.emitEvent();
@@ -345,14 +244,14 @@ const l = class l extends m {
    */
   removePreviousActiveTab() {
     this.activeTab.isActive = !1;
-    const t = this._Cre8TabPanels.find((e) => e.index === this.activeTab.index);
-    t && (t.isActive = !1);
+    const e = this._Cre8TabPanels.find((t) => t.index === this.activeTab.index);
+    e && (e.isActive = !1);
   }
   /**
    * Emit custom event
    */
   emitEvent() {
-    const t = new CustomEvent("tabChange", {
+    const e = new CustomEvent("tabChange", {
       detail: {
         value: this.activeTab,
         activeTabIndex: this.activeIndex
@@ -360,16 +259,16 @@ const l = class l extends m {
       bubbles: !0,
       composed: !0
     });
-    this.dispatchEvent(t);
+    this.dispatchEvent(e);
   }
   render() {
-    const t = this.componentClassNames("cre8-c-tabs", {
+    const e = this.componentClassNames("cre8-c-tabs", {
       "cre8-is-start": this.isStart === !0,
       "cre8-is-end": this.isEnd === !0,
       "cre8-c-tabs--full-width": this.fullWidth
     });
     return f`
-        <div class="${t}">
+        <div class="${e}">
             <div class="cre8-c-tabs__header">
                 <div
                     class="cre8-c-tabs__list"
@@ -389,16 +288,16 @@ const l = class l extends m {
     `;
   }
 };
-l.styles = [I];
-let a = l;
+o.styles = [x];
+let a = o;
 r([
-  o()
+  d()
 ], a.prototype, "size");
 r([
-  o({ type: Boolean, reflect: !0 })
+  d({ type: Boolean, reflect: !0 })
 ], a.prototype, "fullWidth");
 r([
-  o({ type: Number })
+  d({ type: Number })
 ], a.prototype, "activeIndex");
 r([
   c()
@@ -416,10 +315,10 @@ r([
   v({ slot: "panel" })
 ], a.prototype, "_Cre8TabPanels");
 r([
-  T(".cre8-c-tabs__header")
+  m(".cre8-c-tabs__header")
 ], a.prototype, "_Cre8TabsHeader");
 r([
-  T(".cre8-c-tabs__list")
+  m(".cre8-c-tabs__list")
 ], a.prototype, "_Cre8TabsHeaderList");
 customElements.get("cre8-tabs") === void 0 && customElements.define("cre8-tabs", a);
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"tabs.styles.d.ts","sourceRoot":"","sources":["../../../components/tabs/tabs.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAqGX,CAAC;AACF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"tabs.styles.d.ts","sourceRoot":"","sources":["../../../components/tabs/tabs.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAA6/F,CAAC;AAC1gG,eAAe,MAAM,CAAC"}