@ni/nimble-components 29.7.4 → 29.7.5

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

@@ -2411,28 +2411,18 @@ yi.getOrCreate().withPrefix("nimble").register(Vm())
 const Hm=xe`
     ${Ro("inline-block")}
 
-    :host {
-        font: ${Ql};
-        --ni-private-breadcrumb-link-font-color: ${ec};
-        --ni-private-breadcrumb-link-active-font-color: ${ac};
-    }
-
-    :host([appearance='prominent']) {
-        --ni-private-breadcrumb-link-font-color: ${fc};
-        --ni-private-breadcrumb-link-active-font-color: ${xc};
-    }
-
     .list {
         display: flex;
         flex-wrap: wrap;
     }
 
-    ::slotted(*:first-child) {
-        padding-left: 0px;
+    ::slotted(:last-child) {
+        font: ${Hc};
+        color: ${ec};
     }
 
-    ::slotted(*:not([href]):last-child) {
-        font: ${Hc};
+    :host([appearance='prominent']) ::slotted(:last-child) {
+        color: ${fc};
     }
 `
 class Bm extends wn{}e([le],Bm.prototype,"appearance",void 0)
@@ -2447,68 +2437,88 @@ const qm=Bm.compose({baseName:"breadcrumb",baseClass:wn,template:(e,t)=>G`
 `,styles:Hm})
 yi.getOrCreate().withPrefix("nimble").register(qm())
 const Um=xe`
-    ${Ro("inline-flex")}
+    @layer base, hover, focusVisible, active, disabled;
 
-    :host {
-        height: ${gl};
-        padding-left: calc(4px - ${Cl});
+    @layer base {
+        ${Ro("inline-flex")}
 
-        ${""}
-        color: ${Fc};
-        font: ${Ql};
-    }
+        :host {
+            height: ${gl};
 
-    .listitem {
-        display: flex;
-        align-items: center;
-    }
+            ${""}
+            color: ${tc};
+            font: ${Ql};
+        }
 
-    .control {
-        color: var(--ni-private-breadcrumb-link-font-color);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border: ${Cl} solid transparent;
-        padding-right: calc(4px - ${Cl});
-        text-decoration: none;
-    }
+        .listitem {
+            display: flex;
+            align-items: center;
+        }
 
-    .control:hover {
-        text-decoration: underline;
-    }
+        .control {
+            color: ${ec};
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            text-decoration: none;
+        }
 
-    .control${Fo} {
-        border: ${Cl} solid ${sl};
-        outline: 2px solid ${sl};
-        outline-offset: 1px;
-    }
+        [part='start'] {
+            display: none;
+        }
 
-    .control:active {
-        color: var(--ni-private-breadcrumb-link-active-font-color);
-        text-decoration: none;
-    }
+        .content {
+            pointer-events: none;
+        }
 
-    [part='start'] {
-        display: none;
+        [part='end'] {
+            display: none;
+        }
+
+        .separator {
+            padding-left: ${yl};
+            padding-right: ${yl};
+        }
+
+        slot[name='separator'] {
+            display: flex;
+            align-items: center;
+        }
+
+        slot[name='separator'] svg {
+            width: ${kl};
+            height: ${kl};
+            fill: ${Ic};
+        }
     }
 
-    .content {
-        pointer-events: none;
+    @layer hover {
+        .control:any-link:hover {
+            text-decoration: underline;
+        }
     }
 
-    [part='end'] {
-        display: none;
+    @layer focusVisible {
+        .control${Fo} {
+            outline: none;
+            box-shadow: inset 0px -1px;
+            text-decoration: underline;
+            color: ${sl};
+        }
     }
 
-    slot[name='separator'] {
-        display: flex;
-        align-items: center;
+    @layer active {
+        .control:active {
+            color: ${ac};
+            text-decoration: underline;
+            box-shadow: none;
+        }
     }
 
-    slot[name='separator'] svg {
-        width: ${kl};
-        height: ${kl};
-        fill: ${Ic};
+    @layer disabled {
+        .control:not(:any-link) {
+            color: ${tc};
+        }
     }
 `
 const jm=class extends yn{}.compose({baseName:"breadcrumb-item",baseClass:yn,template:(e,t)=>G`