@ni/nimble-components 15.1.1 → 15.3.0

package/README.md

@@ -75,7 +75,7 @@ The theming system is composed of:
 2. Include one import in your styles for the Nimble fonts. Nimble recommends using SCSS for capabilities such as build-time property checking.
 
     ```scss
-    @import '~@ni/nimble-components/dist/fonts';
+    @import '@ni/nimble-components/dist/fonts';
     ```
 
 3. As needed, add Nimble components as descendants of the theme provider and they will inherit the theme.
@@ -83,7 +83,7 @@ The theming system is composed of:
 4. As needed, import the theme-aware design tokens in each SCSS file that will leverage the tokens for other parts of your application (for colors, fonts, etc).
 
     ```scss
-    @import '~@ni/nimble-components/dist/tokens';
+    @import '@ni/nimble-components/dist/tokens';
 
     .my-element {
         font-family: $ni-nimble-body-font-family;

package/dist/all-components-bundle.js

@@ -70,6 +70,27 @@
      * @internal
      */
     const emptyArray = Object.freeze([]);
+    /**
+     * Creates a function capable of locating metadata associated with a type.
+     * @returns A metadata locator function.
+     * @internal
+     */
+    function createMetadataLocator() {
+        const metadataLookup = new WeakMap();
+        return function (target) {
+            let metadata = metadataLookup.get(target);
+            if (metadata === void 0) {
+                let currentTarget = Reflect.getPrototypeOf(target);
+                while (metadata === void 0 && currentTarget !== null) {
+                    metadata = metadataLookup.get(currentTarget);
+                    currentTarget = Reflect.getPrototypeOf(currentTarget);
+                }
+                metadata = metadata === void 0 ? [] : metadata.slice(0);
+                metadataLookup.set(target, metadata);
+            }
+            return metadata;
+        };
+    }
 
     const updateQueue = $global.FAST.getById(1 /* updateQueue */, () => {
         const tasks = [];
@@ -458,7 +479,6 @@
     const Observable = FAST.getById(2 /* observable */, () => {
         const volatileRegex = /(:|&&|\|\||if)/;
         const notifierLookup = new WeakMap();
-        const accessorLookup = new WeakMap();
         const queueUpdate = DOM.queueUpdate;
         let watcher = void 0;
         let createArrayObserver = (array) => {
@@ -476,24 +496,7 @@
             }
             return found;
         }
-        function getAccessors(target) {
-            let accessors = accessorLookup.get(target);
-            if (accessors === void 0) {
-                let currentTarget = Reflect.getPrototypeOf(target);
-                while (accessors === void 0 && currentTarget !== null) {
-                    accessors = accessorLookup.get(currentTarget);
-                    currentTarget = Reflect.getPrototypeOf(currentTarget);
-                }
-                if (accessors === void 0) {
-                    accessors = [];
-                }
-                else {
-                    accessors = accessors.slice(0);
-                }
-                accessorLookup.set(target, accessors);
-            }
-            return accessors;
-        }
+        const getAccessors = createMetadataLocator();
         class DefaultObservableAccessor {
             constructor(name) {
                 this.name = name;
@@ -1361,8 +1364,10 @@
                 node.parentNode.insertBefore(this.fragment, node);
             }
             else {
-                const parentNode = node.parentNode;
                 const end = this.lastChild;
+                if (node.previousSibling === end)
+                    return;
+                const parentNode = node.parentNode;
                 let current = this.firstChild;
                 let next;
                 while (current !== end) {
@@ -1768,6 +1773,16 @@
         }
     }
 
+    /**
+     * Metadata used to configure a custom attribute's behavior.
+     * @public
+     */
+    const AttributeConfiguration = Object.freeze({
+        /**
+         * Locates all attribute configurations associated with a type.
+         */
+        locate: createMetadataLocator(),
+    });
     /**
      * A {@link ValueConverter} that converts to and from `boolean` values.
      * @remarks
@@ -1908,7 +1923,7 @@
          */
         static collect(Owner, ...attributeLists) {
             const attributes = [];
-            attributeLists.push(Owner.attributes);
+            attributeLists.push(AttributeConfiguration.locate(Owner));
             for (let i = 0, ii = attributeLists.length; i < ii; ++i) {
                 const list = attributeLists[i];
                 if (list === void 0) {
@@ -1938,9 +1953,7 @@
                 // - @attr({...opts})
                 config.property = $prop;
             }
-            const attributes = $target.constructor.attributes ||
-                ($target.constructor.attributes = []);
-            attributes.push(config);
+            AttributeConfiguration.locate($target.constructor).push(config);
         }
         if (arguments.length > 1) {
             // Non invocation:
@@ -4306,6 +4319,7 @@
      * @public
      */
     function applyMixins(derivedCtor, ...baseCtors) {
+        const derivedAttributes = AttributeConfiguration.locate(derivedCtor);
         baseCtors.forEach(baseCtor => {
             Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {
                 if (name !== "constructor") {
@@ -4314,10 +4328,8 @@
                     Object.getOwnPropertyDescriptor(baseCtor.prototype, name));
                 }
             });
-            if (baseCtor.attributes) {
-                const existing = derivedCtor.attributes || [];
-                derivedCtor.attributes = existing.concat(baseCtor.attributes);
-            }
+            const baseAttributes = AttributeConfiguration.locate(baseCtor);
+            baseAttributes.forEach(x => derivedAttributes.push(x));
         });
     }
 
@@ -6344,13 +6356,10 @@
                 this.removeChild(this.proxy);
                 (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.removeChild(this.proxySlot);
             }
-            /**
-             * Sets the validity of the custom element. By default this uses the proxy element to determine
-             * validity, but this can be extended or replaced in implementation.
-             */
-            validate() {
+            /** {@inheritDoc (FormAssociated:interface).validate} */
+            validate(anchor) {
                 if (this.proxy instanceof HTMLElement) {
-                    this.setValidity(this.proxy.validity, this.proxy.validationMessage);
+                    this.setValidity(this.proxy.validity, this.proxy.validationMessage, anchor);
                 }
             }
             /**
@@ -6594,6 +6603,10 @@
             next === "reset" && this.addEventListener("click", this.handleFormReset);
             previous === "reset" && this.removeEventListener("click", this.handleFormReset);
         }
+        /** {@inheritDoc (FormAssociated:interface).validate} */
+        validate() {
+            super.validate(this.control);
+        }
         /**
          * @internal
          */
@@ -7612,6 +7625,10 @@
             this.setDefaultSelectedOption();
             this.updateValue();
         }
+        /** {@inheritDoc (FormAssociated:interface).validate} */
+        validate() {
+            super.validate(this.control);
+        }
         get isAutocompleteInline() {
             return (this.autocomplete === ComboboxAutocomplete.inline || this.isAutocompleteBoth);
         }
@@ -7823,10 +7840,15 @@
             if (this.isAutocompleteList && !this.open) {
                 this.open = true;
             }
-            if (this.isAutocompleteInline && this.filteredOptions.length) {
-                this.selectedOptions = [this.filteredOptions[0]];
-                this.selectedIndex = this.options.indexOf(this.firstSelectedOption);
-                this.setInlineSelection();
+            if (this.isAutocompleteInline) {
+                if (this.filteredOptions.length) {
+                    this.selectedOptions = [this.filteredOptions[0]];
+                    this.selectedIndex = this.options.indexOf(this.firstSelectedOption);
+                    this.setInlineSelection();
+                }
+                else {
+                    this.selectedIndex = -1;
+                }
             }
             return;
         }
@@ -9261,11 +9283,17 @@
     /* eslint-enable @typescript-eslint/no-non-null-assertion */
 
     /*!
-    * tabbable 5.2.1
+    * tabbable 5.3.3
     * @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
     */
-    var candidateSelectors = ['input', 'select', 'textarea', 'a[href]', 'button', '[tabindex]', 'audio[controls]', 'video[controls]', '[contenteditable]:not([contenteditable="false"])', 'details>summary:first-of-type', 'details'];
-    var matches = typeof Element === 'undefined' ? function () {} : Element.prototype.matches || Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
+    var candidateSelectors = ['input', 'select', 'textarea', 'a[href]', 'button', '[tabindex]:not(slot)', 'audio[controls]', 'video[controls]', '[contenteditable]:not([contenteditable="false"])', 'details>summary:first-of-type', 'details'];
+    var NoElement = typeof Element === 'undefined';
+    var matches = NoElement ? function () {} : Element.prototype.matches || Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
+    var getRootNode = !NoElement && Element.prototype.getRootNode ? function (element) {
+      return element.getRootNode();
+    } : function (element) {
+      return element.ownerDocument;
+    };
 
     var isInput = function isInput(node) {
       return node.tagName === 'INPUT';
@@ -9282,7 +9310,23 @@
       return r;
     };
 
-    var isHidden = function isHidden(node, displayCheck) {
+    var isZeroArea = function isZeroArea(node) {
+      var _node$getBoundingClie = node.getBoundingClientRect(),
+          width = _node$getBoundingClie.width,
+          height = _node$getBoundingClie.height;
+
+      return width === 0 && height === 0;
+    };
+
+    var isHidden = function isHidden(node, _ref) {
+      var displayCheck = _ref.displayCheck,
+          getShadowRoot = _ref.getShadowRoot;
+
+      // NOTE: visibility will be `undefined` if node is detached from the document
+      //  (see notes about this further down), which means we will consider it visible
+      //  (this is legacy behavior from a very long way back)
+      // NOTE: we check this regardless of `displayCheck="none"` because this is a
+      //  _visibility_ check, not a _display_ check
       if (getComputedStyle(node).visibility === 'hidden') {
         return true;
       }
@@ -9292,23 +9336,95 @@
 
       if (matches.call(nodeUnderDetails, 'details:not([open]) *')) {
         return true;
-      }
+      } // The root node is the shadow root if the node is in a shadow DOM; some document otherwise
+      //  (but NOT _the_ document; see second 'If' comment below for more).
+      // If rootNode is shadow root, it'll have a host, which is the element to which the shadow
+      //  is attached, and the one we need to check if it's in the document or not (because the
+      //  shadow, and all nodes it contains, is never considered in the document since shadows
+      //  behave like self-contained DOMs; but if the shadow's HOST, which is part of the document,
+      //  is hidden, or is not in the document itself but is detached, it will affect the shadow's
+      //  visibility, including all the nodes it contains). The host could be any normal node,
+      //  or a custom element (i.e. web component). Either way, that's the one that is considered
+      //  part of the document, not the shadow root, nor any of its children (i.e. the node being
+      //  tested).
+      // If rootNode is not a shadow root, it won't have a host, and so rootNode should be the
+      //  document (per the docs) and while it's a Document-type object, that document does not
+      //  appear to be the same as the node's `ownerDocument` for some reason, so it's safer
+      //  to ignore the rootNode at this point, and use `node.ownerDocument`. Otherwise,
+      //  using `rootNode.contains(node)` will _always_ be true we'll get false-positives when
+      //  node is actually detached.
+
+
+      var nodeRootHost = getRootNode(node).host;
+      var nodeIsAttached = (nodeRootHost === null || nodeRootHost === void 0 ? void 0 : nodeRootHost.ownerDocument.contains(nodeRootHost)) || node.ownerDocument.contains(node);
 
       if (!displayCheck || displayCheck === 'full') {
-        while (node) {
-          if (getComputedStyle(node).display === 'none') {
-            return true;
+        if (typeof getShadowRoot === 'function') {
+          // figure out if we should consider the node to be in an undisclosed shadow and use the
+          //  'non-zero-area' fallback
+          var originalNode = node;
+
+          while (node) {
+            var parentElement = node.parentElement;
+            var rootNode = getRootNode(node);
+
+            if (parentElement && !parentElement.shadowRoot && getShadowRoot(parentElement) === true // check if there's an undisclosed shadow
+            ) {
+              // node has an undisclosed shadow which means we can only treat it as a black box, so we
+              //  fall back to a non-zero-area test
+              return isZeroArea(node);
+            } else if (node.assignedSlot) {
+              // iterate up slot
+              node = node.assignedSlot;
+            } else if (!parentElement && rootNode !== node.ownerDocument) {
+              // cross shadow boundary
+              node = rootNode.host;
+            } else {
+              // iterate up normal dom
+              node = parentElement;
+            }
           }
 
-          node = node.parentElement;
-        }
+          node = originalNode;
+        } // else, `getShadowRoot` might be true, but all that does is enable shadow DOM support
+        //  (i.e. it does not also presume that all nodes might have undisclosed shadows); or
+        //  it might be a falsy value, which means shadow DOM support is disabled
+        // Since we didn't find it sitting in an undisclosed shadow (or shadows are disabled)
+        //  now we can just test to see if it would normally be visible or not, provided it's
+        //  attached to the main document.
+        // NOTE: We must consider case where node is inside a shadow DOM and given directly to
+        //  `isTabbable()` or `isFocusable()` -- regardless of `getShadowRoot` option setting.
+
+
+        if (nodeIsAttached) {
+          // this works wherever the node is: if there's at least one client rect, it's
+          //  somehow displayed; it also covers the CSS 'display: contents' case where the
+          //  node itself is hidden in place of its contents; and there's no need to search
+          //  up the hierarchy either
+          return !node.getClientRects().length;
+        } // Else, the node isn't attached to the document, which means the `getClientRects()`
+        //  API will __always__ return zero rects (this can happen, for example, if React
+        //  is used to render nodes onto a detached tree, as confirmed in this thread:
+        //  https://github.com/facebook/react/issues/9117#issuecomment-284228870)
+        //
+        // It also means that even window.getComputedStyle(node).display will return `undefined`
+        //  because styles are only computed for nodes that are in the document.
+        //
+        // NOTE: THIS HAS BEEN THE CASE FOR YEARS. It is not new, nor is it caused by tabbable
+        //  somehow. Though it was never stated officially, anyone who has ever used tabbable
+        //  APIs on nodes in detached containers has actually implicitly used tabbable in what
+        //  was later (as of v5.2.0 on Apr 9, 2021) called `displayCheck="none"` mode -- essentially
+        //  considering __everything__ to be visible because of the innability to determine styles.
+
       } else if (displayCheck === 'non-zero-area') {
-        var _node$getBoundingClie = node.getBoundingClientRect(),
-            width = _node$getBoundingClie.width,
-            height = _node$getBoundingClie.height;
+        // NOTE: Even though this tests that the node's client rect is non-zero to determine
+        //  whether it's displayed, and that a detached node will __always__ have a zero-area
+        //  client rect, we don't special-case for whether the node is attached or not. In
+        //  this mode, we do want to consider nodes that have a zero area to be hidden at all
+        //  times, and that includes attached or not.
+        return isZeroArea(node);
+      } // visible, as far as we can tell, or per current `displayCheck` mode
 
-        return width === 0 && height === 0;
-      }
 
       return false;
     }; // form fields (nested) inside a disabled fieldset are not focusable/tabbable
@@ -9317,29 +9433,21 @@
 
 
     var isDisabledFromFieldset = function isDisabledFromFieldset(node) {
-      if (isInput(node) || node.tagName === 'SELECT' || node.tagName === 'TEXTAREA' || node.tagName === 'BUTTON') {
-        var parentNode = node.parentElement;
+      if (/^(INPUT|BUTTON|SELECT|TEXTAREA)$/.test(node.tagName)) {
+        var parentNode = node.parentElement; // check if `node` is contained in a disabled <fieldset>
 
         while (parentNode) {
           if (parentNode.tagName === 'FIELDSET' && parentNode.disabled) {
-            // look for the first <legend> as an immediate child of the disabled
-            //  <fieldset>: if the node is in that legend, it'll be enabled even
-            //  though the fieldset is disabled; otherwise, the node is in a
-            //  secondary/subsequent legend, or somewhere else within the fieldset
-            //  (however deep nested) and it'll be disabled
+            // look for the first <legend> among the children of the disabled <fieldset>
             for (var i = 0; i < parentNode.children.length; i++) {
-              var child = parentNode.children.item(i);
+              var child = parentNode.children.item(i); // when the first <legend> (in document order) is found
 
               if (child.tagName === 'LEGEND') {
-                if (child.contains(node)) {
-                  return false;
-                } // the node isn't in the first legend (in doc order), so no matter
-                //  where it is now, it'll be disabled
-
-
-                return true;
+                // if its parent <fieldset> is not nested in another disabled <fieldset>,
+                // return whether `node` is a descendant of its first <legend>
+                return matches.call(parentNode, 'fieldset[disabled] *') ? true : !child.contains(node);
               }
-            } // the node isn't in a legend, so no matter where it is now, it'll be disabled
+            } // the disabled <fieldset> containing `node` has no <legend>
 
 
             return true;
@@ -9355,7 +9463,7 @@
     };
 
     var isNodeMatchingSelectorFocusable = function isNodeMatchingSelectorFocusable(options, node) {
-      if (node.disabled || isHiddenInput(node) || isHidden(node, options.displayCheck) || // For a details element with a summary, the summary element gets the focus
+      if (node.disabled || isHiddenInput(node) || isHidden(node, options) || // For a details element with a summary, the summary element gets the focus
       isDetailsWithSummary(node) || isDisabledFromFieldset(node)) {
         return false;
       }
@@ -10747,6 +10855,10 @@
         handleChange() {
             this.$emit("change");
         }
+        /** {@inheritDoc (FormAssociated:interface).validate} */
+        validate() {
+            super.validate(this.control);
+        }
     }
     __decorate$1([
         attr({ attribute: "readonly", mode: "boolean" })
@@ -10915,6 +11027,10 @@
             }
             this.isUserInput = false;
         }
+        /** {@inheritDoc (FormAssociated:interface).validate} */
+        validate() {
+            super.validate(this.control);
+        }
         /**
          * Sets the internal value to a valid number between the min and max properties
          * @param value - user input
@@ -12272,6 +12388,9 @@
              * @internal
              */
             this.keypressHandler = (e) => {
+                if (this.readOnly) {
+                    return;
+                }
                 switch (e.key) {
                     case keyEnter:
                     case keySpace:
@@ -12875,6 +12994,10 @@
         handleChange() {
             this.$emit("change");
         }
+        /** {@inheritDoc (FormAssociated:interface).validate} */
+        validate() {
+            super.validate(this.control);
+        }
     }
     __decorate$1([
         attr({ mode: "boolean" })
@@ -14444,7 +14567,7 @@
         .withPrefix('nimble')
         .register(nimbleAnchoredRegion());
 
-    /*! *****************************************************************************
+    /******************************************************************************
     Copyright (c) Microsoft Corporation.
 
     Permission to use, copy, modify, and/or distribute this software for any
@@ -15267,6 +15390,10 @@
         name: 'check_dot_16_x_16',
         data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><circle class="cls-1" cx="12.5" cy="11.5" r="1.5"/><path class="cls-2" d="M14 4.693l-8.182 8.182L2 9.057 3.636 7.42l2.25 2.25 6.546-6.545z"/></svg>`
     };
