@ni/ok-components 1.12.2 → 1.12.3

package/dist/all-components-bundle.min.js

@@ -20051,8 +20051,6 @@ const x8=It`
 
         :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(${Jl}, 0.3);
             --ni-private-ok-fv-split-button-color: ${Hd};
             position: relative;
@@ -20070,7 +20068,6 @@ const x8=It`
                 rgba(${dc}, 0.1)
             );
             --ni-private-ok-fv-split-button-border: rgba(${dc}, 0.1);
-            --ni-private-ok-fv-split-button-background-size-emphasis: calc(100% - 4px) calc(100% - 4px);
         }
 
         :host([appearance='outline'][appearance-variant='primary']) {
@@ -20107,6 +20104,16 @@ const x8=It`
             height: 100%;
         }
 
+        .split-button-container::before {
+            content: '';
+            position: absolute;
+            inset: 0;
+            border: ${Hc} 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;
@@ -20115,12 +20122,12 @@ const x8=It`
             height: 100%;
             box-sizing: border-box;
             margin: 0;
-            border: ${Hc} solid var(--ni-private-ok-fv-split-button-border);
+            border: ${Hc} 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: ${Vd};
@@ -20145,7 +20152,7 @@ const x8=It`
 
         .split-button-primary {
             padding: 0 ${Nc};
-            border-inline-end-color: transparent;
+            padding-inline-end: ${Pc};
             white-space: nowrap;
         }
 
@@ -20155,8 +20162,17 @@ const x8=It`
             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 * ${Hc});
+            padding: 0;
+        }
+
+        .split-button-toggle::after {
+            content: '';
+            position: absolute;
+            inset-block: ${Bc};
+            inset-inline-start: calc(-1 * ${Hc});
+            width: calc(2 * ${Hc});
+            background: rgba(${dc}, 0.1);
+            pointer-events: none;
         }
 
         .split-button-toggle > * {
@@ -20164,40 +20180,31 @@ const x8=It`
             ${vc.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: ${Bc} 0 0;
         }
     }
 
     @layer hover {
-        .split-button-primary:hover,
-        .split-button-toggle:hover {
+        .split-button-primary:enabled:hover,
+        .split-button-toggle:enabled:hover {
             border-color: ${gc};
             box-shadow: 0 0 0 ${Hc} ${gc} 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: ${gc};
-            box-shadow: 0 0 0 ${Hc} ${gc} 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: ${gc};
             box-shadow: 0 0 0 ${Hc} ${gc} inset;
-            background-size: var(--ni-private-ok-fv-split-button-background-size-emphasis);
             z-index: 1;
         }
 
@@ -20206,16 +20213,15 @@ const x8=It`
             outline: ${Hc} solid ${gc};
         }
 
