@limetech/lime-elements 36.3.0-next.8 → 36.3.0

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!
  *
@@ -103,8 +111,7 @@
   width: 100%;
   height: 100%;
   top: 0;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   left: 0;
 }
 .mdc-button::-moz-focus-inner {
@@ -122,11 +129,9 @@
   pointer-events: none;
 }
 .mdc-button .mdc-button__icon {
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   margin-left: 0;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   margin-right: 8px;
   display: inline-block;
   position: relative;
@@ -134,11 +139,9 @@
 }
 [dir=rtl] .mdc-button .mdc-button__icon, .mdc-button .mdc-button__icon[dir=rtl] {
   /*rtl:begin:ignore*/
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   margin-left: 8px;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   margin-right: 0;
   /*rtl:end:ignore*/
 }
@@ -156,20 +159,16 @@
 }
 
 .mdc-button__label + .mdc-button__icon {
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   margin-left: 8px;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   margin-right: 0;
 }
 [dir=rtl] .mdc-button__label + .mdc-button__icon, .mdc-button__label + .mdc-button__icon[dir=rtl] {
   /*rtl:begin:ignore*/
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   margin-left: 0;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   margin-right: 8px;
   /*rtl:end:ignore*/
 }
@@ -290,16 +289,14 @@ svg.mdc-button__icon {
 }
 .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after {
   top: 0;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   left: 0;
   transform: scale(0);
   transform-origin: center center;
 }
 .mdc-button.mdc-ripple-upgraded--unbounded .mdc-button__ripple::after {
   top: var(--mdc-ripple-top, 0);
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   left: var(--mdc-ripple-left, 0);
 }
 .mdc-button.mdc-ripple-upgraded--foreground-activation .mdc-button__ripple::after {
@@ -312,8 +309,7 @@ svg.mdc-button__icon {
 .mdc-button .mdc-button__ripple::before,
 .mdc-button .mdc-button__ripple::after {
   top: calc(50% - 100%);
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   left: calc(50% - 100%);
   width: 200%;
   height: 200%;
@@ -740,20 +736,16 @@ svg.mdc-button__icon {
 .mdc-button--raised .mdc-button__icon,
 .mdc-button--unelevated .mdc-button__icon,
 .mdc-button--outlined .mdc-button__icon {
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   margin-left: -4px;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   margin-right: 8px;
 }
 [dir=rtl] .mdc-button--raised .mdc-button__icon, [dir=rtl] .mdc-button--unelevated .mdc-button__icon, [dir=rtl] .mdc-button--outlined .mdc-button__icon, .mdc-button--raised .mdc-button__icon[dir=rtl], .mdc-button--unelevated .mdc-button__icon[dir=rtl], .mdc-button--outlined .mdc-button__icon[dir=rtl] {
   /*rtl:begin:ignore*/
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   margin-left: 8px;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   margin-right: -4px;
   /*rtl:end:ignore*/
 }
@@ -761,20 +753,16 @@ svg.mdc-button__icon {
 .mdc-button--raised .mdc-button__label + .mdc-button__icon,
 .mdc-button--unelevated .mdc-button__label + .mdc-button__icon,
 .mdc-button--outlined .mdc-button__label + .mdc-button__icon {
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   margin-left: 8px;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   margin-right: -4px;
 }
 [dir=rtl] .mdc-button--raised .mdc-button__label + .mdc-button__icon, [dir=rtl] .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, [dir=rtl] .mdc-button--outlined .mdc-button__label + .mdc-button__icon, .mdc-button--raised .mdc-button__label + .mdc-button__icon[dir=rtl], .mdc-button--unelevated .mdc-button__label + .mdc-button__icon[dir=rtl], .mdc-button--outlined .mdc-button__label + .mdc-button__icon[dir=rtl] {
   /*rtl:begin:ignore*/
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   margin-left: -4px;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   margin-right: 8px;
   /*rtl:end:ignore*/
 }
@@ -803,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);
@@ -954,7 +943,8 @@ button.just-failed {
 }
 :host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded) limel-icon,
 :host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded) limel-spinner,
-:host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded) svg {
+:host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded) svg,
+:host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded) .mdc-button__icon {
   transition: all 0.3s ease;
   transition-delay: 0.3s;
   opacity: 0;

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;
 }
@@ -72,8 +80,7 @@
   position: absolute;
   top: 50%;
   height: 48px;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   left: 50%;
   width: 48px;
   transform: translate(-50%, -50%);
