@emuanalytics/flow-rdf-ui 4.1.17 → 4.1.18

package/dist/components/input/input.component.mjs

@@ -428,6 +428,7 @@ class FlowUiInput extends FlowRdfFormControl {
                         library="system"
                         name="chevron-up"
                         tabindex="-1"
+                        ?disabled=${this.disabled}
                         @click=${() => {
       this.stepUp();
       this.handleChange();
@@ -438,6 +439,7 @@ class FlowUiInput extends FlowRdfFormControl {
                         library="system"
                         name="chevron-down"
                         tabindex="-1"
+                        ?disabled=${this.disabled}
                         @click=${() => {
       this.stepDown();
       this.handleChange();

package/dist/components/list-item/list-item.component.mjs

@@ -23,6 +23,7 @@ class FlowUiListItem extends FlowRdfElement {
     super();
     this.hasSlotController = new HasSlotController(this, "prefix", "suffix", "menu");
     this.hasFocus = false;
+    this.editMenuName = "Edit";
     this.checked = false;
     this.editable = false;
     this.reorder = false;
@@ -56,9 +57,13 @@ class FlowUiListItem extends FlowRdfElement {
     super.disconnectedCallback();
     this.removeEventListeners();
   }
+  /** @deprecated Use `edit` instead */
   rename() {
     this.input.focus();
   }
+  edit() {
+    this.input.focus();
+  }
   handleCheckedChange() {
     this.setAttribute("aria-checked", this.checked ? "true" : "false");
     this.setAttribute("tabindex", this.checked ? "0" : "-1");
@@ -85,8 +90,8 @@ class FlowUiListItem extends FlowRdfElement {
   }
   handleMenuSelect(ev) {
     const menuItem = ev.detail.item;
-    if (menuItem.value === "rename") {
-      this.updateComplete.then(() => this.rename());
+    if (menuItem.value === "edit") {
+      this.updateComplete.then(() => this.edit());
     } else if (menuItem.value === "remove") {
       const requestRemove = this.emit("flow-ui-remove", { cancelable: true });
       if (!requestRemove.defaultPrevented) {
@@ -145,7 +150,7 @@ class FlowUiListItem extends FlowRdfElement {
         ></flow-ui-icon-button>
         <flow-ui-menu @flow-ui-select=${this.handleMenuSelect}>
           ${this.editable ? html`
-                <flow-ui-menu-item value="rename">Rename</flow-ui-menu-item>
+                <flow-ui-menu-item value="edit">${this.editMenuName}</flow-ui-menu-item>
               ` : nothing}
           ${this.removable ? html`
                 <flow-ui-menu-item value="remove">Delete</flow-ui-menu-item>
@@ -192,7 +197,7 @@ class FlowUiListItem extends FlowRdfElement {
 
         <flow-ui-input
           exportparts="input"
-          inline
+          filled
           class="list-item__input"
           .value=${this.label}
           .readonly=${!this.editable}
@@ -200,7 +205,7 @@ class FlowUiListItem extends FlowRdfElement {
           @flow-ui-change=${this.handleInputEvents}
           @flow-ui-input=${this.handleInputEvents}
         ></flow-ui-input>
-        <div class="list-item__spacer"></div>
+        <!--<div class="list-item__spacer"></div>-->
         <slot name="suffix" part="suffix" class="list-item__suffix"></slot>
 
         ${hasMenu ? this.renderMenu() : nothing}
@@ -218,6 +223,9 @@ __decorateClass([
 __decorateClass([
   property({ reflect: true })
 ], FlowUiListItem.prototype, "label", 2);
+__decorateClass([
+  property({ attribute: "edit-menu-name" })
+], FlowUiListItem.prototype, "editMenuName", 2);
 __decorateClass([
   property({ reflect: true })
 ], FlowUiListItem.prototype, "value", 2);

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

@@ -69,8 +69,11 @@ const styles = css`
     color: var(--accessory-color);
   }
 
-  .list-item__spacer {
-    flex: 1;
+  .list-item .list-item__input::part(form-control) {
+    --control-background-color: var(--flow-ui-control-inline-background-color);
+    --control-background-color-hover: var(--flow-ui-control-inline-background-color-hover);
+    --control-background-color-focus: var(--flow-ui-control-inline-background-color-focus);
+    --control-background-color-disabled: var(--flow-ui-control-inline-background-color-disabled);
   }
 
   .list-item:not(.list-item--editable) .list-item__input::part(form-control) {
@@ -92,6 +95,7 @@ const styles = css`
   }
 
   .list-item__input {
+    flex: 1;
     margin-left: calc(var(--padding) * -0.5);
   }
 `;

package/dist/components/range/range.component.mjs

@@ -42,7 +42,7 @@ class FlowUiRange extends FlowRdfFormControl {
     this.min = 0;
     this.max = 100;
     this.step = 1;
-    this.format = "";
+    this.format = "0";
     this.form = "";
     this.defaultValue = 0;
     this.inline = false;

package/dist/custom-elements.json

@@ -1417,6 +1417,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/breadcrumb/breadcrumb.component.js",
@@ -2148,191 +2333,6 @@
         }
       ]
     },
-    {
-      "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/badge/badge.component.js",
@@ -12850,6 +12850,15 @@
               "attribute": "label",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "editMenuName",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Edit'",
+              "attribute": "edit-menu-name"
+            },
             {
               "kind": "field",
               "name": "value",
@@ -12916,7 +12925,12 @@
             },
             {
               "kind": "method",
-              "name": "rename"
+              "name": "rename",
+              "deprecated": "Use `edit` instead"
+            },
+            {
+              "kind": "method",
+              "name": "edit"
             },
             {
               "kind": "method",
@@ -13075,6 +13089,14 @@
               "description": "The label text for the list item.",
               "fieldName": "label"
             },
+            {
+              "name": "edit-menu-name",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Edit'",
+              "fieldName": "editMenuName"
+            },
             {
               "name": "value",
               "type": {
@@ -17581,7 +17603,7 @@
               "type": {
                 "text": "string"
               },
-              "default": "''",
+              "default": "'0'",
               "description": "Number format to use for numeric display. (D3 format string)",
               "attribute": "format"
             },
@@ -17908,7 +17930,7 @@
               "type": {
                 "text": "string"
               },
-              "default": "''",
+              "default": "'0'",
               "description": "Number format to use for numeric display. (D3 format string)",
               "fieldName": "format"
             },
@@ -25873,6 +25895,6 @@
   ],
   "package": {
     "name": "@emuanalytics/flow-rdf-ui",
-    "version": "4.1.17"
+    "version": "4.1.18"
   }
 }

package/dist/index.d.mts

@@ -4660,6 +4660,7 @@ declare class FlowUiListItem extends FlowRdfElement {
     input: FlowUiInput;
     /** The label text for the list item. */
     label: string;
+    editMenuName: string;
     /** The tracking value (id) for the list item. */
     value: string;
     checked: boolean;
@@ -4676,7 +4677,9 @@ declare class FlowUiListItem extends FlowRdfElement {
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
+    /** @deprecated Use `edit` instead */
     rename(): void;
+    edit(): void;
     /** @internal */
     handleCheckedChange(): void;
     private addEventListeners;

package/dist/index.d.ts

@@ -4660,6 +4660,7 @@ declare class FlowUiListItem extends FlowRdfElement {
     input: FlowUiInput;
     /** The label text for the list item. */
     label: string;
+    editMenuName: string;
     /** The tracking value (id) for the list item. */
     value: string;
     checked: boolean;
@@ -4676,7 +4677,9 @@ declare class FlowUiListItem extends FlowRdfElement {
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
+    /** @deprecated Use `edit` instead */
     rename(): void;
+    edit(): void;
     /** @internal */
     handleCheckedChange(): void;
     private addEventListeners;

package/dist/package.json.mjs

@@ -1,3 +1,3 @@
-const version = "4.1.17";
+const version = "4.1.18";
 
 export { version };

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

@@ -201,6 +201,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-breadcrumb",
       "description": "Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - One or more breadcrumb items to display.\n- **separator** - The separator to use between breadcrumb items. Works best with `<flow-ui-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
@@ -301,42 +337,6 @@
       ],
       "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-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.",
@@ -1770,6 +1770,7 @@
           "description": "The label text for the list item.",
           "values": []
         },
+        { "name": "edit-menu-name", "values": [] },
         {
           "name": "value",
           "description": "The tracking value (id) for the list item.",

package/package.json

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