@tmorrow/cre8-wc 1.0.26 → 1.1.1

package/lib/components/table/table.js

@@ -1,94 +1,42 @@
-import { css as n, html as c } from "lit";
-import { property as o } from "lit/decorators.js";
-import { Cre8Element as p } from "../cre8-element.js";
-const v = n`@import '../../design-tokens/core/scss/theming/component';
-
-/*------------------------------------*\
-#TABLE
-\*------------------------------------*/
-
-:host {
-    display: block;
-}
-
-/**
- * 1) Data table containing columns and rows
- */
-.cre8-c-table {
-    width: 100%;
-    border-collapse: collapse;
-    border-spacing: 0;
-    max-width: 100%;
-    background-color: var(--cre8-color-bg-transparent);
-}
-
-/**
- * Custom properties passed to table-row for striped variant
- */
-.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);
-}
-
-/**
- * Custom properties passed to table-row for isHoverable property
- */
-.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);
-}
-
-/**
- * Custom properties passed to child Components for responsive behavior
- */
-.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:$cre8-breakpoint-md) {
-        --cre8-table-cell-border-bottom-width: var(--cre8-border-width-default);
-    }
-}
-`;
-var h = Object.defineProperty, a = (b, t, i, m) => {
-  for (var r = void 0, l = b.length - 1, d; l >= 0; l--)
-    (d = b[l]) && (r = d(t, i, r) || r);
-  return r && h(t, i, r), r;
+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;
 };
-const s = class s extends p {
+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 c`
+    return l`
       <table role="table" class="${t}">
-        ${this.caption ? c`<caption class="cre8-c-table__caption">
+        ${this.caption ? l`<caption class="cre8-c-table__caption">
             ${this.caption}
           </caption>` : ""}
-        ${c`<slot></slot>`}
+        ${l`<slot></slot>`}
       </table>
     `;
   }
 };
-s.styles = [v];
+s.styles = [b];
 let e = s;
