@limetech/lime-elements 36.0.0-next.9 → 36.1.0-dev.1

package/dist/collection/components/progress-flow/progress-flow-item/progress-flow-item.css

@@ -67,7 +67,6 @@
   font-size: 0.875rem;
 }
 .step.disabled {
-  opacity: 0.75;
   cursor: not-allowed;
 }
 .step.disabled.readonly {
@@ -159,24 +158,38 @@
   z-index: 2;
 }
 
-.step:after {
+.step:before, .step:after {
   pointer-events: none;
   box-sizing: border-box;
   z-index: 2;
   position: absolute;
   right: var(--selected-indicator-right);
-  background-color: var(--step-divider-color);
-  width: 0.375rem;
-  height: 0.375rem;
   border-radius: 50%;
-  opacity: 0.7;
 }
-.last .step:after {
+.last .step:before, .last .step:after {
   right: 0.5rem;
 }
 
-.flow-item:not(.off-progress-item) .step.selected:after {
+.flow-item:not(.off-progress-item) .step.selected:before, .flow-item:not(.off-progress-item) .step.selected:after {
+  content: "";
+  width: 0.375rem;
+  height: 0.375rem;
+}
+.flow-item:not(.off-progress-item) .step.selected:before {
+  background-color: var(--step-divider-color);
+  opacity: 0.7;
+}
+.flow-item:not(.off-progress-item) .step.disabled:before, .flow-item:not(.off-progress-item) .step.disabled:after {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+.flow-item:not(.off-progress-item) .step.disabled:after {
   content: "";
+  background-image: url("data:image/svg+xml;charset=utf-8, <svg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg' xml:space='preserve' fill-rule='evenodd' clip-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2'><path fill='rgb(127,127,127)' d='M32.18 13.711c0-2.207-1.793-4-4.002-4H11.821c-2.208 0-4 1.793-4 4V28.29a4 4 0 0 0 4 4h16.357a4.002 4.002 0 0 0 4.001-4V13.711Z'/><path fill='rgb(127,127,127)' d='M11.211 9.758V7.673A7.489 7.489 0 0 1 18.696.188h2.608a7.489 7.489 0 0 1 7.485 7.485v2.085h-3V7.673a4.488 4.488 0 0 0-4.485-4.485h-2.608a4.488 4.488 0 0 0-4.485 4.485v2.085h-3Z'/></svg>");
+  background-size: 90%;
+  background-repeat: no-repeat;
+  background-position: center;
+  mix-blend-mode: multiply;
 }
 
 .step {

package/dist/collection/components/progress-flow/progress-flow-item/progress-flow-item.js

@@ -1,24 +1,15 @@
-import { Component, Element, Event, h, Prop, } from '@stencil/core';
+import { h, } from '@stencil/core';
 /**
  * @private
  */
 export class ProgressFlowItem {
   constructor() {
-    /**
-     * The flow item that should be rendered
-     */
-    this.item = null;
-    /**
-     * True if the flow item should be disabled
-     */
-    this.disabled = false;
-    /**
-     * True if the flow item should be readonly
-     */
-    this.readonly = false;
     this.handleClick = () => {
       this.interact.emit();
     };
+    this.item = null;
+    this.disabled = false;
+    this.readonly = false;
   }
   render() {
     var _a;
@@ -31,10 +22,7 @@ export class ProgressFlowItem {
           selected: (_a = this.item) === null || _a === void 0 ? void 0 : _a.selected,
           disabled: this.isDisabled(),
           readonly: this.readonly,
-        }, onClick: this.handleClick, disabled: this.isDisabled() },
-        this.renderIcon(),
-        h("span", { class: "text" }, this.item.text),
-        this.renderDivider()),
+        }, onClick: this.handleClick, disabled: this.isDisabled() }, this.renderIcon(), h("span", { class: "text" }, this.item.text), this.renderDivider()),
       this.renderSecondaryText(),
     ];
   }
