@ni/ok-components 1.3.2 → 1.3.4

package/dist/all-components-bundle.js

@@ -14899,7 +14899,7 @@
   const prefix = 'ni-nimble';
   const styleNameFromTokenName = (tokenName) => `${prefix}-${tokenName}`;
 
-  const template$1a = html `<slot></slot>`;
+  const template$1h = html `<slot></slot>`;
 
   const styles$1x = css `
     ${display$2('contents')}
@@ -15026,7 +15026,7 @@
   const nimbleDesignSystemProvider = ThemeProvider.compose({
       baseName: 'theme-provider',
       styles: styles$1x,
-      template: template$1a
+      template: template$1h
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -16748,7 +16748,7 @@
     }
 `;
 
-  const template$19 = (_context, definition) => html `${
+  const template$1g = (_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
@@ -16851,7 +16851,7 @@
   const nimbleAnchor = Anchor.compose({
       baseName: 'anchor',
       baseClass: Anchor$1,
-      template: template$19,
+      template: template$1g,
       styles: styles$1w,
       shadowOptions: {
           delegatesFocus: true
@@ -17266,7 +17266,7 @@
     }
 `;
 
-  const template$18 = (context, definition) => html `
+  const template$1f = (context, definition) => html `
     <a
         class="control"
         part="control"
