@ni/nimble-components 18.13.1 → 18.13.2

package/dist/all-components-bundle.js

@@ -2618,6 +2618,16 @@
             }
         }
     }
+    /**
+     * Transforms a template literal string into partial CSS.
+     * @param strings - The string fragments that are interpolated with the values.
+     * @param values - The values that are interpolated with the string fragments.
+     * @public
+     */
+    function cssPartial(strings, ...values) {
+        const { styles, behaviors } = collectStyles(strings, values);
+        return new CSSPartial(styles, behaviors);
+    }
 
     /** @internal */
     function newSplice(index, removed, addedCount) {
@@ -16356,7 +16366,7 @@
 
     /**
      * Do not edit directly
-     * Generated on Fri, 05 May 2023 15:11:52 GMT
+     * Generated on Fri, 05 May 2023 20:05:11 GMT
      */
     const Information100DarkUi = "#a46eff";
     const Information100LightUi = "#804ad9";
@@ -18210,6 +18220,15 @@
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTabs());
     DesignSystem.tagFor(AnchorTabs);
 
+    /**
+     * Set user-select: none in a way that works across all supported browsers.
+     * https://developer.mozilla.org/en-US/docs/Web/CSS/user-select#browser_compatibility
+     */
+    const userSelectNone = cssPartial `
+    user-select: none;
+    -webkit-user-select: none;
+`;
+
     const styles$H = css `
     ${display('block')}
 
@@ -18277,7 +18296,7 @@
         padding-left: 10px;
         font: inherit;
         font-size: ${bodyFontSize};
-        user-select: none;
+        ${userSelectNone}
         position: relative;
         margin-inline-start: ${iconSize};
     }
@@ -19420,7 +19439,7 @@
 
     :host {
         align-items: center;
-        user-select: none;
+        ${userSelectNone}
         width: ${iconSize};
         height: ${iconSize};
     }
@@ -19965,7 +19984,7 @@
         align-items: center;
         cursor: pointer;
         outline: none;
-        user-select: none;
+        ${userSelectNone}
     }
 
     :host([disabled]) {
@@ -20227,7 +20246,7 @@
         height: ${controlHeight};
         position: relative;
         justify-content: center;
-        user-select: none;
+        ${userSelectNone}
         min-width: 250px;
         outline: none;
         vertical-align: top;
@@ -20501,7 +20520,7 @@
 
     :host([disabled]) *,
     :host([disabled]) {
-        user-select: none;
+        ${userSelectNone}
         color: ${bodyDisabledFontColor};
     }
 
@@ -23676,7 +23695,7 @@
     :host {
         font: ${bodyFont};
         outline: none;
-        user-select: none;
+        ${userSelectNone}
         color: ${bodyFontColor};
         --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);
         --ni-private-height-within-border: calc(
@@ -23728,7 +23747,7 @@
         content: ' ';
         color: transparent;
         width: 0px;
-        user-select: none;
+        ${userSelectNone}
     }
 
     .root::after {
@@ -28814,7 +28833,7 @@
 
     .group-header-view {
         padding-left: calc(${standardPadding} / 2);
-        user-select: none;
+        ${userSelectNone}
         overflow: hidden;
         display: flex;
     }
@@ -28822,7 +28841,7 @@
     .group-row-child-count {
         padding-left: 2px;
         pointer-events: none;
-        user-select: none;
+        ${userSelectNone}
     }
 
     @media (prefers-reduced-motion) {
@@ -31298,7 +31317,7 @@
     :host {
         font: ${bodyFont};
         outline: none;
-        user-select: none;
+        ${userSelectNone}
         color: ${bodyFontColor};
         flex-direction: column;
         vertical-align: top;
@@ -31644,8 +31663,7 @@
     :host {
         font: ${bodyFont};
         outline: none;
-        user-select: none;
-        --webkit-user-select: none;
+        ${userSelectNone}
         color: ${bodyFontColor};
         --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);
         --ni-private-height-within-border: calc(
@@ -31707,7 +31725,7 @@
         content: ' ';
         color: transparent;
         width: 0px;
-        user-select: none;
+        ${userSelectNone}
     }
 
     :host([appearance='frameless'][full-bleed]) .root::before {
@@ -31719,7 +31737,7 @@
         content: ' ';
         color: transparent;
         width: 0px;
-        user-select: none;
+        ${userSelectNone}
     }
 
     :host([appearance='frameless'][full-bleed]) .root::after {
@@ -32264,7 +32282,7 @@
         padding-left: 10px;
         font: inherit;
         font-size: ${bodyFontSize};
-        user-select: none;
+        ${userSelectNone}
         position: relative;
         margin-inline-start: ${iconSize};
     }