@emuanalytics/flow-rdf-ui 4.0.18 → 4.1.0-preview.2

package/dist/components/dialog/dialog.component.mjs

@@ -1,4 +1,4 @@
-import { html } from 'lit';
+import { html, nothing } from 'lit';
 import { query, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -9,6 +9,7 @@ import FlowRdfElement from '../../internal/flow-ui-rdf-element.mjs';
 import Modal from '../../internal/modal.mjs';
 import { lockBodyScrolling, unlockBodyScrolling } from '../../internal/scroll.mjs';
 import { HasSlotController } from '../../internal/slot.mjs';
+import { capitalize } from '../../internal/string.mjs';
 import { watch } from '../../internal/watch.mjs';
 import { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry.mjs';
 import { LocalizeController } from '../../utilities/localize.mjs';
@@ -31,13 +32,15 @@ class FlowUiDialog extends FlowRdfElement {
     this.hasSlotController = new HasSlotController(this, "footer");
     this.localize = new LocalizeController(this);
     this.open = false;
-    this.label = "";
+    this.heading = "";
     this.noHeader = false;
+    this.tabbed = false;
   }
   connectedCallback() {
     super.connectedCallback();
     this.noHeader = boolean(this.noHeader, true);
     this.open = boolean(this.open, true);
+    this.tabbed = boolean(this.tabbed, true);
     this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
     this.modal = new Modal(this);
   }
@@ -48,6 +51,9 @@ class FlowUiDialog extends FlowRdfElement {
       this.modal.activate();
       lockBodyScrolling(this);
     }
+    if (this.tabbed) {
+      this.tabGroup.updateComplete.then(() => this.syncTabbedDialog());
+    }
   }
   disconnectedCallback() {
     super.disconnectedCallback();
@@ -152,6 +158,63 @@ class FlowUiDialog extends FlowRdfElement {
     this.open = false;
     return waitForEvent(this, "flow-ui-after-hide");
   }
+  handleTabShow() {
+    this.syncTabbedDialog();
+  }
+  syncTabbedDialog() {
+    this.heading = capitalize(this.tabGroup.activeTab?.panel) || "";
+  }
+  handleChildHide(ev) {
+    ev.stopPropagation();
+  }
+  renderHeader(slot) {
+    return html`
+      <header slot=${ifDefined(slot)} part="header" class="dialog__header">
+        <h2 part="heading" class="dialog__heading" id="heading">
+          <slot name="heading">${this.heading.length > 0 ? this.heading : String.fromCharCode(65279)}</slot>
+        </h2>
+        <div part="header-actions" class="dialog__header-actions">
+          <slot name="header-actions"></slot>
+          <flow-ui-icon-button
+            part="close-button"
+            exportparts="base:close-button__base"
+            class="dialog__close"
+            name="x-lg"
+            label=${this.localize.term("close")}
+            library="system"
+            @click="${() => this.requestClose("close-button")}"
+          ></flow-ui-icon-button>
+        </div>
+      </header>
+    `;
+  }
+  renderTabContainer() {
+    return html`
+      <flow-ui-tab-group class="dialog__tab-group" exportparts="nav:tab-group__nav,tabs:tab-group__tabs,active-tab-indicator:tab-group__active-tab-indicator,body:tab-group__tab-group-body" placement="start" @flow-ui-tab-show=${this.handleTabShow}>
+        ${!this.noHeader ? this.renderHeader("header") : nothing}</slot>
+        <slot name="nav" slot="nav"></slot>
+        <slot @flow-ui-hide=${this.handleChildHide} @flow-ui-after-hide=${this.handleChildHide}></slot>
+      </flow-ui-tab-group>
+    `;
+  }
+  renderDefaultContainer() {
+    return html`
+      ${!this.noHeader ? this.renderHeader() : nothing}
+
+      <slot
+        part="body"
+        class=${classMap({
+      dialog__body: true
+    })}
+        @flow-ui-hide=${this.handleChildHide}
+        @flow-ui-after-hide=${this.handleChildHide}
+      ></slot>
+
+      <footer part="footer" class="dialog__footer">
+        <slot name="footer"></slot>
+      </footer>
+    `;
+  }
   render() {
     return html`
       <div
@@ -170,35 +233,11 @@ class FlowUiDialog extends FlowRdfElement {
           role="dialog"
           aria-modal="true"
           aria-hidden=${this.open ? "false" : "true"}
-          aria-label=${ifDefined(this.noHeader ? this.label : void 0)}
+          aria-label=${ifDefined(this.noHeader ? this.heading : void 0)}
           aria-labelledby=${ifDefined(!this.noHeader ? "title" : void 0)}
           tabindex="0"
         >
-          ${!this.noHeader ? html`
-                <header part="header" class="dialog__header">
-                  <h2 part="title" class="dialog__title" id="title">
-                    <slot name="label">${this.label.length > 0 ? this.label : String.fromCharCode(65279)}</slot>
-                  </h2>
-                  <div part="header-actions" class="dialog__header-actions">
-                    <slot name="header-actions"></slot>
-                    <flow-ui-icon-button
-                      part="close-button"
-                      exportparts="base:close-button__base"
-                      class="dialog__close"
-                      name="x-lg"
-                      label=${this.localize.term("close")}
-                      library="system"
-                      @click="${() => this.requestClose("close-button")}"
-                    ></flow-ui-icon-button>
-                  </div>
-                </header>
-              ` : ""}
-
-          <slot part="body" class="dialog__body"></slot>
-
-          <footer part="footer" class="dialog__footer">
-            <slot name="footer"></slot>
-          </footer>
+          ${this.tabbed ? this.renderTabContainer() : this.renderDefaultContainer()}
         </div>
       </div>
     `;
@@ -214,15 +253,21 @@ __decorateClass([
 __decorateClass([
   query(".dialog__overlay")
 ], FlowUiDialog.prototype, "overlay", 2);
+__decorateClass([
+  query(".dialog__tab-group")
+], FlowUiDialog.prototype, "tabGroup", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], FlowUiDialog.prototype, "open", 2);
 __decorateClass([
   property({ reflect: true })
-], FlowUiDialog.prototype, "label", 2);
+], FlowUiDialog.prototype, "heading", 2);
 __decorateClass([
   property({ attribute: "no-header", type: Boolean, reflect: true })
 ], FlowUiDialog.prototype, "noHeader", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiDialog.prototype, "tabbed", 2);
 __decorateClass([
   watch("open", { waitUntilFirstUpdate: true })
 ], FlowUiDialog.prototype, "handleOpenChange", 1);

package/dist/components/dialog/dialog.styles.mjs

@@ -6,13 +6,18 @@ const styles = css`
 
   :host {
     --width: 31rem;
-    --header-spacing: var(--flow-ui-spacing-large);
-    --body-spacing: var(--flow-ui-spacing-large);
-    --footer-spacing: var(--flow-ui-spacing-large);
+    --header-spacing: var(--flow-ui-spacing-medium);
+    --body-spacing: var(--flow-ui-spacing-medium);
+    --footer-spacing: var(--flow-ui-spacing-medium);
 
     display: contents;
   }
 
+  :host([tabbed]) {
+    --header-spacing: var(--flow-ui-spacing-medium) var(--flow-ui-spacing-x-large);
+    --body-spacing: 0 var(--flow-ui-spacing-x-large);
+  }
+
   .dialog {
     display: flex;
     align-items: center;
@@ -32,7 +37,7 @@ const styles = css`
     width: var(--width);
     max-width: calc(100% - var(--flow-ui-spacing-2x-large));
     max-height: calc(100% - var(--flow-ui-spacing-2x-large));
-    background-color: var(--flow-ui-panel-background-color);
+    background-color: var(--flow-ui-dialog-background-color);
     border-radius: var(--flow-ui-border-radius-medium);
     box-shadow: var(--flow-ui-shadow-x-large);
   }
@@ -58,7 +63,7 @@ const styles = css`
     display: flex;
   }
 
-  .dialog__title {
+  .dialog__heading {
     flex: 1 1 auto;
     font: inherit;
     font-size: var(--flow-ui-font-size-large);
@@ -73,7 +78,7 @@ const styles = css`
     flex-wrap: wrap;
     justify-content: end;
     gap: var(--flow-ui-spacing-2x-small);
-    padding: 0 var(--header-spacing);
+    padding: var(--header-spacing);
   }
 
   .dialog__header-actions flow-ui-icon-button,