@@ -17348,7 +17348,7 @@
   ], AnchorButton.prototype, "disabled", void 0);
   const nimbleAnchorButton = AnchorButton.compose({
       baseName: 'anchor-button',
-      template: template$18,
+      template: template$1f,
       styles: styles$1u,
       shadowOptions: {
           delegatesFocus: true
@@ -17440,7 +17440,7 @@
     }
 `;
 
-  const template$17 = (context, definition) => html `
+  const template$1e = (context, definition) => html `
     <template
         role="menuitem"
         class="${x => (typeof x.startColumnCount === 'number'
@@ -17541,7 +17541,7 @@
   // 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$17,
+      template: template$1e,
       styles: styles$1t,
       shadowOptions: {
           delegatesFocus: true
@@ -18379,7 +18379,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
   };
   const arrowRightThin16X16 = {
       name: 'arrow_right_thin_16_x_16',
-      data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m7.831 4.386-.706 1.127 3.128 1.837H2v1.3h8.365L7.49 10.528l.768 1.085L13.875 8z" class="cls-1"/></svg>`,
+      data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m7.97 4.37-.68 1.12 3.09 1.86H2v1.3h8.38l-3.09 1.86.68 1.12L14 8z" class="cls-1"/></svg>`,
   };
   const arrowRightToLine16X16 = {
       name: 'arrow_right_to_line_16_x_16',
@@ -19263,7 +19263,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
   };
 
   // Avoiding any whitespace in the template because this is an inline element
-  const template$16 = html `<div
+  const template$1d = html `<div
     class="icon"
     aria-hidden="true"
     :innerHTML=${x => x.icon.data}
@@ -19332,7 +19332,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
   const registerIconSvg = (baseName, iconClass) => {
       const composedIcon = iconClass.compose({
           baseName,
-          template: template$16,
+          template: template$1d,
           styles: styles$1p
       });
       DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
@@ -19457,7 +19457,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
    */
   const StepperOrientation = Orientation;
 
-  const template$15 = (context, definition) => html `
+  const template$1c = (context, definition) => html `
     <template slot="step">
         <li class="
             container
@@ -19604,7 +19604,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
   ], AnchorStep.prototype, "tabIndex", void 0);
   const nimbleAnchorStep = AnchorStep.compose({
       baseName: 'anchor-step',
-      template: template$15,
+      template: template$1c,
       styles: styles$1q,
       shadowOptions: {
           delegatesFocus: true
@@ -19729,7 +19729,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
     }
 `;
 
-  const template$14 = (context, definition) => html `
+  const template$1b = (context, definition) => html `
     <template slot="anchortab" role="tab" aria-disabled="${x => x.disabled}">
         <a
             download="${x => x.download}"
@@ -19781,7 +19781,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
   // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
   const nimbleAnchorTab = AnchorTab.compose({
       baseName: 'anchor-tab',
-      template: template$14,
+      template: template$1b,
       styles: styles$1o,
       shadowOptions: {
           delegatesFocus: true
@@ -19834,7 +19834,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
     ${buttonAppearanceVariantStyles}
 `;
 
-  const template$13 = (context, definition) => html `
+  const template$1a = (context, definition) => html `
     <button
         class="control"
         part="control"
@@ -19925,7 +19925,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
   const nimbleButton = Button.compose({
       baseName: 'button',
       baseClass: Button$1,
-      template: template$13,
+      template: template$1a,
       styles: styles$1m,
       shadowOptions: {
           delegatesFocus: true
@@ -19960,7 +19960,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
   registerIconSvg('icon-arrow-expander-right', IconArrowExpanderRight);
   const iconArrowExpanderRightTag = 'nimble-icon-arrow-expander-right';
 
-  const template$12 = (context, definition) => html `
+  const template$19 = (context, definition) => html `
     <div
         class="tab-bar"
     >
@@ -20261,7 +20261,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
   applyMixins(AnchorTabs, StartEnd);
   const nimbleAnchorTabs = AnchorTabs.compose({
       baseName: 'anchor-tabs',
-      template: template$12,
+      template: template$19,
       styles: styles$1n,
       shadowOptions: {
           delegatesFocus: false
@@ -20374,7 +20374,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
     }
 `;
 
-  const template$11 = (context, definition) => html `
+  const template$18 = (context, definition) => html `
     <template
         role="treeitem"
         slot="${x => (x.isNestedItem() ? 'item' : null)}"
@@ -20511,7 +20511,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
   // 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$11,
+      template: template$18,
       styles: styles$1l,
       shadowOptions: {
           delegatesFocus: true
@@ -20718,7 +20718,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
       information: 'information'
   };
 
-  const template$10 = html `
+  const template$17 = html `
     <${themeProviderTag} theme="${Theme.color}">
         <div class="container"
             role="status"
@@ -20836,7 +20836,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
   applyMixins(Banner, ARIAGlobalStatesAndProperties);
   const nimbleBanner = Banner.compose({
       baseName: 'banner',
-      template: template$10,
+      template: template$17,
       styles: styles$1j
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBanner());
@@ -21114,7 +21114,7 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const template$$ = html `
+  const template$16 = html `
     <section aria-labelledby="title-slot">
         <span id="title-slot"><slot name="title"></slot></span>
         <slot></slot>
@@ -21129,11 +21129,10 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleCard = Card.compose({
       baseName: 'card',
       baseClass: Card$1,
-      template: template$$,
+      template: template$16,
       styles: styles$1g
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCard());
-  const cardTag = 'nimble-card';
 
   const styles$1f = css `
     ${display$2('inline-flex')}
@@ -21477,7 +21476,7 @@ so this becomes the fallback color for the slot */ ''}
     </div>
 `;
 
-  const template$_ = (_context, definition) => html `
+  const template$15 = (_context, definition) => html `
     <template
         role="checkbox"
         aria-checked="${x => x.checked}"
@@ -21574,7 +21573,7 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleCheckbox = Checkbox.compose({
       baseName: 'checkbox',
       baseClass: Checkbox$1,
-      template: template$_,
+      template: template$15,
       styles: styles$1d,
       checkedIndicator: check16X16.data,
       indeterminateIndicator: minus16X16.data
@@ -21648,7 +21647,7 @@ so this becomes the fallback color for the slot */ ''}
             }
         `));
 
-  const template$Z = (context, definition) => html `
+  const template$14 = (context, definition) => html `
     ${startSlotTemplate(context, definition)}
     <span
         class="content"
@@ -21734,7 +21733,7 @@ so this becomes the fallback color for the slot */ ''}
   applyMixins(Chip, StartEnd);
   const nimbleChip = Chip.compose({
       baseName: 'chip',
-      template: template$Z,
+      template: template$14,
       styles: styles$1c,
       shadowOptions: {
           delegatesFocus: true
@@ -21791,7 +21790,7 @@ so this becomes the fallback color for the slot */ ''}
             }
         `));
 
-  const template$Y = (context, definition) => html `
+  const template$13 = (context, definition) => html `
     <div
         role="button"
         part="control"
@@ -21886,7 +21885,7 @@ so this becomes the fallback color for the slot */ ''}
   applyMixins(ToggleButton, StartEnd, DelegatesARIAButton);
   const nimbleToggleButton = ToggleButton.compose({
       baseName: 'toggle-button',
-      template: template$Y,
+      template: template$13,
       styles: styles$1b,
       shadowOptions: {
           delegatesFocus: true
@@ -22358,7 +22357,7 @@ so this becomes the fallback color for the slot */ ''}
         <slot></slot>
     </label>
 `);
-  const template$X = (context, definition) => html `
+  const template$12 = (context, definition) => html `
     <template
         aria-disabled="${x => x.ariaDisabled}"
         autocomplete="${x => x.autocomplete}"
@@ -23133,7 +23132,7 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleCombobox = Combobox.compose({
       baseName: 'combobox',
       baseClass: FormAssociatedCombobox,
-      template: template$X,
+      template: template$12,
       styles: styles$18,
       shadowOptions: {
           delegatesFocus: true
@@ -23271,7 +23270,7 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const template$W = html `
+  const template$11 = html `
     <template>
         <dialog
             ${ref('dialogElement')}
@@ -23419,7 +23418,7 @@ so this becomes the fallback color for the slot */ ''}
   applyMixins(Dialog, ARIAGlobalStatesAndProperties);
   const nimbleDialog = Dialog.compose({
       baseName: 'dialog',
-      template: template$W,
+      template: template$11,
       styles: styles$17,
       baseClass: Dialog
   });
@@ -23568,7 +23567,7 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const template$V = html `
+  const template$10 = html `
     <dialog
         ${ref('dialog')}
         aria-label="${x => x.ariaLabel}"
@@ -23710,7 +23709,7 @@ so this becomes the fallback color for the slot */ ''}
   applyMixins(Drawer, ARIAGlobalStatesAndProperties);
   const nimbleDrawer = Drawer.compose({
       baseName: 'drawer',
-      template: template$V,
+      template: template$10,
       styles: styles$16
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDrawer());
@@ -26831,7 +26830,7 @@ so this becomes the fallback color for the slot */ ''}
    * The template for the {@link @ni/fast-foundation#(ListboxOption:class)} component.
    * @public
    */
-  const template$U = (context, definition) => html `
+  const template$$ = (context, definition) => html `
     <template
         aria-checked="${x => x.ariaChecked}"
         aria-disabled="${x => x.ariaDisabled}"
@@ -26933,7 +26932,7 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleListOption = ListOption.compose({
       baseName: 'list-option',
       baseClass: ListboxOption,
-      template: template$U,
+      template: template$$,
       styles: styles$14
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListOption());
@@ -27001,7 +27000,7 @@ so this becomes the fallback color for the slot */ ''}
   const isListOption$1 = (n) => {
       return n instanceof ListOption;
   };
-  const template$T = html `
+  const template$_ = html `
 <template
     role="group"
     aria-label="${x => x.labelContent}"
@@ -27143,7 +27142,7 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleListOptionGroup = ListOptionGroup.compose({
       baseName: 'list-option-group',
       baseClass: FoundationElement,
-      template: template$T,
+      template: template$_,
       styles: styles$13
   });
   DesignSystem.getOrCreate()
@@ -27171,7 +27170,7 @@ so this becomes the fallback color for the slot */ ''}
       attr()
   ], Mapping$1.prototype, "key", void 0);
 
-  const template$S = html `<template slot="mapping"></template>`;
+  const template$Z = html `<template slot="mapping"></template>`;
 
   const styles$12 = css `
     ${display$2('none')}
@@ -27189,7 +27188,7 @@ so this becomes the fallback color for the slot */ ''}
   ], MappingEmpty.prototype, "text", void 0);
   const emptyMapping = MappingEmpty.compose({
       baseName: 'mapping-empty',
-      template: template$S,
+      template: template$Z,
       styles: styles$12
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(emptyMapping());
@@ -27260,7 +27259,7 @@ so this becomes the fallback color for the slot */ ''}
   ], MappingIcon.prototype, "resolvedIcon", void 0);
   const iconMapping = MappingIcon.compose({
       baseName: 'mapping-icon',
-      template: template$S,
+      template: template$Z,
       styles: styles$12
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(iconMapping());
@@ -27284,7 +27283,7 @@ so this becomes the fallback color for the slot */ ''}
   ], MappingSpinner.prototype, "textHidden", void 0);
   const spinnerMapping = MappingSpinner.compose({
       baseName: 'mapping-spinner',
-      template: template$S,
+      template: template$Z,
       styles: styles$12
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(spinnerMapping());
@@ -27301,7 +27300,7 @@ so this becomes the fallback color for the slot */ ''}
   ], MappingText.prototype, "text", void 0);
   const textMapping = MappingText.compose({
       baseName: 'mapping-text',
-      template: template$S,
+      template: template$Z,
       styles: styles$12
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(textMapping());
@@ -27604,7 +27603,7 @@ so this becomes the fallback color for the slot */ ''}
       observable
   ], Menu$1.prototype, "itemIcons", void 0);
 
-  const template$R = () => html `
+  const template$Y = () => html `
     <template
         slot="${x => {
     if (x.slot) {
@@ -27692,7 +27691,7 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleMenu = Menu.compose({
       baseName: 'menu',
       baseClass: Menu$1,
-      template: template$R,
+      template: template$Y,
       styles: styles$11
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenu());
@@ -27727,7 +27726,7 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const template$Q = html `
+  const template$X = html `
     <template
         ?open="${x => x.open}"
         @focusout="${(x, c) => x.focusoutHandler(c.event)}"
@@ -27977,7 +27976,7 @@ so this becomes the fallback color for the slot */ ''}
   ], MenuButton.prototype, "slottedMenus", void 0);
   const nimbleMenuButton = MenuButton.compose({
       baseName: 'menu-button',
-      template: template$Q,
+      template: template$X,
       styles: styles$10,
       shadowOptions: {
           delegatesFocus: true
@@ -28325,7 +28324,7 @@ so this becomes the fallback color for the slot */ ''}
    * The template for the {@link @ni/fast-foundation#(NumberField:class)} component.
    * @public
    */
-  const template$P = (context, definition) => html `
+  const template$W = (context, definition) => html `
     <template class="${x => (x.readOnly ? 'readonly' : '')}">
         ${labelTemplate$4}
         <div class="root" part="root">
@@ -28479,7 +28478,7 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleNumberField = NumberField.compose({
       baseName: 'number-field',
       baseClass: NumberField$1,
-      template: template$P,
+      template: template$W,
       styles: styles$_,
       shadowOptions: {
           delegatesFocus: true
@@ -28670,7 +28669,7 @@ so this becomes the fallback color for the slot */ ''}
 `;
 
   const labelTemplate$3 = createRequiredVisibleLabelTemplate(html `<slot name="label"></slot>`);
-  const template$O = html `
+  const template$V = html `
     <template
         role="radiogroup"
         aria-disabled="${x => x.disabled}"
@@ -28710,7 +28709,7 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleRadioGroup = RadioGroup.compose({
       baseName: 'radio-group',
       baseClass: RadioGroup$1,
-      template: template$O,
+      template: template$V,
       styles: styles$Y,
       shadowOptions: {
           delegatesFocus: true
@@ -48123,7 +48122,7 @@ ${indentedChild}`;
     }
 `;
 
-  const template$N = html `
+  const template$U = html `
     <template>
         <${anchoredRegionTag}
             ${ref('region')}
@@ -48411,7 +48410,7 @@ ${indentedChild}`;
   ], RichTextMentionListbox.prototype, "anchorElement", void 0);
   const nimbleRichTextMentionListbox = RichTextMentionListbox.compose({
       baseName: 'rich-text-mention-listbox',
-      template: template$N,
+      template: template$U,
       styles: styles$W
   });
   DesignSystem.getOrCreate()
@@ -48419,7 +48418,7 @@ ${indentedChild}`;
       .register(nimbleRichTextMentionListbox());
   const richTextMentionListboxTag = 'nimble-rich-text-mention-listbox';
 
-  const template$M = html `
+  const template$T = html `
     <template
         ${children$1({ property: 'childItems', filter: elements() })}
         @focusout="${x => x.focusoutHandler()}"
@@ -65005,7 +65004,7 @@ ${indentedChild}`;
   applyMixins(RichTextEditor, ARIAGlobalStatesAndProperties);
   const nimbleRichTextEditor = RichTextEditor.compose({
       baseName: 'rich-text-editor',
-      template: template$M,
+      template: template$T,
       styles: styles$V,
       shadowOptions: {
           delegatesFocus: true
@@ -65015,7 +65014,7 @@ ${indentedChild}`;
       .withPrefix('nimble')
       .register(nimbleRichTextEditor());
 
-  const template$L = html `
+  const template$S = html `
     <template ${children$1({ property: 'childItems', filter: elements() })}>
         <div ${ref('viewer')} class="viewer"></div>
     </template>
@@ -65134,7 +65133,7 @@ ${indentedChild}`;
   ], RichTextViewer.prototype, "markdown", void 0);
   const nimbleRichTextViewer = RichTextViewer.compose({
       baseName: 'rich-text-viewer',
-      template: template$L,
+      template: template$S,
       styles: styles$U
   });
   DesignSystem.getOrCreate()
@@ -65477,7 +65476,7 @@ ${indentedChild}`;
             }
         `));
 
-  const template$K = html `
+  const template$R = html `
     <template role="progressbar">
         ${''
 /**
@@ -65524,7 +65523,7 @@ ${indentedChild}`;
   ], Spinner.prototype, "appearance", void 0);
   const nimbleSpinner = Spinner.compose({
       baseName: 'spinner',
-      template: template$K,
+      template: template$R,
       styles: styles$S
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSpinner());
@@ -65541,7 +65540,7 @@ ${indentedChild}`;
         <slot ${ref('labelSlot')}></slot>
     </label>
 `);
-  const template$J = (context, definition) => html `
+  const template$Q = (context, definition) => html `
     <template
         class="${x => [
     x.collapsible && 'collapsible',
@@ -66753,7 +66752,7 @@ ${indentedChild}`;
   const nimbleSelect = Select.compose({
       baseName: 'select',
       baseClass: Select$2,
-      template: template$J,
+      template: template$Q,
       styles: styles$T,
       indicator: arrowExpanderDown16X16.data,
       end: html `
@@ -66779,7 +66778,7 @@ ${indentedChild}`;
     }
 `;
 
-  const template$I = (context, definition) => html `
+  const template$P = (context, definition) => html `
     <template slot="step">
         <li class="
             container
@@ -66901,7 +66900,7 @@ ${indentedChild}`;
   ], Step.prototype, "tabIndex", void 0);
   const nimbleStep = Step.compose({
       baseName: 'step',
-      template: template$I,
+      template: template$P,
       styles: styles$R,
       shadowOptions: {
           delegatesFocus: true
@@ -66980,7 +66979,7 @@ ${indentedChild}`;
     }
 `;
 
-  const template$H = html `
+  const template$O = html `
     ${when(x => x.showScrollButtons, html `
         <${buttonTag}
             content-hidden
@@ -67125,7 +67124,7 @@ ${indentedChild}`;
   ], Stepper.prototype, "steps", void 0);
   const nimbleStepper = Stepper.compose({
       baseName: 'stepper',
-      template: template$H,
+      template: template$O,
       styles: styles$Q
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleStepper());
@@ -67357,7 +67356,7 @@ ${indentedChild}`;
             }
         `));
 
-  const template$G = html `
+  const template$N = html `
     <template
         role="switch"
         aria-checked="${x => x.checked}"
@@ -67401,7 +67400,7 @@ ${indentedChild}`;
   const nimbleSwitch = Switch.compose({
       baseClass: Switch$1,
       baseName: 'switch',
-      template: template$G,
+      template: template$N,
       styles: styles$P
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSwitch());
@@ -71519,7 +71518,7 @@ focus outline in that case.
     }
 `;
 
-  const template$F = html `
+  const template$M = html `
     <template role="columnheader"
         class="${x => (x.alignment === TableColumnAlignment.right ? 'right-align' : '')}"
         aria-sort="${x => x.ariaSort}"
@@ -71605,7 +71604,7 @@ focus outline in that case.
   ], TableHeader.prototype, "isGrouped", void 0);
   const nimbleTableHeader = TableHeader.compose({
       baseName: 'table-header',
-      template: template$F,
+      template: template$M,
       styles: styles$L
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableHeader());
@@ -71853,7 +71852,7 @@ focus outline in that case.
     }
 `;
 
