@emuanalytics/flow-rdf-ui 4.1.0-preview.2 → 4.1.0-preview.6

package/dist/components/alert/alert.styles.mjs

@@ -20,7 +20,7 @@ const styles = css`
     border-top-width: calc(var(--flow-ui-alert-border-width) * 3);
     border-radius: var(--flow-ui-border-radius-medium);
     font-family: var(--flow-ui-font-sans);
-    font-size: var(--flow-ui-font-size-small);
+    font-size: var(--flow-ui-font-size-medium);
     font-weight: var(--flow-ui-font-weight-normal);
     line-height: 1.6;
     color: var(--flow-ui-alert-color);

package/dist/components/breadcrumb-item/breadcrumb-item.styles.mjs

@@ -14,7 +14,7 @@ const styles = css`
     font-family: var(--flow-ui-font-sans);
     font-size: var(--flow-ui-font-size-small);
     font-weight: var(--flow-ui-font-weight-semibold);
-    color: var(--flow-ui-color-neutral-600);
+    color: var(--flow-ui-color-neutral-800);
     line-height: var(--flow-ui-line-height-normal);
     white-space: nowrap;
   }

package/dist/components/button/button.styles.mjs

@@ -79,8 +79,8 @@ const buttonStyles = css`
   /* Default */
   .button--standard.button--default {
     background-color: var(--flow-ui-color-background);
-    border-color: var(--flow-ui-color-neutral-300);
-    color: var(--flow-ui-color-neutral-700);
+    border-color: var(--flow-ui-color-neutral-600);
+    color: var(--flow-ui-color-neutral-800);
   }
 
   .button--standard.button--default:hover:not(.button--disabled) {

package/dist/components/calendar/calendar.component.mjs

@@ -227,6 +227,7 @@ class FlowUiCalendar extends FlowRdfElement {
     return html`
       <div class="calendar__time-container">
         <flow-ui-input
+          filled
           type="number"
           size=${this.size === "small" ? "small" : "medium"}
           name="hour"
