@limetech/lime-elements 36.3.0-next.31 → 36.3.0-next.33

package/dist/collection/collection-manifest.json

@@ -4,6 +4,7 @@
     "./components/banner/banner.js",
     "./components/button/button.js",
     "./components/button-group/button-group.js",
+    "./components/callout/callout.js",
     "./components/checkbox/checkbox.js",
     "./components/chip-set/chip-set.js",
     "./components/circular-progress/circular-progress.js",

package/dist/collection/components/badge/badge.css

@@ -64,6 +64,14 @@
   );
 }
 
+/**
+ * Note! This file is exported to `dist/scss/` in the published
+ * node module, for consumer projects to import.
+ * That means this file cannot import from any file that isn't
+ * also exported, keeping the same relative path.
+ *
+ * Or, just don't import anything, that works too.
+ */
 /**
  * @prop --badge-background-color: badge background color
  * @prop --badge-text-color: badge text color

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

@@ -4,6 +4,14 @@
  * Nothing in this file may output any CSS
  * without being explicitly called by outside code.
  */
+/**
+ * Note! This file is exported to `dist/scss/` in the published
+ * node module, for consumer projects to import.
+ * That means this file cannot import from any file that isn't
+ * also exported, keeping the same relative path.
+ *
+ * Or, just don't import anything, that works too.
+ */
 /*
  * This file is imported into every component that uses MDC!
  *
@@ -783,6 +791,7 @@ button.mdc-button {
 }
 button.mdc-button:not(:disabled) {
   transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  cursor: pointer;
   color: var(--mdc-theme-on-surface);
   background-color: var(--lime-elevated-surface-background-color);
   box-shadow: var(--button-shadow-normal);

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

@@ -64,6 +64,14 @@
   );
 }
 
+/**
+ * Note! This file is exported to `dist/scss/` in the published
+ * node module, for consumer projects to import.
+ * That means this file cannot import from any file that isn't
+ * also exported, keeping the same relative path.
+ *
+ * Or, just don't import anything, that works too.
+ */
 .mdc-touch-target-wrapper {
   display: inline;
 }
@@ -682,6 +690,7 @@
 */
 .mdc-chip {
   transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  cursor: pointer;
   color: var(--mdc-theme-on-surface);
   background-color: transparent;
   max-width: 100%;

package/dist/collection/components/callout/callout.css

@@ -0,0 +1,57 @@
+:host(limel-callout) {
+  display: flex;
+  border-radius: 0.5rem;
+  overflow: hidden;
+  color: rgb(var(--contrast-1100));
+}
+
+:host([type=note]) {
+  --limel-callout-tint-color: rgb(var(--color-gray-default));
+}
+
+:host([type=important]) {
+  --limel-callout-tint-color: rgb(var(--color-sky-default));
+}
+
+:host([type=tip]) {
+  --limel-callout-tint-color: rgb(var(--color-green-default));
+}
+
+:host([type=caution]) {
+  --limel-callout-tint-color: rgb(var(--color-orange-light));
+}
+
+:host([type=warning]) {
+  --limel-callout-tint-color: rgb(var(--color-red-dark));
+}
+
+.side {
+  padding: 0.25rem;
+  position: relative;
+}
+.side:before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  opacity: 0.2;
+  background-color: var(--limel-callout-tint-color);
+}
+.side limel-icon {
+  width: 1.5rem;
+  color: var(--limel-callout-tint-color);
+  margin-top: 0.0625rem;
+}
+
+.main {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0.25rem 0.5rem 0.5rem 0.5rem;
+  background-color: rgb(var(--contrast-300));
+}
+
+.heading {
+  margin: 0;
+  font-size: 1rem;
+}

package/dist/collection/components/callout/callout.helpers.js

@@ -0,0 +1,21 @@
+import translate from '../../global/translations';
+const calloutIcons = {
+  note: 'info',
+  important: 'exclamation_mark',
+  tip: 'idea',
+  caution: 'high_priority',
+  warning: 'error',
+};
+export function getIcon(type = 'info') {
+  var _a;
+  return (_a = calloutIcons[type]) !== null && _a !== void 0 ? _a : calloutIcons.note;
+}
+export function getHeading(type = 'note', language = 'en') {
+  const key = `callout.${type}`;
+  try {
+    return translate.get(key, language);
+  }
+  catch (error) {
+    return translate.get(key, 'en');
+  }
+}