@@ -115,6 +120,16 @@ const styles = css`
     background-color: var(--flow-ui-overlay-background-color);
   }
 
+  /* Tabbed dialogs */
+  .dialog__tab-group {
+    flex: 1;
+    min-height: 0;
+  }
+
+  .dialog__tab-group ::slotted(flow-ui-tab-panel) {
+    --padding: var(--body-spacing);
+  }
+
   @media (forced-colors: active) {
     .dialog__panel {
       border: solid 1px var(--flow-ui-color-neutral-0);

package/dist/components/drawer/drawer.styles.mjs

@@ -39,7 +39,7 @@ const styles = css`
     z-index: 2;
     max-width: 100%;
     max-height: 100%;
-    background-color: var(--flow-ui-panel-background-color);
+    background-color: var(--flow-ui-background-color);
     box-shadow: var(--flow-ui-shadow-x-large);
     overflow: auto;
     pointer-events: all;

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

@@ -0,0 +1,132 @@
+import { html } from 'lit';
+import { query, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { boolean } from '../../internal/boolean.mjs';
+import FlowRdfElement from '../../internal/flow-ui-rdf-element.mjs';
+import { HasSlotController } from '../../internal/slot.mjs';
+import { watch } from '../../internal/watch.mjs';
+import styles from './form-group.styles.mjs';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+class FlowUiFormGroup extends FlowRdfElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "help-text", "label");
+    this.label = "";
+    this.size = "medium";
+    this.helpText = "";
+    this.noDividers = false;
+    this.noBorder = false;
+    this.variant = "default";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.noDividers = boolean(this.noDividers, true);
+    this.noBorder = boolean(this.noBorder, true);
+  }
+  handleStyleChange() {
+    this.syncControls();
+  }
+  syncControls() {
+    if (customElements.get("flow-ui-form-group")) {
+      const controls = this.getAllControls();
+      controls.forEach((control, i) => {
+        control.size = this.size;
+        control.divider = !this.noDividers && i < controls.length - 1;
+      });
+    } else {
+      customElements.whenDefined("flow-ui-form-group").then(() => this.syncControls());
+    }
+  }
+  getAllControls() {
+    return [...this.querySelectorAll(".flow-ui-form-control")];
+  }
+  render() {
+    const hasLabelSlot = this.hasSlotController.test("label");
+    const hasHelpTextSlot = this.hasSlotController.test("help-text");
+    const hasLabel = this.label ? true : !!hasLabelSlot;
+    const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
+    const defaultSlot = html`
+      <slot @slotchange=${this.syncControls}></slot>
+    `;
+    return html`
+      <div
+        part="form-control"
+        class=${classMap({
+      "form-control": true,
+      "form-control--has-label": hasLabel,
+      "form-control--has-help-text": hasHelpText,
+      "form-control--small": this.size === "small",
+      "form-control--medium": this.size === "medium",
+      "form-control--large": this.size === "large",
+      "form-control--default": this.variant === "default",
+      "form-control--warning": this.variant === "warning",
+      "form-control--danger": this.variant === "danger",
+      "form-group--has-dividers": !this.noDividers,
+      "form-group--has-border": !this.noBorder
+    })}
+        aria-labelledby="label"
+        aria-describedby="help-text"
+        aria-errormessage="error-message"
+      >
+        <slot
+          name="label"
+          part="label"
+          id="label"
+          class="form-control__label"
+          aria-hidden=${hasLabel ? "false" : "true"}
+        >
+          ${this.label}
+        </slot>
+
+        <slot
+          name="help-text"
+          part="help-text"
+          class="form-control__help-text"
+          aria-hidden=${hasHelpText ? "false" : "true"}
+        >
+          ${this.helpText}
+        </slot>
+
+        <div part="control" class="form-group__content">${defaultSlot}</div>
+      </div>
+    `;
+  }
+}
+FlowUiFormGroup.styles = styles;
+__decorateClass([
+  query("slot:not([name])")
+], FlowUiFormGroup.prototype, "defaultSlot", 2);
+__decorateClass([
+  property()
+], FlowUiFormGroup.prototype, "label", 2);
+__decorateClass([
+  property({ reflect: true })
+], FlowUiFormGroup.prototype, "size", 2);
+__decorateClass([
+  property({ attribute: "help-text" })
+], FlowUiFormGroup.prototype, "helpText", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "no-dividers", reflect: true })
+], FlowUiFormGroup.prototype, "noDividers", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "no-border", reflect: true })
+], FlowUiFormGroup.prototype, "noBorder", 2);
+__decorateClass([
+  property({ reflect: true })
+], FlowUiFormGroup.prototype, "variant", 2);
+__decorateClass([
+  watch(["size", "noDividers", "noBorder"], { waitUntilFirstUpdate: true })
+], FlowUiFormGroup.prototype, "handleStyleChange", 1);
+
+export { FlowUiFormGroup as default };

