@ni/spright-components 1.0.30 → 1.0.32

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

@@ -2411,28 +2411,18 @@ yi.getOrCreate().withPrefix("nimble").register(Hm())
 const Bm=xe`
     ${Fo("inline-block")}
 
-    :host {
-        font: ${ec};
-        --ni-private-breadcrumb-link-font-color: ${tc};
-        --ni-private-breadcrumb-link-active-font-color: ${lc};
-    }
-
-    :host([appearance='prominent']) {
-        --ni-private-breadcrumb-link-font-color: ${mc};
-        --ni-private-breadcrumb-link-active-font-color: ${Cc};
-    }
-
     .list {
         display: flex;
         flex-wrap: wrap;
     }
 
-    ::slotted(*:first-child) {
-        padding-left: 0px;
+    ::slotted(:last-child) {
+        font: ${Bc};
+        color: ${tc};
     }
 
-    ::slotted(*:not([href]):last-child) {
-        font: ${Bc};
+    :host([appearance='prominent']) ::slotted(:last-child) {
+        color: ${mc};
     }
 `
 class qm extends wn{}e([le],qm.prototype,"appearance",void 0)
@@ -2447,68 +2437,88 @@ const Um=qm.compose({baseName:"breadcrumb",baseClass:wn,template:(e,t)=>G`
 `,styles:Bm})
 yi.getOrCreate().withPrefix("nimble").register(Um())
 const jm=xe`
-    ${Fo("inline-flex")}
+    @layer base, hover, focusVisible, active, disabled;
 
-    :host {
-        height: ${vl};
-        padding-left: calc(4px - ${kl});
+    @layer base {
+        ${Fo("inline-flex")}
 
-        ${""}
-        color: ${Nc};
-        font: ${ec};
-    }
+        :host {
+            height: ${vl};
 
-    .listitem {
-        display: flex;
-        align-items: center;
-    }
+            ${""}
+            color: ${nc};
+            font: ${ec};
+        }
 
-    .control {
-        color: var(--ni-private-breadcrumb-link-font-color);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border: ${kl} solid transparent;
-        padding-right: calc(4px - ${kl});
-        text-decoration: none;
-    }
+        .listitem {
+            display: flex;
+            align-items: center;
+        }
 
-    .control:hover {
-        text-decoration: underline;
-    }
+        .control {
+            color: ${tc};
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            text-decoration: none;
+        }
 
-    .control${No} {
-        border: ${kl} solid ${rl};
-        outline: 2px solid ${rl};
-        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: ${wl};
+            padding-right: ${wl};
+        }
+
+        slot[name='separator'] {
+            display: flex;
+            align-items: center;
+        }
+
+        slot[name='separator'] svg {
+            width: ${Sl};
+            height: ${Sl};
+            fill: ${_c};
+        }
     }
 
-    .content {
-        pointer-events: none;
+    @layer hover {
+        .control:any-link:hover {
+            text-decoration: underline;
+        }
     }
 
-    [part='end'] {
-        display: none;
+    @layer focusVisible {
+        .control${No} {
+            outline: none;
+            box-shadow: inset 0px -1px;
+            text-decoration: underline;
+            color: ${rl};
+        }
     }
 
-    slot[name='separator'] {
-        display: flex;
-        align-items: center;
+    @layer active {
+        .control:active {
+            color: ${lc};
+            text-decoration: underline;
+            box-shadow: none;
+        }
     }
 
-    slot[name='separator'] svg {
-        width: ${Sl};
-        height: ${Sl};
-        fill: ${_c};
+    @layer disabled {
+        .control:not(:any-link) {
+            color: ${nc};
+        }
     }
 `
 const Wm=class extends yn{}.compose({baseName:"breadcrumb-item",baseClass:yn,template:(e,t)=>G`