package/dist/collection/components/callout/callout.js

@@ -0,0 +1,98 @@
+import { h } from '@stencil/core';
+import { getHeading, getIcon } from './callout.helpers';
+/**
+ * Callouts—also known as Admonitions—are useful for including supportive or
+ * special content within a large piece of text, or even inside a user
+ * interface.
+ *
+ * When used in a document or text based user interface, the callout attracts
+ * the reader's attention to a particular piece of information, without
+ * significantly interrupting their flow of reading the document.
+ *
+ * In a user interface, a callout is more intrusive to the end-user. Still, it
+ * could be a good choice when you intend to slightly disturb the user's
+ * attention, and challenge them to pay extra attention to the information
+ * presented. In such cases, a callout should not be used as a static and
+ * constantly present element of the UI. Rather, it should be displayed when
+ * something unusual or remarkable demands the user's attention.
+ *
+ * @exampleComponent limel-example-callout-note
+ * @exampleComponent limel-example-callout-important
+ * @exampleComponent limel-example-callout-tip
+ * @exampleComponent limel-example-callout-caution
+ * @exampleComponent limel-example-callout-warning
+ */
+export class Callout {
+  constructor() {
+    this.type = 'note';
+    this.language = 'en';
+  }
+  render() {
+    return [
+      h("div", { class: "side", role: "presentation" }, h("limel-icon", { name: getIcon(this.type) })),
+      h("div", { class: "main" }, h("h1", { class: "heading" }, getHeading(this.type, this.language)), h("slot", null)),
+    ];
+  }
+  static get is() { return "limel-callout"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["callout.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["callout.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "CalloutType",
+          "resolved": "\"caution\" | \"important\" | \"note\" | \"tip\" | \"warning\"",
+          "references": {
+            "CalloutType": {
+              "location": "import",
+              "path": "./callout.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Defines how the component is visualized, for example\nwhich heading, color or icon is used in its user interface."
+        },
+        "attribute": "type",
+        "reflect": true,
+        "defaultValue": "'note'"
+      },
+      "language": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Languages",
+          "resolved": "\"da\" | \"de\" | \"en\" | \"fi\" | \"fr\" | \"nb\" | \"nl\" | \"no\" | \"sv\"",
+          "references": {
+            "Languages": {
+              "location": "import",
+              "path": "@limetech/lime-elements"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Defines the language for translations.\nWill translate the headings for supported languages."
+        },
+        "attribute": "language",
+        "reflect": false,
+        "defaultValue": "'en'"
+      }
+    };
+  }
+}

package/dist/collection/components/callout/callout.types.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/chip-set/chip-set.css

@@ -64,6 +64,14 @@
   );
 }
 