@@ -239,6 +240,7 @@ class FlowUiCalendar extends FlowRdfElement {
         ></flow-ui-input>
         <span class="calendar__time-separator">:</span>
         <flow-ui-input
+          filled
           type="number"
           size=${this.size === "small" ? "small" : "medium"}
           name="minute"
@@ -251,6 +253,7 @@ class FlowUiCalendar extends FlowRdfElement {
         ></flow-ui-input>
         <span class="calendar__time-separator">:</span>
         <flow-ui-input
+          filled
           type="number"
           size=${this.size === "small" ? "small" : "medium"}
           name="second"

package/dist/components/calendar/calendar.styles.mjs

@@ -9,6 +9,10 @@ const styles = css`
     --width: 300px;
     --font-size: var(--flow-ui-font-size-medium);
     --day-font-size: var(--flow-ui-font-size-small);
+    --day-color-filler: var(--flow-ui-calendar-day-color-filler);
+    --day-color-hover: var(--flow-ui-calendar-day-color-hover);
+    --day-color-selected: var(--flow-ui-calendar-day-color-selected);
+    --day-color-today: var(--flow-ui-calendar-day-color-today);
   }
 
   .calendar {
@@ -76,20 +80,20 @@ const styles = css`
   }
 
   .calendar__day:hover:not(.calendar__day--selected) {
-    background-color: var(--flow-ui-color-neutral-100);
+    background-color: var(--day-color-hover);
   }
 
   .calendar__day--filler {
-    color: var(--flow-ui-color-neutral-400);
+    color: var(--day-color-filler);
   }
 
   .calendar__day--today {
-    border: 1px solid var(--flow-ui-color-neutral-300);
+    border: 1px solid var(--day-color-today);
   }
 
   .calendar__day--selected {
     color: var(--flow-ui-color-background);
-    background-color: var(--flow-ui-color-primary-500);
+    background-color: var(--day-color-selected);
   }
 
   .calendar__header {
@@ -114,8 +118,13 @@ const styles = css`
     --flow-ui-control-spacing-medium: var(--flow-ui-spacing-small);
   }
 
+  .calendar__time-input::part(form-control-input) {
+    background-color: var(--flow-ui-calendar-time-color);
+  }
+
   .calendar__time-input::part(input) {
     /* Remove padding between spin controls to accommodate narrow calendars */
+
     padding-right: 0;
   }
 

package/dist/components/checkbox-group/checkbox-group.component.mjs

@@ -7,6 +7,7 @@ import { FormControlController, customErrorValidityState, valueMissingValiditySt
 import { HasSlotController } from '../../internal/slot.mjs';
 import { watch } from '../../internal/watch.mjs';
 import styles from './checkbox-group.styles.mjs';
+import { isNil } from '../../internal/type-checks.mjs';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -119,6 +120,9 @@ class FlowUiCheckboxGroup extends FlowRdfFormControl {
     this.syncCheckboxes();
   }
   handleValueChange() {
+    if (isNil(this.value)) {
+      this.value = [];
+    }
     if (this.hasUpdated) {
       this.updateCheckedState();
     }

package/dist/components/date-time-picker/date-time-picker.component.mjs

@@ -79,6 +79,7 @@ class FlowUiDateTimePicker extends FlowRdfFormControl {
     this.required = boolean(this.required, true);
     this.filled = boolean(this.filled, true);
     this.pill = boolean(this.pill, true);
+    this.inline = boolean(this.inline, true);
     this.handleDocumentFocusIn = this.handleDocumentFocusIn.bind(this);
     this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
     this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
@@ -288,6 +289,7 @@ class FlowUiDateTimePicker extends FlowRdfFormControl {
       "form-control--small": this.size === "small",
       "form-control--medium": this.size === "medium",
       "form-control--large": this.size === "large",
+      "form-control--filled": this.filled,
       "form-control--has-label": hasLabel,
       "form-control--has-help-text": hasHelpText,
       "form-control--has-divider": this.divider,

package/dist/components/date-time-picker/date-time-picker.styles.mjs

@@ -237,7 +237,7 @@ const styles = css`
 
   /* Mode icon (calendar/clock) */
   .datepicker__mode-icon {
-    color: var(--flow-ui-color-neutral-400);
+    color: var(--flow-ui-color-neutral-800);
     flex: 0 0 auto;
     display: flex;
     align-items: center;
@@ -256,7 +256,7 @@ const styles = css`
     font-size: var(--flow-ui-font-size-medium);
     font-weight: var(--flow-ui-font-weight-normal);
     box-shadow: var(--flow-ui-shadow-large);
-    background: var(--flow-ui-menu-background-color);
+    background: var(--flow-ui-calendar-background-color);
     border: solid var(--flow-ui-menu-border-width) var(--flow-ui-menu-border-color);
     border-radius: var(--flow-ui-border-radius-medium);
     padding: var(--flow-ui-spacing-x-small);

package/dist/components/dialog/dialog.styles.mjs

@@ -86,7 +86,7 @@ const styles = css`
     flex: 0 0 auto;
     display: flex;
     align-items: center;
-    font-size: var(--flow-ui-font-size-medium);
+    font-size: var(--flow-ui-font-size-large);
   }
 
   .dialog__body {

package/dist/components/form-group/form-group.component.mjs

@@ -2,7 +2,7 @@ import { html } from 'lit';
 import { query, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { boolean } from '../../internal/boolean.mjs';
-import FlowRdfElement from '../../internal/flow-ui-rdf-element.mjs';
+import FlowRdfElement, { FlowRdfFormControl } from '../../internal/flow-ui-rdf-element.mjs';
 import { HasSlotController } from '../../internal/slot.mjs';
 import { watch } from '../../internal/watch.mjs';
 import styles from './form-group.styles.mjs';
@@ -25,14 +25,16 @@ class FlowUiFormGroup extends FlowRdfElement {
     this.label = "";
     this.size = "medium";
     this.helpText = "";
-    this.noDividers = false;
-    this.noBorder = false;
+    this.borders = false;
     this.variant = "default";
   }
   connectedCallback() {
     super.connectedCallback();
-    this.noDividers = boolean(this.noDividers, true);
-    this.noBorder = boolean(this.noBorder, true);
+    this.classList.add(FlowRdfFormControl.FLOW_UI_FORM_CONTROL_CLASS);
+    this.borders = boolean(this.borders, true);
+  }
+  handleClassChange() {
+    this.classList.add(FlowRdfFormControl.FLOW_UI_FORM_CONTROL_CLASS);
   }
   handleStyleChange() {
     this.syncControls();
@@ -42,7 +44,7 @@ class FlowUiFormGroup extends FlowRdfElement {
       const controls = this.getAllControls();
       controls.forEach((control, i) => {
         control.size = this.size;
-        control.divider = !this.noDividers && i < controls.length - 1;
+        control.divider = this.borders && i < controls.length - 1;
       });
     } else {
       customElements.whenDefined("flow-ui-form-group").then(() => this.syncControls());
@@ -72,8 +74,8 @@ class FlowUiFormGroup extends FlowRdfElement {
       "form-control--default": this.variant === "default",
       "form-control--warning": this.variant === "warning",
       "form-control--danger": this.variant === "danger",
-      "form-group--has-dividers": !this.noDividers,
-      "form-group--has-border": !this.noBorder
+      "form-group--has-dividers": this.borders,
+      "form-group--has-border": this.borders
     })}
         aria-labelledby="label"
         aria-describedby="help-text"
@@ -108,7 +110,10 @@ __decorateClass([
   query("slot:not([name])")
 ], FlowUiFormGroup.prototype, "defaultSlot", 2);
 __decorateClass([
-  property()
+  property({ reflect: true })
+], FlowUiFormGroup.prototype, "class", 2);
+__decorateClass([
+  property({ reflect: true })
 ], FlowUiFormGroup.prototype, "label", 2);
 __decorateClass([
   property({ reflect: true })
@@ -117,14 +122,14 @@ __decorateClass([
   property({ attribute: "help-text" })
 ], FlowUiFormGroup.prototype, "helpText", 2);
 __decorateClass([
-  property({ type: Boolean, attribute: "no-dividers", reflect: true })
-], FlowUiFormGroup.prototype, "noDividers", 2);
-__decorateClass([
-  property({ type: Boolean, attribute: "no-border", reflect: true })
-], FlowUiFormGroup.prototype, "noBorder", 2);
+  property({ type: Boolean, attribute: "borders", reflect: true })
+], FlowUiFormGroup.prototype, "borders", 2);
 __decorateClass([
   property({ reflect: true })
 ], FlowUiFormGroup.prototype, "variant", 2);
+__decorateClass([
+  watch("class")
+], FlowUiFormGroup.prototype, "handleClassChange", 1);
 __decorateClass([
   watch(["size", "noDividers", "noBorder"], { waitUntilFirstUpdate: true })
 ], FlowUiFormGroup.prototype, "handleStyleChange", 1);

package/dist/components/form-group/form-group.styles.mjs

@@ -15,10 +15,6 @@ const styles = css`
     margin-top: var(--flow-ui-spacing-x-large);
   }
 
-  :host(:first-child) {
-    margin-top: var(--flow-ui-spacing-x-small);
-  }
-
   .form-control {
     display: grid;
     grid-template-columns: 1fr;
@@ -28,10 +24,13 @@ const styles = css`
     font-size: inherit;
     font-weight: var(--flow-ui-control-font-weight);
     line-height: var(--flow-ui-line-height-dense);
+
+    --control-background-color: var(--flow-ui-form-group-background-color);
+    --control-border-color: var(--flow-ui-form-group-border-color);
   }
 
   .form-control.form-control--has-label .form-control__label {
-    color: var(--flow-ui-color-neutral-900);
+    color: var(--flow-ui-color-text);
     font-weight: var(--flow-ui-font-weight-semibold);
     margin-top: 0 !important;
     margin-bottom: 0 !important;
@@ -52,6 +51,7 @@ const styles = css`
     grid-template-columns: 1fr;
     grid-row-gap: var(--control-spacing);
     padding-block: calc(var(--control-spacing) / 2);
+    background-color: var(--control-background-color);
   }
 
   .form-control.form-group--has-dividers .form-group__content {

package/dist/components/icon-button/icon-button.styles.mjs

@@ -6,7 +6,7 @@ const styles = css`
 
   :host {
     display: inline-block;
-    color: var(--flow-ui-color-neutral-600);
+    color: var(--flow-ui-color-neutral-800);
 
     --hover-color: var(--flow-ui-color-primary-500);
     --active-color: var(--flow-ui-color-primary-400);

package/dist/components/menu/menu.styles.mjs

@@ -18,6 +18,7 @@ const styles = css`
   ::slotted(flow-ui-divider) {
     --spacing: var(--flow-ui-spacing-x-small);
     --inset: var(--flow-ui-spacing-medium);
+    --color: var(--flow-ui-menu-divider-color);
   }
 
   ::slotted(small) {

package/dist/components/menu-item/menu-item.styles.mjs

@@ -21,7 +21,7 @@ const styles = css`
     font-weight: var(--flow-ui-font-weight-normal);
     line-height: var(--flow-ui-line-height-normal);
     letter-spacing: var(--flow-ui-letter-spacing-normal);
-    color: var(--flow-ui-color-neutral-700);
+    color: var(--flow-ui-menu-color);
     padding: var(--flow-ui-spacing-2x-small) var(--flow-ui-spacing-2x-small);
     transition: var(--flow-ui-transition-fast) fill;
     user-select: none;

package/dist/components/option/option.styles.mjs

@@ -22,7 +22,7 @@ const styles = css`
     font-weight: var(--flow-ui-font-weight-normal);
     line-height: var(--flow-ui-line-height-normal);
     letter-spacing: var(--flow-ui-letter-spacing-normal);
-    color: var(--flow-ui-color-neutral-700);
+    color: var(--flow-ui-menu-color);
     padding: var(--flow-ui-spacing-x-small) var(--flow-ui-spacing-medium) var(--flow-ui-spacing-x-small)
       var(--flow-ui-spacing-x-small);
     transition: var(--flow-ui-transition-fast) fill;

package/dist/components/panel/panel.component.mjs

@@ -1,5 +1,5 @@
 import { html } from 'lit';
-import { property } from 'lit/decorators.js';
+import { queryAssignedElements, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { boolean } from '../../internal/boolean.mjs';
 import FlowRdfElement from '../../internal/flow-ui-rdf-element.mjs';
@@ -50,6 +50,9 @@ class FlowUiPanel extends FlowRdfElement {
       }
     }
   }
+  handleSlotChange() {
+    this.requestUpdate();
+  }
   render() {
     return html`
       <div
@@ -57,7 +60,8 @@ class FlowUiPanel extends FlowRdfElement {
       panel: true,
       "panel--closed": this.closed,
       "panel--scrollable": this.scrollable,
-      "panel--with-padding": this.padding
+      "panel--with-padding": this.padding,
+      "panel--has-form-controls": this.formElements.length > 0
     })}
       >
         <slot
@@ -69,7 +73,7 @@ class FlowUiPanel extends FlowRdfElement {
 
         <div class="panel__body-wrapper">
           <div part="body" class="panel__body">
-            <slot></slot>
+            <slot @slotchange=${this.handleSlotChange}></slot>
           </div>
         </div>
       </div>
@@ -77,6 +81,9 @@ class FlowUiPanel extends FlowRdfElement {
   }
 }
 FlowUiPanel.styles = styles;
+__decorateClass([
+  queryAssignedElements({ selector: ".flow-ui-form-control[borders]" })
+], FlowUiPanel.prototype, "formElements", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], FlowUiPanel.prototype, "closed", 2);

package/dist/components/panel/panel.styles.mjs

@@ -33,6 +33,10 @@ const styles = css`
     padding: var(--padding);
   }
 
+  .panel--scrollable.panel--with-padding.panel--has-form-controls .panel__body {
+    padding: calc(var(--padding) * 1.5);
+  }
+
   /* For non-scrollable panel - fix body at 100% and disable scroll. Padding is added to wrapper */
   .panel.panel--with-padding:not(.panel--scrollable) .panel__body-wrapper {
     padding: var(--padding);

package/dist/components/panel-header/panel-header.styles.mjs

@@ -41,6 +41,7 @@ const styles = css`
   }
 
   .panel-header__label {
+    font-size: var(--flow-ui-panel-header-font-size);
     font-weight: var(--flow-ui-panel-header-font-weight);
     text-overflow: ellipsis;
     overflow: hidden;

package/dist/components/query-builder/query-builder.component.mjs

@@ -25,7 +25,7 @@ var __decorateClass = (decorators, target, key, kind) => {
 const _FlowUiQueryBuilder = class _FlowUiQueryBuilder extends FlowRdfElement {
   constructor() {
     super(...arguments);
-    this._value = { condition: "and", rules: [] };
+    this._value = { condition: "and", rules: [{ field: "", operator: "=", enabled: true }] };
     this.hasSlotController = new HasSlotController(
       this,
       "help-text",
@@ -42,6 +42,7 @@ const _FlowUiQueryBuilder = class _FlowUiQueryBuilder extends FlowRdfElement {
     this.helpText = "";
     this.treeLines = false;
     this.subQueryBuilder = false;
+    this.borders = false;
   }
   /**
    * Register a custom field definition.
@@ -62,6 +63,8 @@ const _FlowUiQueryBuilder = class _FlowUiQueryBuilder extends FlowRdfElement {
     super.connectedCallback();
     this.classList.add(FlowRdfFormControl.FLOW_UI_FORM_CONTROL_CLASS);
     this.disabled = boolean(this.disabled, true);
+    this.borders = boolean(this.borders, true);
+    this.treeLines = boolean(this.treeLines, true);
   }
   handleClassChange() {
     this.classList.add(FlowRdfFormControl.FLOW_UI_FORM_CONTROL_CLASS);
@@ -412,6 +415,7 @@ const _FlowUiQueryBuilder = class _FlowUiQueryBuilder extends FlowRdfElement {
       "query-builder--large": this.size === "large",
       "query-builder--disabled": this.disabled,
       "query-builder--tree-lines": this.treeLines,
+      "query-builder--has-border": this.borders,
       "query-builder--no-rules": this.subQueryBuilder && this._value.rules.length === 0
     })}
         >
@@ -466,7 +470,7 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], _FlowUiQueryBuilder.prototype, "disabled", 2);
 __decorateClass([
-  property()
+  property({ reflect: true })
 ], _FlowUiQueryBuilder.prototype, "label", 2);
 __decorateClass([
   property({ attribute: "help-text" })
@@ -477,6 +481,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, attribute: "sub-query-builder" })
 ], _FlowUiQueryBuilder.prototype, "subQueryBuilder", 2);
+__decorateClass([
+  property({ type: Boolean })
+], _FlowUiQueryBuilder.prototype, "borders", 2);
 __decorateClass([
   watch("class")
 ], _FlowUiQueryBuilder.prototype, "handleClassChange", 1);

package/dist/components/query-builder/query-builder.styles.mjs

@@ -12,6 +12,10 @@ const styles = css`
     --footer-spacing: var(--flow-ui-spacing-x-small);
   }
 
+  :host([label]) {
+    margin-top: var(--flow-ui-spacing-x-large);
+  }
+
   .form-control__label {
     font-weight: var(--flow-ui-font-weight-semibold);
   }
@@ -41,6 +45,14 @@ const styles = css`
     padding-inline: 0;
   }
 
+  .query-builder.query-builder--has-border {
+    margin-inline: calc(var(--control-spacing) * -1 - var(--control-border-width));
+    padding-top: var(--flow-ui-spacing-x-small);
+    padding-inline: var(--control-spacing);
+    border: solid var(--control-border-width) var(--control-border-color);
+    border-radius: var(--control-border-radius);
+  }
+
   /* Rule */
   .query-builder__rule:not(.query-builder--child) {
     display: flex;

package/dist/components/range/range.styles.mjs

@@ -9,7 +9,7 @@ const styles = css`
   :host {
     --thumb-size: 14px;
     --track-color-active: var(--flow-ui-color-primary-500);
-    --track-color-inactive: var(--flow-ui-color-neutral-200);
+    --track-color-inactive: var(--flow-ui-color-neutral-600);
     --track-active-offset: 0%;
     --track-height: 6px;
 
@@ -36,6 +36,10 @@ const styles = css`
     grid-template-columns: 1fr 1fr;
   }
 
+  .form-control.form-control--inline .form-control__input {
+    background-color: transparent;
+  }
+
   .form-control .form-control__input,
   .form-control:not(.form-control--disabled) .form-control__input:hover,
   .form-control:not(.form-control--disabled).form-control--focused .form-control__input {

package/dist/components/select/select.styles.mjs

@@ -112,6 +112,14 @@ const styles = css`
     color: var(--flow-ui-control-placeholder-color);
   }
 
+  .form-control.form-control--disabled .select__display-input::placeholder {
+    color: var(--flow-ui-control-placeholder-color-disabled);
+  }
+
+  .form-control.form-control--disabled .select__display-input {
+    color: var(--flow-ui-control-color-disabled);
+  }
+
   .select:not(.select--disabled):hover .select__display-input {
     color: var(--flow-ui-control-color-hover);
   }
@@ -275,6 +283,7 @@ const styles = css`
   .select__listbox ::slotted(flow-ui-divider) {
     --spacing: var(--flow-ui-spacing-x-small);
     --inset: var(--flow-ui-spacing-medium);
+    --color: var(--flow-ui-menu-divider-color);
   }
 
   .select__listbox ::slotted(small) {

package/dist/components/spinner/spinner.styles.mjs

@@ -6,7 +6,7 @@ const styles = css`
 
   :host {
     --track-width: 2px;
-    --track-color: rgb(128 128 128 / 25%);
+    --track-color: var(--flow-ui-color-neutral-600);
     --indicator-color: var(--flow-ui-color-primary-500);
     --speed: 2s;
 

package/dist/components/stepper/stepper.styles.mjs

@@ -38,7 +38,7 @@ const styles = css`
   }
 
   .stepper__header-item--active {
-    background-color: var(--flow-ui-color-neutral-200);
+    background-color: var(--flow-ui-color-neutral-400);
   }
 
   .stepper__header-item-icon {
@@ -49,7 +49,7 @@ const styles = css`
     flex: none;
     border-radius: var(--flow-ui-border-radius-circle);
     color: var(--flow-ui-color-neutral-800);
-    background-color: var(--flow-ui-color-neutral-400);
+    background-color: var(--flow-ui-color-neutral-500);
   }
 
   .stepper__header-item--active .stepper__header-item-icon,
@@ -73,7 +73,7 @@ const styles = css`
     min-width: 50px;
     vertical-align: middle;
     line-height: var(--flow-ui-line-height-dense);
-    color: var(--flow-ui-color-neutral-700);
+    color: var(--flow-ui-color-neutral-800);
   }
 
   .stepper__header-item--active .stepper__header-item-label {
@@ -86,8 +86,7 @@ const styles = css`
   }
 
   .stepper__header-item-subtitle {
-    font-size: var(--flow-ui-font-size-small);
-    color: var(--flow-ui-color-neutral-700);
+    font-size: var(--flow-ui-font-size-800);
   }
 
   .stepper__header-line {
@@ -97,7 +96,7 @@ const styles = css`
     height: 0;
     margin: 0 calc(var(--flow-ui-spacing-large) / -2);
     min-width: 32px;
-    border-top-color: var(--flow-ui-color-neutral-300);
+    border-top-color: var(--flow-ui-color-neutral-600);
   }
 `;
 

package/dist/components/switch/switch.styles.mjs

@@ -99,7 +99,7 @@ const styles = css`
   }
 
   .switch--checked .switch__control .switch__thumb {
-    background-color: var(--flow-ui-color-neutral-800);
+    background-color: var(--flow-ui-color-neutral-950);
     border-color: var(--flow-ui-color-primary-800);
     translate: calc((var(--switch-width) - var(--switch-height)) / 2);
   }

package/dist/components/tab-panel/tab-panel.component.mjs

@@ -26,11 +26,13 @@ class FlowUiTabPanel extends FlowRdfElement {
     this.name = "";
     this.active = false;
     this.scrollable = false;
+    this.padding = false;
   }
   connectedCallback() {
     super.connectedCallback();
     this.active = boolean(this.active, true);
     this.scrollable = boolean(this.scrollable, true);
+    this.padding = boolean(this.padding, true);
     this.id = this.id.length > 0 ? this.id : this.componentId;
     this.setAttribute("role", "tabpanel");
   }
@@ -43,7 +45,8 @@ class FlowUiTabPanel extends FlowRdfElement {
         class=${classMap({
       panel: true,
       "panel--active": this.active,
-      "panel--scrollable": this.scrollable
+      "panel--scrollable": this.scrollable,
+      "panel--with-padding": this.padding
     })}
       >
         <div class="panel__body-wrapper">
@@ -65,6 +68,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], FlowUiTabPanel.prototype, "scrollable", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiTabPanel.prototype, "padding", 2);
 __decorateClass([
   watch("active")
 ], FlowUiTabPanel.prototype, "handleActiveChange", 1);

package/dist/components/tab-panel/tab-panel.styles.mjs

@@ -8,7 +8,7 @@ const styles = css`
     display: none;
     min-height: 0;
 
-    --padding: 0;
+    --padding: var(--flow-ui-panel-padding);
   }
 
   :host([active]) {
@@ -33,12 +33,16 @@ const styles = css`
     overflow-y: auto;
   }
 
-  .panel--scrollable .panel__body {
+  .panel--scrollable.panel--with-padding .panel__body {
     padding: var(--padding);
   }
 
+  .panel--scrollable.panel--with-padding.panel--has-form-controls .panel__body {
+    padding: calc(var(--padding) * 1.5);
+  }
+
   /* For non-scrollable panel - fix body at 100% and disable scroll. Padding is added to wrapper */
-  .panel:not(.panel--scrollable) .panel__body-wrapper {
+  .panel.panel--with-padding:not(.panel--scrollable) .panel__body-wrapper {
     padding: var(--padding);
   }