@tmorrow/cre8-wc 1.0.25 → 1.1.1

package/lib/components/multi-select/multi-select.js

@@ -1,190 +1,25 @@
 import { ifDefined as b } from "lit-html/directives/if-defined.js";
 import { css as f, html as l, nothing as n } from "lit";
-import { property as s, state as m } from "lit/decorators.js";
+import { property as o, state as m } from "lit/decorators.js";
 import { nanoid as h } from "nanoid";
-import { Cre8Element as g } from "../cre8-element.js";
+import { Cre8Element as y } from "../cre8-element.js";
 import "../remove-tag/remove-tag.js";
 import "../field-note/field-note.js";
 import "../button/button.js";
 import "../checkbox-field-item/checkbox-field-item.js";
-const v = `<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+const g = `<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
 <path d="M15.7869 4.87827L8.51452 12.1506C8.44698 12.2182 8.36677 12.2719 8.27849 12.3085C8.1902 12.3451 8.09557 12.3639 8 12.3639C7.90443 12.3639 7.8098 12.3451 7.72151 12.3085C7.63323 12.2719 7.55302 12.2182 7.48548 12.1506L0.213121 4.87827C0.0766618 4.74181 0 4.55673 0 4.36375C0 4.17077 0.0766618 3.98569 0.213121 3.84923C0.34958 3.71277 0.534658 3.63611 0.72764 3.63611C0.920622 3.63611 1.1057 3.71277 1.24216 3.84923L8 10.608L14.7578 3.84923C14.8254 3.78166 14.9056 3.72806 14.9939 3.6915C15.0822 3.65493 15.1768 3.63611 15.2724 3.63611C15.3679 3.63611 15.4625 3.65493 15.5508 3.6915C15.6391 3.72806 15.7193 3.78166 15.7869 3.84923C15.8544 3.9168 15.908 3.99701 15.9446 4.08529C15.9812 4.17357 16 4.26819 16 4.36375C16 4.4593 15.9812 4.55392 15.9446 4.6422C15.908 4.73049 15.8544 4.8107 15.7869 4.87827Z"/>
 </svg>
-`, y = `<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+`, v = `<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
 <path d="M10.8969 5.97385L8.87 8L10.8969 10.0262C10.9541 10.0833 10.9995 10.1512 11.0304 10.2259C11.0613 10.3006 11.0773 10.3807 11.0773 10.4615C11.0773 10.5424 11.0613 10.6225 11.0304 10.6972C10.9995 10.7719 10.9541 10.8397 10.8969 10.8969C10.8397 10.9541 10.7719 10.9994 10.6972 11.0304C10.6225 11.0613 10.5424 11.0773 10.4615 11.0773C10.3807 11.0773 10.3006 11.0613 10.2259 11.0304C10.1512 10.9994 10.0833 10.9541 10.0262 10.8969L8 8.87L5.97385 10.8969C5.91667 10.9541 5.8488 10.9994 5.77409 11.0304C5.69939 11.0613 5.61932 11.0773 5.53846 11.0773C5.45761 11.0773 5.37754 11.0613 5.30283 11.0304C5.22813 10.9994 5.16025 10.9541 5.10308 10.8969C5.0459 10.8397 5.00055 10.7719 4.96961 10.6972C4.93866 10.6225 4.92274 10.5424 4.92274 10.4615C4.92274 10.3807 4.93866 10.3006 4.96961 10.2259C5.00055 10.1512 5.0459 10.0833 5.10308 10.0262L7.13 8L5.10308 5.97385C4.98761 5.85837 4.92274 5.70176 4.92274 5.53846C4.92274 5.37516 4.98761 5.21855 5.10308 5.10308C5.21855 4.9876 5.37516 4.92273 5.53846 4.92273C5.70176 4.92273 5.85838 4.9876 5.97385 5.10308L8 7.13L10.0262 5.10308C10.0833 5.0459 10.1512 5.00055 10.2259 4.9696C10.3006 4.93866 10.3807 4.92273 10.4615 4.92273C10.5424 4.92273 10.6225 4.93866 10.6972 4.9696C10.7719 5.00055 10.8397 5.0459 10.8969 5.10308C10.9541 5.16025 10.9995 5.22813 11.0304 5.30283C11.0613 5.37753 11.0773 5.4576 11.0773 5.53846C11.0773 5.61932 11.0613 5.69939 11.0304 5.77409C10.9995 5.84879 10.9541 5.91667 10.8969 5.97385ZM16 8C16 9.58225 15.5308 11.129 14.6518 12.4446C13.7727 13.7602 12.5233 14.7855 11.0615 15.391C9.59966 15.9965 7.99113 16.155 6.43928 15.8463C4.88743 15.5376 3.46197 14.7757 2.34315 13.6569C1.22433 12.538 0.462403 11.1126 0.153721 9.56072C-0.15496 8.00887 0.00346628 6.40034 0.608967 4.93853C1.21447 3.47672 2.23985 2.22729 3.55544 1.34824C4.87103 0.469192 6.41775 0 8 0C10.121 0.00223986 12.1546 0.845814 13.6544 2.34562C15.1542 3.84542 15.9978 5.87895 16 8ZM14.7692 8C14.7692 6.66117 14.3722 5.35241 13.6284 4.23922C12.8846 3.12602 11.8274 2.25839 10.5905 1.74605C9.35356 1.2337 7.99249 1.09965 6.67939 1.36084C5.36629 1.62203 4.16013 2.26674 3.21343 3.21343C2.26674 4.16012 1.62203 5.36629 1.36084 6.67939C1.09965 7.99249 1.2337 9.35356 1.74605 10.5905C2.2584 11.8274 3.12603 12.8846 4.23922 13.6284C5.35241 14.3722 6.66117 14.7692 8 14.7692C9.79469 14.7672 11.5153 14.0534 12.7843 12.7843C14.0534 11.5153 14.7672 9.79468 14.7692 8Z"/>
 </svg>
