@ni/nimble-components 32.7.2 → 32.8.0

package/dist/all-components-bundle.js

@@ -20337,7 +20337,42 @@ so this becomes the fallback color for the slot */ ''}
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCardButton());
 
   const styles$M = css `
+    .error-icon {
+        display: none;
+    }
+
+    :host([error-visible]) .error-icon {
+        display: inline-flex;
+        width: ${iconSize};
+        height: ${iconSize};
+        flex: none;
+    }
+
+    .error-text {
+        display: none;
+    }
+
+    :host([error-visible]) .error-text {
+        display: block;
+        font: ${errorTextFont};
+        color: ${failColor};
+        width: 100%;
+        position: absolute;
+        bottom: calc(-1 * (${errorTextFontLineHeight} + 2px));
+        left: 0px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    :host([error-visible]) .error-text:empty {
+        display: none;
+    }
+`;
+
+  const styles$L = css `
     ${display('inline-flex')}
+    ${styles$M}
 
     :host {
         font: ${bodyFont};
@@ -20345,16 +20380,25 @@ so this becomes the fallback color for the slot */ ''}
         cursor: pointer;
         outline: none;
         ${userSelectNone}
+        min-height: ${controlHeight};
     }
 
     :host([disabled]) {
         cursor: default;
     }
 
+    .container {
+        position: relative;
+        display: grid;
+        grid-template-columns: auto 1fr auto;
+        grid-template-rows: ${bodyFontLineHeight} auto;
+        align-items: center;
+        width: 100%;
+    }
+
     .control {
-        width: calc(${controlHeight} / 2);
-        height: calc(${controlHeight} / 2);
-        flex-shrink: 0;
+        width: ${iconSize};
+        height: ${iconSize};
         border: ${borderWidth} solid ${borderColor};
         padding: 2px;
         display: inline-flex;
@@ -20367,6 +20411,8 @@ so this becomes the fallback color for the slot */ ''}
  * Set it to 0 to ensure the outline is just as high as the control.
  */ ''}
         line-height: 0;
+        grid-column: 1;
+        grid-row: 1;
     }
 
     @media (prefers-reduced-motion) {
@@ -20394,7 +20440,9 @@ so this becomes the fallback color for the slot */ ''}
     .label {
         font: inherit;
         color: ${bodyFontColor};
-        padding-left: 1ch;
+        padding-left: ${mediumPadding};
+        grid-column: 2;
+        grid-row: 1 / span 2;
         cursor: inherit;
     }
 
@@ -20411,16 +20459,13 @@ so this becomes the fallback color for the slot */ ''}
         height: ${iconSize};
         width: ${iconSize};
         overflow: visible;
+        fill: ${borderColor};
     }
 
     :host(.checked:not(.indeterminate)) slot[name='checked-indicator'] {
         display: contents;
     }
 
-    slot[name='checked-indicator'] svg {
-        fill: ${borderColor};
-    }
-
     :host([disabled]) slot[name='checked-indicator'] svg {
         fill: rgba(${borderRgbPartialColor}, 0.3);
     }
@@ -20442,6 +20487,18 @@ so this becomes the fallback color for the slot */ ''}
     :host([disabled]) slot[name='indeterminate-indicator'] svg {
         fill: rgba(${borderRgbPartialColor}, 0.3);
     }
+
+    .error-icon {
+        grid-column: 3;
+        grid-row: 1;
+        margin: 0px ${smallPadding};
+    }
+`;
+
+  const errorTextTemplate = html `
+    <div class="error-text" title="${x => x.errorText}" aria-live="polite">
+        ${x => x.errorText}
+    </div>
 `;
 
   const template$B = (_context, definition) => html `
@@ -20456,22 +20513,29 @@ so this becomes the fallback color for the slot */ ''}
         @click="${(x, c) => x.clickHandler(c.event)}"
         class="${x => (x.readOnly ? 'readonly' : '')} ${x => (x.checked ? 'checked' : '')} ${x => (x.indeterminate ? 'indeterminate' : '')}"
     >
-        <div part="control" class="control">
-            <slot name="checked-indicator">
-                ${definition.checkedIndicator || ''}
-            </slot>
-            <slot name="indeterminate-indicator">
-                ${definition.indeterminateIndicator || ''}
-            </slot>
-        </div>
-        <label
-            part="label"
-            class="${x => (x.defaultSlottedNodes?.length
+        <div part="container" class="container">
+            <div part="control" class="control">
+                <slot name="checked-indicator">
+                    ${definition.checkedIndicator || ''}
+                </slot>
+                <slot name="indeterminate-indicator">
+                    ${definition.indeterminateIndicator || ''}
+                </slot>
+            </div>
+            <label
+                part="label"
+                class="${x => (x.defaultSlottedNodes?.length
     ? 'label'
     : 'label label__hidden')}"
-        >
-            <slot ${slotted('defaultSlottedNodes')}></slot>
-        </label>
+            >
+                <slot ${slotted('defaultSlottedNodes')}></slot>
+            </label>
+            <${iconExclamationMarkTag}
+                severity="error"
+                class="error-icon"
+            ></${iconExclamationMarkTag}>
+            ${errorTextTemplate}
+        </div>
     </template>
 `;
 
