@tylertech/forge-extended - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

dist/app-launcher/app-launcher-link/app-launcher-link.d.ts

+import { LitElement, TemplateResult } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-app-launcher-link': AppLauncherLinkComponent;
+    }
+}
+export declare const AppLauncherLinkComponentTagName: keyof HTMLElementTagNameMap;
+export interface AppLauncherLink {
+    label: string;
+    uri: string;
+}
+/**
+ * @tag forge-app-launcher-link
+ *
+ * @slot - The `<a>` element for the link.
+ */
+export declare class AppLauncherLinkComponent extends LitElement {
+    static styles: import('lit').CSSResult;
+    render(): TemplateResult;
+}

dist/app-launcher/app-launcher-link/app-launcher-link.mjs

+import { unsafeCSS, LitElement, html } from "lit";
+import { customElement } from "lit/decorators.js";
+import { defineListComponent, IconRegistry } from "@tylertech/forge";
+import styles from "./app-launcher-link.scss.mjs";
+import { tylIconOpenInNew } from "@tylertech/tyler-icons";
+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 = decorator(result) || result;
+  return result;
+};
+const AppLauncherLinkComponentTagName = "forge-app-launcher-link";
+let AppLauncherLinkComponent = class extends LitElement {
+  render() {
+    return html`
+      <forge-list-item>
+        <forge-icon slot="start" name="open_in_new"></forge-icon>
+        <slot></slot>
+      </forge-list-item>
+    `;
+  }
+};
+defineListComponent();
+IconRegistry.define([tylIconOpenInNew]);
+AppLauncherLinkComponent.styles = unsafeCSS(styles);
+AppLauncherLinkComponent = __decorateClass([
+  customElement(AppLauncherLinkComponentTagName)
+], AppLauncherLinkComponent);
+export {
+  AppLauncherLinkComponent,
+  AppLauncherLinkComponentTagName
+};

dist/app-launcher/...auncher-link/app-launcher-link.scss.mjs

+const styles = "/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/* prettier-ignore */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\nforge-list-item {\n  --forge-list-item-padding: var(--forge-spacing-xsmall, 8px);\n  --forge-list-item-shape: var(--forge-spacing-xsmall, 8px);\n}";
+export {
+  styles as default
+};

dist/app-launcher/app-launcher-link/index.d.ts

+export * from './app-launcher-link';
+export declare function defineAppLauncherLinkComponent(): void;

dist/app-launcher/app-launcher-link/index.mjs

+import { AppLauncherLinkComponentTagName, AppLauncherLinkComponent } from "./app-launcher-link.mjs";
+import { tryDefine } from "@tylertech/forge-core";
+function defineAppLauncherLinkComponent() {
+  tryDefine(AppLauncherLinkComponentTagName, AppLauncherLinkComponent);
+}
+export {
+  AppLauncherLinkComponent,
+  AppLauncherLinkComponentTagName,
+  defineAppLauncherLinkComponent
+};

dist/app-launcher/app-launcher.d.ts

+import { LitElement, PropertyValues, TemplateResult } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-app-launcher': AppLauncherComponent;
+    }
+}
+export interface AppLauncherOption {
+    label: string;
+    uri: string;
+    iconName: string;
+    target?: string;
+}
+export type AppView = 'related' | 'all' | 'loading';
+export declare const AppLauncherComponentTagName: keyof HTMLElementTagNameMap;
+/**
+ * @tag forge-app-launcher
+ *
+ * @slot related-apps-title - Title text for the related apps section
+ * @slot all-apps-title - Title text for the all apps view
+ * @slot view-all-apps-button-text - Text for the button that switches to all apps view
+ * @slot app-launcher-links-title - Title text for the custom links section
+ * @slot app-launcher-link - Individual custom link items using forge-app-launcher-link
+ *
+ * @state small - The component is displayed in mobile/small screen mode (dialog)
+ * @state large - The component is displayed in desktop/large screen mode (popover)
+ *
+ */
+export declare class AppLauncherComponent extends LitElement {
+    #private;
+    static styles: import('lit').CSSResult;
+    /** Indicates whether the dialog or popover is open. */
+    open: boolean;
+    /** An array of related apps for the related apps view. */
+    relatedApps: AppLauncherOption[];
+    /** An array of all available apps for the all apps view. */
+    allApps: AppLauncherOption[];
+    /** ARIA label for the app launcher trigger button */
+    launcherAriaLabel: string;
+    /** ARIA label for the back button */
+    backAriaLabel: string;
+    /** ARIA label for the close button */
+    closeAriaLabel: string;
+    /** The current view of the app launcher, either 'related', 'all', or 'loading'. */
+    private _appView;
+    private _filterText;
+    private _smallScreen;
+    private _searchField;
+    private _appLauncherPopover;
+    private _slottedAppLauncherLinkNodes;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    willUpdate(changedProperties: PropertyValues<this>): void;
+    render(): TemplateResult;
+}

dist/app-launcher/app-launcher.mjs

