@tmorrow/cre8-wc 1.0.26 → 1.1.2

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.js

@@ -1,330 +1,15 @@
-import { css as p, html as m } from "lit";
-import { property as o, state as l, queryAssignedElements as u, query as f } from "lit/decorators.js";
-import { nanoid as v } from "nanoid";
-import { Cre8Element as g } from "../cre8-element.js";
-const T = p`/**
- * Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/
- */
-*,
-::slotted(*),
-*:before,
-*:after {
-  box-sizing: border-box;
-}
-
-:root {
-  --size-base-unit: 0.5rem;
-}
-
-/**
- * RTL support for values logical properties can't automatically adjust for
- * 1) Percentage based horizontal translate values need to be flipped
- * 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
- * 3) Inverse items that have 45degs
- */
-[dir=rtl] {
-  --rtlTranslateX: 50%;
-  /* 1 */
-  --rtlGradientToRight: 270deg;
-  /* 2 */
-  --rtlRotate45Inverse: -45deg;
-  /* 3 */
-}
-
-/**
- * Visible focus outline for elements on a light background
- */
-/**
- * Visible focus outline for elements with an error status
- */
-/**
- * Visible focus outline for elements on a dark background
- */
-/**
-* Focus state for themes that need a dashed outline for focus
-* state
-**/
-/**
- * Invisible focus outline for elements that need a more visible
- * focus state for high-contrast mode
- */
-/**
- * Visually hidden from display
- */
-/*
-=======
-Animations
-=======
-*/
-: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;
-}
-
-/**
- * RTL support for values logical properties can't automatically adjust for
- * 1) Percentage based horizontal translate values need to be flipped
- * 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
- * 3) Inverse items that have 45degs
- */
-[dir=rtl] {
-  --rtlTranslateX: 50%;
-  /* 1 */
-  --rtlGradientToRight: 270deg;
-  /* 2 */
-  --rtlRotate45Inverse: -45deg;
-  /* 3 */
-}
-
-/**
- * Visible focus outline for elements on a light background
- */
-/**
- * Visible focus outline for elements with an error status
- */
-/**
- * Visible focus outline for elements on a dark background
- */
-/**
-* Focus state for themes that need a dashed outline for focus
-* state
-**/
-/**
- * Invisible focus outline for elements that need a more visible
- * focus state for high-contrast mode
- */
-/**
- * Visually hidden from display
- */
-/*------------------------------------*\
- #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
-   */
-  /**
-   * Tabs inner where the end of the tabs list isn't fully in the viewport
-   */
-}
-.cre8-c-tabs:not(.cre8-is-start) .cre8-c-tabs__header {
-  /**
-   * Left overflow gradient for the tabs list
-   */
-}
-.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: 48px;
-  z-index: 1;
-}
-.cre8-c-tabs:not(.cre8-is-end) .cre8-c-tabs__header {
-  /**
-   * Right overflow gradient for the tabs list
-   */
-}
-.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: 48px;
-  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;
-}
-.cre8-c-tabs__list::-webkit-scrollbar {
-  display: none;
-}
-
-/**
- * Tabs body
- * 1) The div that contains the tab panel content
- */
-.cre8-c-tabs__body {
-  padding-block-start: 16px;
-  /**
-   * Full Width Variant - border default bar across tabs
-   */
-}
-.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);
-}
-/* sourceMappingURL=tabs.module.css.map */
-`;
-var x = Object.defineProperty, r = (c, e, t, i) => {
-  for (var s = void 0, n = c.length - 1, h; n >= 0; n--)
-    (h = c[n]) && (s = h(e, t, s) || s);
-  return s && x(e, t, 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 d = class d extends g {
+const o = class o extends T {
   /**
    * Initialize Functions
    */
@@ -438,7 +123,7 @@ const d = class d extends g {
   setTabAttributes() {
     this._Cre8TabItems.forEach((e, t) => {
       e.index = t;
-      const s = e.ariaLabelledBy || v();
+      const s = e.ariaLabelledBy || u();
       e.ariaLabelledBy = s;
       const n = this._Cre8TabPanels[t];
       n.index = t;
@@ -582,7 +267,7 @@ const d = class d extends g {
       "cre8-is-end": this.isEnd === !0,
       "cre8-c-tabs--full-width": this.fullWidth
     });
-    return m`
+    return f`
         <div class="${e}">
             <div class="cre8-c-tabs__header">
                 <div
@@ -603,37 +288,37 @@ const d = class d extends g {
     `;
   }
 };
-d.styles = [T];
-let a = d;
+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([
-  l()
+  c()
 ], a.prototype, "activeTab");
 r([
-  l()
+  c()
 ], a.prototype, "isStart");
 r([
-  l()
+  c()
 ], a.prototype, "isEnd");
 r([
-  u()
+  v()
 ], a.prototype, "_Cre8TabItems");
 r([
-  u({ slot: "panel" })
+  v({ slot: "panel" })
 ], a.prototype, "_Cre8TabPanels");
 r([
-  f(".cre8-c-tabs__header")
+  m(".cre8-c-tabs__header")
 ], a.prototype, "_Cre8TabsHeader");
 r([
-  f(".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,yBA2TX,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"}