@@ -20479,6 +20543,10 @@ so this becomes the fallback color for the slot */ ''}
    * A nimble-styled checkbox control.
    */
   class Checkbox extends Checkbox$1 {
+      constructor() {
+          super(...arguments);
+          this.errorVisible = false;
+      }
       /**
        * @internal
        */
@@ -20490,18 +20558,24 @@ so this becomes the fallback color for the slot */ ''}
   __decorate$1([
       attr({ attribute: 'tabindex', converter: nullableNumberConverter })
   ], Checkbox.prototype, "tabIndex", void 0);
+  __decorate$1([
+      attr({ attribute: 'error-text' })
+  ], Checkbox.prototype, "errorText", void 0);
+  __decorate$1([
+      attr({ attribute: 'error-visible', mode: 'boolean' })
+  ], Checkbox.prototype, "errorVisible", void 0);
   const nimbleCheckbox = Checkbox.compose({
       baseName: 'checkbox',
       baseClass: Checkbox$1,
       template: template$B,
-      styles: styles$M,
+      styles: styles$L,
       checkedIndicator: check16X16.data,
       indeterminateIndicator: minus16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCheckbox());
   const checkboxTag = 'nimble-checkbox';
 
-  const styles$L = css `
+  const styles$K = css `
     ${styles$_}
     ${buttonAppearanceVariantStyles}
 
@@ -20648,7 +20722,7 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleToggleButton = ToggleButton.compose({
       baseName: 'toggle-button',
       template: template$A,
-      styles: styles$L,
+      styles: styles$K,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -20656,12 +20730,6 @@ so this becomes the fallback color for the slot */ ''}
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleToggleButton());
   const toggleButtonTag = 'nimble-toggle-button';
 
-  const errorTextTemplate = html `
-    <div class="error-text" title="${x => x.errorText}" aria-live="polite">
-        ${x => x.errorText}
-    </div>
-`;
-
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
@@ -20686,7 +20754,7 @@ so this becomes the fallback color for the slot */ ''}
   };
 
   // prettier-ignore
-  const styles$K = css `
+  const styles$J = css `
     ${display('inline-flex')}
 
     :host {
@@ -20955,40 +21023,6 @@ so this becomes the fallback color for the slot */ ''}
             }
         `));
 
-  const styles$J = css `
-    .error-icon {
-        display: none;
-    }
-
-    :host([error-visible]) .error-icon {
-        display: inline-flex;
-        width: ${iconSize};
-        height: ${iconSize};
-        flex: none;
-    }
-
-    .error-text {
-        display: none;
-    }
-
-    :host([error-visible]) .error-text {
-        display: block;
-        font: ${errorTextFont};
-        color: ${failColor};
-        width: 100%;
-        position: absolute;
-        bottom: calc(-1 * (${errorTextFontLineHeight} + 2px));
-        left: 0px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
-
-    :host([error-visible]) .error-text:empty {
-        display: none;
-    }
-`;
-
   /**
    * Types of dropdown appearance.
    * @public
@@ -21004,8 +21038,8 @@ so this becomes the fallback color for the slot */ ''}
   };
 
   const styles$I = css `
-    ${styles$K}
     ${styles$J}
+    ${styles$M}
 
     :host {
         --ni-private-hover-bottom-border-width: 2px;
@@ -26514,7 +26548,7 @@ so this becomes the fallback color for the slot */ ''}
 
   const styles$y = css `
     ${display('inline-block')}
-    ${styles$J}
+    ${styles$M}
 
     :host {
         font: ${bodyFont};
@@ -26888,7 +26922,7 @@ so this becomes the fallback color for the slot */ ''}
 
   const styles$w = css `
     ${display('inline-block')}
-    ${styles$J}
+    ${styles$M}
 
     .positioning-region {
         display: flex;
@@ -45155,7 +45189,7 @@ img.ProseMirror-separator {
   }).withDefault(richTextLabelDefaults.richTextToggleNumberedListLabel);
 
   const styles$u = css `
-    ${styles$K}
+    ${styles$J}
 
     :host {
         height: auto;
@@ -45576,7 +45610,7 @@ img.ProseMirror-separator {
 
   const styles$t = css `
     ${display('inline-flex')}
-    ${styles$J}
+    ${styles$M}
 
     :host {
         font: ${bodyFont};
@@ -60340,8 +60374,8 @@ img.ProseMirror-separator {
       .register(nimbleRichTextViewer());
 
   const styles$r = css `
-    ${styles$K}
     ${styles$J}
+    ${styles$M}
 
     ${
 /* We are using flex `order` to define the visual ordering of the selected value,
@@ -66091,6 +66125,7 @@ focus outline in that case.
 
     .header-row-action-container {
         display: flex;
+        align-items: center;
     }
 
     .checkbox-container {
@@ -74172,7 +74207,7 @@ focus outline in that case.
 
   const styles$6 = css `
     ${display('inline-flex')}
-    ${styles$J}
+    ${styles$M}
 
     :host {
         font: ${bodyFont};
@@ -74517,7 +74552,7 @@ focus outline in that case.
 
   const styles$5 = css `
     ${display('inline-block')}
-    ${styles$J}
+    ${styles$M}
 
     :host {
         font: ${bodyFont};