@emuanalytics/flow-rdf-ui 4.0.1 → 4.0.3

package/dist/index.mjs

@@ -3016,6 +3016,8 @@ const styles$Y = 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;
   }
 
@@ -3042,11 +3044,11 @@ const styles$Y = 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 {
@@ -3082,7 +3084,6 @@ const styles$Y = css`
   .icon-button__tooltip--confirm .confirm__label {
     margin-inline: var(--flow-ui-spacing-x-small);
   }
-
 `;
 
 var __defProp$V = Object.defineProperty;
@@ -3360,6 +3361,14 @@ const styles$X = 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);
   }
@@ -3530,6 +3539,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",
@@ -11107,6 +11117,16 @@ const styles$E = 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);
@@ -11224,6 +11244,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",
@@ -12765,8 +12786,8 @@ const styles$A = 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 */
@@ -14658,6 +14679,7 @@ const styles$r = css`
   }
 
   .panel-header__title {
+    font-weight: var(--flow-ui-panel-header-font-weight);
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
@@ -14701,6 +14723,7 @@ class FlowUiPanelHeader extends FlowRdfElement {
   connectedCallback() {
     super.connectedCallback();
     this.closed = boolean(this.closed, true);
+    this.fixed = boolean(this.fixed, true);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
@@ -14809,12 +14832,16 @@ const styles$q = 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 */
@@ -19228,6 +19255,7 @@ const styles$g = css`
   :host {
     --divider-width: 2px;
     --divider-hit-area: 12px;
+    --color: var(--flow-ui-divider-color);
 
     display: block;
   }
@@ -19236,7 +19264,7 @@ const styles$g = 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);
   }
 
@@ -19257,7 +19285,8 @@ const styles$g = css`
     transform: scale(0);
   }
 
-  :host([dragging]) .divider-highlight, .divider:hover .divider-highlight {
+  :host([dragging]) .divider-highlight,
+  .divider:hover .divider-highlight {
     transform: scale(1);
   }
 
@@ -19287,7 +19316,6 @@ const styles$g = css`
     cursor: col-resize;
   }
 
-
   :host(:not([vertical])) .divider::after {
     display: flex;
     content: '';
@@ -20866,9 +20894,12 @@ const styles$9 = 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;
   }
 
@@ -20878,6 +20909,9 @@ const styles$9 = 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 */
@@ -20926,7 +20960,9 @@ const styles$9 = 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 {
@@ -21633,6 +21669,8 @@ const styles$8 = css`
     min-height: 0;
 
     --padding: 0;
+    --background-color: var(--flow-ui-panel-background-color);
+    --color: var(--flow-ui-panel-color);
   }
 
   :host([active]) {
@@ -21643,6 +21681,8 @@ const styles$8 = css`
     height: 100%;
     display: flex;
     flex-direction: column;
+    background-color: var(--background-color);
+    color: var(--color);
   }
 
   /* Body */
