@ni/nimble-components 20.12.0 → 20.12.1

package/dist/all-components-bundle.js

@@ -16298,7 +16298,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Wed, 01 Nov 2023 20:26:57 GMT
+   * Generated on Thu, 02 Nov 2023 17:05:25 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -16886,7 +16886,7 @@
   createFontTokens(tokenNames.headlinePlus1Font, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Headline2Family, Headline2Weight, Headline2Size, Headline2LineHeight, Headline2FallbackFontFamily);
   createFontTokens(tokenNames.titlePlus2Font, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Title3Family, Title3Weight, Title3Size, Title3LineHeight, Title3FallbackFontFamily);
   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, Title2FallbackFontFamily);
-  createFontTokens(tokenNames.titleFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Title1Family, Title1Weight, Title1Size, Title1LineHeight, Title1FallbackFontFamily);
+  const [titleFont, titleFontColor, titleDisabledFontColor, titleFontFamily, titleFontWeight, titleFontSize, titleFontLineHeight, titleFallbackFontFamily] = createFontTokens(tokenNames.titleFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Title1Family, Title1Weight, Title1Size, Title1LineHeight, Title1FallbackFontFamily);
   createFontTokens(tokenNames.subtitlePlus1Font, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Subtitle2Family, Subtitle2Weight, Subtitle2Size, Subtitle2LineHeight, Subtitle2FallbackFontFamily);
   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, Subtitle1FallbackFontFamily);
   const [linkFont, linkFontColor, linkDisabledFontColor, linkFontFamily, linkFontWeight, linkFontSize, linkFontLineHeight, linkFallbackFontFamily] = createFontTokens(tokenNames.linkFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight, LinkFallbackFontFamily);
@@ -19935,9 +19935,23 @@
         color: ${bodyFontColor};
         background-color: ${sectionBackgroundColor};
     }
+
+    section {
+        display: contents;
+    }
+
+    ::slotted([slot='title']) {
+        font: ${titleFont};
+        color: ${titleFontColor};
+    }
 `;
 
-  const template$s = html `<slot></slot>`;
+  const template$s = html `
+    <section aria-labelledby="title-slot">
+        <slot name="title" id="title-slot"></slot>
+        <slot></slot>
+    </section>
+`;
 
   /**
    * A nimble-styled card