@ni/ok-components 0.2.0 → 0.2.1

package/dist/all-components-bundle.js

@@ -14919,9 +14919,9 @@
   const prefix = 'ni-nimble';
   const styleNameFromTokenName = (tokenName) => `${prefix}-${tokenName}`;
 
-  const template$T = html `<slot></slot>`;
+  const template$W = html `<slot></slot>`;
 
-  const styles$16 = css `
+  const styles$19 = css `
     ${display$2('contents')}
 `;
 
@@ -15036,8 +15036,8 @@
   ], ThemeProvider.prototype, "theme", void 0);
   const nimbleDesignSystemProvider = ThemeProvider.compose({
       baseName: 'theme-provider',
-      styles: styles$16,
-      template: template$T
+      styles: styles$19,
+      template: template$W
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -16610,7 +16610,7 @@
   }
   // #endregion
 
-  const styles$15 = css `
+  const styles$18 = css `
     @layer base, hover, focusVisible, active, disabled;
 
     @layer base {
@@ -16688,7 +16688,7 @@
     }
 `;
 
-  const template$S = (_context, definition) => html `${
+  const template$V = (_context, definition) => html `${
 /* top-container div is necessary because setting contenteditable directly on the native anchor instead
    leaves it focusable, unlike the behavior you get when the anchor is _within_ a contenteditable element.
 */ ''}<div
@@ -16791,8 +16791,8 @@
   const nimbleAnchor = Anchor.compose({
       baseName: 'anchor',
       baseClass: Anchor$1,
-      template: template$S,
-      styles: styles$15,
+      template: template$V,
+      styles: styles$18,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -16901,7 +16901,7 @@
     padding: 0;
 `;
 
-  const styles$14 = css `
+  const styles$17 = css `
     @layer base, checked, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -17185,8 +17185,8 @@
             }
         `));
 
-  const styles$13 = css `
-    ${styles$14}
+  const styles$16 = css `
+    ${styles$17}
     ${buttonAppearanceVariantStyles}
 
     .control {
@@ -17206,7 +17206,7 @@
     }
 `;
 
-  const template$R = (context, definition) => html `
+  const template$U = (context, definition) => html `
     <a
         class="control"
         part="control"
@@ -17288,8 +17288,8 @@
   ], AnchorButton.prototype, "disabled", void 0);
   const nimbleAnchorButton = AnchorButton.compose({
       baseName: 'anchor-button',
-      template: template$R,
-      styles: styles$13,
+      template: template$U,
+      styles: styles$16,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17297,7 +17297,7 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorButton());
   const anchorButtonTag = 'nimble-anchor-button';
 
-  const styles$12 = css `
+  const styles$15 = css `
     ${display$2('grid')}
 
     :host {
@@ -17380,7 +17380,7 @@
     }
 `;
 
-  const template$Q = (context, definition) => html `
+  const template$T = (context, definition) => html `
     <template
         role="menuitem"
         class="${x => (typeof x.startColumnCount === 'number'
@@ -17481,8 +17481,8 @@
   // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
   const nimbleAnchorMenuItem = AnchorMenuItem.compose({
       baseName: 'anchor-menu-item',
-      template: template$Q,
-      styles: styles$12,
+      template: template$T,
+      styles: styles$15,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17492,7 +17492,7 @@
       .register(nimbleAnchorMenuItem());
   const anchorMenuItemTag = 'nimble-anchor-menu-item';
 
-  const styles$11 = css `
+  const styles$14 = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -17609,7 +17609,7 @@
     }
 `;
 
-  const template$P = (context, definition) => html `
+  const template$S = (context, definition) => html `
     <template slot="anchortab" role="tab" aria-disabled="${x => x.disabled}">
         <a
             download="${x => x.download}"
@@ -17661,15 +17661,15 @@
   // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
   const nimbleAnchorTab = AnchorTab.compose({
       baseName: 'anchor-tab',
-      template: template$P,
-      styles: styles$11,
+      template: template$S,
+      styles: styles$14,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTab());
 
-  const styles$10 = css `
+  const styles$13 = css `
     ${display$2('flex')}
 
     :host {
@@ -17709,12 +17709,12 @@
     }
 `;
 
-  const styles$$ = css `
-    ${styles$14}
+  const styles$12 = css `
+    ${styles$17}
     ${buttonAppearanceVariantStyles}
 `;
 
-  const template$O = (context, definition) => html `
+  const template$R = (context, definition) => html `
     <button
         class="control"
         part="control"
@@ -17805,8 +17805,8 @@
   const nimbleButton = Button$1.compose({
       baseName: 'button',
       baseClass: Button$2,
-      template: template$O,
-      styles: styles$$,
+      template: template$R,
+      styles: styles$12,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -18753,7 +18753,7 @@
   };
 
   // Avoiding any whitespace in the template because this is an inline element
-  const template$N = html `<div
+  const template$Q = html `<div
     class="icon"
     aria-hidden="true"
     :innerHTML=${x => x.icon.data}
@@ -18768,7 +18768,7 @@
     -webkit-user-select: none;
 `;
 
-  const styles$_ = css `
+  const styles$11 = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -18831,8 +18831,8 @@
   const registerIconSvg = (baseName, iconClass) => {
       const composedIcon = iconClass.compose({
           baseName,
-          template: template$N,
-          styles: styles$_
+          template: template$Q,
+          styles: styles$11
       });
       DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
   };
@@ -18927,7 +18927,7 @@
       cssCustomPropertyName: null
   }).withDefault(coreLabelDefaults.itemRemoveLabel);
 
-  const template$M = (context, definition) => html `
+  const template$P = (context, definition) => html `
     <div
         class="tab-bar"
     >
@@ -19226,15 +19226,15 @@
   applyMixins(AnchorTabs, StartEnd);
   const nimbleAnchorTabs = AnchorTabs.compose({
       baseName: 'anchor-tabs',
-      template: template$M,
-      styles: styles$10,
+      template: template$P,
+      styles: styles$13,
       shadowOptions: {
           delegatesFocus: false
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTabs());
 
-  const styles$Z = css `
+  const styles$10 = css `
     ${display$2('block')}
 
     :host {
@@ -19339,7 +19339,7 @@
     }
 `;
 
-  const template$L = (context, definition) => html `
+  const template$O = (context, definition) => html `
     <template
         role="treeitem"
         slot="${x => (x.isNestedItem() ? 'item' : null)}"
@@ -19476,8 +19476,8 @@
   // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
   const nimbleAnchorTreeItem = AnchorTreeItem.compose({
       baseName: 'anchor-tree-item',
-      template: template$L,
-      styles: styles$Z,
+      template: template$O,
+      styles: styles$10,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -19493,7 +19493,7 @@
       zIndex1000: '1000'
   };
 
-  const styles$Y = css `
+  const styles$$ = css `
     ${display$2('block')}
 
     :host {
@@ -19524,7 +19524,7 @@
       baseName: 'anchored-region',
       baseClass: AnchoredRegion$1,
       template: anchoredRegionTemplate,
-      styles: styles$Y
+      styles: styles$$
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -19605,7 +19605,7 @@
   const themeBehavior = (theme, styles) => new ThemeStyleSheetBehavior(theme, styles);
   /* eslint-enable max-classes-per-file */
 
-  const styles$X = css `
+  const styles$_ = css `
     ${display$2('flex')}
 
     :host {
@@ -19783,7 +19783,7 @@
       information: 'information'
   };
 
-  const template$K = html `
+  const template$N = html `
     <${themeProviderTag} theme="${Theme.color}">
         <div class="container"
             role="status"
@@ -19901,8 +19901,8 @@
   applyMixins(Banner, ARIAGlobalStatesAndProperties);
   const nimbleBanner = Banner.compose({
       baseName: 'banner',
-      template: template$K,
-      styles: styles$X
+      template: template$N,
+      styles: styles$_
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBanner());
 
@@ -19943,7 +19943,7 @@
     </template>
 `;
 
-  const styles$W = css `
+  const styles$Z = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -20047,11 +20047,11 @@
       baseName: 'breadcrumb',
       baseClass: Breadcrumb$1,
       template: breadcrumbTemplate,
-      styles: styles$W
+      styles: styles$Z
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBreadcrumb());
 
-  const styles$V = css `
+  const styles$Y = css `
     @layer base, hover, focusVisible, active, disabled;
 
     @layer base {
@@ -20148,14 +20148,14 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'breadcrumb-item',
       baseClass: BreadcrumbItem$1,
       template: breadcrumbItemTemplate,
-      styles: styles$V,
+      styles: styles$Y,
       separator: forwardSlash16X16.data
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleBreadcrumbItem());
 
-  const styles$U = css `
+  const styles$X = css `
     ${display$2('flex')}
 
     :host {
@@ -20179,7 +20179,7 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const template$J = html `
+  const template$M = html `
     <section aria-labelledby="title-slot">
         <span id="title-slot"><slot name="title"></slot></span>
         <slot></slot>
@@ -20194,12 +20194,12 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleCard = Card.compose({
       baseName: 'card',
       baseClass: Card$1,
-      template: template$J,
-      styles: styles$U
+      template: template$M,
+      styles: styles$X
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCard());
 
-  const styles$T = css `
+  const styles$W = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -20357,14 +20357,14 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleCardButton = CardButton.compose({
       baseName: 'card-button',
       template: buttonTemplate,
-      styles: styles$T,
+      styles: styles$W,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCardButton());
 
-  const styles$S = css `
+  const styles$V = css `
     .error-icon {
         display: none;
     }
@@ -20398,9 +20398,9 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const styles$R = css `
+  const styles$U = css `
     ${display$2('inline-grid')}
-    ${styles$S}
+    ${styles$V}
 
     :host {
         font: ${bodyFont};
@@ -20594,7 +20594,7 @@ so this becomes the fallback color for the slot */ ''}
     </div>
 `;
 
-  const template$I = (_context, definition) => html `
+  const template$L = (_context, definition) => html `
     <template
         role="checkbox"
         aria-checked="${x => x.checked}"
@@ -20679,16 +20679,16 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleCheckbox = Checkbox.compose({
       baseName: 'checkbox',
       baseClass: Checkbox$1,
-      template: template$I,
-      styles: styles$R,
+      template: template$L,
+      styles: styles$U,
       checkedIndicator: check16X16.data,
       indeterminateIndicator: minus16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCheckbox());
   const checkboxTag = 'nimble-checkbox';
 
-  const styles$Q = css `
-    ${styles$14}
+  const styles$T = css `
+    ${styles$17}
     ${buttonAppearanceVariantStyles}
 
     @layer checked {
@@ -20735,7 +20735,7 @@ so this becomes the fallback color for the slot */ ''}
             }
         `));
 
-  const template$H = (context, definition) => html `
+  const template$K = (context, definition) => html `
     <div
         role="button"
         part="control"
@@ -20830,8 +20830,8 @@ so this becomes the fallback color for the slot */ ''}
   applyMixins(ToggleButton, StartEnd, DelegatesARIAButton);
   const nimbleToggleButton = ToggleButton.compose({
       baseName: 'toggle-button',
-      template: template$H,
-      styles: styles$Q,
+      template: template$K,
+      styles: styles$T,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -20861,7 +20861,7 @@ so this becomes the fallback color for the slot */ ''}
       frameless: 'frameless'
   };
 
-  const styles$P = css `
+  const styles$S = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -21151,7 +21151,7 @@ so this becomes the fallback color for the slot */ ''}
             }
         `));
 