package/dist/components/form-group/form-group.mjs

@@ -0,0 +1,5 @@
+import FlowUiFormGroup from './form-group.component.mjs';
+
+
+
+export { FlowUiFormGroup as default };

package/dist/components/form-group/form-group.styles.mjs

@@ -0,0 +1,81 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles.mjs';
+import formControlStyles from '../../styles/form-control.styles.mjs';
+
+const styles = css`
+  ${componentStyles}
+  ${formControlStyles}
+
+  :host {
+    display: block;
+    margin-block: var(--flow-ui-spacing-medium);
+  }
+
+  :host([label]) {
+    margin-top: var(--flow-ui-spacing-x-large);
+  }
+
+  :host(:first-child) {
+    margin-top: var(--flow-ui-spacing-x-small);
+  }
+
+  .form-control {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-row-gap: var(--flow-ui-spacing-x-small);
+    align-items: center;
+    font-family: var(--flow-ui-control-font-family);
+    font-size: inherit;
+    font-weight: var(--flow-ui-control-font-weight);
+    line-height: var(--flow-ui-line-height-dense);
+  }
+
+  .form-control.form-control--has-label .form-control__label {
+    color: var(--flow-ui-color-neutral-900);
+    font-weight: var(--flow-ui-font-weight-semibold);
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+  }
+
+  .form-control.form-control--has-help-text .form-control__help-text {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+  }
+
+  .form-control.form-control--has-label .form-group__content,
+  .form-control.form-control--has-help-text .form-group__content {
+    margin-top: var(--flow-ui-spacing-x-small);
+  }
+
+  .form-group__content {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-row-gap: var(--control-spacing);
+    padding-block: calc(var(--control-spacing) / 2);
+  }
+
+  .form-control.form-group--has-dividers .form-group__content {
+    grid-row-gap: var(--flow-ui-spacing-x-small);
+  }
+
+  /* Borders */
+
+  .form-group--has-border .form-group__content {
+    margin-inline: calc(var(--control-spacing) * -1 - var(--control-border-width));
+    padding-inline: var(--control-spacing);
+    border: solid var(--control-border-width) var(--control-border-color);
+    border-radius: var(--control-border-radius);
+  }
+
+  /* Variants */
+
+  .form-control.form-control--warning {
+    --control-border-color: var(--flow-ui-color-warning-500);
+  }
+
+  .form-control.form-control--danger {
+    --control-border-color: var(--flow-ui-color-danger-500);
+  }
+`;
+
+export { styles as default };