@@ -68,86 +56,94 @@ export class ProgressFlowItem {
     return h("div", { class: "divider" });
   }
   static get is() { return "limel-progress-flow-item"; }
-  static get originalStyleUrls() { return {
-    "$": ["progress-flow-item.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["progress-flow-item.css"]
-  }; }
-  static get properties() { return {
-    "item": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "FlowItem",
-        "resolved": "FlowItem",
-        "references": {
-          "FlowItem": {
-            "location": "import",
-            "path": "../progress-flow.types"
+  static get originalStyleUrls() {
+    return {
+      "$": ["progress-flow-item.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["progress-flow-item.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "item": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "FlowItem",
+          "resolved": "FlowItem",
+          "references": {
+            "FlowItem": {
+              "location": "import",
+              "path": "../progress-flow.types"
+            }
           }
-        }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The flow item that should be rendered"
+        },
+        "defaultValue": "null"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The flow item that should be rendered"
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "True if the flow item should be disabled"
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "defaultValue": "null"
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "True if the flow item should be disabled"
-      },
-      "attribute": "disabled",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "readonly": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "True if the flow item should be readonly"
-      },
-      "attribute": "readonly",
-      "reflect": false,
-      "defaultValue": "false"
-    }
-  }; }
-  static get events() { return [{
-      "method": "interact",
-      "name": "interact",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Fired when clicking on the flow item"
-      },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
+      "readonly": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "True if the flow item should be readonly"
+        },
+        "attribute": "readonly",
+        "reflect": false,
+        "defaultValue": "false"
       }
-    }]; }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "interact",
+        "name": "interact",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fired when clicking on the flow item"
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
   static get elementRef() { return "element"; }
 }

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

@@ -1,4 +1,4 @@
-import { Component, Element, Event, h, Prop, } from '@stencil/core';
+import { h, } from '@stencil/core';
 /**
  * @exampleComponent limel-example-progress-flow-basic
  * @exampleComponent limel-example-progress-flow-secondary-text
@@ -10,25 +10,6 @@ import { Component, Element, Event, h, Prop, } from '@stencil/core';
  */
 export class ProgressFlow {
   constructor() {
-    /**
-     * What flow items to render
-     */
-    this.flowItems = [];
-    /**
-     * Set to `true` to disable the progress flow.
-     * Use `disabled` to indicate that the component can normally be interacted
-     * with, but is currently disabled. This tells the user that if certain
-     * requirements are met, the field may become enabled again.
-     */
-    this.disabled = false;
-    /**
-     * Disables the progress flow when `true`.
-     * This does not visualize the component that much differently.
-     * But since the component does not provide any feedback that users can
-     * interact with the component, it makes it perfect for illustrative and
-     * informative porpuses.
-     */
-    this.readonly = false;
     this.renderRegularFlowItem = (item, index, array) => {
       return (h("limel-progress-flow-item", { class: {
           'flow-item': true,
@@ -52,6 +33,9 @@ export class ProgressFlow {
         this.change.emit(flowItem);
       }
     };
+    this.flowItems = [];
+    this.disabled = false;
+    this.readonly = false;
   }
   componentDidRender() {
     this.scrollToSelectedItem();
@@ -107,91 +91,99 @@ export class ProgressFlow {
   }
   static get is() { return "limel-progress-flow"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["progress-flow.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["progress-flow.css"]
-  }; }
-  static get properties() { return {
-    "flowItems": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "FlowItem[]",
-        "resolved": "FlowItem[]",
-        "references": {
-          "FlowItem": {
-            "location": "import",
-            "path": "./progress-flow.types"
+  static get originalStyleUrls() {
+    return {
+      "$": ["progress-flow.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["progress-flow.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "flowItems": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "FlowItem[]",
+          "resolved": "FlowItem[]",
+          "references": {
+            "FlowItem": {
+              "location": "import",
+              "path": "./progress-flow.types"
+            }
           }
-        }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "What flow items to render"
+        },
+        "defaultValue": "[]"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "What flow items to render"
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to `true` to disable the progress flow.\nUse `disabled` to indicate that the component can normally be interacted\nwith, but is currently disabled. This tells the user that if certain\nrequirements are met, the field may become enabled again."
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "defaultValue": "[]"
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to `true` to disable the progress flow.\nUse `disabled` to indicate that the component can normally be interacted\nwith, but is currently disabled. This tells the user that if certain\nrequirements are met, the field may become enabled again."
-      },
-      "attribute": "disabled",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "readonly": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Disables the progress flow when `true`.\nThis does not visualize the component that much differently.\nBut since the component does not provide any feedback that users can\ninteract with the component, it makes it perfect for illustrative and\ninformative porpuses."
-      },
-      "attribute": "readonly",
-      "reflect": false,
-      "defaultValue": "false"
-    }
-  }; }
-  static get events() { return [{
-      "method": "change",
-      "name": "change",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Fired when a new value has been selected from the progress flow"
-      },
-      "complexType": {
-        "original": "FlowItem",
-        "resolved": "FlowItem",
-        "references": {
-          "FlowItem": {
-            "location": "import",
-            "path": "./progress-flow.types"
+      "readonly": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Disables the progress flow when `true`.\nThis does not visualize the component that much differently.\nBut since the component does not provide any feedback that users can\ninteract with the component, it makes it perfect for illustrative and\ninformative porpuses."
+        },
+        "attribute": "readonly",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "change",
+        "name": "change",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fired when a new value has been selected from the progress flow"
+        },
+        "complexType": {
+          "original": "FlowItem",
+          "resolved": "FlowItem",
+          "references": {
+            "FlowItem": {
+              "location": "import",
+              "path": "./progress-flow.types"
+            }
           }
         }
-      }
-    }]; }
+      }];
+  }
   static get elementRef() { return "element"; }
 }

package/dist/collection/components/select/select.css

@@ -1726,6 +1726,10 @@
   left: 1rem;
 }
 