-  const template$E = html `
+  const template$L = html `
     <template role="cell" style="--ni-private-table-cell-nesting-level: ${x => x.nestingLevel}"
         @focusin="${x => x.onCellFocusIn()}"
         @blur="${x => x.onCellBlur()}"
@@ -71950,13 +71949,13 @@ focus outline in that case.
   ], TableCell.prototype, "nestingLevel", void 0);
   const nimbleTableCell = TableCell.compose({
       baseName: 'table-cell',
-      template: template$E,
+      template: template$L,
       styles: styles$I
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableCell());
   const tableCellTag = 'nimble-table-cell';
 
-  const template$D = html `
+  const template$K = html `
     <template 
         role="row"
         aria-selected=${x => x.ariaSelected}
@@ -72351,7 +72350,7 @@ focus outline in that case.
   ], TableRow.prototype, "ariaSelected", null);
   const nimbleTableRow = TableRow.compose({
       baseName: 'table-row',
-      template: template$D,
+      template: template$K,
       styles: styles$J
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableRow());
@@ -72447,7 +72446,7 @@ focus outline in that case.
             }
         `));
 
-  const template$C = html `
+  const template$J = html `
     <template
         role="row"
         @click=${x => x.onGroupExpandToggle()}
@@ -72604,13 +72603,13 @@ focus outline in that case.
   ], TableGroupRow.prototype, "allowHover", void 0);
   const nimbleTableGroupRow = TableGroupRow.compose({
       baseName: 'table-group-row',
-      template: template$C,
+      template: template$J,
       styles: styles$H
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableGroupRow());
   const tableGroupRowTag = 'nimble-table-group-row';
 
-  const template$B = html `
+  const template$I = html `
     <template
         role="treegrid"
         ${'' /* tabindex managed dynamically by KeyboardNavigationManager */}
@@ -76933,7 +76932,7 @@ focus outline in that case.
   ], Table$1.prototype, "windowShiftKeyDown", void 0);
   const nimbleTable = Table$1.compose({
       baseName: 'table',
-      template: template$B,
+      template: template$I,
       styles: styles$M
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTable());
@@ -76950,7 +76949,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$A = html `<span
+  const template$H = html `<span
     ${overflow('hasOverflow')}
     class="header-content"
     title=${x => (x.hasOverflow && x.headerTextContent ? x.headerTextContent : null)}
@@ -77046,7 +77045,7 @@ focus outline in that case.
     }
 `;
 