package/dist/components/gauge/gauge.component.mjs

@@ -79,13 +79,10 @@ class FlowUiGauge extends FlowRdfElement {
   infoDialogTemplate() {
     return html`
       <flow-ui-dialog class="gauge__info-dialog">
-        <div slot="label" class="gauge__info-dialog-label">
-          ${this.headerIconTemplate()}
-          <slot name="title-text">${this.title}</slot>
-        </div>
+        <div slot="heading" class="gauge__info-dialog-heading">${this.headerIconTemplate()} ${this.label}</div>
         <slot name="info"></slot>
         <div slot="footer">
-          <flow-ui-button slot="footer" variant="primary" @click=${this.hideInfoDialog}>OK</flow-ui-button>
+          <flow-ui-button autofocus slot="footer" variant="primary" @click=${this.hideInfoDialog}>OK</flow-ui-button>
         </div>
       </flow-ui-dialog>
     `;
@@ -101,9 +98,9 @@ class FlowUiGauge extends FlowRdfElement {
       >
         <div part="header" class="gauge__header">
           ${this.headerIconTemplate()}
-          <span class="gauge__title-wrapper">
-            <span part="title" class="gauge__title">
-              <slot name="title">${this.title}</slot>
+          <span class="gauge__label-wrapper">
+            <span part="label" class="gauge__label">
+              <slot name="label">${this.label}</slot>
             </span>
           </span>
           ${hasInfo ? this.infoButtonTemplate() : nothing}
@@ -128,7 +125,7 @@ __decorateClass([
 ], FlowUiGauge.prototype, "_infoDialog", 2);
 __decorateClass([
   property()
-], FlowUiGauge.prototype, "title", 2);
+], FlowUiGauge.prototype, "label", 2);
 __decorateClass([
   property()
 ], FlowUiGauge.prototype, "units", 2);

package/dist/components/gauge/gauge.styles.mjs

@@ -7,16 +7,16 @@ const styles = css`
   :host {
     display: inline-block;
 
-    --color: var(--flow-ui-gauge-color, var(--flow-ui-color-neutral-1000));
+    --color: var(--flow-ui-gauge-color, var(--flow-ui-color-text));
     --background-color: var(--flow-ui-gauge-background-color, var(--flow-ui-color-neutral-100));
     --padding: var(--flow-ui-gauge-padding, var(--flow-ui-spacing-x-small));
-    --header-height: var(--flow-ui-gauge-font-header-height, var(--flow-ui-input-height-medium));
+    --header-height: var(--flow-ui-gauge-font-header-height, var(--flow-ui-control-height-medium));
     --header-font-size: var(--flow-ui-gauge-font-header-font-size, var(--flow-ui-font-size-medium));
-    --header-color: var(--flow-ui-gauge-header-color, var(--flow-ui-color-neutral-1000));
+    --header-color: var(--flow-ui-gauge-header-color, var(--flow-ui-color-text));
     --header-icon-color: var(--flow-ui-gauge-header-icon-color, var(--flow-ui-color-neutral-700));
     --value-font-size: var(--flow-ui-gauge-value-font-size, var(--flow-ui-font-size-2x-large));
     --units-font-size: var(--flow-ui-gauge-units-font-size, var(--flow-ui-font-size-small));
-    --units-color: var(--flow-ui-gauge-units-color, var(--flow-ui-color-neutral-1000));
+    --units-color: var(--flow-ui-gauge-units-color, var(--flow-ui-color-text));
   }
 
   .gauge {
@@ -56,13 +56,13 @@ const styles = css`
   }
 
   /* Wrapper needed to support text ellipsis in flex item */
