@ni/nimble-components 20.12.0 → 20.13.0

package/dist/all-components-bundle.js

@@ -13842,7 +13842,7 @@
         aria-orientation="${x => x.orientation}"
         orientation="${x => x.orientation}"
         role="toolbar"
-        @click="${(x, c) => x.clickHandler(c.event)}"
+        @mousedown="${(x, c) => x.mouseDownHandler(c.event)}"
         @focusin="${(x, c) => x.focusinHandler(c.event)}"
         @keydown="${(x, c) => x.keydownHandler(c.event)}"
         ${children$1({
@@ -13953,9 +13953,9 @@
        *
        * @internal
        */
-      clickHandler(e) {
+      mouseDownHandler(e) {
           var _a;
-          const activeIndex = (_a = this.focusableElements) === null || _a === void 0 ? void 0 : _a.indexOf(e.target);
+          const activeIndex = (_a = this.focusableElements) === null || _a === void 0 ? void 0 : _a.findIndex(x => x.contains(e.target));
           if (activeIndex > -1 && this.activeIndex !== activeIndex) {
               this.setFocusedElement(activeIndex);
           }
@@ -16298,7 +16298,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Wed, 01 Nov 2023 20:26:57 GMT
+   * Generated on Thu, 02 Nov 2023 18:04:35 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);
@@ -18863,10 +18863,18 @@
       name: 'arrow_expander_up_16_x_16',
       data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="m12.5 11.263-1.11.732-3.357-5.472L4.603 12 3.5 11.257 8.045 4l4.455 7.263z"/></svg>`
   };
+  const arrowInCircle16X16 = {
+      name: 'arrow_in_circle_16_x_16',
+      data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M10.5 5.25a3.24 3.24 0 0 0-2.738 1.513L11.236 8.5l-3.474 1.737A3.24 3.24 0 0 0 10.5 11.75a3.25 3.25 0 0 0 0-6.5Z"/><path class="cls-1" d="m4 6 1 2H2v1h3l-1 2 5-2.5L4 6Z"/></svg>`
+  };
   const arrowLeftFromLine16X16 = {
       name: 'arrow_left_from_line_16_x_16',
       data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M12 14h2V2h-2ZM2 7.982 7.9 5 6.588 7.004 11 7v2H6.613L7.9 11Z"/></svg>`
   };
+  const arrowOutCircle16X16 = {
+      name: 'arrow_out_circle_16_x_16',
+      data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="m9 6 1 2H7v1h3l-1 2 5-2.5L9 6Z"/><path class="cls-1" d="M6 10V7h2.367A3.237 3.237 0 0 0 5.5 5.25a3.25 3.25 0 0 0 0 6.5c1.25 0 2.324-.714 2.867-1.75H6Z"/></svg>`
+  };
   const arrowPartialRotateLeft16X16 = {
       name: 'arrow_partial_rotate_left_16_x_16',
       data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M8 11.988a3.086 3.086 0 0 0 3.143-3.025 3.08 3.08 0 0 0-3.085-3.02v.088l.826 2.067-5.598-2.796L8.884 2.5l-.742 1.932a4.619 4.619 0 0 1 4.572 4.53A4.629 4.629 0 0 1 8 13.5Z"/></svg>`
@@ -19935,9 +19943,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
@@ -21683,6 +21705,19 @@
   registerIcon('icon-arrow-expander-up', IconArrowExpanderUp);
   DesignSystem.tagFor(IconArrowExpanderUp);
 
+  // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+  // See generation source in nimble-components/build/generate-icons
+  /**
+   * The icon component for the 'arrowInCircle' icon
+   */
+  class IconArrowInCircle extends Icon {
+      constructor() {
+          super(arrowInCircle16X16);
+      }
+  }
+  registerIcon('icon-arrow-in-circle', IconArrowInCircle);
+  DesignSystem.tagFor(IconArrowInCircle);
+
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
@@ -21696,6 +21731,19 @@
   registerIcon('icon-arrow-left-from-line', IconArrowLeftFromLine);
   DesignSystem.tagFor(IconArrowLeftFromLine);
 
+  // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+  // See generation source in nimble-components/build/generate-icons
+  /**
+   * The icon component for the 'arrowOutCircle' icon
+   */
+  class IconArrowOutCircle extends Icon {
+      constructor() {
+          super(arrowOutCircle16X16);
+      }
+  }
+  registerIcon('icon-arrow-out-circle', IconArrowOutCircle);
+  DesignSystem.tagFor(IconArrowOutCircle);
+
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**