-  const styles$O = css `
+  const styles$R = css `
     .annotated-label {
         display: flex;
         flex-direction: row;
@@ -21178,10 +21178,10 @@ so this becomes the fallback color for the slot */ ''}
       none: undefined,
       standard: 'standard'};
 
-  const styles$N = css `
-    ${styles$P}
+  const styles$Q = css `
     ${styles$S}
-    ${styles$O}
+    ${styles$V}
+    ${styles$R}
 
     :host {
         --ni-private-hover-bottom-border-width: 2px;
@@ -21302,7 +21302,7 @@ so this becomes the fallback color for the slot */ ''}
         <slot></slot>
     </label>
 `);
-  const template$G = (context, definition) => html `
+  const template$J = (context, definition) => html `
     <template
         aria-disabled="${x => x.ariaDisabled}"
         autocomplete="${x => x.autocomplete}"
@@ -22077,8 +22077,8 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleCombobox = Combobox.compose({
       baseName: 'combobox',
       baseClass: FormAssociatedCombobox,
-      template: template$G,
-      styles: styles$N,
+      template: template$J,
+      styles: styles$Q,
       shadowOptions: {
           delegatesFocus: true
       },
@@ -22122,7 +22122,7 @@ so this becomes the fallback color for the slot */ ''}
    */
   const UserDismissed = Symbol('user dismissed');
 
-  const styles$M = css `
+  const styles$P = css `
     ${display$2('grid')}
 
     dialog {
@@ -22215,7 +22215,7 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const template$F = html `
+  const template$I = html `
     <template>
         <dialog
             ${ref('dialogElement')}
@@ -22363,13 +22363,13 @@ so this becomes the fallback color for the slot */ ''}
   applyMixins(Dialog, ARIAGlobalStatesAndProperties);
   const nimbleDialog = Dialog.compose({
       baseName: 'dialog',
-      template: template$F,
-      styles: styles$M,
+      template: template$I,
+      styles: styles$P,
       baseClass: Dialog
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDialog());
 
-  const styles$L = css `
+  const styles$O = css `
     ${display$2('block')}
 
     :host {
@@ -22512,7 +22512,7 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const template$E = html `
+  const template$H = html `
     <dialog
         ${ref('dialog')}
         aria-label="${x => x.ariaLabel}"
@@ -22654,8 +22654,8 @@ so this becomes the fallback color for the slot */ ''}
   applyMixins(Drawer, ARIAGlobalStatesAndProperties);
   const nimbleDrawer = Drawer.compose({
       baseName: 'drawer',
-      template: template$E,
-      styles: styles$L
+      template: template$H,
+      styles: styles$O
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDrawer());
 
@@ -25437,7 +25437,7 @@ so this becomes the fallback color for the slot */ ''}
       }
   }
 
-  const styles$K = css `
+  const styles$N = css `
     ${display$2('none')}
 `;
 
@@ -25502,7 +25502,7 @@ so this becomes the fallback color for the slot */ ''}
   ], LabelProviderCore.prototype, "itemRemove", void 0);
   const nimbleLabelProviderCore = LabelProviderCore.compose({
       baseName: 'label-provider-core',
-      styles: styles$K
+      styles: styles$N
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -25669,13 +25669,13 @@ so this becomes the fallback color for the slot */ ''}
   ], LabelProviderTable.prototype, "groupRowPlaceholderEmpty", void 0);
   const nimbleLabelProviderTable = LabelProviderTable.compose({
       baseName: 'label-provider-table',
-      styles: styles$K
+      styles: styles$N
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleLabelProviderTable());
 
-  const styles$J = css `
+  const styles$M = css `
     ${display$2('flex')}
 
     :host {
@@ -25751,7 +25751,7 @@ so this becomes the fallback color for the slot */ ''}
    * The template for the {@link @ni/fast-foundation#(ListboxOption:class)} component.
    * @public
    */
-  const template$D = (context, definition) => html `
+  const template$G = (context, definition) => html `
     <template
         aria-checked="${x => x.ariaChecked}"
         aria-disabled="${x => x.ariaDisabled}"
@@ -25864,13 +25864,13 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleListOption = ListOption.compose({
       baseName: 'list-option',
       baseClass: ListboxOption,
-      template: template$D,
-      styles: styles$J
+      template: template$G,
+      styles: styles$M
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListOption());
   const listOptionTag = 'nimble-list-option';
 
-  const styles$I = css `
+  const styles$L = css `
     ${display$2('flex')}
 
     :host {
@@ -25932,7 +25932,7 @@ so this becomes the fallback color for the slot */ ''}
   const isListOption$1 = (n) => {
       return n instanceof ListOption;
   };
-  const template$C = html `
+  const template$F = html `
 <template
     role="group"
     aria-label="${x => x.labelContent}"
@@ -26074,8 +26074,8 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleListOptionGroup = ListOptionGroup.compose({
       baseName: 'list-option-group',
       baseClass: FoundationElement,
-      template: template$C,
-      styles: styles$I
+      template: template$F,
+      styles: styles$L
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -26102,9 +26102,9 @@ so this becomes the fallback color for the slot */ ''}
       attr()
   ], Mapping$1.prototype, "key", void 0);
 
-  const template$B = html `<template slot="mapping"></template>`;
+  const template$E = html `<template slot="mapping"></template>`;
 
-  const styles$H = css `
+  const styles$K = css `
     ${display$2('none')}
 `;
 
@@ -26120,8 +26120,8 @@ so this becomes the fallback color for the slot */ ''}
   ], MappingEmpty.prototype, "text", void 0);
   const emptyMapping = MappingEmpty.compose({
       baseName: 'mapping-empty',
-      template: template$B,
-      styles: styles$H
+      template: template$E,
+      styles: styles$K
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(emptyMapping());
 
@@ -26191,8 +26191,8 @@ so this becomes the fallback color for the slot */ ''}
   ], MappingIcon.prototype, "resolvedIcon", void 0);
   const iconMapping = MappingIcon.compose({
       baseName: 'mapping-icon',
-      template: template$B,
-      styles: styles$H
+      template: template$E,
+      styles: styles$K
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(iconMapping());
 
@@ -26215,8 +26215,8 @@ so this becomes the fallback color for the slot */ ''}
   ], MappingSpinner.prototype, "textHidden", void 0);
   const spinnerMapping = MappingSpinner.compose({
       baseName: 'mapping-spinner',
-      template: template$B,
-      styles: styles$H
+      template: template$E,
+      styles: styles$K
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(spinnerMapping());
 
@@ -26232,8 +26232,8 @@ so this becomes the fallback color for the slot */ ''}
   ], MappingText.prototype, "text", void 0);
   const textMapping = MappingText.compose({
       baseName: 'mapping-text',
-      template: template$B,
-      styles: styles$H
+      template: template$E,
+      styles: styles$K
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(textMapping());
 
@@ -26535,7 +26535,7 @@ so this becomes the fallback color for the slot */ ''}
       observable
   ], Menu$1.prototype, "itemIcons", void 0);
 
-  const template$A = () => html `
+  const template$D = () => html `
     <template
         slot="${x => {
     if (x.slot) {
@@ -26552,7 +26552,7 @@ so this becomes the fallback color for the slot */ ''}
     </template>
 `;
 
-  const styles$G = css `
+  const styles$J = css `
     ${display$2('grid')}
 
     :host {
@@ -26623,8 +26623,8 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleMenu = Menu.compose({
       baseName: 'menu',
       baseClass: Menu$1,
-      template: template$A,
-      styles: styles$G
+      template: template$D,
+      styles: styles$J
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenu());
 
@@ -26639,7 +26639,7 @@ so this becomes the fallback color for the slot */ ''}
       auto: 'auto'
   };
 
-  const styles$F = css `
+  const styles$I = css `
     ${display$2('inline-block')}
 
     :host {
@@ -26657,7 +26657,7 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const template$z = html `
+  const template$C = html `
     <template
         ?open="${x => x.open}"
         @focusout="${(x, c) => x.focusoutHandler(c.event)}"
@@ -26907,8 +26907,8 @@ so this becomes the fallback color for the slot */ ''}
   ], MenuButton.prototype, "slottedMenus", void 0);
   const nimbleMenuButton = MenuButton.compose({
       baseName: 'menu-button',
-      template: template$z,
-      styles: styles$F,
+      template: template$C,
+      styles: styles$I,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -26916,7 +26916,7 @@ so this becomes the fallback color for the slot */ ''}
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuButton());
   const menuButtonTag = 'nimble-menu-button';
 
