@ni/nimble-components 32.9.3 → 32.10.0

package/dist/all-components-bundle.js

@@ -16323,7 +16323,7 @@
 
   const template$O = html `<slot></slot>`;
 
-  const styles$10 = css `
+  const styles$11 = css `
     ${display('contents')}
 `;
 
@@ -16438,7 +16438,7 @@
   ], ThemeProvider.prototype, "theme", void 0);
   const nimbleDesignSystemProvider = ThemeProvider.compose({
       baseName: 'theme-provider',
-      styles: styles$10,
+      styles: styles$11,
       template: template$O
   });
   DesignSystem.getOrCreate()
@@ -16663,7 +16663,7 @@
       }
   }
 
-  const styles$$ = css `
+  const styles$10 = css `
     @layer base, hover, focusVisible, active, disabled;
 
     @layer base {
@@ -16846,7 +16846,7 @@
       baseName: 'anchor',
       baseClass: Anchor$1,
       template: template$N,
-      styles: styles$$,
+      styles: styles$10,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -16958,7 +16958,7 @@
     padding: 0;
 `;
 
-  const styles$_ = css `
+  const styles$$ = css `
     @layer base, checked, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -17242,8 +17242,8 @@
             }
         `));
 
-  const styles$Z = css `
-    ${styles$_}
+  const styles$_ = css `
+    ${styles$$}
     ${buttonAppearanceVariantStyles}
 
     .control {
@@ -17346,7 +17346,7 @@
   const nimbleAnchorButton = AnchorButton.compose({
       baseName: 'anchor-button',
       template: template$M,
-      styles: styles$Z,
+      styles: styles$_,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17354,7 +17354,7 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorButton());
   const anchorButtonTag = 'nimble-anchor-button';
 
-  const styles$Y = css `
+  const styles$Z = css `
     ${display('grid')}
 
     :host {
@@ -17539,7 +17539,7 @@
   const nimbleAnchorMenuItem = AnchorMenuItem.compose({
       baseName: 'anchor-menu-item',
       template: template$L,
-      styles: styles$Y,
+      styles: styles$Z,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17549,7 +17549,7 @@
       .register(nimbleAnchorMenuItem());
   const anchorMenuItemTag = 'nimble-anchor-menu-item';
 
-  const styles$X = css `
+  const styles$Y = css `
     ${display('inline-flex')}
 
     :host {
@@ -17719,14 +17719,14 @@
   const nimbleAnchorTab = AnchorTab.compose({
       baseName: 'anchor-tab',
       template: template$K,
-      styles: styles$X,
+      styles: styles$Y,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTab());
 
-  const styles$W = css `
+  const styles$X = css `
     ${display('flex')}
 
     :host {
@@ -17766,8 +17766,8 @@
     }
 `;
 
-  const styles$V = css `
-    ${styles$_}
+  const styles$W = css `
+    ${styles$$}
     ${buttonAppearanceVariantStyles}
 `;
 
@@ -17863,7 +17863,7 @@
       baseName: 'button',
       baseClass: Button$1,
       template: template$J,
-      styles: styles$V,
+      styles: styles$W,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -18717,7 +18717,7 @@
     -webkit-user-select: none;
 `;
 
-  const styles$U = css `
+  const styles$V = css `
     ${display('inline-flex')}
 
     :host {
@@ -18728,8 +18728,7 @@
     }
 
     .icon {
-        width: 100%;
-        height: 100%;
+        display: contents;
     }
 
     :host([severity='error']) {
@@ -18749,6 +18748,7 @@
     }
 
     .icon svg {
+        display: inline-flex;
         fill: ${iconColor};
         width: 100%;
         height: 100%;
@@ -18771,7 +18771,7 @@
       const composedIcon = iconClass.compose({
           baseName,
           template: template$I,
-          styles: styles$U
+          styles: styles$V
       });
       DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
   };
