@ni/nimble-components 8.1.10 → 8.2.1

package/dist/all-components-bundle.js

@@ -18214,7 +18214,12 @@
     }
 
     [part='start'] {
-        display: none;
+        display: contents;
+    }
+
+    slot[name='start']::slotted(*) {
+        margin-left: calc(${standardPadding} / 2);
+        flex: none;
     }
 
     .control {
@@ -18501,14 +18506,38 @@
     <div
         role="button"
         part="control"
-        aria-pressed="${(x) => x.checked}"
-        aria-disabled="${(x) => x.disabled}"
-        aria-readonly="${(x) => x.readOnly}"
-        tabindex="${(x) => (x.disabled ? null : 0)}"
+        tabindex="${x => (x.disabled ? null : 0)}"
         @keypress="${(x, c) => x.keypressHandler(c.event)}"
         @click="${(x, c) => x.clickHandler(c.event)}"
-        class="control ${(x) => (x.checked ? 'checked' : '')}"
+        class="control ${x => (x.checked ? 'checked' : '')}"
         ?disabled="${x => x.disabled}"
+        ${'' /* Configure aria-disabled, aria-readonly, and aria-pressed based on the
+    toggle button's state to keep the ARIA attributes consistent with the component's
+    state without a client having to configure ARIA attributes directly */}
+        aria-disabled="${x => x.disabled}"
+        aria-readonly="${x => x.readOnly}"
+        aria-pressed="${x => x.checked}"
+        ${'' /* Configure all other ARIA attributes based on the aria attributes
+    configured on the toggle button */}
+        aria-atomic="${x => x.ariaAtomic}"
+        aria-busy="${x => x.ariaBusy}"
+        aria-controls="${x => x.ariaControls}"
+        aria-current="${x => x.ariaCurrent}"
+        aria-describedby="${x => x.ariaDescribedby}"
+        aria-details="${x => x.ariaDetails}"
+        aria-errormessage="${x => x.ariaErrormessage}"
+        aria-expanded="${x => x.ariaExpanded}"
+        aria-flowto="${x => x.ariaFlowto}"
+        aria-haspopup="${x => x.ariaHaspopup}"
+        aria-hidden="${x => x.ariaHidden}"
+        aria-invalid="${x => x.ariaInvalid}"
+        aria-keyshortcuts="${x => x.ariaKeyshortcuts}"
+        aria-label="${x => x.ariaLabel}"
+        aria-labelledby="${x => x.ariaLabelledby}"
+        aria-live="${x => x.ariaLive}"
+        aria-owns="${x => x.ariaOwns}"
+        aria-relevant="${x => x.ariaRelevant}"
+        aria-roledescription="${x => x.ariaRoledescription}"
         ${ref('control')}
     >
         ${startSlotTemplate(context, definition)}
@@ -18551,7 +18580,7 @@
     __decorate([
         attr({ attribute: 'content-hidden', mode: 'boolean' })
     ], ToggleButton.prototype, "contentHidden", void 0);
-    applyMixins(ToggleButton, StartEnd);
+    applyMixins(ToggleButton, StartEnd, DelegatesARIAButton);
     const nimbleToggleButton = ToggleButton.compose({
         baseName: 'toggle-button',
         template,