@ndwnu/design-system 5.0.0 → 5.1.0

package/components/card/index.d.ts

@@ -1,6 +1,6 @@
-import { CardComponent } from './card.component';
+import { CardContentComponent } from './card-content';
 export * from './card-content';
 export * from './card-footer';
 export * from './card-header';
 export * from './card.component';
-export declare const CARD_COMPONENTS: (typeof CardComponent)[];
+export declare const CARD_COMPONENTS: (typeof CardContentComponent)[];

package/components/form-field/picker-button/picker-button.component.d.ts

@@ -6,6 +6,7 @@ export declare class PickerButtonComponent {
     readonly input: import("@angular/core").InputSignal<InputDirective | undefined>;
     readonly ariaLabel: import("@angular/core").InputSignal<string>;
     readonly required: import("@angular/core").InputSignal<InputType | undefined>;
+    private readonly platform;
     protected readonly icon: import("@angular/core").Signal<string | undefined>;
     protected onClick(): void;
     private getIcon;

package/components/index.d.ts

@@ -25,3 +25,4 @@ export * from './tab-group';
 export * from './tag';
 export * from './toast';
 export * from './tooltip';
+export * from './summary-card';

package/components/layout/layout.component.d.ts

@@ -1,11 +1,14 @@
-import { MenuItem } from '../main-navigation';
+import { MenuItem, NdwBrand } from '../main-navigation';
 import * as i0 from "@angular/core";
 export declare class LayoutComponent {
     applicationName: import("@angular/core").InputSignal<string>;
     topMenuItems: import("@angular/core").InputSignal<MenuItem[]>;
     bottomMenuItems: import("@angular/core").InputSignal<MenuItem[] | undefined>;
+    brand: import("@angular/core").InputSignal<NdwBrand>;
+    isCollapsible: import("@angular/core").InputSignal<boolean>;
+    isExpanded: import("@angular/core").InputSignal<boolean>;
     menuFooterTexts: import("@angular/core").InputSignal<string[] | undefined>;
     version: import("@angular/core").InputSignal<string | undefined>;
     static ɵfac: i0.ɵɵFactoryDeclaration<LayoutComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LayoutComponent, "ndw-layout", never, { "applicationName": { "alias": "applicationName"; "required": true; "isSignal": true; }; "topMenuItems": { "alias": "topMenuItems"; "required": true; "isSignal": true; }; "bottomMenuItems": { "alias": "bottomMenuItems"; "required": false; "isSignal": true; }; "menuFooterTexts": { "alias": "menuFooterTexts"; "required": false; "isSignal": true; }; "version": { "alias": "version"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LayoutComponent, "ndw-layout", never, { "applicationName": { "alias": "applicationName"; "required": true; "isSignal": true; }; "topMenuItems": { "alias": "topMenuItems"; "required": true; "isSignal": true; }; "bottomMenuItems": { "alias": "bottomMenuItems"; "required": false; "isSignal": true; }; "brand": { "alias": "brand"; "required": false; "isSignal": true; }; "isCollapsible": { "alias": "isCollapsible"; "required": false; "isSignal": true; }; "isExpanded": { "alias": "isExpanded"; "required": false; "isSignal": true; }; "menuFooterTexts": { "alias": "menuFooterTexts"; "required": false; "isSignal": true; }; "version": { "alias": "version"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }

package/components/main-navigation/main-navigation.imports.d.ts

@@ -6,4 +6,4 @@ import { BadgeComponent } from '../badge';
 import { IconComponent } from '../icon';
 import { MainNavigationMenuComponent } from '../main-navigation-menu';
 import { TooltipDirective } from '../tooltip';
-export declare const MAIN_NAVIGATION_IMPORTS: (typeof IconComponent | typeof NgTemplateOutlet | typeof TooltipDirective | typeof MainNavigationMenuComponent | typeof BadgeComponent | typeof CdkPortalOutlet | typeof NgClass | typeof OverlayModule | typeof RouterLink)[];
+export declare const MAIN_NAVIGATION_IMPORTS: (typeof BadgeComponent | typeof IconComponent | typeof NgTemplateOutlet | typeof RouterLink | typeof NgClass | typeof TooltipDirective | typeof MainNavigationMenuComponent | typeof CdkPortalOutlet | typeof OverlayModule)[];

package/components/pill/pill.model.d.ts

@@ -1,4 +1,4 @@
-export declare const enum PillColor {
+export declare enum PillColor {
     Green = "green",
     Gray = "gray",
     Blue = "blue",

package/components/summary-card/index.d.ts

@@ -0,0 +1,10 @@
+export * from './summary-card.model';
+export * from './summary-card.component';
+export * from './summary-card-actions/summary-card-actions.component';
+export * from './summary-card-action/summary-card-action.component';
+export * from './summary-card-avatar/summary-card-avatar.component';
+export * from './summary-card-content/summary-card-content.component';
+export * from './summary-card-header/summary-card-header.component';
+export * from './summary-card-tags/summary-card-tags.component';
+export * from './summary-card-tag/summary-card-tag.component';
+export * from './summary-card-subtitle/summary-card-subtitle.component';

package/components/summary-card/summary-card-action/summary-card-action.component.d.ts

@@ -0,0 +1,11 @@
+import { TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class SummaryCardActionComponent {
+    readonly iconName: import("@angular/core").InputSignal<string>;
+    readonly label: import("@angular/core").InputSignal<string>;
+    readonly disabled: import("@angular/core").InputSignal<boolean | undefined>;
+    readonly action: import("@angular/core").OutputEmitterRef<void>;
+    readonly template: import("@angular/core").Signal<TemplateRef<Element>>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SummaryCardActionComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SummaryCardActionComponent, "ndw-summary-card-action", never, { "iconName": { "alias": "iconName"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "action": "action"; }, never, never, true, never>;
+}

package/components/summary-card/summary-card-actions/summary-card-actions.component.d.ts

@@ -0,0 +1,9 @@
+import { SummaryActionsView } from '../summary-card.model';
+import { SummaryCardActionComponent } from '../summary-card-action/summary-card-action.component';
+import * as i0 from "@angular/core";
+export declare class SummaryCardActionsComponent {
+    readonly view: import("@angular/core").InputSignal<SummaryActionsView>;
+    readonly actions: import("@angular/core").Signal<readonly SummaryCardActionComponent[]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SummaryCardActionsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SummaryCardActionsComponent, "ndw-summary-card-actions", never, { "view": { "alias": "view"; "required": false; "isSignal": true; }; }, {}, ["actions"], never, true, never>;
+}

package/components/summary-card/summary-card-avatar/summary-card-avatar.component.d.ts

@@ -0,0 +1,8 @@
+import { SummaryVariant } from '../summary-card.model';
+import * as i0 from "@angular/core";
+export declare class SummaryCardAvatarComponent {
+    readonly variant: import("@angular/core").InputSignal<SummaryVariant>;
+    protected readonly variantClass: import("@angular/core").Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SummaryCardAvatarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SummaryCardAvatarComponent, "ndw-summary-card-avatar", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}

package/components/summary-card/summary-card-content/summary-card-content.component.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class SummaryCardContentComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SummaryCardContentComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SummaryCardContentComponent, "ndw-summary-card-content", never, {}, {}, never, ["*"], true, never>;
+}

package/components/summary-card/summary-card-header/summary-card-header.component.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class SummaryCardHeaderComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SummaryCardHeaderComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SummaryCardHeaderComponent, "ndw-summary-card-header", never, {}, {}, never, ["ndw-pill", "*", "ndw-summary-card-subtitle", "ndw-summary-card-actions"], true, never>;
+}

package/components/summary-card/summary-card-subtitle/summary-card-subtitle.component.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class SummaryCardSubtitleComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SummaryCardSubtitleComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SummaryCardSubtitleComponent, "ndw-summary-card-subtitle", never, {}, {}, never, ["ndw-icon", "*"], true, never>;
+}

package/components/summary-card/summary-card-tag/summary-card-tag.component.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class SummaryCardTagComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SummaryCardTagComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SummaryCardTagComponent, "ndw-summary-card-tag", never, {}, {}, never, ["*"], true, never>;
+}

package/components/summary-card/summary-card-tags/summary-card-tags.component.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class SummaryCardTagsComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SummaryCardTagsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SummaryCardTagsComponent, "ndw-summary-card-tags", never, {}, {}, never, ["*"], true, never>;
+}

package/components/summary-card/summary-card.component.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class SummaryCardComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SummaryCardComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SummaryCardComponent, "ndw-summary-card", never, {}, {}, never, ["ndw-summary-card-avatar", "ndw-summary-card-header", "ndw-summary-card-content", "ndw-summary-card-tags"], true, never>;
+}

package/components/summary-card/summary-card.model.d.ts

@@ -0,0 +1,2 @@
+export type SummaryVariant = 'default' | 'orange' | 'blue' | 'green' | 'yellow' | 'red' | 'purple';
+export type SummaryActionsView = 'visible' | 'popover' | 'auto';

package/core/style/styles.css

@@ -1172,3 +1172,189 @@ textarea[ndwInput] {
   display: grid;
   padding: var(--ndw-spacing-sm);
 }
+
+.ndw-summary-card {
+  display: block;
+}
+.ndw-summary-card__wrapper {
+  position: relative;
+  overflow: hidden;
+  display: grid;
+  gap: var(--ndw-spacing-md);
+  height: 100%;
+  align-items: start;
+  box-sizing: border-box;
+}
+.ndw-summary-card__wrapper:has(ndw-summary-card-avatar) {
+  grid-template-columns: max-content 1fr;
+}
+.ndw-summary-card__wrapper:has(a:focus:not(:active)) {
+  outline: var(--ndw-border-size-sm) solid var(--ndw-color-secondary-500);
+}
+.ndw-summary-card__content {
+  display: grid;
+  gap: var(--ndw-spacing-xs);
+}
+.ndw-summary-card .ndw-summary-card-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ndw-spacing-xs);
+}
+.ndw-summary-card .ndw-summary-card-tag {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: var(--ndw-spacing-2xs);
+  align-items: center;
+  border: 1px solid var(--ndw-color-grey-100);
+  border-radius: var(--ndw-border-radius-xs);
+  padding: var(--ndw-spacing-2xs);
+  color: var(--ndw-color-grey-500);
+  font-size: var(--ndw-font-size-xs);
+}
+.ndw-summary-card .ndw-summary-card-tag ndw-icon {
+  font-size: var(--ndw-font-size-sm);
+}
+.ndw-summary-card .ndw-summary-card-tag img {
+  display: block;
+  height: var(--ndw-font-size-sm);
+}
+.ndw-summary-card .ndw-summary-card-subtitle {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  align-items: center;
+  gap: var(--ndw-spacing-3xs);
+  color: var(--ndw-color-grey-500);
+  font-size: var(--ndw-font-size-xs);
+}
+.ndw-summary-card .ndw-summary-card-subtitle ndw-icon {
+  font-size: var(--ndw-font-size-sm);
+}
+.ndw-summary-card .ndw-summary-card-subtitle__text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ndw-summary-card .ndw-summary-card-header {
+  display: flex;
+  gap: var(--ndw-spacing-xs);
+}
+.ndw-summary-card .ndw-summary-card-header__wrapper {
+  display: grid;
+  gap: var(--ndw-spacing-2xs);
+  justify-items: left;
+}
+.ndw-summary-card .ndw-summary-card-header__title {
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin: 0;
+  font-size: var(--ndw-base-font-size);
+  font-weight: var(--ndw-font-weight-bold);
+  font-family: var(--ndw-font-family-heading);
+}
+.ndw-summary-card .ndw-summary-card-header__title a {
+  color: inherit;
+  text-decoration: none;
+  font-family: var(--ndw-font-family-heading);
+}
+.ndw-summary-card .ndw-summary-card-header__title a:hover {
+  text-decoration: underline;
+}
+.ndw-summary-card .ndw-summary-card-header__title a:after {
+  content: "";
+  position: absolute;
+  inset: 0;
+}
+.ndw-summary-card .ndw-summary-card-header__title a:focus {
+  outline: 0;
+}
+.ndw-summary-card .ndw-summary-card-content {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  font-family: var(--ndw-font-family-body);
+  font-size: var(--ndw-font-size-sm);
+  color: var(--ndw-color-grey-500);
+}
+.ndw-summary-card .ndw-summary-card-avatar {
+  display: grid;
+  place-content: center;
+  position: relative;
+  width: 30px;
+  aspect-ratio: 1/1;
+  border-radius: 50%;
+  font-size: var(--ndw-font-size-sm);
+}
+.ndw-summary-card .ndw-summary-card-avatar.ndw-summary-card-avatar--default {
+  color: var(--ndw-color-grey-700);
+  background-color: var(--ndw-color-grey-300);
+}
+.ndw-summary-card .ndw-summary-card-avatar.ndw-summary-card-avatar--orange {
+  color: var(--ndw-color-primary-700);
+  background-color: var(--ndw-color-primary-050);
+}
+.ndw-summary-card .ndw-summary-card-avatar.ndw-summary-card-avatar--blue {
+  color: var(--ndw-color-info-500);
+  background-color: var(--ndw-color-info-100);
+}
+.ndw-summary-card .ndw-summary-card-avatar.ndw-summary-card-avatar--green {
+  color: var(--ndw-color-positive-500);
+  background-color: var(--ndw-color-positive-100);
+}
+.ndw-summary-card .ndw-summary-card-avatar.ndw-summary-card-avatar--red {
+  color: var(--ndw-color-critical-500);
+  background-color: var(--ndw-color-critical-100);
+}
+.ndw-summary-card .ndw-summary-card-avatar.ndw-summary-card-avatar--yellow {
+  color: var(--ndw-color-warning-500);
+  background-color: var(--ndw-color-warning-100);
+}
+.ndw-summary-card .ndw-summary-card-avatar.ndw-summary-card-avatar--purple {
+  color: var(--ndw-color-alternative-500);
+  background-color: var(--ndw-color-alternative-100);
+}
+.ndw-summary-card .ndw-summary-card-avatar > img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 50%;
+}
+.ndw-summary-card .ndw-summary-card-avatar ndw-icon {
+  font-size: var(--ndw-font-size-lg);
+}
+.ndw-summary-card .ndw-summary-card-actions {
+  flex: 1;
+  justify-items: right;
+}
+.ndw-summary-card .ndw-summary-card-actions--auto {
+  container-type: inline-size;
+}
+.ndw-summary-card .ndw-summary-card-actions .actions {
+  gap: var(--ndw-spacing-2xs);
+}
+.ndw-summary-card .ndw-summary-card-actions .actions--popover {
+  display: grid;
+}
+.ndw-summary-card .ndw-summary-card-actions .actions--visible, .ndw-summary-card .ndw-summary-card-actions .actions--auto {
+  display: flex;
+}
+.ndw-summary-card .ndw-summary-card-actions .popover-wrapper {
+  display: block;
+}
+@container (width > 140px) {
+  .ndw-summary-card .ndw-summary-card-actions .popover-wrapper {
+    display: none;
+  }
+}
+.ndw-summary-card .ndw-summary-card-actions .regular-wrapper {
+  display: none;
+}
+@container (width > 140px) {
+  .ndw-summary-card .ndw-summary-card-actions .regular-wrapper {
+    display: block;
+  }
+}

