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

package/dist/collection/components/snackbar/snackbar.js

@@ -1,14 +1,16 @@
 import { MDCSnackbar } from '@material/snackbar';
-import { Component, Element, Event, h, Method, Prop, } from '@stencil/core';
+import { h, } from '@stencil/core';
 import translate from '../../global/translations';
 /**
  * @exampleComponent limel-example-snackbar
  */
 export class Snackbar {
   constructor() {
-    /**
-     * Defines the language for translations.
-     */
+    this.message = undefined;
+    this.timeout = undefined;
+    this.actionText = undefined;
+    this.dismissible = undefined;
+    this.multiline = undefined;
     this.language = 'en';
     this.handleMdcClosing = this.handleMdcClosing.bind(this);
   }
@@ -44,10 +46,7 @@ export class Snackbar {
     return (h("aside", { class: `
                     mdc-snackbar
                     ${this.multiline ? 'mdc-snackbar--stacked' : ''}
-                ` },
-      h("div", { class: "mdc-snackbar__surface", role: "status", "aria-relevant": "additions" },
-        h("div", { class: "mdc-snackbar__label", "aria-atomic": "false" }),
-        this.renderActions(this.actionText, this.dismissible))));
+                ` }, h("div", { class: "mdc-snackbar__surface", role: "status", "aria-relevant": "additions" }, h("div", { class: "mdc-snackbar__label", "aria-atomic": "false" }), this.renderActions(this.actionText, this.dismissible))));
   }
   handleMdcClosing(event) {
     if (event.detail.reason === 'action') {
@@ -61,16 +60,13 @@ export class Snackbar {
     if (!actionText && !dismissible) {
       return;
     }
-    return (h("div", { class: "mdc-snackbar__actions", "aria-atomic": "true" },
-      this.renderActionButton(actionText),
-      this.renderDismissButton(dismissible)));
+    return (h("div", { class: "mdc-snackbar__actions", "aria-atomic": "true" }, this.renderActionButton(actionText), this.renderDismissButton(dismissible)));
   }
   renderActionButton(actionText) {
     if (!actionText) {
       return;
     }
-    return (h("button", { type: "button", class: "mdc-button mdc-snackbar__action" },
-      h("span", { class: "mdc-button__label" }, actionText)));
+    return (h("button", { type: "button", class: "mdc-button mdc-snackbar__action" }, h("span", { class: "mdc-button__label" }, actionText)));
   }
   renderDismissButton(dismissible) {
     if (!dismissible) {
@@ -85,170 +81,180 @@ export class Snackbar {
   }
   static get is() { return "limel-snackbar"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["snackbar.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["snackbar.css"]
-  }; }
-  static get properties() { return {
-    "message": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The text message to display."
-      },
-      "attribute": "message",
-      "reflect": false
-    },
-    "timeout": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The amount of time in milliseconds to show the snackbar."
-      },
-      "attribute": "timeout",
-      "reflect": false
-    },
-    "actionText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The text to display for the action button."
+  static get originalStyleUrls() {
+    return {
+      "$": ["snackbar.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["snackbar.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "message": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The text message to display."
+        },
+        "attribute": "message",
+        "reflect": false
       },
-      "attribute": "action-text",
-      "reflect": false
-    },
-    "dismissible": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "timeout": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The amount of time in milliseconds to show the snackbar."
+        },
+        "attribute": "timeout",
+        "reflect": false
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "True if the snackbar is dismissible, false otherwise"
+      "actionText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The text to display for the action button."
+        },
+        "attribute": "action-text",
+        "reflect": false
       },
-      "attribute": "dismissible",
-      "reflect": false
-    },
-    "multiline": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "dismissible": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "True if the snackbar is dismissible, false otherwise"
+        },
+        "attribute": "dismissible",
+        "reflect": false
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Whether to show the snackbar with space for multiple lines of text"
+      "multiline": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether to show the snackbar with space for multiple lines of text"
+        },
+        "attribute": "multiline",
+        "reflect": false
       },
-      "attribute": "multiline",
-      "reflect": false
-    },
-    "language": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "Languages",
-        "resolved": "\"da\" | \"en\" | \"fi\" | \"nb\" | \"nl\" | \"no\" | \"sv\"",
-        "references": {
-          "Languages": {
-            "location": "import",
-            "path": "@limetech/lime-elements"
+      "language": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Languages",
+          "resolved": "\"da\" | \"en\" | \"fi\" | \"nb\" | \"nl\" | \"no\" | \"sv\"",
+          "references": {
+            "Languages": {
+              "location": "import",
+              "path": "@limetech/lime-elements"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Defines the language for translations."
-      },
-      "attribute": "language",
-      "reflect": false,
-      "defaultValue": "'en'"
-    }
-  }; }
-  static get events() { return [{
-      "method": "action",
-      "name": "action",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the action button is pressed"
-      },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
-      }
-    }, {
-      "method": "hide",
-      "name": "hide",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the snackbar hides itself"
-      },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Defines the language for translations."
+        },
+        "attribute": "language",
+        "reflect": false,
+        "defaultValue": "'en'"
       }
-    }]; }
-  static get methods() { return {
-    "show": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "action",
+        "name": "action",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the action button is pressed"
         },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Show the snackbar",
-        "tags": []
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }, {
+        "method": "hide",
+        "name": "hide",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the snackbar hides itself"
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "show": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Show the snackbar",
+          "tags": []
+        }
       }
-    }
-  }; }
+    };
+  }
   static get elementRef() { return "host"; }
 }

package/dist/collection/components/spinner/spinner.js

@@ -1,4 +1,4 @@
-import { Component, Prop, h } from '@stencil/core';
+import { h } from '@stencil/core';
 /**
  * @exampleComponent limel-example-spinner
  * @exampleComponent limel-example-spinner-color
@@ -6,13 +6,7 @@ import { Component, Prop, h } from '@stencil/core';
  */
 export class Spinner {
   constructor() {
-    /**
-     * Determines the size of the spinner.
-     */
     this.size = 'mini';
-    /**
-     * Gives the spinner the shape of Lime Technologies' logo
-     */
     this.limeBranded = true;
   }
   render() {
@@ -22,88 +16,65 @@ export class Spinner {
   }
   renderSpinner() {
     if (!this.limeBranded) {
-      return (h("g", null,
-        h("circle", { class: "outline", cx: "12", cy: "12", r: "10" }),
-        h("g", { class: "spinner" },
-          h("circle", { class: "color", cx: "12", cy: "12", r: "10" }),
-          h("circle", { class: "color", cx: "12", cy: "12", r: "10" }),
-          h("circle", { class: "color", cx: "12", cy: "12", r: "10" }),
-          h("circle", { class: "color", cx: "12", cy: "12", r: "10" }),
-          h("circle", { class: "color", cx: "12", cy: "12", r: "10" }),
-          h("circle", { class: "color", cx: "12", cy: "12", r: "10" }),
-          h("circle", { class: "color", cx: "12", cy: "12", r: "10" }),
-          h("circle", { class: "color", cx: "12", cy: "12", r: "10" }),
-          h("circle", { class: "color", cx: "12", cy: "12", r: "10" }),
-          h("circle", { class: "color", cx: "12", cy: "12", r: "10" }),
-          h("circle", { class: "color", cx: "12", cy: "12", r: "10" }))));
+      return (h("g", null, h("circle", { class: "outline", cx: "12", cy: "12", r: "10" }), h("g", { class: "spinner" }, h("circle", { class: "color", cx: "12", cy: "12", r: "10" }), h("circle", { class: "color", cx: "12", cy: "12", r: "10" }), h("circle", { class: "color", cx: "12", cy: "12", r: "10" }), h("circle", { class: "color", cx: "12", cy: "12", r: "10" }), h("circle", { class: "color", cx: "12", cy: "12", r: "10" }), h("circle", { class: "color", cx: "12", cy: "12", r: "10" }), h("circle", { class: "color", cx: "12", cy: "12", r: "10" }), h("circle", { class: "color", cx: "12", cy: "12", r: "10" }), h("circle", { class: "color", cx: "12", cy: "12", r: "10" }), h("circle", { class: "color", cx: "12", cy: "12", r: "10" }), h("circle", { class: "color", cx: "12", cy: "12", r: "10" }))));
     }
-    return (h("g", null,
-      h("g", { "clip-path": "url(#mask)" },
-        h("circle", { class: "outline thick", cx: "12", cy: "12", r: "12" }),
-        h("g", { class: "spinner" },
-          h("circle", { class: "color thick", cx: "12", cy: "12", r: "12" }),
-          h("circle", { class: "color thick", cx: "12", cy: "12", r: "12" }),
-          h("circle", { class: "color thick", cx: "12", cy: "12", r: "12" }),
-          h("circle", { class: "color thick", cx: "12", cy: "12", r: "12" }),
-          h("circle", { class: "color thick", cx: "12", cy: "12", r: "12" }),
-          h("circle", { class: "color thick", cx: "12", cy: "12", r: "12" }),
-          h("circle", { class: "color thick", cx: "12", cy: "12", r: "12" }),
-          h("circle", { class: "color thick", cx: "12", cy: "12", r: "12" }),
-          h("circle", { class: "color thick", cx: "12", cy: "12", r: "12" }),
-          h("circle", { class: "color thick", cx: "12", cy: "12", r: "12" }),
-          h("circle", { class: "color thick", cx: "12", cy: "12", r: "12" }))),
-      h("clipPath", { id: "mask" },
-        h("path", { d: "M2.166 11.248C2.166 5.04 7.058 0 13.083 0 19.108 0 24 5.04 24 11.248c0 3.229-1.307 6.548-4.533 9.306-3.908 3.343-9.15 3.8-17.254 3.249-2.405-.164-2.753-.588-1.51-1.533C4.61 19.3 2.165 17.025 2.165 11.248zm3.124 9.834c5.563.227 9.416-.246 12.397-2.76 2.432-2.05 3.482-4.56 3.51-7.074.05-4.613-3.636-8.36-8.114-8.36-4.478 0-8.114 3.746-8.114 8.36 0 2.793.607 4.737.726 6.345.092 1.252.03 2.388-.405 3.49z" }))));
+    return (h("g", null, h("g", { "clip-path": "url(#mask)" }, h("circle", { class: "outline thick", cx: "12", cy: "12", r: "12" }), h("g", { class: "spinner" }, h("circle", { class: "color thick", cx: "12", cy: "12", r: "12" }), h("circle", { class: "color thick", cx: "12", cy: "12", r: "12" }), h("circle", { class: "color thick", cx: "12", cy: "12", r: "12" }), h("circle", { class: "color thick", cx: "12", cy: "12", r: "12" }), h("circle", { class: "color thick", cx: "12", cy: "12", r: "12" }), h("circle", { class: "color thick", cx: "12", cy: "12", r: "12" }), h("circle", { class: "color thick", cx: "12", cy: "12", r: "12" }), h("circle", { class: "color thick", cx: "12", cy: "12", r: "12" }), h("circle", { class: "color thick", cx: "12", cy: "12", r: "12" }), h("circle", { class: "color thick", cx: "12", cy: "12", r: "12" }), h("circle", { class: "color thick", cx: "12", cy: "12", r: "12" }))), h("clipPath", { id: "mask" }, h("path", { d: "M2.166 11.248C2.166 5.04 7.058 0 13.083 0 19.108 0 24 5.04 24 11.248c0 3.229-1.307 6.548-4.533 9.306-3.908 3.343-9.15 3.8-17.254 3.249-2.405-.164-2.753-.588-1.51-1.533C4.61 19.3 2.165 17.025 2.165 11.248zm3.124 9.834c5.563.227 9.416-.246 12.397-2.76 2.432-2.05 3.482-4.56 3.51-7.074.05-4.613-3.636-8.36-8.114-8.36-4.478 0-8.114 3.746-8.114 8.36 0 2.793.607 4.737.726 6.345.092 1.252.03 2.388-.405 3.49z" }))));
   }
   static get is() { return "limel-spinner"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["spinner.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["spinner.css"]
-  }; }
-  static get properties() { return {
-    "size": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "SpinnerSize",
-        "resolved": "\"large\" | \"medium\" | \"mini\" | \"small\" | \"x-small\"",
-        "references": {
-          "SpinnerSize": {
-            "location": "import",
-            "path": "@limetech/lime-elements"
+  static get originalStyleUrls() {
+    return {
+      "$": ["spinner.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["spinner.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "SpinnerSize",
+          "resolved": "\"large\" | \"medium\" | \"mini\" | \"small\" | \"x-small\"",
+          "references": {
+            "SpinnerSize": {
+              "location": "import",
+              "path": "@limetech/lime-elements"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Determines the size of the spinner."
-      },
-      "attribute": "size",
-      "reflect": true,
-      "defaultValue": "'mini'"
-    },
-    "limeBranded": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Determines the size of the spinner."
+        },
+        "attribute": "size",
+        "reflect": true,
+        "defaultValue": "'mini'"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Gives the spinner the shape of Lime Technologies' logo"
-      },
-      "attribute": "lime-branded",
-      "reflect": false,
-      "defaultValue": "true"
-    }
-  }; }
+      "limeBranded": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Gives the spinner the shape of Lime Technologies' logo"
+        },
+        "attribute": "lime-branded",
+        "reflect": false,
+        "defaultValue": "true"
+      }
+    };
+  }
 }

package/dist/collection/components/split-button/split-button.css

@@ -0,0 +1,84 @@
+/*
+ * This file is imported into every component!
+ *
+ * Nothing in this file may output any CSS
+ * without being explicitly called by outside code.
+ */
+:host(limel-split-button.has-menu) {
+  --button-padding-right: 2rem;
+}
+
+:host(limel-split-button) {
+  display: inline-flex;
+  isolation: isolate;
+}
+:host(limel-split-button) * {
+  box-sizing: border-box;
+}
+
+limel-menu {
+  display: flex;
+  justify-content: flex-end;
+  position: relative;
+  z-index: 1;
+  padding: 0.125rem;
+  margin-left: calc(var(--button-padding-right) * -1);
+  width: var(--button-padding-right);
+}
+limel-menu:before {
+  transition: background-color 0.5s ease;
+  content: "";
+  position: absolute;
+  inset: 0.375rem auto 0.375rem 0.6875rem;
+  width: 1px;
+  background-color: currentColor;
+  opacity: 0.2;
+}
+limel-menu:not([disabled]) {
+  color: var(--mdc-theme-primary, rgb(var(--color-teal-default)));
+}
+limel-menu:not([disabled]).primary {
+  color: var(--mdc-theme-on-primary, rgb(var(--color-white)));
+}
+limel-menu[disabled] {
+  color: rgba(var(--contrast-1600), 0.37);
+}
+limel-menu:hover:before, limel-menu:focus-within:before {
+  background-color: transparent;
+}
+
+.menu-trigger {
+  all: unset;
+  text-align: center;
+  font-weight: bold;
+  border-radius: 0.125rem;
+  height: 100%;
+  width: 1rem;
+}
+.menu-trigger:not(:disabled) {
+  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  cursor: pointer;
+}
+.menu-trigger:not(:disabled):hover {
+  box-shadow: var(--button-shadow-hovered);
+}
+.menu-trigger:not(:disabled):active {
+  box-shadow: var(--button-shadow-pressed);
+  transform: translate3d(0, 0.08rem, 0);
+}
+.menu-trigger:not(:disabled):focus {
+  outline: none;
+}
+.menu-trigger:not(:disabled):focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-depth-8-focused);
+}
+.menu-trigger:not(:disabled):focus-visible, .menu-trigger:not(:disabled):hover {
+  background-color: rgb(var(--color-white), 0.1);
+}
+.menu-trigger:before {
+  content: "";
+  position: absolute;
+  inset: -0.25rem;
+  z-index: -1;
+}