-a([
-  o()
+o([
+  a()
 ], e.prototype, "caption");
-a([
-  o()
+o([
+  a()
 ], e.prototype, "behavior");
-a([
-  o({ type: Boolean, reflect: !0 })
+o([
+  a({ type: Boolean, reflect: !0 })
 ], e.prototype, "isHoverable");
-a([
-  o()
+o([
+  a()
 ], e.prototype, "variant");
 customElements.get("cre8-table") === void 0 && customElements.define("cre8-table", e);
 export {

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

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

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

@@ -1,31 +1,19 @@
-import { css as n, html as e } from "lit";
-import { Cre8Element as c } from "../cre8-element.js";
-const l = n`@import '../../design-tokens/core/scss/theming/component';
-
-/*------------------------------------*\
-#TABLE BODY
-\*------------------------------------*/
-
-/**
-* Set the host to display the contents within the table wrapper
-*/
-:host {
-  display: contents;
-}
-`, s = class s extends c {
+import { css as i, html as r } from "lit";
+import { Cre8Element as a } from "../cre8-element.js";
+const d = i`*,::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}`, t = class t extends a {
   render() {
-    const o = this.componentClassNames("cre8-c-table__body", {});
-    return e`
-      <tbody role="rowgroup" class="${o}">
-        ${e`<slot></slot>`}
+    const s = this.componentClassNames("cre8-c-table__body", {});
+    return r`
+      <tbody role="rowgroup" class="${s}">
+        ${r`<slot></slot>`}
       </tbody>
     `;
   }
 };
-s.styles = [l];
-let t = s;
-customElements.get("cre8-table-body") === void 0 && customElements.define("cre8-table-body", t);
+t.styles = [d];
+let e = t;
+customElements.get("cre8-table-body") === void 0 && customElements.define("cre8-table-body", e);
 export {
-  t as Cre8TableBody,
-  t as default
+  e as Cre8TableBody,
+  e as default
 };

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

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

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

@@ -1,83 +1,43 @@
-import { css as p, html as i } from "lit";
-import { ifDefined as b } from "lit/directives/if-defined.js";
-import { property as l } from "lit/decorators.js";
-import { Cre8Element as m } from "../cre8-element.js";
-const f = p`
-@import '../../design-tokens/core/scss/theming/component';
-
-/*------------------------------------*\
-#TABLE CELL
-\*------------------------------------*/
-
-/**
-* Set the host to display the contents within the table row wrapper
-*/
-:host {
-    display: contents;
-}
-
-.cre8-c-table__cell {
-    display: var(--cre8-table-row-display, table-cell);
-    border-bottom-width: var(--cre8-table-cell-border-bottom-width, var(--cre8-border-width-default));
-    border-bottom-style: var(--cre8-border-style-default);
-    border-bottom-color: var(--cre8-table-cell-border-bottom-color, var(--cre8-color-border-default));
-    padding: var(--cre8-spacing-8);
-    text-align: left;
-
-    &:before {
-        @include cre8-typography-label-default;
-        display: block;
-        content: var(--cre8-table-cell-before-content, none);
-
-        @media all and (min-width:$cre8-breakpoint-md) {
-            content: none;
-        }
-    }
-
-    @media all and (min-width:$cre8-breakpoint-md) {
-        display: table-cell;
-    }
-}
-
-.cre8-c-table__cell--bare {
-    border-bottom-color: transparent;
-}
-`;
-var h = Object.defineProperty, a = (s, r, n, y) => {
-  for (var e = void 0, o = s.length - 1, d; o >= 0; o--)
-    (d = s[o]) && (e = d(r, n, e) || e);
-  return e && h(r, n, e), e;
+import { css as g, html as l } from "lit";
+import { ifDefined as s } from "lit/directives/if-defined.js";
+import { property as a } from "lit/decorators.js";
+import { Cre8Element as c } from "../cre8-element.js";
+const h = g`.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__cell{display:var(--cre8-table-row-display, table-cell);border-bottom-width:var(--cre8-table-cell-border-bottom-width, var(--cre8-border-width-default));border-bottom-style:var(--cre8-border-style-default);border-bottom-color:var(--cre8-table-cell-border-bottom-color, var(--cre8-color-border-default));padding:var(--cre8-spacing-8);text-align:left}.cre8-c-table__cell:before{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);display:block;content:var(--cre8-table-cell-before-content, none)}@media all and (min-width: 768px){.cre8-c-table__cell:before{content:none}}@media all and (min-width: 768px){.cre8-c-table__cell{display:table-cell}}.cre8-c-table__cell--bare{border-bottom-color:rgba(0,0,0,0)}`;
+var f = Object.defineProperty, n = (d, i, m, u) => {
+  for (var t = void 0, r = d.length - 1, p; r >= 0; r--)
+    (p = d[r]) && (t = p(i, m, t) || t);
+  return t && f(i, m, t), t;
 };
-const c = class c extends m {
+const o = class o extends c {
   render() {
-    const r = this.componentClassNames("cre8-c-table__cell", {
+    const i = this.componentClassNames("cre8-c-table__cell", {
       "cre8-c-table__cell--bare": this.variant === "bare"
     });
-    return i`
+    return l`
       <td
         data-header="${this.dataHeader}"
         role="cell"
-        colspan=${b(this.colspan)}
-        class="${r}"
+        colspan=${s(this.colspan)}
+        class="${i}"
       >
-        ${i`<slot></slot>`}
+        ${l`<slot></slot>`}
       </td>
     `;
   }
 };
-c.styles = [f];
-let t = c;
-a([
-  l({ type: Number })
-], t.prototype, "colspan");
-a([
-  l()
-], t.prototype, "variant");
-a([
-  l()
-], t.prototype, "dataHeader");
-customElements.get("cre8-table-cell") === void 0 && customElements.define("cre8-table-cell", t);
+o.styles = [h];
+let e = o;
+n([
+  a({ type: Number })
+], e.prototype, "colspan");
+n([
+  a()
+], e.prototype, "variant");
+n([
+  a()
+], e.prototype, "dataHeader");
+customElements.get("cre8-table-cell") === void 0 && customElements.define("cre8-table-cell", e);
 export {
-  t as Cre8TableCell,
-  t as default
+  e as Cre8TableCell,
+  e as default
 };

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

@@ -1 +1 @@
-{"version":3,"file":"table-cell.styles.d.ts","sourceRoot":"","sources":["../../../components/table-cell/table-cell.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAwCX,CAAC;AACF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"table-cell.styles.d.ts","sourceRoot":"","sources":["../../../components/table-cell/table-cell.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAAo9P,CAAC;AACj+P,eAAe,MAAM,CAAC"}

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

@@ -1,47 +1,16 @@
-import { css as a, html as s } from "lit";
-import { Cre8Element as o } from "../cre8-element.js";
-const n = a`@import '../../design-tokens/core/scss/theming/component';
-
-/*------------------------------------*\
-#TABLE HEADER
-\*------------------------------------*/
-
-/**
-* Set the host to display the contents within the table wrapper
-*/
-:host {
-  display: contents;
-}
-
-/**
- * Table header stlyes
- * 1) Responsive table header behavior
- * 2) Override row behavior and variants
- */
-.cre8-c-table__header {
-  display: var(--cre8-table-header-display, table-header-group); /* 1 */
-  text-align: left;
-  --cre8-table-row-odd-background: none; /* 2 */
-  --cre8-table-row-odd-hover-background: none; /* 2 */
-
-  /**
-   * Override responsive setting
-   */
-  @media all and (min-width:$cre8-breakpoint-md) {
-    display: table-header-group;
-  }
-}
-`, t = class t extends o {
+import { css as i, html as r } from "lit";
+import { Cre8Element as s } from "../cre8-element.js";
+const d = i`*,::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__header{display:var(--cre8-table-header-display, table-header-group);text-align:left;--cre8-table-row-odd-background: none;--cre8-table-row-odd-hover-background: none}@media all and (min-width: 768px){.cre8-c-table__header{display:table-header-group}}`, t = class t extends s {
   render() {
-    const r = this.componentClassNames("cre8-c-table__header", {});
-    return s`
-      <thead role="rowgroup" class="${r}">
-        ${s`<slot></slot>`}
+    const a = this.componentClassNames("cre8-c-table__header", {});
+    return r`
+      <thead role="rowgroup" class="${a}">
+        ${r`<slot></slot>`}
       </thead>
     `;
   }
 };
-t.styles = [n];
+t.styles = [d];
 let e = t;
 customElements.get("cre8-table-header") === void 0 && customElements.define("cre8-table-header", e);
 export {

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

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

package/lib/components/table-header-cell/table-header-cell.js

@@ -1,54 +1,35 @@
-import { css as h, html as n } from "lit";
-import { property as d } from "lit/decorators.js";
-import { ifDefined as i } from "lit/directives/if-defined.js";
-import { Cre8Element as m } from "../cre8-element.js";
-const f = h`@import '../../design-tokens/core/scss/theming/component';
-
-/*------------------------------------*\
-#TABLE HEADER CELL
-\*------------------------------------*/
-
-/**
-* Set the host to display the contents within the table header > table row wrapper
-*/
-:host {
-  display: contents;
-}
-
-.cre8-c-table__header-cell {
-  @include cre8-typography-label-small;
-
-  border-bottom: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);
-  padding: var(--cre8-spacing-8);
-  text-align: left;
-}`;
-var b = Object.defineProperty, p = (l, r, a, y) => {
-  for (var e = void 0, o = l.length - 1, c; o >= 0; o--)
-    (c = l[o]) && (e = c(r, a, e) || e);
-  return e && b(r, a, e), e;
+import { css as m, html as d } from "lit";
+import { property as h } from "lit/decorators.js";
+import { ifDefined as n } from "lit/directives/if-defined.js";
+import { Cre8Element as c } from "../cre8-element.js";
+const f = m`*,::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__header-cell{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);border-bottom:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);padding:var(--cre8-spacing-8);text-align:left}`;
+var x = Object.defineProperty, p = (s, r, l, g) => {
+  for (var e = void 0, a = s.length - 1, o; a >= 0; a--)
+    (o = s[a]) && (e = o(r, l, e) || e);
+  return e && x(r, l, e), e;
 };
-const s = class s extends m {
+const i = class i extends c {
   render() {
     const r = this.componentClassNames("cre8-c-table__header-cell", {});
-    return n`
+    return d`
       <th
         role="columnheader"
-        colspan=${i(this.colspan)}
+        colspan=${n(this.colspan)}
         class="${r}"
-        style="width: ${i(this.width)}"
+        style="width: ${n(this.width)}"
       >
-        ${n`<slot></slot>`}
+        ${d`<slot></slot>`}
       </th>
     `;
   }
 };
-s.styles = [f];
-let t = s;
+i.styles = [f];
+let t = i;
 p([
-  d()
+  h()
 ], t.prototype, "colspan");
 p([
-  d()
+  h()
 ], t.prototype, "width");
 customElements.get("cre8-table-header-cell") === void 0 && customElements.define("cre8-table-header-cell", t);
 export {

package/lib/components/table-header-cell/table-header-cell.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-header-cell.styles.d.ts","sourceRoot":"","sources":["../../../components/table-header-cell/table-header-cell.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAmBV,CAAC;AACH,eAAe,MAAM,CAAC"}
+{"version":3,"file":"table-header-cell.styles.d.ts","sourceRoot":"","sources":["../../../components/table-header-cell/table-header-cell.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAA40E,CAAC;AACz1E,eAAe,MAAM,CAAC"}

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

@@ -1,30 +1,11 @@
-import { css as c, html as t } from "lit";
-import { Cre8Element as a } from "../cre8-element.js";
-const r = c`@import '../../design-tokens/core/scss/theming/component';
-
-/*------------------------------------*\
-#TABLE OBJECT
-\*------------------------------------*/
-
-:host {
-    display: block;
-}
-
-.cre8-c-table-object__header {
-    padding-top: var(--cre8-spacing-8);
-    padding-bottom: var(--cre8-spacing-8);
-}
-
-.cre8-c-table-object__footer {
-    padding-top: var(--cre8-spacing-8);
-    padding-bottom: var(--cre8-spacing-8);
-}
-`, o = class o extends a {
+import { css as i, html as e } from "lit";
+import { Cre8Element as s } from "../cre8-element.js";
+const d = i`*,::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-object__header{padding-top:var(--cre8-spacing-8);padding-bottom:var(--cre8-spacing-8)}.cre8-c-table-object__footer{padding-top:var(--cre8-spacing-8);padding-bottom:var(--cre8-spacing-8)}`, r = class r extends s {
   render() {
-    const s = this.componentClassNames("cre8-c-table-object", {});
-    return t`
-      <div class="${s}">
-        ${this.slotNotEmpty("header") && t`
+    const a = this.componentClassNames("cre8-c-table-object", {});
+    return e`
+      <div class="${a}">
+        ${this.slotNotEmpty("header") && e`
           <div class="cre8-c-table-object__header" part="header">
             <slot name="header"></slot>
           </div>
@@ -32,7 +13,7 @@ const r = c`@import '../../design-tokens/core/scss/theming/component';
         <div class="cre8-c-table-object__body">
           <slot></slot>
         </div>
-        ${this.slotNotEmpty("footer") && t`
+        ${this.slotNotEmpty("footer") && e`
           <div class="cre8-c-table-object__footer">
             <slot name="footer"></slot>
           </div>
@@ -41,10 +22,10 @@ const r = c`@import '../../design-tokens/core/scss/theming/component';
     `;
   }
 };
-o.styles = [r];
-let e = o;
-customElements.get("cre8-table-object") === void 0 && customElements.define("cre8-table-object", e);
+r.styles = [d];
+let t = r;
+customElements.get("cre8-table-object") === void 0 && customElements.define("cre8-table-object", t);
 export {
-  e as Cre8TableObject,
-  e as default
+  t as Cre8TableObject,
+  t as default
 };

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

@@ -1 +1 @@
-{"version":3,"file":"table-object.styles.d.ts","sourceRoot":"","sources":["../../../components/table-object/table-object.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAmBX,CAAC;AACF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"table-object.styles.d.ts","sourceRoot":"","sources":["../../../components/table-object/table-object.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAA4+D,CAAC;AACz/D,eAAe,MAAM,CAAC"}