-`, C = f`@import "../../design-tokens/core/scss/theming/component";
-
-:host {
-  display: block;
-}
-
-.cre8-c-multi-select {
-  position: relative;
-}
-
-/**
- * Label
- */
-.cre8-c-multi-select__label {
-  @include label-styles;
-}
-
-/**
- * Body
- * 1) The div that contains the input and icons
- */
-.cre8-c-multi-select__body {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  position: relative;
-  @include input-styles;
-  padding: var(--cre8-spacing-8);
-  padding-inline-end: calc(8px * 5.5);
-  min-width: 240px;
-  cursor: pointer;
-  min-height: calc(8px * 6);
-  height: fit-content;
-
-  .cre8-is-disabled & {
-    box-shadow: none;
-    background-color: var(--cre8-color-bg-disabled);
-    border-color: var(--cre8-color-border-disabled);
-    cursor: not-allowed;
-    outline: none;
-
-    &:hover,
-    &:focus,
-    &:active,
-    &:focus-visible {
-      outline: none;
-      background-color: var(--cre8-color-bg-disabled);
-      border-color: var(--cre8-color-border-disabled);
-      color: var(--cre8-color-content-disabled);
-    }
-
-    .cre8-c-multi-select__content {
-      border-color: var(--cre8-color-border-disabled);
-    }
-  }
-}
-
-.cre8-c-multi-select__content {
-  display: flex;
-  min-height: 30px;
-  width: 100%;
-  border-right: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);
-  padding-right: calc(8px * 5.5);
-}
-
-.cre8-c-multi-select__tag-wrapper {
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-wrap: wrap;
-  height: 100%;
-  gap: calc(8px * 0.5);
-}
-
-.cre8-c-multi-select__icons-wrapper {
-  display: flex;
-  justify-content: end;
-  margin-right: -36px;
-  margin-left: -48px;
-  gap: calc(8px * 3);
-  min-width: 96px;
-
-  button {
-    background-color: inherit;
-    border: none;
-    padding: none;
-
-    .cre8-is-disabled & {
-      cursor: not-allowed;
-    }
-  }
-}
-
-.cre8-c-multi-select__clear_icon {
-  .cre8-c-multi-select--no-clear-icon & {
-    display: none;
-  }
-}
-
-/**
- * Select Icon
- * 1) The icons within the body container positioned absolutely over the input
- */
-cre8-icon {
-  display: flex;
-  pointer-events: none;
-  color: var(--cre8-color-button-tertiary-content);
-
-  .cre8-is-disabled & {
-    color: var(--cre8-color-border-disabled);
-  }
-}
-
-.cre8-c-multi-select__dropdown {
-  background-color: var(--cre8-color-bg-default);
-  border: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);
-  box-shadow: var(--cre8-shadow-default);
-  border-radius: var(--cre8-border-radius-default);
-  flex-direction: column;
-  left: 0;
-  min-width: 100%;
-  position: absolute;
-  top: 100%;
-  white-space: nowrap;
-  margin-top: var(--cre8-spacing-4);
-  margin-left: 0;
-  padding: var(--cre8-spacing-8);
-
-  ul {
-    list-style-type: none;
-    padding: 0;
-    margin: 0;
-  }
-
-  li {
-    @include cre8-typography-body-default;
-    background-color: var(--cre8-color-bg-default);
-    border: var(--cre8-border-width-focus) var(--cre8-border-style-default) var(--cre8-color-border-transparent);
-    border-radius: var(--cre8-border-radius-default);
-    color: var(--cre8-color-content-default);
-    width: 100%;
-    cursor: pointer;
-    margin: var(--cre8-spacing-0);
-    padding: var(--cre8-spacing-8) var(--cre8-spacing-8);
-    text-align: left;
-
-    &:active,
-    &:hover,
-    &:focus {
-      background-color: var(--cre8-color-bg-brand-hover);
-      color: var(--cre8-color-content-default);
-      outline: var(--cre8-border-width-none);
-      border: var(--cre8-border-width-focus) var(--cre8-border-style-default) var(--cre8-color-border-active-outline);
-    }
-  }
-}
-
-/**
- * Select field notes
- */
-.cre8-c-multi-select__field-note,
-.cre8-c-multi-select__field-note-success,
-.cre8-c-multi-select__field-note-error {
-  flex-basis: 100%;
-}`;
-var w = Object.defineProperty, i = (u, e, r, c) => {
-  for (var o = void 0, d = u.length - 1, a; d >= 0; d--)
-    (a = u[d]) && (o = a(e, r, o) || o);
-  return o && w(e, r, o), o;
+`, _ = f`*,::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-multi-select{position:relative}.cre8-c-multi-select__label{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);display:block;margin-bottom:0.5rem}.cre8-c-multi-select__body{display:flex;align-items:center;justify-content:space-between;position:relative;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);outline:var(--cre8-border-width-focus) solid rgba(0,0,0,0);outline-offset:0.125rem;-webkit-appearance:none;width:100%;border-width:var(--cre8-border-width-default);border-style:solid;border-color:var(--cre8-color-border-strong);border-radius:var(--cre8-border-radius-default);padding:0.75rem 0.5rem;color:var(--cre8-color-content-default);background-color:var(--cre8-color-bg-default);transition:outline-color var(--cre8-anim-fade-quick) var(--cre8-anim-ease),border-color var(--cre8-anim-fade-quick) var(--cre8-anim-ease),background-color var(--cre8-anim-fade-quick) var(--cre8-anim-ease),color var(--cre8-anim-fade-quick) var(--cre8-anim-ease)}.cre8-c-multi-select__body:hover:not(:disabled),.cre8-c-multi-select__body:focus:not(:disabled),.cre8-c-multi-select__body:active:not(:disabled),.cre8-c-multi-select__body:focus-visible{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-is-error .cre8-c-multi-select__body:hover:not(:disabled),.cre8-is-error .cre8-c-multi-select__body:focus:not(:disabled),.cre8-is-error .cre8-c-multi-select__body:active:not(:disabled),.cre8-is-error .cre8-c-multi-select__body:focus-visible{outline-color:var(--cre8-color-border-error)}.cre8-is-success .cre8-c-multi-select__body:hover:not(:disabled),.cre8-is-success .cre8-c-multi-select__body:focus:not(:disabled),.cre8-is-success .cre8-c-multi-select__body:active:not(:disabled),.cre8-is-success .cre8-c-multi-select__body:focus-visible{outline-color:var(--cre8-color-border-success)}.cre8-c-multi-select__body:disabled{background-color:var(--cre8-color-bg-disabled);border-color:var(--cre8-color-border-disabled);color:var(--cre8-color-content-disabled);cursor:not-allowed}.cre8-c-multi-select__body:disabled::placeholder{color:var(--cre8-color-content-disabled)}.cre8-c-multi-select__body::placeholder{color:var(--cre8-color-content-subtle)}.cre8-is-error .cre8-c-multi-select__body{border-color:var(--cre8-color-border-error)}.cre8-is-success .cre8-c-multi-select__body{border-color:var(--cre8-color-border-success)}.cre8-c-multi-select__body{padding:var(--cre8-spacing-8);padding-inline-end:2.75rem;min-width:240px;cursor:pointer;min-height:3rem;height:fit-content}.cre8-is-disabled .cre8-c-multi-select__body{box-shadow:none;background-color:var(--cre8-color-bg-disabled);border-color:var(--cre8-color-border-disabled);cursor:not-allowed;outline:none}.cre8-is-disabled .cre8-c-multi-select__body:hover,.cre8-is-disabled .cre8-c-multi-select__body:focus,.cre8-is-disabled .cre8-c-multi-select__body:active,.cre8-is-disabled .cre8-c-multi-select__body:focus-visible{outline:none;background-color:var(--cre8-color-bg-disabled);border-color:var(--cre8-color-border-disabled);color:var(--cre8-color-content-disabled)}.cre8-is-disabled .cre8-c-multi-select__body .cre8-c-multi-select__content{border-color:var(--cre8-color-border-disabled)}.cre8-c-multi-select__content{display:flex;min-height:30px;width:100%;border-right:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);padding-right:2.75rem}.cre8-c-multi-select__tag-wrapper{list-style-type:none;margin:0;padding:0;display:flex;flex-wrap:wrap;height:100%;gap:0.25rem}.cre8-c-multi-select__icons-wrapper{display:flex;justify-content:end;margin-right:-36px;margin-left:-48px;gap:1.5rem;min-width:96px}.cre8-c-multi-select__icons-wrapper button{background-color:inherit;border:none;padding:none}.cre8-is-disabled .cre8-c-multi-select__icons-wrapper button{cursor:not-allowed}.cre8-c-multi-select--no-clear-icon .cre8-c-multi-select__clear_icon{display:none}cre8-icon{display:flex;pointer-events:none;color:var(--cre8-color-button-tertiary-content)}.cre8-is-disabled cre8-icon{color:var(--cre8-color-border-disabled)}.cre8-c-multi-select__dropdown{background-color:var(--cre8-color-bg-default);border:var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-strong);box-shadow:var(--cre8-shadow-default);border-radius:var(--cre8-border-radius-default);flex-direction:column;left:0;min-width:100%;position:absolute;top:100%;white-space:nowrap;margin-top:var(--cre8-spacing-4);margin-left:0;padding:var(--cre8-spacing-8)}.cre8-c-multi-select__dropdown ul{list-style-type:none;padding:0;margin:0}.cre8-c-multi-select__dropdown li{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);background-color:var(--cre8-color-bg-default);border:var(--cre8-border-width-focus) var(--cre8-border-style-default) var(--cre8-color-border-transparent);border-radius:var(--cre8-border-radius-default);color:var(--cre8-color-content-default);width:100%;cursor:pointer;margin:var(--cre8-spacing-0);padding:var(--cre8-spacing-8) var(--cre8-spacing-8);text-align:left}.cre8-c-multi-select__dropdown li:active,.cre8-c-multi-select__dropdown li:hover,.cre8-c-multi-select__dropdown li:focus{background-color:var(--cre8-color-bg-brand-hover);color:var(--cre8-color-content-default);outline:var(--cre8-border-width-none);border:var(--cre8-border-width-focus) var(--cre8-border-style-default) var(--cre8-color-border-active-outline)}.cre8-c-multi-select__field-note,.cre8-c-multi-select__field-note-success,.cre8-c-multi-select__field-note-error{flex-basis:100%}`;
+var w = Object.defineProperty, i = (u, e, t, s) => {
+  for (var c = void 0, a = u.length - 1, d; a >= 0; a--)
+    (d = u[a]) && (c = d(e, t, c) || c);
+  return c && w(e, t, c), c;
 };