+import { unsafeCSS, LitElement, html, nothing } from "lit";
+import { property, state, queryAssignedNodes, customElement } from "lit/decorators.js";
+import { when } from "lit/directives/when.js";
+import { cache } from "lit/directives/cache.js";
+import { query } from "lit/decorators/query.js";
+import { defineAvatarComponent, defineButtonComponent, defineCardComponent, defineDialogComponent, defineIconButtonComponent, defineIconComponent, defineListComponent, definePopoverComponent, defineScaffoldComponent, defineTextFieldComponent, defineToolbarComponent, defineSkeletonComponent, IconRegistry, toggleState } from "@tylertech/forge";
+import { tylIconApps, tylIconOpenInNew, tylIconSearch, tylIconChevronRight, tylIconClose, tylIconArrowBack } from "@tylertech/tyler-icons";
+import styles from "./app-launcher.scss.mjs";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+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;
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+var _internals, _mediaQuery, _breakpoint, _numberOfSkeletons, _relatedAppsTitleSlot, _allAppsTitleSlot, _viewAllAppsButtonSlot, _appLauncherLinksTitleSlot, _appLauncherLinkSlot, _emptyState, _AppLauncherComponent_instances, appLauncherIcon_get, backButton_get, header_get, relatedApps_get, searchAllAppsField_get, allApps_get, loading_get, viewAllAppsButton_get, appLauncherLinks_get, searchContainer_get, appContent_get, viewAllAppsButtonContainer_get, mainCard_get, containerContent_get, filteredApps_get, isLoading_get, appListItem_fn, setupMediaQuery_fn, _handleMediaChange, onInputChange_fn, transitionToView_fn, resetState_fn, switchToAllAppsView_fn, handleSlotChange_fn;
+const AppLauncherComponentTagName = "forge-app-launcher";
+let AppLauncherComponent = class extends LitElement {
+  constructor() {
+    super();
+    __privateAdd(this, _AppLauncherComponent_instances);
+    __privateAdd(this, _internals);
+    this.open = false;
+    this.relatedApps = [];
+    this.allApps = [];
+    this.launcherAriaLabel = "Open app launcher";
+    this.backAriaLabel = "Go back";
+    this.closeAriaLabel = "Close app launcher";
+    this._appView = "related";
+    this._filterText = "";
+    this._smallScreen = false;
+    __privateAdd(this, _mediaQuery);
+    __privateAdd(this, _breakpoint, 768);
+    __privateAdd(this, _numberOfSkeletons, 5);
+    __privateAdd(this, _relatedAppsTitleSlot, html`<h2>
+    <slot name="related-apps-title" id="related-apps-title-slot">Related apps</slot>
+  </h2>`);
+    __privateAdd(this, _allAppsTitleSlot, html`<slot name="all-apps-title" id="all-apps-title-slot">All apps</slot>`);
+    __privateAdd(this, _viewAllAppsButtonSlot, html`<slot name="view-all-apps-button-text" id="view-all-apps-button-text-slot"
+    >View all apps</slot
+  >`);
+    __privateAdd(this, _appLauncherLinksTitleSlot, html`<slot
+    name="app-launcher-links-title"
+    id="app-launcher-links-title-slot"></slot>`);
+    __privateAdd(this, _appLauncherLinkSlot, html`<slot name="app-launcher-link" id="app-launcher-link-slot"></slot>`);
+    __privateAdd(this, _emptyState, html`
+    <div class="empty-state">
+      <forge-icon name="search"></forge-icon>
+      <p>No applications found</p>
+    </div>
+  `);
+    __privateAdd(this, _handleMediaChange, (e, isInitial) => {
+      this._smallScreen = e.matches;
+      toggleState(__privateGet(this, _internals), "small", this._smallScreen);
+      toggleState(__privateGet(this, _internals), "large", !this._smallScreen);
+      if (!isInitial && this.isConnected) {
+        requestAnimationFrame(() => {
+          if (this._appLauncherPopover && this.open) {
+            this._appLauncherPopover.open = true;
+          }
+        });
+      }
+    });
+    __privateSet(this, _internals, this.attachInternals());
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (__privateGet(this, _AppLauncherComponent_instances, isLoading_get)) {
+      this._appView = "loading";
+    } else if (!this.relatedApps?.length) {
+      this._appView = "all";
+    }
+    __privateMethod(this, _AppLauncherComponent_instances, setupMediaQuery_fn).call(this);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    __privateGet(this, _mediaQuery)?.removeEventListener("change", __privateGet(this, _handleMediaChange));
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("relatedApps") || changedProperties.has("allApps")) {
+      if (__privateGet(this, _AppLauncherComponent_instances, isLoading_get)) {
+        this._appView = "loading";
+      } else if (!this.relatedApps?.length) {
+        this._appView = "all";
+      } else {
+        this._appView = "related";
+      }
+    }
+  }
+  render() {
+    return when(
+      !this._smallScreen,
+      () => html`${cache(
+        html` ${__privateGet(this, _AppLauncherComponent_instances, appLauncherIcon_get)}
+            <forge-popover
+              arrow
+              placement="bottom-end"
+              position-strategy="fixed"
+              anchor="app-launcher-trigger"
+              @slotchange=${__privateMethod(this, _AppLauncherComponent_instances, handleSlotChange_fn)}
+              @forge-popover-toggle=${async (e) => {
+          const { newState } = e.detail;
+          if (newState === "closed") {
+            await this._appLauncherPopover.hideAsync();
+            __privateMethod(this, _AppLauncherComponent_instances, resetState_fn).call(this);
+          } else if (newState === "open") {
+            this.open = true;
+          }
+        }}
+              id="app-launcher-popover">
+              ${__privateGet(this, _AppLauncherComponent_instances, containerContent_get)}
+            </forge-popover>`
+      )}`,
+      () => html`
+        ${cache(
+        html`${__privateGet(this, _AppLauncherComponent_instances, appLauncherIcon_get)}
+            <forge-dialog
+              persistent
+              .open=${this.open}
+              @slotchange=${__privateMethod(this, _AppLauncherComponent_instances, handleSlotChange_fn)}
+              @forge-dialog-close=${() => {
+          __privateMethod(this, _AppLauncherComponent_instances, resetState_fn).call(this);
+        }}>
+              ${__privateGet(this, _AppLauncherComponent_instances, containerContent_get)}
+            </forge-dialog>`
+      )}
+      `
+    );
+  }
+};
+_internals = /* @__PURE__ */ new WeakMap();
+_mediaQuery = /* @__PURE__ */ new WeakMap();
+_breakpoint = /* @__PURE__ */ new WeakMap();
+_numberOfSkeletons = /* @__PURE__ */ new WeakMap();
+_relatedAppsTitleSlot = /* @__PURE__ */ new WeakMap();
+_allAppsTitleSlot = /* @__PURE__ */ new WeakMap();
+_viewAllAppsButtonSlot = /* @__PURE__ */ new WeakMap();
+_appLauncherLinksTitleSlot = /* @__PURE__ */ new WeakMap();
+_appLauncherLinkSlot = /* @__PURE__ */ new WeakMap();
+_emptyState = /* @__PURE__ */ new WeakMap();
+_AppLauncherComponent_instances = /* @__PURE__ */ new WeakSet();
+appLauncherIcon_get = function() {
+  return html`<forge-icon-button
+      theme="app-bar"
+      aria-label=${this.launcherAriaLabel}
+      id="app-launcher-trigger"
+      @click=${this._smallScreen ? () => this.open = !this.open : null}>
+      <forge-icon name="apps"></forge-icon>
+    </forge-icon-button>`;
+};
+backButton_get = function() {
+  const showBackButton = this._appView === "all" && this.relatedApps?.length;
+  return when(
+    showBackButton,
+    () => html`
+        <forge-icon-button
+          aria-label=${this.backAriaLabel}
+          slot="before-start"
+          @click=${async () => await __privateMethod(this, _AppLauncherComponent_instances, transitionToView_fn).call(this, "related")}>
+          <forge-icon name="arrow_back"></forge-icon>
+        </forge-icon-button>
+      `,
+    () => nothing
+  );
+};
+header_get = function() {
+  return html`
+      <forge-toolbar class="header" no-border>
+        <h1 slot="start">App Launcher</h1>
+        ${__privateGet(this, _AppLauncherComponent_instances, backButton_get)}
+        <forge-icon-button
+          aria-label=${this.closeAriaLabel}
+          class="close-button"
+          slot="end"
+          @click=${() => {
+    __privateMethod(this, _AppLauncherComponent_instances, resetState_fn).call(this);
+  }}>
+          <forge-icon name="close"></forge-icon>
+        </forge-icon-button>
+      </forge-toolbar>
+    `;
+};
+relatedApps_get = function() {
+  const showrelatedApps = this._appView === "related";
+  return when(
+    showrelatedApps,
+    () => html`
+        ${__privateGet(this, _relatedAppsTitleSlot)}
+        <forge-list>${this.relatedApps?.map((app) => html` ${__privateMethod(this, _AppLauncherComponent_instances, appListItem_fn).call(this, app)} `)}</forge-list>
+      `,
+    () => nothing
+  );
+};
+searchAllAppsField_get = function() {
+  const showSearchInput = this._appView === "all";
+  return when(
+    showSearchInput,
+    () => html`
+        <forge-text-field density=${this._smallScreen ? "large" : "small"}>
+          <forge-icon name="search" slot="leading"></forge-icon>
+          <input
+            type="text"
+            placeholder="Search by product or app"
+            @input=${__privateMethod(this, _AppLauncherComponent_instances, onInputChange_fn)}
+            id="search-field"
+            autocomplete="off" />
+        </forge-text-field>
+      `,
+    () => nothing
+  );
+};
+allApps_get = function() {
+  const showAllApps = this._appView === "all";
+  return when(
+    showAllApps,
+    () => html`
+        ${when(
+      !__privateGet(this, _AppLauncherComponent_instances, filteredApps_get)?.length && this._filterText,
+      () => html`${__privateGet(this, _emptyState)}`,
+      () => html` <h2>${__privateGet(this, _allAppsTitleSlot)}</h2>
+              <forge-list>${__privateGet(this, _AppLauncherComponent_instances, filteredApps_get)?.map((app) => html` ${__privateMethod(this, _AppLauncherComponent_instances, appListItem_fn).call(this, app)} `)}</forge-list>`
+    )}
+      `,
+    () => nothing
+  );
+};
+loading_get = function() {
+  return when(
+    this._appView === "loading",
+    () => html`
+        <div class="loading-state">
+          <forge-skeleton class="title-skeleton" aria-hidden="true"></forge-skeleton>
+          ${Array.from(
+      { length: __privateGet(this, _numberOfSkeletons) },
+      () => html`<forge-skeleton aria-hidden="true"></forge-skeleton>`
+    )}
+          <forge-skeleton class="button-skeleton" aria-hidden="true"></forge-skeleton>
+          <span class="loading-text">Loading apps</span>
+        </div>
+      `,
+    () => nothing
+  );
+};
+viewAllAppsButton_get = function() {
+  const showAllAppsButton = this._appView === "related";
+  return when(
+    showAllAppsButton,
+    () => html`
+        <forge-button variant="raised" ?disabled=${__privateGet(this, _AppLauncherComponent_instances, isLoading_get)} @click=${__privateMethod(this, _AppLauncherComponent_instances, switchToAllAppsView_fn)}>
+          <span>${__privateGet(this, _viewAllAppsButtonSlot)}</span>
+          <forge-icon name="chevron_right"></forge-icon>
+        </forge-button>
+      `,
+    () => nothing
+  );
+};
+appLauncherLinks_get = function() {
+  const showLinks = this._slottedAppLauncherLinkNodes.length > 0;
+  return when(
+    showLinks,
+    () => html`
+        <forge-card class="app-launcher-links-card">
+          <div class="app-launcher-links">
+            <h2>${__privateGet(this, _appLauncherLinksTitleSlot)}</h2>
+            <forge-list>${__privateGet(this, _appLauncherLinkSlot)}</forge-list>
+          </div>
+        </forge-card>
+      `,
+    () => __privateGet(this, _appLauncherLinkSlot)
+  );
+};
+searchContainer_get = function() {
+  return when(
+    this._appView === "all",
+    () => html`<div class="search-container">${__privateGet(this, _AppLauncherComponent_instances, searchAllAppsField_get)}</div>`,
+    () => nothing
+  );
+};
+appContent_get = function() {
+  return html`
+      <div class="app-list-container v-stack">
+        <div class="scroll-container v-stack">${__privateGet(this, _AppLauncherComponent_instances, relatedApps_get)} ${__privateGet(this, _AppLauncherComponent_instances, allApps_get)} ${__privateGet(this, _AppLauncherComponent_instances, loading_get)}</div>
+      </div>
+    `;
+};
+viewAllAppsButtonContainer_get = function() {
+  return when(
+    this._appView === "related",
+    () => html`<div class="view-all-apps-button">${__privateGet(this, _AppLauncherComponent_instances, viewAllAppsButton_get)}</div>`,
+    () => nothing
+  );
+};
+mainCard_get = function() {
+  return html`
+      <forge-card no-padding>
+        ${__privateGet(this, _AppLauncherComponent_instances, searchContainer_get)} ${__privateGet(this, _AppLauncherComponent_instances, appContent_get)} ${__privateGet(this, _AppLauncherComponent_instances, viewAllAppsButtonContainer_get)}
+      </forge-card>
+    `;
+};
+containerContent_get = function() {
+  const innerContainerClass = this._appView === "related" && this._smallScreen ? "inner-container related-view" : "inner-container";
+  return html`
+      <div class="outer-container">
+        ${__privateGet(this, _AppLauncherComponent_instances, header_get)}
+        <div class="${innerContainerClass}">${__privateGet(this, _AppLauncherComponent_instances, mainCard_get)} ${__privateGet(this, _AppLauncherComponent_instances, appLauncherLinks_get)}</div>
+      </div>
+    `;
+};
+filteredApps_get = function() {
+  return this.allApps?.filter((app) => app.label.toLowerCase().includes(this._filterText));
+};
+isLoading_get = function() {
+  return !this.relatedApps?.length && !this.allApps?.length;
+};
+appListItem_fn = function(app) {
+  return html`
+      <forge-list-item class="app-list-item">
+        <forge-avatar class="app-avatar" slot="start">
+          <forge-icon name=${app.iconName} external></forge-icon>
+        </forge-avatar>
+        <a href="${app.uri}" target="${app.target || "_blank"}">${app.label}</a>
+      </forge-list-item>
+    `;
+};
+setupMediaQuery_fn = function() {
+  __privateGet(this, _mediaQuery)?.removeEventListener("change", __privateGet(this, _handleMediaChange));
+  __privateSet(this, _mediaQuery, window.matchMedia(`(max-width: ${__privateGet(this, _breakpoint)}px)`));
+  __privateGet(this, _mediaQuery).addEventListener("change", __privateGet(this, _handleMediaChange));
+  __privateGet(this, _handleMediaChange).call(this, __privateGet(this, _mediaQuery), true);
+};
+_handleMediaChange = /* @__PURE__ */ new WeakMap();
+onInputChange_fn = function(e) {
+  const target = e.target;
+  this._filterText = target.value.toLowerCase();
+};
+transitionToView_fn = async function(newView) {
+  if (this._appView === newView) {
+    return;
+  }
+  this._appView = newView;
+  await this.updateComplete;
+  if (newView === "related") {
+    this._filterText = "";
+    const input = this._searchField;
+    if (input) {
+      input.value = "";
+    }
+  }
+  if (newView === "all") {
+    const input = this._searchField;
+    input?.focus();
+  }
+};
+resetState_fn = function() {
+  this._appView = __privateGet(this, _AppLauncherComponent_instances, isLoading_get) ? "loading" : this.relatedApps?.length ? "related" : "all";
+  this._filterText = "";
+  this.open = false;
+  if (this._appLauncherPopover) {
+    this._appLauncherPopover.open = false;
+  }
+};
+switchToAllAppsView_fn = async function() {
+  await __privateMethod(this, _AppLauncherComponent_instances, transitionToView_fn).call(this, "all");
+};
+handleSlotChange_fn = function(evt) {
+  const slotName = evt.target.name;
+  if ([
+    "app-launcher-link",
+    "app-launcher-links-title",
+    "related-apps-title",
+    "view-all-apps-button-text",
+    "all-apps-title"
+  ].includes(slotName)) {
+    this.requestUpdate();
+  }
+};
+defineAvatarComponent();
+defineButtonComponent();
+defineCardComponent();
+defineDialogComponent();
+defineIconButtonComponent();
+defineIconComponent();
+defineListComponent();
+definePopoverComponent();
+defineScaffoldComponent();
+defineTextFieldComponent();
+defineToolbarComponent();
+defineSkeletonComponent();
+IconRegistry.define([
+  tylIconApps,
+  tylIconOpenInNew,
+  tylIconSearch,
+  tylIconChevronRight,
+  tylIconClose,
+  tylIconArrowBack
+]);
+AppLauncherComponent.styles = unsafeCSS(styles);
+__decorateClass([
+  property({ type: Boolean })
+], AppLauncherComponent.prototype, "open", 2);
+__decorateClass([
+  property({ type: Array, attribute: false })
+], AppLauncherComponent.prototype, "relatedApps", 2);
+__decorateClass([
+  property({ type: Array, attribute: false })
+], AppLauncherComponent.prototype, "allApps", 2);
+__decorateClass([
+  property({ type: String, attribute: "launcher-aria-label" })
+], AppLauncherComponent.prototype, "launcherAriaLabel", 2);
+__decorateClass([
+  property({ type: String, attribute: "back-aria-label" })
+], AppLauncherComponent.prototype, "backAriaLabel", 2);
+__decorateClass([
+  property({ type: String, attribute: "close-aria-label" })
+], AppLauncherComponent.prototype, "closeAriaLabel", 2);
+__decorateClass([
+  state()
+], AppLauncherComponent.prototype, "_appView", 2);
+__decorateClass([
+  state()
+], AppLauncherComponent.prototype, "_filterText", 2);
+__decorateClass([
+  state()
+], AppLauncherComponent.prototype, "_smallScreen", 2);
+__decorateClass([
+  query("#search-field")
+], AppLauncherComponent.prototype, "_searchField", 2);
+__decorateClass([
+  query("#app-launcher-popover")
+], AppLauncherComponent.prototype, "_appLauncherPopover", 2);
+__decorateClass([
+  queryAssignedNodes({ slot: "app-launcher-link", flatten: true })
+], AppLauncherComponent.prototype, "_slottedAppLauncherLinkNodes", 2);
+AppLauncherComponent = __decorateClass([
+  customElement(AppLauncherComponentTagName)
+], AppLauncherComponent);
+export {
+  AppLauncherComponent,
+  AppLauncherComponentTagName
+};

