npm - @ni/nimble-components - Versions diffs - 30.3.1 → 31.1.0 - Mend

@ni/nimble-components 30.3.1 → 31.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (25) hide show

package/README.md +9 -1
package/dist/all-components-bundle.js +60 -42
package/dist/all-components-bundle.js.map +1 -1
package/dist/all-components-bundle.min.js +3476 -3461
package/dist/all-components-bundle.min.js.map +1 -1
package/dist/esm/checkbox/index.js +2 -2
package/dist/esm/checkbox/index.js.map +1 -1
package/dist/esm/combobox/index.js +1 -2
package/dist/esm/combobox/index.js.map +1 -1
package/dist/esm/combobox/template.js +3 -0
package/dist/esm/combobox/template.js.map +1 -1
package/dist/esm/icons/all-icons.d.ts +0 -1
package/dist/esm/icons/all-icons.js +0 -1
package/dist/esm/icons/all-icons.js.map +1 -1
package/dist/esm/patterns/dropdown/styles.js +16 -6
package/dist/esm/patterns/dropdown/styles.js.map +1 -1
package/dist/esm/select/index.d.ts +4 -0
package/dist/esm/select/index.js +14 -0
package/dist/esm/select/index.js.map +1 -1
package/dist/esm/select/template.js +4 -0
package/dist/esm/select/template.js.map +1 -1
package/package.json +3 -3
package/dist/esm/icons/check-large.d.ts +0 -13
package/dist/esm/icons/check-large.js +0 -15
package/dist/esm/icons/check-large.js.map +0 -1

package/README.md CHANGED Viewed

@@ -31,8 +31,16 @@ If you have an existing application that incorporates a module bundler like [Web
 If you have a static webpage without a bundler, you can use `@ni/nimble-components` by including one of the bundled distribution files. For example:
 ```html
-<html>
+<!doctype html>
+<html lang="en">
     <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width" />
+        <title>Nimble Example</title>
+        <link
+            rel="stylesheet"
+            href="https://unpkg.com/@ni/nimble-tokens/dist/fonts/css/fonts.css"
+        />
         <script src="https://unpkg.com/@ni/nimble-components/dist/all-components-bundle.js"></script>
     </head>
     <body>

package/dist/all-components-bundle.js CHANGED Viewed

@@ -16032,7 +16032,7 @@
   /**
    * Do not edit directly
-   * Generated on Thu, 01 Aug 2024 16:35:55 GMT
+   * Generated on Fri, 02 Aug 2024 22:39:40 GMT
    */
   const Information100DarkUi = "#a46eff";
@@ -18916,16 +18916,12 @@
   };
   const check16X16 = {
       name: 'check_16_x_16',
-      data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M13 5.287 6.182 12 3 8.867l1.363-1.343L6.24 9.37 11.693 4Z" class="cls-1"/></svg>`,
+      data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m14 4.693-8.182 8.182L2 9.057 3.636 7.42l2.25 2.25 6.546-6.545z" class="cls-1"/></svg>`,
   };
   const checkDot16X16 = {
       name: 'check_dot_16_x_16',
       data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><circle cx="12.5" cy="11.5" r="1.5" class="cls-1"/><path d="m14 4.693-8.182 8.182L2 9.057 3.636 7.42l2.25 2.25 6.546-6.545Z" class="cls-2"/></svg>`,
   };
-  const checkLarge16X16 = {
-      name: 'check_large_16_x_16',
-      data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m14 4.693-8.182 8.182L2 9.057 3.636 7.42l2.25 2.25 6.546-6.545z" class="cls-1"/></svg>`,
-  };
   const circle16X16 = {
       name: 'circle_16_x_16',
       data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8 2a6 6 0 1 0 6 6 6 6 0 0 0-6-6m0 9.429A3.429 3.429 0 1 1 11.429 8 3.43 3.43 0 0 1 8 11.429" class="cls-1"/></svg>`,
@@ -20335,7 +20331,7 @@ so this becomes the fallback color for the slot */ ''}
       baseClass: Checkbox$1,
       template: template$A,
       styles: styles$M,
-      checkedIndicator: checkLarge16X16.data,
+      checkedIndicator: check16X16.data,
       indeterminateIndicator: minus16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCheckbox());