@@ -21740,6 +21780,9 @@ const styles$7 = 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 {
@@ -21751,24 +21794,27 @@ const styles$7 = 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 {
@@ -21777,7 +21823,15 @@ const styles$7 = 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 {
@@ -22634,6 +22688,8 @@ const styles$5 = css`
   }
 
   .timer {
+    /* Balance top spacing with VCR button spacing */
+    padding-top: var(--flow-ui-spacing-x-small);
     min-width: fit-content;
   }
 
@@ -24710,7 +24766,7 @@ class FlowUiVisuallyHidden extends FlowRdfElement {
 }
 FlowUiVisuallyHidden.styles = styles;
 
-function registerComponents() {
+async function registerComponents() {
   FlowUiAlert.define("flow-ui-alert");
   FlowUiAnimation.define("flow-ui-animation");
   FlowUiAvatar.define("flow-ui-avatar");
@@ -24776,9 +24832,77 @@ function registerComponents() {
   FlowUiTreeItem.define("flow-ui-tree-item");
   FlowUiTree.define("flow-ui-tree");
   FlowUiVisuallyHidden.define("flow-ui-visually-hidden");
+  return Promise.all([
+    window.customElements.whenDefined("flow-ui-alert"),
+    window.customElements.whenDefined("flow-ui-animation"),
+    window.customElements.whenDefined("flow-ui-avatar"),
+    window.customElements.whenDefined("flow-ui-badge"),
+    window.customElements.whenDefined("flow-ui-breadcrumb-item"),
+    window.customElements.whenDefined("flow-ui-breadcrumb"),
+    window.customElements.whenDefined("flow-ui-button-group"),
+    window.customElements.whenDefined("flow-ui-button"),
+    window.customElements.whenDefined("flow-ui-calendar"),
+    window.customElements.whenDefined("flow-ui-card"),
+    window.customElements.whenDefined("flow-ui-carousel-item"),
+    window.customElements.whenDefined("flow-ui-carousel"),
+    window.customElements.whenDefined("flow-ui-chart"),
+    window.customElements.whenDefined("flow-ui-checkbox"),
+    window.customElements.whenDefined("flow-ui-color-mapper"),
+    window.customElements.whenDefined("flow-ui-color-picker"),
+    window.customElements.whenDefined("flow-ui-color-stop"),
+    window.customElements.whenDefined("flow-ui-date-time-picker"),
+    window.customElements.whenDefined("flow-ui-details"),
+    window.customElements.whenDefined("flow-ui-dialog"),
+    window.customElements.whenDefined("flow-ui-divider"),
+    window.customElements.whenDefined("flow-ui-drawer"),
+    window.customElements.whenDefined("flow-ui-dropdown"),
+    window.customElements.whenDefined("flow-ui-gauge"),
+    window.customElements.whenDefined("flow-ui-icon-button"),
+    window.customElements.whenDefined("flow-ui-icon"),
+    window.customElements.whenDefined("flow-ui-input"),
+    window.customElements.whenDefined("flow-ui-map"),
+    window.customElements.whenDefined("flow-ui-menu-item"),
+    window.customElements.whenDefined("flow-ui-menu-label"),
+    window.customElements.whenDefined("flow-ui-menu"),
+    window.customElements.whenDefined("flow-ui-mutation-observer"),
+    window.customElements.whenDefined("flow-ui-option"),
+    window.customElements.whenDefined("flow-ui-panel-header"),
+    window.customElements.whenDefined("flow-ui-panel"),
+    window.customElements.whenDefined("flow-ui-popup"),
+    window.customElements.whenDefined("flow-ui-progress-bar"),
+    window.customElements.whenDefined("flow-ui-progress-ring"),
+    window.customElements.whenDefined("flow-ui-query-builder"),
+    window.customElements.whenDefined("flow-ui-radio-group"),
+    window.customElements.whenDefined("flow-ui-radio"),
+    window.customElements.whenDefined("flow-ui-range"),
+    window.customElements.whenDefined("flow-ui-resize-observer"),
+    window.customElements.whenDefined("flow-ui-scroll-view"),
+    window.customElements.whenDefined("flow-ui-select"),
+    window.customElements.whenDefined("flow-ui-spinner"),
+    window.customElements.whenDefined("flow-ui-split-view-divider"),
+    window.customElements.whenDefined("flow-ui-split-view-pane"),
+    window.customElements.whenDefined("flow-ui-split-view-toggle-button"),
+    window.customElements.whenDefined("flow-ui-split-view"),
+    window.customElements.whenDefined("flow-ui-stepper-panel"),
+    window.customElements.whenDefined("flow-ui-stepper"),
+    window.customElements.whenDefined("flow-ui-switch"),
+    window.customElements.whenDefined("flow-ui-tab-group"),
+    window.customElements.whenDefined("flow-ui-tab-panel"),
+    window.customElements.whenDefined("flow-ui-tab"),
+    window.customElements.whenDefined("flow-ui-tag"),
+    window.customElements.whenDefined("flow-ui-textarea"),
+    window.customElements.whenDefined("flow-ui-timer"),
+    window.customElements.whenDefined("flow-ui-tool-button-group"),
+    window.customElements.whenDefined("flow-ui-tool-button"),
+    window.customElements.whenDefined("flow-ui-tooltip"),
+    window.customElements.whenDefined("flow-ui-tree-item"),
+    window.customElements.whenDefined("flow-ui-tree"),
+    window.customElements.whenDefined("flow-ui-visually-hidden")
+  ]).then(() => {
+  });
 }
 
-const version = "4.0.1";
+const version = "4.0.3";
 
 const CONSOLE_HIGHLIGHT_STYLE = `
   padding: 2px 4px;