dist/app-launcher/app-launcher.scss.mjs

+const styles = '/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/* prettier-ignore */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n@keyframes forge-dialog-zoom-in {\n  from {\n    opacity: var(--_dialog-zoom-opacity);\n    scale: var(--_dialog-zoom-scale);\n  }\n  to {\n    opacity: 1;\n    scale: 1;\n  }\n}\n@keyframes forge-dialog-zoom-out {\n  from {\n    opacity: 1;\n    scale: 1;\n  }\n  to {\n    opacity: var(--_dialog-zoom-opacity);\n    scale: var(--_dialog-zoom-scale);\n  }\n}\n@keyframes forge-dialog-fade-in {\n  from {\n    opacity: var(--_dialog-fade-opacity);\n  }\n  to {\n    opacity: 1;\n  }\n}\n@keyframes forge-dialog-fade-out {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: var(--_dialog-fade-opacity);\n  }\n}\n@keyframes forge-dialog-slide-in {\n  from {\n    opacity: var(--_dialog-slide-opacity);\n    translate: var(--_dialog-slide-translate);\n  }\n  to {\n    opacity: 1;\n    translate: 0 0;\n  }\n}\n@keyframes forge-dialog-slide-out {\n  from {\n    opacity: 1;\n    translate: 0 0;\n  }\n  to {\n    opacity: var(--_dialog-slide-opacity);\n    translate: var(--_dialog-slide-translate);\n  }\n}\n:host {\n  display: contents;\n  padding: 0;\n}\n:host * {\n  box-sizing: border-box;\n}\n:host *::-webkit-scrollbar {\n  height: var(--forge-scrollbar-height, 16px);\n  width: var(--forge-scrollbar-width, 16px);\n}\n:host *::-webkit-scrollbar-track {\n  background-color: var(--forge-scrollbar-track-container, var(--forge-theme-surface-container-low, #ebebeb));\n}\n:host *::-webkit-scrollbar-track:hover {\n  background-color: var(--forge-scrollbar-track-container-hover, var(--forge-theme-surface-container-low, #ebebeb));\n}\n:host *::-webkit-scrollbar-corner {\n  background-color: var(--forge-scrollbar-track-container, var(--forge-theme-surface-container-low, #ebebeb));\n}\n:host *::-webkit-scrollbar-thumb {\n  height: var(--forge-scrollbar-thumb-min-height, 32px);\n  width: var(--forge-scrollbar-thumb-min-width, 32px);\n  border-radius: var(--forge-scrollbar-border-radius, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));\n  border-width: var(--forge-scrollbar-border-width, 3px);\n  border-style: solid;\n  border-color: transparent;\n  background-color: var(--forge-scrollbar-thumb-container, var(--forge-theme-surface-container-medium, #c2c2c2));\n  background-clip: content-box;\n}\n:host *::-webkit-scrollbar-thumb:hover {\n  background-color: var(--forge-scrollbar-thumb-container-hover, var(--forge-theme-surface-container-high, #9e9e9e));\n}\n\n.outer-container {\n  --_forge-app-launcher-avatar-size: 48px;\n}\n\nh1 {\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n  font-family: var(--forge-typography-heading3-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n  font-size: var(--forge-typography-heading3-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading3-font-size-scale, 1.125)));\n  font-weight: var(--forge-typography-heading3-font-weight, 500);\n  line-height: var(--forge-typography-heading3-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading3-line-height-scale, 1.375)));\n  letter-spacing: var(--forge-typography-heading3-letter-spacing, 0.0083333333em);\n  text-transform: var(--forge-typography-heading3-text-transform, inherit);\n  text-decoration: var(--forge-typography-heading3-text-decoration, inherit);\n  margin: 0;\n}\n\nh2 {\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n  font-family: var(--forge-typography-heading1-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n  font-size: var(--forge-typography-heading1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading1-font-size-scale, 0.875)));\n  font-weight: var(--forge-typography-heading1-font-weight, 500);\n  line-height: var(--forge-typography-heading1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading1-line-height-scale, 1.125)));\n  letter-spacing: var(--forge-typography-heading1-letter-spacing, 0.0178571429em);\n  text-transform: var(--forge-typography-heading1-text-transform, inherit);\n  text-decoration: var(--forge-typography-heading1-text-decoration, inherit);\n  margin: 0;\n}\n\nforge-popover {\n  --forge-popover-background: var(--forge-theme-surface-dim, #fafafa);\n}\n\n.v-stack {\n  flex-direction: column;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n\n.header {\n  --forge-toolbar-background: none;\n}\n\n.outer-container {\n  max-height: var(--_forge-app-launcher-max-height);\n  width: var(--_forge-app-launcher-width);\n  display: grid;\n  grid-template-rows: auto 1fr;\n  overflow: hidden;\n  min-height: 0;\n}\n\n.search-container {\n  padding-inline: var(--forge-spacing-medium, 16px);\n  padding-block-start: var(--forge-spacing-medium, 16px);\n}\n\n.app-list-container {\n  height: 100%;\n  min-height: 0;\n  padding: var(--forge-spacing-medium, 16px);\n}\n\n.app-list-item {\n  --forge-list-item-padding: var(--forge-spacing-medium, 16px);\n  --forge-list-item-height: calc(var(--_forge-app-launcher-avatar-size) + var(--forge-spacing-medium, 16px));\n  --forge-list-item-gap: var(--forge-spacing-medium, 16px);\n  --forge-list-item-shape: var(--forge-spacing-xsmall, 8px);\n}\n\n.app-avatar {\n  --forge-avatar-size: var(--_forge-app-launcher-avatar-size);\n  --forge-avatar-background: var(--forge-theme-tertiary-container-low, #e8ebff);\n  --forge-avatar-color: var(--forge-theme-on-tertiary-container-low, #213189);\n}\n.app-avatar forge-icon {\n  --forge-icon-font-size: calc(var(--_forge-app-launcher-avatar-size) * 0.75);\n  --forge-icon-color: var(--forge-theme-on-tertiary-container-low, #213189);\n}\n\n.inner-container {\n  display: grid;\n  grid-template-rows: 1fr auto;\n  min-height: 0;\n  padding: var(--forge-spacing-medium, 16px);\n  padding-block-start: 0;\n}\n.inner-container.related-view {\n  grid-template-rows: auto 1fr;\n}\n.inner-container forge-card {\n  --forge-card-overflow: hidden;\n  min-height: 0;\n}\n.inner-container forge-card::part(root) {\n  display: flex;\n  flex-direction: column;\n}\n\n.scroll-container {\n  height: 100%;\n  overflow-y: auto;\n  min-height: 0;\n  scroll-padding-bottom: var(--forge-spacing-xxxlarge, 56px);\n}\n\n.view-all-apps-button {\n  display: flex;\n  margin-inline: var(--forge-spacing-medium, 16px);\n  margin-block-end: var(--forge-spacing-medium, 16px);\n}\n.view-all-apps-button forge-button {\n  --forge-button-height: var(--_forge-app-launcher-view-all-apps-button-height);\n  flex: 1;\n}\n\n.app-launcher-links-card {\n  margin-block-start: var(--forge-spacing-medium, 16px);\n  max-height: 204px;\n}\n\n.app-launcher-links {\n  display: flex;\n  flex-direction: column;\n  gap: var(--forge-spacing-xsmall, 8px);\n  overflow-y: auto;\n  height: 100%;\n  --forge-list-item-padding: var(--forge-spacing-large, 24px);\n  --forge-list-item-shape: var(--forge-spacing-xsmall, 8px);\n}\n\n.empty-state {\n  display: grid;\n  place-items: center;\n  align-content: center;\n  height: 100%;\n}\n.empty-state forge-icon {\n  font-size: 72px;\n  color: var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6));\n}\n.empty-state p {\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n  font-family: var(--forge-typography-subheading2-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n  font-size: var(--forge-typography-subheading2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-subheading2-font-size-scale, 1)));\n  font-weight: var(--forge-typography-subheading2-font-weight, 400);\n  line-height: var(--forge-typography-subheading2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-subheading2-line-height-scale, 1.25)));\n  letter-spacing: var(--forge-typography-subheading2-letter-spacing, normal);\n  text-transform: var(--forge-typography-subheading2-text-transform, inherit);\n  text-decoration: var(--forge-typography-subheading2-text-decoration, inherit);\n  text-align: center;\n}\n\n.loading-state {\n  display: grid;\n  place-items: center;\n  align-content: center;\n  height: 100%;\n  gap: var(--forge-spacing-small, 12px);\n}\n.loading-state forge-skeleton {\n  height: calc(var(--_forge-app-launcher-avatar-size) + var(--forge-spacing-xsmall, 8px));\n  width: 100%;\n  cursor: progress;\n  --forge-skeleton-margin: 0;\n}\n.loading-state .title-skeleton {\n  height: 16px;\n  width: 96px;\n  justify-self: start;\n}\n.loading-state .button-skeleton {\n  width: 100%;\n  height: 36px;\n}\n.loading-state .loading-text {\n  position: absolute;\n  top: auto;\n  overflow: hidden;\n  clip: rect(1px, 1px, 1px, 1px);\n  width: 1px;\n  height: 1px;\n  white-space: nowrap;\n}\n\n:host(:state(large)) .outer-container {\n  --_forge-app-launcher-avatar-size: 48px;\n  --_forge-app-launcher-width: 500px;\n  --_forge-app-launcher-max-height: 90dvh;\n  --_forge-app-launcher-view-all-apps-button-height: 36px;\n}\n\n:host(:state(small)) {\n  --forge-dialog-width: 100%;\n  --forge-dialog-height: 100%;\n}\n:host(:state(small)) .outer-container {\n  --_forge-app-launcher-avatar-size: 56px;\n  --_forge-app-launcher-width: 100%;\n  --_forge-app-launcher-max-height: 100dvh;\n  --_forge-app-launcher-view-all-apps-button-height: 56px;\n}';
+export {
+  styles as default
+};

