@ni/ok-components 1.12.2 → 1.12.3

package/dist/all-components-bundle.js

@@ -108474,8 +108474,6 @@ focus outline in that case.
 
         :host {
             --ni-private-ok-fv-split-button-background-image: none;
-            --ni-private-ok-fv-split-button-background-size: 100% 100%;
-            --ni-private-ok-fv-split-button-background-size-emphasis: 100% 100%;
             --ni-private-ok-fv-split-button-border: rgba(${actionRgbPartialColor}, 0.3);
             --ni-private-ok-fv-split-button-color: ${buttonLabelFontColor};
             position: relative;
@@ -108493,7 +108491,6 @@ focus outline in that case.
                 rgba(${borderRgbPartialColor}, 0.1)
             );
             --ni-private-ok-fv-split-button-border: rgba(${borderRgbPartialColor}, 0.1);
-            --ni-private-ok-fv-split-button-background-size-emphasis: calc(100% - 4px) calc(100% - 4px);
         }
 
         :host([appearance='outline'][appearance-variant='primary']) {
@@ -108530,6 +108527,16 @@ focus outline in that case.
             height: 100%;
         }
 
+        .split-button-container::before {
+            content: '';
+            position: absolute;
+            inset: 0;
+            border: ${borderWidth} solid var(--ni-private-ok-fv-split-button-border);
+            background-image: var(--ni-private-ok-fv-split-button-background-image);
+            background-repeat: no-repeat;
+            pointer-events: none;
+        }
+
         .split-button-primary,
         .split-button-toggle {
             appearance: none;
@@ -108538,12 +108545,12 @@ focus outline in that case.
             height: 100%;
             box-sizing: border-box;
             margin: 0;
-            border: ${borderWidth} solid var(--ni-private-ok-fv-split-button-border);
+            border: ${borderWidth} solid transparent;
             background-color: transparent;
-            background-image: var(--ni-private-ok-fv-split-button-background-image);
             background-position: center;
             background-repeat: no-repeat;
-            background-size: var(--ni-private-ok-fv-split-button-background-size);
+            background-origin: border-box;
+            background-size: 100% 100%;
             color: var(--ni-private-ok-fv-split-button-color);
             fill: currentcolor;
             font: ${buttonLabelFont};
@@ -108568,7 +108575,7 @@ focus outline in that case.
 
         .split-button-primary {
             padding: 0 ${standardPadding};
-            border-inline-end-color: transparent;
+            padding-inline-end: ${mediumPadding};
             white-space: nowrap;
         }
 
@@ -108578,8 +108585,17 @@ focus outline in that case.
             display: inline-flex;
             align-items: center;
             justify-content: center;
-            border-inline-start-color: var(--ni-private-ok-fv-split-button-border);
-            margin-inline-start: calc(-1 * ${borderWidth});
+            padding: 0;
+        }
+
+        .split-button-toggle::after {
+            content: '';
+            position: absolute;
+            inset-block: ${smallPadding};
+            inset-inline-start: calc(-1 * ${borderWidth});
+            width: calc(2 * ${borderWidth});
+            background: rgba(${borderRgbPartialColor}, 0.1);
+            pointer-events: none;
         }
 
         .split-button-toggle > * {
@@ -108587,40 +108603,31 @@ focus outline in that case.
             ${iconColor.cssCustomProperty}: currentColor;
         }
 