@@ -20532,9 +20528,9 @@ so this becomes the fallback color for the slot */ ''}
     :host {
         color: ${bodyFontColor};
         font: ${bodyFont};
-        height: ${controlHeight};
         position: relative;
-        justify-content: center;
+        flex-direction: column;
+        justify-content: flex-start;
         ${userSelectNone}
         min-width: ${menuMinWidth};
         outline: none;
@@ -20550,7 +20546,7 @@ so this becomes the fallback color for the slot */ ''}
         bottom: calc(${borderWidth} + var(--ni-private-indicator-lines-gap));
         width: 0px;
         height: 0px;
-        justify-self: center;
+        align-self: center;
         border-bottom: ${borderHoverColor}
             var(--ni-private-focus-indicator-width) solid;
         transition: width ${smallDelay} ease-in;
@@ -20576,7 +20572,7 @@ so this becomes the fallback color for the slot */ ''}
         bottom: calc(-1 * ${borderWidth});
         width: 0px;
         height: 0px;
-        justify-self: center;
+        align-self: center;
         border-bottom: ${borderHoverColor}
             var(--ni-private-hover-indicator-width) solid;
         transition: width ${smallDelay} ease-in;
@@ -20601,12 +20597,22 @@ so this becomes the fallback color for the slot */ ''}
         width: 0px;
     }
+    .label {
+        display: flex;
+        color: ${controlLabelFontColor};
+        font: ${controlLabelFont};
+    }
+    :host([disabled]) .label {
+        color: ${controlLabelDisabledFontColor};
+    }
     .control {
         align-items: center;
         cursor: pointer;
         display: flex;
-        min-height: 100%;
         width: 100%;
+        height: ${controlHeight};
         border: 0px solid rgba(${borderRgbPartialColor}, 0.3);
         background-color: transparent;
         padding: ${borderWidth};
@@ -20979,6 +20985,9 @@ so this becomes the fallback color for the slot */ ''}
         @focusout="${(x, c) => x.focusoutHandler(c.event)}"
         @keydown="${(x, c) => x.keydownHandler(c.event)}"
     >
+        <label part="label" class="label">
+            <slot></slot>
+        </label>
         <div class="control" part="control" ${ref('controlWrapper')}>
             ${startSlotTemplate(context, definition)}
             <slot name="control">
@@ -21743,8 +21752,7 @@ so this becomes the fallback color for the slot */ ''}
                 @keydown="${(x, c) => x.toggleButtonKeyDownHandler(c.event)}"
                 class="dropdown-button"
                 part="button"
-                aria-haspopup="true"
-                aria-expanded="${x => x.open}"
+                aria-hidden="true"
                 tabindex="-1"
             >
                 <${iconArrowExpanderDownTag}
@@ -22883,18 +22891,6 @@ so this becomes the fallback color for the slot */ ''}
   }
   registerIcon('icon-check-dot', IconCheckDot);
-  // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
-  // See generation source in nimble-components/build/generate-icons
-  /**
-   * 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
   // See generation source in nimble-components/build/generate-icons
   /**
@@ -39416,21 +39412,26 @@ so this becomes the fallback color for the slot */ ''}
       }
       let before = $cut.nodeBefore;
       // Apply the joining algorithm
-      if (!before.type.spec.isolating && deleteBarrier(state, $cut, dispatch))
+      if (deleteBarrier(state, $cut, dispatch, -1))
           return true;
       // If the node below has no content and the node above is
       // selectable, delete the node below and select the one above.
       if ($cursor.parent.content.size == 0 &&
           (textblockAt(before, "end") || NodeSelection.isSelectable(before))) {
-          let delStep = replaceStep(state.doc, $cursor.before(), $cursor.after(), Slice.empty);
-          if (delStep && delStep.slice.size < delStep.to - delStep.from) {
-              if (dispatch) {
-                  let tr = state.tr.step(delStep);
-                  tr.setSelection(textblockAt(before, "end") ? Selection$2.findFrom(tr.doc.resolve(tr.mapping.map($cut.pos, -1)), -1)
-                      : NodeSelection.create(tr.doc, $cut.pos - before.nodeSize));
-                  dispatch(tr.scrollIntoView());
+          for (let depth = $cursor.depth;; depth--) {
+              let delStep = replaceStep(state.doc, $cursor.before(depth), $cursor.after(depth), Slice.empty);
+              if (delStep && delStep.slice.size < delStep.to - delStep.from) {
+                  if (dispatch) {
+                      let tr = state.tr.step(delStep);
+                      tr.setSelection(textblockAt(before, "end")
+                          ? Selection$2.findFrom(tr.doc.resolve(tr.mapping.map($cut.pos, -1)), -1)
+                          : NodeSelection.create(tr.doc, $cut.pos - before.nodeSize));
+                      dispatch(tr.scrollIntoView());
+                  }
+                  return true;
               }
-              return true;
+              if (depth == 1 || $cursor.node(depth - 1).childCount > 1)
+                  break;
           }
       }
       // If the node before is an atom, delete it
@@ -39562,7 +39563,7 @@ so this becomes the fallback color for the slot */ ''}
           return false;
       let after = $cut.nodeAfter;
       // Try the joining algorithm
-      if (deleteBarrier(state, $cut, dispatch))
+      if (deleteBarrier(state, $cut, dispatch, 1))
           return true;
       // If the node above has no content and the node below is
       // selectable, delete the node above and select the one below.
@@ -39794,13 +39795,12 @@ so this becomes the fallback color for the slot */ ''}
               .scrollIntoView());
       return true;
   }
