@tmorrow/cre8-wc 1.0.26 → 1.1.1

package/lib/components/nav-container/nav-container.js

@@ -1,51 +1,16 @@
-import { css as o, html as a } from "lit";
+import { css as r, html as a } from "lit";
 import { Cre8Element as s } from "../cre8-element.js";
-const c = o`@import '../../design-tokens/core/scss/theming/component';
-
-/**
- * 1) Wrapper around contents that get placed into a toggleable
- * menu on smaller screens (usually primary nav and maybe other contents)
- */
-:host {
-  position: absolute;
-  left: 0;
-  top: 100%;
-  width: 100%;
-  height: 100vh;
-  background: var(--cre8-nav-container-background, var(--cre8-color-header-submenu-bg-default));
-  overflow: auto;
-
-  @media all and (min-width:$cre8-breakpoint-lg) {
-    position: static;
-    width: auto;
-    height: auto;
-    background: none;
-  }
-}
-
-/**
- * Actual nav container component
- */
-.cre8-c-nav-container {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-
-  @media all and (min-width:$cre8-breakpoint-lg) {
-    flex-direction: row;
-  }
-}
-`, t = class t extends s {
+const n = r`*,::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{position:absolute;left:0;top:100%;width:100%;height:100vh;background:var(--cre8-nav-container-background, var(--cre8-color-header-submenu-bg-default));overflow:auto}@media all and (min-width: 960px){:host{position:static;width:auto;height:auto;background:none}}.cre8-c-nav-container{display:flex;flex-direction:column;justify-content:space-between}@media all and (min-width: 960px){.cre8-c-nav-container{flex-direction:row}}`, t = class t extends s {
   render() {
-    const n = this.componentClassNames("cre8-c-nav-container", {});
+    const i = this.componentClassNames("cre8-c-nav-container", {});
     return a`
-      <div class="${n}">
+      <div class="${i}">
         <slot></slot>
       </div>
     `;
   }
 };
-t.styles = [c];
+t.styles = [n];
 let e = t;
 customElements.get("cre8-nav-container") === void 0 && customElements.define("cre8-nav-container", e);
 export {

package/lib/components/nav-container/nav-container.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"nav-container.styles.d.ts","sourceRoot":"","sources":["../../../components/nav-container/nav-container.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAmCX,CAAC;AACF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"nav-container.styles.d.ts","sourceRoot":"","sources":["../../../components/nav-container/nav-container.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAA8rE,CAAC;AAC3sE,eAAe,MAAM,CAAC"}

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

@@ -1,58 +1,23 @@
-import { css as d, html as n } from "lit";
-import { property as l } from "lit/decorators.js";
-import { Cre8Element as p } from "../cre8-element.js";
-const h = d`@import '../../design-tokens/core/scss/theming/component';
-
-/**
- * 1) Headline of a page with an h1 heading and optional description
- */
-.cre8-c-page-header {
-  margin-bottom: calc(8px * 4);
-}
-
-/**
- * Page header title
- */
-.cre8-c-page-header__title {
-  display: inline;
-  margin: 0;
-  @include cre8-typography-display-default();
-}
-
-/**
- * Page header title after
- * 1) Container placed after page header title if something like a badge needs to be placed there
- */
-.cre8-c-page-header__title-after {
-  display: inline-block;
-  position: relative;
-  bottom: calc(8px * 1.25);
-  margin-left: calc(8px * 2);
-}
-
-/**
- * Page header description
- */
-.cre8-c-page-header__description {
-  @include cre8-typography-body-default;
-}
-`;
-var g = Object.defineProperty, m = (s, t, c, f) => {
-  for (var e = void 0, r = s.length - 1, o; r >= 0; r--)
-    (o = s[r]) && (e = o(t, c, e) || e);
-  return e && g(t, c, e), e;
+import { css as p, html as l } from "lit";
+import { property as n } from "lit/decorators.js";
+import { Cre8Element as h } from "../cre8-element.js";
+const f = p`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}.cre8-c-page-header{margin-bottom:2rem}.cre8-c-page-header__title{display:inline;margin:0;font-family:var(--cre8-typography-display-default-mobile-font-family);font-size:var(--cre8-typography-display-default-mobile-font-size);font-weight:var(--cre8-typography-display-default-mobile-font-weight);line-height:var(--cre8-typography-display-default-mobile-line-height);text-decoration:var(--cre8-typography-display-default-mobile-text-decoration);text-transform:var(--cre8-typography-display-default-mobile-text-transform)}@media all and (min-width: 768px){.cre8-c-page-header__title{font-family:var(--cre8-typography-display-default-font-family);font-size:var(--cre8-typography-display-default-font-size);font-weight:var(--cre8-typography-display-default-font-weight);line-height:var(--cre8-typography-display-default-line-height);text-decoration:var(--cre8-typography-display-default-text-decoration);text-transform:var(--cre8-typography-display-default-text-transform)}}.cre8-c-page-header__title-after{display:inline-block;position:relative;bottom:0.625rem;margin-left:1rem}.cre8-c-page-header__description{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)}`;
+var m = Object.defineProperty, c = (s, t, d, y) => {
+  for (var e = void 0, a = s.length - 1, o; a >= 0; a--)
+    (o = s[a]) && (e = o(t, d, e) || e);
+  return e && m(t, d, e), e;
 };
-const i = class i extends p {
+const i = class i extends h {
   constructor() {
     super(...arguments), this.heading = "Page header title";
   }
   render() {
     const t = this.componentClassNames("cre8-c-page-header", {});
-    return n`
+    return l`
       <div class="${t}">
         <h1 class="cre8-c-page-header__title">
           ${this.heading}
-          ${this.slotNotEmpty("titCre8ter") && n`
+          ${this.slotNotEmpty("titCre8ter") && l`
           <div class="cre8-c-page-header__title-after">
             <slot name="titCre8ter"></slot>
           </div>`}
@@ -64,13 +29,13 @@ const i = class i extends p {
     `;
   }
 };
-i.styles = [h];
-let a = i;
-m([
-  l({ type: String })
-], a.prototype, "heading");
-customElements.get("cre8-page-header") === void 0 && customElements.define("cre8-page-header", a);
+i.styles = [f];
+let r = i;
+c([
+  n({ type: String })
+], r.prototype, "heading");
+customElements.get("cre8-page-header") === void 0 && customElements.define("cre8-page-header", r);
 export {
-  a as Cre8PageHeader,
-  a as default
+  r as Cre8PageHeader,
+  r as default
 };

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

@@ -1 +1 @@
-{"version":3,"file":"page-header.styles.d.ts","sourceRoot":"","sources":["../../../components/page-header/page-header.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAmCX,CAAC;AACF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"page-header.styles.d.ts","sourceRoot":"","sources":["../../../components/page-header/page-header.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAAstG,CAAC;AACnuG,eAAe,MAAM,CAAC"}

package/lib/components/pagination/page-counter/page-counter.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"page-counter.styles.d.ts","sourceRoot":"","sources":["../../../../components/pagination/page-counter/page-counter.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAcX,CAAC;AACF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"page-counter.styles.d.ts","sourceRoot":"","sources":["../../../../components/pagination/page-counter/page-counter.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAA8rE,CAAC;AAC3sE,eAAe,MAAM,CAAC"}

package/lib/components/pagination/pagination.js

@@ -1,40 +1,26 @@
-import { css as w, html as a, nothing as d } from "lit";
-import { ifDefined as p } from "lit/directives/if-defined.js";
-import { property as n, state as m, queryAll as _ } from "lit/decorators.js";
-import { h as x } from "../../icon-DImqxDiW.js";
-import { s as $ } from "../../Caret_Right-DZH0BlfG.js";
-import { Cre8Element as C } from "../cre8-element.js";
+import { css as w, html as a, nothing as g } from "lit";
+import { ifDefined as u } from "lit/directives/if-defined.js";
+import { property as n, state as f, queryAll as z } from "lit/decorators.js";
+import { h as C } from "../../icon-D22g8aWB.js";
+import { s as _ } from "../../Caret_Right-DZH0BlfG.js";
+import { Cre8Element as P } from "../cre8-element.js";
 import { Cre8Button as y } from "../button/button.js";
-const z = `<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+const k = `<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
 <path d="M12.1508 14.7578C12.2184 14.8254 12.272 14.9056 12.3085 14.9939C12.3451 15.0822 12.3639 15.1768 12.3639 15.2724C12.3639 15.3679 12.3451 15.4625 12.3085 15.5508C12.272 15.6391 12.2184 15.7193 12.1508 15.7869C12.0832 15.8544 12.003 15.908 11.9147 15.9446C11.8265 15.9812 11.7318 16 11.6363 16C11.5407 16 11.4461 15.9812 11.3578 15.9446C11.2695 15.908 11.1893 15.8544 11.1218 15.7869L3.8494 8.51452C3.78178 8.44698 3.72814 8.36677 3.69154 8.27849C3.65495 8.1902 3.63611 8.09557 3.63611 8C3.63611 7.90443 3.65495 7.8098 3.69154 7.72151C3.72814 7.63323 3.78178 7.55302 3.8494 7.48548L11.1218 0.213121C11.2582 0.0766618 11.4433 -3.80414e-09 11.6363 0C11.8293 3.80414e-09 12.0143 0.0766618 12.1508 0.213121C12.2873 0.34958 12.3639 0.534658 12.3639 0.72764C12.3639 0.920622 12.2873 1.1057 12.1508 1.24216L5.39205 8L12.1508 14.7578Z"/>
 </svg>
-`, N = `<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+`, $ = `<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
 <path d="M15.7869 14.7577C15.8544 14.8253 15.908 14.9055 15.9446 14.9937C15.9812 15.082 16 15.1766 16 15.2722C16 15.3678 15.9812 15.4624 15.9446 15.5507C15.908 15.6389 15.8544 15.7191 15.7869 15.7867C15.7193 15.8543 15.6391 15.9079 15.5508 15.9444C15.4625 15.981 15.3679 15.9998 15.2724 15.9998C15.1768 15.9998 15.0822 15.981 14.9939 15.9444C14.9056 15.9079 14.8254 15.8543 14.7579 15.7867L7.48557 8.51443C7.41795 8.44689 7.36432 8.36669 7.32772 8.2784C7.29112 8.19012 7.27228 8.09549 7.27228 7.99992C7.27228 7.90435 7.29112 7.80972 7.32772 7.72143C7.36432 7.63315 7.41795 7.55294 7.48557 7.4854L14.7579 0.213119C14.8943 0.076661 15.0794 -3.8041e-09 15.2724 0C15.4653 3.8041e-09 15.6504 0.076661 15.7869 0.213119C15.9233 0.349576 16 0.534653 16 0.727633C16 0.920613 15.9233 1.10569 15.7869 1.24215L9.0282 7.99992L15.7869 14.7577ZM1.75592 7.99992L8.5146 1.24215C8.65106 1.10569 8.72772 0.920613 8.72772 0.727633C8.72772 0.534653 8.65106 0.349576 8.5146 0.213119C8.37814 0.076661 8.19306 1.43782e-09 8.00008 0C7.8071 -1.43781e-09 7.62203 0.076661 7.48557 0.213119L0.213286 7.4854C0.145671 7.55294 0.0920317 7.63315 0.0554344 7.72143C0.0188371 7.80972 0 7.90435 0 7.99992C0 8.09549 0.0188371 8.19012 0.0554344 8.2784C0.0920317 8.36669 0.145671 8.44689 0.213286 8.51443L7.48557 15.7867C7.55314 15.8543 7.63335 15.9079 7.72163 15.9444C7.80991 15.981 7.90453 15.9998 8.00008 15.9998C8.09564 15.9998 8.19026 15.981 8.27854 15.9444C8.36682 15.9079 8.44703 15.8543 8.5146 15.7867C8.58217 15.7191 8.63576 15.6389 8.67233 15.5507C8.7089 15.4624 8.72772 15.3678 8.72772 15.2722C8.72772 15.1766 8.7089 15.082 8.67233 14.9937C8.63576 14.9055 8.58217 14.8253 8.5146 14.7577L1.75592 7.99992Z"/>
 </svg>
 `, v = {
   md: 768,
   lg: 960
-}, f = (h = "768") => !window.matchMedia(`(min-width: ${h}px)`).matches, S = w`@import '../../../design-tokens/core/scss/theming/component';
-
-// #PAGE-COUNTER
-:host{
-  display: inline-flex;
-}
-
-/**
- * 1)
- */
- .cre8-c-pagination__text{
-  @include cre8-typography-label-small();
-  padding: calc(8px * 1);
- }
-`;
-var L = Object.defineProperty, u = (h, e, t, s) => {
-  for (var i = void 0, o = h.length - 1, c; o >= 0; o--)
-    (c = h[o]) && (i = c(e, t, i) || i);
-  return i && L(e, t, i), i;
+}, x = (d = "768") => !window.matchMedia(`(min-width: ${d}px)`).matches, R = w`*,::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:inline-flex}.cre8-c-pagination__text{font-family:var(--cre8-typography-label-small-font-family);font-size:var(--cre8-typography-label-small-font-size);font-weight:var(--cre8-typography-label-small-font-weight);line-height:var(--cre8-typography-label-small-line-height);text-decoration:var(--cre8-typography-label-small-text-decoration);text-transform:var(--cre8-typography-label-small-text-transform);padding:0.5rem}`;
+var N = Object.defineProperty, p = (d, t, e, s) => {
+  for (var r = void 0, o = d.length - 1, c; o >= 0; o--)
+    (c = d[o]) && (r = c(t, e, r) || r);
+  return r && N(t, e, r), r;
 };
-const P = class P extends C {
+const b = class b extends P {
   constructor() {
     super(...arguments), this.currentPage = 1, this.display = "default";
   }
@@ -53,9 +39,9 @@ const P = class P extends C {
     return Math.ceil(this.totalResults / this.pageSize);
   }
   render() {
-    const e = this.componentClassNames("cre8-c-page-counter", {});
+    const t = this.componentClassNames("cre8-c-page-counter", {});
     return a`
-      <div class='${e}'>
+      <div class='${t}'>
         <span class="cre8-c-pagination__text" aria-live="polite">
           ${!this.display || this.display === "default" ? a`${this.currentPage}` : a`${this.currentPage} of ${this._totalPages}`}
         </span>
@@ -63,135 +49,68 @@ const P = class P extends C {
     `;
   }
 };
-P.styles = [S];
-let g = P;
-u([
+b.styles = [R];
+let h = b;
+p([
   n({ type: Boolean, reflect: !0 })
-], g.prototype, "rangeVariant");
-u([
+], h.prototype, "rangeVariant");
+p([
   n()
-], g.prototype, "currentPage");
-u([
+], h.prototype, "currentPage");
+p([
   n()
-], g.prototype, "totalResults");
-u([
+], h.prototype, "totalResults");
+p([
   n()
-], g.prototype, "pageSize");
-u([
+], h.prototype, "pageSize");
+p([
   n()
-], g.prototype, "display");
-customElements.get("cre8-page-counter") === void 0 && customElements.define("cre8-page-counter", g);
-const R = w`
-@import '../../design-tokens/core/scss/theming/component';
-
-:host {
-  display: var(--pagination-display, inline-flex);
-  justify-content: var(--pagination-justify-content, center);
-  align-items: var(--pagination-align-items, center);
-  --cre8-button-width: 2rem;
-  --cre8-button-height: 2rem;
-  --cre8-button-min-width: 2rem;
-  --cre8-button-min-height: 2rem;
-  --cre8-button-padding-horizontal-small: 0px;
-  --cre8-button-padding-vertical-small: 0px;
-
-  }
-
-  *, ::slotted(*), *:before, *:after {
-    box-sizing: border-box;
-    width: auto;
-    height: auto;
-    display: flex;
-    justify-content: center;
-    --cre8-button-margin-right: var(--cre8-spacing-2);
-    --cre8-button-margin-left: var(--cre8-spacing-2);
-    margin-right: var(--cre8-button-margin-right);
-    margin-left: var(--cre8-button-margin-left);
-
-    align-items: center;
-}
-
-  [aria-current='true'], #current{
-    --cre8-color-button-tertiary-bg: var( --cre8-color-bg-strong);
-    --cre8-color-button-tertiary-content: var(--cre8-color-content-knockout);
-    --cre8-color-button-tertiary-border: var(--cre8-color-border-transparent);
-   &:hover, &:active{
-      border-radius: var(--cre8-border-radius-button);
-   --cre8-color-button-tertiary-bg-hover: var(--cre8-color-bg-strong);
-    --cre8-color-button-tertiary-content-hover: var(--cre8-color-content-knockout);
-
-   &:focus, &:focus-visible, &:focus-within{
-      border-radius: var(--cre8-border-radius-button);
-
-      --cre8-color-button-tertiary-bg-active: var(--cre8-color-bg-strong);
-      --cre8-color-button-tertiary-content-active: var(--cre8-color-content-knockout);
-      @includefocus();
-    }
-  }
-  }
-
-.cre8-c-pagination--compact, .cre8-c-pagination--icon-only, .cre8-c-pagination--range {
-  --cre8-button-width: 3rem;
-  --cre8-button-height: 3rem;
-  --cre8-button-min-width: 3rem;
-  --cre8-button-min-height: 3rem;
-}
-
-.cre8-c-pagionation__icon {
-  fill: var(--cre8-color-button-tertiary-content);
-}
-.cre8-c-pagination__icon:has(cre8-button:disabled){
-  color: var(--cre8-color-button-tertiary-content-disabled);
-}
-
-.cre8-c-pagination [aria-disabled="true"]{
-  fill: var(--cre8-color-content-default);
-  --cre8-color-button-tertiary-content: var(--cre8-color-content-default);
-}
-`;
-var T = Object.defineProperty, k = Object.getOwnPropertyDescriptor, l = (h, e, t, s) => {
-  for (var i = s > 1 ? void 0 : s ? k(e, t) : e, o = h.length - 1, c; o >= 0; o--)
-    (c = h[o]) && (i = (s ? c(e, t, i) : c(i)) || i);
-  return s && i && T(e, t, i), i;
+], h.prototype, "display");
+customElements.get("cre8-page-counter") === void 0 && customElements.define("cre8-page-counter", h);
+const S = w`*,::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:var(--pagination-display, inline-flex);justify-content:var(--pagination-justify-content, center);align-items:var(--pagination-align-items, center);--cre8-button-width: 2rem;--cre8-button-height: 2rem;--cre8-button-min-width: 2rem;--cre8-button-min-height: 2rem;--cre8-button-padding-horizontal-small: 0px;--cre8-button-padding-vertical-small: 0px}*,::slotted(*),*:before,*:after{box-sizing:border-box;width:auto;height:auto;display:flex;justify-content:center;--cre8-button-margin-right: var(--cre8-spacing-2);--cre8-button-margin-left: var(--cre8-spacing-2);margin-right:var(--cre8-button-margin-right);margin-left:var(--cre8-button-margin-left);align-items:center}[aria-current=true],#current{--cre8-color-button-tertiary-bg: var( --cre8-color-bg-strong);--cre8-color-button-tertiary-content: var(--cre8-color-content-knockout);--cre8-color-button-tertiary-border: var(--cre8-color-border-transparent)}[aria-current=true]:hover,[aria-current=true]:active,#current:hover,#current:active{border-radius:var(--cre8-border-radius-button);--cre8-color-button-tertiary-bg-hover: var(--cre8-color-bg-strong);--cre8-color-button-tertiary-content-hover: var(--cre8-color-content-knockout)}[aria-current=true]:hover:focus,[aria-current=true]:hover:focus-visible,[aria-current=true]:hover:focus-within,[aria-current=true]:active:focus,[aria-current=true]:active:focus-visible,[aria-current=true]:active:focus-within,#current:hover:focus,#current:hover:focus-visible,#current:hover:focus-within,#current:active:focus,#current:active:focus-visible,#current:active:focus-within{border-radius:var(--cre8-border-radius-button);--cre8-color-button-tertiary-bg-active: var(--cre8-color-bg-strong);--cre8-color-button-tertiary-content-active: var(--cre8-color-content-knockout);outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-c-pagination--compact,.cre8-c-pagination--icon-only,.cre8-c-pagination--range{--cre8-button-width: 3rem;--cre8-button-height: 3rem;--cre8-button-min-width: 3rem;--cre8-button-min-height: 3rem}.cre8-c-pagionation__icon{fill:var(--cre8-color-button-tertiary-content)}.cre8-c-pagination__icon:has(cre8-button:disabled){color:var(--cre8-color-button-tertiary-content-disabled)}.cre8-c-pagination [aria-disabled=true]{fill:var(--cre8-color-content-default);--cre8-color-button-tertiary-content: var(--cre8-color-content-default)}`;
+var T = Object.defineProperty, L = Object.getOwnPropertyDescriptor, l = (d, t, e, s) => {
+  for (var r = s > 1 ? void 0 : s ? L(t, e) : t, o = d.length - 1, c; o >= 0; o--)
+    (c = d[o]) && (r = (s ? c(t, e, r) : c(r)) || r);
+  return s && r && T(t, e, r), r;
 };
-const b = class b extends C {
+const m = class m extends P {
   constructor() {
-    super(...arguments), this._currentPage = 99, this._pageSize = 10, this.visiblePages = 5, this._handleKeydown = (e, t) => (s) => {
-      s.code === "Enter" && this._goToPage(e, t);
-    }, this._goToPage = (e, t) => () => {
+    super(...arguments), this._currentPage = 99, this._pageSize = 10, this.visiblePages = 5, this._handleKeydown = (t, e) => (s) => {
+      s.code === "Enter" && this._goToPage(t, e);
+    }, this._goToPage = (t, e) => () => {
       const s = this._currentPage;
-      let i;
+      let r;
       this.buttons.forEach((o) => {
         const c = new y();
-        return c.hideText && c.text === t && (i = c, i.shadowRoot.querySelector(".cre8-c-button").blur()), null;
-      }), this._currentPage = e, this.currentPage = this._currentPage, this.requestUpdate("currentPage", s), this.dispatchEvent(new CustomEvent(
+        return c.hideText && c.text === e && (r = c, r.shadowRoot.querySelector(".cre8-c-button").blur()), null;
+      }), this._currentPage = t, this.currentPage = this._currentPage, this.requestUpdate("currentPage", s), this.dispatchEvent(new CustomEvent(
         "pagination.click",
-        { detail: { buttonName: t ?? this.currentPage.toString(), value: this.currentPage } }
+        { detail: { buttonName: e ?? this.currentPage.toString(), value: this.currentPage } }
       ));
     };
   }
   get pageSize() {
     return this._pageSize;
   }
-  set pageSize(e) {
-    const t = this._pageSize;
-    this._pageSize = e, this.requestUpdate("pageSize", t);
+  set pageSize(t) {
+    const e = this._pageSize;
+    this._pageSize = t, this.requestUpdate("pageSize", e);
   }
   get currentPage() {
     return this._currentPage;
   }
-  set currentPage(e) {
-    const t = this._currentPage;
-    this._currentPage = e, this.requestUpdate("currentPage", t);
+  set currentPage(t) {
+    const e = this._currentPage;
+    this._currentPage = t, this.requestUpdate("currentPage", e);
   }
   connectedCallBack() {
     super.connectedCallback();
   }
   get maxVisiblePages() {
-    const e = {
+    const t = {
       md: 5
     };
-    return f(v.lg.toString()) ? f(v.md.toString()) ? 0 : Math.min(e.md, this.visiblePages) : this.visiblePages;
+    return x(v.lg.toString()) ? x(v.md.toString()) ? 0 : Math.min(t.md, this.visiblePages) : this.visiblePages;
   }
   get totalPages() {
     return Math.ceil(this.totalResults / this.pageSize);
@@ -210,25 +129,25 @@ const b = class b extends C {
   }
   // get range of pages to display [3, 4, 5], [2, 3, 4, 5]
   get pageRange() {
-    const e = Math.floor(this.maxVisiblePages / 2);
-    let t = this.currentPage - e;
-    t = Math.min(t, this.totalPages - this.maxVisiblePages + 1), t = Math.max(t, 1);
-    const s = Math.min(t + this.maxVisiblePages - 1, this.totalPages);
-    return [...Array(this.totalPages)].map((i, o) => o + 1).slice(t - 1, s);
+    const t = Math.floor(this.maxVisiblePages / 2);
+    let e = this.currentPage - t;
+    e = Math.min(e, this.totalPages - this.maxVisiblePages + 1), e = Math.max(e, 1);
+    const s = Math.min(e + this.maxVisiblePages - 1, this.totalPages);
+    return [...Array(this.totalPages)].map((r, o) => o + 1).slice(e - 1, s);
   }
   async firstUpdated() {
     if (await this.updateComplete, this._pageSize !== this.pageSize) {
-      const e = this._pageSize;
-      this._pageSize = this.pageSize, this.requestUpdate("pageSize", e);
+      const t = this._pageSize;
+      this._pageSize = this.pageSize, this.requestUpdate("pageSize", t);
     }
     if (this.windowWidth = window.innerWidth, window.addEventListener("resize", () => {
       if (this.windowWidth !== window.innerWidth) {
-        const e = this.windowWidth;
-        this.windowWidth = window.innerWidth, this.handleResize(), this.requestUpdate("isResponsive", e);
+        const t = this.windowWidth;
+        this.windowWidth = window.innerWidth, this.handleResize(), this.requestUpdate("isResponsive", t);
       }
     }), this._currentPage !== this.currentPage) {
-      const e = this._currentPage;
-      this._currentPage = this.currentPage, this.requestUpdate("currentPage", e);
+      const t = this._currentPage;
+      this._currentPage = this.currentPage, this.requestUpdate("currentPage", t);
     }
   }
   disconnectedCallback() {
@@ -243,28 +162,28 @@ const b = class b extends C {
               display=${this.display}>
               </cre8-page-counter>`;
   }
-  goToPage(e, t) {
-    return this._goToPage(e, t).bind(this);
+  goToPage(t, e) {
+    return this._goToPage(t, e).bind(this);
   }
-  handleKeydown(e, t) {
-    return this._handleKeydown(e, t);
+  handleKeydown(t, e) {
+    return this._handleKeydown(t, e);
   }
   render() {
-    const e = this.componentClassNames("cre8-c-pagination", {
+    const t = this.componentClassNames("cre8-c-pagination", {
       "cre8-c-pagination--compact": this.display !== void 0 && this.display === "compact",
       "cre8-c-pagination--icon-only": this.display !== void 0 && this.display === "icon-only"
     });
     return a`<nav
       aria-label="pagination"
-      class=${e}>
+      class=${t}>
         <slot></slot>
-        ${this.hideLastAndFirstButtons ? d : a` <cre8-button
+        ${this.hideLastAndFirstButtons ? g : a` <cre8-button
               variant="tertiary"
               size="sm"
               text=""
               hideText
               part="icon"
-              aria-disabled="${p(this.hasNoPreviousPage)}"
+              aria-disabled="${u(this.hasNoPreviousPage)}"
               ?disabled=${this.hasNoPreviousPage}
               @click=${this.goToPage(1, "First Page")}
               @keydown=${this.handleKeydown(1, "First Page")}
@@ -274,7 +193,7 @@ const b = class b extends C {
           <cre8-icon
             className="cre8-c-pagination__icon"
             aria-label="First Page"
-            svg=${N}
+            svg=${$}
             size="24">
           </cre8-icon>
         </span>
@@ -285,7 +204,7 @@ const b = class b extends C {
           hideText
           text=""
           part="icon"
-          aria-disabled="${p(this.hasNoPreviousPage)}"
+          aria-disabled="${u(this.hasNoPreviousPage)}"
           ?disabled=${this.hasNoPreviousPage}
           @click=${this.goToPage(this._currentPage - 1, "Previous Page")}
           @keydown=${this.handleKeydown(this.currentPage - 1, "Previous Page")}
@@ -296,7 +215,7 @@ const b = class b extends C {
             className="cre8-c-pagination__icon"
             aria-label="Previous Page"
             slot="before"
-            svg=${z}
+            svg=${k}
             size="24"
 
             >
@@ -305,15 +224,15 @@ const b = class b extends C {
         </cre8-button>
 
       ${this.displayTypes()}
-        ${!this.display || this.display === "default" ? a`${this.pageRange[this.pageRange.length - 1] > 1 && this.pageRange[0] !== 1 ? a`<cre8-button hideText iconName="ellipsis" variant="tertiary" size="sm" aria-disabled="true" inert></cre8-button>` : d}
-            ${this.pageRange.map((t) => t === this.currentPage ? a`<cre8-button variant="tertiary" tab-index="-1" text="${t}"  class="icon-only" size="sm" id="current"></cre8-button>` : a`<cre8-button
+        ${!this.display || this.display === "default" ? a`${this.pageRange[this.pageRange.length - 1] > 1 && this.pageRange[0] !== 1 ? a`<cre8-button hideText iconName="ellipsis" variant="tertiary" size="sm" aria-disabled="true" inert></cre8-button>` : g}
+            ${this.pageRange.map((e) => e === this.currentPage ? a`<cre8-button variant="tertiary" tab-index="-1" text="${e}"  class="icon-only" size="sm" id="current"></cre8-button>` : a`<cre8-button
                       variant="tertiary"
                       size="sm"
-                      text="${t}"
+                      text="${e}"
                       class="icon-only"
-                      id="${t}"
-                      @click=${this.goToPage(t, t.toString())}
-                      @keydown=${this.handleKeydown(t, t.toString())}>
+                      id="${e}"
+                      @click=${this.goToPage(e, e.toString())}
+                      @keydown=${this.handleKeydown(e, e.toString())}>
                       </cre8-button>`)}
             ${this.pageRange[this.pageRange.length - 1] < this.totalPages ? a`<cre8-button
                       hideText
@@ -323,14 +242,14 @@ const b = class b extends C {
                       size="sm"
                       aria-disabled="true"
                       inert>
-                    </cre8-button>` : d}` : d}
+                    </cre8-button>` : g}` : g}
         <cre8-button
           variant="tertiary"
           size="sm"
           part="icon"
           hideText
           text=""
-          aria-disabled="${p(this.hasNoNextPage)}"
+          aria-disabled="${u(this.hasNoNextPage)}"
           ?disabled=${this.hasNoNextPage}
           @click=${this.goToPage(this.currentPage + 1, "Next Page")}
           @keydown=${this.handleKeydown(this.currentPage + 1, "Next Page")}
@@ -340,19 +259,19 @@ const b = class b extends C {
             <cre8-icon
             aria-label="Next Page"
             className="cre8-c-pagination__icon"
-            slot="before" svg=${$}
+            slot="before" svg=${_}
             size="24">
             </cre8-icon>
           </span>
         </cre8-button>
 
-        ${this.hideLastAndFirstButtons ? d : a` <cre8-button
+        ${this.hideLastAndFirstButtons ? g : a` <cre8-button
               variant="tertiary"
               size="sm"
               hideText
               text=""
               part="icon"
-              aria-disabled="${p(this.hasNoNextPage)}"
+              aria-disabled="${u(this.hasNoNextPage)}"
               ?disabled=${this.hasNoNextPage}
               @click=${this.goToPage(this.totalPages, "Last Page")}
               @keydown=${this.handleKeydown(this.totalPages, "Last Page")}
@@ -363,7 +282,7 @@ const b = class b extends C {
                 aria-label="Last Page"
                 className="cre8-c-pagination__icon"
                 slot="before"
-                svg=${x}
+                svg=${C}
                 size="24"
                 >
                 </cre8-icon>
@@ -373,41 +292,41 @@ const b = class b extends C {
       </nav>`;
   }
 };
-b.styles = [R], b.elementDefinitions = {
+m.styles = [S], m.elementDefinitions = {
   "cre8-button": y
 };
-let r = b;
+let i = m;
 l([
-  m()
-], r.prototype, "_currentPage", 2);
+  f()
+], i.prototype, "_currentPage", 2);
 l([
   n({ reflect: !0, type: Number })
-], r.prototype, "totalResults", 2);
+], i.prototype, "totalResults", 2);
 l([
   n({ type: Number, reflect: !0 })
-], r.prototype, "pageSize", 1);
+], i.prototype, "pageSize", 1);
 l([
-  m()
-], r.prototype, "_pageSize", 2);
+  f()
+], i.prototype, "_pageSize", 2);
 l([
   n({ reflect: !0, type: Number })
-], r.prototype, "visiblePages", 2);
+], i.prototype, "visiblePages", 2);
 l([
   n({ type: String, reflect: !0 })
-], r.prototype, "display", 2);
+], i.prototype, "display", 2);
 l([
-  m()
-], r.prototype, "windowWidth", 2);
+  f()
+], i.prototype, "windowWidth", 2);
 l([
-  _("cre8-button")
-], r.prototype, "buttons", 2);
+  z("cre8-button")
+], i.prototype, "buttons", 2);
 l([
   n({ type: Boolean, reflect: !0 })
-], r.prototype, "hideLastAndFirstButtons", 2);
+], i.prototype, "hideLastAndFirstButtons", 2);
 l([
   n({ reflect: !0, type: Number })
-], r.prototype, "currentPage", 1);
-customElements.get("cre8-pagination") === void 0 && customElements.define("cre8-pagination", r);
+], i.prototype, "currentPage", 1);
+customElements.get("cre8-pagination") === void 0 && customElements.define("cre8-pagination", i);
 export {
-  r as Cre8Pagination
+  i as Cre8Pagination
 };