@@ -171,16 +178,14 @@
 }
 .mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded .mdc-deprecated-chip-trailing-action__ripple::after {
   top: 0;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   left: 0;
   transform: scale(0);
   transform-origin: center center;
 }
 .mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded--unbounded .mdc-deprecated-chip-trailing-action__ripple::after {
   top: var(--mdc-ripple-top, 0);
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   left: var(--mdc-ripple-left, 0);
 }
 .mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded--foreground-activation .mdc-deprecated-chip-trailing-action__ripple::after {
@@ -193,8 +198,7 @@
 .mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__ripple::before,
 .mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__ripple::after {
   top: calc(50% - 50%);
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   left: calc(50% - 50%);
   width: 100%;
   height: 100%;
@@ -202,8 +206,7 @@
 .mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded .mdc-deprecated-chip-trailing-action__ripple::before,
 .mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded .mdc-deprecated-chip-trailing-action__ripple::after {
   top: var(--mdc-ripple-top, calc(50% - 50%));
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   left: var(--mdc-ripple-left, calc(50% - 50%));
   width: var(--mdc-ripple-fg-size, 100%);
   height: var(--mdc-ripple-fg-size, 100%);
@@ -285,39 +288,31 @@
 }
 
 .mdc-deprecated-chip-trailing-action {
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   margin-left: 4px;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   margin-right: -4px;
 }
 [dir=rtl] .mdc-deprecated-chip-trailing-action, .mdc-deprecated-chip-trailing-action[dir=rtl] {
   /*rtl:begin:ignore*/
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   margin-left: -4px;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   margin-right: 4px;
   /*rtl:end:ignore*/
 }
 
 .mdc-chip__icon--trailing {
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   margin-left: 4px;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   margin-right: -4px;
 }
 [dir=rtl] .mdc-chip__icon--trailing, .mdc-chip__icon--trailing[dir=rtl] {
   /*rtl:begin:ignore*/
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   margin-left: -4px;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   margin-right: 4px;
   /*rtl:end:ignore*/
 }
@@ -382,20 +377,16 @@
 }
 .mdc-chip.mdc-chip--selected .mdc-chip__checkmark,
 .mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden) {
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   margin-left: -4px;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   margin-right: 4px;
 }
 [dir=rtl] .mdc-chip.mdc-chip--selected .mdc-chip__checkmark, [dir=rtl] .mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden), .mdc-chip.mdc-chip--selected .mdc-chip__checkmark[dir=rtl], .mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden)[dir=rtl] {
   /*rtl:begin:ignore*/
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   margin-left: 4px;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   margin-right: -4px;
   /*rtl:end:ignore*/
 }
