@ni/spright-components 1.0.18 → 1.0.19

package/dist/all-components-bundle.js

@@ -15159,10 +15159,12 @@
   }
 
   /**
-   * This utility will generate the appropriate display style, as well as a style rule
-   * to hide the host element when its `hidden` attribute is set.
+   * Each element should use the display utility which will create styles to:
+   * - Set the `:host` display property
+   * - Respond to the `hidden` attribute set on `:host`
+   * - Configure `box-sizing` for `:host`, all elements in shadow root, and `::before` / `::after` pseudoelements
    */
-  const display$1 = (displayValue) => `${display$2(displayValue)}`;
+  const display$1 = (displayValue) => `${display$2(displayValue)}:host{box-sizing:border-box;}*{box-sizing:border-box;}:host::before,:host::after,::before,::after{box-sizing:border-box;}`;
 
   /**
    * This file is a workaround for: https://github.com/prettier/prettier/issues/11400
@@ -16278,7 +16280,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Sat, 08 Jun 2024 17:42:14 GMT
+   * Generated on Tue, 11 Jun 2024 19:14:08 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -17019,7 +17021,6 @@
         ${display$1('inline')}
 
         :host {
-            box-sizing: border-box;
             font: ${linkFont};
         }
 
@@ -17322,7 +17323,6 @@
             cursor: pointer;
             outline: none;
             border: none;
-            box-sizing: border-box;
             ${
 /*
     Not sure why but this is needed to get buttons with icons and buttons
@@ -17337,7 +17337,6 @@
             height: 100%;
             width: 100%;
             border: ${borderWidth} solid transparent;
-            box-sizing: border-box;
             color: inherit;
             border-radius: inherit;
             fill: inherit;
@@ -17371,10 +17370,9 @@
             width: 100%;
             height: 100%;
             pointer-events: none;
-            box-sizing: border-box;
             outline: 0px solid transparent;
             color: transparent;
-            background-clip: content-box;
+            background-clip: border-box;
             transition: outline ${smallDelay} ease-in-out;
         }
 
@@ -17721,7 +17719,6 @@
         display: grid;
         contain: layout;
         overflow: visible;
-        box-sizing: border-box;
         height: ${controlHeight};
         grid-template-columns: 1fr;
         column-gap: 8px;
@@ -17899,7 +17896,6 @@
 
     :host {
         position: relative;
-        box-sizing: border-box;
         font: ${buttonLabelFont};
         height: ${controlHeight};
         color: ${bodyFontColor};
@@ -18075,7 +18071,6 @@
     ${display$1('grid')}
 
     :host {
-        box-sizing: border-box;
         grid-template-columns: auto 1fr;
         grid-template-rows: auto 1fr;
     }
@@ -18352,7 +18347,6 @@
     .positioning-region {
         display: flex;
         position: relative;
-        box-sizing: border-box;
         height: calc(${iconSize} * 2);
         width: 100%;
     }
@@ -19970,7 +19964,6 @@
     ${display$1('inline-block')}
 
     :host {
-        box-sizing: border-box;
         font: ${linkFont};
         --ni-private-breadcrumb-link-font-color: ${linkFontColor};
         --ni-private-breadcrumb-link-active-font-color: ${linkActiveFontColor};
@@ -20016,7 +20009,6 @@
 
     :host {
         height: ${controlHeight};
-        box-sizing: border-box;
         padding-left: calc(4px - ${borderWidth});
 
         ${
@@ -20150,7 +20142,6 @@
         cursor: pointer;
         outline: none;
         border: none;
-        box-sizing: border-box;
         transition: box-shadow ${smallDelay};
     }
 
@@ -20324,7 +20315,6 @@
     .control {
         width: calc(${controlHeight} / 2);
         height: calc(${controlHeight} / 2);
-        box-sizing: border-box;
         flex-shrink: 0;
         border: ${borderWidth} solid ${borderColor};
         padding: 2px;
@@ -20660,7 +20650,6 @@
     ${display$1('inline-flex')}
 
     :host {
-        box-sizing: border-box;
         color: ${bodyFontColor};
         font: ${bodyFont};
         height: ${controlHeight};
@@ -20738,7 +20727,6 @@
 
     .control {
         align-items: center;
-        box-sizing: border-box;
         cursor: pointer;
         display: flex;
         min-height: 100%;
@@ -20765,7 +20753,6 @@
     }
 
     .listbox {
-        box-sizing: border-box;
         display: inline-flex;
         flex-direction: column;
         overflow-y: auto;
@@ -20983,7 +20970,7 @@
         border-right: 2px solid rgba(${borderRgbPartialColor}, 0.15);
         height: calc(${controlHeight} - 12px);
         align-self: center;
-        padding-left: 4px;
+        margin-left: 4px;
     }
 
     .dropdown-button {
@@ -22120,7 +22107,6 @@
     }
 
     .dialog-contents {
-        box-sizing: border-box;
         display: flex;
         flex-direction: column;
         position: absolute;
@@ -25448,7 +25434,7 @@
     }
 
     ::slotted(hr) {
-        box-sizing: content-box;
+        box-sizing: border-box;
         height: 2px;
         margin: ${smallPadding};
         border: none;
@@ -25793,7 +25779,6 @@
     :host {
         contain: layout;
         overflow: visible;
-        box-sizing: border-box;
         height: ${controlHeight};
         grid-template-columns: 1fr;
         column-gap: 8px;
@@ -25930,7 +25915,6 @@
     }
 
     .root {
-        box-sizing: border-box;
         position: relative;
         display: flex;
         flex-direction: row;
@@ -26047,7 +26031,7 @@
 
     .error-icon {
         order: 1;
-        padding-right: ${smallPadding};
+        margin-right: ${smallPadding};
     }
 `.withBehaviors(appearanceBehavior(NumberFieldAppearance.underline, css `
             .root {
@@ -26177,7 +26161,6 @@
         position: relative;
         width: calc(${controlHeight} / 2);
         height: calc(${controlHeight} / 2);
-        box-sizing: border-box;
         flex-shrink: 0;
         border: ${borderWidth} solid ${borderColor};
         border-radius: 100%;
@@ -44448,7 +44431,6 @@ img.ProseMirror-separator {
     }
 
     .container {
-        box-sizing: border-box;
         display: flex;
         flex-direction: column;
         position: relative;
@@ -44529,7 +44511,6 @@ img.ProseMirror-separator {
         ${
 /* This padding ensures that showing/hiding the error icon doesn't affect text layout */ ''}
         padding-right: calc(${iconSize});
