@ni/nimble-components 13.0.0 → 14.0.0

package/dist/all-components-bundle.js

@@ -14908,7 +14908,7 @@
     const [titlePlus1Font, titlePlus1FontColor, titlePlus1DisabledFontColor, titlePlus1FontFamily, titlePlus1FontWeight, titlePlus1FontSize, titlePlus1FontLineHeight, titlePlus1FallbackFontFamily] = createFontTokens(tokenNames.titlePlus1Font, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Title2Family, Title2Weight, Title2Size, Title2LineHeight, 'sans-serif');
     createFontTokens(tokenNames.titleFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Title1Family, Title1Weight, Title1Size, Title1LineHeight, 'sans-serif');
     createFontTokens(tokenNames.subtitlePlus1Font, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Subtitle2Family, Subtitle2Weight, Subtitle2Size, Subtitle2LineHeight, 'sans-serif');
-    createFontTokens(tokenNames.subtitleFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Subtitle1Family, Subtitle1Weight, Subtitle1Size, Subtitle1LineHeight, 'sans-serif');
+    const [subtitleFont, subtitleFontColor, subtitleDisabledFontColor, subtitleFontFamily, subtitleFontWeight, subtitleFontSize, subtitleFontLineHeight, subtitleFallbackFontFamily] = createFontTokens(tokenNames.subtitleFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Subtitle1Family, Subtitle1Weight, Subtitle1Size, Subtitle1LineHeight, 'sans-serif');
     createFontTokens(tokenNames.linkStandardFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight, 'sans-serif');
     const [placeholderFont, placeholderFontColor, placeholderDisabledFontColor, placeholderFontFamily, placeholderFontWeight, placeholderFontSize, placeholderFontLineHeight, placeholderFallbackFontFamily] = createFontTokens(tokenNames.placeholderFont, (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.6), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), PlaceholderFamily, PlaceholderWeight, PlaceholderSize, PlaceholderLineHeight, 'sans-serif');
     const [bodyEmphasizedFont, bodyEmphasizedFontColor, bodyEmphasizedDisabledFontColor, bodyEmphasizedFontFamily, bodyEmphasizedFontWeight, bodyEmphasizedFontSize, bodyEmphasizedFontLineHeight, bodyEmphasizedFallbackFontFamily] = createFontTokens(tokenNames.bodyEmphasizedFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), BodyEmphasizedFamily, BodyEmphasizedWeight, BodyEmphasizedSize, BodyEmphasizedLineHeight, 'sans-serif');
@@ -17307,10 +17307,98 @@
     ${display('grid')}
 
     dialog {
+        flex-direction: column;
         background-color: ${applicationBackgroundColor};
-        border: ${borderWidth} solid ${popupBorderColor};
-        box-shadow: 0px 2px 3px ${popupBoxShadowColor};
-        max-width: 50%;
+        border: none;
+        box-shadow: 0px 4px 8px #0000004d;
+        padding: 0px;
+        width: 400px;
+        max-height: 600px;
+    }
+
+    dialog[open] {
+        display: flex;
+    }
+
+    header {
+        min-height: 48px;
+        padding: 24px 24px 0px 24px;
+        flex: none;
+        display: flex;
+        flex-direction: column;
+        gap: ${smallPadding};
+    }
+
+    :host([header-hidden]) header {
+        ${
+/**
+ * Hide content visually while keeping it screen reader-accessible.
+ * Source: https://webaim.org/techniques/css/invisiblecontent/#techniques
+ * See discussion here: https://github.com/microsoft/fast/issues/5740#issuecomment-1068195035
+ */
+''}
+        display: inline-block;
+        height: 1px;
+        width: 1px;
+        position: absolute;
+        margin: -1px;
+        clip: rect(1px, 1px, 1px, 1px);
+        clip-path: inset(50%);
+        overflow: hidden;
+        padding: 0;
+    }
+
+    .title {
+        font: ${titlePlus1Font};
+        color: ${titlePlus1FontColor};
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .subtitle {
+        font: ${subtitleFont};
+        color: ${subtitleFontColor};
+    }
+
+    section {
+        flex: auto;
+        overflow-y: auto;
+        font: ${bodyFont};
+        color: ${bodyFontColor};
+        display: flex;
+        flex-direction: column;
+        gap: ${standardPadding};
+
+        ${
+/**
+ * Use padding on all sides except the top because the padding is within
+ * the scrollable area. The whole scrollable area, including the top of
+ * the scrollbar, should be 24px away from the header, so use a margin
+ * instead of padding for the top.
+ */
+''}
+        padding: 0px 24px 24px 24px;
+        margin-top: 24px;
+    }
+
+    footer {
+        border-top: 2px solid rgba(${actionRgbPartialColor}, 0.1);
+        padding: 24px;
+        flex: none;
+        display: flex;
+        justify-content: flex-end;
+        gap: ${standardPadding};
+    }
+
+    footer.empty {
+        padding: 0px;
+        height: 72px;
+        border-top: none;
+    }
+
+    :host([footer-hidden]) footer {
+        display: none;
     }
 `.withBehaviors(
     /*
@@ -17335,11 +17423,27 @@
     <template>
         <dialog
             ${ref('dialogElement')}
-            role="alertdialog"
-            aria-label="${x => x.ariaLabel}"
+            role="dialog"
             @cancel="${(x, c) => x.cancelHandler(c.event)}"
+            aria-labelledby="header"
         >
-            <slot></slot>
+            <header id="header">
+                <div class="title">
+                    <slot name="title"></slot>
+                </div>
+                <div class="subtitle">
+                    <slot name="subtitle"></slot>
+                </div>
+            </header>
+            <section>
+                <slot></slot>
+            </section>
+            <footer class="${x => (x.footerIsEmpty ? 'empty' : '')}">
+                <slot
+                    name="footer"
+                    ${slotted({ property: 'slottedFooterElements' })}
+                ></slot>
+            </footer>
         </dialog>
     </template>
 `;
@@ -17357,6 +17461,20 @@
              * Prevents dismissing the dialog via the Escape key
              */
             this.preventDismiss = false;
+            /**
+             * @public
+             * @description
+             * Hides the header of the dialog.
+             */
+            this.headerHidden = false;
+            /**
+             * @public
+             * @description
+             * Hides the footer of the dialog.
+             */
+            this.footerHidden = false;
+            /** @internal */
+            this.footerIsEmpty = true;
         }
         /**
          * True if the dialog is open/showing, false otherwise
@@ -17389,6 +17507,9 @@
             this.resolveShow(reason);
             this.resolveShow = undefined;
         }
+        slottedFooterElementsChanged(_prev, next) {
+            this.footerIsEmpty = !next?.length;
+        }
         /**
          * @internal
          */
@@ -17409,6 +17530,18 @@
     __decorate([
         attr({ attribute: 'prevent-dismiss', mode: 'boolean' })
     ], Dialog.prototype, "preventDismiss", void 0);
+    __decorate([
+        attr({ attribute: 'header-hidden', mode: 'boolean' })
+    ], Dialog.prototype, "headerHidden", void 0);
+    __decorate([
+        attr({ attribute: 'footer-hidden', mode: 'boolean' })
+    ], Dialog.prototype, "footerHidden", void 0);
+    __decorate([
+        observable
+    ], Dialog.prototype, "footerIsEmpty", void 0);
+    __decorate([
+        observable
+    ], Dialog.prototype, "slottedFooterElements", void 0);
     applyMixins(Dialog, ARIAGlobalStatesAndProperties);
     const nimbleDialog = Dialog.compose({
         baseName: 'dialog',