Release 2.3.2

.gitignore

@@ -28,6 +28,7 @@ node_modules/
 # Ignore lock
 yarn.lock
 
-#dist/
+dist/*.zip
+
 *storybook.log
 storybook-static

components/chips/_chips.scss → components/chips/chips.css

@@ -18,12 +18,11 @@
   align-items: center;
   user-select: none;
   vertical-align: top;
-
-  &:focus {
-    outline: none;
-    background-color: var(--md-sys-color-primary);
-    color:  var(--md-sys-color-on-primary);
-  }
+}
+.chip:focus {
+  outline: none;
+  background-color: var(--md-sys-color-primary);
+  color: var(--md-sys-color-on-primary);
 }
 
 .chip.outlined {
@@ -62,8 +61,6 @@
   background-color: #8888;
 }
 
-//--------------------------
-
 .chips {
   display: flex;
   gap: 4px;
@@ -72,68 +69,58 @@
   box-shadow: none;
   margin: 0 0 8px 0;
   padding: 4px;
-  // min-height: 45px;
+  /* min-height: 45px; */
   outline: none;
-  transition: all .3s;
-
-  &.focus {
-    border-bottom: 1px solid var(--md-sys-color-primary);
-    box-shadow: 0 1px 0 0 var(--md-sys-color-primary);
-  }
-
-  &.input-field {
-    border-bottom: 1px solid var(--md-sys-color-on-surface-variant);
-
-    &:hover {
-      cursor: text;
-    }
-  }
-
-  input:not([type]):not(.browser-default).input {
-    background: none;
-    border: 0;
-    color: var(--md-sys-color-on-background);
-    display: inline-block;
-    font-size: 16px;
-    // height: 32px;
-    // line-height: 32px;
-    height: 32px;
-    outline: 0;
-    margin: 0;
-    padding: 0;
-    width: 120px;
-    width: fit-content;
-    min-width: 100px;
-    max-width: 200px;
-
-    &:focus {
-      border: 0;
-      box-shadow: none;
-    }
-  }
+  transition: all 0.3s;
+}
+.chips.focus {
+  border-bottom: 1px solid var(--md-sys-color-primary);
+  box-shadow: 0 1px 0 0 var(--md-sys-color-primary);
+}
+.chips.input-field {
+  border-bottom: 1px solid var(--md-sys-color-on-surface-variant);
+}
+.chis input:not([type]):not(.browser-default).input {
+  background: none;
+  border: 0;
+  color: var(--md-sys-color-on-background);
+  display: inline-block;
+  font-size: 16px;
+  /* height: 32px;
+   line-height: 32px; */
+  height: 32px;
+  outline: 0;
+  margin: 0;
+  padding: 0;
+  width: 120px;
+  width: fit-content;
+  min-width: 100px;
+  max-width: 200px;
+}
 
-  // Autocomplete
-  .autocomplete-content {
-    margin-top: 0;
-    margin-bottom: 0;
-  }
+.chis input:not([type]):not(.browser-default).input:focus {
+  border: 0;
+  box-shadow: none;
+}
+.chips.input-field:hover {
+  cursor: text;
+}
+.chips .autocomplete-content {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
-// Form prefix
 .prefix ~ .chips {
   margin-left: 3rem;
   width: 92%;
   width: calc(100% - 3rem);
 }
-
-// Form suffix
 .suffix ~ .chips {
   margin-right: 3rem;
   width: 92%;
   width: calc(100% - 3rem);
 }
-
-.chips:empty ~ label  {
+.chips:empty ~ label {
   font-size: 0.8rem;
   transform: translateY(-140%);
 }

components/tabs/_tabs.scss

@@ -10,6 +10,7 @@
   background-color: var(--md-sys-color-surface);
   margin: 0 auto;
   white-space: nowrap;
+  scrollbar-width: none;
 
   &.tabs-transparent {
     background-color: transparent;
@@ -78,12 +79,15 @@
       flex-direction: column;
       width: 100%;
       height: 100%;
-      min-height: 48px;  //needed for only-icons tabs
+      min-height: 48px; //needed for only-icons tabs
       padding: 0 24px;
       font-size: 14px;
       text-overflow: ellipsis;
+      user-select: none;
       overflow: hidden;
-      transition: color .28s ease, background-color .28s ease;
+      transition:
+        color 0.28s ease,
+        background-color 0.28s ease;
 
       &.active {
         background-color: transparent;

components/tabs/tabs.ts

@@ -119,6 +119,13 @@ export class Tabs extends Component<TabsOptions> {
   _setupEventHandlers() {
     window.addEventListener('resize', this._handleWindowResize);
     this.el.addEventListener('click', this._handleTabClick);
+    // map vertical scrolling to horizontal scrolling because no scrollbar is shown on desktop
+    this.el.addEventListener('wheel', (event) => {
+      if (event.deltaY !== 0) {
+        event.preventDefault();
+        this.el.scrollLeft += event.deltaY * 1;
+      }
+    });
   }
 
   _removeEventHandlers() {
@@ -304,11 +311,11 @@ export class Tabs extends Component<TabsOptions> {
     this._tabWidth = Math.max(this._tabsWidth, this.el.scrollWidth) / this._tabLinks.length;
   }
 
-  _calcRightPos(el) {
+  _calcRightPos(el: HTMLElement) {
     return Math.ceil(this._tabsWidth - el.offsetLeft - el.getBoundingClientRect().width);
   }
 
-  _calcLeftPos(el) {
+  _calcLeftPos(el: HTMLElement) {
     return Math.floor(el.offsetLeft);
   }
 
@@ -321,7 +328,7 @@ export class Tabs extends Component<TabsOptions> {
     this._animateIndicator(this._index);
   }
 
-  _animateIndicator(prevIndex) {
+  _animateIndicator(prevIndex: number) {
     let leftDelay = 0,
       rightDelay = 0;