@emuanalytics/flow-rdf-ui 4.1.0-preview.6 → 4.1.0-preview.8

package/dist/components/card/card.styles.mjs

@@ -8,7 +8,7 @@ const styles = css`
     --border-color: var(--flow-ui-card-border-color);
     --border-radius: var(--flow-ui-card-border-radius);
     --border-width: var(--flow-ui-card-border-width);
-    --padding: var(--flow-ui-spacing-large);
+    --padding: var(--flow-ui-card-padding);
 
     --background-color: var(--flow-ui-card-background-color);
     --color: var(--flow-ui-card-color);
@@ -72,6 +72,15 @@ const styles = css`
   .card:not(.card--has-footer) .card__footer {
     display: none;
   }
+
+  /* Remove margin from first and last child of default slot */
+  ::slotted(:nth-child(1 of :not([slot]))) {
+    margin-top: 0;
+  }
+
+  ::slotted(:nth-last-child(1 of :not([slot]))) {
+    margin-bottom: 0;
+  }
 `;
 
 export { styles as default };

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

@@ -225,7 +225,6 @@ const _FlowUiQueryBuilder = class _FlowUiQueryBuilder extends FlowRdfElement {
           size=${andOrSize}
           pill
           outline
-          variant="secondary"
           class="query-builder-and-or-button-group"
           value=${ruleSet.condition}
           @flow-ui-change=${this.handleConditionChange}
@@ -385,7 +384,8 @@ const _FlowUiQueryBuilder = class _FlowUiQueryBuilder extends FlowRdfElement {
       "form-control--medium": this.size === "medium",
       "form-control--large": this.size === "large",
       "form-control--has-label": hasLabel,
-      "form-control--has-help-text": hasHelpText
+      "form-control--has-help-text": hasHelpText,
+      "form-control--has-border": this.borders
     })}
       >
         <label
@@ -440,11 +440,11 @@ const _FlowUiQueryBuilder = class _FlowUiQueryBuilder extends FlowRdfElement {
             >
               Add filter
             </flow-ui-tool-button>
-            <div part="footer-accessories" class="query-builder__footer-auxiliary">
-              <slot name="footer-accessory"></slot>
-            </div>
           </div>
         </div>
+        <div part="footer-accessories" class="query-builder__footer-auxiliary">
+          <slot name="footer-accessory"></slot>
+        </div>
       </div>
     `;
   }

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

@@ -120,12 +120,12 @@ const styles = css`
 
   .query-builder__rule-menu-button {
     margin-inline: calc(var(--flow-ui-spacing-x-small) * -1);
-    color: var(--flow-ui-color-neutral-400);
+    color: var(--flow-ui-color-neutral-700);
   }
 
   .query-builder__toolbar:hover .query-builder__rule-menu-button,
   .query-builder__rule:hover .query-builder__rule-menu-button {
-    color: var(--flow-ui-color-neutral-600);
+    color: var(--flow-ui-color-neutral-900);
   }
 
   .menu-item--danger::part(base) {
@@ -303,9 +303,13 @@ const styles = css`
     display: flex;
     flex: 1;
     justify-content: end;
-    gap: var(--flow-ui-spacing-x-small);
+    gap: var(--flow-ui-spacing-small);
 