+/**
+ * Note! This file is exported to `dist/scss/` in the published
+ * node module, for consumer projects to import.
+ * That means this file cannot import from any file that isn't
+ * also exported, keeping the same relative path.
+ *
+ * Or, just don't import anything, that works too.
+ */
 .mdc-notched-outline {
   display: flex;
   position: absolute;
@@ -2484,6 +2492,7 @@
 
 .mdc-chip {
   transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  cursor: pointer;
   color: var(--mdc-theme-on-surface);
   background-color: var(--lime-elevated-surface-background-color);
   box-shadow: var(--button-shadow-normal);
@@ -2674,6 +2683,7 @@ limel-icon.mdc-chip__icon.mdc-chip__icon--leading {
 
 .clear-all-button {
   transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  cursor: pointer;
   color: var(--mdc-theme-on-surface);
   background-color: rgb(var(--contrast-900));
   cursor: pointer;

package/dist/collection/components/circular-progress/circular-progress.css

@@ -4,6 +4,14 @@
  * Nothing in this file may output any CSS
  * without being explicitly called by outside code.
  */
+/**
+ * Note! This file is exported to `dist/scss/` in the published
+ * node module, for consumer projects to import.
+ * That means this file cannot import from any file that isn't
+ * also exported, keeping the same relative path.
+ *
+ * Or, just don't import anything, that works too.
+ */
 /*
  * This file is imported into every component that uses MDC!
  *

package/dist/collection/components/code-editor/code-editor.css

@@ -444,11 +444,13 @@ span.CodeMirror-selectedtext { background: none; }
   content: "\25B8";
 }
 
-/*
- * This file is imported into every component!
+/**
+ * Note! This file is exported to `dist/scss/` in the published
+ * node module, for consumer projects to import.
+ * That means this file cannot import from any file that isn't
+ * also exported, keeping the same relative path.
  *
- * Nothing in this file may output any CSS
- * without being explicitly called by outside code.
+ * Or, just don't import anything, that works too.
  */
 /**
  * @prop --code-editor-max-height: Defines how tall the code editor can get before content becomes scrollable, defaults to `10rem`.
@@ -666,6 +668,7 @@ span.CodeMirror-selectedtext { background: none; }
 .cm-s-lime .CodeMirror-foldmarker {
   position: relative;
   transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  cursor: pointer;
   color: transparent;
   background-color: var(--lime-elevated-surface-background-color);
   box-shadow: var(--button-shadow-normal);

package/dist/collection/components/collapsible-section/collapsible-section.css

@@ -64,6 +64,14 @@
   );
 }
 
+/**
+ * Note! This file is exported to `dist/scss/` in the published
+ * node module, for consumer projects to import.
+ * That means this file cannot import from any file that isn't
+ * also exported, keeping the same relative path.
+ *
+ * Or, just don't import anything, that works too.
+ */
 /**
  * @prop --closed-header-background-color: background color for header when closed
  * @prop --open-header-background-color: background color for header when open

package/dist/collection/components/color-picker/color-picker-palette.css

@@ -582,11 +582,13 @@
   grid-template-columns: repeat(20, 1fr) auto;
 }
 
-/*
- * This file is imported into every component!
+/**
+ * Note! This file is exported to `dist/scss/` in the published
+ * node module, for consumer projects to import.
+ * That means this file cannot import from any file that isn't
+ * also exported, keeping the same relative path.
  *
- * Nothing in this file may output any CSS
- * without being explicitly called by outside code.
+ * Or, just don't import anything, that works too.
  */
 .picker-trigger[style="--background:lime-magenta;"]:after,
 .chosen-color-preview[style="--background:lime-magenta;"]:after {
@@ -666,8 +668,8 @@
 
 .picker-trigger {
   border-radius: 0.5rem;
-  cursor: pointer;
   transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  cursor: pointer;
   color: var(--mdc-theme-on-surface);
   background-color: var(--lime-elevated-surface-background-color);
   box-shadow: var(--button-shadow-normal);

package/dist/collection/components/color-picker/color-picker.css

@@ -1,8 +1,10 @@
-/*
- * This file is imported into every component!
+/**
+ * Note! This file is exported to `dist/scss/` in the published
+ * node module, for consumer projects to import.
+ * That means this file cannot import from any file that isn't
+ * also exported, keeping the same relative path.
  *
- * Nothing in this file may output any CSS
- * without being explicitly called by outside code.
+ * Or, just don't import anything, that works too.
  */
 .picker-trigger[style="--background:lime-magenta;"]:after,
 .chosen-color-preview[style="--background:lime-magenta;"]:after {
@@ -82,8 +84,8 @@
 
 .picker-trigger {
   border-radius: 0.5rem;
-  cursor: pointer;
   transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  cursor: pointer;
   color: var(--mdc-theme-on-surface);
   background-color: var(--lime-elevated-surface-background-color);
   box-shadow: var(--button-shadow-normal);

package/dist/collection/components/date-picker/flatpickr-adapter/flatpickr-adapter.css

@@ -64,6 +64,14 @@
   );
 }
 
+/**
+ * Note! This file is exported to `dist/scss/` in the published
+ * node module, for consumer projects to import.
+ * That means this file cannot import from any file that isn't
+ * also exported, keeping the same relative path.
+ *
+ * Or, just don't import anything, that works too.
+ */
 :root {
   --mdc-theme-primary: #26a69a;
   --mdc-theme-secondary: #575756;
@@ -634,6 +642,7 @@ svg {
 }
 .dayContainer .flatpickr-day {
   transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  cursor: pointer;
   color: var(--mdc-theme-on-surface);
   background-color: transparent;
 }
@@ -759,6 +768,7 @@ svg {
 .arrowUp,
 .arrowDown {
   transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  cursor: pointer;
   color: var(--mdc-theme-on-surface);
   background-color: transparent;
   border-radius: 0.25rem;
@@ -829,9 +839,9 @@ svg {
 .datepicker-quarter,
 .datepicker-year {
   transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  cursor: pointer;
   color: var(--mdc-theme-on-surface);
   background-color: transparent;
-  cursor: pointer;
   min-width: 0;
   text-align: center;
 }

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

@@ -1,3 +1,11 @@
+/**
+ * Note! This file is exported to `dist/scss/` in the published
+ * node module, for consumer projects to import.
+ * That means this file cannot import from any file that isn't
+ * also exported, keeping the same relative path.
+ *
+ * Or, just don't import anything, that works too.
+ */
 /*
  * This file is imported into every component!
  *
@@ -14,8 +22,8 @@
   all: unset;
   isolation: isolate;
   position: relative;
-  cursor: pointer;
   transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  cursor: pointer;
   color: var(--limel-dock-item-text-color);
   background-color: var(--dock-background-color);
   box-sizing: border-box;

package/dist/collection/components/dock/dock.css

@@ -1,3 +1,11 @@
+/**
+ * Note! This file is exported to `dist/scss/` in the published
+ * node module, for consumer projects to import.
+ * That means this file cannot import from any file that isn't
+ * also exported, keeping the same relative path.
+ *
+ * Or, just don't import anything, that works too.
+ */
 /*
  * This file is imported into every component!
  *
@@ -86,9 +94,9 @@ nav::-webkit-scrollbar {
   all: unset;
   box-sizing: border-box;
   transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  cursor: pointer;
   color: var(--mdc-theme-on-surface);
   background-color: transparent;
-  cursor: pointer;
   display: flex;
   justify-content: center;
   align-items: center;

package/dist/collection/components/form/form.css

@@ -604,11 +604,13 @@
   display: none;
 }
 
-/*
- * This file is imported into every component!
+/**
+ * Note! This file is exported to `dist/scss/` in the published
+ * node module, for consumer projects to import.
+ * That means this file cannot import from any file that isn't
+ * also exported, keeping the same relative path.
  *
- * Nothing in this file may output any CSS
- * without being explicitly called by outside code.
+ * Or, just don't import anything, that works too.
  */
 .limel-form-row--layout {
   --limel-form-row-border-radius: 0.375rem;

package/dist/collection/components/header/header.css

@@ -1,3 +1,11 @@
+/**
+ * Note! This file is exported to `dist/scss/` in the published
+ * node module, for consumer projects to import.
+ * That means this file cannot import from any file that isn't
+ * also exported, keeping the same relative path.
+ *
+ * Or, just don't import anything, that works too.
+ */
 /*
  * This file is imported into every component!
  *

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

@@ -1,3 +1,11 @@
+/**
+ * Note! This file is exported to `dist/scss/` in the published
+ * node module, for consumer projects to import.
+ * That means this file cannot import from any file that isn't
+ * also exported, keeping the same relative path.
+ *
+ * Or, just don't import anything, that works too.
+ */
 /*
  * This file is imported into every component!
  *
@@ -238,6 +246,7 @@
 
 .mdc-icon-button {
   transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  cursor: pointer;
   color: var(--mdc-theme-on-surface);
   background-color: var(--icon-background-color, transparent);
   display: inline-flex;

package/dist/collection/components/info-tile/info-tile.css

@@ -1,8 +1,10 @@
-/*
- * This file is imported into every component!
+/**
+ * Note! This file is exported to `dist/scss/` in the published
+ * node module, for consumer projects to import.
+ * That means this file cannot import from any file that isn't
+ * also exported, keeping the same relative path.
  *
- * Nothing in this file may output any CSS
- * without being explicitly called by outside code.
+ * Or, just don't import anything, that works too.
  */
 /**
 * @prop --info-tile-border-radius: defines the radius of corners of the info-tile. Defaults to `1rem`
@@ -82,10 +84,10 @@ a {
 }
 a.is-clickable {
   transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  cursor: pointer;
   color: var(--mdc-theme-on-surface);
   background-color: var(--info-tile-background-color, var(--lime-elevated-surface-background-color));
   box-shadow: var(--button-shadow-normal);
-  cursor: pointer;
 }
 a.is-clickable:hover {
   color: var(--mdc-theme-on-surface);

package/dist/collection/components/input-field/input-field.css

@@ -64,6 +64,14 @@
   );
 }
 
+/**
+ * Note! This file is exported to `dist/scss/` in the published
+ * node module, for consumer projects to import.
+ * That means this file cannot import from any file that isn't
+ * also exported, keeping the same relative path.
+ *
+ * Or, just don't import anything, that works too.
+ */
 .mdc-notched-outline {
   display: flex;
   position: absolute;
@@ -2039,6 +2047,7 @@ input.mdc-text-field__input::placeholder {
 }
 input.mdc-text-field__input::-webkit-search-cancel-button {
   transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  cursor: pointer;
   color: var(--mdc-theme-on-surface);
   background-color: rgb(var(--contrast-900));
   cursor: pointer;

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

@@ -5,6 +5,14 @@
  * Nothing in this file may output any CSS
  * without being explicitly called by outside code.
  */
+/**
+ * Note! This file is exported to `dist/scss/` in the published
+ * node module, for consumer projects to import.
+ * That means this file cannot import from any file that isn't
+ * also exported, keeping the same relative path.
+ *
+ * Or, just don't import anything, that works too.
+ */
 /*
  * This file is imported into every component that uses MDC!
  *
@@ -5835,11 +5843,13 @@ a.mdc-list-item {
   border-color: var(--mdc-checkbox-unchecked-color);
 }
 
-/*
- * This file is imported into every component!
+/**
+ * Note! This file is exported to `dist/scss/` in the published
+ * node module, for consumer projects to import.
+ * That means this file cannot import from any file that isn't
+ * also exported, keeping the same relative path.
  *
- * Nothing in this file may output any CSS
- * without being explicitly called by outside code.
+ * Or, just don't import anything, that works too.
  */
 :host(.has-striped-rows) .mdc-deprecated-list {
   border: 1px solid rgb(var(--contrast-400));
@@ -5856,6 +5866,7 @@ a.mdc-list-item {
 
 :host(.has-interactive-items) .mdc-deprecated-list-item:not(.mdc-deprecated-list-item--disabled) {
   transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  cursor: pointer;
   color: var(--mdc-theme-on-surface);
   background-color: transparent;
 }

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

@@ -11,6 +11,14 @@
  * Nothing in this file may output any CSS
  * without being explicitly called by outside code.
  */
+/**
+ * Note! This file is exported to `dist/scss/` in the published
+ * node module, for consumer projects to import.
+ * That means this file cannot import from any file that isn't
+ * also exported, keeping the same relative path.
+ *
+ * Or, just don't import anything, that works too.
+ */
 /*
  * This file is imported into every component that uses MDC!
  *
@@ -5908,11 +5916,13 @@ a.mdc-list-item {
   border-color: var(--mdc-checkbox-unchecked-color);
 }
 
-/*
- * This file is imported into every component!
+/**
+ * Note! This file is exported to `dist/scss/` in the published
+ * node module, for consumer projects to import.
+ * That means this file cannot import from any file that isn't
+ * also exported, keeping the same relative path.
  *
- * Nothing in this file may output any CSS
- * without being explicitly called by outside code.
+ * Or, just don't import anything, that works too.
  */
 :host(.has-striped-rows) .mdc-deprecated-list {
   border: 1px solid rgb(var(--contrast-400));
@@ -5929,6 +5939,7 @@ a.mdc-list-item {
 
 :host(.has-interactive-items) .mdc-deprecated-list-item:not(.mdc-deprecated-list-item--disabled) {
   transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  cursor: pointer;
   color: var(--mdc-theme-on-surface);
   background-color: transparent;
 }