+.mdc-select__dropdown-icon-graphic {
+  transition: transform 0.2s ease;
+}
+
 .limel-select__selected-option {
   display: flex;
   align-items: center;
@@ -1774,7 +1778,8 @@
   outline: none;
 }
 .limel-select .limel-select-trigger:focus-visible {
-  box-shadow: var(--shadow-depth-8-focused) !important;
+  outline: none;
+  box-shadow: var(--shadow-depth-8-focused);
 }
 .limel-select .limel-select-trigger .mdc-floating-label {
   color: rgba(var(--contrast-1200), 1);
@@ -1786,15 +1791,6 @@
   font-size: 0.875rem;
   transform: translateY(-2.171875rem) scale(0.75);
 }
-.limel-select .mdc-select__dropdown-icon {
-  transition: box-shadow 0.2s ease;
-  border-radius: 50%;
-  background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='10' height='5' viewBox='7 10 10 5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' opacity='.54' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat 50%;
-  position: relative;
-  bottom: unset;
-  margin-left: 0;
-  margin-right: 0.25rem;
-}
 .limel-select .limel-select-trigger,
 .limel-select .limel-select__selected-option {
   width: 100%;
@@ -1822,7 +1818,10 @@
   color: var(--mdc-theme-primary);
 }
 .limel-select:not(.mdc-select--disabled) .limel-select-trigger.limel-select--focused .mdc-select__dropdown-icon {
-  color: var(--mdc-theme-primary);
+  fill: var(--mdc-theme-primary);
+}
+.limel-select:not(.mdc-select--disabled) .limel-select-trigger.limel-select--focused .mdc-select__dropdown-icon-graphic {
+  transform: rotate(-180deg);
 }
 .limel-select.limel-select--required .mdc-floating-label::after {
   content: "*";