-    padding-top: var(--flow-ui-spacing-small);
+    padding-top: var(--footer-spacing);
+  }
+
+  .form-control--has-border .query-builder__footer-auxiliary {
+    margin-right: calc(var(--control-spacing) * -1 - var(--control-border-width));
   }
 
   .query-builder__footer ::slotted(flow-ui-button:not(:first-of-type)) {

package/dist/components/tab/tab.component.mjs

@@ -33,6 +33,7 @@ class FlowUiTab extends FlowRdfElement {
     this.iconOnly = false;
     this.closable = false;
     this.disabled = false;
+    this.placement = "top";
     this.tooltipPlacement = "top";
     this.tooltipDistance = -4;
     this.tooltipSkidding = 0;
@@ -143,6 +144,9 @@ __decorateClass([
 __decorateClass([
   property()
 ], FlowUiTab.prototype, "label", 2);
+__decorateClass([
+  property({ reflect: true })
+], FlowUiTab.prototype, "placement", 2);
 __decorateClass([
   property({ attribute: "tooltip-placement" })
 ], FlowUiTab.prototype, "tooltipPlacement", 2);

package/dist/components/tab/tab.styles.mjs

@@ -5,10 +5,12 @@ const styles = css`
   ${componentStyles}
 
   :host {
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
     --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);
+    --min-size: auto;
   }
 
   .tab {
@@ -30,6 +32,16 @@ const styles = css`
       var(--transition-speed) color;
   }
 
+  :host([placement='top']) .tab,
+  :host([placement='bottom']) .tab {
+    min-width: var(--min-size);
+  }
+
+  :host([placement='start']) .tab,
+  :host([placement='end']) .tab {
+    min-height: var(--min-size);
+  }
+
   /* Highlight icon only on hover */
   .tab:hover:not(.tab--disabled) .tab__icon {
     color: var(--flow-ui-tab-active-label-color);

package/dist/components/tab-group/tab-group.component.mjs

@@ -259,6 +259,7 @@ class FlowUiTabGroup extends FlowRdfElement {
     this.panels = this.getAllPanels();
     this.tabs.forEach((tab) => {
       tab.tabGroup = this;
+      tab.placement = this.placement;
     });
     if (this._activeTab && this.tabs.includes(this._activeTab) === false) {
       this.setActiveTab(this.tabs.find((el) => !el.disabled) ?? this.tabs[0], { emitEvents: true });

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

@@ -23,7 +23,7 @@ const styles = css`
     display: flex;
     align-items: stretch;
     flex-direction: column;
-    color: var(--flow-ui-color-neutral-700);
+    color: var(--flow-ui-color-neutral-900);
     cursor: pointer;
     user-select: none;
   }
@@ -77,7 +77,7 @@ const styles = css`
     align-items: center;
     justify-content: center;
     box-sizing: content-box;
-    color: var(--flow-ui-color-neutral-500);
+    color: var(--flow-ui-color-neutral-800);
     padding: var(--flow-ui-spacing-x-small);
     width: 1rem;
     height: 1rem;
@@ -134,7 +134,7 @@ const styles = css`
   }
 
   :host(:not([aria-disabled='true'])) .tree-item__expand-button {
-    color: var(--flow-ui-color-neutral-600);
+    color: var(--flow-ui-color-neutral-800);
   }
 
   .tree-item__label {

package/dist/custom-elements.json

@@ -265,6 +265,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/animation/animation.component.js",
@@ -670,160 +855,94 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/avatar/avatar.component.js",
+      "path": "components/badge/badge.component.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "FlowUiAvatar",
-          "cssProperties": [
-            {
-              "description": "The size of the avatar.",
-              "name": "--size"
-            }
-          ],
+          "name": "FlowUiBadge",
           "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"
+              "description": "The badge's content.",
+              "name": ""
             }
           ],
           "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",
+              "name": "variant",
               "type": {
-                "text": "string"
+                "text": "'primary' | 'secondary' | 'success' | 'neutral' | 'warning' | 'danger'"
               },
-              "default": "''",
-              "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
-              "attribute": "initials"
+              "default": "'primary'",
+              "description": "The badge's theme variant.",
+              "attribute": "variant",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "loading",
+              "name": "pill",
               "type": {
-                "text": "'eager' | 'lazy'"
+                "text": "boolean"
               },
-              "default": "'eager'",
-              "description": "Indicates how the browser should load the image.",
-              "attribute": "loading"
+              "default": "false",
+              "description": "Draws a pill-style badge with rounded edges.",
+              "attribute": "pill",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "shape",
+              "name": "pulse",
               "type": {
-                "text": "'circle' | 'square' | 'rounded'"
+                "text": "boolean"
               },
-              "default": "'circle'",
-              "description": "The shape of the avatar.",
-              "attribute": "shape",
+              "default": "false",
+              "description": "Makes the badge pulsate to draw attention.",
+              "attribute": "pulse",
               "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",
+              "name": "variant",
               "type": {
-                "text": "string"
+                "text": "'primary' | 'secondary' | 'success' | 'neutral' | 'warning' | 'danger'"
               },
-              "default": "''",
-              "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
-              "fieldName": "initials"
+              "default": "'primary'",
+              "description": "The badge's theme variant.",
+              "fieldName": "variant"
             },
             {
-              "name": "loading",
+              "name": "pill",
               "type": {
-                "text": "'eager' | 'lazy'"
+                "text": "boolean"
               },
-              "default": "'eager'",
-              "description": "Indicates how the browser should load the image.",
-              "fieldName": "loading"
+              "default": "false",
+              "description": "Draws a pill-style badge with rounded edges.",
+              "fieldName": "pill"
             },
             {
-              "name": "shape",
+              "name": "pulse",
               "type": {
-                "text": "'circle' | 'square' | 'rounded'"
+                "text": "boolean"
               },
-              "default": "'circle'",
-              "description": "The shape of the avatar.",
-              "fieldName": "shape"
+              "default": "false",
+              "description": "Makes the badge pulsate to draw attention.",
+              "fieldName": "pulse"
             }
           ],
           "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"
-          ],
+          "tagName": "flow-ui-badge",
+          "summary": "Badges are used to draw attention and display statuses or counts.",
           "customElement": true
         }
       ],
@@ -832,23 +951,23 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "FlowUiAvatar",
-            "module": "components/avatar/avatar.component.js"
+            "name": "FlowUiBadge",
+            "module": "components/badge/badge.component.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/avatar/avatar.js",
+      "path": "components/badge/badge.js",
       "declarations": [],
       "exports": [
         {
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "FlowUiAvatar",
-            "module": "components/avatar/avatar.js"
+            "name": "FlowUiBadge",
+            "module": "components/badge/badge.js"
           }
         }
       ]
@@ -1437,125 +1556,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/badge/badge.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "FlowUiBadge",
-          "cssParts": [
-            {
-              "description": "The component's base wrapper.",
-              "name": "base"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The badge's content.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "'primary' | 'secondary' | 'success' | 'neutral' | 'warning' | 'danger'"
-              },
-              "default": "'primary'",
-              "description": "The badge's theme variant.",
-              "attribute": "variant",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "pill",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Draws a pill-style badge with rounded edges.",
-              "attribute": "pill",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "pulse",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Makes the badge pulsate to draw attention.",
-              "attribute": "pulse",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "variant",
-              "type": {
-                "text": "'primary' | 'secondary' | 'success' | 'neutral' | 'warning' | 'danger'"
-              },
-              "default": "'primary'",
-              "description": "The badge's theme variant.",
-              "fieldName": "variant"
-            },
-            {
-              "name": "pill",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Draws a pill-style badge with rounded edges.",
-              "fieldName": "pill"
-            },
-            {
-              "name": "pulse",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Makes the badge pulsate to draw attention.",
-              "fieldName": "pulse"
-            }
-          ],
-          "superclass": {
-            "name": "FlowRdfElement",
-            "module": "/src/internal/flow-ui-rdf-element"
-          },
-          "tagName": "flow-ui-badge",
-          "summary": "Badges are used to draw attention and display statuses or counts.",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "FlowUiBadge",
-            "module": "components/badge/badge.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/badge/badge.js",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "FlowUiBadge",
-            "module": "components/badge/badge.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/breadcrumb-item/breadcrumb-item.component.js",
@@ -23960,6 +23960,6 @@
   ],
   "package": {
     "name": "@emuanalytics/flow-rdf-ui",
-    "version": "4.1.0-preview.6"
+    "version": "4.1.0-preview.8"
   }
 }

package/dist/index.d.mts

@@ -3847,6 +3847,10 @@ declare class FlowUiTab extends FlowRdfElement {
     disabled: boolean;
     /** Full title of tab  */
     label: string;
+    /** @internal
+     * The placement of the tabs. This is set by the parent tab group.
+     * */
+    placement: 'top' | 'bottom' | 'start' | 'end';
     /**
      * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip
      * inside of the viewport.

package/dist/index.d.ts

@@ -3847,6 +3847,10 @@ declare class FlowUiTab extends FlowRdfElement {
     disabled: boolean;
     /** Full title of tab  */
     label: string;
+    /** @internal
+     * The placement of the tabs. This is set by the parent tab group.
+     * */
+    placement: 'top' | 'bottom' | 'start' | 'end';
     /**
      * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip
      * inside of the viewport.

package/dist/package.json.mjs

@@ -1,3 +1,3 @@
-const version = "4.1.0-preview.6";
+const version = "4.1.0-preview.8";
 
 export { version };

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

@@ -35,6 +35,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-animation",
       "description": "Animate elements declaratively with over 100 animation presets. Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).\n\n\n---\n\n\n\n\n### **Events:**\n - **flow-ui-cancel** - Emitted when the animation is canceled.\n- **flow-ui-finish** - Emitted when the animation finishes.\n- **flow-ui-start** - Emitted when the animation starts or restarts.\n\n### **Methods:**\n - **cancel()** - Clears all keyframe effects caused by this animation and aborts its playback.\n- **finish()** - Sets the playback time to the end of the animation corresponding to the current playback direction.\n\n### **Slots:**\n - _default_ - The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To animate multiple elements, either wrap them in a single container or use multiple `<flow-ui-animation>` elements.",
@@ -98,37 +134,30 @@
       "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.",
+      "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.",
       "attributes": [
         {
-          "name": "image",
-          "description": "The image source to use for the avatar.",
-          "values": []
+          "name": "variant",
+          "description": "The badge's theme variant.",
+          "values": [
+            { "name": "primary" },
+            { "name": "secondary" },
+            { "name": "success" },
+            { "name": "neutral" },
+            { "name": "warning" },
+            { "name": "danger" }
+          ]
         },
         {
-          "name": "label",
-          "description": "A label to use to describe the avatar to assistive devices.",
+          "name": "pill",
+          "description": "Draws a pill-style badge with rounded edges.",
           "values": []
         },
         {
-          "name": "initials",
-          "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
+          "name": "pulse",
+          "description": "Makes the badge pulsate to draw attention.",
           "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": []
@@ -206,35 +235,6 @@
       ],
       "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.",
-      "attributes": [
-        {
-          "name": "variant",
-          "description": "The badge's theme variant.",
-          "values": [
-            { "name": "primary" },
-            { "name": "secondary" },
-            { "name": "success" },
-            { "name": "neutral" },
-            { "name": "warning" },
-            { "name": "danger" }
-          ]
-        },
-        {
-          "name": "pill",
-          "description": "Draws a pill-style badge with rounded edges.",
-          "values": []
-        },
-        {
-          "name": "pulse",
-          "description": "Makes the badge pulsate to draw attention.",
-          "values": []
-        }
-      ],
-      "references": []
-    },
     {
       "name": "flow-ui-breadcrumb-item",
       "description": "Breadcrumb Items are used inside [breadcrumbs](./flow-ui-breadcrumb) to represent different links.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The breadcrumb item's label.\n- **prefix** - An optional prefix, usually an icon or icon button.\n- **suffix** - An optional suffix, usually an icon or icon button.\n- **separator** - The separator to use for the breadcrumb item. This will only change the separator for this item. If you want to change it for all items in the group, set the separator on `<flow-ui-breadcrumb>` instead.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label** - The breadcrumb item's label.\n- **prefix** - The container that wraps the prefix.\n- **suffix** - The container that wraps the suffix.\n- **separator** - The container that wraps the separator.",

package/package.json

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

package/themes/dark.css

@@ -371,9 +371,9 @@
 
   --flow-ui-line-height-denser: 1;
   --flow-ui-line-height-dense: 1.2;
-  --flow-ui-line-height-normal: 1.8;
-  --flow-ui-line-height-loose: 2.2;
-  --flow-ui-line-height-looser: 2.6;
+  --flow-ui-line-height-normal: 1.5;
+  --flow-ui-line-height-loose: 1.8;
+  --flow-ui-line-height-looser: 2.2;
 
   --flow-ui-focus-ring-color: var(--flow-ui-color-primary-600);
   --flow-ui-focus-ring-style: solid;
@@ -516,7 +516,7 @@
     var(--flow-ui-spacing-large);
   --flow-ui-panel-header-background-color: var(--flow-ui-color-neutral-50);
   --flow-ui-panel-header-font-weight: var(--flow-ui-font-weight-semibold);
-  --flow-ui-panel-header-font-size: var(--flow-ui-font-size-large);
+  --flow-ui-panel-header-font-size: var(--flow-ui-font-size-medium);
   --flow-ui-panel-header-color: var(--flow-ui-color-text);
   --flow-ui-panel-header-accessory-color: var(--flow-ui-color-neutral-800);
 
@@ -527,11 +527,12 @@
   --flow-ui-alert-border-color: var(--flow-ui-color-neutral-400);
   --flow-ui-alert-border-width: 1px;
 
-  --flow-ui-card-background-color: var(--flow-ui-color-neutral-400);
+  --flow-ui-card-background-color: var(--flow-ui-color-neutral-300);
+  --flow-ui-card-padding: var(--flow-ui-spacing-medium);
   --flow-ui-card-color: var(--flow-ui-color-text);
   --flow-ui-card-border-color: var(--flow-ui-color-neutral-400);
-  --flow-ui-card-border-width: 1px;
-  --flow-ui-card-border-radius: var(--flow-ui-border-radius-medium);
+  --flow-ui-card-border-width: 0;
+  --flow-ui-card-border-radius: 0;
 
   --flow-ui-details-background-color: var(--flow-ui-color-neutral-400);
   --flow-ui-details-color: var(--flow-ui-color-text);
@@ -583,7 +584,7 @@
   --flow-ui-tab-active-icon-color: var(--flow-ui-color-primary-500);
 
   --flow-ui-gauge-color: var(--flow-ui-color-neutral-1000);
-  --flow-ui-gauge-background-color: var(--flow-ui-color-neutral-00);
+  --flow-ui-gauge-background-color: var(--flow-ui-color-neutral-300);
   --flow-ui-gauge-padding: var(--flow-ui-spacing-x-small);
   --flow-ui-gauge-header-height: 40px;
   --flow-ui-gauge-header-font-size: var(--flow-ui-font-size-medium);

package/themes/dark.styles.js

@@ -374,9 +374,9 @@ export default css`
 
     --flow-ui-line-height-denser: 1;
     --flow-ui-line-height-dense: 1.2;
-    --flow-ui-line-height-normal: 1.8;
-    --flow-ui-line-height-loose: 2.2;
-    --flow-ui-line-height-looser: 2.6;
+    --flow-ui-line-height-normal: 1.5;
+    --flow-ui-line-height-loose: 1.8;
+    --flow-ui-line-height-looser: 2.2;
 
     --flow-ui-focus-ring-color: var(--flow-ui-color-primary-600);
     --flow-ui-focus-ring-style: solid;
@@ -537,7 +537,7 @@ export default css`
       var(--flow-ui-spacing-large);
     --flow-ui-panel-header-background-color: var(--flow-ui-color-neutral-50);
     --flow-ui-panel-header-font-weight: var(--flow-ui-font-weight-semibold);
-    --flow-ui-panel-header-font-size: var(--flow-ui-font-size-large);
+    --flow-ui-panel-header-font-size: var(--flow-ui-font-size-medium);
     --flow-ui-panel-header-color: var(--flow-ui-color-text);
     --flow-ui-panel-header-accessory-color: var(--flow-ui-color-neutral-800);
 
@@ -548,11 +548,12 @@ export default css`
     --flow-ui-alert-border-color: var(--flow-ui-color-neutral-400);
     --flow-ui-alert-border-width: 1px;
 
-    --flow-ui-card-background-color: var(--flow-ui-color-neutral-400);
+    --flow-ui-card-background-color: var(--flow-ui-color-neutral-300);
+    --flow-ui-card-padding: var(--flow-ui-spacing-medium);
     --flow-ui-card-color: var(--flow-ui-color-text);
     --flow-ui-card-border-color: var(--flow-ui-color-neutral-400);
-    --flow-ui-card-border-width: 1px;
-    --flow-ui-card-border-radius: var(--flow-ui-border-radius-medium);
+    --flow-ui-card-border-width: 0;
+    --flow-ui-card-border-radius: 0;
 
     --flow-ui-details-background-color: var(--flow-ui-color-neutral-400);
     --flow-ui-details-color: var(--flow-ui-color-text);
@@ -604,7 +605,7 @@ export default css`
     --flow-ui-tab-active-icon-color: var(--flow-ui-color-primary-500);
 
     --flow-ui-gauge-color: var(--flow-ui-color-neutral-1000);
-    --flow-ui-gauge-background-color: var(--flow-ui-color-neutral-00);
+    --flow-ui-gauge-background-color: var(--flow-ui-color-neutral-300);
     --flow-ui-gauge-padding: var(--flow-ui-spacing-x-small);
     --flow-ui-gauge-header-height: 40px;
     --flow-ui-gauge-header-font-size: var(--flow-ui-font-size-medium);

package/themes/light.css

@@ -528,7 +528,7 @@
   --flow-ui-panel-header-padding: var(--flow-ui-spacing-medium)
     var(--flow-ui-spacing-large);
   --flow-ui-panel-header-background-color: var(--flow-ui-color-neutral-50);
-  --flow-ui-panel-header-font-size: var(--flow-ui-font-size-large);
+  --flow-ui-panel-header-font-size: var(--flow-ui-font-size-medium);
   --flow-ui-panel-header-font-weight: var(--flow-ui-font-weight-semibold);
   --flow-ui-panel-header-color: var(--flow-ui-color-text);
   --flow-ui-panel-header-accessory-color: var(--flow-ui-color-neutral-800);

package/themes/light.styles.js

@@ -549,7 +549,7 @@ export default css`
     --flow-ui-panel-header-padding: var(--flow-ui-spacing-medium)
       var(--flow-ui-spacing-large);
     --flow-ui-panel-header-background-color: var(--flow-ui-color-neutral-50);
-    --flow-ui-panel-header-font-size: var(--flow-ui-font-size-large);
+    --flow-ui-panel-header-font-size: var(--flow-ui-font-size-medium);
     --flow-ui-panel-header-font-weight: var(--flow-ui-font-weight-semibold);
     --flow-ui-panel-header-color: var(--flow-ui-color-text);
     --flow-ui-panel-header-accessory-color: var(--flow-ui-color-neutral-800);