-const p = class p extends g {
+const p = class p extends y {
   /* Life Cycle Methods */
   constructor() {
     super(), this.items = [], this.selectedTagItems = [], this.dropdownOpen = !1, this._handleOnClick = this._handleOnClick.bind(this);
@@ -203,14 +38,14 @@ const p = class p extends g {
     return this.items.map(
       // Note: Keyboard can already navigate to the checkbox
       // eslint-disable-next-line lit-a11y/click-events-have-key-events
-      (e, r) => l`<li
-        @click="${(c) => this._handleListItemClick(c, r)}"
+      (e, t) => l`<li
+        @click="${(s) => this._handleListItemClick(s, t)}"
       >
         <cre8-checkbox-field-item
           .checked="${!!this.selectedTagItems.includes(e)}"
           label=${e}
-          id=${r}
-          @input="${(c) => this._handleDropdownItemInput(e, c)}"
+          id=${t}
+          @input="${(s) => this._handleDropdownItemInput(e, s)}"
         >
         </cre8-checkbox-field-item>
       </li>`
@@ -259,25 +94,25 @@ const p = class p extends g {
       throw Error(
         "Could not determine navigation context during click handler"
       );
-    const r = e.composedPath().includes(this.shadowRoot.host), c = this.renderRoot.querySelector(
+    const t = e.composedPath().includes(this.shadowRoot.host), s = this.renderRoot.querySelector(
       ".cre8-c-multi-select__label"
-    ), o = this.renderRoot.querySelector(
+    ), c = this.renderRoot.querySelector(
       ".cre8-c-multi-select__icons-wrapper"
-    ), d = this.shadowRoot?.querySelector(
-      ".cre8-c-multi-select__tag-wrapper"
     ), a = this.shadowRoot?.querySelector(
+      ".cre8-c-multi-select__tag-wrapper"
+    ), d = this.shadowRoot?.querySelector(
       ".cre8-c-multi-select__dropdown"
     );
-    r ? !e.composedPath().includes(c) && !e.composedPath().includes(d) && !e.composedPath().includes(o) && !e.composedPath().includes(a) && !this.disabled && this.toggleDropDown() : this.dropdownOpen = !1;
+    t ? !e.composedPath().includes(s) && !e.composedPath().includes(a) && !e.composedPath().includes(c) && !e.composedPath().includes(d) && !this.disabled && this.toggleDropDown() : this.dropdownOpen = !1;
   }
-  _handleListItemClick(e, r) {
-    e.target !== this.shadowRoot?.querySelector(`cre8-checkbox-field-item[id="${r}"]`) && this.shadowRoot?.querySelector(`cre8-checkbox-field-item[id="${r}"]`).shadowRoot?.querySelector("input").click();
+  _handleListItemClick(e, t) {
+    e.target !== this.shadowRoot?.querySelector(`cre8-checkbox-field-item[id="${t}"]`) && this.shadowRoot?.querySelector(`cre8-checkbox-field-item[id="${t}"]`).shadowRoot?.querySelector("input").click();
   }
-  _handleDropdownItemInput(e, r) {
-    r.target.checked ? this.selectedTagItems = this.selectedTagItems.concat(e) : this.selectedTagItems = this.selectedTagItems.filter((o) => o !== e), this.emitSelectedItems();
+  _handleDropdownItemInput(e, t) {
+    t.target.checked ? this.selectedTagItems = this.selectedTagItems.concat(e) : this.selectedTagItems = this.selectedTagItems.filter((c) => c !== e), this.emitSelectedItems();
   }
   async _handleRemoveTagClick(e) {
-    this.disabled || (this.selectedTagItems = this.selectedTagItems.filter((r) => r !== e), this.shadowRoot?.querySelector(`cre8-checkbox-field-item[label="${e}"]`).shadowRoot?.querySelector("input").click(), await this.updateComplete, this.emitSelectedItems());
+    this.disabled || (this.selectedTagItems = this.selectedTagItems.filter((t) => t !== e), this.shadowRoot?.querySelector(`cre8-checkbox-field-item[label="${e}"]`).shadowRoot?.querySelector("input").click(), await this.updateComplete, this.emitSelectedItems());
   }
   dropdownArrowClick() {
     this.disabled || this.toggleDropDown();
@@ -354,7 +189,7 @@ const p = class p extends g {
           <div class="cre8-c-multi-select__icons-wrapper">
             <cre8-button
               ?hideText=${!0}
-              svg="${y}"
+              svg="${v}"
               text="Clear All"
               variant="tertiary"
               ?disabled="${this.disabled}"
@@ -364,7 +199,7 @@ const p = class p extends g {
             </cre8-button>
             <cre8-button
               ?hideText=${!0}
-              svg="${v}"
+              svg="${g}"
               variant="tertiary"
               ?disabled="${this.disabled}"
               class="cre8-c-multi-select__down_icon"
@@ -397,52 +232,52 @@ const p = class p extends g {
     `;
   }
 };
-p.styles = [C];
-let t = p;
+p.styles = [_];
+let r = p;
 i([
-  s({ type: Array })
-], t.prototype, "items");
+  o({ type: Array })
+], r.prototype, "items");
 i([
   m()
-], t.prototype, "selectedTagItems");
+], r.prototype, "selectedTagItems");
 i([
-  s({ type: Array })
-], t.prototype, "preselectedItems");
+  o({ type: Array })
+], r.prototype, "preselectedItems");
 i([
   m()
-], t.prototype, "dropdownOpen");
+], r.prototype, "dropdownOpen");
 i([
-  s()
-], t.prototype, "label");
+  o()
+], r.prototype, "label");
 i([
-  s()
-], t.prototype, "fieldId");
+  o()
+], r.prototype, "fieldId");
 i([
-  s()
-], t.prototype, "fieldNote");
+  o()
+], r.prototype, "fieldNote");
 i([
-  s()
-], t.prototype, "ariaDescribedBy");
+  o()
+], r.prototype, "ariaDescribedBy");
 i([
-  s()
-], t.prototype, "validationAriaDescribedBy");
+  o()
+], r.prototype, "validationAriaDescribedBy");
 i([
-  s({ type: Boolean, reflect: !0 })
-], t.prototype, "disabled");
+  o({ type: Boolean, reflect: !0 })
+], r.prototype, "disabled");
 i([
-  s({ type: Boolean, reflect: !0 })
-], t.prototype, "isError");
+  o({ type: Boolean, reflect: !0 })
+], r.prototype, "isError");
 i([
-  s()
-], t.prototype, "errorNote");
+  o()
+], r.prototype, "errorNote");
 i([
-  s({ type: Boolean, reflect: !0 })
-], t.prototype, "isSuccess");
+  o({ type: Boolean, reflect: !0 })
+], r.prototype, "isSuccess");
 i([
-  s()
-], t.prototype, "successNote");
-customElements.get("cre8-multi-select") === void 0 && customElements.define("cre8-multi-select", t);
+  o()
+], r.prototype, "successNote");
+customElements.get("cre8-multi-select") === void 0 && customElements.define("cre8-multi-select", r);
 export {
-  t as Cre8MultiSelect,
-  t as default
+  r as Cre8MultiSelect,
+  r as default
 };

package/lib/components/multi-select/multi-select.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"multi-select.styles.d.ts","sourceRoot":"","sources":["../../../components/multi-select/multi-select.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAqKV,CAAC;AACH,eAAe,MAAM,CAAC"}
+{"version":3,"file":"multi-select.styles.d.ts","sourceRoot":"","sources":["../../../components/multi-select/multi-select.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAA6mQ,CAAC;AAC1nQ,eAAe,MAAM,CAAC"}

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"}