-  const styles$E = css `
+  const styles$H = css `
     ${display$2('grid')}
 
     :host {
@@ -27013,7 +27013,7 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'menu-item',
       baseClass: MenuItem$1,
       template: menuItemTemplate,
-      styles: styles$E,
+      styles: styles$H,
       expandCollapseGlyph: arrowExpanderRight16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuItem());
@@ -27028,10 +27028,10 @@ so this becomes the fallback color for the slot */ ''}
       frameless: 'frameless'
   };
 
-  const styles$D = css `
+  const styles$G = css `
     ${display$2('inline-block')}
-    ${styles$S}
-    ${styles$O}
+    ${styles$V}
+    ${styles$R}
 
     :host {
         font: ${bodyFont};
@@ -27254,7 +27254,7 @@ so this becomes the fallback color for the slot */ ''}
    * The template for the {@link @ni/fast-foundation#(NumberField:class)} component.
    * @public
    */
-  const template$y = (context, definition) => html `
+  const template$B = (context, definition) => html `
     <template class="${x => (x.readOnly ? 'readonly' : '')}">
         ${labelTemplate$4}
         <div class="root" part="root">
@@ -27408,8 +27408,8 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleNumberField = NumberField.compose({
       baseName: 'number-field',
       baseClass: NumberField$1,
-      template: template$y,
-      styles: styles$D,
+      template: template$B,
+      styles: styles$G,
       shadowOptions: {
           delegatesFocus: true
       },
@@ -27452,7 +27452,7 @@ so this becomes the fallback color for the slot */ ''}
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleNumberField());
 
-  const styles$C = css `
+  const styles$F = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -27552,15 +27552,15 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'radio',
       baseClass: Radio$1,
       template: radioTemplate,
-      styles: styles$C,
+      styles: styles$F,
       checkedIndicator: circleFilled16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleRadio());
 
-  const styles$B = css `
+  const styles$E = css `
     ${display$2('inline-block')}
-    ${styles$S}
-    ${styles$O}
+    ${styles$V}
+    ${styles$R}
 
     .positioning-region {
         display: flex;
@@ -27599,7 +27599,7 @@ so this becomes the fallback color for the slot */ ''}
 `;
 
   const labelTemplate$3 = createRequiredVisibleLabelTemplate(html `<slot name="label"></slot>`);
-  const template$x = html `
+  const template$A = html `
     <template
         role="radiogroup"
         aria-disabled="${x => x.disabled}"
@@ -27639,8 +27639,8 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleRadioGroup = RadioGroup.compose({
       baseName: 'radio-group',
       baseClass: RadioGroup$1,
-      template: template$x,
-      styles: styles$B,
+      template: template$A,
+      styles: styles$E,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -33190,6 +33190,27 @@ so this becomes the fallback color for the slot */ ''}
           return this.steps.length > 0;
       }
       /**
+      Return a single range, in post-transform document positions,
+      that covers all content changed by this transform. Returns null
+      if no replacements are made. Note that this will ignore changes
+      that add/remove marks without replacing the underlying content.
+      */
+      changedRange() {
+          let from = 1e9, to = -1e9;
+          for (let i = 0; i < this.mapping.maps.length; i++) {
+              let map = this.mapping.maps[i];
+              if (i) {
+                  from = map.map(from, 1);
+                  to = map.map(to, -1);
+              }
+              map.forEach((_f, _t, fromB, toB) => {
+                  from = Math.min(from, fromB);
+                  to = Math.max(to, toB);
+              });
+          }
+          return from == 1e9 ? null : { from, to };
+      }
+      /**
       @internal
       */
       addStep(step, doc) {
@@ -41841,8 +41862,12 @@ so this becomes the fallback color for the slot */ ''}
         }
       });
     };
-    if (view.hasFocus() && position === null || position === false) {
-      return true;
+    try {
+      if (view.hasFocus() && position === null || position === false) {
+        return true;
+      }
+    } catch {
+      return false;
     }
     if (dispatch && position === null && !isTextSelection(editor.state.selection)) {
       delayedFocus();
@@ -45287,19 +45312,20 @@ so this becomes the fallback color for the slot */ ''}
       this.node.content.forEach((node, offset) => {
         const isBlock = node.isBlock && !node.isTextblock;
         const isNonTextAtom = node.isAtom && !node.isText;
+        const isInline = node.isInline;
         const targetPos = this.pos + offset + (isNonTextAtom ? 0 : 1);
         if (targetPos < 0 || targetPos > this.resolvedPos.doc.nodeSize - 2) {
           return;
         }
         const $pos = this.resolvedPos.doc.resolve(targetPos);
-        if (!isBlock && $pos.depth <= this.depth) {
+        if (!isBlock && !isInline && $pos.depth <= this.depth) {
           return;
         }
-        const childNodePos = new _NodePos($pos, this.editor, isBlock, isBlock ? node : null);
+        const childNodePos = new _NodePos($pos, this.editor, isBlock, isBlock || isInline ? node : null);
         if (isBlock) {
           childNodePos.actualDepth = this.depth + 1;
         }
-        children.push(new _NodePos($pos, this.editor, isBlock, isBlock ? node : null));
+        children.push(childNodePos);
       });
       return children;
     }
@@ -46758,7 +46784,7 @@ ${renderedContent}
   // src/index.ts
   var index_default$7 = HardBreak;
 
-  const styles$A = css `
+  const styles$D = css `
     ${display$2('inline')}
 
     .positioning-region {
@@ -46795,7 +46821,7 @@ ${renderedContent}
       baseName: 'toolbar',
       baseClass: Toolbar$1,
       template: toolbarTemplate,
-      styles: styles$A
+      styles: styles$D
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleToolbar());
   const toolbarTag = 'nimble-toolbar';
@@ -46824,8 +46850,8 @@ ${renderedContent}
       cssCustomPropertyName: null
   }).withDefault(richTextLabelDefaults.richTextToggleNumberedListLabel);
 
