@emuanalytics/flow-rdf-ui 4.1.9 → 4.1.10

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

@@ -384,6 +384,7 @@ const _FlowUiQueryBuilder = class _FlowUiQueryBuilder extends FlowRdfElement {
         .value=${ruleSet}
         .config=${this.config}
         size=${this.size}
+        !borders=${this.borders}
         ?tree-lines=${this.treeLines}
         @flow-ui-change=${this.handleSubQueryValueChange}
         @flow-ui-remove=${(ev) => this.handleRemoveRule(ev, index)}

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

@@ -226,7 +226,7 @@ const styles = css`
     &::after {
       content: '';
       left: -10px;
-      border-color: var(--flow-ui-color-neutral-200);
+      border-color: var(--control-border-color);
       border-style: solid;
       width: 9px;
       position: absolute;
@@ -315,6 +315,14 @@ const styles = css`
   .query-builder__footer ::slotted(flow-ui-button:not(:first-of-type)) {
     margin-inline-start: var(--flow-ui-spacing-x-small);
   }
+
+  /* Sub query builder styling */
+
+  .query-builder--child[borders='true'] {
+    /* remove right border */
+    border-radius: var(--control-border-radius) 0 0 var(--control-border-radius);
+    border-right: 0;
+  }
 `;
 
 export { styles as default };

package/dist/components/split-view/split-view.component.mjs

@@ -23,6 +23,9 @@ var __decorateClass = (decorators, target, key, kind) => {
 class FlowUiSplitView extends FlowRdfElement {
   constructor() {
     super(...arguments);
+    // Saved panel layouts for restoring when panels are dynamically added/removed
+    // The key is a comma-separated concatenation of panel ids e.g. 'pane-1,pane-2,pane-3'
+    this._panelLayouts = {};
     this._panels = [];
     this.noDragClose = false;
     this.positions = ["auto", "auto", "auto", "auto"];
@@ -41,9 +44,11 @@ class FlowUiSplitView extends FlowRdfElement {
       const panelsRemoved = mutations.map((m) => Array.from(m.removedNodes.values())).flat().filter((n) => n instanceof FlowUiSplitViewPane);
       if (panelsAdded.length > 0) {
         this.handlePanelAdded(panelsAdded[0]);
+        console.log("Split view panel added:", this._panels.map((panel) => panel.id).join(":"));
       }
       if (panelsRemoved.length > 0) {
         this.handlePanelRemoved(panelsRemoved[0]);
+        console.log("Split view panel removed:", this._panels.map((panel) => panel.id).join(":"));
       }
       this.layoutPanels();
     });
@@ -302,6 +307,7 @@ class FlowUiSplitView extends FlowRdfElement {
     if (splitViewSize === 0) {
       return;
     }
+    this.savePanelLayouts();
     const numOpenPanels = this._panels.filter((panel) => !panel.closed && !panel.hidden).length;
     const panelSizes = this._panels.map((panel) => {
       if (panel.hidden) {
@@ -348,8 +354,11 @@ class FlowUiSplitView extends FlowRdfElement {
       panel.divider = !panel.hidden;
     }
     const lastVisiblePanel = this._panels.slice().reverse().find((panel) => !panel.hidden);
-    lastVisiblePanel.divider = false;
+    if (lastVisiblePanel) {
+      lastVisiblePanel.divider = false;
+    }
     this.positions = panelSizes.map((size) => size + "px");
+    console.log("Panel layouts", this._panelLayouts);
   }
   resizePanels() {
     const boundingRect = this.splitView.getBoundingClientRect();
@@ -459,20 +468,53 @@ class FlowUiSplitView extends FlowRdfElement {
   }
   handlePanelAdded(panel) {
     this.updatePanelInfo();
-    if (isUndefined(panel.size) || panel.size === "auto") {
-      panel.size = panel.minSize ?? "50px";
+    if (!this.restorePanelLayouts()) {
+      if (isUndefined(panel.size) || panel.size === "auto") {
+        panel.size = panel.minSize ?? "50px";
+      }
+      this.shrinkPanels(this._panels.length - 1, -1, true, this.sizeToPixels(panel.size));
     }
-    this.shrinkPanels(this._panels.length - 1, -1, true, this.sizeToPixels(panel.size));
   }
   handlePanelRemoved(panel) {
     this.updatePanelInfo();
-    this.growPanels(this._panels.length - 1, -1, true, this.sizeToPixels(panel.size));
+    if (!this.restorePanelLayouts()) {
+      this.growPanels(this._panels.length - 1, -1, true, this.sizeToPixels(panel.size));
+    }
   }
   updatePanelInfo() {
     this._panels = [...this.panelSlot.assignedElements()].filter(
       (el) => el.tagName.toLowerCase() === "flow-ui-split-view-pane"
     );
   }
+  // Key used to stor panel layouts for a given set of panels
+  // This is a comma-separated concatenation of panel ids e.g. 'pane-1,pane-2,pane-3'
+  panelLayoutsKey() {
+    return this._panels.map((panel) => panel.id).join(",");
+  }
+  savePanelLayouts() {
+    const panelLayoutsKey = this.panelLayoutsKey();
+    const panelLayouts = this._panels.map(
+      (panel) => ({ id: panel.id, size: panel.size, closed: panel.closed })
+    );
+    this._panelLayouts[panelLayoutsKey] = panelLayouts;
+    console.log("Saving panel layouts:", panelLayoutsKey, panelLayouts);
+  }
+  restorePanelLayouts() {
+    const panelLayoutsKey = this.panelLayoutsKey();
+    if (this._panelLayouts[panelLayoutsKey]) {
+      this._panelLayouts[panelLayoutsKey].forEach((panelLayout) => {
+        const panel = this._panels.find((p) => p.id === panelLayout.id);
+        if (panel) {
+          panel.size = panelLayout.size;
+          panel.closed = panelLayout.closed;
+        }
+      });
+      console.log("Restoring panel layouts:", panelLayoutsKey, this._panelLayouts[panelLayoutsKey]);
+      return true;
+    } else {
+      return false;
+    }
+  }
 }
 FlowUiSplitView.styles = styles;
 __decorateClass([

package/dist/components/split-view-pane/split-view-pane.component.mjs

@@ -5,6 +5,7 @@ import { boolean } from '../../internal/boolean.mjs';
 import FlowRdfElement from '../../internal/flow-ui-rdf-element.mjs';
 import { setDefaultAnimation } from '../../utilities/animation-registry.mjs';
 import styles from './split-view-pane.styles.mjs';
+import { isStringFull } from '../../internal/type-checks.mjs';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -17,9 +18,12 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
+let id = 0;
 class FlowUiSplitViewPane extends FlowRdfElement {
   constructor() {
     super(...arguments);
+    this.attrId = ++id;
+    this.componentId = `flow-ui-split-view-pane-${this.attrId}`;
     this.vertical = false;
     this.closed = false;
     this.divider = false;
@@ -27,6 +31,7 @@ class FlowUiSplitViewPane extends FlowRdfElement {
   }
   connectedCallback() {
     super.connectedCallback();
+    this.id = isStringFull(this.id) ? this.id : this.componentId;
     this.vertical = boolean(this.vertical, true);
     this.closed = boolean(this.closed, true);
     this.divider = boolean(this.divider, true);

package/dist/components/timer/ticker.mjs

@@ -3,12 +3,11 @@ import { floorDateTime } from '../../internal/datetime.mjs';
 
 const TIMER_INTERVAL = 100;
 class Ticker {
-  constructor(tickUnit, tickValue, zone) {
+  constructor(tickInterval = { seconds: 5 }, zone) {
     this.subscribers = [];
     this.currentDateTime = DateTime.fromMillis(0);
     this.nextUpdateAt = DateTime.fromMillis(0);
-    this.tickUnit = tickUnit;
-    this.tickValue = tickValue;
+    this.tickInterval = tickInterval;
     this.zone = zone;
   }
   subscribe(fn) {
@@ -34,6 +33,7 @@ class Ticker {
     if (!this.timer) {
       return;
     }
+    console.log("Ticker stop");
     clearInterval(this.timer);
     this.timer = void 0;
     this.nextUpdateAt = DateTime.fromMillis(0);
@@ -42,9 +42,8 @@ class Ticker {
   setZone(zone) {
     this.zone = zone;
   }
-  setTick(tickUnit, tickValue) {
-    this.tickUnit = tickUnit;
-    this.tickValue = tickValue;
+  setTickInterval(tickInterval) {
+    this.tickInterval = tickInterval;
   }
   /**
    * Tick the clock
@@ -59,8 +58,10 @@ class Ticker {
     const now = DateTime.local({ zone: this.zone }).set({ millisecond: 0 });
     if (now >= this.nextUpdateAt) {
       this.nextUpdateAt = floorDateTime(now.plus({ second: 1 }), "second", 1);
+      const majorStepUnit = Object.keys(this.tickInterval)[0];
+      const majorStepValue = this.tickInterval[majorStepUnit];
       let minorFlooredNow = floorDateTime(now, "second", 1);
-      const majorFlooredNow = floorDateTime(now, this.tickUnit, this.tickValue);
+      const majorFlooredNow = floorDateTime(now, majorStepUnit, majorStepValue);
       if (forceMajor) {
         minorFlooredNow = majorFlooredNow;
       }

package/dist/components/timer/timer.component.mjs

@@ -35,6 +35,7 @@ class FlowUiTimer extends FlowRdfElement {
     this.zoneFormat = "ZZZZ";
     this.majorStep = "1 minute";
     this.minorStep = "5 seconds";
+    this.updateInterval = "5 seconds";
     this.hideZone = false;
     this.placement = "bottom-start";
     this.debouncedEmitChange = debounce(
@@ -50,7 +51,7 @@ class FlowUiTimer extends FlowRdfElement {
     super.connectedCallback();
     this.hideZone = boolean(this.hideZone, true);
     this.running = boolean(this.running, true);
-    this.ticker = new Ticker("second", 5, "Europe/London");
+    this.ticker = new Ticker({ seconds: 5 }, "Europe/London");
     this.tickerSubscription = this.ticker.subscribe((dateTime, tickType) => {
       if (tickType === "major") {
         this.value = dateTime;
@@ -72,6 +73,10 @@ class FlowUiTimer extends FlowRdfElement {
     this.minorStepDuration = parseDuration(this.minorStep) ?? { second: 5 };
     this.majorStepDuration = parseDuration(this.majorStep) ?? { minute: 1 };
   }
+  updateUpdateInterval() {
+    const updateIntervalDuration = parseDuration(this.updateInterval) ?? { second: 5 };
+    this.ticker.setTickInterval(updateIntervalDuration);
+  }
   updateRunning() {
     if (this.running) {
       this.ticker.start();
@@ -113,32 +118,16 @@ class FlowUiTimer extends FlowRdfElement {
     const minorStepValue = this.minorStepDuration[minorStepUnit];
     switch (direction) {
       case "fast-back":
-        dateTime = ceilDateTime(
-          this._displayDateTime.minus(this.majorStepDuration),
-          majorStepUnit,
-          majorStepValue
-        );
+        dateTime = ceilDateTime(this._displayDateTime.minus(this.majorStepDuration), majorStepUnit, majorStepValue);
         break;
       case "back":
-        dateTime = ceilDateTime(
-          this._displayDateTime.minus(this.minorStepDuration),
-          minorStepUnit,
-          minorStepValue
-        );
+        dateTime = ceilDateTime(this._displayDateTime.minus(this.minorStepDuration), minorStepUnit, minorStepValue);
         break;
       case "forward":
-        dateTime = floorDateTime(
-          this._displayDateTime.plus(this.minorStepDuration),
-          minorStepUnit,
-          minorStepValue
-        );
+        dateTime = floorDateTime(this._displayDateTime.plus(this.minorStepDuration), minorStepUnit, minorStepValue);
         break;
       case "fast-forward":
-        dateTime = floorDateTime(
-          this._displayDateTime.plus(this.majorStepDuration),
-          majorStepUnit,
-          majorStepValue
-        );
+        dateTime = floorDateTime(this._displayDateTime.plus(this.majorStepDuration), majorStepUnit, majorStepValue);
         break;
       default:
         dateTime = this._displayDateTime;
@@ -182,11 +171,17 @@ class FlowUiTimer extends FlowRdfElement {
             <div class="timer__time-container">
               <span class="timer__time">${this.formattedDisplayDateTime(this.timeFormat)}</span>
 
-              ${!this.hideZone ? html`
-                    <flow-ui-tooltip hoist placement="top" content=${this.formattedDisplayDateTime("ZZZZZ")}>
-                      <span class="timer__zone">${this.formattedDisplayDateTime(this.zoneFormat)}</span>
-                    </flow-ui-tooltip>
-                  ` : nothing}
+              ${// Note that flow-ui-show event was causing timer to stop because of dropdown handling of flow-ui-show above
+    !this.hideZone ? html`
+                      <flow-ui-tooltip
+                        hoist
+                        placement="top"
+                        content=${this.formattedDisplayDateTime("ZZZZZ")}
+                        @flow-ui-show=${(ev) => ev.stopImmediatePropagation()}
+                      >
+                        <span class="timer__zone">${this.formattedDisplayDateTime(this.zoneFormat)}</span>
+                      </flow-ui-tooltip>
+                    ` : nothing}
             </div>
           </div>
 
@@ -279,6 +274,9 @@ __decorateClass([
 __decorateClass([
   property({ attribute: "minor-step" })
 ], FlowUiTimer.prototype, "minorStep", 2);
+__decorateClass([
+  property({ attribute: "update-interval" })
+], FlowUiTimer.prototype, "updateInterval", 2);
 __decorateClass([
   property({ type: Boolean, attribute: "hide-zone" })
 ], FlowUiTimer.prototype, "hideZone", 2);
@@ -291,6 +289,9 @@ __decorateClass([
 __decorateClass([
   watch(["majorStep", "minorStep"])
 ], FlowUiTimer.prototype, "updateParsedSteps", 1);
+__decorateClass([
+  watch(["updateInterval"])
+], FlowUiTimer.prototype, "updateUpdateInterval", 1);
 __decorateClass([
   watch("running")
 ], FlowUiTimer.prototype, "updateRunning", 1);

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

@@ -36,6 +36,7 @@ const _FlowUiTreeItem = class _FlowUiTreeItem extends FlowRdfElement {
     this.disabled = false;
     this.lazy = false;
     this.size = "medium";
+    this.hidden = false;
   }
   /** @internal */
   static isTreeItem(node) {
@@ -47,6 +48,7 @@ const _FlowUiTreeItem = class _FlowUiTreeItem extends FlowRdfElement {
     this.selected = boolean(this.selected, true);
     this.disabled = boolean(this.disabled, true);
     this.lazy = boolean(this.lazy, true);
+    this.hidden = boolean(this.hidden, true);
     this.setAttribute("role", "treeitem");
     this.setAttribute("tabindex", "-1");
     if (this.isNestedItem()) {
@@ -158,6 +160,7 @@ const _FlowUiTreeItem = class _FlowUiTreeItem extends FlowRdfElement {
       "tree-item--expanded": this.expanded,
       "tree-item--selected": this.selected,
       "tree-item--disabled": this.disabled,
+      "tree-item--hidden": this.hidden,
       "tree-item--small": this.size === "small",
       "tree-item--medium": this.size === "medium",
       "tree-item--large": this.size === "large",
@@ -272,6 +275,9 @@ __decorateClass([
 __decorateClass([
   property({ reflect: true })
 ], _FlowUiTreeItem.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], _FlowUiTreeItem.prototype, "hidden", 2);
 __decorateClass([
   query("slot:not([name])")
 ], _FlowUiTreeItem.prototype, "defaultSlot", 2);

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

@@ -106,6 +106,10 @@ const styles = css`
     display: none;
   }
 