-  function deleteBarrier(state, $cut, dispatch) {
+  function deleteBarrier(state, $cut, dispatch, dir) {
       let before = $cut.nodeBefore, after = $cut.nodeAfter, conn, match;
-      if (before.type.spec.isolating || after.type.spec.isolating)
-          return false;
-      if (joinMaybeClear(state, $cut, dispatch))
+      let isolated = before.type.spec.isolating || after.type.spec.isolating;
+      if (!isolated && joinMaybeClear(state, $cut, dispatch))
           return true;
-      let canDelAfter = $cut.parent.canReplace($cut.index(), $cut.index() + 1);
+      let canDelAfter = !isolated && $cut.parent.canReplace($cut.index(), $cut.index() + 1);
       if (canDelAfter &&
           (conn = (match = before.contentMatchAt(before.childCount)).findWrapping(after.type)) &&
           match.matchType(conn[0] || after.type).validEnd) {
@@ -39817,7 +39817,7 @@ so this becomes the fallback color for the slot */ ''}
           }
           return true;
       }
-      let selAfter = Selection$2.findFrom($cut, 1);
+      let selAfter = after.type.spec.isolating || (dir > 0 && isolated) ? null : Selection$2.findFrom($cut, 1);
       let range = selAfter && selAfter.$from.blockRange(selAfter.$to), target = range && liftTarget(range);
       if (target != null && target >= $cut.depth) {
           if (dispatch)
@@ -60378,6 +60378,7 @@ img.ProseMirror-separator {
         aria-disabled="${x => x.ariaDisabled}"
         aria-expanded="${x => x.ariaExpanded}"
         aria-haspopup="${x => (x.collapsible ? 'listbox' : null)}"
+        aria-label="${x => x.labelContent}"
         aria-multiselectable="${x => x.ariaMultiSelectable}"
         ?open="${x => x.open}"
         role="combobox"
@@ -60389,6 +60390,9 @@ img.ProseMirror-separator {
         @keydown="${(x, c) => x.keydownHandler(c.event)}"
         @mousedown="${(x, c) => x.mousedownHandler(c.event)}"
     >
+        <label part="label" class="label" aria-hidden="true">
+            <slot ${ref('labelSlot')}></slot>
+        </label>
         ${when(x => x.collapsible, html `
             <div
                 class="control"
@@ -60574,6 +60578,17 @@ img.ProseMirror-separator {
       get collapsible() {
           return !(this.multiple || typeof this.size === 'number');
       }
+      /** @internal */
+      get labelContent() {
+          if (!this.$fastController.isConnected) {
+              return '';
+          }
+          const nodes = this.labelSlot.assignedNodes();
+          return nodes
+              .filter(node => node.textContent?.trim() !== '')
+              .map(node => node.textContent?.trim())
+              .join(' ');
+      }
       /**
        * @internal
        */
@@ -61539,6 +61554,9 @@ img.ProseMirror-separator {
   __decorate$1([
       volatile
   ], Select.prototype, "collapsible", null);
+  __decorate$1([
+      volatile
+  ], Select.prototype, "labelContent", null);
   __decorate$1([
       volatile
   ], Select.prototype, "displayValue", null);