@ni/nimble-components 29.7.4 → 29.7.5

package/dist/all-components-bundle.js

@@ -16280,7 +16280,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Mon, 01 Jul 2024 22:51:48 GMT
+   * Generated on Mon, 01 Jul 2024 23:50:55 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -20001,28 +20001,18 @@
   const styles$P = css `
     ${display('inline-block')}
 
-    :host {
-        font: ${linkFont};
-        --ni-private-breadcrumb-link-font-color: ${linkFontColor};
-        --ni-private-breadcrumb-link-active-font-color: ${linkActiveFontColor};
-    }
-
-    :host([appearance='prominent']) {
-        --ni-private-breadcrumb-link-font-color: ${linkProminentFontColor};
-        --ni-private-breadcrumb-link-active-font-color: ${linkActiveProminentFontColor};
-    }
-
     .list {
         display: flex;
         flex-wrap: wrap;
     }
 
-    ::slotted(*:first-child) {
-        padding-left: 0px;
+    ::slotted(:last-child) {
+        font: ${bodyEmphasizedFont};
+        color: ${linkFontColor};
     }
 
-    ::slotted(*:not([href]):last-child) {
-        font: ${bodyEmphasizedFont};
+    :host([appearance='prominent']) ::slotted(:last-child) {
+        color: ${linkProminentFontColor};
     }
 `;
 
@@ -20043,70 +20033,90 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBreadcrumb());
 
   const styles$O = css `
-    ${display('inline-flex')}
+    @layer base, hover, focusVisible, active, disabled;
 
-    :host {
-        height: ${controlHeight};
-        padding-left: calc(4px - ${borderWidth});
+    @layer base {
+        ${display('inline-flex')}
 
-        ${
+        :host {
+            height: ${controlHeight};
+
+            ${
 /* When href removed the .control element is also removed
- so this becomes the fallback color for the slot */ ''}
-        color: ${bodyFontColor};
-        font: ${linkFont};
-    }
+so this becomes the fallback color for the slot */ ''}
+            color: ${linkDisabledFontColor};
+            font: ${linkFont};
+        }
 
-    .listitem {
-        display: flex;
-        align-items: center;
-    }
+        .listitem {
+            display: flex;
+            align-items: center;
+        }
 
-    .control {
-        color: var(--ni-private-breadcrumb-link-font-color);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border: ${borderWidth} solid transparent;
-        padding-right: calc(4px - ${borderWidth});
-        text-decoration: none;
-    }
+        .control {
+            color: ${linkFontColor};
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            text-decoration: none;
+        }
 
-    .control:hover {
-        text-decoration: underline;
-    }
+        [part='start'] {
+            display: none;
+        }
 
-    .control${focusVisible} {
-        border: ${borderWidth} solid ${borderHoverColor};
-        outline: 2px solid ${borderHoverColor};
-        outline-offset: 1px;
-    }
+        .content {
+            pointer-events: none;
+        }
 
-    .control:active {
-        color: var(--ni-private-breadcrumb-link-active-font-color);
-        text-decoration: none;
-    }
+        [part='end'] {
+            display: none;
+        }
 
-    [part='start'] {
-        display: none;
+        .separator {
+            padding-left: ${mediumPadding};
+            padding-right: ${mediumPadding};
+        }
+
+        slot[name='separator'] {
+            display: flex;
+            align-items: center;
+        }
+
+        slot[name='separator'] svg {
+            width: ${iconSize};
+            height: ${iconSize};
+            fill: ${placeholderFontColor};
+        }
     }
 
-    .content {
-        pointer-events: none;
+    @layer hover {
+        .control:any-link:hover {
+            text-decoration: underline;
+        }
     }
 
-    [part='end'] {
-        display: none;
+    @layer focusVisible {
+        .control${focusVisible} {
+            outline: none;
+            box-shadow: inset 0px -1px;
+            text-decoration: underline;
+            color: ${borderHoverColor};
+        }
     }
 
-    slot[name='separator'] {
-        display: flex;
-        align-items: center;
+    @layer active {
+        .control:active {
+            color: ${linkActiveFontColor};
+            text-decoration: underline;
+            box-shadow: none;
+        }
     }
 
-    slot[name='separator'] svg {
-        width: ${iconSize};
-        height: ${iconSize};
-        fill: ${placeholderFontColor};
+    @layer disabled {
+        .control:not(:any-link) {
+            color: ${linkDisabledFontColor};
+        }
     }
 `;