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

package/dist/components/query-builder/converters/flow-query-converters.mjs

@@ -8,7 +8,7 @@ function isStringType(field) {
 }
 function whereClausesFromRuleSet(rule, config, options) {
   if (isRule(rule)) {
-    if (!rule.enabled) {
+    if (!rule.enabled || !rule.field) {
       return void 0;
     }
     if (isNil(rule.field) || isNil(rule.operator)) {
@@ -16,10 +16,6 @@ function whereClausesFromRuleSet(rule, config, options) {
       return void 0;
     }
     const field = config.fields[rule.field];
-    if (!field) {
-      console.warn(`flowQueryConverter: Skipping unknown field '${rule.field}' in rule`, rule);
-      return void 0;
-    }
     if (isNil(rule.value) && field.nullable !== true) {
       console.warn(`flowQueryConverter: Skipping nil field '${rule.field}' in rule (non-nullable)`, rule);
       return void 0;

package/dist/components/query-builder/converters/javascript-filter-converter.mjs

@@ -29,7 +29,7 @@ function convertDateTime(value, field) {
 }
 function rulesetToJavascript(rule, config, options) {
   if (isRule(rule)) {
-    if (!rule.enabled) {
+    if (!rule.enabled || !rule.field) {
       return void 0;
     }
     if (isNil(rule.field) || isNil(rule.operator)) {
@@ -37,10 +37,6 @@ function rulesetToJavascript(rule, config, options) {
       return void 0;
     }
     const field = config.fields[rule.field];
-    if (!field) {
-      console.warn(`JavascriptFilterConverter: Skipping unknown field '${rule.field}' in rule`, rule);
-      return void 0;
-    }
     if (isNil(rule.value) && field.nullable !== true) {
       console.warn(`JavascriptFilterConverter: Skipping nil field '${rule.field}' in rule (non-nullable)`, rule);
       return void 0;

package/dist/components/query-builder/converters/map-layer-filter-converter.mjs

@@ -8,7 +8,7 @@ function isStringType(field) {
 }
 function mapLayerFilterFromRuleSet(rule, config, options) {
   if (isRule(rule)) {
-    if (!rule.enabled) {
+    if (!rule.enabled || !rule.field) {
       return void 0;
     }
     if (isNil(rule.field) || isNil(rule.operator)) {
@@ -16,10 +16,6 @@ function mapLayerFilterFromRuleSet(rule, config, options) {
       return void 0;
     }
     const field = config.fields[rule.field];
-    if (!field) {
-      console.warn(`mapLayerFilterConverter: Skipping unknown field '${rule.field}' in rule`, rule);
-      return void 0;
-    }
     if (isNil(rule.value) && field.nullable !== true) {
       console.warn(`mapLayerFilterConverter: Skipping nil field '${rule.field}' in rule (non-nullable)`, rule);
       return void 0;

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

@@ -35,8 +35,22 @@ function transformRuleSet(ruleSet, transformFn, clone = true) {
   }).filter(isRuleOrRuleset);
   return ruleSet;
 }
+function countRuleSet(ruleset) {
+  const activeFilters = (ruleSet) => {
+    let count = 0;
+    for (const rule of ruleSet.rules) {
+      if (isRule(rule) && rule.field && rule.enabled) {
+        count += 1;
+      } else if (isRuleSet(rule)) {
+        count += activeFilters(rule);
+      }
+    }
+    return count;
+  };
+  return activeFilters(ruleset);
+}
 const isRule = (r) => isObjectFull(r) && "field" in r;
 const isRuleSet = (r) => isObjectFull(r) && "rules" in r;
 const isRuleOrRuleset = (r) => isRule(r) || isRuleSet(r);
 
-export { filterRuleSet, isRule, isRuleOrRuleset, isRuleSet, renameRuleSetFields, transformRuleSet };
+export { countRuleSet, filterRuleSet, isRule, isRuleOrRuleset, isRuleSet, renameRuleSetFields, transformRuleSet };

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);
@@ -115,11 +118,14 @@ const _FlowUiQueryBuilder = class _FlowUiQueryBuilder extends FlowRdfElement {
    */
   handleRemoveRule(ev, index) {
     ev.stopPropagation();
-    this._value.rules.splice(index, 1);
-    this.requestUpdate();
-    this.updateComplete.then(() => {
-      this.emitValueChange();
-    });
+    const confirmDelete = this.emit("flow-ui-remove", { cancelable: true });
+    if (!confirmDelete.defaultPrevented) {
+      this._value.rules.splice(index, 1);
+      this.requestUpdate();
+      this.updateComplete.then(() => {
+        this.emitValueChange();
+      });
+    }
   }
   handleSubQueryValueChange(ev) {
     ev.stopPropagation();
@@ -157,9 +163,12 @@ const _FlowUiQueryBuilder = class _FlowUiQueryBuilder extends FlowRdfElement {
       const duplicateRule = cloneDeep(rule);
       this._value.rules.splice(index, 0, duplicateRule);
     } else if (menuItem.value === "delete") {
-      this._value.rules.splice(index, 1);
-      if (this._value.rules.length === 0) {
-        this._value.rules.push({ field: "", operator: "=", enabled: true });
+      const confirmDelete = this.emit("flow-ui-remove", { cancelable: true });
+      if (!confirmDelete.defaultPrevented) {
+        this._value.rules.splice(index, 1);
+        if (this._value.rules.length === 0) {
+          this._value.rules.push({ field: "", operator: "=", enabled: true });
+        }
       }
     }
     this.requestUpdate();
@@ -180,8 +189,13 @@ const _FlowUiQueryBuilder = class _FlowUiQueryBuilder extends FlowRdfElement {
     } else if (menuItem.value === "delete-group") {
       this.emit("flow-ui-remove");
     } else if (menuItem.value === "clear-filters") {
-      updateValue = true;
+      updateValue = false;
       this._value = emptyRuleSet;
+      this.requestUpdate();
+      this.updateComplete.then(() => {
+        this.emitValueChange();
+        this.emit("flow-ui-clear");
+      });
     }
     if (updateValue) {
       this.requestUpdate();
@@ -222,7 +236,6 @@ const _FlowUiQueryBuilder = class _FlowUiQueryBuilder extends FlowRdfElement {
           size=${andOrSize}
           pill
           outline
-          variant="secondary"
           class="query-builder-and-or-button-group"
           value=${ruleSet.condition}
           @flow-ui-change=${this.handleConditionChange}
@@ -247,6 +260,10 @@ const _FlowUiQueryBuilder = class _FlowUiQueryBuilder extends FlowRdfElement {
             library="system"
           ></flow-ui-icon-button>
           <flow-ui-menu @flow-ui-select=${(ev) => this.handleToolbarMenuSelect(ev)}>
+            ${this.hasSlotController.test("menu") ? html`
+                  <slot name="menu"></slot>
+                  <flow-ui-divider></flow-ui-divider>
+                ` : nothing}
             <flow-ui-menu-item value="add-group">Add Filter Group</flow-ui-menu-item>
             ${this.subQueryBuilder ? html`
                   <flow-ui-divider></flow-ui-divider>
@@ -254,10 +271,6 @@ const _FlowUiQueryBuilder = class _FlowUiQueryBuilder extends FlowRdfElement {
                     Delete Filter Group
                   </flow-ui-menu-item>
                 ` : nothing}
-            ${this.hasSlotController.test("menu") ? html`
-                  <flow-ui-divider></flow-ui-divider>
-                  <slot name="menu"></slot>
-                ` : nothing}
             ${this.subQueryBuilder ? nothing : html`
                   <flow-ui-divider></flow-ui-divider>
                   <flow-ui-menu-item value="clear-filters" class="menu-item--danger">Clear Filters</flow-ui-menu-item>
@@ -382,7 +395,8 @@ const _FlowUiQueryBuilder = class _FlowUiQueryBuilder extends FlowRdfElement {
       "form-control--medium": this.size === "medium",
       "form-control--large": this.size === "large",
       "form-control--has-label": hasLabel,
-      "form-control--has-help-text": hasHelpText
+      "form-control--has-help-text": hasHelpText,
+      "form-control--has-border": this.borders
     })}
       >
         <label
@@ -412,6 +426,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
     })}
         >
@@ -436,11 +451,11 @@ const _FlowUiQueryBuilder = class _FlowUiQueryBuilder extends FlowRdfElement {
             >
               Add filter
             </flow-ui-tool-button>
-            <div part="footer-accessories" class="query-builder__footer-auxiliary">
-              <slot name="footer-accessory"></slot>
-            </div>
           </div>
         </div>
+        <div part="footer-accessories" class="query-builder__footer-auxiliary">
+          <slot name="footer-accessory"></slot>
+        </div>
       </div>
     `;
   }
@@ -466,7 +481,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 +492,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;
@@ -103,17 +115,17 @@ const styles = css`
     right: 5px;
     z-index: 1;
 
-    border-bottom: 1px solid var(--flow-ui-color-neutral-300);
+    border-bottom: 1px solid var(--flow-ui-color-danger-300);
   }
 
   .query-builder__rule-menu-button {
     margin-inline: calc(var(--flow-ui-spacing-x-small) * -1);
-    color: var(--flow-ui-color-neutral-400);
+    color: var(--flow-ui-color-neutral-700);
   }
 
   .query-builder__toolbar:hover .query-builder__rule-menu-button,
   .query-builder__rule:hover .query-builder__rule-menu-button {
-    color: var(--flow-ui-color-neutral-600);
+    color: var(--flow-ui-color-neutral-900);
   }
 
   .menu-item--danger::part(base) {
@@ -291,9 +303,13 @@ const styles = css`
     display: flex;
     flex: 1;
     justify-content: end;
-    gap: var(--flow-ui-spacing-x-small);
+    gap: var(--flow-ui-spacing-small);
 
-    padding-top: var(--flow-ui-spacing-small);
+    padding-top: var(--footer-spacing);
+  }
+
+  .form-control--has-border .query-builder__footer-auxiliary {
+    margin-right: calc(var(--control-spacing) * -1 - var(--control-border-width));
   }
 
   .query-builder__footer ::slotted(flow-ui-button:not(:first-of-type)) {

package/dist/components/range/range.component.mjs

@@ -114,7 +114,7 @@ class FlowUiRange extends FlowRdfFormControl {
   }
   handleValueChange() {
     this.formControlController.updateValidity();
-    this.input.value = this.value.toString();
+    this.input.value = this.value?.toString();
     this.value = parseFloat(this.input.value);
     this.syncRange();
   }

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

@@ -9,7 +9,27 @@ const styles = css`
   :host {
     display: inline-block;
     --switch-height: var(--flow-ui-toggle-size-medium);
-    --switch-thumb-size: calc(var(--flow-ui-toggle-size-medium));
+
+    --switch-color: var(--flow-ui-switch-color, var(--flow-ui-color-neutral-400));
+    --switch-border-color: var(--flow-ui-switch-border-color, var(--flow-ui-color-neutral-500));
+
+    --switch-color-hover: var(--flow-ui-switch-color-hover, var(--flow-ui-color-neutral-400));
+    --switch-border-color-hover: var(--flow-ui-switch-border-color-hover, var(--flow-ui-color-neutral-500));
+
+    --switch-color-checked: var(--flow-ui-switch-color-checked, var(--flow-ui-color-primary-500));
+    --switch-border-color-checked: var(--flow-ui-switch-border-color-checked, var(--flow-ui-color-primary-500));
+
+    --thumb-color: var(--flow-ui-switch-thumb-color, var(--flow-ui-color-neutral-800));
+    --thumb-border-color: var(--flow-ui-switch-thumb-border-color, var(--flow-ui-color-neutral-800));
+
+    --thumb-color-hover: var(--flow-ui-switch-thumb-color-hover, var(--flow-ui-color-neutral-900));
+    --thumb-border-color-hover: var(--flow-ui-switch-thumb-border-color-hover, var(--flow-ui-color-neutral-950));
+
+    --thumb-color-checked: var(--flow-ui-switch-thumb-color-checked, var(--flow-ui-color-neutral-950));
+    --thumb-border-color-checked: var(--flow-ui-switch-thumb-border-color-checked, var(--flow-ui-color-neutral-950));
+
+    --thumb-size: calc(var(--flow-ui-toggle-size-medium));
+
     --switch-width: calc(var(--switch-height) * 1.8);
   }
 
@@ -44,8 +64,8 @@ const styles = css`
     justify-content: center;
     width: var(--switch-width);
     height: var(--switch-height);
-    background-color: var(--flow-ui-color-neutral-300);
-    border: solid var(--flow-ui-control-border-width) var(--flow-ui-color-neutral-400);
+    background-color: var(--switch-color);
+    border: solid var(--flow-ui-control-border-width) var(--switch-border-color);
     border-radius: var(--switch-height);
     transition:
       var(--flow-ui-transition-fast) border-color,
@@ -54,11 +74,11 @@ const styles = css`
   }
 
   .switch__control .switch__thumb {
-    width: var(--switch-thumb-size);
-    height: var(--switch-thumb-size);
-    background-color: var(--flow-ui-color-neutral-800);
+    width: var(--thumb-size);
+    height: var(--thumb-size);
+    background-color: var(--thumb-color);
     border-radius: 50%;
-    border: solid var(--flow-ui-control-border-width) var(--flow-ui-color-neutral-800);
+    border: solid var(--flow-ui-control-border-width) var(--thumb-border-color);
     translate: calc((var(--switch-width) - var(--switch-height)) / -2);
     transition:
       var(--flow-ui-transition-fast) translate ease,
@@ -77,13 +97,13 @@ const styles = css`
 
   /* Hover */
   .form-control:not(.switch--checked):not(.switch--disabled) .switch__control:hover {
-    background-color: var(--flow-ui-color-neutral-400);
-    border-color: var(--flow-ui-control-border-color);
+    background-color: var(--switch-color-hover);
+    border-color: var(--switch-border-color-hover);
   }
 
   .form-control:not(.switch--checked):not(.switch--disabled) .switch__control:hover .switch__thumb {
-    background-color: var(--flow-ui-color-neutral-900);
-    border-color: var(--flow-ui-color-neutral-900);
+    background-color: var(--thumb-color-hover);
+    border-color: var(--thumb-border-color-hover);
   }
 
   /* Focus */
@@ -94,13 +114,13 @@ const styles = css`
 
   /* Checked */
   .switch--checked .switch__control {
-    background-color: var(--flow-ui-color-primary-500);
-    border-color: var(--flow-ui-color-primary-500);
+    background-color: var(--switch-color-checked);
+    border-color: var(--switch-border-color-checked);
   }
 
   .switch--checked .switch__control .switch__thumb {
-    background-color: var(--flow-ui-color-neutral-800);
-    border-color: var(--flow-ui-color-primary-800);
+    background-color: var(--thumb-color-checked);
+    border-color: var(--thumb-border-color-checked);
     translate: calc((var(--switch-width) - var(--switch-height)) / 2);
   }
 

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

@@ -33,6 +33,7 @@ class FlowUiTab extends FlowRdfElement {
     this.iconOnly = false;
     this.closable = false;
     this.disabled = false;
+    this.placement = "top";
     this.tooltipPlacement = "top";
     this.tooltipDistance = -4;
     this.tooltipSkidding = 0;
@@ -143,6 +144,9 @@ __decorateClass([
 __decorateClass([
   property()
 ], FlowUiTab.prototype, "label", 2);
+__decorateClass([
+  property({ reflect: true })
+], FlowUiTab.prototype, "placement", 2);
 __decorateClass([
   property({ attribute: "tooltip-placement" })
 ], FlowUiTab.prototype, "tooltipPlacement", 2);

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

@@ -5,10 +5,12 @@ const styles = css`
   ${componentStyles}
 
   :host {
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
     --color: var(--flow-ui-tab-color);
     --active-label-color: var(--flow-ui-tab-active-label-color);
     --active-icon-color: var(--flow-ui-tab-active-icon-color);
+    --min-size: auto;
   }
 
   .tab {
@@ -30,6 +32,16 @@ const styles = css`
       var(--transition-speed) color;
   }
 
+  :host([placement='top']) .tab,
+  :host([placement='bottom']) .tab {
+    min-width: var(--min-size);
+  }
+
+  :host([placement='start']) .tab,
+  :host([placement='end']) .tab {
+    min-height: var(--min-size);
+  }
+
   /* Highlight icon only on hover */
   .tab:hover:not(.tab--disabled) .tab__icon {
     color: var(--flow-ui-tab-active-label-color);

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

@@ -259,6 +259,7 @@ class FlowUiTabGroup extends FlowRdfElement {
     this.panels = this.getAllPanels();
     this.tabs.forEach((tab) => {
       tab.tabGroup = this;
+      tab.placement = this.placement;
     });
     if (this._activeTab && this.tabs.includes(this._activeTab) === false) {
       this.setActiveTab(this.tabs.find((el) => !el.disabled) ?? this.tabs[0], { emitEvents: true });

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

@@ -46,6 +46,7 @@ const styles = css`
     display: flex;
     flex-direction: row;
     align-items: center;
+    flex-shrink: 0;
   }
 
   .tab-group__accessory-divider {

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);
   }