@limetech/lime-elements 36.3.0-next.3 → 36.3.0-next.30

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/code-editor/code-editor.css

@@ -523,22 +523,22 @@ span.CodeMirror-selectedtext { background: none; }
     --code-editor-selection-lowlight-color: var(--contrast-100);
   }
   :root:not([data-theme=force-light]) :host .cm-attribute,
-:root:not([data-theme=force-light]) :host .cm-property,
-:root:not([data-theme=force-light]) :host .cm-keyword {
+  :root:not([data-theme=force-light]) :host .cm-property,
+  :root:not([data-theme=force-light]) :host .cm-keyword {
     color: rgb(var(--color-purple-lighter));
   }
   :root:not([data-theme=force-light]) :host .cm-operator {
     color: rgb(var(--color-sky-lighter));
   }
   :root:not([data-theme=force-light]) :host .cm-variable-3,
-:root:not([data-theme=force-light]) :host .cm-type {
+  :root:not([data-theme=force-light]) :host .cm-type {
     color: rgb(var(--color-yellow-light));
   }
   :root:not([data-theme=force-light]) :host .cm-atom {
     color: rgb(var(--color-coral-light));
   }
   :root:not([data-theme=force-light]) :host .cm-tag,
-:root:not([data-theme=force-light]) :host .cm-number {
+  :root:not([data-theme=force-light]) :host .cm-number {
     color: rgb(var(--color-magenta-light));
   }
   :root:not([data-theme=force-light]) :host .cm-def {

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/color-picker/color-picker-palette.css

@@ -65,20 +65,20 @@
 
 @media (prefers-color-scheme: light) {
   .brand-colors .--color-glaucous-default,
-.brand-colors .--color-gray-dark {
+  .brand-colors .--color-gray-dark {
     border-radius: 50%;
   }
 }
 @media (prefers-color-scheme: dark) {
   .brand-colors .--color-red-light,
-.brand-colors .--color-magenta-default,
-.brand-colors .--color-sky-light,
-.brand-colors .--color-teal-light,
-.brand-colors .--color-green-light,
-.brand-colors .--color-amber-light,
-.brand-colors .--color-amber-default,
-.brand-colors .--color-coral-light,
-.brand-colors .--color-gray-light {
+  .brand-colors .--color-magenta-default,
+  .brand-colors .--color-sky-light,
+  .brand-colors .--color-teal-light,
+  .brand-colors .--color-green-light,
+  .brand-colors .--color-amber-light,
+  .brand-colors .--color-amber-default,
+  .brand-colors .--color-coral-light,
+  .brand-colors .--color-gray-light {
     border-radius: 50%;
   }
 }

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/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

@@ -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 !== 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

@@ -17,9 +17,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 +43,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)) {

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() {