@ni/nimble-components 20.12.1 → 20.14.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 Thu, 02 Nov 2023 17:05:25 GMT
+   * Generated on Fri, 03 Nov 2023 23:08:42 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -16468,6 +16468,12 @@
       iconSize: 'icon-size',
       groupHeaderTextTransform: 'group-header-text-transform',
       drawerWidth: 'drawer-width',
+      dialogSmallWidth: 'dialog-small-width',
+      dialogSmallHeight: 'dialog-small-height',
+      dialogSmallMaxHeight: 'dialog-small-max-height',
+      dialogLargeWidth: 'dialog-large-width',
+      dialogLargeHeight: 'dialog-large-height',
+      dialogLargeMaxHeight: 'dialog-large-max-height',
       bannerGapSize: 'banner-gap-size',
       spinnerSmallHeight: 'spinner-small-height',
       spinnerMediumHeight: 'spinner-medium-height',
@@ -16873,6 +16879,12 @@
   const borderWidth = DesignToken.create(styleNameFromTokenName(tokenNames.borderWidth)).withDefault('1px');
   const iconSize = DesignToken.create(styleNameFromTokenName(tokenNames.iconSize)).withDefault('16px');
   const drawerWidth = DesignToken.create(styleNameFromTokenName(tokenNames.drawerWidth)).withDefault('784px');
+  const dialogSmallWidth = DesignToken.create(styleNameFromTokenName(tokenNames.dialogSmallWidth)).withDefault('400px');
+  const dialogSmallHeight = DesignToken.create(styleNameFromTokenName(tokenNames.dialogSmallHeight)).withDefault('fit-content');
+  const dialogSmallMaxHeight = DesignToken.create(styleNameFromTokenName(tokenNames.dialogSmallMaxHeight)).withDefault('600px');
+  DesignToken.create(styleNameFromTokenName(tokenNames.dialogLargeWidth)).withDefault('1024px');
+  DesignToken.create(styleNameFromTokenName(tokenNames.dialogLargeHeight)).withDefault('680px');
+  DesignToken.create(styleNameFromTokenName(tokenNames.dialogLargeMaxHeight)).withDefault('680px');
   DesignToken.create(styleNameFromTokenName(tokenNames.bannerGapSize)).withDefault('1px');
   const spinnerSmallHeight = DesignToken.create(styleNameFromTokenName(tokenNames.spinnerSmallHeight)).withDefault('16px');
   DesignToken.create(styleNameFromTokenName(tokenNames.spinnerMediumHeight)).withDefault('32px');
@@ -18863,10 +18875,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>`
@@ -21121,8 +21141,9 @@
         border: none;
         box-shadow: ${elevation3BoxShadow};
         padding: 0px;
-        width: 400px;
-        max-height: 600px;
+        width: ${dialogSmallWidth};
+        height: ${dialogSmallHeight};
+        max-height: ${dialogSmallMaxHeight};
     }
 
     dialog[open] {
@@ -21218,6 +21239,7 @@
         <dialog
             ${ref('dialogElement')}
             role="dialog"
+            part="control"
             @cancel="${(x, c) => x.cancelHandler(c.event)}"
             aria-labelledby="header"
         >
@@ -21697,6 +21719,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
   /**
@@ -21710,6 +21745,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
   /**