-  .gauge__title-wrapper {
+  .gauge__label-wrapper {
     flex: 1;
     min-width: 0;
     display: flex;
   }
 
-  .gauge__title {
+  .gauge__label {
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
@@ -117,7 +117,7 @@ const styles = css`
   }
 
   /* Info Dialog */
-  .gauge__info-dialog-label {
+  .gauge__info-dialog-heading {
     display: flex;
     gap: var(--flow-ui-spacing-small);
     align-items: center;

package/dist/components/icon/library.system.mjs

@@ -142,7 +142,8 @@ const icons = {
   pause: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="flow-ui-icon"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112v288c0 26.5 21.5 48 48 48h32c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48H48zm192 0c-26.5 0-48 21.5-48 48v288c0 26.5 21.5 48 48 48h32c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48h-32z"/></svg>',
   plus: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="flow-ui-icon"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32v144H48c-17.7 0-32 14.3-32 32s14.3 32 32 32h144v144c0 17.7 14.3 32 32 32s32-14.3 32-32V288h144c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"/></svg>',
   "square-plus": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="flow-ui-icon"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M64 32C28.7 32 0 60.7 0 96v320c0 35.3 28.7 64 64 64h320c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zm136 312v-64h-64c-13.3 0-24-10.7-24-24s10.7-24 24-24h64v-64c0-13.3 10.7-24 24-24s24 10.7 24 24v64h64c13.3 0 24 10.7 24 24s-10.7 24-24 24h-64v64c0 13.3-10.7 24-24 24s-24-10.7-24-24z"/></svg>',
-  "square-minus": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="flow-ui-icon"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M64 32C28.7 32 0 60.7 0 96v320c0 35.3 28.7 64 64 64h320c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zm88 200h144c13.3 0 24 10.7 24 24s-10.7 24-24 24H152c-13.3 0-24-10.7-24-24s10.7-24 24-24z"/></svg>'
+  "square-minus": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="flow-ui-icon"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M64 32C28.7 32 0 60.7 0 96v320c0 35.3 28.7 64 64 64h320c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zm88 200h144c13.3 0 24 10.7 24 24s-10.7 24-24 24H152c-13.3 0-24-10.7-24-24s10.7-24 24-24z"/></svg>',
+  "ellipsis-vertical": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 512' class='flow-ui-icon'><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d='M64 360a56 56 0 100 112 56 56 0 100-112zm0-160a56 56 0 100 112 56 56 0 100-112zm56-104A56 56 0 108 96a56 56 0 10112 0z'/></svg>"
 };
 const systemLibrary = {
   name: "system",