dist/app-launcher/index.d.ts

+export * from './app-launcher';
+export declare function defineAppLauncherComponent(): void;

dist/app-launcher/index.mjs

+import { AppLauncherComponentTagName, AppLauncherComponent } from "./app-launcher.mjs";
+import { tryDefine } from "@tylertech/forge-core";
+function defineAppLauncherComponent() {
+  tryDefine(AppLauncherComponentTagName, AppLauncherComponent);
+}
+export {
+  AppLauncherComponent,
+  AppLauncherComponentTagName,
+  defineAppLauncherComponent
+};

dist/multi-select-header/index.d.ts

+export * from './multi-select-header';
+export declare function defineMultiSelectHeaderComponent(): void;

dist/multi-select-header/index.mjs

+import { MultiSelectHeaderComponentTagName, MultiSelectHeaderComponent } from "./multi-select-header.mjs";
+import { tryDefine } from "@tylertech/forge-core";
+function defineMultiSelectHeaderComponent() {
+  tryDefine(MultiSelectHeaderComponentTagName, MultiSelectHeaderComponent);
+}
+export {
+  MultiSelectHeaderComponent,
+  MultiSelectHeaderComponentTagName,
+  defineMultiSelectHeaderComponent
+};

dist/multi-select-header/multi-select-header.d.ts