-  const template$z = html `
+  const template$G = html `
     <template
         @click="${(x, c) => {
     if (typeof x.cellRecord?.href === 'string') {
@@ -77138,7 +77137,7 @@ focus outline in that case.
   ], TableColumnAnchorCellView.prototype, "showAnchor", null);
   const anchorCellView = TableColumnAnchorCellView.compose({
       baseName: 'table-column-anchor-cell-view',
-      template: template$z,
+      template: template$G,
       styles: styles$F
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(anchorCellView());
@@ -77216,7 +77215,7 @@ focus outline in that case.
       observable
   ], TableColumnTextGroupHeaderViewBase.prototype, "text", void 0);
 
-  const template$y = html `
+  const template$F = html `
     <span
         ${overflow('hasOverflow')}
         title="${x => (x.hasOverflow && x.text ? x.text : null)}"
@@ -77249,7 +77248,7 @@ focus outline in that case.
   }
   const tableColumnTextGroupHeaderView = TableColumnTextGroupHeaderView.compose({
       baseName: 'table-column-text-group-header-view',
-      template: template$y,
+      template: template$F,
       styles: styles$E
   });
   DesignSystem.getOrCreate()
@@ -77494,7 +77493,7 @@ focus outline in that case.
   ], TableColumnAnchor.prototype, "download", void 0);
   const nimbleTableColumnAnchor = TableColumnAnchor.compose({
       baseName: 'table-column-anchor',
-      template: template$A,
+      template: template$H,
       styles: styles$G
   });
   DesignSystem.getOrCreate()
@@ -77547,7 +77546,7 @@ focus outline in that case.
   }
   const tableColumnDateTextGroupHeaderView = TableColumnDateTextGroupHeaderView.compose({
       baseName: 'table-column-date-text-group-header-view',
-      template: template$y,
+      template: template$F,
       styles: styles$E
   });
   DesignSystem.getOrCreate()
@@ -77555,7 +77554,7 @@ focus outline in that case.
       .register(tableColumnDateTextGroupHeaderView());
   const tableColumnDateTextGroupHeaderViewTag = 'nimble-table-column-date-text-group-header-view';
 
-  const template$x = html `
+  const template$E = html `
     <template
         class="
             ${x => (x.alignment === TableColumnAlignment.right ? 'right-align' : '')}
@@ -77673,7 +77672,7 @@ focus outline in that case.
   }
   const dateTextCellView = TableColumnDateTextCellView.compose({
       baseName: 'table-column-date-text-cell-view',
-      template: template$x,
+      template: template$E,
       styles: styles$D
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(dateTextCellView());
@@ -77932,7 +77931,7 @@ focus outline in that case.
   ], TableColumnDateText.prototype, "customHourCycle", void 0);
   const nimbleTableColumnDateText = TableColumnDateText.compose({
       baseName: 'table-column-date-text',
-      template: template$A,
+      template: template$H,
       styles: styles$G
   });
   DesignSystem.getOrCreate()
@@ -77949,7 +77948,7 @@ focus outline in that case.
   }
   const durationTextCellView = TableColumnDurationTextCellView.compose({
       baseName: 'table-column-duration-text-cell-view',
-      template: template$x,
+      template: template$E,
       styles: styles$D
   });
   DesignSystem.getOrCreate()
@@ -78051,7 +78050,7 @@ focus outline in that case.
   }
   const tableColumnDurationTextGroupHeaderView = TableColumnDurationTextGroupHeaderView.compose({
       baseName: 'table-column-duration-text-group-header-view',
-      template: template$y,
+      template: template$F,
       styles: styles$E
   });
   DesignSystem.getOrCreate()
@@ -78104,7 +78103,7 @@ focus outline in that case.
   }
   const nimbleTableColumnDurationText = TableColumnDurationText.compose({
       baseName: 'table-column-duration-text',
-      template: template$A,
+      template: template$H,
       styles: styles$G
   });
   DesignSystem.getOrCreate()