@@ -404,8 +395,7 @@
   width: 100%;
   height: 100%;
   top: 0;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   left: 0;
 }
 .mdc-chip::-moz-focus-inner {
@@ -566,16 +556,14 @@
 }
 .mdc-chip.mdc-ripple-upgraded .mdc-chip__ripple::after {
   top: 0;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   left: 0;
   transform: scale(0);
   transform-origin: center center;
 }
 .mdc-chip.mdc-ripple-upgraded--unbounded .mdc-chip__ripple::after {
   top: var(--mdc-ripple-top, 0);
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   left: var(--mdc-ripple-left, 0);
 }
 .mdc-chip.mdc-ripple-upgraded--foreground-activation .mdc-chip__ripple::after {
@@ -588,8 +576,7 @@
 .mdc-chip .mdc-chip__ripple::before,
 .mdc-chip .mdc-chip__ripple::after {
   top: calc(50% - 100%);
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   left: calc(50% - 100%);
   width: 200%;
   height: 200%;
@@ -703,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%;
@@ -740,6 +728,11 @@
 .mdc-chip label {
   cursor: pointer;
   transition: color 0.2s ease;
+  display: flex;
+  align-items: center;
+}
+.mdc-chip label:has(> limel-badge) .mdc-chip__text {
+  padding-right: 0.25rem;
 }
 .mdc-chip input[type=radio] {
   width: 0;
@@ -800,4 +793,13 @@
   cursor: not-allowed;
   pointer-events: none;
   opacity: 0.4;
+}
+
+limel-badge {
+  margin-right: 0.25rem;
+  pointer-events: none;
+}
+
+.mdc-chip:not(.mdc-chip--selected) {
+  --badge-background-color: rgb(var(--contrast-200));
 }

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

@@ -1,4 +1,4 @@
-import { h } from '@stencil/core';
+import { h, } from '@stencil/core';
 import { createRandomString } from '../../util/random-string';
 /**
  * A button group control is a linear set of two or more buttons.
@@ -33,11 +33,18 @@ import { createRandomString } from '../../util/random-string';
  * @exampleComponent limel-example-button-group-icons
  * @exampleComponent limel-example-button-group
  * @exampleComponent limel-example-button-group-mix
+ * @exampleComponent limel-example-button-group-badges
  * @exampleComponent limel-example-button-group-composite
  */
 export class ButtonGroup {
   constructor() {
     this.radioGroupName = createRandomString();
+    this.setSelectedButton = () => {
+      var _a;
+      this.selectedButtonId = (_a = this.value.find((button) => {
+        return button.selected;
+      })) === null || _a === void 0 ? void 0 : _a.id;
+    };
     this.value = [];
     this.disabled = false;
     this.selectedButtonId = undefined;
@@ -46,10 +53,7 @@ export class ButtonGroup {
     this.renderContent = this.renderContent.bind(this);
   }
   componentWillLoad() {
-    var _a;
-    this.selectedButtonId = (_a = this.value.find((button) => {
-      return button.selected;
-    })) === null || _a === void 0 ? void 0 : _a.id;
+    this.setSelectedButton();
   }
   render() {
     const classes = {
@@ -67,7 +71,7 @@ export class ButtonGroup {
       'mdc-chip': true,
       'mdc-chip--selected': this.isButtonChecked(button),
     };
-    return (h("div", { class: classes, role: "row" }, h("span", { role: "gridcell" }, h("input", { type: "radio", name: this.radioGroupName, checked: this.isButtonChecked(button), id: buttonId, onChange: this.onChange }), h("label", { htmlFor: buttonId }, this.renderContent(button)))));
+    return (h("div", { class: classes, role: "row" }, h("span", { role: "gridcell" }, h("input", { type: "radio", name: this.radioGroupName, checked: this.isButtonChecked(button), id: buttonId, onChange: this.onChange }), h("label", { htmlFor: buttonId }, this.renderContent(button), this.renderBadge(button)))));
   }
   renderContent(button) {
     if (button.icon) {
@@ -90,6 +94,12 @@ export class ButtonGroup {
       h("limel-tooltip", { elementId: iconId, label: button.title }),
     ];
   }
+  renderBadge(button) {
+    if (!button.badge) {
+      return;
+    }
+    return h("limel-badge", { label: button.badge });
+  }
   onChange(event) {
     event.stopPropagation();
     const target = event.target;
@@ -100,6 +110,9 @@ export class ButtonGroup {
     });
     this.change.emit(button);
   }
+  valueChanged() {
+    this.setSelectedButton();
+  }
   static get is() { return "limel-button-group"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
@@ -183,4 +196,10 @@ export class ButtonGroup {
         }
       }];
   }
+  static get watchers() {
+    return [{
+        "propName": "value",
+        "methodName": "valueChanged"
+      }];
+  }
 }

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

@@ -0,0 +1,77 @@
+/**
+ * @prop --callout-text-color: Text color of the component. Defaults to `--contrast-1100`.
+ * @prop --callout-background-color: Background color of the component. Defaults to `--contrast-300`.
+ * @prop --callout-color: Color used in the UI to add more contextual meaning about the type of the information. This color is different based on the chosen `type`, but you can override it using this prop.
+*/
+:host(limel-callout) {
+  display: flex;
+  border-radius: 0.5rem;
+  overflow: hidden;
+  color: var(--callout-text-color, rgb(var(--contrast-1100)));
+}
+
+:host([type=note]) {
+  --limel-callout-tint-color: var(
+      --callout-color,
+      rgb(var(--color-gray-default))
+  );
+}
+
+:host([type=important]) {
+  --limel-callout-tint-color: var(
+      --callout-color,
+      rgb(var(--color-sky-default))
+  );
+}
+
+:host([type=tip]) {
+  --limel-callout-tint-color: var(
+      --callout-color,
+      rgb(var(--color-green-default))
+  );
+}
+
+:host([type=caution]) {
+  --limel-callout-tint-color: var(
+      --callout-color,
+      rgb(var(--color-orange-light))
+  );
+}
+
+:host([type=warning]) {
+  --limel-callout-tint-color: var(
+      --callout-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: var(--callout-background-color, rgb(var(--contrast-300)));
+}
+
+.heading {
+  margin: 0;
+  font-size: 1rem;
+}

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

@@ -0,0 +1,27 @@
+import translate from '../../global/translations';
+const calloutIcons = {
+  note: 'info',
+  important: 'exclamation_mark',
+  tip: 'idea',
+  caution: 'high_priority',
+  warning: 'error',
+};
+export function getIcon(icon, type = 'note') {
+  var _a;
+  if (icon) {
+    return icon;
+  }
+  return (_a = calloutIcons[type]) !== null && _a !== void 0 ? _a : calloutIcons.note;
+}
+export function getHeading(heading, type = 'note', language = 'en') {
+  if (heading) {
+    return heading;
+  }
+  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,139 @@
+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
+ * @exampleComponent limel-example-callout-rich-content
+ * @exampleComponent limel-example-callout-custom-heading
+ * @exampleComponent limel-example-callout-custom-icon
+ * @exampleComponent limel-example-callout-styles
+ * @exampleComponent limel-example-callout-composite
+ */
+export class Callout {
+  constructor() {
+    this.heading = undefined;
+    this.icon = undefined;
+    this.type = 'note';
+    this.language = 'en';
+  }
+  render() {
+    return [
+      h("div", { class: "side", role: "presentation" }, h("limel-icon", { name: getIcon(this.icon, this.type) })),
+      h("div", { class: "main" }, h("h1", { class: "heading" }, getHeading(this.heading, 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 {
+      "heading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Heading of the callout, which can be used to override the\ndefault heading which is displayed based on the chosen `type`."
+        },
+        "attribute": "heading",
+        "reflect": true
+      },
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Icon of the callout, which can be used to override the\ndefault icon which is displayed based on the chosen `type`."
+        },
+        "attribute": "icon",
+        "reflect": true
+      },
+      "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 default headings for supported languages."
+        },
+        "attribute": "language",
+        "reflect": false,
+        "defaultValue": "'en'"
+      }
+    };
+  }
+}