@@ -19162,14 +19162,14 @@
   const nimbleAnchorTabs = AnchorTabs.compose({
       baseName: 'anchor-tabs',
       template: template$H,
-      styles: styles$W,
+      styles: styles$X,
       shadowOptions: {
           delegatesFocus: false
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTabs());
 
-  const styles$T = css `
+  const styles$U = css `
     ${display('block')}
 
     :host {
@@ -19412,7 +19412,7 @@
   const nimbleAnchorTreeItem = AnchorTreeItem.compose({
       baseName: 'anchor-tree-item',
       template: template$G,
-      styles: styles$T,
+      styles: styles$U,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -19428,7 +19428,7 @@
       zIndex1000: '1000'
   };
 
-  const styles$S = css `
+  const styles$T = css `
     ${display('block')}
 
     :host {
@@ -19459,7 +19459,7 @@
       baseName: 'anchored-region',
       baseClass: AnchoredRegion$1,
       template: anchoredRegionTemplate,
-      styles: styles$S
+      styles: styles$T
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -19540,7 +19540,7 @@
   const themeBehavior = (theme, styles) => new ThemeStyleSheetBehavior(theme, styles);
   /* eslint-enable max-classes-per-file */
 
-  const styles$R = css `
+  const styles$S = css `
     ${display('flex')}
 
     :host {
@@ -19838,11 +19838,11 @@
   const nimbleBanner = Banner.compose({
       baseName: 'banner',
       template: template$F,
-      styles: styles$R
+      styles: styles$S
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBanner());
 
-  const styles$Q = css `
+  const styles$R = css `
     ${display('inline-block')}
 
     .list {
@@ -19872,11 +19872,11 @@
       baseName: 'breadcrumb',
       baseClass: Breadcrumb$1,
       template: breadcrumbTemplate,
-      styles: styles$Q
+      styles: styles$R
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBreadcrumb());
 
-  const styles$P = css `
+  const styles$Q = css `
     @layer base, hover, focusVisible, active, disabled;
 
     @layer base {
@@ -19973,14 +19973,14 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'breadcrumb-item',
       baseClass: BreadcrumbItem$1,
       template: breadcrumbItemTemplate,
-      styles: styles$P,
+      styles: styles$Q,
       separator: forwardSlash16X16.data
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleBreadcrumbItem());
 
-  const styles$O = css `
+  const styles$P = css `
     ${display('flex')}
 
     :host {
@@ -20020,11 +20020,11 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'card',
       baseClass: Card$1,
       template: template$E,
-      styles: styles$O
+      styles: styles$P
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCard());
 
-  const styles$N = css `
+  const styles$O = css `
     ${display('inline-flex')}
 
     :host {
@@ -20182,14 +20182,14 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleCardButton = CardButton.compose({
       baseName: 'card-button',
       template: buttonTemplate,
-      styles: styles$N,
+      styles: styles$O,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCardButton());
 
-  const styles$M = css `
+  const styles$N = css `
     .error-icon {
         display: none;
     }
@@ -20223,9 +20223,9 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const styles$L = css `
+  const styles$M = css `
     ${display('inline-grid')}
-    ${styles$M}
+    ${styles$N}
 
     :host {
         font: ${bodyFont};
@@ -20505,15 +20505,15 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'checkbox',
       baseClass: Checkbox$1,
       template: template$D,
-      styles: styles$L,
+      styles: styles$M,
       checkedIndicator: check16X16.data,
       indeterminateIndicator: minus16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCheckbox());
   const checkboxTag = 'nimble-checkbox';
 
-  const styles$K = css `
-    ${styles$_}
+  const styles$L = css `
+    ${styles$$}
     ${buttonAppearanceVariantStyles}
 
     @layer checked {
@@ -20659,7 +20659,7 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleToggleButton = ToggleButton.compose({
       baseName: 'toggle-button',
       template: template$C,
-      styles: styles$K,
+      styles: styles$L,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -20691,7 +20691,7 @@ so this becomes the fallback color for the slot */ ''}
   };
 
   // prettier-ignore
-  const styles$J = css `
+  const styles$K = css `
     ${display('inline-flex')}
 
     :host {
@@ -20960,6 +20960,21 @@ so this becomes the fallback color for the slot */ ''}
             }
         `));
 
+  const styles$J = css `
+    .annotated-label {
+        display: flex;
+        flex-direction: row;
+    }
+
+    .required-icon {
+        flex: none;
+        width: 5px;
+        height: 5px;
+        margin-top: 3px;
+        margin-left: ${smallPadding};
+    }
+`;
+
   /**
    * Types of dropdown appearance.
    * @public
@@ -20975,8 +20990,9 @@ so this becomes the fallback color for the slot */ ''}
   };
 
   const styles$I = css `
+    ${styles$K}
+    ${styles$N}
     ${styles$J}
-    ${styles$M}
 
     :host {
         --ni-private-hover-bottom-border-width: 2px;
@@ -21052,6 +21068,42 @@ so this becomes the fallback color for the slot */ ''}
             }
         `));
 
+  // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+  // See generation source in nimble-components/build/generate-icons
+  /**
+   * The icon component for the 'asterisk' icon
+   */
+  class IconAsterisk extends Icon {
+      constructor() {
+          super(asterisk5X5);
+      }
+  }
+  registerIcon('icon-asterisk', IconAsterisk);
+  const iconAsteriskTag = 'nimble-icon-asterisk';
+
+  /**
+   * Given the template for a control label, creates a new template that includes
+   * an icon next to the label to indicate whether or not the control is required.
+   *
+   * This function is intended to be used with components leveraging `mixinRequiredVisiblePattern`.
+   */
+  /* eslint-disable @typescript-eslint/indent */
+  function createRequiredVisibleLabelTemplate(labelTemplate) {
+      return html `
+        <div class="annotated-label">
+            ${labelTemplate}
+            ${when(x => x.requiredVisible, html `
+                <${iconAsteriskTag} class="required-icon" severity="error"></${iconAsteriskTag}>
+            `)}
+        </div>
+    `;
+  }
+
+  const labelTemplate$3 = createRequiredVisibleLabelTemplate(html `
+    <label part="label" class="label">
+        <slot></slot>
+    </label>
+`);
   /* eslint-disable @typescript-eslint/indent */
   // prettier-ignore
   const template$B = (context, definition) => html `
@@ -21065,9 +21117,7 @@ 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>
+        ${labelTemplate$3}
         <div class="control" part="control" ${ref('controlWrapper')}>
             ${startSlotTemplate(context, definition)}
             <slot name="control">
@@ -21077,6 +21127,7 @@ so this becomes the fallback color for the slot */ ''}
                     aria-controls="${x => x.ariaControls}"
                     aria-disabled="${x => x.ariaDisabled}"
                     aria-expanded="${x => x.ariaExpanded}"
+                    aria-required="${x => x.requiredVisible}"
                     aria-haspopup="listbox"
                     class="selected-value"
                     part="selected-value"
@@ -21158,10 +21209,30 @@ so this becomes the fallback color for the slot */ ''}
       }
   }
 
+  // As the returned class is internal to the function, we can't write a signature that uses is directly, so rely on inference
+  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type
+  function mixinRequiredVisiblePattern(base) {
+      /**
+       * The Mixin that provides the requiredVisible property and required-visible attribute
+       * to a component.
+       */
+      class RequiredVisibleElement extends base {
+          constructor() {
+              super(...arguments);
+              /*
+               * Show the required appearance of the control
+               */
+              this.requiredVisible = false;
+          }
+      }
+      attr({ attribute: 'required-visible', mode: 'boolean' })(RequiredVisibleElement.prototype, 'requiredVisible');
+      return RequiredVisibleElement;
+  }
+
   /**
    * A nimble-styed HTML combobox
    */
-  class Combobox extends mixinErrorPattern(FormAssociatedCombobox) {
+  class Combobox extends mixinErrorPattern(mixinRequiredVisiblePattern(FormAssociatedCombobox)) {
       constructor() {
           super(...arguments);
           this.appearance = DropdownAppearance.underline;
@@ -22664,18 +22735,6 @@ so this becomes the fallback color for the slot */ ''}
   }
   registerIcon('icon-arrows-repeat', IconArrowsRepeat);
 
-  // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
-  // See generation source in nimble-components/build/generate-icons
-  /**
-   * The icon component for the 'asterisk' icon
-   */
-  class IconAsterisk extends Icon {
-      constructor() {
-          super(asterisk5X5);
-      }
-  }
-  registerIcon('icon-asterisk', IconAsterisk);
-
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
@@ -26435,7 +26494,7 @@ so this becomes the fallback color for the slot */ ''}
 
   const styles$y = css `
     ${display('inline-block')}
-    ${styles$M}
+    ${styles$N}
 
     :host {
         font: ${bodyFont};
@@ -26889,7 +26948,8 @@ so this becomes the fallback color for the slot */ ''}
 
   const styles$w = css `
     ${display('inline-block')}
-    ${styles$M}
+    ${styles$N}
+    ${styles$J}
 
     .positioning-region {
         display: flex;
@@ -26907,7 +26967,7 @@ so this becomes the fallback color for the slot */ ''}
 
     .label-container {
         display: flex;
-        height: ${controlLabelFontLineHeight};
+        min-height: ${controlLabelFontLineHeight};
         gap: ${smallPadding};
         margin-bottom: ${smallPadding};
     }
@@ -26927,18 +26987,20 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
+  const labelTemplate$2 = createRequiredVisibleLabelTemplate(html `<slot name="label"></slot>`);
   /* eslint-disable @typescript-eslint/indent */
   const template$s = html `
     <template
         role="radiogroup"
         aria-disabled="${x => x.disabled}"
         aria-readonly="${x => x.readOnly}"
+        aria-required="${x => x.requiredVisible}"
         @click="${(x, c) => x.clickHandler(c.event)}"
         @keydown="${(x, c) => x.keydownHandler(c.event)}"
         @focusout="${(x, c) => x.focusOutHandler(c.event)}"
     >
         <div class="label-container">
-            <slot name="label"></slot>            
+            ${labelTemplate$2}
             <${iconExclamationMarkTag}
                 severity="error"
                 class="error-icon"
@@ -26962,7 +27024,7 @@ so this becomes the fallback color for the slot */ ''}
   /**
    * A nimble-styled grouping element for radio buttons
    */
-  class RadioGroup extends mixinErrorPattern(RadioGroup$1) {
+  class RadioGroup extends mixinErrorPattern(mixinRequiredVisiblePattern(RadioGroup$1)) {
   }
   const nimbleRadioGroup = RadioGroup.compose({
       baseName: 'radio-group',
@@ -45315,7 +45377,7 @@ img.ProseMirror-separator {
   }).withDefault(richTextLabelDefaults.richTextToggleNumberedListLabel);
 
   const styles$u = css `
-    ${styles$J}
+    ${styles$K}
 
     :host {
         height: auto;
@@ -45736,7 +45798,7 @@ img.ProseMirror-separator {
 
   const styles$t = css `
     ${display('inline-flex')}
-    ${styles$M}
+    ${styles$N}
 
     :host {
         font: ${bodyFont};
@@ -60563,8 +60625,9 @@ img.ProseMirror-separator {
       .register(nimbleRichTextViewer());
 
   const styles$r = css `
+    ${styles$K}
+    ${styles$N}
     ${styles$J}
-    ${styles$M}
 
     ${
 /* We are using flex `order` to define the visual ordering of the selected value,
@@ -60949,6 +61012,11 @@ img.ProseMirror-separator {
   const isListOptionGroup = (n) => {
       return n instanceof ListOptionGroup;
   };
+  const labelTemplate$1 = createRequiredVisibleLabelTemplate(html `
+    <label part="label" class="label" aria-hidden="true">
+        <slot ${ref('labelSlot')}></slot>
+    </label>
+`);
   /* eslint-disable @typescript-eslint/indent */
   // prettier-ignore
   const template$n = (context, definition) => html `
@@ -60966,6 +61034,7 @@ img.ProseMirror-separator {
         aria-haspopup="${x => (x.collapsible ? 'listbox' : null)}"
         aria-label="${x => x.labelContent}"
         aria-multiselectable="${x => x.ariaMultiSelectable}"
+        aria-required="${x => x.requiredVisible}"
         ?open="${x => x.open}"
         role="combobox"
         tabindex="${x => (!x.disabled ? '0' : null)}"
@@ -60976,9 +61045,7 @@ 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>
+        ${labelTemplate$1}
         ${when(x => x.collapsible, html `
             <div
                 class="control"
@@ -61115,7 +61182,7 @@ img.ProseMirror-separator {
   /**
    * A nimble-styled HTML select.
    */
-  class Select extends mixinErrorPattern(FormAssociatedSelect) {
+  class Select extends mixinErrorPattern(mixinRequiredVisiblePattern(FormAssociatedSelect)) {
       constructor() {
           super(...arguments);
           this.appearance = DropdownAppearance.underline;
@@ -74275,7 +74342,7 @@ focus outline in that case.
       .register(nimbleTableColumnText());
 
   const styles$8 = css `
-    ${styles$W}
+    ${styles$X}
 
     .tabpanel {
         overflow: auto;
@@ -74406,7 +74473,8 @@ focus outline in that case.
 
   const styles$6 = css `
     ${display('inline-flex')}
-    ${styles$M}
+    ${styles$N}
+    ${styles$J}
 
     :host {
         font: ${bodyFont};
@@ -74568,7 +74636,7 @@ focus outline in that case.
             }
         `));
 
-  const template$5 = () => html `
+  const labelTemplate = createRequiredVisibleLabelTemplate(html `
     <label
         part="label"
         for="control"
@@ -74576,6 +74644,9 @@ focus outline in that case.
     >
         <slot ${slotted('defaultSlottedNodes')}></slot>
     </label>
+`);
+  const template$5 = () => html `
+    ${labelTemplate}
     <div class="container">
         <textarea
             part="control"
@@ -74614,6 +74685,7 @@ focus outline in that case.
             aria-owns="${x => x.ariaOwns}"
             aria-relevant="${x => x.ariaRelevant}"
             aria-roledescription="${x => x.ariaRoledescription}"
+            aria-required="${x => x.requiredVisible}"
             @input="${x => x.onTextAreaInput()}"
             @change="${x => x.handleChange()}"
             ${ref('control')}
@@ -74630,7 +74702,7 @@ focus outline in that case.
   /**
    * A nimble-styed HTML text area
    */
-  class TextArea extends mixinErrorPattern(TextArea$1) {
+  class TextArea extends mixinErrorPattern(mixinRequiredVisiblePattern(TextArea$1)) {
       constructor() {
           super(...arguments);
           /**
@@ -74737,7 +74809,7 @@ focus outline in that case.
 
   const styles$5 = css `
     ${display('inline-block')}
-    ${styles$M}
+    ${styles$N}
 
     :host {
         font: ${bodyFont};