@ni/nimble-components 20.10.3 → 20.11.0

package/dist/all-components-bundle.js

@@ -7516,6 +7516,16 @@
   applyMixins(DelegatesARIAButton, ARIAGlobalStatesAndProperties);
   applyMixins(Button$1, StartEnd, DelegatesARIAButton);
 
+  /**
+   * An Card Custom HTML Element.
+   *
+   * @slot - The default slot for the card content
+   *
+   * @public
+   */
+  let Card$1 = class Card extends FoundationElement {
+  };
+
   /**
    * The template for the {@link @microsoft/fast-foundation#(Checkbox:class)} component.
    * @public
@@ -16288,7 +16298,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Wed, 01 Nov 2023 14:47:40 GMT
+   * Generated on Wed, 01 Nov 2023 16:12:34 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -16673,9 +16683,9 @@
       return `${prefix}${uniqueIdCounter++}`;
   }
 
-  const template$A = html `<slot></slot>`;
+  const template$B = html `<slot></slot>`;
 
-  const styles$T = css `
+  const styles$U = css `
     :host {
         display: contents;
     }
@@ -16792,8 +16802,8 @@
   ], ThemeProvider.prototype, "theme", void 0);
   const nimbleDesignSystemProvider = ThemeProvider.compose({
       baseName: 'theme-provider',
-      styles: styles$T,
-      template: template$A
+      styles: styles$U,
+      template: template$B
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -16823,7 +16833,7 @@
   const actionRgbPartialColor = DesignToken.create(styleNameFromTokenName(tokenNames.actionRgbPartialColor)).withDefault((element) => hexToRgbPartial(getColorForTheme(element, Black91, Black15, White)));
   const applicationBackgroundColor = DesignToken.create(styleNameFromTokenName(tokenNames.applicationBackgroundColor)).withDefault((element) => getColorForTheme(element, White, Black85, ForestGreen));
   DesignToken.create(styleNameFromTokenName(tokenNames.headerBackgroundColor)).withDefault((element) => getColorForTheme(element, Black7, Black88, ForestGreen));
-  DesignToken.create(styleNameFromTokenName(tokenNames.sectionBackgroundColor)).withDefault((element) => getColorForTheme(element, Black15, Black80, ForestGreen));
+  const sectionBackgroundColor = DesignToken.create(styleNameFromTokenName(tokenNames.sectionBackgroundColor)).withDefault((element) => getColorForTheme(element, Black15, Black80, ForestGreen));
   DesignToken.create(styleNameFromTokenName(tokenNames.dividerBackgroundColor)).withDefault((element) => getColorForTheme(element, Black15, Black80, ForestGreen));
   const fillSelectedColor = DesignToken.create(styleNameFromTokenName(tokenNames.fillSelectedColor)).withDefault((element) => hexToRgbaCssColor(getFillSelectedColorForTheme(element), 0.2));
   const fillSelectedRgbPartialColor = DesignToken.create(styleNameFromTokenName(tokenNames.fillSelectedRgbPartialColor)).withDefault((element) => hexToRgbPartial(getFillSelectedColorForTheme(element)));
@@ -16988,7 +16998,7 @@
       }
   }
 
-  const styles$S = css `
+  const styles$T = css `
     ${display('inline')}
 
     :host {
@@ -17071,7 +17081,7 @@
 `;
 
   // prettier-ignore
-  const template$z = (_context, definition) => html `<a
+  const template$A = (_context, definition) => html `<a
         class="control"
         part="control"
         download="${x => x.download}"
@@ -17161,8 +17171,8 @@
   const nimbleAnchor = Anchor.compose({
       baseName: 'anchor',
       baseClass: Anchor$1,
-      template: template$z,
-      styles: styles$S,
+      template: template$A,
+      styles: styles$T,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17265,7 +17275,7 @@
     padding: 0;
 `;
 
-  const styles$R = css `
+  const styles$S = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -17542,8 +17552,8 @@
             }
         `));
 
-  const styles$Q = css `
-    ${styles$R}
+  const styles$R = css `
+    ${styles$S}
     ${buttonAppearanceVariantStyles}
 
     .control {
@@ -17551,7 +17561,7 @@
     }
 `;
 
-  const template$y = (context, definition) => html `
+  const template$z = (context, definition) => html `
     <a
         class="control"
         part="control"
@@ -17633,8 +17643,8 @@
   ], AnchorButton.prototype, "disabled", void 0);
   const nimbleAnchorButton = AnchorButton.compose({
       baseName: 'anchor-button',
-      template: template$y,
-      styles: styles$Q,
+      template: template$z,
+      styles: styles$R,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17642,7 +17652,7 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorButton());
   DesignSystem.tagFor(AnchorButton);
 
-  const styles$P = css `
+  const styles$Q = css `
     ${display('grid')}
 
     :host {
@@ -17719,7 +17729,7 @@
     }
 `;
 
-  const template$x = (context, definition) => html `
+  const template$y = (context, definition) => html `
     <template
         role="menuitem"
         class="${x => (typeof x.startColumnCount === 'number'
@@ -17825,8 +17835,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$x,
-      styles: styles$P,
+      template: template$y,
+      styles: styles$Q,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17850,7 +17860,7 @@
       }
   });
 
-  const styles$O = css `
+  const styles$P = css `
     ${display('inline-flex')}
 
     :host {
@@ -17966,7 +17976,7 @@
     }
 `;
 
-  const template$w = (context, definition) => html `
+  const template$x = (context, definition) => html `
     <template slot="anchortab" role="tab" aria-disabled="${x => x.disabled}">
         <a
             download="${x => x.download}"
@@ -18018,8 +18028,8 @@
   // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
   const nimbleAnchorTab = AnchorTab.compose({
       baseName: 'anchor-tab',
-      template: template$w,
-      styles: styles$O,
+      template: template$x,
+      styles: styles$P,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -18027,7 +18037,7 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTab());
   DesignSystem.tagFor(AnchorTab);
 
-  const styles$N = css `
+  const styles$O = css `
     ${display('grid')}
 
     :host {
@@ -18049,7 +18059,7 @@
     }
 `;
 
-  const template$v = (context, definition) => html `
+  const template$w = (context, definition) => html `
     ${startSlotTemplate(context, definition)}
     <div ${ref('tablist')} class="tablist" part="tablist" role="tablist">
         <slot name="anchortab" ${slotted('tabs')}></slot>
@@ -18255,8 +18265,8 @@
   applyMixins(AnchorTabs, StartEnd);
   const nimbleAnchorTabs = AnchorTabs.compose({
       baseName: 'anchor-tabs',
-      template: template$v,
-      styles: styles$N,
+      template: template$w,
+      styles: styles$O,
       shadowOptions: {
           delegatesFocus: false
       }
@@ -18273,7 +18283,7 @@
     -webkit-user-select: none;
 `;
 
-  const styles$M = css `
+  const styles$N = css `
     ${display('block')}
 
     :host {
@@ -18374,7 +18384,7 @@
     }
 `;
 
-  const template$u = (context, definition) => html `
+  const template$v = (context, definition) => html `
     <template
         role="treeitem"
         slot="${x => (x.isNestedItem() ? 'item' : null)}"
@@ -18511,8 +18521,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$u,
-      styles: styles$M,
+      template: template$v,
+      styles: styles$N,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -18522,7 +18532,7 @@
       .register(nimbleAnchorTreeItem());
   DesignSystem.tagFor(AnchorTreeItem);
 
-  const styles$L = css `
+  const styles$M = css `
     :host {
         contain: layout;
         display: block;
@@ -18546,7 +18556,7 @@
       baseName: 'anchored-region',
       baseClass: AnchoredRegion$1,
       template: anchoredRegionTemplate,
-      styles: styles$L
+      styles: styles$M
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -18626,7 +18636,7 @@
    */
   const themeBehavior = (theme, styles) => new ThemeStyleSheetBehavior(theme, styles);
 