-  const styles$z = css `
-    ${styles$P}
+  const styles$C = css `
+    ${styles$S}
 
     :host {
         height: auto;
@@ -46843,7 +46869,7 @@ ${renderedContent}
     }
 `;
 
-  const template$w = html `
+  const template$z = html `
     <template>
         <${anchoredRegionTag}
             ${ref('region')}
@@ -47131,15 +47157,15 @@ ${renderedContent}
   ], RichTextMentionListbox.prototype, "anchorElement", void 0);
   const nimbleRichTextMentionListbox = RichTextMentionListbox.compose({
       baseName: 'rich-text-mention-listbox',
-      template: template$w,
-      styles: styles$z
+      template: template$z,
+      styles: styles$C
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleRichTextMentionListbox());
   const richTextMentionListboxTag = 'nimble-rich-text-mention-listbox';
 
-  const template$v = html `
+  const template$y = html `
     <template
         ${children$1({ property: 'childItems', filter: elements() })}
         @focusout="${x => x.focusoutHandler()}"
@@ -47241,9 +47267,9 @@ ${renderedContent}
     </template>
 `;
 
-  const styles$y = css `
+  const styles$B = css `
     ${display$2('inline-flex')}
-    ${styles$S}
+    ${styles$V}
 
     :host {
         font: ${bodyFont};
@@ -56587,8 +56613,7 @@ ${renderedContent}
               }
               if (node && node.isText && marks.some(mark => {
                   let info = this.getMark(mark.type.name);
-                  return info && info.expelEnclosingWhitespace &&
-                      (index == parent.childCount - 1 || !mark.isInSet(parent.child(index + 1).marks));
+                  return info && info.expelEnclosingWhitespace && !this.isMarkAhead(parent, index + 1, mark);
               })) {
                   let [_, rest, trail] = /^(.*?)(\s*)$/m.exec(node.text);
                   if (trail) {
@@ -56732,6 +56757,19 @@ ${renderedContent}
               trailing: (text.match(/(\s+)$/) || [undefined])[0]
           };
       }
+      /**
+      @internal
+      */
+      isMarkAhead(parent, index, mark) {
+          for (;; index++) {
+              if (index == parent.childCount)
+                  return false;
+              let next = parent.child(index);
+              if (next.type.name != this.options.hardBreakNodeName)
+                  return mark.isInSet(next.marks);
+              index++;
+          }
+      }
   }
 
   var _a$4;
@@ -59430,31 +59468,33 @@ ${renderedContent}
           if (!view.editable) {
             return false;
           }
+          let link = null;
+          if (event.target instanceof HTMLAnchorElement) {
+            link = event.target;
+          } else {
+            const target = event.target;
+            if (!target) {
+              return false;
+            }
+            const root = options.editor.view.dom;
+            link = target.closest("a");
+            if (link && !root.contains(link)) {
+              link = null;
+            }
+          }
+          if (!link) {
+            return false;
+          }
           let handled = false;
           if (options.enableClickSelection) {
             const commandResult = options.editor.commands.extendMarkRange(options.type.name);
             handled = commandResult;
           }
           if (options.openOnClick) {
-            let link = null;
-            if (event.target instanceof HTMLAnchorElement) {
-              link = event.target;
-            } else {
-              let a = event.target;
-              const els = [];
-              while (a.nodeName !== "DIV") {
-                els.push(a);
-                a = a.parentNode;
-              }
-              link = els.find((value) => value.nodeName === "A");
-            }
-            if (!link) {
-              return handled;
-            }
             const attrs = getAttributes(view.state, options.type.name);
-            const href = (_a = link == null ? void 0 : link.href) != null ? _a : attrs.href;
-            const target = (_b = link == null ? void 0 : link.target) != null ? _b : attrs.target;
-            if (link && href) {
+            const href = (_a = link.href) != null ? _a : attrs.href;
+            const target = (_b = link.target) != null ? _b : attrs.target;
+            if (href) {
               window.open(href, target);
               handled = true;
             }
@@ -59891,11 +59931,13 @@ ${renderedContent}
         node,
         h,
         (context) => {
+          var _a, _b;
           if (context.parentType === "bulletList") {
             return "- ";
           }
           if (context.parentType === "orderedList") {
-            return `${context.index + 1}. `;
+            const start = ((_b = (_a = context.meta) == null ? void 0 : _a.parentAttrs) == null ? void 0 : _b.start) || 1;
+            return `${start + context.index}. `;
           }
           return "- ";
         },
@@ -61347,6 +61389,8 @@ ${nextLine.slice(indentLevel + 2)}`;
   var index_default$2 = Mention;
 
   // src/paragraph.ts
+  var EMPTY_PARAGRAPH_MARKDOWN = "&nbsp;";
+  var NBSP_CHAR = "\xA0";
   var Paragraph = Node3.create({
     name: "paragraph",
     priority: 1e3,
@@ -61368,18 +61412,21 @@ ${nextLine.slice(indentLevel + 2)}`;
       if (tokens.length === 1 && tokens[0].type === "image") {
         return helpers.parseChildren([tokens[0]]);
       }
-      return helpers.createNode(
-        "paragraph",
-        void 0,
-        // no attributes for paragraph
-        helpers.parseInline(tokens)
-      );
+      const content = helpers.parseInline(tokens);
+      if (content.length === 1 && content[0].type === "text" && (content[0].text === EMPTY_PARAGRAPH_MARKDOWN || content[0].text === NBSP_CHAR)) {
+        return helpers.createNode("paragraph", void 0, []);
+      }
+      return helpers.createNode("paragraph", void 0, content);
     },
     renderMarkdown: (node, h) => {
-      if (!node || !Array.isArray(node.content)) {
+      if (!node) {
         return "";
       }
-      return h.renderChildren(node.content);
+      const content = Array.isArray(node.content) ? node.content : [];
+      if (content.length === 0) {
+        return EMPTY_PARAGRAPH_MARKDOWN;
+      }
+      return h.renderChildren(content);
     },
     addCommands() {
       return {
@@ -62590,12 +62637,17 @@ ${nextLine.slice(indentLevel + 2)}`;
       };
     }
   });
+  var DEFAULT_DATA_ATTRIBUTE = "placeholder";
+  function preparePlaceholderAttribute(attr) {
+    return attr.replace(/\s+/g, "-").replace(/[^a-zA-Z0-9-]/g, "").replace(/^[0-9-]+/, "").replace(/^-+/, "").toLowerCase();
+  }
   var Placeholder = Extension.create({
     name: "placeholder",
     addOptions() {
       return {
         emptyEditorClass: "is-editor-empty",
         emptyNodeClass: "is-empty",
+        dataAttribute: DEFAULT_DATA_ATTRIBUTE,
         placeholder: "Write something \u2026",
         showOnlyWhenEditable: true,
         showOnlyCurrent: true,
@@ -62603,6 +62655,7 @@ ${nextLine.slice(indentLevel + 2)}`;
       };
     },
     addProseMirrorPlugins() {
+      const dataAttribute = this.options.dataAttribute ? `data-${preparePlaceholderAttribute(this.options.dataAttribute)}` : `data-${DEFAULT_DATA_ATTRIBUTE}`;
       return [
         new Plugin({
           key: new PluginKey("placeholder"),
@@ -62625,7 +62678,7 @@ ${nextLine.slice(indentLevel + 2)}`;
                   }
                   const decoration = Decoration.node(pos, pos + node.nodeSize, {
                     class: classes.join(" "),
-                    "data-placeholder": typeof this.options.placeholder === "function" ? this.options.placeholder({
+                    [dataAttribute]: typeof this.options.placeholder === "function" ? this.options.placeholder({
                       editor: this.editor,
                       node,
                       pos,
@@ -63590,8 +63643,8 @@ ${nextLine.slice(indentLevel + 2)}`;
   applyMixins(RichTextEditor, ARIAGlobalStatesAndProperties);
   const nimbleRichTextEditor = RichTextEditor.compose({
       baseName: 'rich-text-editor',
-      template: template$v,
-      styles: styles$y,
+      template: template$y,
+      styles: styles$B,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -63600,13 +63653,13 @@ ${nextLine.slice(indentLevel + 2)}`;
       .withPrefix('nimble')
       .register(nimbleRichTextEditor());
 
-  const template$u = html `
+  const template$x = html `
     <template ${children$1({ property: 'childItems', filter: elements() })}>
         <div ${ref('viewer')} class="viewer"></div>
     </template>
 `;
 
-  const styles$x = css `
+  const styles$A = css `
     ${display$2('flex')}
 
     :host {
@@ -63719,17 +63772,17 @@ ${nextLine.slice(indentLevel + 2)}`;
   ], RichTextViewer.prototype, "markdown", void 0);
   const nimbleRichTextViewer = RichTextViewer.compose({
       baseName: 'rich-text-viewer',
-      template: template$u,
-      styles: styles$x
+      template: template$x,
+      styles: styles$A
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleRichTextViewer());
 
-  const styles$w = css `
-    ${styles$P}
+  const styles$z = css `
     ${styles$S}
-    ${styles$O}
+    ${styles$V}
+    ${styles$R}
 
     ${
 /* We are using flex `order` to define the visual ordering of the selected value,
@@ -63892,7 +63945,7 @@ ${nextLine.slice(indentLevel + 2)}`;
             }
         `));
 
-  const styles$v = css `
+  const styles$y = css `
     ${display$2('inline-grid')}
 
     :host {
@@ -64062,7 +64115,7 @@ ${nextLine.slice(indentLevel + 2)}`;
             }
         `));
 
-  const template$t = html `
+  const template$w = html `
     <template role="progressbar">
         ${''
 /**
@@ -64109,8 +64162,8 @@ ${nextLine.slice(indentLevel + 2)}`;
   ], Spinner.prototype, "appearance", void 0);
   const nimbleSpinner = Spinner.compose({
       baseName: 'spinner',
-      template: template$t,
-      styles: styles$v
+      template: template$w,
+      styles: styles$y
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSpinner());
   const spinnerTag = 'nimble-spinner';
@@ -64126,7 +64179,7 @@ ${nextLine.slice(indentLevel + 2)}`;
         <slot ${ref('labelSlot')}></slot>
     </label>
 `);
-  const template$s = (context, definition) => html `
+  const template$v = (context, definition) => html `
     <template
         class="${x => [
     x.collapsible && 'collapsible',
@@ -65342,8 +65395,8 @@ ${nextLine.slice(indentLevel + 2)}`;
   const nimbleSelect = Select.compose({
       baseName: 'select',
       baseClass: Select$2,
-      template: template$s,
-      styles: styles$w,
+      template: template$v,
+      styles: styles$z,
       indicator: arrowExpanderDown16X16.data,
       end: html `
         <${iconExclamationMarkTag}
@@ -65356,7 +65409,7 @@ ${nextLine.slice(indentLevel + 2)}`;
   applyMixins(Select, StartEnd, DelegatesARIASelect);
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSelect());
 
-  const styles$u = css `
+  const styles$x = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -65518,7 +65571,7 @@ ${nextLine.slice(indentLevel + 2)}`;
             }
         `));
 
-  const template$r = html `
+  const template$u = html `
     <template
         role="switch"
         aria-checked="${x => x.checked}"
@@ -65562,12 +65615,12 @@ ${nextLine.slice(indentLevel + 2)}`;
   const nimbleSwitch = Switch.compose({
       baseClass: Switch$1,
       baseName: 'switch',
-      template: template$r,
-      styles: styles$u
+      template: template$u,
+      styles: styles$x
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSwitch());
 
-  const styles$t = css `
+  const styles$w = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -65678,11 +65731,11 @@ ${nextLine.slice(indentLevel + 2)}`;
       baseName: 'tab',
       baseClass: Tab$1,
       template: tabTemplate,
-      styles: styles$t
+      styles: styles$w
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTab());
 
-  const styles$s = css `
+  const styles$v = css `
     ${display$2('block')}
 
     :host {
@@ -65701,7 +65754,7 @@ ${nextLine.slice(indentLevel + 2)}`;
       baseName: 'tab-panel',
       baseClass: TabPanel$1,
       template: tabPanelTemplate,
-      styles: styles$s
+      styles: styles$v
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabPanel());
 
@@ -69427,7 +69480,7 @@ ${nextLine.slice(indentLevel + 2)}`;
       }
   }
 
-  const styles$r = css `
+  const styles$u = css `
     ${display$2('flex')}
 
     :host {
@@ -69647,7 +69700,7 @@ focus outline in that case.
             }
         `));
 
