@limetech/lime-elements 35.0.0-next.7 → 35.0.0

package/dist/collection/components/switch/switch.js

@@ -24,9 +24,9 @@ export class Switch {
      */
     this.value = false;
     this.fieldId = createRandomString();
-    this.onChange = (event) => {
+    this.handleClick = (event) => {
       event.stopPropagation();
-      this.change.emit(event.target.checked);
+      this.change.emit(!this.value);
     };
   }
   connectedCallback() {
@@ -48,25 +48,31 @@ export class Switch {
   }
   render() {
     return [
-      h("div", { class: {
+      h("button", { id: this.fieldId, class: {
           'mdc-switch': true,
-          'mdc-switch--disabled': this.disabled || this.readonly,
           'lime-switch--readonly': this.readonly,
-        } },
+          'mdc-switch--unselected': !this.value,
+          'mdc-switch--selected': this.value,
+        }, type: "button", role: "switch", "aria-checked": this.value, disabled: this.disabled || this.readonly, onClick: this.handleClick },
         h("div", { class: "mdc-switch__track" }),
-        h("div", { class: "mdc-switch__thumb-underlay" },
-          h("div", { class: "mdc-switch__thumb" },
-            h("input", { type: "checkbox", class: "mdc-switch__native-control", id: this.fieldId, role: "switch", onChange: this.onChange, disabled: this.disabled || this.readonly, checked: this.value })))),
+        h("div", { class: "mdc-switch__handle-track" },
+          h("div", { class: "mdc-switch__handle" },
+            h("div", { class: "mdc-switch__shadow" },
+              h("div", { class: "mdc-elevation-overlay" })),
+            h("div", { class: "mdc-switch__ripple" }),
+            h("div", { class: "mdc-switch__icons" },
+              h("svg", { class: "mdc-switch__icon mdc-switch__icon--on", viewBox: "0 0 24 24" },
+                h("path", { d: "M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z" })),
+              h("svg", { class: "mdc-switch__icon mdc-switch__icon--off", viewBox: "0 0 24 24" },
+                h("path", { d: "M20 13H4v-2h16v2z" })))))),
       h("label", { class: `${this.disabled || this.readonly ? 'disabled' : ''}`, htmlFor: this.fieldId }, this.label),
     ];
   }
-  valueWatcher(newValue, oldValue) {
+  valueWatcher(newValue) {
     if (!this.mdcSwitch) {
       return;
     }
-    if (newValue !== oldValue) {
-      this.mdcSwitch.checked = newValue;
-    }
+    this.mdcSwitch.selected = newValue;
   }
   static get is() { return "limel-switch"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/tab-bar/tab-bar.css

@@ -192,17 +192,6 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  * THE SOFTWARE.
  */
-.mdc-tab-indicator {
-  display: flex;
-  position: absolute;
-  top: 0;
-  left: 0;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  z-index: 1;
-}
 .mdc-tab-indicator .mdc-tab-indicator__content--underline {
   border-color: #26a69a;
   /* @alternate */
@@ -221,6 +210,18 @@
   font-size: 34px;
 }
 
+.mdc-tab-indicator {
+  display: flex;
+  position: absolute;
+  top: 0;
+  left: 0;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 1;
+}
+
 .mdc-tab-indicator__content {
   transform-origin: left;
   opacity: 0;
@@ -282,10 +283,46 @@
   text-transform: none;
   /* @alternate */
   text-transform: var(--mdc-typography-button-text-transform, none);
+  position: relative;
+}
+.mdc-tab .mdc-tab__text-label {
+  color: rgba(0, 0, 0, 0.6);
+}
+.mdc-tab .mdc-tab__icon {
+  color: rgba(0, 0, 0, 0.54);
+  fill: currentColor;
+}
+
+.mdc-tab__content {
+  position: relative;
+}
+
+.mdc-tab__icon {
+  width: 24px;
+  height: 24px;
+  font-size: 24px;
+}
+
+.mdc-tab--active .mdc-tab__text-label {
+  color: #26a69a;
+  /* @alternate */
+  color: var(--mdc-theme-primary, #26a69a);
+}
+.mdc-tab--active .mdc-tab__icon {
+  color: #26a69a;
+  /* @alternate */
+  color: var(--mdc-theme-primary, #26a69a);
+  fill: currentColor;
+}
+
+.mdc-tab {
+  background: none;
+}
+
+.mdc-tab {
+  min-width: 90px;
   padding-right: 24px;
   padding-left: 24px;
-  min-width: 90px;
-  position: relative;
   display: flex;
   flex: 1 0 auto;
   justify-content: center;
@@ -295,20 +332,12 @@
   padding-bottom: 0;
   border: none;
   outline: none;
-  background: none;
   text-align: center;
   white-space: nowrap;
   cursor: pointer;
   -webkit-appearance: none;
   z-index: 1;
 }
-.mdc-tab .mdc-tab__text-label {
-  color: rgba(0, 0, 0, 0.6);
-}
-.mdc-tab .mdc-tab__icon {
-  color: rgba(0, 0, 0, 0.54);
-  fill: currentColor;
-}
 .mdc-tab::-moz-focus-inner {
   padding: 0;
   border: 0;
@@ -319,7 +348,6 @@
 }
 
 .mdc-tab__content {
-  position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -336,9 +364,6 @@
 
 .mdc-tab__icon {
   transition: 150ms color linear;
-  width: 24px;
-  height: 24px;
-  font-size: 24px;
   z-index: 2;
 }
 
@@ -352,17 +377,6 @@
   padding-bottom: 4px;
 }
 
-.mdc-tab--active .mdc-tab__text-label {
-  color: #26a69a;
-  /* @alternate */
-  color: var(--mdc-theme-primary, #26a69a);
-}
-.mdc-tab--active .mdc-tab__icon {
-  color: #26a69a;
-  /* @alternate */
-  color: var(--mdc-theme-primary, #26a69a);
-  fill: currentColor;
-}
 .mdc-tab--active .mdc-tab__text-label,
 .mdc-tab--active .mdc-tab__icon {
   transition-delay: 100ms;
@@ -370,15 +384,21 @@
 
 .mdc-tab:not(.mdc-tab--stacked) .mdc-tab__icon + .mdc-tab__text-label {
   /* @noflip */
+  /*rtl:ignore*/
   padding-left: 8px;
   /* @noflip */
+  /*rtl:ignore*/
   padding-right: 0;
 }
 [dir=rtl] .mdc-tab:not(.mdc-tab--stacked) .mdc-tab__icon + .mdc-tab__text-label, .mdc-tab:not(.mdc-tab--stacked) .mdc-tab__icon + .mdc-tab__text-label[dir=rtl] {
+  /*rtl:begin:ignore*/
   /* @noflip */
+  /*rtl:ignore*/
   padding-left: 0;
   /* @noflip */
+  /*rtl:ignore*/
   padding-right: 8px;
+  /*rtl:end:ignore*/
 }
 
 @keyframes mdc-ripple-fg-radius-in {
@@ -442,6 +462,7 @@
 .mdc-tab.mdc-ripple-upgraded .mdc-tab__ripple::after {
   top: 0;
   /* @noflip */
+  /*rtl:ignore*/
   left: 0;
   transform: scale(0);
   transform-origin: center center;
@@ -449,6 +470,7 @@
 .mdc-tab.mdc-ripple-upgraded--unbounded .mdc-tab__ripple::after {
   top: var(--mdc-ripple-top, 0);
   /* @noflip */
+  /*rtl:ignore*/
   left: var(--mdc-ripple-left, 0);
 }
 .mdc-tab.mdc-ripple-upgraded--foreground-activation .mdc-tab__ripple::after {
@@ -462,6 +484,7 @@
 .mdc-tab .mdc-tab__ripple::after {
   top: calc(50% - 100%);
   /* @noflip */
+  /*rtl:ignore*/
   left: calc(50% - 100%);
   width: 200%;
   height: 200%;
@@ -587,19 +610,10 @@
   flex: 1 0 auto;
 }
 
-.mdc-tab__icon {
-  margin-right: 0.5rem;
-}
-
 .mdc-tab-indicator .mdc-tab-indicator__content {
   border: none;
 }
 
-.mdc-tab--active .mdc-ripple-upgraded--background-focused:before {
-  background-color: transparent;
-  transition: background-color 1s ease;
-}
-
 .mdc-tab__ripple {
   box-sizing: border-box;
   border-radius: 0.625rem;
@@ -615,12 +629,15 @@
 .mdc-tab {
   border-radius: 0;
   letter-spacing: normal;
-}
-
-.mdc-tab {
+  padding-right: 1.25rem;
+  padding-left: 1.25rem;
+  min-width: 2.5rem;
   background-color: transparent;
   flex: 0 0 auto;
 }
+.mdc-tab:not(.mdc-tab--active) {
+  --badge-background-color: rgb(var(--contrast-600));
+}
 .mdc-tab:not(.mdc-tab--active):after {
   content: "";
   display: block;
@@ -660,4 +677,16 @@
 }
 .mdc-tab--active:after {
   right: -0.75rem;
+}
+.mdc-tab--active .mdc-ripple-upgraded--background-focused:before {
+  background-color: transparent;
+  transition: background-color 1s ease;
+}
+
+.mdc-tab__content {
+  gap: 0.375rem;
+}
+
+.mdc-tab__text-label {
+  padding-left: 0 !important;
 }