Release Notes - September 2025

Enhancements

Flyouts "fly in" to ZUI

We're introducing a new component to the Toolkit to enable more involved interactions than a conventional dialog can afford. Shopping carts, chats, or long-form, contextually relevant information are all great use cases for a flyout.

The below is all you need to render an opened flyout on a page:

<zui-flyout mode="overlay" opened="">
  <h1 slot="header">Cart</h1>
  <div>
    <!-- Shopping cart body -->
  </div>
  <div slot="footer">
    <zui-button>Purchase</zui-button>
  </div>
</zui-flyout>

Modes

When exploring how other teams or companies use flyouts and flyout-like components, we landed on needing to support two different modes: overlay and inline.

Overlay flyouts

By default, flyouts will render in "overlay" mode. This should feel consistent with what a dialog experience might provide:

• The flyout is the main focal element
• User's focus is trapped to the flyout until it is closed
• Application content is rendered "behind" the flyout and not interactive
• Flyout is the only scrollable element, the rest of the page has scroll disabled until dismissed

Inline flyouts

For some use cases, flyouts may be a "companion" element on the screen. For example, maybe you're creating an application that a user is interacting with to add items to a cart, and the flyout is present to display the items in that cart. It's a better UX if the user can interact with both the application content and the flyout in this case.

When a flyout is rendered in "inline" mode, the experience differs:

• The content of the application is pushed to the side
• The flyout takes up a static width to the side of the content
• Both the flyout and the application content can be scrolled
• Both the flyout and the application content can be interacted with

Tables can now opt-in to vertically and horizontally flow

By default, the current <zui-table> implementation expects to be the main element on the page and will grow to take up as much space as it can and needs. For simple tables and UIs, this is adequate.

However, there are some layouts that are not well served, such as

• A table that is confined in screen real estate, such as in a dashboard or multi-columnar layout
• A table that displays a large dataset with multiple columns
• A table that renders above other content, but has many rows

For these scenarios, we're introducing a new "mode" of table: "fixed-sizing".

<style>
  zui-table[mode="fixed-sizing"] {
    --zui-table-max-width: 600px;
    --zui-table-max-height: 200px;
    --zui-table-columns-template: repeat(8, 200px);
  }
</style>

<zui-table mode="fixed-sizing">
  <!-- ZUI table contents here -->
</zui-table>

By opting-in to the new mode and setting those custom CSS properties, application developers can control when the table will begin to scroll along both axes.

There remain enhancements to come, such as sticky positioned columns, so stay tuned.

New icons added

Three new icons were added to the icon library:

• zui-collapse
• zui-expand
• zui-send

Bug fixes

Deprecations / removals

Dialog polyfill removal

We have removed dialog-polyfill from ZUI. As a result, we are dropping support for any browser that does not implement the native HTMLDialog element (<dialog>). Per caniuse, this is consistent with Zywave's recommended browsers support article.

This means we're officially dropping support for any version of Safari less than 15.4 (and certain versions of iOS, regardless of browser). All other browsers are evergreen and should see no impact.

ZUI and ZAPI utilization tracking

Years ago, while investing a large amount of effort to enhance our Toolkits, we added some tracking to monitor usage of individual elements across Zywave's suite and gauge how we were performing. This data served its purpose, and is no longer necessary. We ceased collection of this data earlier this month, but code that remained to enable this data collection will be removed with this release.

Other

Lit dependency updates

With this release, we've updated lit in both ZUI and Zywave API Toolkit to v3.3.1.

For a summary of the changes, see the GitHub comparison.