-  const styles$q = css `
+  const styles$t = css `
     ${display$2('flex')}
 
     :host {
@@ -69680,7 +69733,7 @@ focus outline in that case.
     }
 `;
 
-  const template$q = html `
+  const template$t = html `
     <template role="columnheader"
         class="${x => (x.alignment === TableColumnAlignment.right ? 'right-align' : '')}"
         aria-sort="${x => x.ariaSort}"
@@ -69766,13 +69819,13 @@ focus outline in that case.
   ], TableHeader.prototype, "isGrouped", void 0);
   const nimbleTableHeader = TableHeader.compose({
       baseName: 'table-header',
-      template: template$q,
-      styles: styles$q
+      template: template$t,
+      styles: styles$t
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableHeader());
   const tableHeaderTag = 'nimble-table-header';
 
-  const styles$p = css `
+  const styles$s = css `
     :host .animating {
         transition: ${mediumDelay} ease-in;
     }
@@ -69797,9 +69850,9 @@ focus outline in that case.
     }
 `;
 
-  const styles$o = css `
+  const styles$r = css `
     ${display$2('flex')}
-    ${styles$p}
+    ${styles$s}
 
     :host {
         width: fit-content;
@@ -69969,7 +70022,7 @@ focus outline in that case.
             }
         `));
 
-  const styles$n = css `
+  const styles$q = css `
     ${display$2('flex')}
 
     :host {
@@ -70014,7 +70067,7 @@ focus outline in that case.
     }
 `;
 
-  const template$p = html `
+  const template$s = html `
     <template role="cell" style="--ni-private-table-cell-nesting-level: ${x => x.nestingLevel}"
         @focusin="${x => x.onCellFocusIn()}"
         @blur="${x => x.onCellBlur()}"
@@ -70111,13 +70164,13 @@ focus outline in that case.
   ], TableCell.prototype, "nestingLevel", void 0);
   const nimbleTableCell = TableCell.compose({
       baseName: 'table-cell',
-      template: template$p,
-      styles: styles$n
+      template: template$s,
+      styles: styles$q
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableCell());
   const tableCellTag = 'nimble-table-cell';
 
-  const template$o = html `
+  const template$r = html `
     <template 
         role="row"
         aria-selected=${x => x.ariaSelected}
@@ -70517,15 +70570,15 @@ focus outline in that case.
   ], TableRow.prototype, "ariaSelected", null);
   const nimbleTableRow = TableRow.compose({
       baseName: 'table-row',
-      template: template$o,
-      styles: styles$o
+      template: template$r,
+      styles: styles$r
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableRow());
   const tableRowTag = 'nimble-table-row';
 
-  const styles$m = css `
+  const styles$p = css `
     ${display$2('grid')}
-    ${styles$p}
+    ${styles$s}
 
     :host {
         align-items: center;
@@ -70613,7 +70666,7 @@ focus outline in that case.
             }
         `));
 
-  const template$n = html `
+  const template$q = html `
     <template
         role="row"
         @click=${x => x.onGroupExpandToggle()}
@@ -70770,13 +70823,13 @@ focus outline in that case.
   ], TableGroupRow.prototype, "allowHover", void 0);
   const nimbleTableGroupRow = TableGroupRow.compose({
       baseName: 'table-group-row',
-      template: template$n,
-      styles: styles$m
+      template: template$q,
+      styles: styles$p
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableGroupRow());
   const tableGroupRowTag = 'nimble-table-group-row';
 
-  const template$m = html `
+  const template$p = html `
     <template
         role="treegrid"
         ${'' /* tabindex managed dynamically by KeyboardNavigationManager */}
@@ -75015,12 +75068,12 @@ focus outline in that case.
   ], Table$1.prototype, "windowShiftKeyDown", void 0);
   const nimbleTable = Table$1.compose({
       baseName: 'table',
-      template: template$m,
-      styles: styles$r
+      template: template$p,
+      styles: styles$u
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTable());
 
-  const styles$l = css `
+  const styles$o = css `
     ${display$2('contents')}
 
     .header-content {
@@ -75032,7 +75085,7 @@ focus outline in that case.
 
   // Avoiding a wrapping <template> and be careful about starting and ending whitspace
   // so the template can be composed into other column header templates
-  const template$l = html `<span
+  const template$o = html `<span
     ${overflow('hasOverflow')}
     class="header-content"
     title=${x => (x.hasOverflow && x.headerTextContent ? x.headerTextContent : null)}
@@ -75097,7 +75150,7 @@ focus outline in that case.
       return ColumnWithPlaceholder;
   }
 
-  const styles$k = css `
+  const styles$n = css `
     ${display$2('flex')}
 
     :host {
@@ -75128,7 +75181,7 @@ focus outline in that case.
     }
 `;
 
-  const template$k = html `
+  const template$n = html `
     <template
         @click="${(x, c) => {
     if (typeof x.cellRecord?.href === 'string') {
@@ -75220,8 +75273,8 @@ focus outline in that case.
   ], TableColumnAnchorCellView.prototype, "showAnchor", null);
   const anchorCellView = TableColumnAnchorCellView.compose({
       baseName: 'table-column-anchor-cell-view',
-      template: template$k,
-      styles: styles$k
+      template: template$n,
+      styles: styles$n
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(anchorCellView());
   const tableColumnAnchorCellViewTag = 'nimble-table-column-anchor-cell-view';
@@ -75298,7 +75351,7 @@ focus outline in that case.
       observable
   ], TableColumnTextGroupHeaderViewBase.prototype, "text", void 0);
 