+    const checkLarge16X16 = {
+        name: 'check_large_16_x_16',
+        data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M14 4.693l-8.182 8.182L2 9.057 3.636 7.42l2.25 2.25 6.546-6.545L14 4.693z"/></svg>`
+    };
     const circle16X16 = {
         name: 'circle_16_x_16',
         data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M8 2a6 6 0 106 6 6 6 0 00-6-6zm0 9.429A3.429 3.429 0 1111.429 8 3.429 3.429 0 018 11.429z"/></svg>`
@@ -15399,6 +15526,10 @@
         name: 'dot_solid_dot_stroke_16_x_16',
         data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M7 8a3 3 0 11-3-3 3 3 0 013 3zm5-2a2 2 0 102 2 2.002 2.002 0 00-2-2m0-1a3 3 0 11-3 3 3 3 0 013-3z"/></svg>`
     };
+    const dotSolidDotStrokeMeasurement16X16 = {
+        name: 'dot_solid_dot_stroke_measurement_16_x_16',
+        data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M5 3h1v3H5zM6 4h4v1H6zM10 3h1v3h-1zM7 10a3 3 0 11-6 0 3 3 0 016 0zm5-2c-1.103 0-2 .897-2 2s.897 2 2 2 2-.897 2-2-.897-2-2-2m0-1a3 3 0 110 6 3 3 0 010-6z"/></svg>`
+    };
     const download16X16 = {
         name: 'download_16_x_16',
         data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M14 9v5H2V9h1v4h10V9zm-5.982 2L11 5.1 8.996 6.412 9 2H7v4.387L5 5.1z"/></svg>`
@@ -15687,6 +15818,10 @@
         name: 'triangle_16_x_16',
         data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M8 2L2 14h12zm0 4.875l2.438 4.875H5.585z"/></svg>`
     };