-        :host([appearance='ghost']) .split-button-primary:focus-visible,
-        :host([appearance='ghost']) .split-button-toggle:focus-visible {
-            border-color: ${gc};
-            box-shadow: 0 0 0 ${Hc} ${gc} 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: ${gc};
             box-shadow: none;
@@ -20223,10 +20229,19 @@ const x8=It`
             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(${rc}, 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: ${Ql};
         }
 
         :host([appearance='outline'][appearance-variant='accent']) .split-button-primary:active,
@@ -20261,7 +20276,6 @@ const x8=It`
 `,C8=Q`
     <div
         class="split-button-container"
-        ${zt("splitButtonContainer")}
     >
         <button
             class="split-button-primary"
@@ -20273,6 +20287,7 @@ const x8=It`
         </button>
         <button
             class="split-button-toggle"
+            ${zt("toggleButton")}
             type="button"
             ?disabled="${t=>t.disabled}"
             aria-label="${t=>`More actions for ${t.label}`}"
@@ -20289,9 +20304,9 @@ const x8=It`
                 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"
                 ${zt("region")}
             >
                 <span part="menu">
@@ -20300,7 +20315,7 @@ const x8=It`
             </${Iv}>
         `)}
 `,k8="outline",S8="default"
-class $8 extends qe{constructor(){super(...arguments),this.label="Primary function",this.disabled=!1,this.open=!1,this.appearance=k8,this.appearanceVariant=S8,this.documentClickHandler=t=>{this.open&&(t.composedPath().includes(this)||this.setOpen(!1))},this.keydownHandler=t=>{"Escape"===t.key&&this.setOpen(!1)},this.menuChangeHandler=()=>{this.handleMenuChange()}}disabledChanged(){this.disabled&&this.setOpen(!1)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.documentClickHandler),document.addEventListener("keydown",this.keydownHandler)}disconnectedCallback(){document.removeEventListener("click",this.documentClickHandler),document.removeEventListener("keydown",this.keydownHandler),super.disconnectedCallback()}handlePrimaryClick(){this.disabled||this.dispatchEvent(new CustomEvent("trigger",{bubbles:!0,composed:!0}))}handleToggleClick(){this.disabled||this.setOpen(!this.open)}handleMenuChange(){this.setOpen(!1)}regionChanged(t,e){t&&t.removeEventListener("change",this.menuChangeHandler),this.region&&(this.region.anchorElement=this.splitButtonContainer??this,this.region.addEventListener("change",this.menuChangeHandler,{capture:!0}))}splitButtonContainerChanged(){this.region&&(this.region.anchorElement=this.splitButtonContainer??this)}setOpen(t){this.open!==t&&(this.open=t,this.dispatchEvent(new CustomEvent("toggle",{bubbles:!0,composed:!0,detail:{open:this.open}})))}}t([ft],$8.prototype,"label",void 0),t([ft({mode:"boolean"})],$8.prototype,"disabled",void 0),t([ft({mode:"boolean"})],$8.prototype,"open",void 0),t([ft()],$8.prototype,"appearance",void 0),t([ft({attribute:"appearance-variant"})],$8.prototype,"appearanceVariant",void 0),t([k],$8.prototype,"splitButtonContainer",void 0),t([k],$8.prototype,"region",void 0)
+class $8 extends qe{constructor(){super(...arguments),this.label="Primary function",this.disabled=!1,this.open=!1,this.appearance=k8,this.appearanceVariant=S8,this.documentClickHandler=t=>{this.open&&(t.composedPath().includes(this)||this.setOpen(!1))},this.keydownHandler=t=>{"Escape"===t.key&&this.setOpen(!1)},this.menuChangeHandler=()=>{this.handleMenuChange()}}disabledChanged(){this.disabled&&this.setOpen(!1)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.documentClickHandler),document.addEventListener("keydown",this.keydownHandler)}disconnectedCallback(){document.removeEventListener("click",this.documentClickHandler),document.removeEventListener("keydown",this.keydownHandler),super.disconnectedCallback()}handlePrimaryClick(){this.disabled||this.dispatchEvent(new CustomEvent("trigger",{bubbles:!0,composed:!0}))}handleToggleClick(){this.disabled||this.setOpen(!this.open)}handleMenuChange(){this.setOpen(!1)}regionChanged(t,e){t&&t.removeEventListener("change",this.menuChangeHandler),this.region&&(this.region.anchorElement=this.toggleButton??this,this.region.addEventListener("change",this.menuChangeHandler,{capture:!0}))}toggleButtonChanged(){this.region&&(this.region.anchorElement=this.toggleButton??this)}setOpen(t){this.open!==t&&(this.open=t,this.dispatchEvent(new CustomEvent("toggle",{bubbles:!0,composed:!0,detail:{open:this.open}})))}}t([ft],$8.prototype,"label",void 0),t([ft({mode:"boolean"})],$8.prototype,"disabled",void 0),t([ft({mode:"boolean"})],$8.prototype,"open",void 0),t([ft()],$8.prototype,"appearance",void 0),t([ft({attribute:"appearance-variant"})],$8.prototype,"appearanceVariant",void 0),t([k],$8.prototype,"toggleButton",void 0),t([k],$8.prototype,"region",void 0)
 const _8=$8.compose({baseName:"fv-split-button",template:C8,styles:x8})
 Ei.getOrCreate().withPrefix("ok").register(_8())
 const I8=It`