package/core/style/styles.scss

@@ -1172,3 +1172,189 @@ textarea[ndwInput] {
   display: grid;
   padding: var(--ndw-spacing-sm);
 }
+
+.ndw-summary-card {
+  display: block;
+}
+.ndw-summary-card__wrapper {
+  position: relative;
+  overflow: hidden;
+  display: grid;
+  gap: var(--ndw-spacing-md);
+  height: 100%;
+  align-items: start;
+  box-sizing: border-box;
+}
+.ndw-summary-card__wrapper:has(ndw-summary-card-avatar) {
+  grid-template-columns: max-content 1fr;
+}
+.ndw-summary-card__wrapper:has(a:focus:not(:active)) {
+  outline: var(--ndw-border-size-sm) solid var(--ndw-color-secondary-500);
+}
+.ndw-summary-card__content {
+  display: grid;
+  gap: var(--ndw-spacing-xs);
+}
+.ndw-summary-card .ndw-summary-card-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ndw-spacing-xs);
+}
+.ndw-summary-card .ndw-summary-card-tag {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: var(--ndw-spacing-2xs);
+  align-items: center;
+  border: 1px solid var(--ndw-color-grey-100);
+  border-radius: var(--ndw-border-radius-xs);
+  padding: var(--ndw-spacing-2xs);
+  color: var(--ndw-color-grey-500);
+  font-size: var(--ndw-font-size-xs);
+}
+.ndw-summary-card .ndw-summary-card-tag ndw-icon {
+  font-size: var(--ndw-font-size-sm);
+}
+.ndw-summary-card .ndw-summary-card-tag img {
+  display: block;
+  height: var(--ndw-font-size-sm);
+}
+.ndw-summary-card .ndw-summary-card-subtitle {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  align-items: center;
+  gap: var(--ndw-spacing-3xs);
+  color: var(--ndw-color-grey-500);
+  font-size: var(--ndw-font-size-xs);
+}
+.ndw-summary-card .ndw-summary-card-subtitle ndw-icon {
+  font-size: var(--ndw-font-size-sm);
+}
+.ndw-summary-card .ndw-summary-card-subtitle__text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ndw-summary-card .ndw-summary-card-header {
+  display: flex;
+  gap: var(--ndw-spacing-xs);
+}
+.ndw-summary-card .ndw-summary-card-header__wrapper {
+  display: grid;
+  gap: var(--ndw-spacing-2xs);
+  justify-items: left;
+}
+.ndw-summary-card .ndw-summary-card-header__title {
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin: 0;
+  font-size: var(--ndw-base-font-size);
+  font-weight: var(--ndw-font-weight-bold);
+  font-family: var(--ndw-font-family-heading);
+}
+.ndw-summary-card .ndw-summary-card-header__title a {
+  color: inherit;
+  text-decoration: none;
+  font-family: var(--ndw-font-family-heading);
+}
+.ndw-summary-card .ndw-summary-card-header__title a:hover {
+  text-decoration: underline;
+}
+.ndw-summary-card .ndw-summary-card-header__title a:after {
+  content: "";
+  position: absolute;
+  inset: 0;
+}
+.ndw-summary-card .ndw-summary-card-header__title a:focus {
+  outline: 0;
+}
+.ndw-summary-card .ndw-summary-card-content {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  font-family: var(--ndw-font-family-body);
+  font-size: var(--ndw-font-size-sm);
+  color: var(--ndw-color-grey-500);
+}
+.ndw-summary-card .ndw-summary-card-avatar {
+  display: grid;
+  place-content: center;
+  position: relative;
+  width: 30px;
+  aspect-ratio: 1/1;
+  border-radius: 50%;
+  font-size: var(--ndw-font-size-sm);
+}
+.ndw-summary-card .ndw-summary-card-avatar.ndw-summary-card-avatar--default {
+  color: var(--ndw-color-grey-700);
+  background-color: var(--ndw-color-grey-300);
+}
+.ndw-summary-card .ndw-summary-card-avatar.ndw-summary-card-avatar--orange {
+  color: var(--ndw-color-primary-700);
+  background-color: var(--ndw-color-primary-050);
+}
+.ndw-summary-card .ndw-summary-card-avatar.ndw-summary-card-avatar--blue {
+  color: var(--ndw-color-info-500);
+  background-color: var(--ndw-color-info-100);
+}
+.ndw-summary-card .ndw-summary-card-avatar.ndw-summary-card-avatar--green {
+  color: var(--ndw-color-positive-500);
+  background-color: var(--ndw-color-positive-100);
+}
+.ndw-summary-card .ndw-summary-card-avatar.ndw-summary-card-avatar--red {
+  color: var(--ndw-color-critical-500);
+  background-color: var(--ndw-color-critical-100);
+}
+.ndw-summary-card .ndw-summary-card-avatar.ndw-summary-card-avatar--yellow {
+  color: var(--ndw-color-warning-500);
+  background-color: var(--ndw-color-warning-100);
+}
+.ndw-summary-card .ndw-summary-card-avatar.ndw-summary-card-avatar--purple {
+  color: var(--ndw-color-alternative-500);
+  background-color: var(--ndw-color-alternative-100);
+}
+.ndw-summary-card .ndw-summary-card-avatar > img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 50%;
+}
+.ndw-summary-card .ndw-summary-card-avatar ndw-icon {
+  font-size: var(--ndw-font-size-lg);
+}
+.ndw-summary-card .ndw-summary-card-actions {
+  flex: 1;
+  justify-items: right;
+}
+.ndw-summary-card .ndw-summary-card-actions--auto {
+  container-type: inline-size;
+}
+.ndw-summary-card .ndw-summary-card-actions .actions {
+  gap: var(--ndw-spacing-2xs);
+}
+.ndw-summary-card .ndw-summary-card-actions .actions--popover {
+  display: grid;
+}
+.ndw-summary-card .ndw-summary-card-actions .actions--visible, .ndw-summary-card .ndw-summary-card-actions .actions--auto {
+  display: flex;
+}
+.ndw-summary-card .ndw-summary-card-actions .popover-wrapper {
+  display: block;
+}
+@container (width > 140px) {
+  .ndw-summary-card .ndw-summary-card-actions .popover-wrapper {
+    display: none;
+  }
+}
+.ndw-summary-card .ndw-summary-card-actions .regular-wrapper {
+  display: none;
+}
+@container (width > 140px) {
+  .ndw-summary-card .ndw-summary-card-actions .regular-wrapper {
+    display: block;
+  }
+}