@ni/ok-components 1.14.0 → 1.15.0

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

@@ -20502,9 +20502,32 @@ const l7=It`
         }
 
         .split-button-primary {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
             padding: 0 ${Nc};
             padding-inline-end: ${Pc};
             white-space: nowrap;
+            text-decoration: none;
+        }
+
+        slot[name='start']::slotted(*),
+        slot[name='end']::slotted(*) {
+            flex-shrink: 0;
+            color: currentColor;
+            ${vc.cssCustomProperty}: currentColor;
+        }
+
+        slot[name='start']::slotted(*) {
+            margin-inline-end: ${Bc};
+        }
+
+        slot[name='end']::slotted(*) {
+            margin-inline-start: ${Bc};
+        }
+
+        .split-button-primary-disabled {
+            cursor: default;
         }
 
         .split-button-toggle {
@@ -20538,21 +20561,21 @@ const l7=It`
     }
 
     @layer hover {
-        .split-button-primary:enabled:hover,
+        .split-button-primary:is(:enabled, [href]):hover,
         .split-button-toggle:enabled:hover {
             border-color: ${gc};
             box-shadow: 0 0 0 ${Hc} ${gc} inset;
             z-index: 1;
         }
 
-        .split-button-primary:enabled:hover + .split-button-toggle::after,
+        .split-button-primary:is(:enabled, [href]):hover + .split-button-toggle::after,
         .split-button-toggle:enabled:hover::after {
             visibility: hidden;
         }
     }
 
     @layer focusVisible {
-        .split-button-primary:enabled:focus-visible,
+        .split-button-primary:is(:enabled, [href]):focus-visible,
         .split-button-toggle:enabled:focus-visible {
             border-color: ${gc};
             box-shadow: 0 0 0 ${Hc} ${gc} inset;
@@ -20571,7 +20594,7 @@ const l7=It`
     }
 
     @layer active {
-        .split-button-primary:enabled:active,
+        .split-button-primary:is(:enabled, [href]):active,
         .split-button-toggle:enabled:active,
         :host([open]) .split-button-toggle {
             border-color: ${gc};
@@ -20589,7 +20612,7 @@ const l7=It`
             visibility: hidden;
         }
 
-        :host([appearance='block']) .split-button-primary:enabled:active,
+        :host([appearance='block']) .split-button-primary:is(:enabled, [href]):active,
         :host([appearance='block']) .split-button-toggle:enabled:active,
         :host([appearance='block'][open]) .split-button-toggle {
             background-color: ${Ql};
@@ -20607,6 +20630,14 @@ const l7=It`
             --ni-private-ok-fv-split-button-color: ${Ud};
         }
 
+        :host([disabled][appearance='block']) {
+            --ni-private-ok-fv-split-button-background-image: linear-gradient(
+                rgba(${dc}, 0.1),
+                rgba(${dc}, 0.1)
+            );
+            --ni-private-ok-fv-split-button-border: rgba(${dc}, 0.1);
+        }
+
         :host([disabled][appearance='outline']) {
             --ni-private-ok-fv-split-button-border: rgba(${dc}, 0.3);
         }
@@ -20615,6 +20646,15 @@ const l7=It`
         :host([disabled]) .split-button-toggle {
             cursor: default;
             box-shadow: none;
+            background-image: none;
+            background-size: 100% 100%;
+        }
+
+        :host([disabled]) slot[name='start']::slotted(*),
+        :host([disabled]) slot[name='end']::slotted(*),
+        :host([disabled]) .split-button-toggle > * {
+            opacity: 0.3;
+            ${vc.cssCustomProperty}: ${Hd};
         }
 
         :host([disabled][appearance='ghost']) .split-button-primary,
@@ -20634,7 +20674,9 @@ const l7=It`
             ?disabled="${t=>t.disabled}"
             @click="${t=>(t.handlePrimaryClick(),!0)}"
         >
-            ${t=>t.label}
+            <slot name="start"></slot>
+            <span>${t=>t.label}</span>
+            <slot name="end"></slot>
         </button>
         <button
             class="split-button-toggle"
@@ -20669,233 +20711,13 @@ const l7=It`
 class u7 extends qe{constructor(){super(...arguments),this.label="Primary function",this.disabled=!1,this.open=!1,this.appearance=d7,this.appearanceVariant=h7,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],u7.prototype,"label",void 0),t([ft({mode:"boolean"})],u7.prototype,"disabled",void 0),t([ft({mode:"boolean"})],u7.prototype,"open",void 0),t([ft()],u7.prototype,"appearance",void 0),t([ft({attribute:"appearance-variant"})],u7.prototype,"appearanceVariant",void 0),t([k],u7.prototype,"toggleButton",void 0),t([k],u7.prototype,"region",void 0)
 const p7=u7.compose({baseName:"fv-split-button",template:c7,styles:l7})
 Ei.getOrCreate().withPrefix("ok").register(p7())
-const f7=It`
-    @layer base, hover, focusVisible, active, disabled, top;
-
-    @layer base {
-        ${l8("inline-block")}
-
-        :host {
-            --ni-private-ok-fv-split-button-anchor-background-image: none;
-            --ni-private-ok-fv-split-button-anchor-background-size: 100% 100%;
-            --ni-private-ok-fv-split-button-anchor-background-size-emphasis: 100% 100%;
-            --ni-private-ok-fv-split-button-anchor-border: rgba(${Jl}, 0.3);
-            --ni-private-ok-fv-split-button-anchor-color: ${Hd};
-            position: relative;
-            height: ${Fc};
-            vertical-align: middle;
-        }
-
-        :host([appearance='ghost']) {
-            --ni-private-ok-fv-split-button-anchor-border: transparent;
-        }
-
-        :host([appearance='block']) {
-            --ni-private-ok-fv-split-button-anchor-background-image: linear-gradient(
-                rgba(${dc}, 0.1),
-                rgba(${dc}, 0.1)
-            );
-            --ni-private-ok-fv-split-button-anchor-border: rgba(${dc}, 0.1);
-            --ni-private-ok-fv-split-button-anchor-background-size-emphasis: calc(100% - 4px) calc(100% - 4px);
-        }
-
-        :host([appearance='outline'][appearance-variant='primary']) {
-            --ni-private-ok-fv-split-button-anchor-border: rgb(${Jl});
-        }
-
-        :host([appearance='outline'][appearance-variant='accent']) {
-            --ni-private-ok-fv-split-button-anchor-border: ${Ic};
-            --ni-private-ok-fv-split-button-anchor-color: ${_c};
-        }
-
-        :host([appearance='block'][appearance-variant='primary']) {
-            --ni-private-ok-fv-split-button-anchor-background-image: linear-gradient(
-                ${Cc},
-                ${Cc}
-            );
-            --ni-private-ok-fv-split-button-anchor-border: ${Cc};
-            --ni-private-ok-fv-split-button-anchor-color: ${kc};
-        }
-
-        :host([appearance='block'][appearance-variant='accent']) {
-            --ni-private-ok-fv-split-button-anchor-background-image: linear-gradient(
-                ${Sc},
-                ${Sc}
-            );
-            --ni-private-ok-fv-split-button-anchor-border: ${Sc};
-            --ni-private-ok-fv-split-button-anchor-color: ${$c};
-        }
-
-        .split-button-container {
-            position: relative;
-            display: inline-flex;
-            align-items: stretch;
-            height: 100%;
-        }
-
-        .split-button-primary,
-        .split-button-toggle {
-            appearance: none;
-            position: relative;
-            z-index: 0;
-            height: 100%;
-            box-sizing: border-box;
-            margin: 0;
-            border: ${Hc} solid var(--ni-private-ok-fv-split-button-anchor-border);
-            background-color: transparent;
-            background-image: var(--ni-private-ok-fv-split-button-anchor-background-image);
-            background-position: center;
-            background-repeat: no-repeat;
-            background-size: var(--ni-private-ok-fv-split-button-anchor-background-size);
-            color: var(--ni-private-ok-fv-split-button-anchor-color);
-            fill: currentcolor;
-            font: ${Vd};
-            cursor: pointer;
-            outline: none;
-            transition:
-                box-shadow ${nh} ease-in-out,
-                border-color ${nh} ease-in-out,
-                background-size ${nh} ease-in-out;
-        }
-
-        .split-button-primary {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            padding: 0 ${Nc};
-            border-inline-end-color: transparent;
-            white-space: nowrap;
-            text-decoration: none;
-        }
-
-        .split-button-primary::before,
-        .split-button-toggle::before {
-            content: '';
-            position: absolute;
-            inset: 0;
-            pointer-events: none;
-            outline: 0px solid transparent;
-            outline-offset: -3px;
-            transition: outline ${nh} ease-in-out;
-        }
-
-        .split-button-toggle {
-            width: ${Fc};
-            min-width: ${Fc};
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            border-inline-start-color: var(--ni-private-ok-fv-split-button-anchor-border);
-            margin-inline-start: calc(-1 * ${Hc});
-        }
-
-        .split-button-toggle > * {
-            color: currentColor;
-            ${vc.cssCustomProperty}: currentColor;
-        }
-
-        .split-button-primary-disabled {
-            cursor: default;
-        }
-
-        :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;
-        }
-    }
-
-    @layer hover {
-        .split-button-primary:hover,
-        .split-button-toggle:hover {
-            border-color: ${gc};
-            box-shadow: 0 0 0 ${Hc} ${gc} inset;
-            background-size: var(--ni-private-ok-fv-split-button-anchor-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;
-        }
-    }
-
-    @layer focusVisible {
-        .split-button-primary:focus-visible,
-        .split-button-toggle:focus-visible {
-            border-color: ${gc};
-            box-shadow: 0 0 0 ${Hc} ${gc} inset;
-            background-size: var(--ni-private-ok-fv-split-button-anchor-background-size-emphasis);
-            z-index: 1;
-        }
-
-        .split-button-primary:focus-visible::before,
-        .split-button-toggle:focus-visible::before {
-            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;
-        }
-    }
-
-    @layer active {
-        .split-button-primary:active,
-        .split-button-toggle:active,
-        :host([open]) .split-button-toggle {
-            border-color: ${gc};
-            box-shadow: none;
-            background-image: linear-gradient(${sc}, ${sc});
-            background-size: calc(100% - 2px) calc(100% - 2px);
-        }
-
-        :host([appearance='block']) .split-button-primary:active,
-        :host([appearance='block']) .split-button-toggle:active,
-        :host([appearance='block'][open]) .split-button-toggle {
-            background-size: calc(100% - 4px) calc(100% - 4px);
-        }
-
-        :host([appearance='outline'][appearance-variant='accent']) .split-button-primary:active,
-        :host([appearance='outline'][appearance-variant='accent']) .split-button-toggle:active,
-        :host([appearance='outline'][appearance-variant='accent'][open]) .split-button-toggle {
-            color: ${_c};
-        }
-    }
-
-    @layer disabled {
-        :host([disabled]) {
-            --ni-private-ok-fv-split-button-anchor-color: ${Ud};
-        }
-
-        :host([disabled][appearance='outline']) {
-            --ni-private-ok-fv-split-button-anchor-border: rgba(${dc}, 0.3);
-        }
-
-        :host([disabled]) .split-button-primary,
-        :host([disabled]) .split-button-toggle {
-            cursor: default;
-            box-shadow: none;
-        }
-
-        :host([disabled][appearance='ghost']) .split-button-primary,
-        :host([disabled][appearance='ghost']) .split-button-toggle {
-            border-color: transparent;
-        }
-    }
-
-    @layer top {}
+const f7=Q`
+    <slot name="start"></slot>
+    <span>${t=>t.label}</span>
+    <slot name="end"></slot>
 `,m7=Q`
     <div
         class="split-button-container"
-        ${zt("splitButtonContainer")}
     >
         ${qt(t=>!t.disabled&&t.href.length>0,Q`
                 <a
@@ -20906,7 +20728,7 @@ const f7=It`
                     download="${t=>t.download||void 0}"
                     @click="${t=>(t.handlePrimaryClick(),!0)}"
                 >
-                    ${t=>t.label}
+                    ${f7}
                 </a>
             `)}
         ${qt(t=>t.disabled||0===t.href.length,Q`
@@ -20914,11 +20736,12 @@ const f7=It`
                     class="split-button-primary split-button-primary-disabled"
                     aria-disabled="${t=>t.disabled}"
                 >
-                    ${t=>t.label}
+                    ${f7}
                 </span>
             `)}
         <button
             class="split-button-toggle"
+            ${zt("toggleButton")}
             type="button"
             ?disabled="${t=>t.disabled}"
             aria-label="${t=>`More actions for ${t.label}`}"
@@ -20935,9 +20758,9 @@ const f7=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">
@@ -20946,8 +20769,8 @@ const f7=It`
             </${Iv}>
         `)}
 `,g7="outline",v7="default"
-class b7 extends qe{constructor(){super(...arguments),this.label="Primary function",this.href="",this.target="",this.rel="",this.download="",this.disabled=!1,this.open=!1,this.appearance=g7,this.appearanceVariant=v7,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],b7.prototype,"label",void 0),t([ft],b7.prototype,"href",void 0),t([ft],b7.prototype,"target",void 0),t([ft],b7.prototype,"rel",void 0),t([ft],b7.prototype,"download",void 0),t([ft({mode:"boolean"})],b7.prototype,"disabled",void 0),t([ft({mode:"boolean"})],b7.prototype,"open",void 0),t([ft()],b7.prototype,"appearance",void 0),t([ft({attribute:"appearance-variant"})],b7.prototype,"appearanceVariant",void 0),t([k],b7.prototype,"splitButtonContainer",void 0),t([k],b7.prototype,"region",void 0)
-const y7=b7.compose({baseName:"fv-split-button-anchor",template:m7,styles:f7})
+class b7 extends qe{constructor(){super(...arguments),this.label="Primary function",this.href="",this.target="",this.rel="",this.download="",this.disabled=!1,this.open=!1,this.appearance=g7,this.appearanceVariant=v7,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],b7.prototype,"label",void 0),t([ft],b7.prototype,"href",void 0),t([ft],b7.prototype,"target",void 0),t([ft],b7.prototype,"rel",void 0),t([ft],b7.prototype,"download",void 0),t([ft({mode:"boolean"})],b7.prototype,"disabled",void 0),t([ft({mode:"boolean"})],b7.prototype,"open",void 0),t([ft()],b7.prototype,"appearance",void 0),t([ft({attribute:"appearance-variant"})],b7.prototype,"appearanceVariant",void 0),t([k],b7.prototype,"toggleButton",void 0),t([k],b7.prototype,"region",void 0)
+const y7=b7.compose({baseName:"fv-split-button-anchor",template:m7,styles:l7})
 Ei.getOrCreate().withPrefix("ok").register(y7())
 const w7=It`
     ${l8("block")}