+import { LitElement, TemplateResult } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-multi-select-header': MultiSelectHeaderComponent;
+    }
+    interface HTMLElementEventMap {
+        'forge-multi-select-header-select-all': CustomEvent;
+    }
+}
+export declare const MultiSelectHeaderComponentTagName: keyof HTMLElementTagNameMap;
+/**
+ * @tag forge-multi-select-header
+ *
+ * @slot select-all-button-text - Text content for the select-all button
+ * @slot actions - Action buttons (maps to the toolbar end slot)
+ *
+ * @event {CustomEvent} forge-multi-select-header-select-all - Fired when the select-all button is clicked
+ */
+export declare class MultiSelectHeaderComponent extends LitElement {
+    #private;
+    static styles: import('lit').CSSResult;
+    /** The text to display in the header (typically showing selection count) */
+    text: string;
+    /** Hides the bottom border */
+    noBorder: boolean;
+    private _slottedSelectAllNodes;
+    render(): TemplateResult;
+}

dist/multi-select-header/multi-select-header.mjs

+import { unsafeCSS, LitElement, html } from "lit";
+import { property, queryAssignedNodes, customElement } from "lit/decorators.js";
+import { when } from "lit/directives/when.js";
+import { defineToolbarComponent, defineButtonComponent } from "@tylertech/forge";
+import styles from "./multi-select-header.scss.mjs";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+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;
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+var _selectAllSlot, _MultiSelectHeaderComponent_instances, selectAllButton_get, handleSlotChange_fn, handleSelectAllClick_fn;
+const MultiSelectHeaderComponentTagName = "forge-multi-select-header";
+let MultiSelectHeaderComponent = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _MultiSelectHeaderComponent_instances);
+    this.text = "";
+    this.noBorder = true;
+    __privateAdd(this, _selectAllSlot, html`<slot name="select-all-button-text"></slot>`);
+  }
+  render() {
+    return html`
+      <forge-toolbar ?no-border=${this.noBorder} @slotchange=${__privateMethod(this, _MultiSelectHeaderComponent_instances, handleSlotChange_fn)}>
+        <div slot="start" class="start-container">
+          <span class="selected-text">${this.text}</span>
+          ${__privateGet(this, _MultiSelectHeaderComponent_instances, selectAllButton_get)}
+        </div>
+        <slot name="actions" slot="end"></slot>
+      </forge-toolbar>
+    `;
+  }
+};
+_selectAllSlot = /* @__PURE__ */ new WeakMap();
+_MultiSelectHeaderComponent_instances = /* @__PURE__ */ new WeakSet();
+selectAllButton_get = function() {
+  const showSelectAllButton = this._slottedSelectAllNodes.length > 0;
+  return when(
+    showSelectAllButton,
+    () => html` <forge-button id="select-all-button" @click=${__privateMethod(this, _MultiSelectHeaderComponent_instances, handleSelectAllClick_fn)}>
+          ${__privateGet(this, _selectAllSlot)}
+        </forge-button>`,
+    () => html`${__privateGet(this, _selectAllSlot)}`
+  );
+};
+handleSlotChange_fn = function(evt) {
+  const slotName = evt.target.name;
+  if (["select-all-button-text", "actions"].includes(slotName)) {
+    this.requestUpdate();
+  }
+};
+handleSelectAllClick_fn = function() {
+  const event = new CustomEvent("forge-multi-select-header-select-all", {
+    bubbles: true,
+    composed: true
+  });
+  this.dispatchEvent(event);
+};
+defineToolbarComponent();
+defineButtonComponent();
+MultiSelectHeaderComponent.styles = unsafeCSS(styles);
+__decorateClass([
+  property({ type: String })
+], MultiSelectHeaderComponent.prototype, "text", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "no-border" })
+], MultiSelectHeaderComponent.prototype, "noBorder", 2);
+__decorateClass([
+  queryAssignedNodes({ slot: "select-all-button-text", flatten: true })
+], MultiSelectHeaderComponent.prototype, "_slottedSelectAllNodes", 2);
+MultiSelectHeaderComponent = __decorateClass([
+  customElement(MultiSelectHeaderComponentTagName)
+], MultiSelectHeaderComponent);
+export {
+  MultiSelectHeaderComponent,
+  MultiSelectHeaderComponentTagName
+};

dist/multi-select-header/multi-select-header.scss.mjs

+const styles = '/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/* prettier-ignore */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n:host {\n  display: block;\n}\n:host forge-toolbar {\n  --forge-toolbar-background: var(--forge-theme-primary-container-low, #e8eaf6);\n}\n\n.start-container {\n  display: flex;\n  align-items: center;\n  gap: var(--forge-spacing-medium, 16px);\n}\n\n.selected-text {\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n  font-family: var(--forge-typography-body1-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n  font-size: var(--forge-typography-body1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 0.875)));\n  font-weight: var(--forge-typography-body1-font-weight, 400);\n  line-height: var(--forge-typography-body1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.125)));\n  letter-spacing: var(--forge-typography-body1-letter-spacing, 0.0357142857em);\n  text-transform: var(--forge-typography-body1-text-transform, inherit);\n  text-decoration: var(--forge-typography-body1-text-decoration, inherit);\n}';
+export {
+  styles as default
+};

custom-elements.json

