@ni/nimble-components 8.1.11 → 8.3.0

package/dist/all-components-bundle.js

@@ -12342,6 +12342,7 @@
         fillSelectedRgbPartialColor: 'fill-selected-rgb-partial-color',
         fillHoverSelectedColor: 'fill-hover-selected-color',
         fillHoverColor: 'fill-hover-color',
+        fillDownColor: 'fill-down-color',
         borderColor: 'border-color',
         borderRgbPartialColor: 'border-rgb-partial-color',
         failColor: 'fail-color',
@@ -12598,10 +12599,11 @@
     const applicationBackgroundColor = DesignToken.create(styleNameFromTokenName(tokenNames.applicationBackgroundColor)).withDefault((element) => getColorForTheme(element, White, Black85, ForestGreen));
     DesignToken.create(styleNameFromTokenName(tokenNames.headerBackgroundColor)).withDefault((element) => getColorForTheme(element, Black7, Black80, ForestGreen));
     DesignToken.create(styleNameFromTokenName(tokenNames.sectionBackgroundColor)).withDefault((element) => getColorForTheme(element, Black30, Black91, ForestGreen));
-    const fillSelectedColor = DesignToken.create(styleNameFromTokenName(tokenNames.fillSelectedColor)).withDefault((element) => hexToRgbaCssColor(getFillSelectedColorForTheme(element), 0.3));
+    const fillSelectedColor = DesignToken.create(styleNameFromTokenName(tokenNames.fillSelectedColor)).withDefault((element) => hexToRgbaCssColor(getFillSelectedColorForTheme(element), 0.2));
     const fillSelectedRgbPartialColor = DesignToken.create(styleNameFromTokenName(tokenNames.fillSelectedRgbPartialColor)).withDefault((element) => hexToRgbPartial(getFillSelectedColorForTheme(element)));
     const fillHoverSelectedColor = DesignToken.create(styleNameFromTokenName(tokenNames.fillHoverSelectedColor)).withDefault((element) => hexToRgbaCssColor(getFillSelectedColorForTheme(element), 0.15));
     const fillHoverColor = DesignToken.create(styleNameFromTokenName(tokenNames.fillHoverColor)).withDefault((element) => hexToRgbaCssColor(getFillHoverColorForTheme(element), 0.1));
+    DesignToken.create(styleNameFromTokenName(tokenNames.fillDownColor)).withDefault((element) => hexToRgbaCssColor(getFillDownColorForTheme(element), 0.15));
     const borderColor = DesignToken.create(styleNameFromTokenName(tokenNames.borderColor)).withDefault((element) => getDefaultLineColorForTheme(element));
     const borderRgbPartialColor = DesignToken.create(styleNameFromTokenName(tokenNames.borderRgbPartialColor)).withDefault((element) => hexToRgbPartial(getDefaultLineColorForTheme(element)));
     const failColor = DesignToken.create(styleNameFromTokenName(tokenNames.failColor)).withDefault((element) => getFailColorForTheme(element));
@@ -12714,6 +12716,9 @@
     function getFillHoverColorForTheme(element) {
         return getColorForTheme(element, Black91, Black15, White);
     }
+    function getFillDownColorForTheme(element) {
+        return getColorForTheme(element, Black91, Black15, White);
+    }
 
     /* eslint-disable max-classes-per-file */
     /**
@@ -18214,7 +18219,12 @@
     }
 
     [part='start'] {
-        display: none;
+        display: contents;
+    }
+
+    slot[name='start']::slotted(*) {
+        margin-left: calc(${standardPadding} / 2);
+        flex: none;
     }
 
     .control {
@@ -18501,14 +18511,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 +18585,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,