@limetech/lime-elements 36.3.0-next.4 → 36.3.0-next.41

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,12 +50,10 @@ export class DatePickerCalendar {
         this.picker = new DatetimePicker(this.format, this.language, this.change);
         break;
     }
+    this.picker.formatDate = this.formatter;
   }
   componentDidUpdate() {
-    if (this.flatPickrCreated) {
-      this.redrawFlatpickr();
-    }
-    else {
+    if (!this.flatPickrCreated) {
       this.createFlatpickr();
     }
     this.tryFixConfusingWidthBug();
@@ -89,9 +88,6 @@ export class DatePickerCalendar {
     this.picker.init(this.inputElement, this.container, this.value);
     this.flatPickrCreated = true;
   }
-  redrawFlatpickr() {
-    this.picker.redraw();
-  }
   destroyFlatpickr() {
     this.picker.destroy();
   }
@@ -217,7 +213,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 +230,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/dialog/dialog.css

@@ -395,14 +395,12 @@
   width: 100%;
   height: 100%;
   top: 0;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   left: 0;
 }
 [dir=rtl] .mdc-dialog__surface, .mdc-dialog__surface[dir=rtl] {
   /*rtl:begin:ignore*/
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   text-align: right;
   /*rtl:end:ignore*/
 }
@@ -449,8 +447,7 @@
 }
 [dir=rtl] .mdc-dialog__title, .mdc-dialog__title[dir=rtl] {
   /*rtl:begin:ignore*/
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   text-align: right;
   /*rtl:end:ignore*/
 }
@@ -538,51 +535,41 @@
 }
 
 .mdc-dialog__button {
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   margin-left: 8px;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   margin-right: 0;
   max-width: 100%;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   text-align: right;
 }
 [dir=rtl] .mdc-dialog__button, .mdc-dialog__button[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*/
 }
 
 .mdc-dialog__button:first-child {
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   margin-left: 0;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   margin-right: 0;
 }
 [dir=rtl] .mdc-dialog__button:first-child, .mdc-dialog__button:first-child[dir=rtl] {
   /*rtl:begin:ignore*/
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   margin-left: 0;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   margin-right: 0;
   /*rtl:end:ignore*/
 }
 
 [dir=rtl] .mdc-dialog__button, .mdc-dialog__button[dir=rtl] {
   /*rtl:begin:ignore*/
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   text-align: left;
   /*rtl:end:ignore*/
 }
@@ -647,6 +634,7 @@
 
 .mdc-dialog {
   z-index: var(--dialog-z-index, 7);
+  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
 }
 @media (max-width: 16032px) {
   .mdc-dialog .mdc-dialog__surface {
@@ -744,7 +732,6 @@ slot[name=button] {
   slot[name=button] {
     flex-direction: column-reverse;
   }
-
   .mdc-dialog__actions {
     padding: min(1.5rem, 3vw);
     padding-top: 1rem;

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!
  *
@@ -12,14 +20,15 @@
  */
 .button {
   all: unset;
-  cursor: pointer;
+  isolation: isolate;
+  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: var(--limel-dock-item-text-color);
   background-color: var(--dock-background-color);
   box-sizing: border-box;
   display: flex;
   align-items: center;
-  position: relative;
   width: 100%;
   height: var(--dock-item-height);
   border-radius: 0.375rem;
@@ -77,4 +86,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 !== undefined) {
+        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": "polite" }, this.renderIcon(), this.renderLabel(), this.renderTooltip(), this.renderNotification()));
   }
   renderIcon() {
     if (!this.item.icon) {

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!
  *
@@ -17,9 +25,15 @@
 * @prop --dock-item-text-color: Text of dock items, defaults to `--contrast-1100`.
 * @prop --dock-item-text-color--selected: Text color of selected dock item, defaults to `--contrast-1300`.
 * @prop --dock-item-icon-color: Color of the optional icons used in each dock item. Only affects inactive dock items, defaults to text colors for default or selected states.
+* @prop --dock-padding-top: Space of top side of the Dock. Can be used with environment variables, to take into account safe areas on mobile devices with rounded screen corners or those that have a "notch". For instance can be set to `env(safe-area-inset-top)`.
+* @prop --dock-padding-right: Space of the right side of the Dock. Can be used with environment variables, to take into account safe areas on mobile devices with rounded screen corners or those that have a "notch". For instance can be set to `env(safe-area-inset-right)`.
+* @prop --dock-padding-bottom: Space of the bottom side of the Dock. Can be used with environment variables, to take into account safe areas on mobile devices with rounded screen corners or those that have a "notch". For instance can be set to `env(safe-area-inset-bottom)`.
+* @prop --dock-padding-left: Space of the left side of the Dock. Can be used with environment variables, to take into account safe areas on mobile devices with rounded screen corners or those that have a "notch". For instance can be set to `env(safe-area-inset-left)`.
 * @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;
@@ -37,6 +51,10 @@
   flex-direction: column;
   background-color: var(--dock-background-color, rgb(var(--contrast-100)));
   box-shadow: var(--shadow-depth-8);
+  padding-top: var(--dock-padding-top);
+  padding-right: var(--dock-padding-right);
+  padding-bottom: var(--dock-padding-bottom);
+  padding-left: var(--dock-padding-left);
 }
 
 :host(limel-dock:not(.has-mobile-layout)) {
@@ -76,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/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;
@@ -435,7 +437,7 @@
 
 .limel-form-layout--grid {
   --gap: 1rem;
-  --min-height-of-one-row: 4.71rem;
+  --min-height-of-one-row: 3.5rem;
   display: grid;
   gap: var(--gap);
   padding: var(--form-body-padding, 1rem);
@@ -505,9 +507,7 @@
 
 .limel-form-layout--grid limel-checkbox,
 .limel-form-layout--grid limel-switch {
-  min-height: calc(
-            var(--min-height-of-one-row) - 0.9375rem
-        );
+  min-height: var(--min-height-of-one-row);
 }
 .limel-form-layout--grid limel-checkbox {
   margin-top: 0.5rem;
@@ -536,22 +536,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 +573,106 @@
   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;
+}
+
+/**
+ * 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.
+ */
+.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

@@ -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!
  *
@@ -73,7 +81,7 @@
   font-weight: bold;
 }
 
-.actions {
+slot[name=actions] {
   flex-shrink: 0;
 }
 
@@ -95,7 +103,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;
 }