+  .tree-item.tree-item--hidden {
+    display: none;
+  }
+
   .tree-item__expand-button--visible {
     cursor: pointer;
   }

package/dist/custom-elements.json

@@ -668,191 +668,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/avatar/avatar.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "FlowUiAvatar",
-          "cssProperties": [
-            {
-              "description": "The size of the avatar.",
-              "name": "--size"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The component's base wrapper.",
-              "name": "base"
-            },
-            {
-              "description": "The container that wraps the avatar's icon.",
-              "name": "icon"
-            },
-            {
-              "description": "The container that wraps the avatar's initials.",
-              "name": "initials"
-            },
-            {
-              "description": "The avatar image. Only shown when the `image` attribute is set.",
-              "name": "image"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The default icon to use when no image or initials are present. Works best with `<flow-ui-icon>`.",
-              "name": "icon"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "hasError",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false"
-            },
-            {
-              "kind": "field",
-              "name": "image",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The image source to use for the avatar.",
-              "attribute": "image"
-            },
-            {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "A label to use to describe the avatar to assistive devices.",
-              "attribute": "label"
-            },
-            {
-              "kind": "field",
-              "name": "initials",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
-              "attribute": "initials"
-            },
-            {
-              "kind": "field",
-              "name": "loading",
-              "type": {
-                "text": "'eager' | 'lazy'"
-              },
-              "default": "'eager'",
-              "description": "Indicates how the browser should load the image.",
-              "attribute": "loading"
-            },
-            {
-              "kind": "field",
-              "name": "shape",
-              "type": {
-                "text": "'circle' | 'square' | 'rounded'"
-              },
-              "default": "'circle'",
-              "description": "The shape of the avatar.",
-              "attribute": "shape",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "image",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The image source to use for the avatar.",
-              "fieldName": "image"
-            },
-            {
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "A label to use to describe the avatar to assistive devices.",
-              "fieldName": "label"
-            },
-            {
-              "name": "initials",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
-              "fieldName": "initials"
-            },
-            {
-              "name": "loading",
-              "type": {
-                "text": "'eager' | 'lazy'"
-              },
-              "default": "'eager'",
-              "description": "Indicates how the browser should load the image.",
-              "fieldName": "loading"
-            },
-            {
-              "name": "shape",
-              "type": {
-                "text": "'circle' | 'square' | 'rounded'"
-              },
-              "default": "'circle'",
-              "description": "The shape of the avatar.",
-              "fieldName": "shape"
-            }
-          ],
-          "superclass": {
-            "name": "FlowRdfElement",
-            "module": "/src/internal/flow-ui-rdf-element"
-          },
-          "tagName": "flow-ui-avatar",
-          "summary": "Avatars are used to represent a person or object.",
-          "dependencies": [
-            "flow-ui-icon"
-          ],
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "FlowUiAvatar",
-            "module": "components/avatar/avatar.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/avatar/avatar.js",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "FlowUiAvatar",
-            "module": "components/avatar/avatar.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/autocomplete/autocomplete.component.js",
@@ -1602,6 +1417,191 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/avatar/avatar.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "FlowUiAvatar",
+          "cssProperties": [
+            {
+              "description": "The size of the avatar.",
+              "name": "--size"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            },
+            {
+              "description": "The container that wraps the avatar's icon.",
+              "name": "icon"
+            },
+            {
+              "description": "The container that wraps the avatar's initials.",
+              "name": "initials"
+            },
+            {
+              "description": "The avatar image. Only shown when the `image` attribute is set.",
+              "name": "image"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The default icon to use when no image or initials are present. Works best with `<flow-ui-icon>`.",
+              "name": "icon"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "hasError",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "image",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The image source to use for the avatar.",
+              "attribute": "image"
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "A label to use to describe the avatar to assistive devices.",
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "initials",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
+              "attribute": "initials"
+            },
+            {
+              "kind": "field",
+              "name": "loading",
+              "type": {
+                "text": "'eager' | 'lazy'"
+              },
+              "default": "'eager'",
+              "description": "Indicates how the browser should load the image.",
+              "attribute": "loading"
+            },
+            {
+              "kind": "field",
+              "name": "shape",
+              "type": {
+                "text": "'circle' | 'square' | 'rounded'"
+              },
+              "default": "'circle'",
+              "description": "The shape of the avatar.",
+              "attribute": "shape",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "image",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The image source to use for the avatar.",
+              "fieldName": "image"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "A label to use to describe the avatar to assistive devices.",
+              "fieldName": "label"
+            },
+            {
+              "name": "initials",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
+              "fieldName": "initials"
+            },
+            {
+              "name": "loading",
+              "type": {
+                "text": "'eager' | 'lazy'"
+              },
+              "default": "'eager'",
+              "description": "Indicates how the browser should load the image.",
+              "fieldName": "loading"
+            },
+            {
+              "name": "shape",
+              "type": {
+                "text": "'circle' | 'square' | 'rounded'"
+              },
+              "default": "'circle'",
+              "description": "The shape of the avatar.",
+              "fieldName": "shape"
+            }
+          ],
+          "superclass": {
+            "name": "FlowRdfElement",
+            "module": "/src/internal/flow-ui-rdf-element"
+          },
+          "tagName": "flow-ui-avatar",
+          "summary": "Avatars are used to represent a person or object.",
+          "dependencies": [
+            "flow-ui-icon"
+          ],
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "FlowUiAvatar",
+            "module": "components/avatar/avatar.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/avatar/avatar.js",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "FlowUiAvatar",
+            "module": "components/avatar/avatar.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/badge/badge.component.js",
@@ -19205,6 +19205,15 @@
           "description": "",
           "name": "FlowUiSplitView",
           "members": [
+            {
+              "kind": "field",
+              "name": "_panelLayouts",
+              "type": {
+                "text": "Record<string, PaneLayout[]>"
+              },
+              "privacy": "private",
+              "default": "{}"
+            },
             {
               "kind": "field",
               "name": "_panels",
@@ -19522,6 +19531,26 @@
               "kind": "method",
               "name": "updatePanelInfo",
               "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "panelLayoutsKey",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "savePanelLayouts",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "restorePanelLayouts",
+              "privacy": "private"
             }
           ],
           "attributes": [
@@ -19746,6 +19775,23 @@
           "description": "",
           "name": "FlowUiSplitViewPane",
           "members": [
+            {
+              "kind": "field",
+              "name": "attrId",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "readonly": true,
+              "default": "++id"
+            },
+            {
+              "kind": "field",
+              "name": "componentId",
+              "privacy": "private",
+              "readonly": true,
+              "default": "`flow-ui-split-view-pane-${this.attrId}`"
+            },
             {
               "kind": "field",
               "name": "dividerComponent",
@@ -22803,30 +22849,21 @@
             },
             {
               "kind": "field",
-              "name": "tickUnit",
-              "type": {
-                "text": "TickerUnit"
-              },
-              "privacy": "private",
-              "default": "tickUnit"
-            },
-            {
-              "kind": "field",
-              "name": "tickValue",
+              "name": "zone",
               "type": {
-                "text": "number"
+                "text": "string | undefined"
               },
               "privacy": "private",
-              "default": "tickValue"
+              "default": "zone"
             },
             {
               "kind": "field",
-              "name": "zone",
+              "name": "tickInterval",
               "type": {
-                "text": "string | undefined"
+                "text": "DurationLikeObject"
               },
               "privacy": "private",
-              "default": "zone"
+              "default": "tickInterval"
             },
             {
               "kind": "method",
@@ -22879,18 +22916,12 @@
             },
             {
               "kind": "method",
-              "name": "setTick",
+              "name": "setTickInterval",
               "parameters": [
                 {
-                  "name": "tickUnit",
-                  "type": {
-                    "text": "'hour' | 'minute' | 'second' | 'millisecond'"
-                  }
-                },
-                {
-                  "name": "tickValue",
+                  "name": "tickInterval",
                   "type": {
-                    "text": "number"
+                    "text": "DurationLikeObject"
                   }
                 }
               ]
@@ -23103,6 +23134,16 @@
               "description": "The minor step size to use for the timer step controls.",
               "attribute": "minor-step"
             },
+            {
+              "kind": "field",
+              "name": "updateInterval",
+              "type": {
+                "text": "string"
+              },
+              "default": "'5 seconds'",
+              "description": "The timer update interval.",
+              "attribute": "update-interval"
+            },
             {
               "kind": "field",
               "name": "hideZone",
@@ -23309,6 +23350,15 @@
               "description": "The minor step size to use for the timer step controls.",
               "fieldName": "minorStep"
             },
+            {
+              "name": "update-interval",
+              "type": {
+                "text": "string"
+              },
+              "default": "'5 seconds'",
+              "description": "The timer update interval.",
+              "fieldName": "updateInterval"
+            },
             {
               "name": "hide-zone",
               "type": {
@@ -25104,6 +25154,17 @@
               "attribute": "size",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "hidden",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Set to `true` to visually hide the tree item.",
+              "attribute": "hidden",
+              "reflects": true
+            },
             {
               "kind": "method",
               "name": "animateCollapse",
@@ -25235,6 +25296,15 @@
               "default": "'medium'",
               "description": "The select's size.",
               "fieldName": "size"
+            },
+            {
+              "name": "hidden",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Set to `true` to visually hide the tree item.",
+              "fieldName": "hidden"
             }
           ],
           "superclass": {
@@ -25768,6 +25838,6 @@
   ],
   "package": {
     "name": "@emuanalytics/flow-rdf-ui",
-    "version": "4.1.9"
+    "version": "4.1.10"
   }
 }

package/dist/index.d.mts

@@ -5716,6 +5716,8 @@ declare global {
  */
 declare class FlowUiSplitViewPane extends FlowRdfElement {
     static styles: CSSResultGroup;
+    private readonly attrId;
+    private readonly componentId;
     private dividerComponent?;
     /** Set to `true` for vertically-arranged panes. */
     vertical: boolean;
@@ -5791,6 +5793,7 @@ declare global {
  * @summary Split-views contain two or more split-view panes to create resizable areas.
  */
 declare class FlowUiSplitView extends FlowRdfElement {
+    private _panelLayouts;
     static styles: CSSResultGroup;
     private _panels;
     private dragTargetPanel?;
@@ -5854,6 +5857,9 @@ declare class FlowUiSplitView extends FlowRdfElement {
     private handlePanelAdded;
     private handlePanelRemoved;
     private updatePanelInfo;
+    private panelLayoutsKey;
+    private savePanelLayouts;
+    private restorePanelLayouts;
 }
 
 declare global {
@@ -6270,6 +6276,10 @@ declare class FlowUiTimer extends FlowRdfElement {
      * The minor step size to use for the timer step controls.
      */
     minorStep: string;
+    /**
+     * The timer update interval.
+     */
+    updateInterval: string;
     /**
      * Set to `true` to hide the timezone display.
      */
@@ -6285,6 +6295,8 @@ declare class FlowUiTimer extends FlowRdfElement {
     /** @internal */
     updateParsedSteps(): void;
     /** @internal */
+    updateUpdateInterval(): void;
+    /** @internal */
     updateRunning(): void;
     private setDisplayDateTime;
     private handleDateTimeKeyDown;
@@ -6553,6 +6565,8 @@ declare class FlowUiTreeItem extends FlowRdfElement {
     lazy: boolean;
     /** The select's size. */
     size: 'small' | 'medium' | 'large';
+    /** Set to `true` to visually hide the tree item. */
+    hidden: boolean;
     /** @internal */
     defaultSlot: HTMLSlotElement;
     /** @internal */

package/dist/index.d.ts

@@ -5716,6 +5716,8 @@ declare global {
  */
 declare class FlowUiSplitViewPane extends FlowRdfElement {
     static styles: CSSResultGroup;
+    private readonly attrId;
+    private readonly componentId;
     private dividerComponent?;
     /** Set to `true` for vertically-arranged panes. */
     vertical: boolean;
@@ -5791,6 +5793,7 @@ declare global {
  * @summary Split-views contain two or more split-view panes to create resizable areas.
  */
 declare class FlowUiSplitView extends FlowRdfElement {
+    private _panelLayouts;
     static styles: CSSResultGroup;
     private _panels;
     private dragTargetPanel?;
@@ -5854,6 +5857,9 @@ declare class FlowUiSplitView extends FlowRdfElement {
     private handlePanelAdded;
     private handlePanelRemoved;
     private updatePanelInfo;
+    private panelLayoutsKey;
+    private savePanelLayouts;
+    private restorePanelLayouts;
 }
 
 declare global {
@@ -6270,6 +6276,10 @@ declare class FlowUiTimer extends FlowRdfElement {
      * The minor step size to use for the timer step controls.
      */
     minorStep: string;
+    /**
+     * The timer update interval.
+     */
+    updateInterval: string;
     /**
      * Set to `true` to hide the timezone display.
      */
@@ -6285,6 +6295,8 @@ declare class FlowUiTimer extends FlowRdfElement {
     /** @internal */
     updateParsedSteps(): void;
     /** @internal */
+    updateUpdateInterval(): void;
+    /** @internal */
     updateRunning(): void;
     private setDisplayDateTime;
     private handleDateTimeKeyDown;
@@ -6553,6 +6565,8 @@ declare class FlowUiTreeItem extends FlowRdfElement {
     lazy: boolean;
     /** The select's size. */
     size: 'small' | 'medium' | 'large';
+    /** Set to `true` to visually hide the tree item. */
+    hidden: boolean;
     /** @internal */
     defaultSlot: HTMLSlotElement;
     /** @internal */

package/dist/package.json.mjs

@@ -1,3 +1,3 @@
-const version = "4.1.9";
+const version = "4.1.10";
 
 export { version };

package/dist/vscode.html-custom-data.json

@@ -97,42 +97,6 @@
       ],
       "references": []
     },
-    {
-      "name": "flow-ui-avatar",
-      "description": "Avatars are used to represent a person or object.\n\n\n---\n\n\n\n\n### **Slots:**\n - **icon** - The default icon to use when no image or initials are present. Works best with `<flow-ui-icon>`.\n\n### **CSS Properties:**\n - **--size** - The size of the avatar. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon** - The container that wraps the avatar's icon.\n- **initials** - The container that wraps the avatar's initials.\n- **image** - The avatar image. Only shown when the `image` attribute is set.",
-      "attributes": [
-        {
-          "name": "image",
-          "description": "The image source to use for the avatar.",
-          "values": []
-        },
-        {
-          "name": "label",
-          "description": "A label to use to describe the avatar to assistive devices.",
-          "values": []
-        },
-        {
-          "name": "initials",
-          "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
-          "values": []
-        },
-        {
-          "name": "loading",
-          "description": "Indicates how the browser should load the image.",
-          "values": [{ "name": "eager" }, { "name": "lazy" }]
-        },
-        {
-          "name": "shape",
-          "description": "The shape of the avatar.",
-          "values": [
-            { "name": "circle" },
-            { "name": "square" },
-            { "name": "rounded" }
-          ]
-        }
-      ],
-      "references": []
-    },
     {
       "name": "flow-ui-autocomplete",
       "description": "The Autocomplete is a Text input enhanced by a panel of suggested options.\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-input** - Emitted when the display value changes.\n- **flow-ui-change** - Emitted when the input value changes.\n- **flow-ui-focus** - Emitted when the input is focused.\n- **flow-ui-blur** - Emitted when the input is blurred.\n- **flow-ui-show** - Emitted when the dropdown is shown.\n- **flow-ui-after-show** - Emitted when the dropdown is shown.\n- **flow-ui-hide** - Emitted when the dropdown is hidden.\n- **flow-ui-after-hide** - Emitted when the dropdown is hidden.\n- **flow-ui-invalid** - Emitted when the input is invalid.\n- **flow-ui-valid** - Emitted when the input is valid.\n- **flow-ui-validate** - Emitted when the input is validated.\n- **flow-ui-validate-complete** - Emitted when the input is validated and the validity state is updated.\n- **flow-ui-validate-error** - Emitted when the input is validated and an error occurs.\n- **flow-ui-validate-success** - Emitted when the input is validated and no errors occur.\n\n### **Methods:**\n - **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **checkValidity(): _boolean_** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **reportValidity(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(_: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **focus()** - Focuses on the control\n- **blur()** - Blurs from the control.\n- **show()** - Shows the listbox.\n- **hide()** - Hides the listbox.\n- **getInputText()** - Gets the current value of the text input\n\n### **Slots:**\n - _default_ - The listbox options. Must be `<flow-option>` elements. You can use `<flow-divider>` to group items visually.\n- **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **prefix** - Used to prepend a presentational icon or similar element to the combobox.\n- **suffix** - Used to append a presentational icon or similar element to the combobox.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The select's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **combobox** - The container the wraps the prefix, suffix, combobox, clear icon, and expand button.\n- **prefix** - The container that wraps the prefix slot.\n- **suffix** - The container that wraps the suffix slot.\n- **display-input** - The element that displays the selected option's label, an `<input>` element.\n- **listbox** - The listbox container where options are slotted.\n- **clear-button** - The clear button.",
@@ -237,6 +201,42 @@
       ],
       "references": []
     },
+    {
+      "name": "flow-ui-avatar",
+      "description": "Avatars are used to represent a person or object.\n\n\n---\n\n\n\n\n### **Slots:**\n - **icon** - The default icon to use when no image or initials are present. Works best with `<flow-ui-icon>`.\n\n### **CSS Properties:**\n - **--size** - The size of the avatar. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon** - The container that wraps the avatar's icon.\n- **initials** - The container that wraps the avatar's initials.\n- **image** - The avatar image. Only shown when the `image` attribute is set.",
+      "attributes": [
+        {
+          "name": "image",
+          "description": "The image source to use for the avatar.",
+          "values": []
+        },
+        {
+          "name": "label",
+          "description": "A label to use to describe the avatar to assistive devices.",
+          "values": []
+        },
+        {
+          "name": "initials",
+          "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
+          "values": []
+        },
+        {
+          "name": "loading",
+          "description": "Indicates how the browser should load the image.",
+          "values": [{ "name": "eager" }, { "name": "lazy" }]
+        },
+        {
+          "name": "shape",
+          "description": "The shape of the avatar.",
+          "values": [
+            { "name": "circle" },
+            { "name": "square" },
+            { "name": "rounded" }
+          ]
+        }
+      ],
+      "references": []
+    },
     {
       "name": "flow-ui-badge",
       "description": "Badges are used to draw attention and display statuses or counts.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The badge's content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
@@ -3117,6 +3117,11 @@
           "description": "The minor step size to use for the timer step controls.",
           "values": []
         },
+        {
+          "name": "update-interval",
+          "description": "The timer update interval.",
+          "values": []
+        },
         {
           "name": "hide-zone",
           "description": "Set to `true` to hide the timezone display.",
@@ -3429,6 +3434,11 @@
             { "name": "medium" },
             { "name": "large" }
           ]
+        },
+        {
+          "name": "hidden",
+          "description": "Set to `true` to visually hide the tree item.",
+          "values": []
         }
       ],
       "references": []

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@emuanalytics/flow-rdf-ui",
-  "version": "4.1.9",
+  "version": "4.1.10",
   "type": "module",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",

package/themes/dark.css

@@ -2,6 +2,8 @@
 .flow-ui-theme-dark {
   color-scheme: dark;
 
+  --ag-browser-color-scheme: dark;
+
   --flow-ui-color-gray-50: oklch(25.794% 0.00354 48.585);
   --flow-ui-color-gray-100: oklch(27.86% 0.00347 48.6);
   --flow-ui-color-gray-200: #2e2d2c;

package/themes/dark.styles.js

@@ -5,6 +5,8 @@ export default css`
   .flow-ui-theme-dark {
     color-scheme: dark;
 
+    --ag-browser-color-scheme: dark;
+
     --flow-ui-color-gray-50: oklch(25.794% 0.00354 48.585);
     --flow-ui-color-gray-100: oklch(27.86% 0.00347 48.6);
     --flow-ui-color-gray-200: #2e2d2c;

package/themes/light.css

@@ -3,6 +3,8 @@
 .flow-ui-theme-light {
   color-scheme: light;
 
+  --ag-browser-color-scheme: light;
+
   --flow-ui-color-gray-50: oklch(98% 0 none);
   --flow-ui-color-gray-100: oklch(96% 0 none);
   --flow-ui-color-gray-200: oklch(93.1% 0 none);

package/themes/light.styles.js

@@ -6,6 +6,8 @@ export default css`
   .flow-ui-theme-light {
     color-scheme: light;
 
+    --ag-browser-color-scheme: light;
+
     --flow-ui-color-gray-50: oklch(98% 0 none);
     --flow-ui-color-gray-100: oklch(96% 0 none);
     --flow-ui-color-gray-200: oklch(93.1% 0 none);