@everchron/ec-shards 7.2.8 → 7.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everchron/ec-shards",
-  "version": "7.2.8",
+  "version": "7.3.0",
   "private": false,
   "description": "Everchron Shards UI Library",
   "repository": "https://github.com/everchron/ec-shards.git",
@@ -25,6 +25,8 @@
     "*.svg"
   ],
   "dependencies": {
+    "emoji.json": "^14.0.0",
+    "js-search-array": "^1.0.1",
     "v-click-outside": "^2.1.3"
   },
   "peerDependencies": {

package/src/assets/icons/basketball.svg

@@ -0,0 +1,6 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 24.75C20.3848 24.75 24.75 20.3848 24.75 15C24.75 9.61522 20.3848 5.25 15 5.25C9.61522 5.25 5.25 9.61522 5.25 15C5.25 20.3848 9.61522 24.75 15 24.75Z" stroke="currentColor" vector-effect="non-scaling-stroke" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.025 5.30469C16.1797 6.75039 16.0087 8.21237 15.5246 9.58336C15.0405 10.9544 14.2557 12.1996 13.2276 13.2277C12.1995 14.2558 10.9542 15.0407 9.58324 15.5247C8.21225 16.0088 6.75026 16.1798 5.30457 16.0251" stroke="currentColor" vector-effect="non-scaling-stroke" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M24.6953 13.9749C23.2496 13.8203 21.7876 13.9913 20.4166 14.4754C19.0457 14.9595 17.8004 15.7443 16.7723 16.7724C15.7442 17.8005 14.9594 19.0458 14.4753 20.4168C13.9912 21.7878 13.8202 23.2497 13.9749 24.6954" stroke="currentColor" vector-effect="non-scaling-stroke" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.84515 9.66394C10.2941 10.0047 13.544 11.4388 16.1205 13.7568C18.697 16.0748 20.4653 19.1555 21.1675 22.5494" stroke="currentColor" vector-effect="non-scaling-stroke" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/emoji.svg

@@ -0,0 +1,6 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.58331 12.8333C10.0112 12.3079 10.5962 12.01 11.2083 12.01C11.8204 12.01 12.3891 12.3079 12.8333 12.8333" stroke="currentColor" vector-effect="non-scaling-stroke" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17.1667 12.8333C17.5946 12.3079 18.1796 12.01 18.7917 12.01C19.4038 12.01 19.9725 12.3079 20.4167 12.8333" stroke="currentColor" vector-effect="non-scaling-stroke" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21.8943 8.10571C25.7019 11.9133 25.7019 18.0867 21.8943 21.8943C18.0867 25.7019 11.9134 25.7019 8.10577 21.8943C4.29816 18.0867 4.29816 11.9133 8.10577 8.10571C11.9134 4.2981 18.0867 4.2981 21.8943 8.10571Z" stroke="currentColor" vector-effect="non-scaling-stroke" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18.7916 17.912C18.7916 17.912 17.3692 19.3333 15 19.3333C12.6296 19.3333 11.2083 17.912 11.2083 17.912" stroke="currentColor" vector-effect="non-scaling-stroke" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/flag.svg

@@ -0,0 +1,4 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.8333 16.0834L13.4226 17.8514C13.7173 18.7365 14.5461 19.3334 15.4788 19.3334H22.5833C23.7804 19.3334 24.75 18.3638 24.75 17.1667V10.8346C24.75 9.63755 23.7804 8.66797 22.5833 8.66797H17.2403" stroke="currentColor" vector-effect="non-scaling-stroke" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.75 24.75L6.20006 8.10133C5.73314 6.69842 6.77747 5.25 8.25622 5.25H15.0736C16.2707 5.25 17.2403 6.21958 17.2403 7.41667V13.9167C17.2403 15.1138 16.2707 16.0833 15.0736 16.0833H8.86072" stroke="currentColor" vector-effect="non-scaling-stroke" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/food-drink.svg

@@ -0,0 +1,7 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.1667 17.25V16.1666C17.1667 14.3715 15.7117 12.9166 13.9167 12.9166H8.5C6.70492 12.9166 5.25 14.3715 5.25 16.1666V17.25" stroke="currentColor" vector-effect="non-scaling-stroke" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15 23.75H7.41667C6.21958 23.75 5.25 22.7804 5.25 21.5833V20.5H17.1667V21.5833C17.1667 22.7804 16.1971 23.75 15 23.75Z" stroke="currentColor" vector-effect="non-scaling-stroke" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.16666 17.25H18.25" stroke="currentColor" vector-effect="non-scaling-stroke" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.5743 12.9166L13.1616 9.80959C13.076 9.15959 13.5808 8.58325 14.2362 8.58325H23.6667C24.3264 8.58325 24.8323 9.16717 24.7392 9.81933L22.8823 22.8193C22.8054 23.3534 22.3482 23.7499 21.8098 23.7499H19.4991" stroke="currentColor" vector-effect="non-scaling-stroke" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M22.7491 4.25H20.434C19.8967 4.25 19.4417 4.64325 19.3626 5.17408L18.8556 8.58333" stroke="currentColor" vector-effect="non-scaling-stroke" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/hand.svg

@@ -0,0 +1,5 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.399 14.665V5.59975C13.399 4.71669 14.1157 4 14.9988 4C15.8818 4 16.5985 4.71669 16.5985 5.59975V14.665" vector-effect="non-scaling-stroke" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.399 7.73269C13.399 6.84962 12.6823 6.13293 11.7993 6.13293C10.9162 6.13293 10.1995 6.84962 10.1995 7.73269V14.6649" vector-effect="non-scaling-stroke" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.5985 7.73269C16.5985 6.84962 17.3152 6.13293 18.1983 6.13293C19.0813 6.13293 19.798 6.84962 19.798 7.73269V13.5984V16.7979L21.8254 14.7705C22.4728 14.1232 23.5222 14.1232 24.1696 14.7705C24.7284 15.3294 24.8148 16.205 24.3765 16.8619L20.631 22.4803C19.4439 24.2602 17.4464 25.33 15.307 25.33H13.399C9.86462 25.33 7 22.4653 7 18.9309V13.5984V9.86569C7 8.98262 7.71669 8.26594 8.59975 8.26594C9.48281 8.26594 10.1995 8.98262 10.1995 9.86569" vector-effect="non-scaling-stroke" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/leaf.svg

@@ -0,0 +1,5 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.3889 22.8889C20.774 22.8889 22.3412 14.9427 26 12.8314C24.6679 11.0062 22.9195 9.52502 20.9001 8.51097C18.8807 7.49693 16.6485 6.97924 14.3889 7.0009" stroke="currentColor" vector-effect="non-scaling-stroke" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.3889 22.8889C12.2819 22.8889 10.2612 22.0519 8.77133 20.562C7.28146 19.0721 6.44446 17.0514 6.44446 14.9444C6.44446 12.8374 7.28146 10.8167 8.77133 9.32687C10.2612 7.837 12.2819 7 14.3889 7" stroke="currentColor" vector-effect="non-scaling-stroke" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.9766 14.3735C12.7367 14.7482 10.6012 15.5916 8.70972 16.8483C6.81822 18.1051 5.21332 19.747 4 21.6667" stroke="currentColor" vector-effect="non-scaling-stroke" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/plane.svg

@@ -0,0 +1,3 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.8833 9.15001L20.3083 12.725L22.2583 22.3667C22.3667 22.6917 22.2583 23.125 21.9333 23.3417L21.175 24.1C20.6333 24.6417 19.6583 24.425 19.4417 23.775L16.625 16.5167L12.9417 20.2L13.1583 22.5833C13.1583 22.9083 13.05 23.2333 12.8333 23.45L11.6417 24.6417L9.36668 20.85L5.57501 18.575L6.65835 17.1667C6.87501 16.95 7.20001 16.8417 7.52501 16.8417L9.90835 17.0583L13.5917 13.375L6.22501 10.5583C5.57501 10.2333 5.35835 9.36667 5.90001 8.82501L6.65835 8.06667C6.87501 7.85001 7.30835 7.74167 7.63335 7.74167L17.275 9.69167L20.85 6.11667C21.7167 5.25001 23.0167 5.25001 23.8833 6.11667C24.75 6.98334 24.75 8.28334 23.8833 9.15001Z" stroke="currentColor" vector-effect="non-scaling-stroke" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/sparkle.svg

@@ -0,0 +1,5 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.49996 6.25C9.49996 7.39927 9.04341 8.50147 8.23076 9.31413C7.4181 10.1268 6.3159 10.5833 5.16663 10.5833C6.3159 10.5833 7.4181 11.0399 8.23076 11.8525C9.04341 12.6652 9.49996 13.7674 9.49996 14.9167C9.49996 13.7674 9.95651 12.6652 10.7692 11.8525C11.5818 11.0399 12.684 10.5833 13.8333 10.5833C12.684 10.5833 11.5818 10.1268 10.7692 9.31413C9.95651 8.50147 9.49996 7.39927 9.49996 6.25Z" stroke="currentColor" vector-effect="non-scaling-stroke" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21.4167 19.25C21.4167 17.8134 20.846 16.4356 19.8302 15.4198C18.8143 14.404 17.4366 13.8333 16 13.8333C17.4366 13.8333 18.8143 13.2626 19.8302 12.2468C20.846 11.231 21.4167 9.85322 21.4167 8.41663C21.4167 9.85322 21.9873 11.231 23.0032 12.2468C24.019 13.2626 25.3967 13.8333 26.8333 13.8333C25.3967 13.8333 24.019 14.404 23.0032 15.4198C21.9873 16.4356 21.4167 17.8134 21.4167 19.25Z" stroke="currentColor" stroke-linecap="round" vector-effect="non-scaling-stroke" stroke-linejoin="round"/>
+<path d="M13.8333 17.625C13.8333 18.7743 13.3768 19.8765 12.5641 20.6891C11.7515 21.5018 10.6493 21.9583 9.5 21.9583C10.6493 21.9583 11.7515 22.4149 12.5641 23.2275C13.3768 24.0402 13.8333 25.1424 13.8333 26.2917C13.8333 25.1424 14.2899 24.0402 15.1025 23.2275C15.9152 22.4149 17.0174 21.9583 18.1667 21.9583C17.0174 21.9583 15.9152 21.5018 15.1025 20.6891C14.2899 19.8765 13.8333 18.7743 13.8333 17.625Z" stroke="currentColor" vector-effect="non-scaling-stroke" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/components/animations/animations.vue

@@ -41,4 +41,42 @@
     border-bottom-color: $color-gray-3;
   }
 }
