@emuanalytics/flow-rdf-ui 4.0.1 → 4.0.3

package/dist/index.cjs

@@ -3022,6 +3022,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 +3050,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 +3090,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 +3367,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 +3545,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",
@@ -11113,6 +11123,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 +11250,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",
@@ -12771,8 +12792,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 +14685,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 +14729,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 +14838,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 */
@@ -19234,6 +19261,7 @@ const styles$g = lit.css`
   :host {
     --divider-width: 2px;
     --divider-hit-area: 12px;
+    --color: var(--flow-ui-divider-color);
 
     display: block;
   }
@@ -19242,7 +19270,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 +19291,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 +19322,6 @@ const styles$g = lit.css`
     cursor: col-resize;
   }
 
-
   :host(:not([vertical])) .divider::after {
     display: flex;
     content: '';
@@ -20872,9 +20900,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 +20915,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 +20966,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 +21675,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 +21687,8 @@ const styles$8 = lit.css`
     height: 100%;
     display: flex;
     flex-direction: column;
+    background-color: var(--background-color);
+    color: var(--color);
   }
 
   /* Body */
@@ -21746,6 +21786,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 +21800,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 +21829,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 {
@@ -22640,6 +22694,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;
   }
 
@@ -24716,7 +24772,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");
@@ -24782,9 +24838,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;

package/dist/index.d.cts

@@ -1286,8 +1286,10 @@ declare const converter: FlowQueryBuilderConverter;
  *
  * This function is called automatically when using the `flow-rdf-angular`
  * support library.
+ *
+ * @returns A promise that resolves when all custom elements have been defined.
  */
-declare function registerComponents(): void;
+declare function registerComponents(): Promise<void>;
 
 type FunctionParams<T> = T extends (...args: infer U) => string ? U : [];
 interface Translation$1 {
@@ -1411,7 +1413,7 @@ declare class FlowUiAlert extends FlowRdfElement {
     /** Enables a close button that allows the user to dismiss the alert. */
     closable: boolean;
     /** The alert's theme variant. */
-    variant: 'primary' | 'success' | 'neutral' | 'warning' | 'danger';
+    variant: 'primary' | 'secondary' | 'success' | 'neutral' | 'warning' | 'danger';
     /**
      * The length of time (in ms) that the alert will show itself before closing. If the user interacts with
      * the alert before it closes (e.g. by moving the mouse over it), the timer will restart.
@@ -2992,7 +2994,7 @@ declare class FlowUiTag extends FlowRdfElement {
     };
     private readonly localize;
     /** The tag's theme variant. */
-    variant: 'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text';
+    variant: 'primary' | 'secondary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text';
     /** The tag's size. */
     size: 'small' | 'medium' | 'large';
     /** Draws a pill-style tag with rounded edges. */

package/dist/index.d.mts

@@ -1286,8 +1286,10 @@ declare const converter: FlowQueryBuilderConverter;
  *
  * This function is called automatically when using the `flow-rdf-angular`
  * support library.
+ *
+ * @returns A promise that resolves when all custom elements have been defined.
  */
-declare function registerComponents(): void;
+declare function registerComponents(): Promise<void>;
 
 type FunctionParams<T> = T extends (...args: infer U) => string ? U : [];
 interface Translation$1 {
@@ -1411,7 +1413,7 @@ declare class FlowUiAlert extends FlowRdfElement {
     /** Enables a close button that allows the user to dismiss the alert. */
     closable: boolean;
     /** The alert's theme variant. */
-    variant: 'primary' | 'success' | 'neutral' | 'warning' | 'danger';
+    variant: 'primary' | 'secondary' | 'success' | 'neutral' | 'warning' | 'danger';
     /**
      * The length of time (in ms) that the alert will show itself before closing. If the user interacts with
      * the alert before it closes (e.g. by moving the mouse over it), the timer will restart.
@@ -2992,7 +2994,7 @@ declare class FlowUiTag extends FlowRdfElement {
     };
     private readonly localize;
     /** The tag's theme variant. */
-    variant: 'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text';
+    variant: 'primary' | 'secondary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text';
     /** The tag's size. */
     size: 'small' | 'medium' | 'large';
     /** Draws a pill-style tag with rounded edges. */

package/dist/index.d.ts

@@ -1286,8 +1286,10 @@ declare const converter: FlowQueryBuilderConverter;
  *
  * This function is called automatically when using the `flow-rdf-angular`
  * support library.
+ *
+ * @returns A promise that resolves when all custom elements have been defined.
  */
-declare function registerComponents(): void;
+declare function registerComponents(): Promise<void>;
 
 type FunctionParams<T> = T extends (...args: infer U) => string ? U : [];
 interface Translation$1 {
@@ -1411,7 +1413,7 @@ declare class FlowUiAlert extends FlowRdfElement {
     /** Enables a close button that allows the user to dismiss the alert. */
     closable: boolean;
     /** The alert's theme variant. */
-    variant: 'primary' | 'success' | 'neutral' | 'warning' | 'danger';
+    variant: 'primary' | 'secondary' | 'success' | 'neutral' | 'warning' | 'danger';
     /**
      * The length of time (in ms) that the alert will show itself before closing. If the user interacts with
      * the alert before it closes (e.g. by moving the mouse over it), the timer will restart.
@@ -2992,7 +2994,7 @@ declare class FlowUiTag extends FlowRdfElement {
     };
     private readonly localize;
     /** The tag's theme variant. */
-    variant: 'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text';
+    variant: 'primary' | 'secondary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text';
     /** The tag's size. */
     size: 'small' | 'medium' | 'large';
     /** Draws a pill-style tag with rounded edges. */