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

package/dist/components/gauge/gauge.component.mjs

@@ -79,7 +79,7 @@ class FlowUiGauge extends FlowRdfElement {
   infoDialogTemplate() {
     return html`
       <flow-ui-dialog class="gauge__info-dialog">
-        <div slot="heading" class="gauge__info-dialog-heading">${this.headerIconTemplate()} ${this.label}</div>
+        <div slot="title" class="gauge__info-dialog-heading">${this.headerIconTemplate()} ${this.title}</div>
         <slot name="info"></slot>
         <div slot="footer">
           <flow-ui-button autofocus slot="footer" variant="primary" @click=${this.hideInfoDialog}>OK</flow-ui-button>
@@ -95,12 +95,13 @@ class FlowUiGauge extends FlowRdfElement {
         class=${classMap({
       gauge: true
     })}
+        title=""
       >
         <div part="header" class="gauge__header">
           ${this.headerIconTemplate()}
-          <span class="gauge__label-wrapper">
-            <span part="label" class="gauge__label">
-              <slot name="label">${this.label}</slot>
+          <span class="gauge__title-wrapper">
+            <span part="title" class="gauge__title">
+              <slot name="title">${this.title}</slot>
             </span>
           </span>
           ${hasInfo ? this.infoButtonTemplate() : nothing}
@@ -124,8 +125,8 @@ __decorateClass([
   query(".gauge__info-dialog")
 ], FlowUiGauge.prototype, "_infoDialog", 2);
 __decorateClass([
-  property()
-], FlowUiGauge.prototype, "label", 2);
+  property({ reflect: true })
+], FlowUiGauge.prototype, "title", 2);
 __decorateClass([
   property()
 ], FlowUiGauge.prototype, "units", 2);

package/dist/components/gauge/gauge.styles.mjs

@@ -56,13 +56,13 @@ const styles = css`
   }
 
   /* Wrapper needed to support text ellipsis in flex item */
-  .gauge__label-wrapper {
+  .gauge__title-wrapper {
     flex: 1;
     min-width: 0;
     display: flex;
   }
 
-  .gauge__label {
+  .gauge__title {
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;

package/dist/components/icon/library.system.mjs

@@ -143,7 +143,8 @@ const icons = {
   plus: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="flow-ui-icon"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32v144H48c-17.7 0-32 14.3-32 32s14.3 32 32 32h144v144c0 17.7 14.3 32 32 32s32-14.3 32-32V288h144c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"/></svg>',
   "square-plus": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="flow-ui-icon"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M64 32C28.7 32 0 60.7 0 96v320c0 35.3 28.7 64 64 64h320c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zm136 312v-64h-64c-13.3 0-24-10.7-24-24s10.7-24 24-24h64v-64c0-13.3 10.7-24 24-24s24 10.7 24 24v64h64c13.3 0 24 10.7 24 24s-10.7 24-24 24h-64v64c0 13.3-10.7 24-24 24s-24-10.7-24-24z"/></svg>',
   "square-minus": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="flow-ui-icon"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M64 32C28.7 32 0 60.7 0 96v320c0 35.3 28.7 64 64 64h320c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zm88 200h144c13.3 0 24 10.7 24 24s-10.7 24-24 24H152c-13.3 0-24-10.7-24-24s10.7-24 24-24z"/></svg>',
-  "ellipsis-vertical": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 512' class='flow-ui-icon'><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d='M64 360a56 56 0 100 112 56 56 0 100-112zm0-160a56 56 0 100 112 56 56 0 100-112zm56-104A56 56 0 108 96a56 56 0 10112 0z'/></svg>"
+  "ellipsis-vertical": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 512' class='flow-ui-icon'><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d='M64 360a56 56 0 100 112 56 56 0 100-112zm0-160a56 56 0 100 112 56 56 0 100-112zm56-104A56 56 0 108 96a56 56 0 10112 0z'/></svg>",
+  bars: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' class='flow-ui-icon'><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d='M0 96c0-17.7 14.3-32 32-32h384c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zm0 160c0-17.7 14.3-32 32-32h384c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zm448 160c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32h384c17.7 0 32 14.3 32 32z'/></svg>"
 };
 const systemLibrary = {
   name: "system",

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/list/list.component.mjs

@@ -0,0 +1,101 @@
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import FlowRdfElement from '../../internal/flow-ui-rdf-element.mjs';
+import styles from './list.styles.mjs';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+class FlowUiList extends FlowRdfElement {
+  constructor() {
+    super();
+    this.draggedItem = null;
+    this.draggedOverItem = null;
+    this.readonly = false;
+    this.reorder = false;
+    this.removable = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+  }
+  get listItems() {
+    return [...this.querySelectorAll("flow-ui-list-item")];
+  }
+  handleDragStart(ev) {
+    this.draggedItem = ev.target;
+    console.log(`parent drag start: ${this.draggedItem.value}`, this.draggedItem);
+  }
+  handleDragOver(ev) {
+    ev.stopPropagation();
+    if (!this.draggedItem) {
+      return;
+    }
+    let target = ev.target.closest("flow-ui-list-item");
+    if (target === this.draggedItem) {
+      target = null;
+    }
+    if (target && target !== this.draggedOverItem) {
+      if (this.draggedItem === target.previousElementSibling) {
+        console.log("moving down");
+        this.insertBefore(this.draggedItem, target.nextSibling);
+      } else if (this.draggedItem === target.nextElementSibling) {
+        this.insertBefore(this.draggedItem, target);
+      }
+      this.draggedOverItem = null;
+    } else {
+      this.draggedOverItem = target;
+    }
+  }
+  handleDrop(_ev) {
+    if (!this.draggedItem || !this.draggedOverItem) {
+      return;
+    }
+    console.log(`parent drop: ${this.draggedItem.value} onto target: ${this.draggedOverItem.value}`);
+  }
+  handleDragEnd(ev) {
+    const target = ev.target.value;
+    console.log(`parent drag end: target: ${target}`);
+    this.draggedItem = null;
+    this.draggedOverItem = null;
+  }
+  render() {
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+      list: true
+    })}
+        @flow-ui-drag-start=${this.handleDragStart}
+        @flow-ui-drag-over=${this.handleDragOver}
+        @flow-ui-drag-drop=${this.handleDrop}
+        @flow-ui-drag-end=${this.handleDragEnd}
+      >
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+FlowUiList.styles = styles;
+__decorateClass([
+  property({ type: Boolean })
+], FlowUiList.prototype, "readonly", 2);
+__decorateClass([
+  property({ type: Boolean })
+], FlowUiList.prototype, "reorder", 2);
+__decorateClass([
+  property({ type: Boolean })
+], FlowUiList.prototype, "removable", 2);
+
+export { FlowUiList as default };

package/dist/components/list/list.mjs

@@ -0,0 +1,5 @@
+import FlowUiList from './list.component.mjs';
+
+
+
+export { FlowUiList as default };

package/dist/components/list/list.styles.mjs

@@ -0,0 +1,21 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles.mjs';
+
+const styles = css`
+  ${componentStyles}
+
+  :host {
+    display: block;
+
+    --divider-color: var(--flow-ui-divider-color);
+  }
+
+  .list {
+    display: flex;
+    flex-direction: column;
+    gap: max(var(--flow-ui-divider-width), 2px);
+    background-color: var(--divider-color);
+  }
+`;
+
+export { styles as default };

package/dist/components/list-item/list-item.component.mjs

@@ -0,0 +1,197 @@
+import { html, nothing } 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 { HasSlotController } from '../../internal/slot.mjs';
+import styles from './list-item.styles.mjs';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+class FlowUiListItem extends FlowRdfElement {
+  constructor() {
+    super();
+    this.hasSlotController = new HasSlotController(this, "prefix", "suffix", "menu");
+    this.readonly = false;
+    this.reorder = false;
+    this.removable = false;
+    this.handleDragStart = (ev) => {
+      ev.stopPropagation();
+      ev.dataTransfer.setData("application/flow-ui-list-item", this.value);
+      ev.dataTransfer.effectAllowed = "move";
+      this.emit("flow-ui-drag-start");
+    };
+    this.handleDragStart = this.handleDragStart.bind(this);
+    this.handleDragOver = this.handleDragOver.bind(this);
+    this.handleDrop = this.handleDrop.bind(this);
+    this.handleDragEnd = this.handleDragEnd.bind(this);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.readonly = boolean(this.readonly);
+    this.reorder = boolean(this.reorder);
+    this.removable = boolean(this.removable);
+    this.addEventListener("dragover", this.handleDragOver);
+    this.addEventListener("drop", this.handleDrop);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("dragover", this.handleDragOver);
+    this.removeEventListener("drop", this.handleDrop);
+  }
+  rename() {
+    this.input.focus();
+  }
+  handleMenuSelect(ev) {
+    const menuItem = ev.detail.item;
+    if (menuItem.value === "rename") {
+      this.updateComplete.then(() => this.rename());
+    } else if (menuItem.value === "remove") {
+      const requestRemove = this.emit("flow-ui-remove", { cancelable: true });
+      if (!requestRemove.defaultPrevented) {
+        this.remove();
+      }
+    }
+  }
+  handleInputEvents(ev) {
+    if (ev.type === "flow-ui-change") {
+      this.label = this.input.value;
+      this.input.blur();
+    } else {
+      ev.stopPropagation();
+    }
+  }
+  handleReorderPointerDown(_ev) {
+    this.addEventListener("dragstart", this.handleDragStart);
+    console.log("adding dragstart");
+    this.addEventListener("dragend", this.handleDragEnd);
+    this.setAttribute("draggable", "true");
+  }
+  handleReorderPointerUp(_ev) {
+    this.removeEventListener("dragstart", this.handleDragStart);
+    console.log("removing dragstart");
+    this.removeEventListener("dragend", this.handleDragEnd);
+    this.removeAttribute("draggable");
+  }
+  handleDragOver(ev) {
+    ev.stopPropagation();
+    ev.preventDefault();
+    if (ev.dataTransfer?.types.includes("application/flow-ui-list-item")) {
+      ev.dataTransfer.dropEffect = "move";
+      this.emit("flow-ui-drag-over");
+    }
+  }
+  handleDragEnd(ev) {
+    ev.stopPropagation();
+    this.removeEventListener("dragstart", this.handleDragStart);
+    console.log("removing dragstart");
+    this.removeEventListener("dragend", this.handleDragEnd);
+    this.removeAttribute("draggable");
+    this.emit("flow-ui-drag-end");
+  }
+  handleDrop(ev) {
+    ev.preventDefault();
+    ev.stopPropagation();
+    this.emit("flow-ui-drag-drop");
+  }
+  renderMenu() {
+    const hasCustomMenuDivider = (!this.readonly || this.removable) && this.hasSlotController.test("menu");
+    return html`
+      <flow-ui-dropdown placement="bottom-end" class="list-item__menu-dropdown">
+        <flow-ui-icon-button
+          part="menu-button"
+          class="list-item__menu-button"
+          slot="trigger"
+          name="ellipsis-vertical"
+          library="system"
+        ></flow-ui-icon-button>
+        <flow-ui-menu @flow-ui-select=${this.handleMenuSelect}>
+          ${!this.readonly ? html`
+                <flow-ui-menu-item value="rename">Rename</flow-ui-menu-item>
+              ` : nothing}
+          ${this.removable ? html`
+                <flow-ui-menu-item value="remove">Delete</flow-ui-menu-item>
+              ` : nothing}
+          ${hasCustomMenuDivider ? html`
+                <flow-ui-divider></flow-ui-divider>
+              ` : nothing}
+          ${this.hasSlotController.test("menu") ? html`
+                <slot name="menu"></slot>
+              ` : nothing}
+        </flow-ui-menu>
+        <slot name="menu"></slot>
+      </flow-ui-dropdown>
+    `;
+  }
+  render() {
+    const hasMenu = this.readonly || this.removable || this.hasSlotController.test("menu");
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+      "list-item": true,
+      "list-item--has-prefix": this.hasSlotController.test("prefix"),
+      "list-item--has-suffix": this.hasSlotController.test("suffix"),
+      "list-item--has-menu": this.hasSlotController.test("menu"),
+      "list-item--readonly": this.readonly
+    })}
+      >
+        ${this.reorder ? html`
+              <flow-ui-icon
+                part="reorder-icon"
+                name="bars"
+                library="system"
+                class="list-item__reorder-icon"
+                @pointerdown=${this.handleReorderPointerDown}
+                @pointerup=${this.handleReorderPointerUp}
+              ></flow-ui-icon>
+            ` : nothing}
+        <slot name="prefix" part="prefix" class="list-item__prefix"></slot>
+
+        <flow-ui-input
+          exportparts="input"
+          inline
+          class="list-item__input"
+          .value=${this.label}
+          .readonly=${this.readonly}
+          @flow-ui-change=${this.handleInputEvents}
+          @flow-ui-input=${this.handleInputEvents}
+        ></flow-ui-input>
+        <div class="list-item__spacer"></div>
+        <slot name="suffix" part="suffix" class="list-item__suffix"></slot>
+
+        ${hasMenu ? this.renderMenu() : nothing}
+      </div>
+    `;
+  }
+}
+FlowUiListItem.styles = styles;
+__decorateClass([
+  query(".list-item__input")
+], FlowUiListItem.prototype, "input", 2);
+__decorateClass([
+  property({ reflect: true })
+], FlowUiListItem.prototype, "label", 2);
+__decorateClass([
+  property({ reflect: true })
+], FlowUiListItem.prototype, "value", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiListItem.prototype, "readonly", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiListItem.prototype, "reorder", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiListItem.prototype, "removable", 2);
+
+export { FlowUiListItem as default };

package/dist/components/list-item/list-item.mjs

@@ -0,0 +1,5 @@
+import FlowUiListItem from './list-item.component.mjs';
+
+
+
+export { FlowUiListItem as default };

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

@@ -0,0 +1,63 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles.mjs';
+
+const styles = css`
+  ${componentStyles}
+
+  :host {
+    display: block;
+    --padding: var(--flow-ui-list-item-padding);
+    --height: var(--flow-ui-list-item-height);
+    --color: var(--flow-ui-list-item-color);
+    --accessory-color: var(--flow-ui-list-item-accessory-color);
+    --background-color: var(--flow-ui-list-item-background-color);
+  }
+
+  :host([draggable='true']) {
+    opacity: 0.1;
+  }
+
+  .list-item {
+    display: flex;
+    align-items: center;
+    gap: var(--flow-ui-spacing-small);
+
+    height: var(--height);
+    padding: var(--padding);
+
+    color: var(--color);
+    background-color: var(--background-color);
+    user-select: none;
+  }
+
+  .list-item__prefix,
+  .list-item__suffix,
+  .list-item__menu-button,
+  .list-item__reorder-icon {
+    color: var(--accessory-color);
+  }
+
+  .list-item__spacer {
+    flex: 1;
+  }
+
+  .list-item.list-item--readonly .list-item__input::part(form-control) {
+    --control-background-color-hover: transparent;
+    --control-border-color-hover: transparent;
+    --control-background-color-focus: transparent;
+  }
+
+  .list-item__menu-button {
+    visibility: hidden;
+  }
+
+  .list-item:hover .list-item__menu-button {
+    visibility: visible;
+  }
+
+  .list-item__reorder-icon {
+    cursor: move;
+  }
+`;
+
+export { styles as default };

package/dist/components/map/map.component.mjs

@@ -29,6 +29,7 @@ class FlowUiMap extends FlowRdfElement {
     this.busy = false;
     this.fixed = false;
     this.bearingSnap = 7;
+    this.fadeDuration = 300;
     this._initialized = new Promise((resolve) => {
       this._resolveInitialized = resolve;
     });
@@ -94,7 +95,8 @@ class FlowUiMap extends FlowRdfElement {
       baseStyle: this.baseStyle,
       center: this.center,
       zoom: this.zoom,
-      bearingSnap: this.bearingSnap
+      bearingSnap: this.bearingSnap,
+      fadeDuration: this.fadeDuration
     });
     await map.initialized;
     if (this._pendingCenter) {
@@ -193,6 +195,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Number, attribute: "bearing-snap" })
 ], FlowUiMap.prototype, "bearingSnap", 2);
+__decorateClass([
+  property({ type: Number, attribute: "fade-duration" })
+], FlowUiMap.prototype, "fadeDuration", 2);
 __decorateClass([
   watch(["center", "zoom", "bearing", "pitch"])
 ], FlowUiMap.prototype, "handleCenterChange", 1);

package/dist/components/map/map.styles.mjs

@@ -27,6 +27,7 @@ const styles = css`
 
   .map--fixed ::slotted(.maplibregl-map) {
     position: fixed !important;
+    inset: var(--flow-ui-map-inset, 0);
   }
 
   .map__overlay {

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/menu-label/menu-label.styles.mjs

@@ -15,7 +15,7 @@ const styles = css`
     font-weight: var(--flow-ui-font-weight-semibold);
     line-height: var(--flow-ui-line-height-normal);
     letter-spacing: var(--flow-ui-letter-spacing-normal);
-    color: var(--flow-ui-color-neutral-500);
+    color: var(--flow-ui-color-neutral-800);
     padding: var(--flow-ui-spacing-2x-small) var(--flow-ui-spacing-x-large);
     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.component.mjs

@@ -82,6 +82,7 @@ class FlowUiPanelHeader extends FlowRdfElement {
         tabindex="0"
         @click=${this.handleHeaderClick}
         @keydown=${this.handleHeaderKeyDown}
+        title=""
       >
         <slot
           name="prefix"
@@ -91,8 +92,8 @@ class FlowUiPanelHeader extends FlowRdfElement {
           @keydown=${this.handleHeaderKeyDown}
         ></slot>
 
-        <slot name="label" part="label" class="panel-header__label-slot">
-          <span class="panel-header__label">${this.label}</span>
+        <slot name="title" part="title" class="panel-header__title-slot">
+          <span class="panel-header__title">${this.title}</span>
         </slot>
 
         <slot
@@ -122,8 +123,8 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], FlowUiPanelHeader.prototype, "closed", 2);
 __decorateClass([
-  property()
-], FlowUiPanelHeader.prototype, "label", 2);
+  property({ reflect: true })
+], FlowUiPanelHeader.prototype, "title", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], FlowUiPanelHeader.prototype, "fixed", 2);

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

@@ -33,14 +33,15 @@ const styles = css`
     color: var(--accessory-color);
   }
 
-  .panel-header__label-slot {
+  .panel-header__title-slot {
     display: flex;
     align-items: center;
     flex: 1;
     min-width: 0;
   }
 
-  .panel-header__label {
+  .panel-header__title {
+    font-size: var(--flow-ui-panel-header-font-size);
     font-weight: var(--flow-ui-panel-header-font-weight);
     text-overflow: ellipsis;
     overflow: hidden;