@@ -7,2 +7,188 @@ {
       "kind": "javascript-module",
+      "path": "src/lib/app-launcher/app-launcher.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "AppLauncherComponentTagName",
+          "type": {
+            "text": "keyof HTMLElementTagNameMap"
+          },
+          "default": "'forge-app-launcher'"
+        },
+        {
+          "kind": "class",
+          "description": "",
+          "name": "AppLauncherComponent",
+          "slots": [
+            {
+              "description": "Title text for the related apps section",
+              "name": "related-apps-title"
+            },
+            {
+              "description": "Title text for the all apps view",
+              "name": "all-apps-title"
+            },
+            {
+              "description": "Text for the button that switches to all apps view",
+              "name": "view-all-apps-button-text"
+            },
+            {
+              "description": "Title text for the custom links section",
+              "name": "app-launcher-links-title"
+            },
+            {
+              "description": "Individual custom link items using forge-app-launcher-link",
+              "name": "app-launcher-link"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "description": "Indicates whether the dialog or popover is open.",
+              "attribute": "open"
+            },
+            {
+              "kind": "field",
+              "name": "relatedApps",
+              "type": {
+                "text": "AppLauncherOption[]"
+              },
+              "privacy": "public",
+              "default": "[]",
+              "description": "An array of related apps for the related apps view."
+            },
+            {
+              "kind": "field",
+              "name": "allApps",
+              "type": {
+                "text": "AppLauncherOption[]"
+              },
+              "privacy": "public",
+              "default": "[]",
+              "description": "An array of all available apps for the all apps view."
+            },
+            {
+              "kind": "field",
+              "name": "launcherAriaLabel",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "'Open app launcher'",
+              "description": "ARIA label for the app launcher trigger button",
+              "attribute": "launcher-aria-label"
+            },
+            {
+              "kind": "field",
+              "name": "backAriaLabel",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "'Go back'",
+              "description": "ARIA label for the back button",
+              "attribute": "back-aria-label"
+            },
+            {
+              "kind": "field",
+              "name": "closeAriaLabel",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "'Close app launcher'",
+              "description": "ARIA label for the close button",
+              "attribute": "close-aria-label"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates whether the dialog or popover is open.",
+              "fieldName": "open"
+            },
+            {
+              "name": "launcher-aria-label",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Open app launcher'",
+              "description": "ARIA label for the app launcher trigger button",
+              "fieldName": "launcherAriaLabel"
+            },
+            {
+              "name": "back-aria-label",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Go back'",
+              "description": "ARIA label for the back button",
+              "fieldName": "backAriaLabel"
+            },
+            {
+              "name": "close-aria-label",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Close app launcher'",
+              "description": "ARIA label for the close button",
+              "fieldName": "closeAriaLabel"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "forge-app-launcher",
+          "customElement": true,
+          "states": [
+            {
+              "name": "small",
+              "description": "The component is displayed in mobile/small screen mode (dialog)"
+            },
+            {
+              "name": "large",
+              "description": "The component is displayed in desktop/large screen mode (popover)"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "AppLauncherComponentTagName",
+          "declaration": {
+            "name": "AppLauncherComponentTagName",
+            "module": "src/lib/app-launcher/app-launcher.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "AppLauncherComponent",
+          "declaration": {
+            "name": "AppLauncherComponent",
+            "module": "src/lib/app-launcher/app-launcher.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "declaration": {
+            "name": "AppLauncherComponent",
+            "module": "src/lib/app-launcher/app-launcher.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
       "path": "src/lib/busy-indicator/busy-indicator.ts",
@@ -514,2 +700,115 @@ "declarations": [
       "kind": "javascript-module",
+      "path": "src/lib/multi-select-header/multi-select-header.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "MultiSelectHeaderComponentTagName",
+          "type": {
+            "text": "keyof HTMLElementTagNameMap"
+          },
+          "default": "'forge-multi-select-header'"
+        },
+        {
+          "kind": "class",
+          "description": "",
+          "name": "MultiSelectHeaderComponent",
+          "slots": [
+            {
+              "description": "Text content for the select-all button",
+              "name": "select-all-button-text"
+            },
+            {
+              "description": "Action buttons (maps to the toolbar end slot)",
+              "name": "actions"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "text",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "''",
+              "description": "The text to display in the header (typically showing selection count)",
+              "attribute": "text"
+            },
+            {
+              "kind": "field",
+              "name": "noBorder",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "true",
+              "description": "Hides the bottom border",
+              "attribute": "no-border"
+            }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fired when the select-all button is clicked",
+              "name": "forge-multi-select-header-select-all"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "text",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The text to display in the header (typically showing selection count)",
+              "fieldName": "text"
+            },
+            {
+              "name": "no-border",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "description": "Hides the bottom border",
+              "fieldName": "noBorder"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "forge-multi-select-header",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "MultiSelectHeaderComponentTagName",
+          "declaration": {
+            "name": "MultiSelectHeaderComponentTagName",
+            "module": "src/lib/multi-select-header/multi-select-header.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "MultiSelectHeaderComponent",
+          "declaration": {
+            "name": "MultiSelectHeaderComponent",
+            "module": "src/lib/multi-select-header/multi-select-header.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "declaration": {
+            "name": "MultiSelectHeaderComponent",
+            "module": "src/lib/multi-select-header/multi-select-header.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
       "path": "src/lib/quantity-field/quantity-field.ts",
@@ -976,2 +1275,13 @@ "declarations": [
               "kind": "field",
+              "name": "imageUrl",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "''",
+              "description": "The image URL for the user avatar",
+              "attribute": "image-url"
+            },
+            {
+              "kind": "field",
               "name": "buttonLabel",
@@ -998,2 +1308,13 @@ "type": {
             {
+              "kind": "field",
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "description": "Controls whether the user profile popover is open",
+              "attribute": "open"
+            },
+            {
               "kind": "method",
@@ -1047,2 +1368,11 @@ "name": "setTheme",
             {
+              "name": "image-url",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The image URL for the user avatar",
+              "fieldName": "imageUrl"
+            },
+            {
               "name": "button-label",
@@ -1064,2 +1394,11 @@ "type": {
               "fieldName": "themeToggle"
+            },
+            {
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the user profile popover is open",
+              "fieldName": "open"
             }
@@ -1103,2 +1442,59 @@ ],
       "kind": "javascript-module",
+      "path": "src/lib/app-launcher/app-launcher-link/app-launcher-link.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "AppLauncherLinkComponentTagName",
+          "type": {
+            "text": "keyof HTMLElementTagNameMap"
+          },
+          "default": "'forge-app-launcher-link'"
+        },
+        {
+          "kind": "class",
+          "description": "",
+          "name": "AppLauncherLinkComponent",
+          "slots": [
+            {
+              "description": "The `<a>` element for the link.",
+              "name": ""
+            }
+          ],
+          "members": [],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "forge-app-launcher-link",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "AppLauncherLinkComponentTagName",
+          "declaration": {
+            "name": "AppLauncherLinkComponentTagName",
+            "module": "src/lib/app-launcher/app-launcher-link/app-launcher-link.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "AppLauncherLinkComponent",
+          "declaration": {
+            "name": "AppLauncherLinkComponent",
+            "module": "src/lib/app-launcher/app-launcher-link/app-launcher-link.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "declaration": {
+            "name": "AppLauncherLinkComponent",
+            "module": "src/lib/app-launcher/app-launcher-link/app-launcher-link.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
       "path": "src/lib/user-profile/profile-link/profile-link.ts",
@@ -1166,2 +1562,14 @@ "declarations": [
   "forgeTypes": {
+    "AppLauncherOption": {
+      "path": "src/lib/app-launcher/app-launcher.ts",
+      "lineNumber": 42
+    },
+    "AppView": {
+      "path": "src/lib/app-launcher/app-launcher.ts",
+      "lineNumber": 49
+    },
+    "AppLauncherComponent": {
+      "path": "src/lib/app-launcher/app-launcher.ts",
+      "lineNumber": 66
+    },
     "BusyIndicatorMode": {
@@ -1199,2 +1607,6 @@ "path": "src/lib/busy-indicator/busy-indicator.ts",
     },
+    "MultiSelectHeaderComponent": {
+      "path": "src/lib/multi-select-header/multi-select-header.ts",
+      "lineNumber": 28
+    },
     "QuantityFieldComponent": {
@@ -1230,4 +1642,12 @@ "path": "src/lib/quantity-field/quantity-field.ts",
       "path": "src/lib/user-profile/user-profile.ts",
-      "lineNumber": 44
+      "lineNumber": 46
     },
+    "AppLauncherLink": {
+      "path": "src/lib/app-launcher/app-launcher-link/app-launcher-link.ts",
+      "lineNumber": 16
+    },
+    "AppLauncherLinkComponent": {
+      "path": "src/lib/app-launcher/app-launcher-link/app-launcher-link.ts",
+      "lineNumber": 26
+    },
     "ProfileLinkComponent": {
@@ -1234,0 +1654,0 @@ "path": "src/lib/user-profile/profile-link/profile-link.ts",

dist/index.d.ts

@@ -8,1 +8,4 @@ export * from './busy-indicator';
 export * from './user-profile/profile-link';
+export * from './multi-select-header';
+export * from './app-launcher';
+export * from './app-launcher/app-launcher-link';

dist/index.mjs

@@ -8,2 +8,5 @@ import { defineBusyIndicatorComponent } from "./busy-indicator/index.mjs";
 import { defineProfileLinkComponent } from "./user-profile/profile-link/index.mjs";
+import { defineMultiSelectHeaderComponent } from "./multi-select-header/index.mjs";
+import { defineAppLauncherComponent } from "./app-launcher/index.mjs";
+import { defineAppLauncherLinkComponent } from "./app-launcher/app-launcher-link/index.mjs";
 import { BusyIndicatorComponent, BusyIndicatorComponentTagName } from "./busy-indicator/busy-indicator.mjs";
@@ -16,3 +19,10 @@ import { QuantityFieldComponent, QuantityFieldComponentTagName } from "./quantity-field/quantity-field.mjs";
 import { ProfileLinkComponent, ProfileLinkComponentTagName } from "./user-profile/profile-link/profile-link.mjs";
+import { MultiSelectHeaderComponent, MultiSelectHeaderComponentTagName } from "./multi-select-header/multi-select-header.mjs";
+import { AppLauncherComponent, AppLauncherComponentTagName } from "./app-launcher/app-launcher.mjs";
+import { AppLauncherLinkComponent, AppLauncherLinkComponentTagName } from "./app-launcher/app-launcher-link/app-launcher-link.mjs";
 export {
+  AppLauncherComponent,
+  AppLauncherComponentTagName,
+  AppLauncherLinkComponent,
+  AppLauncherLinkComponentTagName,
   BusyIndicatorComponent,
@@ -22,2 +32,4 @@ BusyIndicatorComponentTagName,
   ConfirmationDialogComponentTagName,
+  MultiSelectHeaderComponent,
+  MultiSelectHeaderComponentTagName,
   ProfileLinkComponent,
@@ -33,4 +45,7 @@ ProfileLinkComponentTagName,
   UserProfileComponentTagName,
+  defineAppLauncherComponent,
+  defineAppLauncherLinkComponent,
   defineBusyIndicatorComponent,
   defineConfirmationDialogComponent,
+  defineMultiSelectHeaderComponent,
   defineProfileLinkComponent,
@@ -37,0 +52,0 @@ defineQuantityFieldComponent,

dist/types/svelte/forge-extended-svelte.d.ts

 import type {
+  AppLauncherComponent,
   BusyIndicatorComponent,
   ConfirmationDialogComponent,
+  MultiSelectHeaderComponent,
+  CustomEvent,
   QuantityFieldComponent,
@@ -9,2 +12,3 @@ ResponsiveToolbarComponent,
   Event,
+  AppLauncherLinkComponent,
   ProfileLinkComponent,
@@ -52,2 +56,17 @@ } from "../index.d.ts";
 
+type AppLauncherComponentProps = {
+  /** Indicates whether the dialog or popover is open. */
+  open?: AppLauncherComponent["open"];
+  /** ARIA label for the app launcher trigger button */
+  "launcher-aria-label"?: AppLauncherComponent["launcherAriaLabel"];
+  /** ARIA label for the back button */
+  "back-aria-label"?: AppLauncherComponent["backAriaLabel"];
+  /** ARIA label for the close button */
+  "close-aria-label"?: AppLauncherComponent["closeAriaLabel"];
+  /** An array of related apps for the related apps view. */
+  "bind:relatedApps"?: AppLauncherComponent["relatedApps"];
+  /** An array of all available apps for the all apps view. */
+  "bind:allApps"?: AppLauncherComponent["allApps"];
+};
+
 type BusyIndicatorComponentProps = {
@@ -104,2 +123,12 @@ /** Indicates whether the busy indicator is open. */
 
+type MultiSelectHeaderComponentProps = {
+  /** The text to display in the header (typically showing selection count) */
+  text?: MultiSelectHeaderComponent["text"];
+  /** Hides the bottom border */
+  "no-border"?: MultiSelectHeaderComponent["noBorder"];
+
+  /** Fired when the select-all button is clicked */
+  "on:forge-multi-select-header-select-all"?: (e: CustomEvent<CustomEvent>) => void;
+};
+
 type QuantityFieldComponentProps = {
@@ -138,2 +167,4 @@ /** Indicates whether the field is invalid. */
   email?: UserProfileComponent["email"];
+  /** The image URL for the user avatar */
+  "image-url"?: UserProfileComponent["imageUrl"];
   /** ARIA label for the user profile avatar button */
@@ -143,2 +174,4 @@ "button-label"?: UserProfileComponent["buttonLabel"];
   "theme-toggle"?: UserProfileComponent["themeToggle"];
+  /** Controls whether the user profile popover is open */
+  open?: UserProfileComponent["open"];
 
@@ -149,2 +182,4 @@ /** Fired when the sign out button is clicked. */
 
+type AppLauncherLinkComponentProps = {};
+
 type ProfileLinkComponentProps = {};
@@ -158,2 +193,16 @@
    *
+   * ### **Slots:**
+   *  - **related-apps-title** - Title text for the related apps section
+   * - **all-apps-title** - Title text for the all apps view
+   * - **view-all-apps-button-text** - Text for the button that switches to all apps view
+   * - **app-launcher-links-title** - Title text for the custom links section
+   * - **app-launcher-link** - Individual custom link items using forge-app-launcher-link
+   */
+  "forge-app-launcher": Partial<AppLauncherComponentProps & BaseProps & BaseEvents>;
+
+  /**
+   *
+   * ---
+   *
+   *
    * ### **Events:**
@@ -190,3 +239,17 @@ *  - **forge-busy-indicator-cancel** - Fired when the cancel button is clicked.
    *
+   * ### **Events:**
+   *  - **forge-multi-select-header-select-all** - Fired when the select-all button is clicked
+   *
    * ### **Slots:**
+   *  - **select-all-button-text** - Text content for the select-all button
+   * - **actions** - Action buttons (maps to the toolbar end slot)
+   */
+  "forge-multi-select-header": Partial<MultiSelectHeaderComponentProps & BaseProps & BaseEvents>;
+
+  /**
+   *
+   * ---
+   *
+   *
+   * ### **Slots:**
    *  - _default_ - Reserved for the `<input>` element.
@@ -258,2 +321,12 @@ * - **label** - The label for the field.
    * ### **Slots:**
+   *  - _default_ - The `<a>` element for the link.
+   */
+  "forge-app-launcher-link": Partial<AppLauncherLinkComponentProps & BaseProps & BaseEvents>;
+
+  /**
+   *
+   * ---
+   *
+   *
+   * ### **Slots:**
    *  - **icon** - The icon to display in the profile link.
@@ -260,0 +333,0 @@ * - _default_ - The `<a>` element for the link.

dist/types/vue/forge-extended-vue.d.ts

 import type { DefineComponent } from "vue";
 import type {
+  AppLauncherComponent,
   BusyIndicatorComponent,
   ConfirmationDialogComponent,
+  MultiSelectHeaderComponent,
+  CustomEvent,
   QuantityFieldComponent,
@@ -10,5 +13,21 @@ ResponsiveToolbarComponent,
   Event,
+  AppLauncherLinkComponent,
   ProfileLinkComponent,
 } from "../index.d.ts";
 
+type AppLauncherComponentProps = {
+  /** Indicates whether the dialog or popover is open. */
+  open?: AppLauncherComponent["open"];
+  /** ARIA label for the app launcher trigger button */
+  "launcher-aria-label"?: AppLauncherComponent["launcherAriaLabel"];
+  /** ARIA label for the back button */
+  "back-aria-label"?: AppLauncherComponent["backAriaLabel"];
+  /** ARIA label for the close button */
+  "close-aria-label"?: AppLauncherComponent["closeAriaLabel"];
+  /** An array of related apps for the related apps view. */
+  relatedApps?: AppLauncherComponent["relatedApps"];
+  /** An array of all available apps for the all apps view. */
+  allApps?: AppLauncherComponent["allApps"];
+};
+
 type BusyIndicatorComponentProps = {
@@ -65,2 +84,12 @@ /** Indicates whether the busy indicator is open. */
 
+type MultiSelectHeaderComponentProps = {
+  /** The text to display in the header (typically showing selection count) */
+  text?: MultiSelectHeaderComponent["text"];
+  /** Hides the bottom border */
+  "no-border"?: MultiSelectHeaderComponent["noBorder"];
+
+  /** Fired when the select-all button is clicked */
+  "onforge-multi-select-header-select-all"?: (e: CustomEvent<CustomEvent>) => void;
+};
+
 type QuantityFieldComponentProps = {
@@ -99,2 +128,4 @@ /** Indicates whether the field is invalid. */
   email?: UserProfileComponent["email"];
+  /** The image URL for the user avatar */
+  "image-url"?: UserProfileComponent["imageUrl"];
   /** ARIA label for the user profile avatar button */
@@ -104,2 +135,4 @@ "button-label"?: UserProfileComponent["buttonLabel"];
   "theme-toggle"?: UserProfileComponent["themeToggle"];
+  /** Controls whether the user profile popover is open */
+  open?: UserProfileComponent["open"];
 
@@ -110,2 +143,4 @@ /** Fired when the sign out button is clicked. */
 
+type AppLauncherLinkComponentProps = {};
+
 type ProfileLinkComponentProps = {};
@@ -119,2 +154,16 @@
    *
+   * ### **Slots:**
+   *  - **related-apps-title** - Title text for the related apps section
+   * - **all-apps-title** - Title text for the all apps view
+   * - **view-all-apps-button-text** - Text for the button that switches to all apps view
+   * - **app-launcher-links-title** - Title text for the custom links section
+   * - **app-launcher-link** - Individual custom link items using forge-app-launcher-link
+   */
+  "forge-app-launcher": DefineComponent<AppLauncherComponentProps>;
+
+  /**
+   *
+   * ---
+   *
+   *
    * ### **Events:**
@@ -151,3 +200,17 @@ *  - **forge-busy-indicator-cancel** - Fired when the cancel button is clicked.
    *
+   * ### **Events:**
+   *  - **forge-multi-select-header-select-all** - Fired when the select-all button is clicked
+   *
    * ### **Slots:**
+   *  - **select-all-button-text** - Text content for the select-all button
+   * - **actions** - Action buttons (maps to the toolbar end slot)
+   */
+  "forge-multi-select-header": DefineComponent<MultiSelectHeaderComponentProps>;
+
+  /**
+   *
+   * ---
+   *
+   *
+   * ### **Slots:**
    *  - _default_ - Reserved for the `<input>` element.
@@ -219,2 +282,12 @@ * - **label** - The label for the field.
    * ### **Slots:**
+   *  - _default_ - The `<a>` element for the link.
+   */
+  "forge-app-launcher-link": DefineComponent<AppLauncherLinkComponentProps>;
+
+  /**
+   *
+   * ---
+   *
+   *
+   * ### **Slots:**
    *  - **icon** - The icon to display in the profile link.
@@ -221,0 +294,0 @@ * - _default_ - The `<a>` element for the link.

dist/user-profile/user-profile.d.ts

@@ -1,2 +0,2 @@
-import { LitElement, TemplateResult } from 'lit';
+import { LitElement, TemplateResult, PropertyValues } from 'lit';
 import { ThemeToggleTheme } from '../theme-toggle/theme-toggle';
@@ -27,2 +27,4 @@ declare global {
     email: string;
+    /** The image URL for the user avatar */
+    imageUrl: string;
     /** ARIA label for the user profile avatar button */
@@ -32,3 +34,7 @@ buttonLabel: string;
     themeToggle: boolean;
+    /** Controls whether the user profile popover is open */
+    open: boolean;
     private _slottedLinkNodes;
+    constructor();
+    updated(changedProperties: PropertyValues<this>): void;
     render(): TemplateResult;
@@ -35,0 +41,0 @@ /** Sets the theme for the theme toggle. */

dist/user-profile/user-profile.mjs

@@ -5,3 +5,3 @@ import { unsafeCSS, LitElement, html, nothing } from "lit";
 import { tylIconLogout } from "@tylertech/tyler-icons";
-import { defineAvatarComponent, defineButtonComponent, defineDividerComponent, defineIconComponent, defineIconButtonComponent, definePopoverComponent, defineToolbarComponent, IconRegistry } from "@tylertech/forge";
+import { defineAvatarComponent, defineButtonComponent, defineDividerComponent, defineIconComponent, defineIconButtonComponent, definePopoverComponent, defineToolbarComponent, IconRegistry, toggleState } from "@tylertech/forge";
 import { createRef, ref } from "lit/directives/ref.js";
@@ -27,21 +27,32 @@ import "../theme-toggle/theme-toggle.mjs";
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _linkSlot, _signOutButtonSlot, _themeToggleRef, _UserProfileComponent_instances, links_get, themeToggle_get, signOutButton_get, handleSignOut_fn, handleSlotChange_fn;
+var _internals, _linkSlot, _signOutButtonSlot, _themeToggleRef, _UserProfileComponent_instances, links_get, themeToggle_get, signOutButton_get, handlePopoverToggle_fn, handleSignOut_fn, handleSlotChange_fn;
 const UserProfileComponentTagName = "forge-user-profile";
 let UserProfileComponent = class extends LitElement {
   constructor() {
-    super(...arguments);
+    super();
     __privateAdd(this, _UserProfileComponent_instances);
     this.fullName = "";
     this.email = "";
+    this.imageUrl = "";
     this.buttonLabel = "Open user profile";
     this.themeToggle = false;
+    this.open = false;
+    __privateAdd(this, _internals);
     __privateAdd(this, _linkSlot, html`<slot name="link" id="link-slot"></slot>`);
     __privateAdd(this, _signOutButtonSlot, html`<slot name="sign-out-button-text" id="sign-out-button-slot">Sign Out</slot>`);
     __privateAdd(this, _themeToggleRef, createRef());
+    __privateSet(this, _internals, this.attachInternals());
   }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("open")) {
+      toggleState(__privateGet(this, _internals), "open", this.open);
+    }
+  }
   render() {
     return html`
       <forge-icon-button theme="app-bar" aria-label="${this.buttonLabel}" id="popover-trigger">
-        <forge-avatar .text=${this.fullName} id="button-avatar"></forge-avatar>
+        <forge-avatar .text=${this.fullName} .imageUrl=${this.imageUrl} id="button-avatar"></forge-avatar>
       </forge-icon-button>
@@ -54,2 +65,4 @@ <forge-popover
         position-strategy="fixed"
+        .open=${this.open}
+        @forge-popover-toggle=${__privateMethod(this, _UserProfileComponent_instances, handlePopoverToggle_fn)}
         @slotchange=${__privateMethod(this, _UserProfileComponent_instances, handleSlotChange_fn)}>
@@ -60,2 +73,3 @@ <div class="user-info-container">
             class="popover-avatar"
+            .imageUrl=${this.imageUrl}
             id="popover-avatar"></forge-avatar>
@@ -81,2 +95,3 @@ <div class="user-info">
 };
+_internals = /* @__PURE__ */ new WeakMap();
 _linkSlot = /* @__PURE__ */ new WeakMap();
@@ -119,2 +134,5 @@ _signOutButtonSlot = /* @__PURE__ */ new WeakMap();
 };
+handlePopoverToggle_fn = function(evt) {
+  this.open = evt.detail.newState === "open";
+};
 handleSignOut_fn = function() {
@@ -149,2 +167,5 @@ const event = new Event("forge-user-profile-sign-out", {
 __decorateClass([
+  property({ attribute: "image-url" })
+], UserProfileComponent.prototype, "imageUrl", 2);
+__decorateClass([
   property({ attribute: "button-label" })
@@ -156,2 +177,5 @@ ], UserProfileComponent.prototype, "buttonLabel", 2);
 __decorateClass([
+  property({ type: Boolean })
+], UserProfileComponent.prototype, "open", 2);
+__decorateClass([
   queryAssignedNodes({ slot: "link", flatten: true })
@@ -158,0 +182,0 @@ ], UserProfileComponent.prototype, "_slottedLinkNodes", 2);

package.json

 {
   "name": "@tylertech/forge-extended",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "A library of prebuilt components based on Tyler Forge™ patterns and recipes.",
@@ -5,0 +5,0 @@ "license": "Apache-2.0",

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 3 instances

Improved metrics

Total package byte prevSize

260615

42.37%

Number of package files

60

33.33%

Lines of code

4713

43.21%

Worsened metrics

Number of low quality alerts

11

37.5%

Number of low supply chain risk alerts

10

42.86%

No dependency changes