@limetech/lime-elements 36.1.0-next.9 → 36.1.0

package/dist/collection/components/linear-progress/linear-progress.js

@@ -1,5 +1,5 @@
 import { MDCLinearProgress } from '@material/linear-progress';
-import { Component, Element, h, Prop, Watch } from '@stencil/core';
+import { h } from '@stencil/core';
 /**
  * @exampleComponent limel-example-linear-progress
  * @exampleComponent limel-example-linear-progress-color
@@ -7,13 +7,7 @@ import { Component, Element, h, Prop, Watch } from '@stencil/core';
  */
 export class LinearProgress {
   constructor() {
-    /**
-     * The value of the progress bar. Should be between `0` and `1`.
-     */
     this.value = 0;
-    /**
-     * Puts the progress bar in an indeterminate state
-     */
     this.indeterminate = false;
   }
   connectedCallback() {
@@ -40,13 +34,7 @@ export class LinearProgress {
       'mdc-linear-progress': true,
       'mdc-linear-progress--indeterminate': this.indeterminate,
     };
-    return (h("div", { role: "progressbar", class: classList, "aria-label": "Progress Bar", "aria-valuemin": "0", "aria-valuemax": "1", "aria-valuenow": this.value },
-      h("div", { class: "mdc-linear-progress__buffer" },
-        h("div", { class: "mdc-linear-progress__buffer-bar" })),
-      h("div", { class: "mdc-linear-progress__bar mdc-linear-progress__primary-bar" },
-        h("span", { class: "mdc-linear-progress__bar-inner" })),
-      h("div", { class: "mdc-linear-progress__bar mdc-linear-progress__secondary-bar" },
-        h("span", { class: "mdc-linear-progress__bar-inner" }))));
+    return (h("div", { role: "progressbar", class: classList, "aria-label": "Progress Bar", "aria-valuemin": "0", "aria-valuemax": "1", "aria-valuenow": this.value }, h("div", { class: "mdc-linear-progress__buffer" }, h("div", { class: "mdc-linear-progress__buffer-bar" })), h("div", { class: "mdc-linear-progress__bar mdc-linear-progress__primary-bar" }, h("span", { class: "mdc-linear-progress__bar-inner" })), h("div", { class: "mdc-linear-progress__bar mdc-linear-progress__secondary-bar" }, h("span", { class: "mdc-linear-progress__bar-inner" }))));
   }
   watchValue(newValue) {
     if (!this.mdcLinearProgress) {
@@ -56,53 +44,61 @@ export class LinearProgress {
   }
   static get is() { return "limel-linear-progress"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["linear-progress.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["linear-progress.css"]
-  }; }
-  static get properties() { return {
-    "value": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The value of the progress bar. Should be between `0` and `1`."
-      },
-      "attribute": "value",
-      "reflect": false,
-      "defaultValue": "0"
-    },
-    "indeterminate": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Puts the progress bar in an indeterminate state"
+  static get originalStyleUrls() {
+    return {
+      "$": ["linear-progress.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["linear-progress.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "value": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The value of the progress bar. Should be between `0` and `1`."
+        },
+        "attribute": "value",
+        "reflect": false,
+        "defaultValue": "0"
       },
-      "attribute": "indeterminate",
-      "reflect": false,
-      "defaultValue": "false"
-    }
-  }; }
+      "indeterminate": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Puts the progress bar in an indeterminate state"
+        },
+        "attribute": "indeterminate",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
   static get elementRef() { return "host"; }
-  static get watchers() { return [{
-      "propName": "value",
-      "methodName": "watchValue"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "value",
+        "methodName": "watchValue"
+      }];
+  }
 }

package/dist/collection/components/list/list-renderer.js

