@ni/nimble-components 35.2.1 → 35.2.3

package/dist/all-components-bundle.js

@@ -39923,7 +39923,17 @@ so this becomes the fallback color for the slot */ ''}
                   }
               }
           }
-          if (gecko && added.length) {
+          if (added.some(n => n.nodeName == "BR") && (view.input.lastKeyCode == 8 || view.input.lastKeyCode == 46)) {
+              // Browsers sometimes insert a bogus break node if you
+              // backspace out the last bit of text before an inline-flex node (#1552)
+              for (let node of added)
+                  if (node.nodeName == "BR" && node.parentNode) {
+                      let after = node.nextSibling;
+                      if (after && after.nodeType == 1 && after.contentEditable == "false")
+                          node.parentNode.removeChild(node);
+                  }
+          }
+          else if (gecko && added.length) {
               let brs = added.filter(n => n.nodeName == "BR");
               if (brs.length == 2) {
                   let [a, b] = brs;
@@ -39941,17 +39951,6 @@ so this becomes the fallback color for the slot */ ''}
                   }
               }
           }
-          else if ((chrome || safari) && added.some(n => n.nodeName == "BR") &&
-              (view.input.lastKeyCode == 8 || view.input.lastKeyCode == 46)) {
-              // Chrome/Safari sometimes insert a bogus break node if you
-              // backspace out the last bit of text before an inline-flex node (#1552)
-              for (let node of added)
-                  if (node.nodeName == "BR" && node.parentNode) {
-                      let after = node.nextSibling;
-                      if (after && after.nodeType == 1 && after.contentEditable == "false")
-                          node.parentNode.removeChild(node);
-                  }
-          }
           let readSel = null;
           // If it looks like the browser has reset the selection to the
           // start of the document after focus, restore the selection from
@@ -56745,7 +56744,7 @@ ${renderedContent}
       */
       isMarkAhead(parent, index, mark) {
           for (;; index++) {
-              if (index == parent.childCount)
+              if (index >= parent.childCount)
                   return false;
               let next = parent.child(index);
               if (next.type.name != this.options.hardBreakNodeName)
@@ -59607,6 +59606,9 @@ ${renderedContent}
         },
         class: {
           default: this.options.HTMLAttributes.class
+        },
+        title: {
+          default: null
         }
       };
     },