-  const template$j = html `
+  const template$m = html `
     <span
         ${overflow('hasOverflow')}
         title="${x => (x.hasOverflow && x.text ? x.text : null)}"
@@ -75307,7 +75360,7 @@ focus outline in that case.
     </span>
 `;
 
-  const styles$j = css `
+  const styles$m = css `
     ${display$2('flex')}
 
     span {
@@ -75331,8 +75384,8 @@ focus outline in that case.
   }
   const tableColumnTextGroupHeaderView = TableColumnTextGroupHeaderView.compose({
       baseName: 'table-column-text-group-header-view',
-      template: template$j,
-      styles: styles$j
+      template: template$m,
+      styles: styles$m
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -75576,8 +75629,8 @@ focus outline in that case.
   ], TableColumnAnchor.prototype, "download", void 0);
   const nimbleTableColumnAnchor = TableColumnAnchor.compose({
       baseName: 'table-column-anchor',
-      template: template$l,
-      styles: styles$l
+      template: template$o,
+      styles: styles$o
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -75629,15 +75682,15 @@ focus outline in that case.
   }
   const tableColumnDateTextGroupHeaderView = TableColumnDateTextGroupHeaderView.compose({
       baseName: 'table-column-date-text-group-header-view',
-      template: template$j,
-      styles: styles$j
+      template: template$m,
+      styles: styles$m
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(tableColumnDateTextGroupHeaderView());
   const tableColumnDateTextGroupHeaderViewTag = 'nimble-table-column-date-text-group-header-view';
 
-  const template$i = html `
+  const template$l = html `
     <template
         class="
             ${x => (x.alignment === TableColumnAlignment.right ? 'right-align' : '')}
@@ -75653,7 +75706,7 @@ focus outline in that case.
     </template>
 `;
 
