@ni/ok-components 1.3.2 → 1.3.3

package/dist/all-components-bundle.js

@@ -21133,7 +21133,6 @@ so this becomes the fallback color for the slot */ ''}
       styles: styles$1g
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCard());
-  const cardTag = 'nimble-card';
 
   const styles$1f = css `
     ${display$2('inline-flex')}
@@ -100052,8 +100051,10 @@ focus outline in that case.
         }
 
         .card-shell {
-            display: block;
+            display: grid;
             width: 100%;
+            height: 100%;
+            min-height: inherit;
             box-sizing: border-box;
             padding: ${standardPadding};
             border-radius: 8px;
@@ -100071,10 +100072,27 @@ focus outline in that case.
             --ni-private-card-button-border-selected-color: transparent;
         }
 
+        .card-button-shell::part(control) {
+            display: flex;
+            flex-direction: column;
+            align-items: stretch;
+        }
+
+        .card-shell > .card-layout,
+        .card-shell > .card-button-content,
+        .card-button-content > .card-layout {
+            height: 100%;
+        }
+
+        .card-button-content {
+            flex: 1 1 auto;
+        }
+
         .card-layout {
             display: grid;
             grid-template-columns: minmax(0, 1fr);
             align-items: start;
+            min-height: 100%;
         }
 
         .card-layout.has-media {
@@ -100109,10 +100127,11 @@ focus outline in that case.
 
         .main-region {
             min-width: 0;
-            display: grid;
-            grid-template-columns: minmax(0, 1fr);
+            display: flex;
+            flex-direction: column;
             gap: ${mediumPadding};
             text-align: left;
+            align-self: stretch;
         }
 
         .header-row {
@@ -100173,6 +100192,7 @@ focus outline in that case.
             align-items: center;
             justify-content: space-between;
             gap: ${mediumPadding};
+            margin-top: auto;
             font: ${tooltipCaptionFont};
             color: ${tooltipCaptionFontColor};
             text-transform: uppercase;
@@ -100199,7 +100219,10 @@ focus outline in that case.
             display: block;
         }
 
-        ::slotted([slot='badges']),
+        ::slotted([slot='badges']) {
+            max-width: 100%;
+        }
+
         ::slotted([slot='footer-start']),
         ::slotted([slot='footer-end']) {
             display: block;
@@ -100374,12 +100397,9 @@ focus outline in that case.
                 </div>
             </${cardButtonTag}>
         `, html `
-            <${cardTag}
-                class="card-shell card-static-shell"
-                part="card-shell"
-            >
+            <div class="card-shell card-static-shell" part="card-shell">
                 ${cardContentTemplate}
-            </${cardTag}>
+            </div>
         `)}
 `;