@limetech/lime-elements 36.3.0-next.2 → 36.3.0-next.20

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

@@ -2591,6 +2591,7 @@
 }
 
 .mdc-text-field__icon {
+  color: rgb(var(--contrast-900));
   flex-shrink: 0;
 }
 
@@ -2668,6 +2669,7 @@
 }
 
 .mdc-text-field__icon {
+  color: rgb(var(--contrast-900));
   width: 1.5rem;
   height: 1.5rem;
 }
@@ -2932,6 +2934,7 @@ limel-icon.mdc-chip__icon.mdc-chip__icon--leading {
 .delimiter {
   opacity: 0.5;
   padding: 0 0.125rem;
+  color: var(--mdc-theme-on-surface);
 }
 
 :host(.is-file-picker.shows-dropzone[readonly]) .mdc-text-field:not(.has-chips) .mdc-notched-outline:before, :host(.is-file-picker.shows-dropzone[readonly]) .mdc-text-field:not(.has-chips) .mdc-notched-outline:after {

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

@@ -662,7 +662,7 @@ export class ChipSet {
         "mutable": false,
         "complexType": {
           "original": "Languages",
-          "resolved": "\"da\" | \"en\" | \"fi\" | \"nb\" | \"nl\" | \"no\" | \"sv\"",
+          "resolved": "\"da\" | \"de\" | \"en\" | \"fi\" | \"fr\" | \"nb\" | \"nl\" | \"no\" | \"sv\"",
           "references": {
             "Languages": {
               "location": "import",

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

@@ -138,6 +138,7 @@ section.open .section__header:hover {
   text-transform: inherit;
   /* @alternate */
   text-transform: var(--mdc-typography-headline2-text-transform, inherit);
+  color: var(--mdc-theme-on-surface);
   justify-self: flex-start;
   padding-right: 0.75rem;
   user-select: none;

package/dist/collection/components/date-picker/date-picker.js

@@ -36,6 +36,7 @@ const nativeFormatForType = {
  * @exampleComponent limel-example-date-picker-formatted
  * @exampleComponent limel-example-date-picker-programmatic-change
  * @exampleComponent limel-example-date-picker-composite
+ * @exampleComponent limel-example-date-picker-custom-formatter
  */
 export class DatePicker {
   constructor() {
@@ -50,6 +51,7 @@ export class DatePicker {
         this.hideCalendar();
       }
     };
+    this.formatValue = (value) => this.dateFormatter.formatDate(value, this.internalFormat);
     this.disabled = false;
     this.readonly = false;
     this.invalid = false;
@@ -61,6 +63,7 @@ export class DatePicker {
     this.type = 'datetime';
     this.format = undefined;
     this.language = 'en';
+    this.formatter = undefined;
     this.formattedValue = undefined;
     this.internalFormat = undefined;
     this.showPortal = false;
@@ -79,7 +82,7 @@ export class DatePicker {
   componentWillLoad() {
     this.useNative = !this.readonly && (isIOSDevice() || isAndroidDevice());
     this.updateInternalFormatAndType();
-    this.formattedValue = this.dateFormatter.formatDate(this.value, this.internalFormat);
+    this.formattedValue = this.formatValue(this.value);
   }
   componentWillUpdate() {
     this.updateInternalFormatAndType();
@@ -97,12 +100,12 @@ export class DatePicker {
     const dropdownZIndex = getComputedStyle(this.host).getPropertyValue('--dropdown-z-index');
     return [
       h("limel-input-field", Object.assign({ disabled: this.disabled, readonly: this.readonly, invalid: this.invalid, label: this.label, placeholder: this.placeholder, helperText: this.helperText, required: this.required, value: this.formattedValue, onFocus: this.showCalendar, onBlur: this.hideCalendar, onClick: this.onInputClick, onChange: this.handleInputElementChange, ref: (el) => (this.textField = el) }, inputProps)),
-      h("limel-portal", { containerId: this.portalId, visible: this.showPortal, containerStyle: { 'z-index': dropdownZIndex } }, h("limel-flatpickr-adapter", { format: this.internalFormat, language: this.language, type: this.type, value: this.value, ref: (el) => (this.datePickerCalendar = el), isOpen: this.showPortal, onChange: this.handleCalendarChange })),
+      h("limel-portal", { containerId: this.portalId, visible: this.showPortal, containerStyle: { 'z-index': dropdownZIndex } }, h("limel-flatpickr-adapter", { format: this.internalFormat, language: this.language, type: this.type, value: this.value, ref: (el) => (this.datePickerCalendar = el), isOpen: this.showPortal, formatter: this.formatValue, onChange: this.handleCalendarChange })),
     ];
   }
   onValueChange(newValue, oldValue) {
     if (newValue !== oldValue && newValue !== this.formattedValue) {
-      this.formattedValue = this.dateFormatter.formatDate(this.value, this.internalFormat);
+      this.formattedValue = this.formatValue(this.value);
     }
   }
   updateInternalFormatAndType() {
@@ -111,6 +114,9 @@ export class DatePicker {
     if (this.useNative) {
       this.internalFormat = this.nativeFormat;
     }
+    else if (this.formatter) {
+      this.formatValue = this.formatter;
+    }
     else if (this.format) {
       this.internalFormat = this.format;
     }
@@ -170,7 +176,7 @@ export class DatePicker {
   }
   handleCalendarChange(event) {
     const date = event.detail;
-    this.formattedValue = this.dateFormatter.formatDate(date, this.internalFormat);
+    this.formattedValue = this.formatValue(date);
     event.stopPropagation();
     if (this.pickerIsAutoClosing()) {
       this.hideCalendar();
@@ -400,7 +406,7 @@ export class DatePicker {
         "mutable": false,
         "complexType": {
           "original": "Languages",
-          "resolved": "\"da\" | \"en\" | \"fi\" | \"nb\" | \"nl\" | \"no\" | \"sv\"",
+          "resolved": "\"da\" | \"de\" | \"en\" | \"fi\" | \"fr\" | \"nb\" | \"nl\" | \"no\" | \"sv\"",
           "references": {
             "Languages": {
               "location": "import",
@@ -417,6 +423,25 @@ export class DatePicker {
         "attribute": "language",
         "reflect": true,
         "defaultValue": "'en'"
+      },
+      "formatter": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(date: Date) => string",
+          "resolved": "(date: Date) => string",
+          "references": {
+            "Date": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Custom formatting function. Will be used for date formatting.\n\n:::note\noverrides `format` and `language`\n:::"
+        }
       }
     };
   }

package/dist/collection/components/date-picker/dateFormatter.js

@@ -1,9 +1,10 @@
 import 'moment/locale/da';
+import 'moment/locale/de';
 import 'moment/locale/fi';
-import 'moment/locale/nb';
-import 'moment/locale/sv';
 import 'moment/locale/fr';
+import 'moment/locale/nb';
 import 'moment/locale/nl';
+import 'moment/locale/sv';
 import moment from 'moment/moment';
 export class DateFormatter {
   constructor(language = 'en') {
@@ -22,7 +23,10 @@ export class DateFormatter {
     return null;
   }
   getLanguage() {
-    return this.language === 'no' ? 'nb' : this.language;
+    if (this.language === 'no') {
+      return 'nb';
+    }
+    return this.language;
   }
   getDateFormat(type) {
     return ({

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

@@ -23,6 +23,7 @@ export class DatePickerCalendar {
     this.isOpen = undefined;
     this.inputElement = undefined;
     this.language = 'en';
+    this.formatter = undefined;
   }
   componentWillLoad() {
     switch (this.type) {
@@ -49,6 +50,7 @@ export class DatePickerCalendar {
         this.picker = new DatetimePicker(this.format, this.language, this.change);
         break;
     }
+    this.picker.formatDate = this.formatter;
   }
   componentDidUpdate() {
     if (this.flatPickrCreated) {
@@ -217,7 +219,7 @@ export class DatePickerCalendar {
         "mutable": false,
         "complexType": {
           "original": "Languages",
-          "resolved": "\"da\" | \"en\" | \"fi\" | \"nb\" | \"nl\" | \"no\" | \"sv\"",
+          "resolved": "\"da\" | \"de\" | \"en\" | \"fi\" | \"fr\" | \"nb\" | \"nl\" | \"no\" | \"sv\"",
           "references": {
             "Languages": {
               "location": "import",
@@ -234,6 +236,25 @@ export class DatePickerCalendar {
         "attribute": "language",
         "reflect": false,
         "defaultValue": "'en'"
+      },
+      "formatter": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(date: Date) => string",
+          "resolved": "(date: Date) => string",
+          "references": {
+            "Date": {
+              "location": "global"
+            }
+          }
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
       }
     };
   }

package/dist/collection/components/date-picker/pickers/Picker.js

@@ -1,12 +1,14 @@
 import flatpickr from 'flatpickr';
 import FlatpickrLanguages from 'flatpickr/dist/l10n';
 import 'moment/locale/da';
+import 'moment/locale/de';
 import 'moment/locale/fi';
+import 'moment/locale/fr';
 import 'moment/locale/nb';
+import 'moment/locale/nl';
 import 'moment/locale/sv';
 import moment from 'moment/moment';
 import { isAndroidDevice, isIOSDevice } from '../../../util/device';
-import { DateFormatter } from '../dateFormatter';
 export class Picker {
   constructor(dateFormat, language, change) {
     this.change = change;
@@ -17,12 +19,10 @@ export class Picker {
     if (dateFormat) {
       this.dateFormat = dateFormat;
     }
-    this.dateFormatter = new DateFormatter(language);
     this.getWeek = this.getWeek.bind(this);
     this.handleClose = this.handleClose.bind(this);
     this.handleOnClose = this.handleOnClose.bind(this);
     this.parseDate = this.parseDate.bind(this);
-    this.formatDate = this.formatDate.bind(this);
     this.getFlatpickrLang = this.getFlatpickrLang.bind(this);
   }
   init(element, container, value) {
@@ -56,9 +56,6 @@ export class Picker {
     }
     this.flatpickr.destroy();
   }
-  formatDate(date) {
-    return this.dateFormatter.formatDate(date, this.dateFormat);
-  }
   handleClose(selectedDates) {
     return new Promise((resolve) => {
       setTimeout(() => {
@@ -69,10 +66,16 @@ export class Picker {
     });
   }
   getFlatpickrLang() {
-    return this.language === 'nb' ? 'no' : this.language;
+    if (this.language === 'nb') {
+      return 'no';
+    }
+    return this.language;
   }
   getMomentLang() {
-    return this.language === 'no' ? 'nb' : this.language;
+    if (this.language === 'no') {
+      return 'nb';
+    }
+    return this.language;
   }
   getPickerDate(selectedDates) {
     return selectedDates[0] ? new Date(selectedDates[0].toJSON()) : null;

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

@@ -12,6 +12,8 @@
  */
 .button {
   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;
   color: var(--limel-dock-item-text-color);
@@ -19,7 +21,6 @@
   box-sizing: border-box;
   display: flex;
   align-items: center;
-  position: relative;
   width: 100%;
   height: var(--dock-item-height);
   border-radius: 0.375rem;
@@ -77,4 +78,10 @@ limel-popover {
   width: calc(var(--dock-item-height) - 1rem);
   height: calc(var(--dock-item-height) - 1rem);
   color: var(--dock-item-icon-color, var(--limel-dock-item-text-color));
+}
+
+limel-badge {
+  position: absolute;
+  top: -0.125rem;
+  right: -0.125rem;
 }

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

@@ -5,6 +5,11 @@ import { createRandomString } from '../../../util/random-string';
  */
 export class DockButton {
   constructor() {
+    this.renderNotification = () => {
+      if (this.item.badge || this.item.badge === '') {
+        return h("limel-badge", { label: this.item.badge });
+      }
+    };
     this.openPopover = (event) => {
       event.stopPropagation();
       this.isOpen = true;
@@ -57,7 +62,7 @@ export class DockButton {
     return (h("button", { slot: slot, tabindex: "0", id: this.tooltipId, type: "button", class: {
         button: true,
         selected: (_a = this.item) === null || _a === void 0 ? void 0 : _a.selected,
-      }, onClick: handleClick }, this.renderIcon(), this.renderLabel(), this.renderTooltip()));
+      }, onClick: handleClick, "aria-live": this.item.badge ? 'polite' : 'off' }, this.renderIcon(), this.renderLabel(), this.renderTooltip(), this.renderNotification()));
   }
   renderIcon() {
     if (!this.item.icon) {

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

@@ -20,6 +20,8 @@
 * @prop --popover-surface-width: Defines the width of the popover that is opened for dock items with custom components. Defaults to `auto`.
 */
 :host(limel-dock) {
+  --badge-background-color: rgb(var(--color-red-default));
+  --badge-text-color: rgb(var(--color-white));
   --dock-item-height: 2.75rem;
   --dock-padding: 0.25rem;
   --dock-expand-shrink-button-height: 1rem;

package/dist/collection/components/dock/dock.js

@@ -3,6 +3,7 @@ const DEFAULT_MOBILE_BREAKPOINT = 700;
 /**
  * @exampleComponent limel-example-dock-basic
  * @exampleComponent limel-example-dock-custom-component
+ * @exampleComponent limel-example-dock-notification
  * @exampleComponent limel-example-dock-mobile
  * @exampleComponent limel-example-dock-expanded
  * @exampleComponent limel-example-dock-colors-css

package/dist/collection/components/file/file.js

@@ -303,7 +303,7 @@ export class File {
         "mutable": false,
         "complexType": {
           "original": "Languages",
-          "resolved": "\"da\" | \"en\" | \"fi\" | \"nb\" | \"nl\" | \"no\" | \"sv\"",
+          "resolved": "\"da\" | \"de\" | \"en\" | \"fi\" | \"fr\" | \"nb\" | \"nl\" | \"no\" | \"sv\"",
           "references": {
             "Languages": {
               "location": "import",

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

@@ -66,6 +66,8 @@
 
 /**
  * @prop --form-body-padding: space around content of the form
+ * @prop --form-background-color-of-even-rows: Background of even rows in the form, when layout type is `row`. Defaults to `transparent`.
+ * @prop --form-background-color-of-odd-rows:Background of odd rows in the form, when layout type is `row`. Defaults to `--contrast-200`.
  */
 .mdc-typography {
   -moz-osx-font-smoothing: grayscale;
@@ -536,22 +538,28 @@
   position: relative;
 }
 
+.form-group .mdc-typography--headline1,
+.form-group .mdc-typography--body1 {
+  color: rgb(var(--contrast-1100));
+}
 .form-group .mdc-typography--headline1 {
   --mdc-typography-headline1-font-size: 2rem;
   --mdc-typography-headline1-line-height: 2.25rem;
   --mdc-typography-headline1-letter-spacing: -0.0625rem;
   --mdc-typography-headline1-font-weight: 400;
-  color: rgb(var(--contrast-1000));
   margin-top: 1.5rem;
   margin-bottom: 0.5rem;
 }
+.form-group .form-group .mdc-typography--headline1,
+.form-group .form-group .mdc-typography--body1 {
+  color: rgb(var(--contrast-1200));
+}
 .form-group .form-group .mdc-typography--headline1 {
   --mdc-typography-headline1-font-size: 1.625rem;
   --mdc-typography-headline1-line-height: 1.25rem;
   --mdc-typography-headline1-font-weight: 300;
   margin-top: 1.25rem;
   margin-bottom: 0.5rem;
-  color: rgb(var(--contrast-1100));
 }
 .form-group .form-group .mdc-typography--headline1:before {
   content: "";
@@ -567,25 +575,104 @@
   border-radius: 0.125rem;
   opacity: 0.6;
 }
+.form-group .form-group .form-group .mdc-typography--headline1,
+.form-group .form-group .form-group .mdc-typography--body1 {
+  color: rgb(var(--contrast-1300));
+}
 .form-group .form-group .form-group .mdc-typography--headline1 {
   --mdc-typography-headline1-font-size: 1.375rem;
   --mdc-typography-headline1-line-height: 1.5rem;
   --mdc-typography-headline1-font-weight: 300;
   margin-top: 1rem;
   margin-bottom: 0.5rem;
-  color: rgb(var(--contrast-1200));
 }
 .form-group .form-group .form-group .mdc-typography--headline1:before {
   display: none;
 }
+.form-group .form-group .form-group .form-group .mdc-typography--headline1,
+.form-group .form-group .form-group .form-group .mdc-typography--body1 {
+  color: rgb(var(--contrast-1400));
+}
 .form-group .form-group .form-group .form-group .mdc-typography--headline1 {
   --mdc-typography-headline1-font-size: 1.25rem;
   --mdc-typography-headline1-line-height: 1.25rem;
   --mdc-typography-headline1-font-weight: 300;
   margin-top: 1rem;
   margin-bottom: 0.5rem;
-  color: rgb(var(--contrast-1200));
 }
 .form-group .form-group .form-group .form-group .mdc-typography--headline1:before {
   display: none;
+}
+
+/*
+ * This file is imported into every component!
+ *
+ * Nothing in this file may output any CSS
+ * without being explicitly called by outside code.
+ */
+.limel-form-row--layout {
+  --limel-form-row-border-radius: 0.375rem;
+  --limel-form-row-icon-size: 1.75rem;
+  --limel-form-row-main-information-gap: 0.5rem;
+  display: flex;
+  flex-direction: column;
+}
+.limel-form-row--layout .row {
+  display: flex;
+  gap: 0.5rem;
+  flex-direction: column;
+  padding: 0.5rem 1rem;
+}
+.limel-form-row--layout .row:nth-child(odd) {
+  background-color: var(--form-background-color-of-odd-rows, rgb(var(--contrast-200)));
+}
+.limel-form-row--layout .row:nth-child(even) {
+  background-color: var(--form-background-color-of-even-rows, transparent);
+}
+.limel-form-row--layout .row:first-child {
+  border-radius: var(--limel-form-row-border-radius) var(--limel-form-row-border-radius) 0 0;
+}
+.limel-form-row--layout .row:last-child {
+  border-radius: 0 0 var(--limel-form-row-border-radius) var(--limel-form-row-border-radius);
+}
+.limel-form-row--layout .main-information {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--limel-form-row-main-information-gap);
+  min-width: 0;
+}
+.limel-form-row--layout limel-icon {
+  color: rgb(var(--contrast-1200));
+  width: var(--limel-form-row-icon-size);
+  flex-shrink: 0;
+  min-width: 0;
+}
+.limel-form-row--layout .title {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  margin: 0;
+  font-weight: normal;
+  flex-grow: 1;
+  color: var(--mdc-theme-on-surface);
+  font-size: var(--mdc-typography-subtitle1-font-size, 0.875rem);
+}
+.limel-form-row--layout .description {
+  margin: 0;
+  color: var(--mdc-theme-text-secondary-on-background);
+  font-size: var(--mdc-typography-body2-font-size, 0.8125rem);
+  line-height: 1.5;
+}
+.limel-form-row--layout .has-icon .description {
+  padding-left: calc(var(--limel-form-row-icon-size) + var(--limel-form-row-main-information-gap));
+}
+.limel-form-row--layout .form-group.field {
+  flex-shrink: 0;
+  display: flex;
+  align-content: center;
+}
+.limel-form-row--layout .form-group.field limel-slider {
+  min-width: 8rem;
+  display: block;
 }

package/dist/collection/components/form/form.js

@@ -23,6 +23,7 @@ import { mapValues } from 'lodash-es';
  * @exampleComponent limel-example-form-span-fields
  * @exampleComponent limel-example-custom-error-message
  * @exampleComponent limel-example-server-errors
+ * @exampleComponent limel-example-form-row-layout
  */
 export class Form {
   constructor() {

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

@@ -8,4 +8,12 @@ export var FormLayoutType;
    * Render the form fields using a responsive grid layout
    */
   FormLayoutType["Grid"] = "grid";
+  /**
+   * Render the form fields in full-width rows.
+   * Each row can have a leading `icon`, and a field.
+   * `title` and `description` provided by the schema will be placed
+   * on the row itself, and not on the field.
+   * This layout is good for creating UIs for user settings pages.
+   */
+  FormLayoutType["Row"] = "row";
 })(FormLayoutType || (FormLayoutType = {}));

package/dist/collection/components/form/row/row.js

@@ -0,0 +1,47 @@
+import React from 'react';
+export class Row extends React.Component {
+  constructor(props) {
+    super(props);
+    this.props = props;
+  }
+  render() {
+    const classes = ['row'];
+    if (this.icon) {
+      classes.push('has-icon');
+    }
+    return React.createElement('div', {
+      className: classes.join(' '),
+    }, this.renderMainInformation(), this.renderDescription());
+  }
+  renderIcon() {
+    if (this.icon) {
+      return React.createElement('limel-icon', {
+        name: this.icon,
+      });
+    }
+  }
+  renderMainInformation() {
+    return React.createElement('div', { className: 'main-information' }, this.renderIcon(), this.renderTitle(), this.renderChildren());
+  }
+  renderTitle() {
+    var _a;
+    return React.createElement('h1', { className: 'title' }, (_a = this.schema) === null || _a === void 0 ? void 0 : _a.title);
+  }
+  renderDescription() {
+    var _a;
+    if ((_a = this.schema) === null || _a === void 0 ? void 0 : _a.description) {
+      return React.createElement('p', { className: 'description' }, this.schema.description);
+    }
+  }
+  renderChildren() {
+    const children = this.props.children;
+    return Object.assign(Object.assign({}, children), { props: Object.assign(Object.assign({}, children.props), { schema: Object.assign(Object.assign({}, children.props.schema), { title: null, description: null }) }) });
+  }
+  get schema() {
+    return this.props.children.props.schema;
+  }
+  get icon() {
+    var _a, _b, _c;
+    return (_c = (_b = (_a = this.schema) === null || _a === void 0 ? void 0 : _a.lime) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.icon;
+  }
+}

package/dist/collection/components/form/templates/object-field.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { FormLayoutType } from '../form.types';
 import { renderDescription, renderTitle } from './common';
 import { GridLayout } from './grid-layout';
+import { RowLayout } from './row-layout';
 export const ObjectFieldTemplate = (props) => {
   const id = props.idSchema.$id;
   if (id === 'root' || !isCollapsible(props.schema)) {
@@ -41,6 +42,7 @@ function renderLayout(properties, layout) {
   const layouts = {
     default: renderDefaultLayout,
     grid: renderGridLayout,
+    row: renderRowLayout,
   };
   return layouts[type](properties, layout);
 }
@@ -54,6 +56,9 @@ function renderGridLayout(properties, layout) {
     options: layout,
   }, properties.map((element) => element.content));
 }
+function renderRowLayout(properties) {
+  return React.createElement(RowLayout, {}, properties.map((element) => element.content));
+}
 function isCollapsible(schema) {
   var _a;
   return !!((_a = schema.lime) === null || _a === void 0 ? void 0 : _a.collapsible);

package/dist/collection/components/form/templates/row-layout.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Row } from '../row/row';
+export class RowLayout extends React.Component {
+  constructor(props) {
+    super(props);
+    this.props = props;
+    this.elementRef = React.createRef();
+  }
+  render() {
+    const classes = ['limel-form-row--layout'];
+    return React.createElement('div', {
+      className: classes.join(' '),
+      ref: this.elementRef,
+    }, this.props.children.map((child, index) => {
+      return React.createElement(Row, {
+        key: index.toString(),
+      }, child);
+    }));
+  }
+}

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

@@ -73,7 +73,7 @@
   font-weight: bold;
 }
 
-.actions {
+slot[name=actions] {
   flex-shrink: 0;
 }
 
@@ -95,7 +95,7 @@
 :host(limel-header.has-responsive-layout) .headings {
   padding-right: 0.5rem;
 }
-:host(limel-header.has-responsive-layout) .actions {
+:host(limel-header.has-responsive-layout) slot[name=actions] {
   display: flex;
   justify-content: flex-end;
 }

package/dist/collection/components/header/header.js

@@ -40,9 +40,15 @@ import { h } from '@stencil/core';
  * :::
  *
  * @exampleComponent limel-example-header
+ * @exampleComponent limel-example-header-colors
  * @exampleComponent limel-example-header-responsive
  * @exampleComponent limel-example-header-narrow
- * @slot - Content (actions) to be put inside the far right surface of the header
+ * @slot actions - Content (actions) to be put inside the far right surface of
+ * the header
+ * @slot [no name] - DEPRECATED. The `actions` slot used to be unnamed. This
+ * behavior has been deprecated, and support will be dropped in a future
+ * version. Please add `slot="actions"` to your elements to ensure your code
+ * will continue to work with future versions of Lime Elements.
  */
 export class Header {
   constructor() {
@@ -54,7 +60,7 @@ export class Header {
   render() {
     return [
       h("div", { class: "information" }, this.renderIcon(), h("div", { class: "headings" }, h("h1", { class: "heading", title: this.heading }, this.heading), h("h2", { class: "subheading", title: this.subheading }, this.subheading, this.renderSupportingText()))),
-      h("div", { class: "actions" }, h("slot", null)),
+      h("slot", { name: "actions" }, h("slot", null)),
     ];
   }
   renderIcon() {

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

@@ -117,7 +117,7 @@ a.is-clickable:focus-visible {
 }
 @supports not (container-type: size) {
   .icon {
-    height: min(20%, 5rem);
+    width: max(10%, 3rem);
   }
 }
 .has-circular-progress .icon {