-        :host([appearance='ghost']) .split-button-primary,
-        :host([appearance='ghost']) .split-button-toggle {
-            border-color: transparent;
-            box-shadow: none;
-        }
-
         slot[name='menu']::slotted(*) {
             min-width: 100%;
-            margin: 4px 0 0;
+            margin: ${smallPadding} 0 0;
         }
     }
 
     @layer hover {
-        .split-button-primary:hover,
-        .split-button-toggle:hover {
+        .split-button-primary:enabled:hover,
+        .split-button-toggle:enabled:hover {
             border-color: ${borderHoverColor};
             box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;
-            background-size: var(--ni-private-ok-fv-split-button-background-size-emphasis);
             z-index: 1;
         }
 
-        :host([appearance='ghost']) .split-button-primary:hover,
-        :host([appearance='ghost']) .split-button-toggle:hover {
-            border-color: ${borderHoverColor};
-            box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;
+        .split-button-primary:enabled:hover + .split-button-toggle::after,
+        .split-button-toggle:enabled:hover::after {
+            visibility: hidden;
         }
     }
 
     @layer focusVisible {
-        .split-button-primary:focus-visible,
-        .split-button-toggle:focus-visible {
+        .split-button-primary:enabled:focus-visible,
+        .split-button-toggle:enabled:focus-visible {
             border-color: ${borderHoverColor};
             box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;
-            background-size: var(--ni-private-ok-fv-split-button-background-size-emphasis);
             z-index: 1;
         }
 
@@ -108629,16 +108636,15 @@ focus outline in that case.
             outline: ${borderWidth} solid ${borderHoverColor};
         }
 
-        :host([appearance='ghost']) .split-button-primary:focus-visible,
-        :host([appearance='ghost']) .split-button-toggle:focus-visible {
-            border-color: ${borderHoverColor};
-            box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;
+        .split-button-primary:focus-visible + .split-button-toggle::after,
+        .split-button-toggle:focus-visible::after {
+            visibility: hidden;
         }
     }
 
     @layer active {
-        .split-button-primary:active,
-        .split-button-toggle:active,
+        .split-button-primary:enabled:active,
+        .split-button-toggle:enabled:active,
         :host([open]) .split-button-toggle {
             border-color: ${borderHoverColor};
             box-shadow: none;
@@ -108646,10 +108652,19 @@ focus outline in that case.
             background-size: calc(100% - 2px) calc(100% - 2px);
         }
 
-        :host([appearance='block']) .split-button-primary:active,
-        :host([appearance='block']) .split-button-toggle:active,
+        :host([open]) .split-button-toggle {
+            border-color: rgba(${fillSelectedRgbPartialColor}, 0.3);
+            background-size: 100% 100%;
+        }
+
+        :host([open]) .split-button-toggle::after {
+            visibility: hidden;
+        }
+
+        :host([appearance='block']) .split-button-primary:enabled:active,
+        :host([appearance='block']) .split-button-toggle:enabled:active,
         :host([appearance='block'][open]) .split-button-toggle {
-            background-size: calc(100% - 4px) calc(100% - 4px);
+            background-color: ${applicationBackgroundColor};
         }
 
         :host([appearance='outline'][appearance-variant='accent']) .split-button-primary:active,
@@ -108686,7 +108701,6 @@ focus outline in that case.
   const template$b = html `
     <div
         class="split-button-container"
-        ${ref('splitButtonContainer')}
     >
         <button
             class="split-button-primary"
@@ -108701,6 +108715,7 @@ focus outline in that case.
         </button>
         <button
             class="split-button-toggle"
+            ${ref('toggleButton')}
             type="button"
             ?disabled="${x => x.disabled}"
             aria-label="${x => `More actions for ${x.label}`}"
@@ -108720,9 +108735,9 @@ focus outline in that case.
                 auto-update-mode="auto"
                 horizontal-inset
                 horizontal-positioning-mode="dynamic"
+                horizontal-default-position="end"
                 vertical-positioning-mode="locktodefault"
                 vertical-default-position="bottom"
-                horizontal-scaling="anchor"
                 ${ref('region')}
             >
                 <span part="menu">
@@ -108810,14 +108825,14 @@ focus outline in that case.
               prev.removeEventListener('change', this.menuChangeHandler);
           }
           if (this.region) {
-              this.region.anchorElement = this.splitButtonContainer ?? this;
+              this.region.anchorElement = this.toggleButton ?? this;
               this.region.addEventListener('change', this.menuChangeHandler, { capture: true });
           }
       }
       /** @internal */
-      splitButtonContainerChanged() {
+      toggleButtonChanged() {
           if (this.region) {
-              this.region.anchorElement = this.splitButtonContainer ?? this;
+              this.region.anchorElement = this.toggleButton ?? this;
           }
       }
       setOpen(nextOpen) {
@@ -108849,7 +108864,7 @@ focus outline in that case.
   ], FvSplitButton.prototype, "appearanceVariant", void 0);
   __decorate([
       observable
-  ], FvSplitButton.prototype, "splitButtonContainer", void 0);
+  ], FvSplitButton.prototype, "toggleButton", void 0);
   __decorate([
       observable
   ], FvSplitButton.prototype, "region", void 0);