@@ -78221,7 +78220,7 @@ focus outline in that case.
     }
 `;
 
-  const template$w = html `${template$A}<slot ${slotted('mappings')} name="mapping"></slot>`;
+  const template$D = html `${template$H}<slot ${slotted('mappings')} name="mapping"></slot>`;
 
   const enumBaseValidityFlagNames = [
       'invalidMappingKeyValueForType',
@@ -78331,7 +78330,7 @@ focus outline in that case.
     }
 `;
 
-  const template$v = html `
+  const template$C = html `
     ${when(x => x.visualizationTemplate, html `
             <span class="reserve-icon-size">
                 ${x => x.visualizationTemplate}
@@ -78475,7 +78474,7 @@ focus outline in that case.
   ], TableColumnMappingGroupHeaderView.prototype, "visualizationTemplate", void 0);
   const mappingGroupHeaderView = TableColumnMappingGroupHeaderView.compose({
       baseName: 'table-column-mapping-group-header-view',
-      template: template$v,
+      template: template$C,
       styles: styles$B
   });
   DesignSystem.getOrCreate()
@@ -78507,7 +78506,7 @@ focus outline in that case.
     }
 `;
 
-  const template$u = html `
+  const template$B = html `
     ${when(x => x.visualizationTemplate, html `
             <span class="reserve-icon-size">
                 ${x => x.visualizationTemplate}
@@ -78594,7 +78593,7 @@ focus outline in that case.
   ], TableColumnMappingCellView.prototype, "hasOverflow", void 0);
   const mappingCellView = TableColumnMappingCellView.compose({
       baseName: 'table-column-mapping-cell-view',
-      template: template$u,
+      template: template$B,
       styles: styles$A
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(mappingCellView());
@@ -78678,23 +78677,23 @@ focus outline in that case.
   ], TableColumnMapping.prototype, "widthMode", void 0);
   const nimbleTableColumnMapping = TableColumnMapping.compose({
       baseName: 'table-column-mapping',
-      template: template$w,
+      template: template$D,
       styles: styles$C
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleTableColumnMapping());
 
-  const template$t = html `
+  const template$A = html `
     <template @delegated-event="${(x, c) => x.onDelegatedEvent(c.event)}"
-        >${template$A}</template
+        >${template$H}</template
     >
 `;
 
   /** @internal */
   const cellViewMenuSlotName = 'menu-button-menu';
 
-  const template$s = html `
+  const template$z = html `
     ${when(x => x.showMenuButton, html `
         <${menuButtonTag}
             ${ref('menuButton')}
@@ -78788,7 +78787,7 @@ focus outline in that case.
   ], TableColumnMenuButtonCellView.prototype, "showMenuButton", null);
   const menuButtonCellView = TableColumnMenuButtonCellView.compose({
       baseName: 'table-column-menu-button-cell-view',
-      template: template$s,
+      template: template$z,
       styles: styles$z
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(menuButtonCellView());
@@ -78844,7 +78843,7 @@ focus outline in that case.
   ], TableColumnMenuButton.prototype, "menuSlot", void 0);
   const nimbleTableColumnMenuButton = TableColumnMenuButton.compose({
       baseName: 'table-column-menu-button',
-      template: template$t,
+      template: template$A,
       styles: styles$G
   });
   DesignSystem.getOrCreate()
@@ -78853,7 +78852,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$r = html `<span
+  const template$y = html `<span
     ${overflow('hasOverflow')}
     class="header-content"
     title=${x => (x.hasOverflow && x.headerTextContent ? x.headerTextContent : null)}
@@ -78872,7 +78871,7 @@ focus outline in that case.
   }
   const tableColumnNumberTextGroupHeaderView = TableColumnNumberTextGroupHeaderView.compose({
       baseName: 'table-column-number-text-group-header-view',
-      template: template$y,
+      template: template$F,
       styles: styles$E
   });
   DesignSystem.getOrCreate()
@@ -78894,7 +78893,7 @@ focus outline in that case.
   }
   const numberTextCellView = TableColumnNumberTextCellView.compose({
       baseName: 'table-column-number-text-cell-view',
-      template: template$x,
+      template: template$E,
       styles: styles$D
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(numberTextCellView());
@@ -79435,7 +79434,7 @@ focus outline in that case.
   ], TableColumnNumberText.prototype, "unit", void 0);
   const nimbleTableColumnNumberText = TableColumnNumberText.compose({
       baseName: 'table-column-number-text',
-      template: template$r,
+      template: template$y,
       styles: styles$G
   });
   DesignSystem.getOrCreate()
@@ -79454,7 +79453,7 @@ focus outline in that case.
   }
   const textCellView = TableColumnTextCellView.compose({
       baseName: 'table-column-text-cell-view',
-      template: template$x,
+      template: template$E,
       styles: styles$D
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(textCellView());
@@ -79509,7 +79508,7 @@ focus outline in that case.
   }
   const nimbleTableColumnText = TableColumnText.compose({
       baseName: 'table-column-text',
-      template: template$A,
+      template: template$H,
       styles: styles$G
   });
   DesignSystem.getOrCreate()
@@ -79598,7 +79597,7 @@ focus outline in that case.
   const nimbleTabs = Tabs.compose({
       baseName: 'tabs',
       baseClass: Tabs$1,
-      template: template$12,
+      template: template$19,
       styles: styles$y
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabs());
@@ -79635,7 +79634,7 @@ focus outline in that case.
     }
 `;
 
-  const template$q = (context, definition) => html `
+  const template$x = (context, definition) => html `
     <template slot="end">
         ${when(x => x.defaultSlottedElements.length > 0, html `
             <div class="separator"></div>
@@ -79667,7 +79666,7 @@ focus outline in that case.
   ], TabsToolbar.prototype, "defaultSlottedElements", void 0);
   const nimbleTabsToolbar = TabsToolbar.compose({
       baseName: 'tabs-toolbar',
-      template: template$q,
+      template: template$x,
       styles: styles$x
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabsToolbar());
@@ -79873,7 +79872,7 @@ focus outline in that case.
         <slot ${slotted('defaultSlottedNodes')}></slot>
     </label>
 `);
-  const template$p = () => html `
+  const template$w = () => html `
     ${labelTemplate$1}
     <div class="container">
         <textarea
@@ -80021,7 +80020,7 @@ focus outline in that case.
   const nimbleTextArea = TextArea.compose({
       baseName: 'text-area',
       baseClass: TextArea$1,
-      template: template$p,
+      template: template$w,
       styles: styles$w,
       shadowOptions: {
           delegatesFocus: true
@@ -80316,7 +80315,7 @@ focus outline in that case.
    * The template for the {@link @ni/fast-foundation#(TextField:class)} component.
    * @public
    */
-  const template$o = (context, definition) => html `
+  const template$v = (context, definition) => html `
     <template
         class="
             ${x => (x.readOnly ? 'readonly' : '')}
@@ -80401,7 +80400,7 @@ focus outline in that case.
   const nimbleTextField = TextField.compose({
       baseName: 'text-field',
       baseClass: TextField$1,
-      template: template$o,
+      template: template$v,
       styles: styles$v,
       shadowOptions: {
           delegatesFocus: true
@@ -80505,7 +80504,7 @@ focus outline in that case.
             }
         `));
 
-  const template$n = html `
+  const template$u = html `
             ${when(x => x.tooltipVisible, html `
             <${anchoredRegionTag}
                 class="anchored-region"
@@ -80557,7 +80556,7 @@ focus outline in that case.
   const nimbleTooltip = Tooltip.compose({
       baseName: 'tooltip',
       baseClass: Tooltip$1,
-      template: template$n,
+      template: template$u,
       styles: styles$u
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTooltip());
@@ -80883,7 +80882,7 @@ focus outline in that case.
     }
 `;
 
-  const template$m = html `
+  const template$t = html `
     <template
         role="tree"
         ${ref('treeView')}
@@ -80979,7 +80978,7 @@ focus outline in that case.
   const nimbleTreeView = TreeView.compose({
       baseName: 'tree-view',
       baseClass: TreeView$1,
-      template: template$m,
+      template: template$t,
       styles: styles$s
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTreeView());
@@ -81096,7 +81095,7 @@ focus outline in that case.
   }
   const unitScaleByte = new UnitScaleByte();
 
-  const template$l = html `<template slot="unit"></template>`;
+  const template$s = html `<template slot="unit"></template>`;
 
   const styles$r = css `
     ${display$2('none')}
@@ -81126,7 +81125,7 @@ focus outline in that case.
   ], UnitByte.prototype, "binary", void 0);
   const nimbleUnitByte = UnitByte.compose({
       baseName: 'unit-byte',
-      template: template$l,
+      template: template$s,
       styles: styles$r
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleUnitByte());
@@ -81179,7 +81178,7 @@ focus outline in that case.
   }
   const nimbleUnitVolt = UnitVolt.compose({
       baseName: 'unit-volt',
-      template: template$l,
+      template: template$s,
       styles: styles$r
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleUnitVolt());
@@ -95494,7 +95493,7 @@ focus outline in that case.
       return new Table(reader.readAll());
   }
 
-  const template$k = html `
+  const template$r = html `
     <div class="wafer-map-container">
         <svg class="svg-root">
             <g ${ref('zoomContainer')} transform=${x => x.transform.toString()}>
@@ -98552,7 +98551,7 @@ focus outline in that case.
   ], WaferMap.prototype, "colorScale", void 0);
   const nimbleWaferMap = WaferMap.compose({
       baseName: 'wafer-map',
-      template: template$k,
+      template: template$r,
       styles: styles$q
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleWaferMap());
@@ -98638,7 +98637,7 @@ focus outline in that case.
     }
 `;
 
-  const template$j = html `
+  const template$q = html `
 <div class="toolbar ${x => (x.toolbarEmpty ? 'toolbar-empty' : '')}">
     <slot name="toolbar" ${slotted({ property: 'slottedToolbarElements' })}></slot>
 </div>
@@ -98720,7 +98719,7 @@ focus outline in that case.
   ], ChatConversation.prototype, "slottedEndElements", void 0);
   const sprightChatConversation = ChatConversation.compose({
       baseName: 'chat-conversation',
-      template: template$j,
+      template: template$q,
       styles: styles$p
   });
   DesignSystem.getOrCreate()
@@ -98872,7 +98871,7 @@ focus outline in that case.
     }
 `;
 
-  const template$i = html `
+  const template$p = html `
 <div class="container">
     <section class="attachments ${x => (x.attachmentsIsEmpty ? '' : 'has-content')}">
         <slot
@@ -99124,7 +99123,7 @@ focus outline in that case.
   ], ChatInput.prototype, "slottedAttachmentsElements", void 0);
   const sprightChatInput = ChatInput.compose({
       baseName: 'chat-input',
-      template: template$i,
+      template: template$p,
       styles: styles$o,
       shadowOptions: {
           delegatesFocus: true
@@ -99217,7 +99216,7 @@ focus outline in that case.
     }
 `;
 
-  const template$h = (context, definition) => html `
+  const template$o = (context, definition) => html `
     <div class="container">
         ${startSlotTemplate(context, definition)}
         <section class="message-content">
@@ -99266,7 +99265,7 @@ focus outline in that case.
   applyMixins(ChatMessage, StartEnd);
   const sprightChatMessage = ChatMessage.compose({
       baseName: 'chat-message',
-      template: template$h,
+      template: template$o,
       styles: styles$n
   });
   DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessage());
@@ -99329,7 +99328,7 @@ focus outline in that case.
     }
 `;
 
-  const template$g = (context, definition) => html `
+  const template$n = (context, definition) => html `
     <div class="container">
         ${startSlotTemplate(context, definition)}
         <section class="message-content">
@@ -99367,7 +99366,7 @@ focus outline in that case.
   applyMixins(ChatMessageInbound, StartEnd);
   const sprightChatMessageInbound = ChatMessageInbound.compose({
       baseName: 'chat-message-inbound',
-      template: template$g,
+      template: template$n,
       styles: styles$m
   });
   DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessageInbound());
@@ -99406,7 +99405,7 @@ focus outline in that case.
     }
 `;
 
-  const template$f = () => html `
+  const template$m = () => html `
     <div class="container">
         <section class="message-content">
             <slot></slot>
@@ -99421,7 +99420,7 @@ focus outline in that case.
   }
   const sprightChatMessageOutbound = ChatMessageOutbound.compose({
       baseName: 'chat-message-outbound',
-      template: template$f,
+      template: template$m,
       styles: styles$l
   });
   DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessageOutbound());
@@ -99453,7 +99452,7 @@ focus outline in that case.
     }
 `;
 
-  const template$e = () => html `
+  const template$l = () => html `
     <div class="container">
         <section class="message-content">
             <slot></slot>
@@ -99468,7 +99467,7 @@ focus outline in that case.
   }
   const sprightChatMessageSystem = ChatMessageSystem.compose({
       baseName: 'chat-message-system',
-      template: template$e,
+      template: template$l,
       styles: styles$k
   });
   DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessageSystem());
@@ -99576,7 +99575,7 @@ focus outline in that case.
   <path class="nigel-chat-dark-0" d="M11.36,7.6l-.03.02c-1.12.61-2.04,1.53-2.65,2.65l-.02.03c-.1.18-.35.18-.45,0l-.02-.03c-.61-1.12-1.53-2.04-2.65-2.65l-.03-.02c-.18-.1-.18-.35,0-.45l.03-.02c1.12-.61,2.04-1.53,2.65-2.65l.02-.03c.1-.18.35-.18.45,0l.02.03c.61,1.12,1.53,2.04,2.65,2.65l.03.02c.18.1.18.35,0,.45Z"/>
 </svg>`;
 
-  const template$d = html `
+  const template$k = html `
     <div class="icon light-icon" aria-hidden="true" :innerHTML="${() => nigelChatLightData}"></div>
     <div class="icon dark-icon" aria-hidden="true" :innerHTML="${() => nigelChatDarkData}"></div>
 `;
@@ -99605,7 +99604,7 @@ focus outline in that case.
   }
   const sprightIconNigelChat = IconNigelChat.compose({
       baseName: 'icon-nigel-chat',
-      template: template$d,
+      template: template$k,
       styles: styles$i
   });
   DesignSystem.getOrCreate()
@@ -99613,7 +99612,7 @@ focus outline in that case.
       .register(sprightIconNigelChat());
   const iconNigelChatTag = 'spright-icon-nigel-chat';
 
-  const template$c = () => html `
+  const template$j = () => html `
     <div class="container">
         <div class="brand-icon">
             <slot name="brand-icon">
@@ -99645,11 +99644,226 @@ focus outline in that case.
   ], ChatMessageWelcome.prototype, "subtitle", void 0);
   const sprightChatMessageWelcome = ChatMessageWelcome.compose({
       baseName: 'chat-message-welcome',
-      template: template$c,
+      template: template$j,
       styles: styles$j
   });
   DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessageWelcome());
 
+  const iconData$6 = `<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <defs>
+    <style>
+      .breakpoint-conditional-0 {
+        fill: #c42126;
+      }
+    </style>
+  </defs>
+  <path class="breakpoint-conditional-0" d="M8,3c-2.76,0-5,2.24-5,5s2.24,5,5,5,5-2.24,5-5-2.24-5-5-5ZM11,9h-2v2h-2v-2h-2v-2h2v-2h2v2h2v2Z"/>
+</svg>`;
+
+  /**
+   * Spright breakpoint conditional icon.
+   */
+  class IconBreakpointConditional extends Icon {
+  }
+  const template$i = html `
+    <div class="icon" aria-hidden="true" :innerHTML="${() => iconData$6}"></div>
+`;
+  const sprightIconBreakpointConditional = IconBreakpointConditional.compose({
+      baseName: 'icon-breakpoint-conditional',
+      template: template$i,
+      styles: styles$1p
+  });
+  DesignSystem.getOrCreate()
+      .withPrefix('spright')
+      .register(sprightIconBreakpointConditional());
+
+  const iconData$5 = `<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <defs>
+    <style>
+      .breakpoint-disabled-0 {
+        fill: #161617;
+        opacity: .3;
+      }
+    </style>
+  </defs>
+  <circle class="breakpoint-disabled-0" cx="8" cy="8" r="5"/>
+</svg>`;
+
+  /**
+   * Spright breakpoint disabled icon.
+   */
+  class IconBreakpointDisabled extends Icon {
+  }
+  const template$h = html `
+    <div class="icon" aria-hidden="true" :innerHTML="${() => iconData$5}"></div>
+`;
+  const sprightIconBreakpointDisabled = IconBreakpointDisabled.compose({
+      baseName: 'icon-breakpoint-disabled',
+      template: template$h,
+      styles: styles$1p
+  });
+  DesignSystem.getOrCreate()
+      .withPrefix('spright')
+      .register(sprightIconBreakpointDisabled());
+
+  const iconData$4 = `<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <defs>
+    <style>
+      .breakpoint-enabled-0 {
+        fill: #c42126;
+      }
+    </style>
+  </defs>
+  <circle class="breakpoint-enabled-0" cx="8" cy="8" r="5"/>
+</svg>`;
+
+  /**
+   * Spright breakpoint enabled icon.
+   */
+  class IconBreakpointEnabled extends Icon {
+  }
+  const template$g = html `
+    <div class="icon" aria-hidden="true" :innerHTML="${() => iconData$4}"></div>
+`;
+  const sprightIconBreakpointEnabled = IconBreakpointEnabled.compose({
+      baseName: 'icon-breakpoint-enabled',
+      template: template$g,
+      styles: styles$1p
+  });
+  DesignSystem.getOrCreate()
+      .withPrefix('spright')
+      .register(sprightIconBreakpointEnabled());
+
+  const iconData$3 = `<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <defs>
+    <style>
+      .breakpoint-execution-pointer-0 {
+        fill: #161617;
+      }
+    </style>
+  </defs>
+  <polygon class="breakpoint-execution-pointer-0" points="7.97 4.37 7.29 5.49 9.8 7 2 7 2 9 9.8 9 7.29 10.51 7.97 11.63 14 8 7.97 4.37"/>
+</svg>`;
+
+  /**
+   * Spright breakpoint execution pointer icon.
+   */
+  class IconBreakpointExecutionPointer extends Icon {
+  }
+  const template$f = html `
+    <div class="icon" aria-hidden="true" :innerHTML="${() => iconData$3}"></div>
+`;
+  const sprightIconBreakpointExecutionPointer = IconBreakpointExecutionPointer.compose({
+      baseName: 'icon-breakpoint-execution-pointer',
+      template: template$f,
+      styles: styles$1p
+  });
+  DesignSystem.getOrCreate()
+      .withPrefix('spright')
+      .register(sprightIconBreakpointExecutionPointer());
+
+  const iconData$2 = `<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <defs>
+    <style>
+      .breakpoint-hit-disabled-0 {
+        opacity: .3;
+      }
+
+      .breakpoint-hit-disabled-0, .breakpoint-hit-disabled-1 {
+        fill: #161617;
+      }
+    </style>
+  </defs>
+  <path class="breakpoint-hit-disabled-0" d="M3.36,6.25c.71-1.89,2.5-3.25,4.64-3.25s3.98,1.4,4.67,3.33l-4.96-2.99-1.45,2.4.84.51h-3.75ZM7.71,12.66l-1.45-2.4.84-.51h-3.75c.71,1.89,2.5,3.25,4.64,3.25s3.98-1.4,4.67-3.33l-4.96,2.99Z"/>
+  <polygon class="breakpoint-hit-disabled-1" points="7.97 4.37 7.29 5.49 9.8 7 2 7 2 9 9.8 9 7.29 10.51 7.97 11.63 14 8 7.97 4.37"/>
+</svg>`;
+
+  /**
+   * Spright breakpoint hit disabled icon.
+   */
+  class IconBreakpointHitDisabled extends Icon {
+  }
+  const template$e = html `
+    <div class="icon" aria-hidden="true" :innerHTML="${() => iconData$2}"></div>
+`;
+  const sprightIconBreakpointHitDisabled = IconBreakpointHitDisabled.compose({
+      baseName: 'icon-breakpoint-hit-disabled',
+      template: template$e,
+      styles: styles$1p
+  });
+  DesignSystem.getOrCreate()
+      .withPrefix('spright')
+      .register(sprightIconBreakpointHitDisabled());
+
+  const iconData$1 = `<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <defs>
+    <style>
+      .breakpoint-hit-0 {
+        fill: #c42126;
+      }
+
+      .breakpoint-hit-1 {
+        fill: #161617;
+      }
+    </style>
+  </defs>
+  <path class="breakpoint-hit-0" d="M3.36,6.25c.71-1.89,2.5-3.25,4.64-3.25s3.98,1.4,4.67,3.33l-4.96-2.99-1.45,2.4.84.51h-3.75ZM7.71,12.66l-1.45-2.4.84-.51h-3.75c.71,1.89,2.5,3.25,4.64,3.25s3.98-1.4,4.67-3.33l-4.96,2.99Z"/>
+  <polygon class="breakpoint-hit-1" points="7.97 4.37 7.29 5.49 9.8 7 2 7 2 9 9.8 9 7.29 10.51 7.97 11.63 14 8 7.97 4.37"/>
+</svg>`;
+
+  /**
+   * Spright breakpoint hit icon.
+   */
+  class IconBreakpointHit extends Icon {
+  }
+  const template$d = html `
+    <div class="icon" aria-hidden="true" :innerHTML="${() => iconData$1}"></div>
+`;
+  const sprightIconBreakpointHit = IconBreakpointHit.compose({
+      baseName: 'icon-breakpoint-hit',
+      template: template$d,
+      styles: styles$1p
+  });
+  DesignSystem.getOrCreate()
+      .withPrefix('spright')
+      .register(sprightIconBreakpointHit());
+
+  const iconData = `<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <defs>
+    <style>
+      .breakpoint-hover-0 {
+        fill: #c42126;
+        opacity: .3;
+      }
+    </style>
+  </defs>
+  <circle class="breakpoint-hover-0" cx="8" cy="8" r="5"/>
+</svg>`;
+
+  /**
+   * Spright breakpoint hover icon.
+   */
+  class IconBreakpointHover extends Icon {
+  }
+  const template$c = html `
+    <div class="icon" aria-hidden="true" :innerHTML="${() => iconData}"></div>
+`;
+  const sprightIconBreakpointHover = IconBreakpointHover.compose({
+      baseName: 'icon-breakpoint-hover',
+      template: template$c,
+      styles: styles$1p
+  });
+  DesignSystem.getOrCreate()
+      .withPrefix('spright')
+      .register(sprightIconBreakpointHover());
+
   const styles$h = css `
     ${styles$1p}
 
@@ -99668,7 +99882,7 @@ focus outline in that case.
   }
   const sprightIconWorkItemCalendarWeek = IconWorkItemCalendarWeek.compose({
       baseName: 'icon-work-item-calendar-week',
-      template: template$16,
+      template: template$1d,
       styles: styles$h
   });
   DesignSystem.getOrCreate()
@@ -99693,7 +99907,7 @@ focus outline in that case.
   }
   const sprightIconWorkItemCalipers = IconWorkItemCalipers.compose({
       baseName: 'icon-work-item-calipers',
-      template: template$16,
+      template: template$1d,
       styles: styles$g
   });
   DesignSystem.getOrCreate()
@@ -99718,7 +99932,7 @@ focus outline in that case.
   }
   const sprightIconWorkItemForklift = IconWorkItemForklift.compose({
       baseName: 'icon-work-item-forklift',
-      template: template$16,
+      template: template$1d,
       styles: styles$f
   });
   DesignSystem.getOrCreate()
@@ -99743,7 +99957,7 @@ focus outline in that case.
   }
   const sprightIconWorkItemRectangleCheckLines = IconWorkItemRectangleCheckLines.compose({
       baseName: 'icon-work-item-rectangle-check-lines',
-      template: template$16,
+      template: template$1d,
       styles: styles$e
   });
   DesignSystem.getOrCreate()
@@ -99768,7 +99982,7 @@ focus outline in that case.
   }
   const sprightIconWorkItemUserHelmetSafety = IconWorkItemUserHelmetSafety.compose({
       baseName: 'icon-work-item-user-helmet-safety',
-      template: template$16,
+      template: template$1d,
       styles: styles$d
   });
   DesignSystem.getOrCreate()
@@ -99793,7 +100007,7 @@ focus outline in that case.
   }
   const sprightIconWorkItemWrenchHammer = IconWorkItemWrenchHammer.compose({
       baseName: 'icon-work-item-wrench-hammer',
-      template: template$16,
+      template: template$1d,
       styles: styles$c
   });
   DesignSystem.getOrCreate()
@@ -100052,8 +100266,10 @@ focus outline in that case.
         }
 
         .card-shell {
-            display: block;
+            display: grid;
             width: 100%;
+            height: 100%;
+            min-height: inherit;
             box-sizing: border-box;
             padding: ${standardPadding};
             border-radius: 8px;
@@ -100071,10 +100287,27 @@ focus outline in that case.
             --ni-private-card-button-border-selected-color: transparent;
         }
 
+        .card-button-shell::part(control) {
+            display: flex;
+            flex-direction: column;
+            align-items: stretch;
+        }
+
+        .card-shell > .card-layout,
+        .card-shell > .card-button-content,
+        .card-button-content > .card-layout {
+            height: 100%;
+        }
+
+        .card-button-content {
+            flex: 1 1 auto;
+        }
+
         .card-layout {
             display: grid;
             grid-template-columns: minmax(0, 1fr);
             align-items: start;
+            min-height: 100%;
         }
 
         .card-layout.has-media {
@@ -100109,10 +100342,11 @@ focus outline in that case.
 
         .main-region {
             min-width: 0;
-            display: grid;
-            grid-template-columns: minmax(0, 1fr);
+            display: flex;
+            flex-direction: column;
             gap: ${mediumPadding};
             text-align: left;
+            align-self: stretch;
         }
 
         .header-row {
@@ -100173,6 +100407,7 @@ focus outline in that case.
             align-items: center;
             justify-content: space-between;
             gap: ${mediumPadding};
+            margin-top: auto;
             font: ${tooltipCaptionFont};
             color: ${tooltipCaptionFontColor};
             text-transform: uppercase;
@@ -100199,7 +100434,10 @@ focus outline in that case.
             display: block;
         }
 
-        ::slotted([slot='badges']),
+        ::slotted([slot='badges']) {
+            max-width: 100%;
+        }
+
         ::slotted([slot='footer-start']),
         ::slotted([slot='footer-end']) {
             display: block;
@@ -100374,12 +100612,9 @@ focus outline in that case.
                 </div>
             </${cardButtonTag}>
         `, html `
-            <${cardTag}
-                class="card-shell card-static-shell"
-                part="card-shell"
-            >
+            <div class="card-shell card-static-shell" part="card-shell">
                 ${cardContentTemplate}
-            </${cardTag}>
+            </div>
         `)}
 `;