@@ -61,12 +61,7 @@ export class ListRenderer {
       if (index === this.applyTabIndexToItemAtIndex) {
         attributes.tabindex = '0';
       }
-      return (h("li", Object.assign({ class: classNames, "aria-disabled": item.disabled ? 'true' : 'false', "aria-selected": item.selected ? 'true' : 'false', "data-index": index }, attributes),
-        item.icon ? this.renderIcon(this.config, item) : null,
-        this.getPrimaryComponent(item),
-        this.renderText(item),
-        this.twoLines && this.avatarList ? this.renderDivider() : null,
-        this.renderActionMenu(item.actions)));
+      return (h("li", Object.assign({ class: classNames, "aria-disabled": item.disabled ? 'true' : 'false', "aria-selected": item.selected ? 'true' : 'false', "data-index": index }, attributes), item.icon ? this.renderIcon(this.config, item) : null, this.getPrimaryComponent(item), this.renderText(item), this.twoLines && this.avatarList ? this.renderDivider() : null, this.renderActionMenu(item.actions)));
     };
     this.hasPrimaryComponent = (item) => {
       var _a;
@@ -82,10 +77,7 @@ export class ListRenderer {
       if (this.isSimpleItem(item)) {
         return (h("span", { class: "mdc-deprecated-list-item__text" }, item.text));
       }
-      return (h("div", { class: "mdc-deprecated-list-item__text" },
-        h("div", { class: "mdc-deprecated-list-item__primary-command-text" },
-          h("div", { class: "mdc-deprecated-list-item__primary-text" }, item.text)),
-        h("div", { class: "mdc-deprecated-list-item__secondary-text" }, item.secondaryText)));
+      return (h("div", { class: "mdc-deprecated-list-item__text" }, h("div", { class: "mdc-deprecated-list-item__primary-command-text" }, h("div", { class: "mdc-deprecated-list-item__primary-text" }, item.text)), h("div", { class: "mdc-deprecated-list-item__secondary-text" }, item.secondaryText)));
     };
     this.isSimpleItem = (item) => {
       return !('secondaryText' in item);
@@ -123,8 +115,7 @@ export class ListRenderer {
       if (!actions || actions.length === 0) {
         return;
       }
-      return (h("limel-menu", { class: "mdc-deprecated-list-item__meta", items: actions, openDirection: "left-start" },
-        h("limel-icon-button", { class: "action-menu-trigger", slot: "trigger", icon: "menu_2" })));
+      return (h("limel-menu", { class: "mdc-deprecated-list-item__meta", items: actions, openDirection: "left-start" }, h("limel-icon-button", { class: "action-menu-trigger", slot: "trigger", icon: "menu_2" })));
     };
     this.renderVariantListItem = (config, item, index) => {
       let itemTemplate;

package/dist/collection/components/list/list.css

@@ -3810,9 +3810,14 @@ a.mdc-list-item {
   border-radius: 0.375rem;
 }
 .mdc-deprecated-list .mdc-deprecated-list-item {
+  transition: background-color 0.2s ease;
   box-sizing: border-box;
   z-index: 0;
 }
+.mdc-deprecated-list .mdc-deprecated-list-item:not(.mdc-deprecated-list-item--disabled):hover {
+  background-color: rgb(var(--contrast-300));
+  z-index: 1;
+}
 .mdc-deprecated-list .mdc-deprecated-list-item.mdc-deprecated-list-item--disabled {
   cursor: not-allowed;
 }
@@ -3925,132 +3930,22 @@ a.mdc-list-item {
   margin-right: 0.75rem;
 }
 
-.mdc-deprecated-list-item.mdc-ripple-upgraded {
-  --mdc-ripple-fg-size: 0;
-  --mdc-ripple-left: 0;
-  --mdc-ripple-top: 0;
-  --mdc-ripple-fg-scale: 1;
-  --mdc-ripple-fg-translate-end: 0;
-  --mdc-ripple-fg-translate-start: 0;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  will-change: transform, opacity;
-}
-.mdc-deprecated-list-item.mdc-ripple-upgraded::before, .mdc-deprecated-list-item.mdc-ripple-upgraded::after {
-  position: absolute;
-  border-radius: 50%;
-  opacity: 0;
-  pointer-events: none;
-  content: "";
-}
-.mdc-deprecated-list-item.mdc-ripple-upgraded::before {
-  transition: opacity 15ms linear, background-color 15ms linear;
-  z-index: 1;
-  /* @alternate */
-  z-index: var(--mdc-ripple-z-index, 1);
-}
-.mdc-deprecated-list-item.mdc-ripple-upgraded::after {
-  z-index: 0;
-  /* @alternate */
-  z-index: var(--mdc-ripple-z-index, 0);
-}
-.mdc-deprecated-list-item.mdc-ripple-upgraded.mdc-ripple-upgraded::before {
-  transform: scale(var(--mdc-ripple-fg-scale, 1));
-}
-.mdc-deprecated-list-item.mdc-ripple-upgraded.mdc-ripple-upgraded::after {
-  top: 0;
-  /* @noflip */
-  /*rtl:ignore*/
-  left: 0;
-  transform: scale(0);
-  transform-origin: center center;
-}
-.mdc-deprecated-list-item.mdc-ripple-upgraded.mdc-ripple-upgraded--unbounded::after {
-  top: var(--mdc-ripple-top, 0);
-  /* @noflip */
-  /*rtl:ignore*/
-  left: var(--mdc-ripple-left, 0);
-}
-.mdc-deprecated-list-item.mdc-ripple-upgraded.mdc-ripple-upgraded--foreground-activation::after {
-  animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
-}
-.mdc-deprecated-list-item.mdc-ripple-upgraded.mdc-ripple-upgraded--foreground-deactivation::after {
-  animation: mdc-ripple-fg-opacity-out 150ms;
-  transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
-}
-.mdc-deprecated-list-item.mdc-ripple-upgraded::before, .mdc-deprecated-list-item.mdc-ripple-upgraded::after {
-  top: calc(50% - 100%);
-  /* @noflip */
-  /*rtl:ignore*/
-  left: calc(50% - 100%);
-  width: 200%;
-  height: 200%;
-}
-.mdc-deprecated-list-item.mdc-ripple-upgraded.mdc-ripple-upgraded::after {
-  width: var(--mdc-ripple-fg-size, 100%);
-  height: var(--mdc-ripple-fg-size, 100%);
-}
-.mdc-deprecated-list-item.mdc-ripple-upgraded::before, .mdc-deprecated-list-item.mdc-ripple-upgraded::after {
-  background-color: #000;
-  /* @alternate */
-  background-color: var(--mdc-ripple-color, #000);
-}
-.mdc-deprecated-list-item.mdc-ripple-upgraded:hover::before, .mdc-deprecated-list-item.mdc-ripple-upgraded.mdc-ripple-surface--hover::before {
-  opacity: 0.04;
-  /* @alternate */
-  opacity: var(--mdc-ripple-hover-opacity, 0.04);
-}
-.mdc-deprecated-list-item.mdc-ripple-upgraded.mdc-ripple-upgraded--background-focused::before, .mdc-deprecated-list-item.mdc-ripple-upgraded:not(.mdc-ripple-upgraded):focus::before {
-  transition-duration: 75ms;
-  opacity: 0.12;
-  /* @alternate */
-  opacity: var(--mdc-ripple-focus-opacity, 0.12);
-}
-.mdc-deprecated-list-item.mdc-ripple-upgraded:not(.mdc-ripple-upgraded)::after {
-  transition: opacity 150ms linear;
-}
-.mdc-deprecated-list-item.mdc-ripple-upgraded:not(.mdc-ripple-upgraded):active::after {
-  transition-duration: 75ms;
-  opacity: 0.12;
-  /* @alternate */
-  opacity: var(--mdc-ripple-press-opacity, 0.12);
-}
-.mdc-deprecated-list-item.mdc-ripple-upgraded.mdc-ripple-upgraded {
-  --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12);
-}
-
-.mdc-deprecated-list-item--selected .mdc-deprecated-list-item__text:before {
-  content: "";
+.mdc-deprecated-list-item.mdc-deprecated-list-item--selected:before {
   background-color: var(--mdc-theme-primary);
-  position: absolute;
-  inset: 0;
   opacity: 0.15;
-  pointer-events: none;
 }
 
-@keyframes fade-out-focus-style {
-  0% {
-    opacity: 0.12;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-:not(.mdc-deprecated-list--non-interactive) > :not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item.mdc-ripple-upgraded--background-focused::before, :not(.mdc-deprecated-list--non-interactive) > :not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item:not(.mdc-ripple-upgraded):focus::before {
-  animation: fade-out-focus-style 1s ease forwards;
+:not(.mdc-deprecated-list--non-interactive) > :not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item:focus {
+  outline: none;
 }
 :not(.mdc-deprecated-list--non-interactive) > :not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item:focus-visible {
+  outline: none;
   box-shadow: var(--shadow-depth-8-focused);
+}
+:not(.mdc-deprecated-list--non-interactive) > :not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item:focus-visible {
   border-radius: 0.375rem;
   z-index: 1;
 }
-:not(.mdc-deprecated-list--non-interactive) > :not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item:focus-visible:before {
-  animation-duration: 0s !important;
-}
-:not(.mdc-deprecated-list--non-interactive) > :not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item:before {
-  transition: opacity, background-color;
-  transition-duration: 0.2s;
-  transition-timing-function: ease;
-}
 
 /*
  * This file is imported into every component!