@emuanalytics/flow-rdf-ui 4.0.2 → 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;
   }
 
@@ -24852,7 +24908,7 @@ async function registerComponents() {
   });
 }
 
-const version = "4.0.2";
+const version = "4.0.3";
 
 const CONSOLE_HIGHLIGHT_STYLE = `
   padding: 2px 4px;

package/dist/index.d.cts

@@ -1413,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.
@@ -2994,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

@@ -1413,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.
@@ -2994,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

@@ -1413,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.
@@ -2994,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.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;
   }
 
@@ -24846,7 +24902,7 @@ async function registerComponents() {
   });
 }
 
-const version = "4.0.2";
+const version = "4.0.3";
 
 const CONSOLE_HIGHLIGHT_STYLE = `
   padding: 2px 4px;