@@ -59646,10 +59648,11 @@ ${renderedContent}
       });
     },
     renderMarkdown: (node, h) => {
-      var _a;
-      const href = ((_a = node.attrs) == null ? void 0 : _a.href) || "";
+      var _a, _b, _c, _d;
+      const href = (_b = (_a = node.attrs) == null ? void 0 : _a.href) != null ? _b : "";
+      const title = (_d = (_c = node.attrs) == null ? void 0 : _c.title) != null ? _d : "";
       const text = h.renderChildren(node);
-      return `[${text}](${href})`;
+      return title ? `[${text}](${href} "${title}")` : `[${text}](${href})`;
     },
     addCommands() {
       return {
@@ -65438,7 +65441,9 @@ ${nextLine.slice(indentLevel + 2)}`;
         flex-direction: column;
         cursor: pointer;
         --ni-private-switch-height: 24px;
-        --ni-private-switch-indicator-size: 16px;
+        --ni-private-switch-indicator-size: 24px;
+        --ni-private-switch-indicator-inner-size: 18px;
+        --ni-private-switch-indicator-margin: -2px;
         padding-bottom: calc(
             ${controlHeight} - var(--ni-private-switch-height)
         );
@@ -65476,20 +65481,36 @@ ${nextLine.slice(indentLevel + 2)}`;
         display: flex;
         height: var(--ni-private-switch-height);
         width: calc(var(--ni-private-switch-height) * 2);
-        background-color: ${fillHoverColor};
+        background-color: var(--ni-private-switch-background-color);
         border-radius: calc(var(--ni-private-switch-height) / 2);
         align-items: center;
-        border: calc(${borderWidth} * 2) solid transparent;
+        border: calc(${borderWidth}) solid transparent;
     }
 
-    :host([disabled]) .switch {
-        background-color: var(--ni-private-switch-background-disabled-color);
+    :host([aria-checked='true']) .switch {
+        background-color: var(--ni-private-switch-background-selected-color);
+    }
+
+    :host([aria-checked='true']:hover) .switch {
+        background-color: var(--ni-private-switch-background-selected-rollover-color);
     }
 
     :host(${focusVisible}) .switch {
         border-color: ${borderHoverColor};
     }
 
+    :host(${focusVisible}[aria-checked='true']) .switch {
+        background-color: var(--ni-private-switch-background-selected-rollover-color);
+    }
+
+    :host([disabled]) .switch {
+        background-color: var(--ni-private-switch-background-disabled-color);
+    }
+
+    :host([disabled]:hover) .switch {
+        background-color: var(--ni-private-switch-background-disabled-color);
+    }
+
     .checked-indicator-spacer {
         flex-grow: 0;
         transition: flex-grow ${smallDelay} ease-in-out;
@@ -65507,51 +65528,81 @@ ${nextLine.slice(indentLevel + 2)}`;
         width: var(--ni-private-switch-indicator-size);
         height: var(--ni-private-switch-indicator-size);
         border-radius: calc(var(--ni-private-switch-indicator-size) / 2);
-        margin: calc(
-            calc(
-                    var(--ni-private-switch-height) - var(
-                            --ni-private-switch-indicator-size
-                        )
-                ) /
-                2
-        );
+        margin: var(--ni-private-switch-indicator-margin);
         border: ${borderWidth} solid
             var(--ni-private-switch-indicator-border-color);
     }
 
+    :host([aria-checked='true']) .checked-indicator {
+        border-color: var(--ni-private-switch-indicator-border-selected-color);
+    }
+
     :host(:hover) .checked-indicator {
         border: calc(${borderWidth} * 2) solid ${borderHoverColor};
     }
 
+    :host(${focusVisible}) .checked-indicator {
+        border: calc(${borderWidth} * 2) solid ${borderHoverColor};
+    }
+
     :host([disabled]) .checked-indicator {
-        background-color: var(
-            --ni-private-switch-indicator-background-disabled-color
-        );
+        background-color: transparent;
         border: ${borderWidth} solid
             var(--ni-private-switch-indicator-border-disabled-color);
     }
 
-    :host(${focusVisible}) .checked-indicator {
-        border: ${borderWidth} solid ${borderHoverColor};
+    :host([disabled]:hover) .checked-indicator {
+        background-color: transparent;
+        border: ${borderWidth} solid
+            var(--ni-private-switch-indicator-border-disabled-color);
     }
 
-    .checked-indicator-inner {
-        width: calc(var(--ni-private-switch-indicator-size) / 2);
-        height: calc(var(--ni-private-switch-indicator-size) / 2);
-        border-radius: calc(var(--ni-private-switch-indicator-size) / 4);
-        background-color: var(--ni-private-switch-indicator-border-color);
+    :host([disabled]${focusVisible}) .checked-indicator {
+        background-color: transparent;
+        border: ${borderWidth} solid
+            var(--ni-private-switch-indicator-border-disabled-color);
+    }
+
+    :host([disabled]:active) .checked-indicator-inner {
+        background-color: var(
+            --ni-private-switch-indicator-border-disabled-color
+        );
         opacity: 0;
-        transition: opacity ${smallDelay} ease-in-out;
     }
 
-    :host([disabled]) .checked-indicator-inner {
+    :host([disabled]${focusVisible}) .checked-indicator-inner {
         background-color: var(
             --ni-private-switch-indicator-border-disabled-color
         );
+        opacity: 0;
+    }
+
+    .checked-indicator-inner {
+        width: var(--ni-private-switch-indicator-inner-size);
+        height: var(--ni-private-switch-indicator-inner-size);
+        border-radius: calc(var(--ni-private-switch-indicator-inner-size) / 2);
+        opacity: 0;
     }
 
     :host([aria-checked='true']) .checked-indicator-inner {
+        opacity: 0;
+    }
+
+    :host(${focusVisible}) .checked-indicator-inner {
         opacity: 1;
+        background-color: var(--ni-private-switch-indicator-background-color);
+        border: 1px solid var(--ni-private-switch-indicator-border-selected-color);
+    }
+
+    :host(:active) .checked-indicator-inner {
+        opacity: 1;
+        background-color: var(--ni-private-switch-indicator-background-active-color);
+    }
+
+    :host([disabled]) .checked-indicator-inner {
+        background-color: var(
+            --ni-private-switch-indicator-border-disabled-color
+        );
     }
 
     slot[name='checked-message']::slotted(*) {
@@ -65566,26 +65617,43 @@ ${nextLine.slice(indentLevel + 2)}`;
     }
 `.withBehaviors(themeBehavior(Theme.light, css `
             :host {
+                --ni-private-switch-background-color: ${hexToRgbaCssColor(Black91, 0.1)};
                 --ni-private-switch-background-disabled-color: ${hexToRgbaCssColor(Black91, 0.07)};
+                --ni-private-switch-background-selected-color: ${hexToRgbaCssColor(DigitalGreenLight, 0.6)};
+                --ni-private-switch-background-selected-rollover-color: ${hexToRgbaCssColor(DigitalGreenLight, 0.3)};
                 --ni-private-switch-indicator-background-color: ${White};
-                --ni-private-switch-indicator-background-disabled-color: ${hexToRgbaCssColor(White, 0.1)};
-                --ni-private-switch-indicator-border-color: ${Black91};
-                --ni-private-switch-indicator-border-disabled-color: ${hexToRgbaCssColor(Black91, 0.3)};
+                --ni-private-switch-indicator-background-disabled-color: ${hexToRgbaCssColor(Black91, 0.15)};
+                --ni-private-switch-indicator-background-active-color: ${hexToRgbaCssColor(DigitalGreenLight, 0.3)};
+
+                --ni-private-switch-indicator-border-color: ${hexToRgbaCssColor(Black91, 0.3)};
+                --ni-private-switch-indicator-border-selected-color: ${DigitalGreenLight};
+                --ni-private-switch-indicator-border-disabled-color: ${hexToRgbaCssColor(Black91, 0.15)};
+                
             }
         `), themeBehavior(Theme.dark, css `
             :host {
+                --ni-private-switch-background-color: ${hexToRgbaCssColor(Black15, 0.1)};
                 --ni-private-switch-background-disabled-color: ${hexToRgbaCssColor(Black15, 0.07)};
-                --ni-private-switch-indicator-background-color: ${hexToRgbaCssColor(Black91, 0.3)};
-                --ni-private-switch-indicator-background-disabled-color: ${hexToRgbaCssColor(Black91, 0.1)};
-                --ni-private-switch-indicator-border-color: ${Black7};
-                --ni-private-switch-indicator-border-disabled-color: ${hexToRgbaCssColor(Black7, 0.3)};
+                --ni-private-switch-background-selected-color: ${hexToRgbaCssColor(PowerGreen, 0.6)};
+                --ni-private-switch-background-selected-rollover-color: ${hexToRgbaCssColor(PowerGreen, 0.3)};
+                --ni-private-switch-indicator-background-color: ${Black75};
+                --ni-private-switch-indicator-background-disabled-color: ${hexToRgbaCssColor(Black15, 0.1)};
+                --ni-private-switch-indicator-background-active-color: ${hexToRgbaCssColor(PowerGreen, 0.3)};
+                --ni-private-switch-indicator-border-color: ${hexToRgbaCssColor(Black15, 0.3)};
+                --ni-private-switch-indicator-border-selected-color: ${PowerGreen};
+                --ni-private-switch-indicator-border-disabled-color: ${hexToRgbaCssColor(Black15, 0.15)};
             }
         `), themeBehavior(Theme.color, css `
             :host {
+                --ni-private-switch-background-color: ${hexToRgbaCssColor(White, 0.1)};
                 --ni-private-switch-background-disabled-color: ${hexToRgbaCssColor(White, 0.07)};
-                --ni-private-switch-indicator-background-color: ${hexToRgbaCssColor(White, 0.1)};
+                --ni-private-switch-background-selected-color: ${hexToRgbaCssColor(White, 0.6)};
+                --ni-private-switch-background-selected-rollover-color: ${hexToRgbaCssColor(White, 0.3)};
+                --ni-private-switch-indicator-background-color: ${hexToRgbaCssColor(White, 0.3)};
                 --ni-private-switch-indicator-background-disabled-color: ${hexToRgbaCssColor(White, 0.1)};
-                --ni-private-switch-indicator-border-color: ${White};
+                --ni-private-switch-indicator-background-active-color: ${hexToRgbaCssColor(White, 0.3)};
+                --ni-private-switch-indicator-border-color: ${hexToRgbaCssColor(White, 0.3)};
+                --ni-private-switch-indicator-border-selected-color: ${White} ;
                 --ni-private-switch-indicator-border-disabled-color: ${hexToRgbaCssColor(White, 0.3)};
             }
         `));