-  const styles$K = css `
+  const styles$L = css `
     ${display('flex')}
 
     :host {
@@ -18769,8 +18779,8 @@
             }
         `));
 
-  const styles$J = css `
-    ${styles$R}
+  const styles$K = css `
+    ${styles$S}
     ${buttonAppearanceVariantStyles}
 `;
 
@@ -18816,7 +18826,7 @@
       baseName: 'button',
       baseClass: Button$1,
       template: buttonTemplate,
-      styles: styles$J,
+      styles: styles$K,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -19495,13 +19505,13 @@
   };
 
   // Avoiding any whitespace in the template because this is an inline element
-  const template$t = html `<div
+  const template$u = html `<div
     class="icon"
     aria-hidden="true"
     :innerHTML=${x => x.icon.data}
 ></div>`;
 
-  const styles$I = css `
+  const styles$J = css `
     ${display('inline-flex')}
 
     :host {
@@ -19554,8 +19564,8 @@
   const registerIcon = (baseName, iconClass) => {
       const composedIcon = iconClass.compose({
           baseName,
-          template: template$t,
-          styles: styles$I,
+          template: template$u,
+          styles: styles$J,
           baseClass: iconClass
       });
       DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
@@ -19659,7 +19669,7 @@
   }).withDefault(coreLabelDefaults.informationIconLabel);
 
   // prettier-ignore
-  const template$s = html `
+  const template$t = html `
     <div class="container"
         role="status"
         aria-atomic="${x => x.ariaAtomic}"
@@ -19775,13 +19785,13 @@
   applyMixins(Banner, ARIAGlobalStatesAndProperties);
   const nimbleBanner = Banner.compose({
       baseName: 'banner',
-      template: template$s,
-      styles: styles$K
+      template: template$t,
+      styles: styles$L
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBanner());
   DesignSystem.tagFor(Banner);
 
-  const styles$H = css `
+  const styles$I = css `
     ${display('inline-block')}
 
     :host {
@@ -19822,12 +19832,12 @@
       baseName: 'breadcrumb',
       baseClass: Breadcrumb$1,
       template: breadcrumbTemplate,
-      styles: styles$H
+      styles: styles$I
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBreadcrumb());
   DesignSystem.tagFor(Breadcrumb);
 
-  const styles$G = css `
+  const styles$H = css `
     ${display('inline-flex')}
 
     :host {
@@ -19901,7 +19911,7 @@
       baseName: 'breadcrumb-item',
       baseClass: BreadcrumbItem$1,
       template: breadcrumbItemTemplate,
-      styles: styles$G,
+      styles: styles$H,
       separator: forwardSlash16X16.data
   });
   DesignSystem.getOrCreate()
@@ -19909,6 +19919,36 @@
       .register(nimbleBreadcrumbItem());
   DesignSystem.tagFor(BreadcrumbItem);
 
+  const styles$G = css `
+    ${display('flex')}
+
+    :host {
+        flex-direction: column;
+        gap: ${standardPadding};
+        padding: ${standardPadding};
+        border: ${borderWidth} solid ${borderColor};
+        font: ${bodyFont};
+        color: ${bodyFontColor};
+        background-color: ${sectionBackgroundColor};
+    }
+`;
+
+  const template$s = html `<slot></slot>`;
+
+  /**
+   * A nimble-styled card
+   */
+  class Card extends Card$1 {
+  }
+  const nimbleCard = Card.compose({
+      baseName: 'card',
+      baseClass: Card$1,
+      template: template$s,
+      styles: styles$G
+  });
+  DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCard());
+  DesignSystem.tagFor(Card);
+
   const styles$F = css `
     ${display('inline-flex')}
 
@@ -20202,7 +20242,7 @@
   const checkboxTag = DesignSystem.tagFor(Checkbox);
 
   const styles$D = css `
-    ${styles$R}
+    ${styles$S}
 
     @layer base {
         .control[aria-pressed='true'] {