+
+@keyframes bounceIn {
+  from,
+  20%,
+  40%,
+  60%,
+  80%,
+  to {
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+
+  0% {
+    opacity: 0;
+    transform: scale3d(0.3, 0.3, 0.3);
+  }
+
+  20% {
+    transform: scale3d(1.1, 1.1, 1.1);
+  }
+
+  40% {
+    transform: scale3d(0.9, 0.9, 0.9);
+  }
+
+  60% {
+    opacity: 1;
+    transform: scale3d(1.03, 1.03, 1.03);
+  }
+
+  80% {
+    transform: scale3d(0.97, 0.97, 0.97);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale3d(1, 1, 1);
+  }
+}
 </style>

package/src/components/emoji-picker/emoji-picker.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="ecs-emoji-picker scrollbar scrollbar-sml" ref="picker" :class="bordered ? 'bordered' : ''" :style="pickerStyles">
+    <ecs-tab-bar>
+      <ecs-tab-button @click="switchTab('all')" :show="activeTab == 'all'" icon="search" aria-label="All Emojis" aria-controls="allCategories" />
+      <ecs-tab-button @click="switchTab('SmileysEmotion')" :show="activeTab == 'SmileysEmotion'" icon="emoji" aria-label="Smileys & Emotion" aria-controls="SmileysEmotion" />
+      <ecs-tab-button @click="switchTab('PeopleBody')" :show="activeTab == 'PeopleBody'" icon="hand" aria-label="People & Body" aria-controls="PeopleBody" />
+      <ecs-tab-button @click="switchTab('AnimalsNature')" :show="activeTab == 'AnimalsNature'" icon="leaf" aria-label="Animals & Nature" aria-controls="AnimalsNature" />
+      <ecs-tab-button @click="switchTab('FoodDrink')" :show="activeTab == 'FoodDrink'" icon="food-drink" aria-label="Food & Drink" aria-controls="FoodDrink" />
+      <ecs-tab-button @click="switchTab('TravelPlaces')" :show="activeTab == 'TravelPlaces'" icon="plane" aria-label="Travel & Places" aria-controls="TravelPlaces" />
+      <ecs-tab-button @click="switchTab('Activities')" :show="activeTab == 'Activities'" icon="basketball" aria-label="Activities" aria-controls="Activities" />
+      <ecs-tab-button @click="switchTab('Objects')" :show="activeTab == 'Objects'" icon="key" aria-label="Objects" aria-controls="Objects" />
+      <ecs-tab-button @click="switchTab('Symbols')" :show="activeTab == 'Symbols'" icon="warning" aria-label="Symbols" aria-controls="Symbols" />
+      <ecs-tab-button @click="switchTab('Flags')" :show="activeTab == 'Flags'" icon="flag" aria-label="Flags" aria-controls="Flags" />
+    </ecs-tab-bar>
+    <div v-if="activeTab == 'all'" class="search">
+      <ecs-input-search v-model="search" :show-clear="showClear" placeholder="Search all emoji" type="subtle" />
+    </div>
+    <ecs-emoji-list @emoji="onEmojiSelected" :search="search" :filter-tab="activeTab" />
+  </div>
+</template>
+
+<script>
+import EcsInputSearch from '../input-search/input-search'
+import EcsTabBar from '../tab-bar/tab-bar'
+import EcsTabButton from '../tab-button/tab-button'
+import EcsEmojiList from './list.vue';
+
+export default {
+  components: {
+    EcsInputSearch,
+    EcsTabBar,
+    EcsTabButton,
+    EcsEmojiList
+  },
+
+  props: {
+    /** Defines the width of the Emoji Picker component. */
+    width: {
+      type: Number,
+      default: 420,
+      validator: (value) => {
+        return value >= 420;
+      }
+    },
+    /** Defines the height of the Emoji Picker component. If not set, the sticky scroll element are bound to the parent scroll container (or window). */
+    height: {
+      type: Number
+    },
+    /** Determines if the Emoji picker should be bordered. */
+    bordered: {
+      type: Boolean
+    }
+  },
+
+  data() {
+    return {
+      search: '',
+      activeTab: 'all'
+    }
+  },
+
+  computed: {
+    showClear() {
+      return this.search.length > 0;
+    },
+
+    conditionalHeight() {
+      return this.bordered ? (this.height || 400) : this.height;
+    },
+
+    pickerStyles() {
+      return {
+        width: `${this.width}px`,
+        height: `${this.conditionalHeight}px`,
+        overflow: this.bordered || this.height ? 'auto' : 'unset'
+      }
+    }
+  },
+
+  methods: {
+    switchTab(tab) {
+      this.activeTab = tab;
+      this.$refs.picker.scrollTop = 0;
+    },
+
+    onEmojiSelected(emoji) {
+      /** Returns an object that contains the selected emoji code and character. */
+      this.$emit('emoji', {
+        code: emoji.codes,
+        char: emoji.char
+      });
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+
+.ecs-emoji-picker{
+  border-radius: 6px;
+  z-index: 1;
+
+  &.bordered{
+    border: 1px solid $color-gray-4;
+
+    .ecs-tab-bar{
+      padding-left: $spacing-5;
+    }
+  }
+}
+
+.search{
+  width: 100%;
+  position: sticky;
+  top: 41px;
+  background: rgba($color-white, .6);
+  padding: $spacing-10;
+  backdrop-filter: blur(24px);
+  box-shadow: 0 1px 0 rgba($color-gray-14, .1);
+  z-index: 2;
+}
+
+.ecs-tab-bar{
+  background: rgba($color-white, .6);
+  backdrop-filter: blur(24px);
+  position: sticky;
+  top: 0;
+  z-index: 3;
+  border-radius: 6px 6px 0 0;
+}
+
+.ecs-tab-button :deep(.icon){
+  width: 24px;
+  height: 24px;
+}
+</style>

package/src/components/emoji-picker/emoji.vue

@@ -0,0 +1,64 @@
+<template>
+  <button 
+    @click="click(id, char)"
+    :id="id"
+    class="emoji">
+    {{ char }}
+</button>
+</template>
+
+<script>
+export default {
+  props: {
+    char: String,
+    id: String,
+  },
+
+  methods: {
+    click(emojiId, emojiChar) {
+      // Emit clicked emoji with id
+      this.$emit('emoji', emojiId, emojiChar);
+
+      // Add class with animation after click, remove after timeout
+      document.getElementById(emojiId).classList.add('clicked');
+      window.setTimeout(() => {
+        document.getElementById(emojiId).classList.remove('clicked');
+      }, 800);
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+
+.emoji{
+  font-size: 24px;
+  cursor: pointer;
+  transition: 0.15s transform, 0.15s background-color;
+  text-align: center;
+  margin: $spacing-10;
+  padding: 0;
+  width: $spacing-40;
+  height: $spacing-40;
+  line-height: $spacing-40;
+  background: $color-gray-2;
+  border-radius: 50%;
+  user-select: none;
+
+  &:focus-visible{
+    outline: 2px solid $color-blue-9;
+    outline-offset: 2px;
+  }
+
+  &:hover{
+    transform: scale(1.1);
+    background: $color-gray-3;
+  }
+
+  &.clicked {
+    animation: bounceIn;
+    animation-duration: .8s;
+  }
+}
+</style>

package/src/components/emoji-picker/list.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="categories" id="allCategories">
+    <div
+      v-for="category in filteredCategories"
+      v-if="filterTab === 'all' || filterTab === sanitize(category)"
+      :key="category"
+      :id="sanitize(category)"
+      class="category">
+      <h2 :style="{top: filterTab === 'all' ? '89px' : '41px'}">{{ category }}</h2>
+      <div class="list">
+        <ecs-emoji
+          v-for="emoji in getEmojiList(emojiArray, category, search)"
+          @emoji="emitEmoji(emoji)"
+          :char="emoji.char"
+          :key="emoji.codes"
+          :id="emoji.codes"
+          :title="emoji.name" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import EcsEmoji from './emoji.vue';
+import emoji from 'emoji.json';
+import searchArray from 'js-search-array';
+
+export default {
+  components: { EcsEmoji },
+
+  props: {
+    search: String,
+    filterTab: String
+  },
+
+  data() {
+    return {
+      // Bind emojiArray as emoji.json list
+      emojiArray: [],
+      categories: [],
+    };
+  },
+
+  computed: {
+    filteredCategories() {
+      return this.categories.filter((category) => {
+        const emojis = this.getEmojiList(this.emojiArray, category, this.search);
+        return emojis.length > 0;
+      });
+    },
+
+    sanitize() {
+      return (str) => str.replace(/[^a-zA-Z0-9]/g, '');
+    }
+  },
+
+  methods: {
+    emitEmoji(emoji) {
+      this.$emit('emoji', emoji);
+    },
+
+    getEmojiList(emojiArray, category, search) {
+      if (search.length < 3) {
+        // Return array with all emojis for category, filter out codes with spaces to remove skin-tone variations from returned list. Allow flags to have skin-tone variations.
+        return emojiArray.filter(
+          (emoji) => emoji.group === category
+        );
+      }
+
+      // Return array with searched emoji for category if length > 3
+      return searchArray(search, emojiArray.filter(
+        (emoji) => emoji.group === category
+      ), 'name');
+    },
+  },
+
+  mounted() {
+    // List of blacklisted emojis
+    const blacklist = new Set(['☺️', '☺', '☹️', '☹', '☠', '❣', '❤', '🕳️', '👁‍🗨️', '👁️‍🗨', '👁‍🗨', '🗨', '🗯️']);
+    // Filter array
+    const filtered = emoji.filter((item) => {
+      if (item.group === 'Flags') {
+        return true;
+      }
+      return !blacklist.has(item.char) && item.group !== 'Component' && !item.codes.includes(' ');
+    })
+    // Set variable with emojis as filtered list
+    this.emojiArray = filtered;
+    // Get list of categories
+    this.categories = [...new Set(filtered.map((emoji) => emoji.group))];
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+
+.list{
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+
+  &:after{
+    content: '';
+    flex: auto;
+  }
+
+  button{
+    display: inline-block;
+  }
+}
+
+.category{
+  content-visibility: auto;
+
+  h2{
+    font-size: $type-scale-2-font-size;
+    line-height: $type-scale-2-line-height;
+    color: $color-gray-10;
+    background: rgba($color-white, .9);
+    backdrop-filter: blur(24px);
+    padding: $spacing-5 $spacing-10;
+    position: sticky;
+    z-index: 1;
+  }
+}
+</style>

package/src/components/input-search/input-search.vue

@@ -89,6 +89,8 @@
 
       iconSize() {
         if(this.size === 'sml') {
+          return '20px'
+        } else if(this.size === 'md') {
           return '24px'
         } else {
           return '30px'
@@ -148,16 +150,10 @@
   .icon{
     position: absolute;
     top: 50%;
-    left: 0;
+    left: 4px;
     transform: translateY(-50%);
     pointer-events: none;
   }
-
-  &-lg{
-    .icon{
-      left: 4px;
-    }
-  }
 }
 
 .ecs-search-input{

package/src/components/modal/modal.vue

@@ -17,7 +17,7 @@
           <!-- @slot Slot for the modal footer content. -->
           <slot name="footer"></slot>
         </div>
-        <div v-if="$slots.dialog" class="ecs-modal-inner-dialog" :style="{ 'top': innerDialogOffset + 'px' }" :class="innerDialog ? 'open' : ''">
+        <div v-if="$slots.dialog" class="ecs-modal-inner-dialog" :class="innerDialog ? 'open' : ''">
           <!-- @slot Slot for dialogs that should render _within_ the modal. -->
           <slot name="dialog"></slot>
           <transition name="fade">
@@ -62,11 +62,6 @@
       innerDialog: {
         type: Boolean,
         default: false
-      },
-      /** Allows to adjust the top offset of the inner dialog area (e.g. for dynamic header heights). */
-      innerDialogOffset: {
-        type: Number,
-        default: 48
       }
     },
 
@@ -191,9 +186,7 @@
 
 .ecs-modal-inner-dialog{
   position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  inset: 0;
   z-index: 3;
   display: none;
   overflow: hidden;
@@ -201,10 +194,11 @@
   &:before{
     content: "";
     position: absolute;
-    height: 3px;
+    height: $spacing-10;
     left: 0px;
     right: 0px;
-    top: 0px;
+    top: -4px;
+    border-radius: 100%;
     z-index: 2;
     background: linear-gradient(180deg, rgba(32, 33, 39, 0.12) 0%, rgba(32, 33, 39, 0) 100%);
     transition: .3s;

package/src/components/tab-button/tab-button.vue

@@ -3,10 +3,12 @@
     :class="[
       subtab ? `ecs-tab-button-child` : '',
       show ? `show` : '',
-      badge ? `ecs-tab-button-badge` : '']"
+      badge ? `ecs-tab-button-badge` : '',
+      !$slots.default && icon ? `icon-only` : '', ]"
     :disabled="disabled"
     :aria-selected="show ? 'true' : 'false'"
     :aria-controls="ariaControls"
+    :aria-label="ariaLabel"
     role="tab"
     ref="tabButton"
     @click="handleClick">
@@ -68,6 +70,10 @@
       /** The ID of the tab panel that is controlled by this button. Always pass an ID to improve accessibility. */
       ariaControls: {
         type: String
+      },
+      /** The label of the tab button, in case the default slot contains no text, or no meaningful description of the tab content. Always pass a label to improve accessibility. */
+      ariaLabel: {
+        type: String
       }
     },
 
@@ -81,6 +87,10 @@
       if (!this.ariaControls || this.ariaControls.trim() === '') {
         console.warn('Warning: ariaControls must be provided on tab buttons, to improve accessibility.');
       }
+
+      if (!this.$slots.default && (!this.ariaLabel || this.ariaLabel.trim() === '')) {
+        console.warn('Warning: ariaLabel must be provided on tab buttons without text, to improve accessibility.');
+      }
     },
 
     beforeUnmount() {
@@ -240,8 +250,12 @@
         border-radius: $border-radius-x-small 2px 0 0;
       }
 
-      &:last-child{
-        margin-right: 0;
+      &.icon-only{
+        margin-right: $spacing-10;
+
+        .icon{
+          margin: 0 -4px;
+        }
       }
 
       .icon{
@@ -256,6 +270,10 @@
       .hover{
         inset: 6px 0;
       }
+
+      &:last-child{
+        margin-right: 0;
+      }
     }
   }
 

package/src/stories/Changelog.stories.mdx

@@ -6,6 +6,13 @@ import { Meta } from '@storybook/addon-docs/blocks';
   Changelog
 </h1>
 
+## Version 7.3.0 (14 June 2023)
+
+### Features
+
+- Added 8 additional icons
+- Added new EmojiPicker component
+
 ## Version 7.2.8 (8 June 2023)
 
 ### Features

package/src/stories/emoji-picker/emoji-picker.stories.js

@@ -0,0 +1,25 @@
+import EcsEmojiPicker from '@components/emoji-picker/emoji-picker';
+
+export default {
+  title: 'Input/Emoji Picker',
+  component: EcsEmojiPicker
+};
+
+export const emojiPicker = () => ({
+  components: { EcsEmojiPicker },
+  data() {
+    return {
+      emojis: '',
+    };
+  },
+  methods: {
+    onEmojiSelected(emoji) {
+      this.emojis += emoji.char;
+    }
+  },
+  template: `
+  <div>
+    <span>Emojis: {{ emojis }}</span>
+    <ecs-emoji-picker @emoji="onEmojiSelected" bordered />
+  </div>`,
+});

package/src/stories/tabs/tab-button.stories.js

@@ -20,6 +20,7 @@ export const standardRow = () => ({
                 <ecs-tab-button show>Settings</ecs-tab-button>
                 <ecs-tab-button badge>Calendar</ecs-tab-button>
                 <ecs-tab-button>Versions</ecs-tab-button>
+                <ecs-tab-button icon="calendar"></ecs-tab-button>
               </ecs-tab-bar>`,
 });