-  const styles$i = css `
+  const styles$l = css `
     ${display$2('flex')}
 
     :host {
@@ -75755,8 +75808,8 @@ focus outline in that case.
   }
   const dateTextCellView = TableColumnDateTextCellView.compose({
       baseName: 'table-column-date-text-cell-view',
-      template: template$i,
-      styles: styles$i
+      template: template$l,
+      styles: styles$l
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(dateTextCellView());
   const tableColumnDateTextCellViewTag = 'nimble-table-column-date-text-cell-view';
@@ -76014,8 +76067,8 @@ focus outline in that case.
   ], TableColumnDateText.prototype, "customHourCycle", void 0);
   const nimbleTableColumnDateText = TableColumnDateText.compose({
       baseName: 'table-column-date-text',
-      template: template$l,
-      styles: styles$l
+      template: template$o,
+      styles: styles$o
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -76031,8 +76084,8 @@ focus outline in that case.
   }
   const durationTextCellView = TableColumnDurationTextCellView.compose({
       baseName: 'table-column-duration-text-cell-view',
-      template: template$i,
-      styles: styles$i
+      template: template$l,
+      styles: styles$l
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -76133,8 +76186,8 @@ focus outline in that case.
   }
   const tableColumnDurationTextGroupHeaderView = TableColumnDurationTextGroupHeaderView.compose({
       baseName: 'table-column-duration-text-group-header-view',
-      template: template$j,
-      styles: styles$j
+      template: template$m,
+      styles: styles$m
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -76186,8 +76239,8 @@ focus outline in that case.
   }
   const nimbleTableColumnDurationText = TableColumnDurationText.compose({
       baseName: 'table-column-duration-text',
-      template: template$l,
-      styles: styles$l
+      template: template$o,
+      styles: styles$o
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -76295,15 +76348,15 @@ focus outline in that case.
       attr({ attribute: 'key-type' })
   ], TableColumnEnumBase.prototype, "keyType", void 0);
 
-  const styles$h = css `
-    ${styles$l}
+  const styles$k = css `
+    ${styles$o}
 
     slot[name='mapping'] {
         display: none;
     }
 `;
 
-  const template$h = html `${template$l}<slot ${slotted('mappings')} name="mapping"></slot>`;
+  const template$k = html `${template$o}<slot ${slotted('mappings')} name="mapping"></slot>`;
 
   const enumBaseValidityFlagNames = [
       'invalidMappingKeyValueForType',
@@ -76389,7 +76442,7 @@ focus outline in that case.
       }
   }
 
-  const styles$g = css `
+  const styles$j = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -76413,7 +76466,7 @@ focus outline in that case.
     }
 `;
 
-  const template$g = html `
+  const template$j = html `
     ${when(x => x.visualizationTemplate, html `
             <span class="reserve-icon-size">
                 ${x => x.visualizationTemplate}
@@ -76557,15 +76610,15 @@ focus outline in that case.
   ], TableColumnMappingGroupHeaderView.prototype, "visualizationTemplate", void 0);
   const mappingGroupHeaderView = TableColumnMappingGroupHeaderView.compose({
       baseName: 'table-column-mapping-group-header-view',
-      template: template$g,
-      styles: styles$g
+      template: template$j,
+      styles: styles$j
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(mappingGroupHeaderView());
   const tableColumnMappingGroupHeaderViewTag = 'nimble-table-column-mapping-group-header-view';
 
-  const styles$f = css `
+  const styles$i = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -76589,7 +76642,7 @@ focus outline in that case.
     }
 `;
 
-  const template$f = html `
+  const template$i = html `
     ${when(x => x.visualizationTemplate, html `
             <span class="reserve-icon-size">
                 ${x => x.visualizationTemplate}
@@ -76676,8 +76729,8 @@ focus outline in that case.
   ], TableColumnMappingCellView.prototype, "hasOverflow", void 0);
   const mappingCellView = TableColumnMappingCellView.compose({
       baseName: 'table-column-mapping-cell-view',
-      template: template$f,
-      styles: styles$f
+      template: template$i,
+      styles: styles$i
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(mappingCellView());
   const tableColumnMappingCellViewTag = 'nimble-table-column-mapping-cell-view';
@@ -76760,23 +76813,23 @@ focus outline in that case.
   ], TableColumnMapping.prototype, "widthMode", void 0);
   const nimbleTableColumnMapping = TableColumnMapping.compose({
       baseName: 'table-column-mapping',
-      template: template$h,
-      styles: styles$h
+      template: template$k,
+      styles: styles$k
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleTableColumnMapping());
 
-  const template$e = html `
+  const template$h = html `
     <template @delegated-event="${(x, c) => x.onDelegatedEvent(c.event)}"
-        >${template$l}</template
+        >${template$o}</template
     >
 `;
 
   /** @internal */
   const cellViewMenuSlotName = 'menu-button-menu';
 
-  const template$d = html `
+  const template$g = html `
     ${when(x => x.showMenuButton, html `
         <${menuButtonTag}
             ${ref('menuButton')}
@@ -76795,7 +76848,7 @@ focus outline in that case.
     `)}
 `;
 
-  const styles$e = css `
+  const styles$h = css `
     :host {
         align-self: center;
         width: 100%;
@@ -76870,8 +76923,8 @@ focus outline in that case.
   ], TableColumnMenuButtonCellView.prototype, "showMenuButton", null);
   const menuButtonCellView = TableColumnMenuButtonCellView.compose({
       baseName: 'table-column-menu-button-cell-view',
-      template: template$d,
-      styles: styles$e
+      template: template$g,
+      styles: styles$h
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(menuButtonCellView());
   const tableColumnMenuButtonCellViewTag = 'nimble-table-column-menu-button-cell-view';
@@ -76926,8 +76979,8 @@ focus outline in that case.
   ], TableColumnMenuButton.prototype, "menuSlot", void 0);
   const nimbleTableColumnMenuButton = TableColumnMenuButton.compose({
       baseName: 'table-column-menu-button',
-      template: template$e,
-      styles: styles$l
+      template: template$h,
+      styles: styles$o
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -76935,7 +76988,7 @@ focus outline in that case.
 
   // Avoiding a wrapping <template> and be careful about starting and ending whitespace
   // so the template can be composed into other column header templates
-  const template$c = html `<span
+  const template$f = html `<span
     ${overflow('hasOverflow')}
     class="header-content"
     title=${x => (x.hasOverflow && x.headerTextContent ? x.headerTextContent : null)}
@@ -76954,8 +77007,8 @@ focus outline in that case.
   }
   const tableColumnNumberTextGroupHeaderView = TableColumnNumberTextGroupHeaderView.compose({
       baseName: 'table-column-number-text-group-header-view',
-      template: template$j,
-      styles: styles$j
+      template: template$m,
+      styles: styles$m
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -76976,8 +77029,8 @@ focus outline in that case.
   }
   const numberTextCellView = TableColumnNumberTextCellView.compose({
       baseName: 'table-column-number-text-cell-view',
-      template: template$i,
-      styles: styles$i
+      template: template$l,
+      styles: styles$l
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(numberTextCellView());
   const tableColumnNumberTextCellViewTag = 'nimble-table-column-number-text-cell-view';
@@ -77517,8 +77570,8 @@ focus outline in that case.
   ], TableColumnNumberText.prototype, "unit", void 0);
   const nimbleTableColumnNumberText = TableColumnNumberText.compose({
       baseName: 'table-column-number-text',
-      template: template$c,
-      styles: styles$l
+      template: template$f,
+      styles: styles$o
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -77536,8 +77589,8 @@ focus outline in that case.
   }
   const textCellView = TableColumnTextCellView.compose({
       baseName: 'table-column-text-cell-view',
-      template: template$i,
-      styles: styles$i
+      template: template$l,
+      styles: styles$l
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(textCellView());
   const tableColumnTextCellViewTag = 'nimble-table-column-text-cell-view';
@@ -77591,15 +77644,15 @@ focus outline in that case.
   }
   const nimbleTableColumnText = TableColumnText.compose({
       baseName: 'table-column-text',
-      template: template$l,
-      styles: styles$l
+      template: template$o,
+      styles: styles$o
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleTableColumnText());
 
-  const styles$d = css `
-    ${styles$10}
+  const styles$g = css `
+    ${styles$13}
 
     .tabpanel {
         overflow: auto;
@@ -77680,12 +77733,12 @@ focus outline in that case.
   const nimbleTabs = Tabs.compose({
       baseName: 'tabs',
       baseClass: Tabs$1,
-      template: template$M,
-      styles: styles$d
+      template: template$P,
+      styles: styles$g
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabs());
 
-  const styles$c = css `
+  const styles$f = css `
     ${display$2('flex')}
 
     :host {
@@ -77717,7 +77770,7 @@ focus outline in that case.
     }
 `;
 
-  const template$b = (context, definition) => html `
+  const template$e = (context, definition) => html `
     <template slot="end">
         ${when(x => x.defaultSlottedElements.length > 0, html `
             <div class="separator"></div>
@@ -77749,8 +77802,8 @@ focus outline in that case.
   ], TabsToolbar.prototype, "defaultSlottedElements", void 0);
   const nimbleTabsToolbar = TabsToolbar.compose({
       baseName: 'tabs-toolbar',
-      template: template$b,
-      styles: styles$c
+      template: template$e,
+      styles: styles$f
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabsToolbar());
   applyMixins(TabsToolbar, StartEnd);
@@ -77760,10 +77813,10 @@ focus outline in that case.
       block: 'block'
   };
 
-  const styles$b = css `
+  const styles$e = css `
     ${display$2('inline-flex')}
-    ${styles$S}
-    ${styles$O}
+    ${styles$V}
+    ${styles$R}
 
     :host {
         font: ${bodyFont};
@@ -77955,7 +78008,7 @@ focus outline in that case.
         <slot ${slotted('defaultSlottedNodes')}></slot>
     </label>
 `);
-  const template$a = () => html `
+  const template$d = () => html `
     ${labelTemplate$1}
     <div class="container">
         <textarea
@@ -78103,8 +78156,8 @@ focus outline in that case.
   const nimbleTextArea = TextArea.compose({
       baseName: 'text-area',
       baseClass: TextArea$1,
-      template: template$a,
-      styles: styles$b,
+      template: template$d,
+      styles: styles$e,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -78121,10 +78174,10 @@ focus outline in that case.
       frameless: 'frameless'
   };
 
-  const styles$a = css `
+  const styles$d = css `
     ${display$2('inline-block')}
-    ${styles$S}
-    ${styles$O}
+    ${styles$V}
+    ${styles$R}
 
     :host {
         font: ${bodyFont};
@@ -78398,7 +78451,7 @@ focus outline in that case.
    * The template for the {@link @ni/fast-foundation#(TextField:class)} component.
    * @public
    */
-  const template$9 = (context, definition) => html `
+  const template$c = (context, definition) => html `
     <template
         class="
             ${x => (x.readOnly ? 'readonly' : '')}
@@ -78483,8 +78536,8 @@ focus outline in that case.
   const nimbleTextField = TextField.compose({
       baseName: 'text-field',
       baseClass: TextField$1,
-      template: template$9,
-      styles: styles$a,
+      template: template$c,
+      styles: styles$d,
       shadowOptions: {
           delegatesFocus: true
       },
@@ -78501,7 +78554,7 @@ focus outline in that case.
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTextField());
 
-  const styles$9 = css `
+  const styles$c = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -78587,7 +78640,7 @@ focus outline in that case.
             }
         `));
 
-  const template$8 = html `
+  const template$b = html `
             ${when(x => x.tooltipVisible, html `
             <${anchoredRegionTag}
                 class="anchored-region"
@@ -78639,8 +78692,8 @@ focus outline in that case.
   const nimbleTooltip = Tooltip.compose({
       baseName: 'tooltip',
       baseClass: Tooltip$1,
-      template: template$8,
-      styles: styles$9
+      template: template$b,
+      styles: styles$c
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTooltip());
 
@@ -78728,7 +78781,7 @@ focus outline in that case.
       }
   }
 
-  const styles$8 = css `
+  const styles$b = css `
     ${display$2('block')}
 
     :host {
@@ -78945,12 +78998,12 @@ focus outline in that case.
       baseName: 'tree-item',
       baseClass: TreeItem$1,
       template: treeItemTemplate,
-      styles: styles$8,
+      styles: styles$b,
       expandCollapseGlyph: arrowExpanderUp16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTreeItem());
 
-  const styles$7 = css `
+  const styles$a = css `
     ${display$2('flex')}
 
     :host {
@@ -78964,7 +79017,7 @@ focus outline in that case.
     }
 `;
 
-  const template$7 = html `
+  const template$a = html `
     <template
         role="tree"
         ${ref('treeView')}
@@ -79060,8 +79113,8 @@ focus outline in that case.
   const nimbleTreeView = TreeView.compose({
       baseName: 'tree-view',
       baseClass: TreeView$1,
-      template: template$7,
-      styles: styles$7
+      template: template$a,
+      styles: styles$a
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTreeView());
 
@@ -79177,9 +79230,9 @@ focus outline in that case.
   }
   const unitScaleByte = new UnitScaleByte();
 
-  const template$6 = html `<template slot="unit"></template>`;
+  const template$9 = html `<template slot="unit"></template>`;
 
-  const styles$6 = css `
+  const styles$9 = css `
     ${display$2('none')}
 `;
 
@@ -79207,8 +79260,8 @@ focus outline in that case.
   ], UnitByte.prototype, "binary", void 0);
   const nimbleUnitByte = UnitByte.compose({
       baseName: 'unit-byte',
-      template: template$6,
-      styles: styles$6
+      template: template$9,
+      styles: styles$9
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleUnitByte());
 
@@ -79260,8 +79313,8 @@ focus outline in that case.
   }
   const nimbleUnitVolt = UnitVolt.compose({
       baseName: 'unit-volt',
-      template: template$6,
-      styles: styles$6
+      template: template$9,
+      styles: styles$9
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleUnitVolt());
 
@@ -93575,7 +93628,7 @@ focus outline in that case.
       return new Table(reader.readAll());
   }
 
-  const template$5 = html `
+  const template$8 = html `
     <div class="wafer-map-container">
         <svg class="svg-root">
             <g ${ref('zoomContainer')} transform=${x => x.transform.toString()}>
@@ -93608,7 +93661,7 @@ focus outline in that case.
     </div>
 `;
 
-  const styles$5 = css `
+  const styles$8 = css `
     ${display$2('inline-block')}
 
     :host {
@@ -96634,8 +96687,8 @@ focus outline in that case.
   ], WaferMap.prototype, "colorScale", void 0);
   const nimbleWaferMap = WaferMap.compose({
       baseName: 'wafer-map',
-      template: template$5,
-      styles: styles$5
+      template: template$8,
+      styles: styles$8
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleWaferMap());
 
@@ -96647,7 +96700,7 @@ focus outline in that case.
    */
   const display$1 = (displayValue) => `${display$3(displayValue)}:host{box-sizing:border-box;}*{box-sizing:border-box;}:host::before,:host::after,::before,::after{box-sizing:border-box;}`;
 
-  const styles$4 = css `
+  const styles$7 = css `
     ${display$1('flex')}
 
     :host {
@@ -96687,7 +96740,7 @@ focus outline in that case.
     }
 `;
 
-  const template$4 = html `
+  const template$7 = html `
 <div class="messages"><slot></slot></div>
 <div class="input ${x => (x.inputEmpty ? 'input-empty' : '')}">
     <slot name="input" ${slotted({ property: 'slottedInputElements' })}>
@@ -96727,14 +96780,14 @@ focus outline in that case.
   ], ChatConversation.prototype, "slottedInputElements", void 0);
   const sprightChatConversation = ChatConversation.compose({
       baseName: 'chat-conversation',
-      template: template$4,
-      styles: styles$4
+      template: template$7,
+      styles: styles$7
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightChatConversation());
 
-  const styles$3 = css `
+  const styles$6 = css `
     ${display$1('flex')}
 
     :host {
@@ -96810,7 +96863,7 @@ focus outline in that case.
     }
 `;
 
-  const template$3 = html `
+  const template$6 = html `
 <div class="container">
     <textarea
         ${ref('textArea')}
@@ -96926,8 +96979,8 @@ focus outline in that case.
   ], ChatInput.prototype, "disableSendButton", void 0);
   const sprightChatInput = ChatInput.compose({
       baseName: 'chat-input',
-      template: template$3,
-      styles: styles$3,
+      template: template$6,
+      styles: styles$6,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -96937,6 +96990,7 @@ focus outline in that case.
   /**
    * A message type in a chat conversation.
    * @public
+   * @deprecated Use specific message component types instead
    */
   const ChatMessageType = {
       system: undefined,
@@ -96944,12 +96998,12 @@ focus outline in that case.
       inbound: 'inbound'
   };
 
-  const styles$2 = css `
+  const styles$5 = css `
     ${display$1('flex')}
 
     :host {
-        min-width: 16px;
-        min-height: 16px;
+        min-width: ${standardPadding};
+        min-height: ${standardPadding};
 
         flex-direction: row;
         justify-content: center;
@@ -97018,7 +97072,7 @@ focus outline in that case.
     }
 `;
 
-  const template$2 = (context, definition) => html `
+  const template$5 = (context, definition) => html `
     <div class="container">
         ${startSlotTemplate(context, definition)}
         <section class="message-content">
@@ -97036,6 +97090,7 @@ focus outline in that case.
 
   /**
    * A Spright component for displaying a chat message
+   * @deprecated Use specific message component types instead
    */
   class ChatMessage extends FoundationElement {
       constructor() {
@@ -97066,10 +97121,212 @@ focus outline in that case.
   applyMixins(ChatMessage, StartEnd);
   const sprightChatMessage = ChatMessage.compose({
       baseName: 'chat-message',
+      template: template$5,
+      styles: styles$5
+  });
+  DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessage());
+
+  const styles$4 = css `
+    ${display$1('flex')}
+
+    :host {
+        min-width: ${standardPadding};
+        min-height: ${standardPadding};
+
+        flex-direction: row;
+        justify-content: flex-start;
+        flex-shrink: 0;
+        font: ${bodyFont};
+        color: ${bodyFontColor};
+    }
+
+    .container {
+        display: flex;
+        flex-direction: column;
+        max-width: calc(90%);
+    }
+
+    [part='start'] {
+        display: none;
+    }
+
+    .message-content {
+        width: fit-content;
+        height: fit-content;
+        overflow-x: auto;
+    }
+
+    .footer-actions {
+        display: none;
+    }
+
+    :host .footer-actions.has-content {
+        display: flex;
+        column-gap: ${standardPadding};
+        margin-top: ${mediumPadding};
+    }
+
+    .footer-actions ::slotted(${buttonTag}),
+    .footer-actions ::slotted(${toggleButtonTag}),
+    .footer-actions ::slotted(${anchorButtonTag}),
+    .footer-actions ::slotted(${menuButtonTag}) {
+        height: ${controlSlimHeight};
+    }
+
+    .end {
+        display: none;
+    }
+
+    :host .end {
+        display: flex;
+        column-gap: ${standardPadding};
+        margin-top: ${largePadding};
+    }
+`;
+
+  const template$4 = (context, definition) => html `
+    <div class="container">
+        ${startSlotTemplate(context, definition)}
+        <section class="message-content">
+            <slot></slot>
+        </section>
+        <section class="footer-actions ${x => (x.footerActionsIsEmpty ? '' : 'has-content')}">
+           <slot 
+                name="footer-actions"
+                ${slotted({ property: 'slottedFooterActionsElements' })}
+           ></slot>
+        </section>
+        ${endSlotTemplate(context, definition)}
+    </div>
+`;
+
+  /**
+   * A Spright component for displaying a chat message
+   */
+  class ChatMessageInbound extends FoundationElement {
+      constructor() {
+          super(...arguments);
+          /** @internal */
+          this.footerActionsIsEmpty = true;
+      }
+      slottedFooterActionsElementsChanged(_prev, next) {
+          this.footerActionsIsEmpty = !next?.length;
+      }
+  }
+  __decorate([
+      observable
+  ], ChatMessageInbound.prototype, "footerActionsIsEmpty", void 0);
+  __decorate([
+      observable
+  ], ChatMessageInbound.prototype, "slottedFooterActionsElements", void 0);
+  applyMixins(ChatMessageInbound, StartEnd);
+  const sprightChatMessageInbound = ChatMessageInbound.compose({
+      baseName: 'chat-message-inbound',
+      template: template$4,
+      styles: styles$4
+  });
+  DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessageInbound());
+
+  const styles$3 = css `
+    ${display$1('flex')}
+
+    :host {
+        min-width: ${standardPadding};
+        min-height: ${standardPadding};
+
+        flex-direction: row;
+        justify-content: flex-end;
+        flex-shrink: 0;
+        font: ${bodyFont};
+        color: ${bodyFontColor};
+    }
+
+    .container {
+        display: flex;
+        flex-direction: column;
+        max-width: calc(90%);
+    }
+
+    .message-content {
+        width: fit-content;
+        height: fit-content;
+        overflow-x: auto;
+    }
+
+    :host .message-content {
+        background: ${fillSelectedColor};
+        border: ${borderWidth} solid ${borderHoverColor};
+        border-radius: ${mediumPadding} ${mediumPadding} 0px ${mediumPadding};
+        padding: ${mediumPadding};
+    }
+`;
+
+  const template$3 = () => html `
+    <div class="container">
+        <section class="message-content">
+            <slot></slot>
+        </section>
+    </div>
+`;
+
+  /**
+   * A Spright component for displaying an outbound chat message
+   */
+  class ChatMessageOutbound extends FoundationElement {
+  }
+  const sprightChatMessageOutbound = ChatMessageOutbound.compose({
+      baseName: 'chat-message-outbound',
+      template: template$3,
+      styles: styles$3
+  });
+  DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessageOutbound());
+
+  const styles$2 = css `
+    ${display$1('flex')}
+
+    :host {
+        min-width: ${standardPadding};
+        min-height: ${standardPadding};
+
+        flex-direction: row;
+        justify-content: center;
+        flex-shrink: 0;
+        font: ${bodyFont};
+        color: ${bodyFontColor};
+    }
+
+    .container {
+        display: flex;
+        flex-direction: column;
+        max-width: calc(90%);
+    }
+
+    .message-content {
+        width: fit-content;
+        height: fit-content;
+        overflow-x: auto;
+    }
+`;
+
+  const template$2 = () => html `
+    <div class="container">
+        <section class="message-content">
+            <slot></slot>
+        </section>
+    </div>
+`;
+
+  /**
+   * A Spright component for displaying an system chat message
+   */
+  class ChatMessageSystem extends FoundationElement {
+  }
+  const sprightChatMessageSystem = ChatMessageSystem.compose({
+      baseName: 'chat-message-system',
       template: template$2,
       styles: styles$2
   });
-  DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessage());
+  DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessageSystem());
 
   const styles$1 = css `
     ${display$1('inline-block')}