+    const triangleFilled16X16 = {
+        name: 'triangle_filled_16_x_16',
+        data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M8 2L2 14h12L8 2z"/></svg>`
+    };
     const trueFalseRectangle16X16 = {
         name: 'true_false_rectangle_16_x_16',
         data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M13.4 3.003H2.6a1.6 1.6 0 00-1.6 1.6v6.8a1.595 1.595 0 001.6 1.594h10.8a1.595 1.595 0 001.6-1.594v-6.8a1.6 1.6 0 00-1.6-1.6zM7.587 6.58H6.141v3.736H4.946V6.58H3.5v-.896h4.087zm4.913 0h-2.13v.862h1.974v.896H10.37v1.978H9.181V5.684H12.5z"/></svg>`
@@ -18119,6 +18254,17 @@
     }
     registerIcon('icon-check-dot', IconCheckDot);
 
+    // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+    /**
+     * The icon component for the 'checkLarge' icon
+     */
+    class IconCheckLarge extends Icon {
+        constructor() {
+            super(checkLarge16X16);
+        }
+    }
+    registerIcon('icon-check-large', IconCheckLarge);
+
     // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
     /**
      * The icon component for the 'circle' icon
@@ -18482,6 +18628,17 @@
     }
     registerIcon('icon-dot-solid-dot-stroke', IconDotSolidDotStroke);
 
+    // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+    /**
+     * The icon component for the 'dotSolidDotStrokeMeasurement' icon
+     */
+    class IconDotSolidDotStrokeMeasurement extends Icon {
+        constructor() {
+            super(dotSolidDotStrokeMeasurement16X16);
+        }
+    }
+    registerIcon('icon-dot-solid-dot-stroke-measurement', IconDotSolidDotStrokeMeasurement);
+
     // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
     /**
      * The icon component for the 'download' icon
@@ -19263,6 +19420,17 @@
     }
     registerIcon('icon-triangle', IconTriangle);
 
+    // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+    /**
+     * The icon component for the 'triangleFilled' icon
+     */
+    class IconTriangleFilled extends Icon {
+        constructor() {
+            super(triangleFilled16X16);
+        }
+    }
+    registerIcon('icon-triangle-filled', IconTriangleFilled);
+
     // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
     /**
      * The icon component for the 'trueFalseRectangle' icon