@emuanalytics/flow-rdf-ui 4.0.2 → 4.0.4

package/dist/index.cjs

@@ -1782,6 +1782,32 @@ function waitForEvent(el, eventName) {
   });
 }
 
+function watch(propertyName, options) {
+  const resolvedOptions = {
+    waitUntilFirstUpdate: false,
+    ...options
+  };
+  return (proto, decoratedFnName) => {
+    const { update } = proto;
+    const watchedProperties = Array.isArray(propertyName) ? propertyName : [propertyName];
+    proto.update = function(changedProps) {
+      watchedProperties.forEach((property) => {
+        const key = property;
+        if (changedProps.has(key)) {
+          const oldValue = changedProps.get(key);
+          const newValue = this[key];
+          if (oldValue !== newValue) {
+            if (!resolvedOptions.waitUntilFirstUpdate || this.hasUpdated) {
+              this[decoratedFnName](oldValue, newValue);
+            }
+          }
+        }
+      });
+      update.call(this, changedProps);
+    };
+  };
+}
+
 var __defProp$Z = Object.defineProperty;
 var __getOwnPropDesc$Z = Object.getOwnPropertyDescriptor;
 var __decorateClass$Z = (decorators, target, key, kind) => {
@@ -1820,6 +1846,23 @@ __decorateClass$Z([
 __decorateClass$Z([
   decorators_js.property()
 ], FlowRdfElement.prototype, "lang", 2);
+const _FlowRdfFormControl = class _FlowRdfFormControl extends FlowRdfElement {
+  handleClassChange() {
+    this.classList.add(_FlowRdfFormControl.FLOW_UI_FORM_CONTROL_CLASS);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.classList.add(_FlowRdfFormControl.FLOW_UI_FORM_CONTROL_CLASS);
+  }
+};
+_FlowRdfFormControl.FLOW_UI_FORM_CONTROL_CLASS = "flow-ui-form-control";
+__decorateClass$Z([
+  decorators_js.property({ reflect: true })
+], _FlowRdfFormControl.prototype, "class", 2);
+__decorateClass$Z([
+  watch("class")
+], _FlowRdfFormControl.prototype, "handleClassChange", 1);
+let FlowRdfFormControl = _FlowRdfFormControl;
 
 class HasSlotController {
   constructor(host, ...slotNames) {
@@ -1879,32 +1922,6 @@ function getTextContent(slot) {
   return text;
 }
 
-function watch(propertyName, options) {
-  const resolvedOptions = {
-    waitUntilFirstUpdate: false,
-    ...options
-  };
-  return (proto, decoratedFnName) => {
-    const { update } = proto;
-    const watchedProperties = Array.isArray(propertyName) ? propertyName : [propertyName];
-    proto.update = function(changedProps) {
-      watchedProperties.forEach((property) => {
-        const key = property;
-        if (changedProps.has(key)) {
-          const oldValue = changedProps.get(key);
-          const newValue = this[key];
-          if (oldValue !== newValue) {
-            if (!resolvedOptions.waitUntilFirstUpdate || this.hasUpdated) {
-              this[decoratedFnName](oldValue, newValue);
-            }
-          }
-        }
-      });
-      update.call(this, changedProps);
-    };
-  };
-}
-
 const defaultAnimationRegistry = /* @__PURE__ */ new Map();
 const customAnimationRegistry = /* @__PURE__ */ new WeakMap();
 function ensureAnimation(animation) {
@@ -3022,6 +3039,8 @@ const styles$Y = lit.css`
     display: inline-block;
     color: var(--flow-ui-color-neutral-600);
 
+    --hover-color: var(--flow-ui-color-primary-500);
+    --active-color: var(--flow-ui-color-primary-400);
     --icon-size: inherit;
   }
 
@@ -3048,11 +3067,11 @@ const styles$Y = lit.css`
 
   .icon-button:hover:not(.icon-button--disabled),
   .icon-button:focus-visible:not(.icon-button--disabled) {
-    color: var(--flow-ui-color-primary-500);
+    color: var(--hover-color);
   }
 
   .icon-button:active:not(.icon-button--disabled) {
-    color: var(--flow-ui-color-primary-600);
+    color: var(--active-color);
   }
 
   .icon-button:focus {
@@ -3088,7 +3107,6 @@ const styles$Y = lit.css`
   .icon-button__tooltip--confirm .confirm__label {
     margin-inline: var(--flow-ui-spacing-x-small);
   }
-
 `;
 
 var __defProp$V = Object.defineProperty;
@@ -3366,6 +3384,14 @@ const styles$X = lit.css`
     color: var(--flow-ui-color-primary-500);
   }
 
+  .alert--secondary {
+    border-top-color: var(--flow-ui-color-secondary-500);
+  }
+
+  .alert--secondary .alert__icon {
+    color: var(--flow-ui-color-secondary-500);
+  }
+
   .alert--success {
     border-top-color: var(--flow-ui-color-success-600);
   }
@@ -3536,6 +3562,7 @@ class FlowUiAlert extends FlowRdfElement {
       "alert--closable": this.closable,
       "alert--has-icon": this.hasSlotController.test("icon"),
       "alert--primary": this.variant === "primary",
+      "alert--secondary": this.variant === "secondary",
       "alert--success": this.variant === "success",
       "alert--neutral": this.variant === "neutral",
       "alert--warning": this.variant === "warning",
@@ -5501,7 +5528,7 @@ var __decorateClass$N = (decorators, target, key, kind) => {
     __defProp$N(target, key, result);
   return result;
 };
-let FlowUiButton = class extends FlowRdfElement {
+let FlowUiButton = class extends FlowRdfFormControl {
   constructor() {
     super(...arguments);
     this.formControlController = new FormControlController(this, {
@@ -7336,6 +7363,7 @@ const styles$K = lit.css`
     cursor: pointer;
   }
 
+  /* Sizes */
   .checkbox--small {
     --toggle-size: var(--flow-ui-toggle-size-small);
     font-size: var(--flow-ui-input-font-size-small);
@@ -7351,6 +7379,7 @@ const styles$K = lit.css`
     font-size: var(--flow-ui-input-font-size-large);
   }
 
+  /* Color variants */
   .checkbox--primary {
     --checkbox-color: var(--flow-ui-color-primary-500);
     --checkbox-hover-color: var(--flow-ui-color-primary-400);
@@ -7381,6 +7410,23 @@ const styles$K = lit.css`
     --checkbox-hover-color: var(--flow-ui-color-neutral-400);
   }
 
+  /* Alternative 'full-width' style */
+  :host([full-width]) {
+    display: block;
+    margin-top: var(--flow-ui-spacing-small);
+  }
+
+  .checkbox--full-width {
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: center;
+  }
+
+  .checkbox--full-width .checkbox__label {
+    flex: 1;
+    margin: 0;
+  }
+
   .checkbox__control {
     flex: 0 0 auto;
     position: relative;
@@ -7479,7 +7525,7 @@ var __decorateClass$I = (decorators, target, key, kind) => {
     __defProp$I(target, key, result);
   return result;
 };
-let FlowUiCheckbox = class extends FlowRdfElement {
+let FlowUiCheckbox = class extends FlowRdfFormControl {
   constructor() {
     super(...arguments);
     this.hasSlotController = new HasSlotController(this, "[default]");
@@ -7498,6 +7544,7 @@ let FlowUiCheckbox = class extends FlowRdfElement {
     this.defaultChecked = false;
     this.form = "";
     this.required = false;
+    this.fullWidth = false;
   }
   connectedCallback() {
     super.connectedCallback();
@@ -7505,6 +7552,7 @@ let FlowUiCheckbox = class extends FlowRdfElement {
     this.indeterminate = boolean(this.indeterminate, true);
     this.disabled = boolean(this.disabled, true);
     this.required = boolean(this.required, true);
+    this.fullWidth = boolean(this.fullWidth, true);
   }
   /** Gets the validity state object */
   get validity() {
@@ -7595,7 +7643,8 @@ let FlowUiCheckbox = class extends FlowRdfElement {
       "checkbox--success": this.variant === "success",
       "checkbox--warning": this.variant === "warning",
       "checkbox--danger": this.variant === "danger",
-      "checkbox--neutral": this.variant === "neutral"
+      "checkbox--neutral": this.variant === "neutral",
+      "checkbox--full-width": this.fullWidth
     })}
       >
         <input
@@ -7687,6 +7736,9 @@ __decorateClass$I([
 __decorateClass$I([
   decorators_js.property()
 ], FlowUiCheckbox.prototype, "variant", 2);
+__decorateClass$I([
+  decorators_js.property({ type: Boolean, reflect: true, attribute: "full-width" })
+], FlowUiCheckbox.prototype, "fullWidth", 2);
 __decorateClass$I([
   watch("disabled", { waitUntilFirstUpdate: true })
 ], FlowUiCheckbox.prototype, "handleDisabledChange", 1);
@@ -7850,8 +7902,12 @@ class FlowUiColorMapper extends FlowRdfElement {
   }
   connectedCallback() {
     super.connectedCallback();
+    this.classList.add(FlowRdfFormControl.FLOW_UI_FORM_CONTROL_CLASS);
     this.defaultColorStop = boolean(this.defaultColorStop, true);
   }
+  handleClassChange() {
+    this.classList.add(FlowRdfFormControl.FLOW_UI_FORM_CONTROL_CLASS);
+  }
   handleFixedPickerClick(event) {
     event.stopPropagation();
   }
@@ -8033,6 +8089,9 @@ __decorateClass$H([
 __decorateClass$H([
   decorators_js.query(".dialog-info")
 ], FlowUiColorMapper.prototype, "infoDialog", 2);
+__decorateClass$H([
+  decorators_js.property({ reflect: true })
+], FlowUiColorMapper.prototype, "class", 2);
 __decorateClass$H([
   decorators_js.property({ type: Object })
 ], FlowUiColorMapper.prototype, "options", 2);
@@ -8048,6 +8107,9 @@ __decorateClass$H([
 __decorateClass$H([
   decorators_js.property()
 ], FlowUiColorMapper.prototype, "swatches", 2);
+__decorateClass$H([
+  watch("class")
+], FlowUiColorMapper.prototype, "handleClassChange", 1);
 __decorateClass$H([
   throttle(100)
 ], FlowUiColorMapper.prototype, "emitChange", 1);
@@ -8929,7 +8991,7 @@ const d3Format = d3Format$1.formatLocale({
   currency: ["\xA3", ""]
 }).format;
 const DEFAULT_FORMATTER$1 = (val) => isNil(val) ? "--" : val.toString();
-class FlowUiInput extends FlowRdfElement {
+class FlowUiInput extends FlowRdfFormControl {
   constructor() {
     super(...arguments);
     this.formControlController = new FormControlController(this, {
@@ -9812,7 +9874,7 @@ var __decorateClass$E = (decorators, target, key, kind) => {
   return result;
 };
 const hasEyeDropper = typeof window !== "undefined" && "EyeDropper" in window;
-class FlowUiColorPicker extends FlowRdfElement {
+class FlowUiColorPicker extends FlowRdfFormControl {
   constructor() {
     super(...arguments);
     this.formControlController = new FormControlController(this);
@@ -10812,7 +10874,7 @@ var __decorateClass$D = (decorators, target, key, kind) => {
     __defProp$D(target, key, result);
   return result;
 };
-class FlowUiColorStop extends FlowRdfElement {
+class FlowUiColorStop extends FlowRdfFormControl {
   constructor() {
     super(...arguments);
     // private readonly localize = new LocalizeController(this);
@@ -11113,6 +11175,16 @@ const styles$E = lit.css`
     color: var(--flow-ui-color-primary-500);
   }
 
+  .tag--secondary {
+    background-color: var(--flow-ui-color-secondary-50);
+    border-color: var(--flow-ui-color-secondary-200);
+    color: var(--flow-ui-color-primary-800);
+  }
+
+  .tag--secondary:active > flow-ui-icon-button {
+    color: var(--flow-ui-color-secondary-500);
+  }
+
   .tag--success {
     background-color: var(--flow-ui-color-success-50);
     border-color: var(--flow-ui-color-success-200);
@@ -11230,6 +11302,7 @@ class FlowUiTag extends FlowRdfElement {
       tag: true,
       // Types
       "tag--primary": this.variant === "primary",
+      "tag--secondary": this.variant === "secondary",
       "tag--success": this.variant === "success",
       "tag--neutral": this.variant === "neutral",
       "tag--warning": this.variant === "warning",
@@ -11548,7 +11621,7 @@ const popupOptions = {
   medium: { distance: -3, skidding: -9 },
   large: { distance: -5, skidding: -15 }
 };
-class FlowUiDateTimePicker extends FlowRdfElement {
+class FlowUiDateTimePicker extends FlowRdfFormControl {
   constructor() {
     super(...arguments);
     this.formControlController = new FormControlController(this, {
@@ -12771,8 +12844,8 @@ const styles$A = lit.css`
   ${componentStyles}
 
   :host {
-    --color: var(--flow-ui-panel-border-color);
-    --width: var(--flow-ui-panel-border-width);
+    --color: var(--flow-ui-divider-color);
+    --width: var(--flow-ui-divider-width);
     --spacing: var(--flow-ui-spacing-medium);
 
     /* Maintain divider width when used in flexbox layouts */
@@ -14664,6 +14737,7 @@ const styles$r = lit.css`
   }
 
   .panel-header__title {
+    font-weight: var(--flow-ui-panel-header-font-weight);
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
@@ -14707,6 +14781,7 @@ class FlowUiPanelHeader extends FlowRdfElement {
   connectedCallback() {
     super.connectedCallback();
     this.closed = boolean(this.closed, true);
+    this.fixed = boolean(this.fixed, true);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
@@ -14815,12 +14890,16 @@ const styles$q = lit.css`
     min-height: 0;
 
     --padding: var(--flow-ui-spacing-small);
+    --background-color: var(--flow-ui-panel-background-color);
+    --color: var(--flow-ui-panel-color);
   }
 
   .panel {
     height: 100%;
     display: flex;
     flex-direction: column;
+    background-color: var(--background-color);
+    color: var(--color);
   }
 
   /* Body */
@@ -15595,7 +15674,7 @@ const styles$n = lit.css`
   /* Footer */
   .query-builder__footer {
     text-align: right;
-    padding-block: var(--footer-spacing);
+    padding-top: var(--footer-spacing);
   }
 
   .query-builder__footer ::slotted(flow-ui-button:not(:first-of-type)) {
@@ -15622,7 +15701,7 @@ const _FlowUiQueryBuilder = class _FlowUiQueryBuilder extends FlowRdfElement {
   constructor() {
     super(...arguments);
     this._value = { condition: "and", rules: [] };
-    this.hasSlotController = new HasSlotController(this, "help-text", "label");
+    this.hasSlotController = new HasSlotController(this, "help-text", "label", "footer");
     this.value = { condition: "and", rules: [] };
     this.config = { fields: {} };
     this.size = "medium";
@@ -15649,8 +15728,12 @@ const _FlowUiQueryBuilder = class _FlowUiQueryBuilder extends FlowRdfElement {
   }
   connectedCallback() {
     super.connectedCallback();
+    this.classList.add(FlowRdfFormControl.FLOW_UI_FORM_CONTROL_CLASS);
     this.disabled = boolean(this.disabled, true);
   }
+  handleClassChange() {
+    this.classList.add(FlowRdfFormControl.FLOW_UI_FORM_CONTROL_CLASS);
+  }
   handleValueChange() {
     this._value = this.subQueryBuilder ? this.value : cloneDeep__default(this.value);
     if (isNil(this._value)) {
@@ -15980,9 +16063,11 @@ const _FlowUiQueryBuilder = class _FlowUiQueryBuilder extends FlowRdfElement {
             ${this.helpText}
           </slot>
 
-          <footer part="footer" class="query-builder__footer">
-            <slot name="footer"></slot>
-          </footer>
+          ${this.hasSlotController.test("footer") ? lit.html`
+                <footer part="footer" class="query-builder__footer">
+                  <slot name="footer"></slot>
+                </footer>
+              ` : lit.nothing}
         </div>
       </div>
     `;
@@ -15993,6 +16078,9 @@ _FlowUiQueryBuilder.fieldDefinitions = /* @__PURE__ */ new Map();
 __decorateClass$m([
   decorators_js.state()
 ], _FlowUiQueryBuilder.prototype, "_value", 2);
+__decorateClass$m([
+  decorators_js.property({ reflect: true })
+], _FlowUiQueryBuilder.prototype, "class", 2);
 __decorateClass$m([
   decorators_js.property({ attribute: false })
 ], _FlowUiQueryBuilder.prototype, "value", 2);
@@ -16017,6 +16105,9 @@ __decorateClass$m([
 __decorateClass$m([
   decorators_js.property({ type: Boolean, attribute: "sub-query-builder" })
 ], _FlowUiQueryBuilder.prototype, "subQueryBuilder", 2);
+__decorateClass$m([
+  watch("class")
+], _FlowUiQueryBuilder.prototype, "handleClassChange", 1);
 __decorateClass$m([
   watch("value")
 ], _FlowUiQueryBuilder.prototype, "handleValueChange", 1);
@@ -16054,6 +16145,14 @@ const styles$m = lit.css`
     display: block;
   }
 
+  .form-control-input {
+    line-height: 1;
+  }
+
+  ::slotted(flow-ui-radio:not(:first-child)) {
+    margin-top: var(--flow-ui-form-spacing, var(--flow-ui-form-spacing-dense));
+  }
+
   .form-control {
     border: none;
     padding: 0;
@@ -16093,7 +16192,7 @@ var __decorateClass$l = (decorators, target, key, kind) => {
     __defProp$l(target, key, result);
   return result;
 };
-class FlowUiRadioGroup extends FlowRdfElement {
+class FlowUiRadioGroup extends FlowRdfFormControl {
   constructor() {
     super(...arguments);
     this.formControlController = new FormControlController(this);
@@ -16109,7 +16208,7 @@ class FlowUiRadioGroup extends FlowRdfElement {
     this.variant = "secondary";
     this.form = "";
     this.required = false;
-    this.vertical = false;
+    this.fullWidth = false;
   }
   /** Gets the validity state object */
   get validity() {
@@ -16136,7 +16235,7 @@ class FlowUiRadioGroup extends FlowRdfElement {
   connectedCallback() {
     super.connectedCallback();
     this.required = boolean(this.required, true);
-    this.vertical = boolean(this.vertical, true);
+    this.fullWidth = boolean(this.fullWidth, true);
     this.defaultValue = this.value;
   }
   firstUpdated() {
@@ -16207,6 +16306,7 @@ class FlowUiRadioGroup extends FlowRdfElement {
         radio.checked = radio.value === this.value;
         radio.size = this.size;
         radio.variant = this.variant;
+        radio.fullWidth = this.fullWidth;
       });
       if (!radios.some((radio) => radio.checked)) {
         radios[0].tabIndex = 0;
@@ -16220,10 +16320,7 @@ class FlowUiRadioGroup extends FlowRdfElement {
     radios.forEach((radio) => radio.checked = radio.value === this.value);
     this.formControlController.setValidity(this.validity.valid);
   }
-  handleSizeChange() {
-    this.syncRadios();
-  }
-  handleVariantChange() {
+  handleStyleChange() {
     this.syncRadios();
   }
   handleValueChange() {
@@ -16374,14 +16471,11 @@ __decorateClass$l([
   decorators_js.property({ type: Boolean, reflect: true })
 ], FlowUiRadioGroup.prototype, "required", 2);
 __decorateClass$l([
-  decorators_js.property({ type: Boolean, reflect: true })
-], FlowUiRadioGroup.prototype, "vertical", 2);
-__decorateClass$l([
-  watch("size", { waitUntilFirstUpdate: true })
-], FlowUiRadioGroup.prototype, "handleSizeChange", 1);
+  decorators_js.property({ type: Boolean, reflect: true, attribute: "full-width" })
+], FlowUiRadioGroup.prototype, "fullWidth", 2);
 __decorateClass$l([
-  watch("variant", { waitUntilFirstUpdate: true })
-], FlowUiRadioGroup.prototype, "handleVariantChange", 1);
+  watch(["size", "variant", "fullWidth"], { waitUntilFirstUpdate: true })
+], FlowUiRadioGroup.prototype, "handleStyleChange", 1);
 __decorateClass$l([
   watch("value")
 ], FlowUiRadioGroup.prototype, "handleValueChange", 1);
@@ -16410,6 +16504,19 @@ const styles$l = lit.css`
     cursor: pointer;
   }
 
+  /* Alternative 'full-width' style */
+  .radio--full-width {
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: center;
+  }
+
+  .radio--full-width .radio__label {
+    flex: 1;
+    margin: 0;
+  }
+
+  /* Variants */
   .radio--primary {
     --radio-color: var(--flow-ui-color-primary-500);
     --radio-hover-color: var(--flow-ui-color-primary-400);
@@ -16552,10 +16659,12 @@ class FlowUiRadio extends FlowRdfElement {
     this.size = "medium";
     this.variant = "secondary";
     this.disabled = false;
+    this.fullWidth = false;
   }
   connectedCallback() {
     super.connectedCallback();
     this.disabled = boolean(this.disabled, true);
+    this.fullWidth = boolean(this.fullWidth, true);
     this.handleBlur = this.handleBlur.bind(this);
     this.handleClick = this.handleClick.bind(this);
     this.handleFocus = this.handleFocus.bind(this);
@@ -16617,7 +16726,8 @@ class FlowUiRadio extends FlowRdfElement {
       "radio--success": this.variant === "success",
       "radio--warning": this.variant === "warning",
       "radio--danger": this.variant === "danger",
-      "radio--neutral": this.variant === "neutral"
+      "radio--neutral": this.variant === "neutral",
+      "radio--full-width": this.fullWidth
     })}
       >
         <span part="${`control${this.checked ? " control--checked" : ""}`}" class="radio__control">
@@ -16655,6 +16765,9 @@ __decorateClass$k([
 __decorateClass$k([
   decorators_js.property({ type: Boolean, reflect: true })
 ], FlowUiRadio.prototype, "disabled", 2);
+__decorateClass$k([
+  decorators_js.property({ type: Boolean, reflect: true, attribute: "full-width" })
+], FlowUiRadio.prototype, "fullWidth", 2);
 __decorateClass$k([
   watch("checked")
 ], FlowUiRadio.prototype, "handleCheckedChange", 1);
@@ -16901,7 +17014,7 @@ var __decorateClass$j = (decorators, target, key, kind) => {
     __defProp$j(target, key, result);
   return result;
 };
-class FlowUiRange extends FlowRdfElement {
+class FlowUiRange extends FlowRdfFormControl {
   constructor() {
     super(...arguments);
     this.formControlController = new FormControlController(this);
@@ -18478,7 +18591,7 @@ var __decorateClass$g = (decorators, target, key, kind) => {
     __defProp$g(target, key, result);
   return result;
 };
-class FlowUiSelect extends FlowRdfElement {
+class FlowUiSelect extends FlowRdfFormControl {
   constructor() {
     super(...arguments);
     this.formControlController = new FormControlController(this, {
@@ -19234,6 +19347,7 @@ const styles$g = lit.css`
   :host {
     --divider-width: 2px;
     --divider-hit-area: 12px;
+    --color: var(--flow-ui-divider-color);
 
     display: block;
   }
@@ -19242,7 +19356,7 @@ const styles$g = lit.css`
     height: 100%;
     display: flex;
     position: relative;
-    background-color: var(--flow-ui-color-neutral-200);
+    background-color: var(--color);
     color: var(--flow-ui-color-neutral-900);
   }
 
@@ -19263,7 +19377,8 @@ const styles$g = lit.css`
     transform: scale(0);
   }
 
-  :host([dragging]) .divider-highlight, .divider:hover .divider-highlight {
+  :host([dragging]) .divider-highlight,
+  .divider:hover .divider-highlight {
     transform: scale(1);
   }
 
@@ -19293,7 +19408,6 @@ const styles$g = lit.css`
     cursor: col-resize;
   }
 
-
   :host(:not([vertical])) .divider::after {
     display: flex;
     content: '';
@@ -20680,7 +20794,7 @@ var __decorateClass$9 = (decorators, target, key, kind) => {
     __defProp$9(target, key, result);
   return result;
 };
-class FlowUiSwitch extends FlowRdfElement {
+class FlowUiSwitch extends FlowRdfFormControl {
   constructor() {
     super(...arguments);
     this.formControlController = new FormControlController(this, {
@@ -20872,9 +20986,12 @@ const styles$9 = lit.css`
 
   :host {
     --indicator-color: var(--flow-ui-color-primary-500);
-    --track-color: var(--flow-ui-color-neutral-200);
+    --track-color: var(--flow-ui-divider-color);
     --track-width: 2px;
 
+    --background-color: var(--flow-ui-panel-background-color);
+    --color: var(--flow-ui-panel-color);
+
     display: block;
   }
 
@@ -20884,6 +21001,9 @@ const styles$9 = lit.css`
     justify-content: start;
     border-radius: 0;
     overflow: hidden;
+
+    background-color: var(--background-color);
+    color: var(--color);
   }
 
   /* Ensure nav is positioned when tab-group is placed in a split panel and the panel is closed */
@@ -20932,7 +21052,9 @@ const styles$9 = lit.css`
 
   .tab-group__indicator {
     position: absolute;
-    transition: var(--flow-ui-transition-fast) translate ease, var(--flow-ui-transition-fast) width ease;
+    transition:
+      var(--flow-ui-transition-fast) translate ease,
+      var(--flow-ui-transition-fast) width ease;
   }
 
   .tab-group__body-wrapper {
@@ -21639,6 +21761,8 @@ const styles$8 = lit.css`
     min-height: 0;
 
     --padding: 0;
+    --background-color: var(--flow-ui-panel-background-color);
+    --color: var(--flow-ui-panel-color);
   }
 
   :host([active]) {
@@ -21649,6 +21773,8 @@ const styles$8 = lit.css`
     height: 100%;
     display: flex;
     flex-direction: column;
+    background-color: var(--background-color);
+    color: var(--color);
   }
 
   /* Body */
@@ -21746,6 +21872,9 @@ const styles$7 = lit.css`
 
   :host {
     display: inline-block;
+    --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);
   }
 
   .tab {
@@ -21757,24 +21886,27 @@ const styles$7 = lit.css`
     font-size: var(--flow-ui-tab-label-font-size);
     font-weight: var(--flow-ui-tab-label-font-weight);
     border-radius: var(--flow-ui-border-radius-medium);
-    color: var(--flow-ui-color-neutral-600);
+    color: var(--flow-ui-tab-color);
     padding: var(--flow-ui-tab-padding);
     white-space: nowrap;
     user-select: none;
     cursor: pointer;
-    transition: var(--transition-speed) box-shadow, var(--transition-speed) color;
+    transition:
+      var(--transition-speed) box-shadow,
+      var(--transition-speed) color;
   }
 
-  .tab:hover:not(.tab--disabled) {
-    color: var(--flow-ui-color-primary-500);
+  /* Highlight icon only on hover */
+  .tab:hover:not(.tab--disabled) .tab__icon {
+    color: var(--flow-ui-tab-active-label-color);
   }
 
   .tab:focus {
     outline: none;
   }
 
-  .tab:focus-visible:not(.tab--disabled) {
-    color: var(--flow-ui-color-primary-500);
+  .tab:focus-visible:not(.tab--disabled) .tab__icon {
+    color: var(--flow-ui-tab-active-icon-color);
   }
 
   .tab:focus-visible {
@@ -21783,7 +21915,15 @@ const styles$7 = lit.css`
   }
 
   .tab.tab--active:not(.tab--disabled) {
-    color: var(--flow-ui-color-primary-500);
+    color: var(--flow-ui-active-label-color);
+  }
+
+  .tab.tab--active:not(.tab--disabled) .tab__icon {
+    color: var(--flow-ui-tab-active-icon-color);
+  }
+
+  .tab.tab--active:not(.tab--disabled) .tab__label {
+    color: var(--flow-ui-tab-active-label-color);
   }
 
   .tab.tab--closable {
@@ -22154,7 +22294,7 @@ var __decorateClass$5 = (decorators, target, key, kind) => {
     __defProp$5(target, key, result);
   return result;
 };
-class FlowUiTextarea extends FlowRdfElement {
+class FlowUiTextarea extends FlowRdfFormControl {
   constructor() {
     super(...arguments);
     this.formControlController = new FormControlController(this, {
@@ -22640,6 +22780,8 @@ const styles$5 = lit.css`
   }
 
   .timer {
+    /* Balance top spacing with VCR button spacing */
+    padding-top: var(--flow-ui-spacing-x-small);
     min-width: fit-content;
   }
 
@@ -23057,7 +23199,7 @@ var __decorateClass$3 = (decorators, target, key, kind) => {
     __defProp$3(target, key, result);
   return result;
 };
-class FlowUiToolButtonGroup extends FlowRdfElement {
+class FlowUiToolButtonGroup extends FlowRdfFormControl {
   constructor() {
     super(...arguments);
     /** @internal */
@@ -24410,6 +24552,7 @@ class FlowUiTree extends FlowRdfElement {
   }
   async connectedCallback() {
     super.connectedCallback();
+    this.classList.add(FlowRdfFormControl.FLOW_UI_FORM_CONTROL_CLASS);
     this.handleTreeChanged = this.handleTreeChanged.bind(this);
     this.handleFocusIn = this.handleFocusIn.bind(this);
     this.handleFocusOut = this.handleFocusOut.bind(this);
@@ -24429,6 +24572,9 @@ class FlowUiTree extends FlowRdfElement {
     this.removeEventListener("focusout", this.handleFocusOut);
     this.removeEventListener("flow-ui-lazy-change", this.handleSlotChange);
   }
+  handleClassChange() {
+    this.classList.add(FlowRdfFormControl.FLOW_UI_FORM_CONTROL_CLASS);
+  }
   // Generates a clone of the expand icon element to use for each tree item
   getExpandButtonIcon(status) {
     const slot = status === "expand" ? this.expandedIconSlot : this.collapsedIconSlot;
@@ -24667,6 +24813,9 @@ __decorateClass([
 __decorateClass([
   decorators_js.query("slot[name=collapse-icon]")
 ], FlowUiTree.prototype, "collapsedIconSlot", 2);
+__decorateClass([
+  decorators_js.property({ reflect: true })
+], FlowUiTree.prototype, "class", 2);
 __decorateClass([
   decorators_js.property({
     converter: {
@@ -24681,6 +24830,9 @@ __decorateClass([
 __decorateClass([
   decorators_js.property({ reflect: true })
 ], FlowUiTree.prototype, "size", 2);
+__decorateClass([
+  watch("class")
+], FlowUiTree.prototype, "handleClassChange", 1);
 __decorateClass([
   watch("size", { waitUntilFirstUpdate: true })
 ], FlowUiTree.prototype, "handleSizeChange", 1);
@@ -24852,7 +25004,7 @@ async function registerComponents() {
   });
 }
 
-const version = "4.0.2";
+const version = "4.0.4";
 
 const CONSOLE_HIGHLIGHT_STYLE = `
   padding: 2px 4px;