-        box-sizing: border-box;
         position: relative;
         color: inherit;
     }
@@ -44651,7 +44632,6 @@ img.ProseMirror-separator {
     ${toolbarTag}::part(positioning-region) {
         background: transparent;
         padding-right: 8px;
-        box-sizing: border-box;
         gap: 0px;
         height: var(--ni-private-rich-text-editor-footer-section-height);
     }
@@ -59224,7 +59204,6 @@ img.ProseMirror-separator {
     .viewer {
         font: inherit;
         outline: none;
-        box-sizing: border-box;
         position: relative;
         color: inherit;
         overflow-wrap: anywhere;
@@ -60867,7 +60846,6 @@ img.ProseMirror-separator {
         display: flex;
         height: var(--ni-private-switch-height);
         width: calc(var(--ni-private-switch-height) * 2);
-        box-sizing: border-box;
         background-color: ${fillHoverColor};
         border-radius: calc(var(--ni-private-switch-height) / 2);
         align-items: center;
@@ -60896,7 +60874,6 @@ img.ProseMirror-separator {
         justify-content: center;
         align-items: center;
         background-color: var(--ni-private-switch-indicator-background-color);
-        box-sizing: border-box;
         width: var(--ni-private-switch-indicator-size);
         height: var(--ni-private-switch-indicator-size);
         border-radius: calc(var(--ni-private-switch-indicator-size) / 2);
@@ -61037,7 +61014,6 @@ img.ProseMirror-separator {
 
     :host {
         position: relative;
-        box-sizing: border-box;
         font: ${buttonLabelFont};
         height: ${controlHeight};
         color: ${bodyFontColor};
@@ -61151,7 +61127,6 @@ img.ProseMirror-separator {
     ${display$1('block')}
 
     :host {
-        box-sizing: border-box;
         font: ${bodyFont};
         color: ${bodyFontColor};
         padding-top: ${standardPadding};
@@ -65191,7 +65166,6 @@ img.ProseMirror-separator {
         background-color: ${applicationBackgroundColor};
         height: calc(${controlHeight} + 2 * ${borderWidth});
         border-top: calc(2 * ${borderWidth}) solid transparent;
-        box-sizing: border-box;
         background-clip: padding-box;
     }
 
@@ -65200,7 +65174,6 @@ img.ProseMirror-separator {
         width: 100%;
         height: ${controlHeight};
         pointer-events: none;
-        box-sizing: border-box;
         bottom: 0px;
         position: absolute;
     }
@@ -65219,9 +65192,13 @@ img.ProseMirror-separator {
 
     .expand-collapse-button {
         flex: 0 0 auto;
-        padding-left: calc(
-            ${mediumPadding} + (var(--ni-private-table-row-indent-level) - 1) *
-                ${controlHeight}
+        margin-left: max(
+            calc(
+                ${mediumPadding} +
+                    (var(--ni-private-table-row-indent-level) - 1) *
+                    ${controlHeight}
+            ),
+            0px
         );
     }
 
@@ -65233,9 +65210,13 @@ img.ProseMirror-separator {
         display: flex;
         align-items: center;
         justify-content: center;
-        padding-left: calc(
-            ${mediumPadding} + (var(--ni-private-table-row-indent-level) - 1) *
-                ${controlHeight}
+        margin-left: max(
+            calc(
+                ${mediumPadding} +
+                    (var(--ni-private-table-row-indent-level) - 1) *
+                    ${controlHeight}
+            ),
+            0px
         );
     }
 
@@ -65760,7 +65741,6 @@ img.ProseMirror-separator {
         align-items: center;
         height: calc(${controlHeight} + 2 * ${borderWidth});
         border-top: calc(2 * ${borderWidth}) solid ${applicationBackgroundColor};
-        box-sizing: border-box;
         grid-template-columns:
             calc(
                 ${controlHeight} *
@@ -71072,7 +71052,6 @@ img.ProseMirror-separator {
     ${display$1('grid')}
 
     :host {
-        box-sizing: border-box;
         grid-template-columns: auto 1fr;
         grid-template-rows: auto 1fr;
     }
@@ -71121,7 +71100,6 @@ img.ProseMirror-separator {
     :host {
         align-items: center;
         height: ${controlHeight};
-        box-sizing: border-box;
         font: ${bodyFont};
         color: ${bodyFontColor};
     }
@@ -71230,7 +71208,6 @@ img.ProseMirror-separator {
         font: inherit;
         flex-grow: 1;
         outline: none;
-        box-sizing: border-box;
         position: relative;
         color: inherit;
         border-radius: 0px;
@@ -71535,7 +71512,6 @@ img.ProseMirror-separator {
     }
 
     .root {
-        box-sizing: border-box;
         position: relative;
         display: flex;
         flex-direction: row;
@@ -71804,7 +71780,6 @@ img.ProseMirror-separator {
     }
 
     .tooltip {
-        box-sizing: border-box;
         flex-shrink: 0;
         max-width: 440px;
         box-shadow: ${elevation2BoxShadow};
@@ -72057,7 +72032,6 @@ img.ProseMirror-separator {
     .positioning-region {
         display: flex;
         position: relative;
-        box-sizing: border-box;
         height: calc(${iconSize} * 2);
     }
 
@@ -79540,10 +79514,12 @@ img.ProseMirror-separator {
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleWaferMap());
 
   /**
-   * This utility will generate the appropriate display style, as well as a style rule
-   * to hide the host element when its `hidden` attribute is set.
+   * Each element should use the display utility which will create styles to:
+   * - Set the `:host` display property
+   * - Respond to the `hidden` attribute set on `:host`
+   * - Configure `box-sizing` for `:host`, all elements in shadow root, and `::before` / `::after` pseudoelements
    */
-  const display = (displayValue) => `${display$2(displayValue)}`;
+  const display = (displayValue) => `${display$2(displayValue)}:host{box-sizing:border-box;}*{box-sizing:border-box;}:host::before,:host::after,::before,::after{box-sizing:border-box;}`;
 
   const styles = css `
     ${display('inline-block')}